update app/pages/chargingV2/StepCharging.js

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

@@ -11,8 +11,10 @@ import utils from '../../utils/utils';
 import { PaymentList } from '../chargeV2/Payment';
 import DiscountView from './DiscountView';
 import PaymentListV2 from '../chargeV2/PaymentListV2';
+import DialogIdleFee from './DialogIdleFee';
 
 const StepCharging = ({
+  idleFeeConfig,
   connectorInfo={},
   currentPayment,
   onStopCharge,
@@ -159,6 +161,9 @@ const StepCharging = ({
         </View>
       </Animated.View>
       <EndView/>
+      { (idleFeeConfig && idleFeeConfig.idleFee) &&
+        <DialogIdleFee idleFeeConfig={idleFeeConfig}/>
+      }
       <View style={ui.flexc}>
         <TextView style={[styles.label, ui.flex1]}>{$t('charging.paymentMethod')}</TextView>
         { utils.isNotEmpty(selectedVoucher.userVoucherId) &&

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

@@ -13,6 +13,7 @@ import DiscountView from './DiscountView';
 import PaymentListV2 from '../chargeV2/PaymentListV2';
 import PagerUtil from '../chargeV2/PagerUtil';
 import utils from '../../utils/utils';
+import DialogIdleFee from './DialogIdleFee';
 
 export default StepStart = ({
   idleFeeConfig,
@@ -81,28 +82,8 @@ export default StepStart = ({
       </View>
       <EndView/>
       { (idleFeeConfig && idleFeeConfig.idleFee) &&
-        <View>
-          <TextView style={styles.label}>Idle Fee Detail</TextView>
-          { utils.isNotEmpty(idleFeeConfig.repeatDay) &&
-            <TextView style={styles.idleFeeText}>
-              Effective Days: {utils.join(idleFeeConfig.repeatDay, ", ")}
-            </TextView>
-          }
-          { idleFeeConfig.allDay
-          ? <TextView style={styles.idleFeeText}>Effective Time：All day</TextView>
-          : (utils.isNotEmpty(idleFeeConfig.startTime) && utils.isNotEmpty(idleFeeConfig.endTime)) &&
-            <TextView style={styles.idleFeeText}>Effective Time：{idleFeeConfig.startTime + " - " + idleFeeConfig.endTime}</TextView>
-          }
-          { utils.isNotEmpty(idleFeeConfig.idleGracePeriod) &&
-            <TextView style={styles.idleFeeText}>Grace Period: {idleFeeConfig.idleGracePeriod} min</TextView>
-          }
-          <TextView style={styles.idleFeeText}>Charging Rate: {idleFeeConfig.idleFee}/{idleFeeConfig.idleInterval} min </TextView>
-          { utils.isNotEmpty(idleFeeConfig.idleFeeCap) &&
-            <TextView style={styles.idleFeeText}>Idle Fee Cap: {idleFeeConfig.idleFeeCap}</TextView>
-          }
-        </View>
+        <DialogIdleFee idleFeeConfig={idleFeeConfig}/>
       }
-      <EndView half/>
       <View style={ui.flexc}>
         <TextView style={[styles.label, ui.flex1]}>{$t('charging.paymentMethod')}</TextView>
         { app.v3.vouchers &&
@@ -269,11 +250,5 @@ const styles = StyleSheet.create({
     fontSize: 12,
     paddingLeft: 8,
     paddingRight: 16
-  },
-  idleFeeText: {
-    color: textSecondary,
-    fontSize: 12,
-    paddingLeft: 4,
-    paddingBottom: 4
   }
 })