ChargEco/Strides-APP/app/pages/chargeV2/Summary.js

/**
 * 新版充电结算页面
 * @邠心vbe on 2023/02/08
 */
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 { MyRefreshProps } from '../../components/ThemesConfig';
import utils from '../../utils/utils';
import { PageList } from '../Router';
import { ChargeStyle, TypeImage } from './Charging';

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;
    //goBack();
    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()}
          />
        }>
        <View style={{height:16}}></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>
        <View style={styles.sections}>
          <Text style={styles.formTitle}>{$t('wallet.labelYourStation')}</Text>
          <View style={styles.formRow}>
            <Text style={styles.label}>{$t('wallet.labelStationId') + this.state.summaryInfo.chargeBoxPk}</Text>
          </View>
          <Text style={styles.stationInfoText}>{this.state.summaryInfo?.boxAddress}</Text>
        </View> 

        <View style={styles.sections2}>
          <Text style={styles.formTitle}>{$t('wallet.labelYourConnector')}</Text>
          <View style={styles.stationInfoView}>
            <Image
              style={ChargeStyle.infoIcon}
              source={this.state.summaryInfo.connectorType?.indexOf('AC') >= 0 ? TypeImage.AC : TypeImage.DC}/>
            <View style={ChargeStyle.infoGroup}>
              <Text style={ChargeStyle.infoText}>{this.state.summaryInfo.connectorType}</Text>
              <Text style={ChargeStyle.infoTitle}>{$t('charging.labelType')}</Text>
            </View>
            <View style={ChargeStyle.infoGroup}>
              <Text style={ChargeStyle.infoText}>{this.state.summaryInfo.connectorWattage}</Text>
              <Text style={ChargeStyle.infoTitle}>{$t('charging.labelPower')}</Text>
            </View>
            <View style={ChargeStyle.infoGroup}>
              <Text style={ChargeStyle.infoText}>{this.state.summaryInfo.connectorRate}</Text>
              <Text style={ChargeStyle.infoTitle}>{$t('charging.labelRate')}</Text>
            </View>
          </View>
        </View> 

        <View style={styles.sections}>
          <Text style={styles.formTitle}>{$t('wallet.labelBreakdown')}</Text>
          <View style={styles.formRow}>
            <Text style={styles.label}>{$t('wallet.labelReservationFee')}</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}>{$t('wallet.labelIdleFee')}</Text>
              <Text style={styles.text}>{currency}{this.state.summaryInfo.idleFee}</Text>
            </View>
          }
          <View style={styles.formRow}>
            <Text style={styles.label}>{$t('wallet.labelChargeTime')}</Text>
            <Text style={styles.text}>{utils.hour2HHmm(this.state.summaryInfo.chargeTime)}</Text>
          </View>
          <View style={styles.formRow}>
            <Text style={styles.label}>{$t('wallet.labelChargeDelivered')}</Text>
            <Text style={styles.text}>{this.state.summaryInfo.chargeDelivered ?? 0}kWh</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>

        <View style={styles.sections}>
          <Text style={styles.formTitle}>{$t('wallet.labelSubtotal')}</Text>
          <View style={styles.formRow}>
            <Text style={styles.label}>{$t('wallet.labelPaymentMadeBy')}</Text>
            <Text style={styles.text}>{this.state.summaryInfo.paymentType}</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.labelPayment')}</Text>
            <Text style={styles.text}>{currency}{this.state.summaryInfo.payment ?? '0.0'}</Text>
          </View>
          <View style={styles.formRow}>
            <Text style={styles.label}>{$t('wallet.labelExchangeRate')}</Text>
            <Text style={styles.text}>{this.getSummaryText(this.state.summaryInfo.exchangeRate)}</Text>
          </View>
          <View style={styles.formRow}>
            <Text style={styles.label}>{$t('wallet.labelFinalPayment')}</Text>
            <Text style={styles.text}>{this.getSummaryText(this.state.summaryInfo.finalPayment)}</Text>
          </View>
          <View style={styles.formRow}>
            <Text style={styles.label}>{$t('wallet.labelResultingBalance')}</Text>
            <Text style={styles.text}>{this.getSummaryText(this.state.summaryInfo.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
  },
  sections: {
    borderRadius: 10,
    marginBottom: 16,
    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: '#eee'
  },
  formRow: {
    paddingTop: 3,
    paddingBottom: 3,
    alignItems: 'center',
    flexDirection: 'row'
  },
  label: {
    flex: 1,
    color: textPrimary,
    fontSize: 13,
  },
  text: {
    color: textPrimary,
    fontSize: 13,
  },
  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
  }
});