add app/pages/chargingV3/StepAuth.js

Strides-SPAPP/app/pages/chargingV3/StepAuth.js

@@ -0,0 +1,223 @@
+/**
+ * 新充电流程：验证插头模块
+ * @邠心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,
+  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={connectorInfo.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(connectorInfo.chargeBoxId, connectorInfo.connectorId)}>
+                  <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>
+                  }
+                  <Lucide
+                    name={"chevron-right"}
+                    size={24}
+                    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
+  }
+})