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

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

export default StepAuth = ({
  status="",
  currentPayment,
  onStartCharge,
  chargeBoxId,
  connectorId=1,
  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}>
      <View style={styles.content}>
        <Image
          style={styles.stepImage}
          resizeMode="contain"
          source={
            isAuthentic
            ? require('../../images/site/charging-status-auth.png')
            : require('../../images/site/charging-status-ready.png')
          }/>
        { 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>
      <View style={styles.bottomView}>
        <View style={ui.flexc}>
          <TextView style={[styles.label, ui.flex1]}>{$t('charging.paymentMethod')}</TextView>
          { app.v3.vouchers &&
            <TextView style={[styles.label, {flex: 1, paddingLeft: 16}]}>{$t('voucher.vouchers')}</TextView>
          }
        </View>
        <View style={ui.flexc}>
          <View style={ui.flex1}>
            {/* <PaymentList
              payType={currentPayment}
              onMethodChange={onPaymentMethodChanged}
            /> */}
            { app.charge.paymentMethod
            ? <PaymentListV2
                isSelect={isAuthentic}
                payType={currentPayment}
                chargeBoxId={chargeBoxId}
                onMethodChange={onPaymentMethodChanged}/>
            : <PaymentList
                isSelect={isAuthentic}
                payType={currentPayment}
                onMethodChange={onPaymentMethodChanged}/>
            }
          </View>
          { app.v3.vouchers &&
          <Pressable
            style={styles.voucherLayout}
            onPress={() => isAuthentic && PagerUtil.toSelectVoucher(chargeBoxId, connectorId)}>
            <MaterialCommunityIcons
              name="ticket-percent"
              size={35}
              color={colorAccent}/>
            { 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>
              }
              { isAuthentic &&
                <FontAwesome6
                  name={"angle-right"}
                  size={16}
                  color={colorCancel}
                />
              }
          </Pressable>
        }
        </View>
        { isAuthentic
        ? <Button
            style={styles.buttonView}
            text={$t('charging.btnStartCharging')}
            elevation={1.5}
            borderRadius={6}
            onClick={onStartCharge}/>
        : <View style={{height: 56}}/>
        }
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  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, 48)
  },
  label: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 8
  },
  bottomView: {
    paddingBottom: 16
  },
  buttonView: {
    marginTop: 8
  },
  voucherLayout: {
    flex: 1,
    padding: 12,
    maxWidth: $vw(50) - 24,
    borderRadius: 10,
    marginLeft: 16,
    marginBottom: 12,
    alignItems: 'center',
    flexDirection: 'row',
    ...ElevationObject(5),
    backgroundColor: colorLight,
  },
  vouchersView: {
    flex: 1,
    paddingLeft: 8,
    flexWrap: 'wrap',
    alignItems: 'center',
    flexDirection: 'row'
  },
  selectText: {
    flex: 1,
    color: textSecondary,
    fontSize: 15,
    fontWeight: 'bold'
  },
  voucherName: {
    color: textPrimary,
    fontSize: 15,
    paddingLeft: 8,
    fontWeight: 'bold'
  },
  voucherDesc: {
    color: textSecondary,
    fontSize: 12,
    paddingLeft: 8,
    paddingRight: 16
  }
})