add app/pages/charge/Summary.js

Strides-SPAPP/app/pages/charge/Summary.js

@@ -0,0 +1,295 @@
+/**
+ * 充电结算页面
+ * @邠心vbe on 2021/04/28
+ */
+import React, { Component } from 'react';
+import { View, Text, StyleSheet, Image, ScrollView, RefreshControl } from 'react-native';
+import apiCharge from '../../api/apiCharge';
+import Button from '../../components/Button';
+import Dialog from '../../components/Dialog';
+import utils from '../../utils/utils';
+import { PageList } from '../Router';
+import { ChargeStyle, TypeImage } from './Charging';
+import { MyRefreshProps } from '../../components/ThemesConfig';
+
+export default class Summary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActully: true,
+      refreshing: false,
+      summaryInfo: {},
+      stationInfo: {} 
+    };
+    this.canBack = false;
+  }
+
+  componentDidMount() {
+    const params = this.props.route.params;
+    if (params.chargingPk) {
+      Dialog.showProgressDialog();
+      if (params.name && params.address) {
+        this.setState({
+          chargingPk: params.chargingPk,
+          stationInfo: {
+            id: params.id,
+            name: params.name,
+            address: params.address
+          }
+        });
+        setTimeout(() => {
+          this.getSummaryData(params.chargingPk);
+        }, 5000);
+      } else if (params.action && params.action == "view") {
+        this.setState({
+          isActully: false,
+          chargingPk: params.chargingPk
+        });
+        this.getSummaryData(params.chargingPk);
+      }
+    }
+    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.getChargeSummary({
+      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;
+    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()}
+          />
+        }>
+        <View style={{height:16}}></View>
+        <View style={styles.sections}>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Transation ID:</Text>
+            <Text style={styles.text}>{this.state.summaryInfo.transactionPk}</Text>
+          </View>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Reference ID:</Text>
+            <Text style={styles.text}>{this.state.summaryInfo.chargingPk}</Text>
+          </View>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Date Time:</Text>
+            <Text style={styles.text}>{this.state.summaryInfo.dateTime}</Text>
+          </View>
+        </View>
+        <View style={styles.sections}>
+          <Text style={styles.formTitle}>Your Station</Text>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Station ID: {this.state.summaryInfo.chargeBoxPk}</Text>
+          </View>
+          <Text style={styles.stationInfoText}>{this.state.summaryInfo.boxAddress}</Text>
+        </View> 
+
+        <View style={styles.sections2}>
+          <Text style={styles.formTitle}>Your Connector</Text>
+          <View style={ChargeStyle.stationInfoView}>
+            <Image
+              style={ChargeStyle.infoIcon}
+              source={this.state.summaryInfo.connectorType?.indexOf('AC') >= 0 ? TypeImage.AC : TypeImage.DC}/>
+            <View style={ChargeStyle.infoGroup}>
+              <Text style={ChargeStyle.infoTitle}>Type</Text>
+              <Text style={ChargeStyle.infoText}>{this.state.summaryInfo.connectorType}</Text>
+            </View>
+            <View style={ChargeStyle.infoGroup}>
+              <Text style={ChargeStyle.infoTitle}>Power</Text>
+              <Text style={ChargeStyle.infoText}>{this.state.summaryInfo.connectorWattage}</Text>
+            </View>
+            <View style={ChargeStyle.infoGroup}>
+              <Text style={ChargeStyle.infoTitle}>Rates</Text>
+              <Text style={ChargeStyle.infoText}>{this.state.summaryInfo.connectorRate}</Text>
+            </View>
+          </View>
+        </View> 
+
+        <View style={styles.sections}>
+          <Text style={styles.formTitle}>Breakdown</Text>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Reservation Fee:</Text>
+            <Text style={styles.text}>{currency}{this.state.summaryInfo.reservationFee ?? 0}</Text>
+          </View>
+          { utils.isNotEmpty(this.state.summaryInfo.idleFee) &&
+            <View style={styles.formRow}>
+              <Text style={styles.label}>Idle Fee:</Text>
+              <Text style={styles.text}>{currency}{this.state.summaryInfo.idleFee}</Text>
+            </View>
+          }
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Charge Time:</Text>
+            <Text style={styles.text}>{utils.hour2HHmm(this.state.summaryInfo.chargeTime)}</Text>
+          </View>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Charge Delivered:</Text>
+            <Text style={styles.text}>{this.state.summaryInfo.chargeDelivered ?? 0}kWh</Text>
+          </View>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Charge Rates (GST Inclusive):</Text>
+            <Text style={styles.text}>{currency}{this.state.summaryInfo.chargeRates ?? '0.0'}</Text>
+          </View>
+        </View>
+
+        <View style={styles.sections}>
+          <Text style={styles.formTitle}>Subtotal</Text>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Payment Made By:</Text>
+            <Text style={styles.text}>{this.state.summaryInfo.paymentType}</Text>
+          </View>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Previous Balance:</Text>
+            <Text style={styles.text}>{this.getSummaryText(this.state.summaryInfo.previousBalance)}</Text>
+          </View>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Payment (GST Inclusive):</Text>
+            <Text style={styles.text}>{currency}{this.state.summaryInfo.payment ?? '0.0'}</Text>
+          </View>
+          <View style={styles.formRow}>
+            <Text style={styles.label}>Resulting Balance:</Text>
+            <Text style={styles.text}>{this.getSummaryText(this.state.summaryInfo.resultingBalance)}</Text>
+          </View>
+        </View>
+        <Text
+          style={styles.feedback}
+          onPress={() => startPage(PageList.feedback)}>Submit Your Feedback</Text>
+        { this.state.isActully &&
+          <View style={styles.bottomButton}>
+            <Text style={styles.tipText}>A Receipt Will Be Sent To Your Email</Text>
+            <Button
+              text='Done'
+              elevation={1.5}
+              onClick={() => this.toRating()}/>
+          </View>
+        }
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingLeft: 16,
+    paddingRight: 16,
+    backgroundColor: '#F5F5F5'
+  },
+  sections: {
+    padding: 16,
+    borderRadius: 10,
+    marginBottom: 16,
+    backgroundColor: colorLight
+  },
+  sections2: {
+    paddingTop: 16,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 8,
+    borderRadius: 10,
+    marginBottom: 16,
+    backgroundColor: colorLight
+  },
+  formTitle: {
+    color: '#000',
+    fontSize: 14,
+    marginTop: -4,
+    marginBottom: 6,
+    paddingBottom: 6,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee'
+  },
+  formRow: {
+    paddingTop: 3,
+    paddingBottom: 3,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  label: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 13,
+  },
+  text: {
+    color: textPrimary,
+    fontSize: 13,
+  },
+  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: {
+    marginBottom: 16
+  },
+  tipText: {
+    color: textPrimary,
+    fontSize: 12,
+    textAlign: 'center',
+    marginBottom: 8
+  }
+});