ChargEco/Strides-APP/app/pages/chargingV3/StepAuth.js

/**
 * 新充电流程：验证插头模块
 * @邠心vbe on 2023/06/20
 */
import React, { useEffect, useState } from 'react';
import { View, Text, Image, StyleSheet, ScrollView, Pressable } from 'react-native';
import app from '../../../app.json';
import Button from '../../components/Button';
import TextView from '../../components/TextView';
import { PaymentList } from '../chargeV2/Payment';
import PaymentListV2 from '../chargeV2/PaymentListV2';
import StatusImage from './StatusImage';
import ConnectorInfo from './ConnectorInfo';
import utils from '../../utils/utils';
import PagerUtil from '../chargeV2/PagerUtil';

export default StepAuth = ({
  status="",
  currentPayment,
  onStartCharge,
  chargeBoxId,
  connectorInfo,
  selectedVoucher={},
  onPaymentMethodChanged
}) => {
  const [loadingEmps, setEmps] = useState("");
  const [isAuthentic, setAuthentic] = useState(false)
  useEffect(() => {
    if (status == "Preparing") {
      setAuthentic(true);
    } else {
      changeEmps();
    }
  }, []);

  useEffect(() => {
    if (status == "Preparing") {
      setAuthentic(true);
    } else {
      setTimeout(() => {
        changeEmps();
      }, 500);
    }
  }, [loadingEmps, status]);

  const changeEmps = () => {
    let emp = loadingEmps;
    if (loadingEmps.length == 3) {
      emp = "";
    } else {
      emp += ".";
    }
    setEmps(emp);
  }

  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.container}
        contentContainerStyle={$padding(16)}>
        <View style={styles.content}>
          <StatusImage
            isAuthentic={isAuthentic}
            isLoading={true}/>
          { isAuthentic
          ? <TextView style={styles.stepTitle}>{$t('charging.stepAuthenticated')}</TextView>
          : <View style={ui.flexcc}>
              <TextView style={styles.stepTitle}>{$t('charging.stepAuthenticating')}</TextView>
              <TextView style={[styles.stepTitle, {width: 30, marginRight: -10}]}>{loadingEmps}</TextView>
            </View>
          }
          <TextView style={styles.stepDesc}>{$t(isAuthentic ? 'charging.stepAuthenticatedDesc' : 'charging.stepAuthenticatingDesc')}</TextView>
        </View>
        { isAuthentic &&
          <>
            <ConnectorInfo
              connectorInfo={connectorInfo}/>
            <View style={styles.bottomView}>
              <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
              { app.charge.paymentMethod
              ? <PaymentListV2
                  style={styles.paymentView}
                  isSelect={isAuthentic}
                  payType={currentPayment}
                  chargeBoxId={chargeBoxId}
                  borderColor={textCancel}
                  onMethodChange={onPaymentMethodChanged}/>
              : <PaymentList
                  isSelect={isAuthentic}
                  payType={currentPayment}
                  onMethodChange={onPaymentMethodChanged}/>
              }
              <EndView half/>
              { app.v3.vouchers && <>
                <TextView style={styles.label}>{$t('voucher.vouchers')}</TextView>
                <Pressable
                  style={styles.paymentView}
                  onPress={() => PagerUtil.toSelectVoucher()}>
                  <MaterialCommunityIcons
                    name="ticket-percent-outline"
                    size={32}
                    color={textPrimary}/>
                  { utils.isNotEmpty(selectedVoucher.userVoucherId)
                  ? <View style={styles.vouchersView}>
                      <TextView
                        style={styles.voucherName}
                        numberOfLines={1}>
                        {selectedVoucher.voucherName}
                      </TextView>
                      <TextView
                        style={styles.voucherDesc}
                        numberOfLines={1}>
                        {selectedVoucher.voucherDesc}
                      </TextView>
                    </View>
                  : <View style={styles.vouchersView}>
                      <TextView style={styles.selectText}>{$t("voucher.selectVoucher")}</TextView>
                    </View>
                  }
                  <FontAwesome6
                    name={"angle-right"}
                    size={16}
                    color={colorCancel}
                  />
                </Pressable>
              </>}
            </View>
            <View style={{height: 56}}></View>
          </>
        }
      </ScrollView>
      { isAuthentic &&
        <Button
          style={styles.buttonView}
          text={$t('charging.btnStartCharging')}
          elevation={1.5}
          borderRadius={6}
          onClick={onStartCharge}/>
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  stepImage: {
    width: $vw(70),
    height: $vw(16),
    margin: 16
  },
  stepTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: colorAccent
  },
  stepDesc: {
    color: textPrimary,
    fontSize: 16,
    textAlign: 'center',
    ...$padding(0, 32, 32)
  },
  label: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingBottom: 12
  },
  bottomView: {
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 16
  },
  buttonView: {
    left: 16,
    right: 16,
    bottom: 24,
    position: 'absolute'
  },
  paymentView: {
    ...$padding(10, 12),
    borderWidth: 1,
    borderRadius: 10,
    borderColor: textCancel,
    marginBottom: 12,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: colorLight,
    justifyContent: 'space-between'
  },
  vouchersView: {
    flex: 1,
    paddingLeft: 8,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  selectText: {
    flex: 1,
    color: textSecondary,
    fontSize: 15,
    fontWeight: 'bold'
  },
  voucherName: {
    flex: 1,
    color: textPrimary,
    fontSize: 15,
    paddingLeft: 8,
    fontWeight: 'bold'
  },
  voucherDesc: {
    flex: 1,
    color: textSecondary,
    fontSize: 12,
    paddingLeft: 8,
    paddingRight: 16
  }
})