add new summary page

Strides-APP/app/api/apiCharge.js

@@ -23,6 +23,9 @@ export default {
   getChargeSummary: (params) => {
     return get(prefix + 'getChargeSummary', params);
   },
+  getChargeSummaryV2: (params) => {
+    return get(prefix + 'getReceipt', params);
+  },
   //获取充电接口状态的接口
   getCurrentStatus: (params) => {
     return get(prefix + 'checkConnectorStatus', params);

Strides-APP/app/i18n/locales/en.js

@@ -253,6 +253,7 @@ export default {
     labelAvailableTotal: "Available/Total",
     labelPower: "Power",
     labelRate: "Rate",
+    labelRates: "Rates",
     labelStatus: "Status",
     labelTimeElapsed: "Time Elapsed",
     labelTotalCharges: "Total Charges",
@@ -429,5 +430,27 @@ export default {
     noData: "You not have any membership",
     errMembershipNo: "Please type Membership No",
     errUploadCard: "Please upload Membership Card"
+  },
+  receipt: {
+    breakdownChargingFees: "Charging Fees Breakdown",
+    breakdownIdlesFees: "Idles Fees Breakdown",
+    breakdownPayment: "Payment",
+    breakdownReservationFees: "Reservation Fees Breakdown",
+    chargingSessionComplete: "Your charging session is complete.",
+    labelChargTransSubtotal: "Charging Transaction Subtotal (w 8% GST):",
+    labelDateTime: "Date Time:",
+    labelDurationReservation: "Duration of Reservation:",
+    labelFinalPaymentAmount: "Final Payment Amount:",
+    labelIdleDuration: "Idle Duration:",
+    labelIdleFeeSubtotal: "Idle Fee Subtotal (w 8% GST):",
+    labelIdleStartTime: "Idle Fee Start Time:",
+    labelReferenceID: "Reference ID:",
+    labelRegistrationNo: "Registration No:",
+    labelReservationFeeSubtotal: "Reservation Fee Subtotal (w 8% GST):",
+    labelSiteName: "Site Name:",
+    labelTimeReservation: "Time of Reservation:",
+    labelTransactionID: "Transaction ID:",
+    receipt: "Receipt",
+    successful: "Successful! "
   }
 }

Strides-APP/app/i18n/locales/zh-TW.js

@@ -253,6 +253,7 @@
     labelAvailableTotal: "可使用/總計",
     labelPower: "功率",
     labelRate: "費率",
+    labelRates: "費率",
     labelStatus: "狀態",
     labelTimeElapsed: "充電用時",
     labelTotalCharges: "總費用",
@@ -429,5 +430,27 @@
     noData: "你還没有申請任何会员",
     errMembershipNo: "請鍵入會員卡號",
     errUploadCard: "請上載會員卡相片"
+  },
+  receipt: {
+    breakdownChargingFees: "充電費用明細",
+    breakdownIdlesFees: "閑置費用明細",
+    breakdownPayment: "付款明細",
+    breakdownReservationFees: "預訂費用明細",
+    chargingSessionComplete: "您的充電結費已完成",
+    labelChargTransSubtotal: "充電費用小計(含消費稅)：",
+    labelDateTime: "交易時間",
+    labelDurationReservation: "預定時長：",
+    labelFinalPaymentAmount: "最終支付：",
+    labelIdleDuration: "閑置時長：",
+    labelIdleFeeSubtotal: "閑置費用小計(含消費稅)：",
+    labelIdleStartTime: "閑置開始時間：",
+    labelReferenceID: "引用編號：",
+    labelRegistrationNo: "公司代碼：",
+    labelReservationFeeSubtotal: "預訂費用小計(含消費稅)：",
+    labelSiteName: "站點名稱：",
+    labelTimeReservation: "預訂時間：",
+    labelTransactionID: "交易編號：",
+    receipt: "發票",
+    successful: "交易成功！"
   }
 }

Strides-APP/app/i18n/locales/zh.js

@@ -253,6 +253,7 @@ export default {
     labelAvailableTotal: "可使用/总计",
     labelPower: "功率",
     labelRate: "费率",
+    labelRates: "费率",
     labelStatus: "状态",
     labelTimeElapsed: "充电用时",
     labelTotalCharges: "总费用",
@@ -429,5 +430,27 @@ export default {
     noData: "你还没有申请任何会员",
     errMembershipNo: "请输入会员卡号",
     errUploadCard: "请上传会员卡照片"
+  },
+  receipt: {
+    breakdownChargingFees: "充电费用明细",
+    breakdownIdlesFees: "闲置费用明细",
+    breakdownPayment: "支付明细",
+    breakdownReservationFees: "预订费用明细",
+    chargingSessionComplete: "您的充电结费已完成",
+    labelChargTransSubtotal: "充电费用小计(含消费税)：",
+    labelDateTime: "交易时间",
+    labelDurationReservation: "预定时长：",
+    labelFinalPaymentAmount: "最终支付：",
+    labelIdleDuration: "闲置时长：",
+    labelIdleFeeSubtotal: "闲置费用小计(含消费税)：",
+    labelIdleStartTime: "闲置开始时间：",
+    labelReferenceID: "引用编号：",
+    labelRegistrationNo: "公司代码：",
+    labelReservationFeeSubtotal: "预订费用小计(含消费税)：",
+    labelSiteName: "站点名称：",
+    labelTimeReservation: "预订时间：",
+    labelTransactionID: "交易编号：",
+    receipt: "发票",
+    successful: "交易成功！"
   }
 }

Strides-APP/app/pages/Router.js

@@ -25,7 +25,7 @@ import Feedback from './my/Feedback';
 import Privacy from './my/Privacy';
 import Profile from './my/ProfileV2';
 import Condition from './my/Condition';
-import Summary from './chargeV2/Summary';
+import Summary from './chargeV2/SummaryV2';
 import Rating from './charge/Rating';
 import Wallet from './wallet/Wallet';
 import EditProfile from './my/EditProfile';
@@ -137,7 +137,7 @@ export var PageList = {
   },
   'summary': {
     title: 'Summary',
-    titleScope: 'route.summary',
+    titleScope: 'receipt.receipt',
     component: Summary
   },
   'rating': {
@@ -336,7 +336,7 @@ const Title = (title, opt = {}, titleScope) => {
       elevation: 0,
       shadowOpacity: 0,
       borderBottomWidth: 0,
-      backgroundColor: colorLight //配置标题栏背景
+      backgroundColor: app.isWhitelabel ? colorLight : colorPrimary //配置标题栏背景
     },
     headerTintColor: pageTitleTint, //配置标题栏文字和图标颜色
     headerBackTitle: ' ', //配置iOS返回按钮文字

Strides-APP/app/pages/chargeV2/SummaryV2.js

@@ -0,0 +1,412 @@
+/**
+ * 新版充电结算页面
+ * @邠心vbe on 2023/02/08
+ */
+import React, { Component } from 'react';
+import { View, Text, StyleSheet, ScrollView, RefreshControl } from 'react-native';
+import apiCharge from '../../api/apiCharge';
+import Button from '../../components/Button';
+import Dialog from '../../components/Dialog';
+import { MyRefreshProps } from '../../components/ThemesConfig';
+import utils from '../../utils/utils';
+import { PageList } from '../Router';
+
+export default class Summary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActully: true,
+      refreshing: false,
+      summaryInfo: {
+        top: {},
+        station: {},
+        connector: {},
+        chargingFee: {},
+        idleFee: {},
+        reservationFee: {},
+        payment: {}
+      },
+      chargingPk: ""
+    };
+    this.canBack = false;
+  }
+
+  componentDidMount() {
+    const params = this.props.route.params;
+    if (params.chargingPk) {
+      Dialog.showProgressDialog();
+      this.setState({
+        chargingPk: params.chargingPk
+      })
+      if (params.action && params.action == "view") {
+        this.setState({
+          isActully: false
+        });
+        this.getSummaryData(params.chargingPk);
+      } else {
+        setTimeout(() => {
+          this.getSummaryData(params.chargingPk);
+        }, 3000);
+      }
+    }
+    this.props.navigation.addListener('focus', e => {
+      this.canBack = false;
+    });
+    this.props.navigation.addListener('beforeRemove', e => {
+      if (this.state.isActully && !this.canBack) {
+        this.toRating();
+        e.preventDefault();
+      }
+    });
+  }
+
+  getSummaryData(chargingPk) {
+    apiCharge.getChargeSummaryV2({
+      chargingPk: chargingPk
+    }).then(res => {
+      Dialog.dismissLoading();
+      if (res.data) {
+        this.setState({
+          refreshing: false,
+          summaryInfo: res.data
+        });
+      }
+    }).catch((err) => {
+      Dialog.dismissLoading();
+      toastShort(err);
+      this.setState({
+        refreshing: false
+      });
+    });
+  }
+
+  onRefresh() {
+    if (this.state.chargingPk) {
+      this.setState({
+        refreshing: true
+      });
+      this.getSummaryData(this.state.chargingPk);
+    }
+  }
+
+  toRating() {
+    this.canBack = true;
+    //goBack();
+    //routeUtil.resetToHome(this.props);
+    startPage(PageList.home);
+    //startPage(PageList.rating, this.state.stationInfo);
+  }
+
+  getSummaryText(data) {
+    if (this.state.summaryInfo?.paymentType == 'Fleet Credit') {
+      return '-';
+    } else {
+      return currency + '' + (data ?? '0');
+    }
+  }
+
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        refreshControl={
+          <RefreshControl
+            {...MyRefreshProps()}
+            refreshing={this.state.refreshing}
+            onRefresh={() => this.onRefresh()}
+          />
+        }>
+        { utils.isNotEmpty(this.state.summaryInfo.top) &&
+          <View style={styles.headerView}>
+            <Octicons
+              name="check-circle-fill"
+              color={colorAccent}
+              size={56}/>
+            <Text style={styles.topTitle}>{$t('receipt.successful')}</Text>
+            <Text style={styles.topDesc}>{$t('receipt.chargingSessionComplete')}</Text>
+            { utils.isNotEmpty(this.state.summaryInfo.top.company) &&
+              <View style={styles.formRow}>
+                <Text style={styles.label}>{$t('sign.labelCompany')}:</Text>
+                <Text style={styles.text}>{this.state.summaryInfo.top.company}</Text>
+              </View>
+            }
+            { utils.isNotEmpty(this.state.summaryInfo.top.registrationNo) &&
+              <View style={styles.formRow}>
+                <Text style={styles.label}>{$t('receipt.labelRegistrationNo')}</Text>
+                <Text style={styles.text}>{this.state.summaryInfo.top.registrationNo}</Text>
+              </View>
+            }
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelTransactionID')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.top.transactionId}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelReferenceID')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.top.referenceId}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelDateTime')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.top.dateTime}</Text>
+            </View>
+          </View>
+        }
+        {/* <View style={styles.sections}>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>{$t('wallet.labelTransactionId')}</Text>
+            <Text style={styles.text}>{this.state.summaryInfo.transactionPk}</Text>
+          </View>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>{$t('wallet.labelReferenceId')}</Text>
+            <Text style={styles.text}>{this.state.summaryInfo.chargingPk}</Text>
+          </View>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>{$t('wallet.labelDateTime')}</Text>
+            <Text style={styles.text}>{this.state.summaryInfo.dateTime}</Text>
+          </View>
+        </View> */}
+        { utils.isNotEmpty(this.state.summaryInfo.station) &&
+          <View style={styles.sections}>
+            <Text style={styles.formTitle}>{$t('wallet.labelYourStation')}</Text>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('wallet.labelStationId')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.station.stationId}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelSiteName')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.station.siteName ?? "-"}</Text>
+            </View>
+          </View>
+        }
+        { utils.isNotEmpty(this.state.summaryInfo.connector) &&
+          <View style={styles.sections}>
+            <Text style={styles.formTitle}>{$t('wallet.labelYourConnector')}</Text>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('charging.labelType')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.connector.type}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('charging.labelPower')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.connector.power}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('charging.labelRates')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.connector.rates}</Text>
+            </View>
+          </View>
+        }
+        { utils.isNotEmpty(this.state.summaryInfo.chargingFee) &&
+          <View style={styles.sections}>
+            <Text style={styles.formTitle}>{$t('receipt.breakdownChargingFees')}</Text>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('wallet.labelChargeTime')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.chargingFee.chargeTime ?? "-"}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('wallet.labelChargeDelivered')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.chargingFee.chargeDelivered ?? 0}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelChargTransSubtotal')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.chargingFee.transactionSubtotal}</Text>
+            </View>
+          </View>
+        }
+        { utils.isNotEmpty(this.state.summaryInfo.idleFee) &&
+          <View style={styles.sections}>
+            <Text style={styles.formTitle}>{$t('receipt.breakdownIdlesFees')}</Text>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelIdleStartTime')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.idleFee.startTime}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelIdleDuration')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.idleFee.duration}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelIdleFeeSubtotal')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.idleFee.subtotal}</Text>
+            </View>
+          </View>
+        }
+        { utils.isNotEmpty(this.state.summaryInfo.reservationFee) &&
+          <View style={styles.sections}>
+            <Text style={styles.formTitle}>{$t('receipt.breakdownReservationFees')}</Text>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelTimeReservation')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.reservationFee.reservationTime}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelDurationReservation')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.reservationFee.reservationDuration}</Text>
+            </View>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelReservationFeeSubtotal')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.reservationFee.reservationFeeSubtotal}</Text>
+            </View>
+          </View>
+        }
+        { utils.isNotEmpty(this.state.summaryInfo.payment) &&
+          <View style={styles.sections}>
+            <Text style={styles.formTitle}>{$t('receipt.breakdownPayment')}</Text>
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('wallet.labelPaymentMadeBy')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.payment.paymentMadeBy ?? "-"}</Text>
+            </View>
+            { utils.isNotEmpty(this.state.summaryInfo.payment.transactionSubtotal) &&
+              <View style={styles.formRow}>
+                <Text style={styles.label}>{$t('receipt.labelChargTransSubtotal')}</Text>
+                <Text style={styles.text}>{this.state.summaryInfo.payment.transactionSubtotal}</Text>
+              </View>
+            }
+            { utils.isNotEmpty(this.state.summaryInfo.payment.idleFeeSubtotal) &&
+              <View style={styles.formRow}>
+                <Text style={styles.label}>{$t('receipt.labelIdleFeeSubtotal')}</Text>
+                <Text style={styles.text}>{this.state.summaryInfo.payment.idleFeeSubtotal}</Text>
+              </View>
+            }
+            { utils.isNotEmpty(this.state.summaryInfo.payment.reservationFeeSubtotal) &&
+              <View style={styles.formRow}>
+                <Text style={styles.label}>{$t('receipt.labelReservationFeeSubtotal')}</Text>
+                <Text style={styles.text}>{this.state.summaryInfo.payment.reservationFeeSubtotal}</Text>
+              </View>
+            }
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('receipt.labelFinalPaymentAmount')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.payment.finalPayment ?? "-"}</Text>
+            </View>
+            {/* <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('wallet.labelChargeRates')}</Text>
+              <Text style={styles.text}>{currency}{this.state.summaryInfo.chargeRates ?? '0.0'}</Text>
+            </View> */}
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('wallet.labelExchangeRate')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.payment.exchangeRate ?? "-"}</Text>
+            </View>
+            {/* <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('wallet.labelPreviousBalance')}</Text>
+              <Text style={styles.text}>{this.getSummaryText(this.state.summaryInfo.previousBalance)}</Text>
+            </View> */}
+            <View style={styles.formRow}>
+              <Text style={styles.label}>{$t('wallet.labelResultingBalance')}</Text>
+              <Text style={styles.text}>{this.state.summaryInfo.payment.resultingBalance ?? "-"}</Text>
+            </View>
+          </View>
+        }
+        { this.state.isActully &&
+          <View style={styles.bottomButton}>
+            <Text
+              style={styles.feedback}
+              onPress={() => startPage(PageList.feedback)}>{$t('wallet.linkSubmitFeedback')}</Text>
+            {/* <Text style={styles.tipText}>{$t('wallet.tipsReceipt')}</Text> */}
+            <Button
+              text={$t('home.done')}
+              elevation={1.5}
+              onClick={() => this.toRating()}/>
+          </View>
+        }
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingLeft: 16,
+    paddingRight: 16,
+    backgroundColor: colorLight
+  },
+  headerView: {
+    alignItems: 'center',
+    paddingTop: 16,
+    paddingBottom: 24
+  },
+  topTitle: {
+    color: textPrimary,
+    fontSize: 16,
+    marginTop: 8,
+    paddingLeft: 8,
+    fontWeight: 'bold'
+  },
+  topDesc: {
+    color: textPrimary,
+    fontSize: 14,
+    marginBottom: 32
+  },
+  sections: {
+    borderRadius: 10,
+    marginBottom: 12,
+    backgroundColor: colorLight
+  },
+  sections2: {
+    paddingTop: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingBottom: 8,
+    borderRadius: 10,
+    marginBottom: 8,
+    backgroundColor: colorLight
+  },
+  formTitle: {
+    color: '#000',
+    fontSize: 14,
+    marginTop: -4,
+    marginBottom: 6,
+    paddingBottom: 6,
+    fontWeight: 'bold',
+    borderBottomWidth: 1,
+    borderBottomColor: textPrimary
+  },
+  formRow: {
+    paddingTop: 3,
+    paddingBottom: 3,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  label: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 13,
+  },
+  text: {
+    color: textPrimary,
+    fontSize: 12,
+    fontWeight: 'bold'
+  },
+  stationInfoView: {
+    padding: 12,
+    marginBottom: 0,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  stationInfoText: {
+    color: '#999',
+    fontSize: 11
+  },
+  connectorView: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  typeIcon: {
+    width: 36,
+    height: 36
+  },
+  feedback: {
+    color: '#12A5F9',
+    fontSize: 14,
+    textAlign: 'center',
+    marginBottom: 16,
+    ...ui.underline
+  },
+  bottomButton: {
+    marginTop: 32,
+    marginBottom: 16
+  },
+  tipText: {
+    color: textPrimary,
+    fontSize: 12,
+    textAlign: 'center',
+    marginBottom: 8
+  }
+});

Strides-APP/app/pages/member/ApplyMember.js

@@ -149,7 +149,7 @@ export default class ApplyMember extends Component {
               placeholder={$t('members.membershipNo')}
               placeholderTextColor={textPlacehoder}
               maxLength={50}
-              keyboardType='phone-pad'
+              //keyboardType='phone-pad'
               onChangeText={v => this.changeForm('membershipNo', v)}
             />
           </View>