app/(auth)/(tabs)/(home)/totalPayment.tsx

@@ -563,7 +563,9 @@ const TotalPayment = () => {
                         <Text style={styles.grayColor} className="text-sm lg:text-base mt-4">
                             每度電價錢 : $ {currentPriceTotalPayment ? currentPriceTotalPayment : 'Loading...'}
                         </Text>
-
+                        <Text style={styles.grayColor} className="text-sm lg:text-base mt-4">
+                          注: 跨時段充電將按不同時段的單價分別計费，實際充電量可能浮動
+                        </Text>
                         <View className="h-0.5 my-3 bg-[#f4f4f4]" />
 
                         {processed_coupon_store && processed_coupon_store.length > 0 && (
@@ -608,7 +610,7 @@ const TotalPayment = () => {
                         {processed_coupon_store && processed_coupon_store.length > 0 && (
                             <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                         )}
-                        <View className="flex-row justify-between ">
+                        <View className="flex-row justify-between">
                             <Text className="text-xl">總計</Text>
                             <Text className="text-3xl">HK$ {totalPrice !== null ? totalPrice : 'Loading...'}</Text>
                         </View>

component/accountPages/chargingDetailsPageComponent.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Pressable, Dimensions,Image, StyleSheet } from 'react-native';
+import { View, Text, Pressable, Dimensions,Image, StyleSheet, ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { router, useLocalSearchParams } from 'expo-router';
 import { CrossLogoSvg } from '../global/SVG';
@@ -71,8 +71,9 @@ const ChargingDetailsPageComponent = () => {
   }, [list])
     return (
         <SafeAreaView className="flex-1 bg-white" edges={['top']}>
+          <ScrollView>
             <View style={{ minHeight: screenHeight, flex: 1 }}>
-                <View className="mx-[5%]" style={{ marginTop: 25}}>
+                <View className="mx-[3%]" style={{ marginTop: 25}}>
                   <Pressable
                       onPress={() => {
                           if (router.canGoBack()) {
@@ -89,28 +90,35 @@ const ChargingDetailsPageComponent = () => {
                         source={require('../../assets/ccLogo.png')}
                         resizeMode="contain"
                         style={{
-                            width: screenHeight > 750 ? 200 : 110,
-                            height: screenHeight > 750 ? 200 : 110
+                            width: 100,
+                            height: 100
                         }}
                     />
                     <Text style={styles.totalPrice}>{list.promotion_name? couponPrice:totalPrice}</Text>
                     <View style={styles.viewLine}></View>
-                    <View className='w-full flex-row justify-between mt-6 pr-10'>
+                    <View className='w-full flex-row justify-between mt-6'>
                       <Text style={styles.leftLable}>訂單编號: </Text>
-                      <Text style={styles.rightLable}>{list.format_order_id}</Text>
+                      <View style={{ flex: 1, marginLeft: 5 }}>
+                        <Text style={styles.rightLable}>{list.format_order_id}</Text>
+                      </View>
                     </View>
-                    <View className='w-full flex-row justify-between my-3 pr-10'>
+                    <View className='w-full flex-row justify-between my-3'>
                       <Text style={styles.leftLable}>充電時間: </Text>
-                      <Text style={styles.rightLable}>{time}</Text>
+                      <View style={{ flex: 1, marginLeft: 5 }}>
+                        <Text style={styles.rightLable}>{time}</Text>
+                      </View>
+
                     </View>
-                    <View className='w-full flex-row justify-between pr-10 mb-4'>
+                    <View className='w-full flex-row justify-between mb-4'>
                       <Text style={styles.leftLable}>充電站位置:</Text>
-                      <Text style={styles.rightLable}>{params.chargeStationName}</Text>
+                      <View style={{ flex: 1, marginLeft: 5 }}>
+                        <Text style={styles.rightLable}>{params.chargeStationName}</Text>
+                      </View>
                     </View>
                     <View style={styles.viewLine}></View>
                     <ChargingDataComponent list={list} remark={remark} totalPrice={totalPrice}/>
                     <View style={styles.viewLine}></View>
-                    <View className='w-full flex-row justify-between mt-6 pr-10'>
+                    <View className='w-full flex-row justify-between mt-6'>
                       <View>
                         <Text style={styles.leftLable}>實付：</Text>
                         {list.promotion_name ? <Text style={{fontSize: 12, color:'#888888'}}>優惠券支付</Text>: null}
@@ -119,8 +127,8 @@ const ChargingDetailsPageComponent = () => {
                     </View>
                   </View>
                 </View>
-                <View style={{ width: "100%",height: 130 }} />
             </View>
+          </ScrollView>
         </SafeAreaView>
     );
 };
@@ -167,15 +175,15 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
       <View>
         {(remark.RushKwh) ? 
         <View>
-          <View className='w-full flex-row justify-between mt-4 pr-10'>
+          <View className='w-full flex-row justify-between mt-4'>
             <Text style={styles.leftLable}>峰時總電量: </Text>
             <Text style={styles.rightLable}>{remark.RushKwh?.toFixed(1)}</Text>
           </View>
-          <View className='w-full flex-row justify-between my-3 pr-10'>
+          <View className='w-full flex-row justify-between my-3'>
               <Text style={styles.leftLable}>峰時電價({rush.from}-{rush.to}):</Text>
             <Text style={styles.rightLable}>${rush.price}</Text>
           </View>
-          <View className='w-full flex-row justify-between pr-10 mb-3'>
+          <View className='w-full flex-row justify-between mb-3'>
             <Text style={styles.leftLable}>峰時總電費:</Text>
             
             <Text style={styles.rightLable}>${remark.RushCharge?.toFixed(1)}</Text>
@@ -183,16 +191,16 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
         </View>: null }
         {(remark.ElseKwh) ? 
         <View>
-          <View className='w-full flex-row justify-between mt-4 pr-10'>
+          <View className='w-full flex-row justify-between mt-4'>
             <Text style={styles.leftLable}>平時總電量: </Text>
             <Text style={styles.rightLable}>{remark.ElseKwh?.toFixed(1)}</Text>
           </View>
-          <View className='w-full flex-row justify-between my-3 pr-10'>
+          <View className='w-full flex-row justify-between my-3'>
             <Text style={styles.leftLable}>平時電價({elses.from}-{elses.to}):</Text>
 
             <Text style={styles.rightLable}>${elses.price}</Text>
           </View>
-          <View className='w-full flex-row justify-between pr-10 mb-3'>
+          <View className='w-full flex-row justify-between mb-3'>
             <Text style={styles.leftLable}>平時總電費:</Text>
             
             <Text style={styles.rightLable}>${remark.ElseCharge?.toFixed(1)}</Text>
@@ -200,17 +208,16 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
         </View>: null }
         {(remark.OffKwh) ? 
         <View>
-          <View className='w-full flex-row justify-between mt-4 pr-10'>
+          <View className='w-full flex-row justify-between mt-4'>
             <Text style={styles.leftLable}>穀時總電量: </Text>
             <Text style={styles.rightLable}>{remark.OffKwh?.toFixed(1)}</Text>
           </View>
-          <View className='w-full flex-row justify-between my-3 pr-10'>
+          <View className='w-full flex-row justify-between my-3'>
               <Text style={styles.leftLable}>穀時電價({off.from}-{off.to}): </Text>
             <Text style={styles.rightLable}>${off.price}</Text>
           </View>
-          <View className='w-full flex-row justify-between pr-10 mb-3'>
-            <Text style={styles.leftLable}>穀時總電費:</Text>
-            
+          <View className='w-full flex-row justify-between mb-3'>
+            <Text style={styles.leftLable}>穀時總電費:</Text>    
             <Text style={styles.rightLable}>${remark.OffCharge?.toFixed(1)}</Text>
           </View>
         </View>: null }
@@ -219,15 +226,15 @@ const ChargingDataComponent: React.FC<ChargingDataComponentProps> = ({
   } else {
     return (
       <View>
-        <View className='w-full flex-row justify-between mt-4 pr-10'>
+        <View className='w-full flex-row justify-between mt-4'>
             <Text style={styles.leftLable}>總電量: </Text>
             <Text style={styles.rightLable}>{remark.TotalPower?.toFixed(1)}</Text>
           </View>
-          <View className='w-full flex-row justify-between my-3 pr-10'>
+          <View className='w-full flex-row justify-between my-3'>
               <Text style={styles.leftLable}>電價: </Text>
             <Text style={styles.rightLable}>${list?.connector?.EquipmentID?.StationID?.price}</Text>
           </View>
-          <View className='w-full flex-row justify-between pr-10 mb-3'>
+          <View className='w-full flex-row justify-between mb-3'>
             <Text style={styles.leftLable}>總電費: </Text>
             
             <Text style={styles.rightLable}>${totalPrice}</Text>
@@ -253,7 +260,10 @@ const styles = StyleSheet.create({
     color:'#888888',
   },
   rightLable: {
-    fontSize: 17
+    fontSize: 17,
+    flex: 1,
+    flexWrap: 'wrap',
+    textAlign: 'right',
   },
 })
 export default ChargingDetailsPageComponent;

component/chargingPage/paymentSummaryPageComponent.tsx

@@ -75,44 +75,6 @@ const PaymentSummaryPageComponent = () => {
 
     const promotion_code = selectedCouponRedeemCode || '';
 
-    // const convertEndTime = (num1: number) => {
-    //     switch (num1) {
-    //         case 20:
-    //             return 25;
-    //         case 25:
-    //             return 30;
-    //         case 30:
-    //             return 40;
-    //         case 40:
-    //             return 45;
-    //     }
-    // };
-
-    // function convertToUTC(date, bookTime) {
-    //     const currentYear = new Date().getFullYear();
-    //     const [month, day] = date.split('/');
-    //     const fullDate = new Date(`${currentYear}-${month}-${day}T${bookTime}:00`);
-    //     fullDate.setHours(fullDate.getHours());
-    //     return fullDate;
-    // }
-
-    // const book_time = convertToUTC(date, bookTime);
-    // const timeRequiredInMinute = convertEndTime(Number(chargingWatt.split(' ')[0]));
-
-    // function findEndTime(num1, book_time) {
-    //     const date = new Date(book_time);
-    //     date.setMinutes(date.getMinutes() + num1);
-    //     return date;
-    // }
-
-    // let end_time;
-    // if (chargingWatt === '') {
-    //     end_time = book_time;
-    // } else {
-    //     const endingTime = findEndTime(timeRequiredInMinute, book_time);
-    //     end_time = endingTime;
-    // }
-
     const total_fee = parseInt(finalFee, 10);
 
     function convertToUTC(date: string, time: string): Date {

i18n/locales/en/translation.json

@@ -126,13 +126,6 @@
       "change_phone_failed": "Failed to change phone number, please try again later"
     }
   },
-  "common": {
-    "previous": "< Previous step",
-    "next": "Next step >",
-    "confirm": "Confirm",
-    "cancel": "Cancel",
-    "title": ""
-  },
   "home": {
     "title": "Home Screen",
     "subtitle": "Welcome to our app",