add app/pages/chargeV3/ChargingStartView.js

Strides-SPAPP/app/pages/chargeV3/ChargingStartView.js

@@ -0,0 +1,224 @@
+/**
+ * V4充电页：扫码认证之后-充电开始之前
+ * @邠心vbe on 2024/05/15
+ */
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import Button from '../../components/Button';
+import { ChargeStyle } from '../chargeV2/Charging';
+import { PageList } from '../Router';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+
+export default ChargingStartView = ({
+  isPrivate,
+  stationInfo={},
+  onEnterStation,
+  canIntoCharging=false,
+  onIntoCharging
+}) => (
+  <View>
+    <View style={{minHeight: $vht(80)}}>
+      <EndView/>
+      <View style={ui.flexcc}>
+        <MaterialIcons
+          name="info-outline"
+          size={20}
+          color="#ED3F3F"/>
+        <TextView style={styles.gstText}>{$t('charging.tipsRatesTax2')}</TextView>
+      </View>
+      <View style={ui.flexc}>
+        <MaterialCommunityIcons
+          name="ev-plug-type2"
+          size={24}
+          color={textPrimary}
+        />
+        <TextView style={styles.title}>{$t('charging.acChargers')}</TextView>
+      </View>
+      { stationInfo.acRates?.length > 0
+        ? stationInfo.acRates.map((item, index) => {
+            return (
+              <View key={index} style={styles.connectorInfoItem}>
+                <View style={styles.infoGroup}>
+                  <TextView style={styles.infoText}>{item.typePower}</TextView>
+                </View>
+                <View style={styles.infoGroup}>
+                  <TextView style={styles.infoText}>{item.rates}</TextView>
+                </View>
+                <View style={styles.infoGroup}>
+                  <MaterialCommunityIcons
+                    name="circle"
+                    size={10}
+                    color={colorAccent}/>
+                  <TextView style={[styles.infoText, {paddingLeft: 4}]}>{item.connectorCount?.available + "/" + item.connectorCount?.all}</TextView>
+                </View>
+              </View>
+            );
+          })
+        : <TextView style={ui.noData}>{$t('charging.noRates')}</TextView>
+      }
+      <View style={ui.flexc}>
+        <MaterialCommunityIcons
+          name="ev-plug-ccs2"
+          size={24}
+          color={textPrimary}
+        />
+        <TextView style={styles.title}>{$t('charging.dcChargers')}</TextView>
+      </View>
+      { stationInfo.dcRates?.length > 0
+        ? stationInfo.dcRates.map((item, index) => {
+            return (
+              <View key={index} style={styles.connectorInfoItem}>
+                <View style={styles.infoGroup}>
+                  <TextView style={styles.infoText}>{item.typePower}</TextView>
+                </View>
+                <View style={styles.infoGroup}>
+                  <TextView style={styles.infoText}>{item.rates}</TextView>
+                </View>
+                <View style={styles.infoGroup}>
+                  <MaterialCommunityIcons
+                    name="circle"
+                    size={10}
+                    color={colorAccent}/>
+                  <TextView style={[styles.infoText, {paddingLeft: 4}]}>{item.connectorCount?.available + "/" + item.connectorCount?.all}</TextView>
+                </View>
+              </View>
+            );
+          })
+        : <TextView style={ui.noData}>{$t('charging.noRates')}</TextView>
+      }
+      { isPrivate &&
+        <View style={styles.privateView}> 
+          <TextView style={styles.privateText}>{$t('charging.ratesPrivateNote')}</TextView>
+        </View>
+      }
+      { utils.isNotEmpty(stationInfo.idleFee) && <>
+        <View style={ui.flexc}>
+          <MaterialCommunityIcons
+            name="timeline-clock"
+            size={24}
+            color={"#ED3F3F"}
+          />
+          <TextView style={styles.title}>Idle Fee</TextView>
+        </View>
+        <TextView style={styles.discountText}>{"Grace Period of " + stationInfo.idleFee.gracePeriod + " Minutes. Rates are " + stationInfo.idleFee.idleFee + " per " + stationInfo.idleFee.everyMinute + ". Idle Fee is capped at " + stationInfo.idleFee.crapFee}</TextView>
+      </>}
+      { !!(stationInfo.hasDiscount) && <>
+        <View style={ui.flexc}>
+          <MaterialCommunityIcons
+            name="brightness-percent"
+            size={24}
+            color={colorAccent}
+          />
+          <TextView style={styles.title}>{$t('charging.tipsDiscountTitle')}</TextView>
+        </View>
+        <TextView style={styles.discountText}>{$t('charging.tipsDiscount')}</TextView>
+      </>}
+    </View>
+    {/* <Payment refreshId={refreshId}/> */}
+    { canIntoCharging
+    ? <Button
+        style={styles.buttonView}
+        borderRadius={4}
+        text={$t('charging.btnIntoCharging')}
+        //disabled={available}
+        onClick={onIntoCharging}/>
+    : <View style={styles.buttonGroup}>
+        <Button
+          style={styles.buttonLeft}
+          text={$t('charging.enterStationId')}
+          //disabled={available}
+          onClick={onEnterStation}/>
+        <Button
+          style={styles.buttonRight}
+          text={$t('charging.scanQR')}
+          //disabled={available}
+          onClick={() => {
+            PagerUtil.onInnerScanQR();
+            startPage(PageList.scanqr, {actionDetail: false, id: stationInfo?.id});
+          }}/>
+      </View>
+    }
+  </View>
+);
+
+const styles = StyleSheet.create({
+  gstText: {
+    color: '#ED3F3F',
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    paddingLeft: 4
+  },
+  title: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingTop: 16,
+    paddingLeft: 8,
+    paddingBottom: 16
+  },
+  connectorInfoItem: {
+    ...$padding(8, 16),
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  infoGroup: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  infoText: {
+    color: textPrimary,
+    fontSize: 12
+  },
+  updateTip: {
+    color: '#aaa',
+    fontSize: 10,
+    textAlign: 'center',
+    paddingTop: 32,
+    paddingBottom: 16
+  },
+  privateView: {
+    height: $vht(25),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  privateText: {
+    color: '#FA5759'
+  },
+  buttonGroup: {
+    marginTop: 16,
+    marginBottom: 16,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  buttonView: {
+    marginTop: 16,
+    marginBottom: 32
+  },
+  buttonLeft: {
+    flex: 1,
+    elevation: 1.5,
+    borderRadius: 4,
+    backgroundColor: colorPrimary
+  },
+  buttonRight: {
+    flex: 1,
+    marginLeft: 16,
+    elevation: 1.5,
+    borderRadius: 4
+  },
+  discountView: {
+    borderWidth: 1,
+    borderColor: colorAccent
+  },
+  discountText: {
+    fontSize: 12,
+    textAlign: 'left',
+    color: textPrimary,
+    ...$padding(2, 10)
+  }
+})