update app/pages/chargingV2/ChargingPage.js

Strides-APP/app/pages/chargingV2/ChargingPage.js

@@ -514,6 +514,7 @@ export default class ChargingPage extends Component {
           />
         : ( this.state.isCharging 
           ? <StepCharging
+              idleFeeConfig={this.state.idleFeeConfig}
               connectorInfo={this.state.connectorInfo}
               currentPayment={this.state.currentPayment}
               onStopCharge={() => this.onStopCharge()}

Strides-APP/app/pages/chargingV2/DialogIdleFee.js

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
+import { ElevationObject } from '../../components/Button';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+
+const DialogIdleFee = ({
+    idleFeeConfig
+}) => {
+  const [visible, showModal] = useState(false)
+  return (
+    <>
+    <Pressable
+      style={styles.cardView}
+      onPress={() => showModal(true)}>
+      <MaterialCommunityIcons
+        name={"car-clock"}
+        size={32}
+        color={colorAccent}
+      />
+      <TextView style={styles.label}>This site has idle fees enabled.</TextView>
+      <FontAwesome6
+        name={"angle-right"}
+        size={16}
+        color={colorCancel}
+      />
+    </Pressable>
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType="fade"
+      statusBarTranslucent={true}>
+      <View style={styles.layer}>
+        <View style={styles.dialog}>
+          <TextView style={styles.title}>Idle Fees</TextView>
+          <View style={styles.message}>
+          
+          { utils.isNotEmpty(idleFeeConfig.repeatDay) && <>
+            <TextView style={styles.idleFeeLabel}>Effective Days: </TextView>
+            <TextView style={styles.idleFeeText}>{utils.join(idleFeeConfig.repeatDay, ", ")}</TextView>
+            </>
+          }
+          <TextView style={styles.idleFeeLabel}>Effective Time：</TextView>
+          { idleFeeConfig.allDay
+          ? <TextView style={styles.idleFeeText}>All day</TextView>
+          : (utils.isNotEmpty(idleFeeConfig.startTime) && utils.isNotEmpty(idleFeeConfig.endTime)) &&
+            <TextView style={styles.idleFeeText}>{idleFeeConfig.startTime + " - " + idleFeeConfig.endTime}</TextView>
+          }
+          { utils.isNotEmpty(idleFeeConfig.idleGracePeriod) &&
+            <>
+              <TextView style={styles.idleFeeLabel}>Grace Period: </TextView>
+              <TextView style={styles.idleFeeText}>{idleFeeConfig.idleGracePeriod} min</TextView>
+            </>
+          }
+          <TextView style={styles.idleFeeLabel}>Charging Rate: </TextView>
+          <TextView style={styles.idleFeeText}>{idleFeeConfig.idleFee}/{idleFeeConfig.idleInterval} min </TextView>
+          { utils.isNotEmpty(idleFeeConfig.idleFeeCap) &&
+            <>
+              <TextView style={styles.idleFeeLabel}>Idle Fee Cap: </TextView>
+              <TextView style={styles.idleFeeText}>{idleFeeConfig.idleFeeCap}</TextView>
+            </>
+          }
+          </View>
+          {/* <TextView style={styles.message}>{
+            "Grace Period of " + idleFeeConfig.idleGracePeriod + " Minutes. Rates are" + idleFeeConfig.idleFee + " per " + idleFeeConfig.idleInterval + " Min. Idle Fee is capped at " + idleFeeConfig.idleFeeCap
+          }</TextView> */}
+          <View style={ui.flexc}>
+            <Button
+              style={styles.confirmButton}
+              text={$t("nav.ok")}
+              borderRadius={0}
+              onClick={() => showModal(false)}/>
+          </View>
+        </View>
+      </View>
+    </Modal>
+    </>
+)};
+
+const B = ({children}) => {
+  return <Text style={{fontWeight: "bold"}}>{children}</Text>
+}
+
+export default DialogIdleFee;
+
+const styles = StyleSheet.create({
+  cardView: {
+    padding: 12,
+    borderRadius: 10,
+    marginBottom: 12,
+    alignItems: 'center',
+    flexDirection: 'row',
+    ...ElevationObject(5),
+    backgroundColor: colorLight,
+    justifyContent: 'space-between'
+  },
+  layer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,.5)'
+  },
+  dialog: {
+    width: Dialog.dialogWidth,
+    borderRadius: isIOS ? 16 : 12,
+    overflow: 'hidden',
+    backgroundColor: colorLight
+  },
+  label: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingLeft: 14
+  },
+  title: {
+    paddingTop: 24,
+    color: textPrimary,
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: "center"
+  },
+  message: {
+    color: textPrimary,
+    fontSize: 14,
+    paddingTop: 16,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingBottom: 32
+  },
+  idleFeeLabel: {
+    color: textPrimary,
+    fontSize: 14,
+    paddingTop: 12,
+    fontWeight: "bold"
+  },
+  idleFeeText: {
+    color: textPrimary,
+    fontSize: 14,
+    paddingTop: 4
+  },
+  cancelButton: {
+    flex: 1,
+    borderRadius: 0,
+    backgroundColor: "#F0F0F0"
+  },
+  confirmButton: {
+    flex: 1,
+    borderRadius: 0,
+    backgroundColor: colorAccent
+  }
+})