add app/pages/charging/StepChargeView.js

Strides-SPAPP/app/pages/charging/StepChargeView.js

@@ -0,0 +1,198 @@
+/**
+ * 充电页：扫码认证之后-充电开始之前
+ * @邠心vbe on 2023/03/10
+ */
+import React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import Button, {ElevationObject} from '../../components/Button';
+import TextView from '../../components/TextView';
+import { circleSize, DashboardView } from '../chargeV2/Charging';
+import { PaymentList } from '../chargeV2/Payment';
+import StationInfoView from './StationInfoView';
+import PaymentListV2 from '../chargeV2/PaymentListV2';
+import app from '../../../app.json';
+import PagerUtil from '../chargeV2/PagerUtil';
+import utils from '../../utils/utils';
+ 
+export default StepChargeView = ({
+  isStart=false,
+  isPending,
+  isCharging,
+  connectorInfo,
+  currentPayment,
+  curerntPerUser,
+  lastUpdated,
+  onStartCharge,
+  onStopCharge,
+  selectedVoucher={},
+  onPaymentMethodChanged
+}) => (
+  <>
+    <View style={{minHeight: $vht(80)}}>
+      <DashboardView
+        isCharging={isCharging}
+        connectorInfo={connectorInfo}/>
+      <TextView style={styles.title}>{$t('charging.selectedCharger')}</TextView>
+      <StationInfoView
+        isCharging={isCharging}
+        isPending={isPending}
+        connectorInfo={connectorInfo}/>
+      {/* <BatteryView
+        soc={this.state.connectorInfo.batteryPercent}
+        isCharging={this.state.isCharging}
+        isPending={this.state.isPending}
+      /> */}
+      {/* <View style={ui.center}>
+        <ImageBackground
+          style={styles.batteryBorder}
+          source={require('../../images/charge/ic-charge-circle.png')}>
+          <Text style={{
+            color: textPrimary,
+            fontSize: 16,
+            lineHeight: 22,
+            textAlign: 'center'
+          }}>
+            Press<Text style={{padding: 10, fontWeight: 'bold'}}> Start </Text>to begin Charging
+          </Text>
+        </ImageBackground>
+      </View> */}
+      <TextView style={styles.title}>{$t('charging.selectPaymentMethod')}</TextView>
+      { app.charge.paymentMethod
+      ? <PaymentListV2
+          payType={currentPayment}
+          isSelect={!isPending && !isCharging}
+          chargeBoxId={connectorInfo.chargeBoxId}
+          onMethodChange={onPaymentMethodChanged}/>
+      : <PaymentList
+          payType={currentPayment}
+          payPerUse={curerntPerUser}
+          onMethodChange={onPaymentMethodChanged}/>
+      }
+      {/* <PaymentList
+        payType={currentPayment}
+        payPerUse={curerntPerUser}
+        onMethodChange={onPaymentMethodChanged}
+      /> */}
+      { (app.v3.vouchers && (!isPending || !isCharging || utils.isNotEmpty(selectedVoucher.userVoucherId))) && <>
+        <TextView style={styles.title}>{$t('voucher.selectVoucher')}</TextView>
+        <Pressable
+          style={styles.voucherLayout}
+          onPress={() => (!isPending && !isCharging) && PagerUtil.toSelectVoucher(connectorInfo.chargeBoxId, connectorInfo.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>
+            }
+            { (!isPending && !isCharging) &&
+              <Lucide
+                name={"chevron-right"}
+                size={24}
+                color={colorCancel}
+              />
+            }
+          </Pressable>
+      </>}
+      { lastUpdated
+        ? <TextView style={styles.updateTip}>{$t('charging.lastUpdatedAt') + lastUpdated + '\n' + $t('charging.pullDownRefresh')}</TextView>
+        : <></>
+      }
+    </View>
+    { isStart
+    ? <Button
+        style={styles.buttonView}
+        disabled={isPending}
+        text={isCharging ? $t('charging.btnStopCharging') : $t('charging.btnComplete')}
+        elevation={1.5}
+        onClick={onStopCharge}/>
+    : <Button
+        style={styles.buttonView}
+        text={$t('charging.btnStartCharging')}
+        elevation={1.5}
+        onClick={onStartCharge}/>
+    }
+  </>
+);
+ 
+const styles = StyleSheet.create({
+  title: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingTop: 16,
+    paddingBottom: 16
+  },
+  buttonView: {
+    marginTop: 16,
+    marginBottom: 32
+  },
+  updateTip: {
+    color: '#aaa',
+    fontSize: 10,
+    textAlign: 'center',
+    paddingTop: 32,
+    paddingBottom: 16
+  },
+  listView: {
+    padding: 8,
+  },
+  batteryBorder: {
+    margin: 30,
+    padding: 32,
+    width: circleSize,
+    height: circleSize,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  voucherLayout: {
+    padding: 12,
+    borderRadius: 10,
+    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: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 15,
+    paddingLeft: 8,
+    fontWeight: 'bold'
+  },
+  voucherDesc: {
+    flex: 1,
+    color: textSecondary,
+    fontSize: 12,
+    paddingLeft: 8,
+    paddingRight: 16
+  }
+})