perf: 页面优化

app/(auth)/(tabs)/(account)/couponDetailPage.tsx

@@ -1,3 +1,4 @@
+// app/(auth)/(tabs)/(account)/couponDetailPage.tsx
 import { View, Text, ScrollView, Pressable, Alert } from 'react-native';
 import React, { useContext, useEffect, useState } from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -9,7 +10,10 @@ import NormalButton from '../../../../component/global/normal_button';
 import { authenticationService } from '../../../../service/authService';
 import * as SecureStore from 'expo-secure-store';
 import { useLocalSearchParams } from 'expo-router';
+import { useTranslation } from '../../../../util/hooks/useTranslation';
+
 const CouponDetailPage = () => {
+    const { t } = useTranslation();
     const { user, setUser } = useContext(AuthContext);
     const [token, setToken] = useState<string | null>(null);
     const [name, setName] = useState<string | null>(null);
@@ -18,11 +22,11 @@ const CouponDetailPage = () => {
 
     const handleChangeName = async () => {
         if (!name) {
-            setError('請輸入新的暱稱');
+            setError(t('coupon_detail.enter_name_error'));
             return;
         }
         if (!token) {
-            setError('未找到有效的登錄令牌，請重新登錄');
+            setError(t('coupon_detail.no_token_error'));
             return;
         }
         setError(null);
@@ -38,11 +42,11 @@ const CouponDetailPage = () => {
                 }
                 router.replace('accountMainPage');
             } else {
-                setError('更新暱稱失敗，請稍後再試');
+                setError(t('coupon_detail.update_failed'));
             }
         } catch (error) {
             console.error('Error changing name:', error);
-            setError('發生錯誤，請稍後再試');
+            setError(t('coupon_detail.general_error'));
         } finally {
             setIsLoading(false);
         }
@@ -63,7 +67,7 @@ const CouponDetailPage = () => {
                     >
                         <CrossLogoSvg />
                     </Pressable>
-                    <Text style={{ fontSize: 45, marginVertical: 25 }}>優惠券詳情</Text>
+                    <Text style={{ fontSize: 45, marginVertical: 25 }}>{t('coupon_detail.title')}</Text>
                     <Text className="text-2xl pb-4">{couponName}</Text>
                     <Text className="text-lg pb-8">{couponDescription}</Text>
                 </View>
@@ -76,20 +80,20 @@ const CouponDetailPage = () => {
                                 fontWeight: '800'
                             }}
                         >
-                            立即使用優惠券
+                            {t('coupon_detail.use_coupon')}
                         </Text>
                     }
                     onPress={() => {
                         Alert.alert(
-                            '立即使用優惠券', // Title
-                            '按確認打開相機，掃描充電站上的二維碼以使用優惠券', // Message
+                            t('coupon_detail.use_coupon'), // Title
+                            t('coupon_detail.scan_qr_message'), // Message
                             [
                                 {
-                                    text: '取消',
+                                    text: t('common.cancel'),
                                     style: 'cancel'
                                 },
                                 {
-                                    text: '確認',
+                                    text: t('common.confirm'),
                                     onPress: () => router.push('scanQrPage')
                                 }
                             ]
@@ -102,4 +106,4 @@ const CouponDetailPage = () => {
     );
 };
 
-export default CouponDetailPage;
+export default CouponDetailPage;

component/accountPages/accountMainPageComponent.tsx

@@ -17,13 +17,15 @@ import {
     WalletSvg,
     NotificationSvg,
     BookingIconSvg,
-    UserTermsSvg
+    UserTermsSvg,
+    LanguageSvg
 } from '../global/SVG';
 import { usePushNotifications } from '../../app/hooks/usePushNotifications';
 import useUserInfoStore from '../../providers/userinfo_store';
 import { authenticationService } from '../../service/authService';
 import { handleGoWhatsApp } from '../../util/index';
 import { useTranslation } from '../../util/hooks/useTranslation';
+import LanguageSwitcher from '../registrationMultiStepForm/formComponent/formPages/languageSwitcher';
 
 const AccountMainPageComponent = () => {
     const { user, logout } = useAuth();
@@ -73,7 +75,6 @@ const AccountMainPageComponent = () => {
             };
         }, [expoPushToken]) // Add expoPushToken as a dependency
     );
-
     const toggleNotifications = async () => {
         Alert.alert(t('account.notification_settings'), t('account.notification_settings_message'), [
             {
@@ -86,7 +87,6 @@ const AccountMainPageComponent = () => {
             }
         ]);
     };
-
     return (
         <SafeAreaView className="flex-1 bg-white dark:bg-[#05181C]" edges={['top', 'left', 'right']}>
             <ScrollView className="flex-1 mx-[5%]" showsVerticalScrollIndicator={false}>
@@ -104,14 +104,6 @@ const AccountMainPageComponent = () => {
                         <WalletSvg isDark={colorScheme == 'dark'} />
                         <Text className="text-black dark:text-[#36DFFF]">{t('account.wallet')}</Text>
                     </Pressable>
-
-                    {/* <Pressable
-                        className="h-[114px] w-[30%] bg-[#e7f2f8] items-center justify-center rounded-xl"
-                        onPress={() => router.replace('myVehiclePage')}
-                    >
-                        <MyCarSvg />
-                        <Text>{t('account.my_vehicle')}</Text>
-                    </Pressable> */}
                     <Pressable
                         className="h-[114px] w-[30%] bg-[#e7f2f8] dark:bg-[#253336] items-center justify-center rounded-xl"
                         onPress={() => router.replace('vipQrPage')}
@@ -174,7 +166,6 @@ const AccountMainPageComponent = () => {
                     <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                     <View className=" py-4 ">
                         <Pressable
-                            // onPress={() => router.push('/assistancePage')}
                             className="flex-row items-center"
                             hitSlop={{
                                 top: 10,
@@ -188,14 +179,13 @@ const AccountMainPageComponent = () => {
                                     <NotificationSvg isDark={colorScheme == 'dark'} />
                                     <Text className="text-lg pl-2 text-black dark:text-white">{t('account.allow_notifications')}</Text>
                                 </View>
-                                <Switch value={notificationsEnabled} onChange={toggleNotifications} />
+                                <Switch className='mr-8' value={notificationsEnabled} onChange={toggleNotifications} />
                             </View>
                         </Pressable>
                     </View>
-                    {/* <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
-                    <View className=" py-4 ">
+                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
+                    <View className="py-4">
                         <Pressable
-                            // onPress={() => router.push('/assistancePage')}
                             className="flex-row items-center"
                             hitSlop={{
                                 top: 10,
@@ -206,13 +196,13 @@ const AccountMainPageComponent = () => {
                         >
                             <View className="flex flex-row justify-between w-full">
                                 <View className="flex flex-row items-center">
-                                    <DarkModeSvg isDark={colorScheme == 'dark'} />
-                                    <Text className="text-lg pl-2 text-black dark:text-white">{t('account.dark_mode')}</Text>
+                                    <LanguageSvg isDark={colorScheme == 'dark'} />
+                                    <Text className="text-lg pl-2 text-black dark:text-white">{t('account.select_language')}</Text>
                                 </View>
-                                <Switch value={colorScheme == 'dark'} onChange={toggleColorScheme} />
+                                <LanguageSwitcher/>
                             </View>
                         </Pressable>
-                    </View> */}
+                    </View>
                     <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                     <View className="py-4">
                         <Pressable

component/registrationMultiStepForm/formComponent/formPages/languageSwitcher.tsx

@@ -11,7 +11,6 @@ const LanguageSwitcher: React.FC = () => {
     format 
   } = useTranslation();
   
-  const languages = getSupportedLanguages();
   const currentLanguage = getCurrentLanguageConfig();
   
   const [isEnabled, setIsEnabled] = useState<boolean>(false);
@@ -51,8 +50,6 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: 10,
-    marginLeft: 10,
   },
   title: {
     color: '#333333',

component/registrationMultiStepForm/formComponent/formPages/loginPage.tsx

@@ -105,8 +105,10 @@ const LoginPage: React.FC<LoginPageProps> = ({ goToNextPage, goToForgetPassWordP
             contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
             keyboardShouldPersistTaps="handled"
             className={`flex-1   ${screenHeight < 750 ? '' : 'space-y-8'}`}
-        >
-            <LanguageSwitcher></LanguageSwitcher>
+        >   
+            <View className='ml-5 mt-2'>
+                <LanguageSwitcher></LanguageSwitcher>
+            </View>
             <View className="flex-1 py-3">
                 <View className="items-center">
                     {/* <View className="flex-3 items-center  justify-end" style={{}}> */}

i18n/locales/en/translation.json

@@ -504,6 +504,15 @@
     "prepaid_wallet": "Prepaid Wallet",
     "return_home": "Return to Home"
   },
+  "coupon_detail": {
+    "title": "Coupon Details",
+    "use_coupon": "Use Coupon Now",
+    "scan_qr_message": "Press confirm to open camera and scan the QR code on the charging station to use the coupon",
+    "enter_name_error": "Please enter a new nickname",
+    "no_token_error": "No valid login token found, please log in again",
+    "update_failed": "Failed to update nickname, please try again later",
+    "general_error": "An error occurred, please try again later"
+  },
   "account": {
     "wallet": "Wallet",
     "my_vehicle": "My Vehicle",
@@ -516,7 +525,8 @@
     "notification_settings": "Notification Settings",
     "notification_settings_message": "To change notification settings, please go to your phone's settings page and allow CrazyCharge notifications.",
     "go_to_settings": "Go to Settings",
-    "notification_update_failed": "Failed to update notification permissions"
+    "notification_update_failed": "Failed to update notification permissions",
+    "select_language": "Language selection"
   },
   "chargingHistory": {
     "charging_records": "Records",

i18n/locales/zh-TW/translation.json

@@ -501,6 +501,15 @@
     "prepaid_wallet": "預付銀包",
     "return_home": "返回主頁"
   },
+  "coupon_detail": {
+    "title": "優惠券詳情",
+    "use_coupon": "立即使用優惠券",
+    "scan_qr_message": "按確認打開相機，掃描充電站上的二維碼以使用優惠券",
+    "enter_name_error": "請輸入新的暱稱",
+    "no_token_error": "未找到有效的登錄令牌，請重新登錄",
+    "update_failed": "更新暱稱失敗，請稍後再試",
+    "general_error": "發生錯誤，請稍後再試"
+  },
   "account": {
     "wallet": "錢包",
     "my_vehicle": "我的車輛",
@@ -513,7 +522,8 @@
     "notification_settings": "通知設定",
     "notification_settings_message": "要更改通知設定，請前往手機的設定頁面，允許CrazyCharge通知。",
     "go_to_settings": "前往設定",
-    "notification_update_failed": "更新通知權限失敗"
+    "notification_update_failed": "更新通知權限失敗",
+    "select_language": "語言選擇"
   },
   "chargingHistory": {
     "charging_records": "充電記錄",

util/hooks/useTranslation.ts

@@ -53,7 +53,7 @@ export const useTranslation = (ns?: string) => {
     if (isLanguageSupported(deviceLanguage)) {
       return await switchLanguage(deviceLanguage);
     }
-    return await switchLanguage('en');
+    return await switchLanguage('zh-TW');
   };
 
   return {