perf: 完成中英文翻译功能

.env.development

@@ -1,2 +1,2 @@
 EXPO_PUBLIC_NODE_ENV=development
-EXPO_PUBLIC_API_URL=https://api.crazycharge.com.hk/api/v1
+EXPO_PUBLIC_API_URL=http://192.168.1.42:12000/api/v1

component/chargingPage/noChargingOngoingPageComponent.tsx

@@ -9,14 +9,15 @@ import { useTranslation } from '../../util/hooks/useTranslation';
 // const MAX_RETRIES = 3; // Maximum number of retry attempts
 
 const NoChargingOngoingPageComponent = () => {
-    const { t } = useTranslation(); // 使用翻译钩子
+    const { t, getCurrentLanguageConfig } = useTranslation(); // 使用翻译钩子
     const [newAvailableConnectors, setNewAvailableConnectors] = useState<any>([]);
+    const isEn = getCurrentLanguageConfig()?.code === 'en';
     useFocusEffect(
         useCallback(() => {
             let isMounted = true; // Simple cleanup flag
             const fetchAllConnectors = async () => {
                 try {
-                    const newAvailableConnectors = await chargeStationService.NewfetchAvailableConnectors();
+                    const newAvailableConnectors = await chargeStationService.NewfetchAvailableConnectors(isEn);
                     // Only update state if component is still mounted
                     if (isMounted) {
                         // Sort the connectors based on stationID

component/global/bookingTabViewComponent.tsx

@@ -3,6 +3,7 @@ import { ActivityIndicator, View, RefreshControl } from 'react-native';
 import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import TabViewComponent, { TabItem } from './chargingRecord';
 import { chargeStationService } from '../../service/chargeStationService';
+import { useTranslation } from '../../util/hooks/useTranslation';
 
 const queryClient = new QueryClient();
 
@@ -38,7 +39,8 @@ const fetchReservationsAndStations = async () => {
     }
 };
 
-const processReservations = (reservations: any [], allStations: string [], isFuture: boolean): TabItem[] => {
+const processReservations = (reservations: any [], allStations: string [], isFuture: boolean, isEn: boolean): TabItem[] => {
+    
     // 确保参数是数组类型
     const validReservations = Array.isArray(reservations) ? reservations : [];
     const validStations = Array.isArray(allStations) ? allStations : [];
@@ -98,7 +100,7 @@ const processReservations = (reservations: any [], allStations: string [], isFut
                     minute: '2-digit',
                     hour12: false
                 }),
-                chargeStationName: stationInfo?.snapshot?.StationName || 'Unknown Station',
+                chargeStationName: (isEn? stationInfo?.snapshoten?.StationName : stationInfo?.snapshot?.StationName) || 'Unknown Station',
                 chargeStationAddress: stationInfo?.snapshot?.Address || 'Unknown Address',
                 stationLng: stationInfo?.snapshot?.StationLng || '',
                 stationLat: stationInfo?.snapshot?.StationLat || '',
@@ -116,6 +118,8 @@ const processReservations = (reservations: any [], allStations: string [], isFut
         });
 };
 const BookingTabViewComponentInner: React.FC = () => {
+    const { t, getCurrentLanguageConfig } = useTranslation(); // 使用翻译钩子
+    const isEn = getCurrentLanguageConfig()?.code === 'en';
     const { data, isLoading, error } = useQuery({
         queryKey: ['reservationsAndStations'],
         queryFn: fetchReservationsAndStations,
@@ -145,8 +149,8 @@ const BookingTabViewComponentInner: React.FC = () => {
     const reservations = Array.isArray(data?.reservations) ? data.reservations : [];
     const stations = Array.isArray(data?.stations) ? data.stations : [];
 
-    const futureReservations = processReservations(reservations, stations, true);
-    const completedReservations = processReservations(reservations, stations, false);
+    const futureReservations = processReservations(reservations, stations, true, isEn);
+    const completedReservations = processReservations(reservations, stations, false, isEn);
     const allReservationItems = [...futureReservations, ...completedReservations];
     return (
         <TabViewComponent

component/global/displayedOnlyCouponTabView.tsx

@@ -43,7 +43,8 @@ const FirstRoute = ({
     loading: boolean;
     handleCouponClick: (couponName: string, couponDescription: string) => void;
 }) => {
-    const { t } = useTranslation(); // 使用翻译钩子
+    const { t, getCurrentLanguageConfig } = useTranslation(); // 使用翻译钩子
+    const isEn = getCurrentLanguageConfig()?.code === 'en';
     
     return (
         <View className="flex-1">
@@ -57,7 +58,7 @@ const FirstRoute = ({
                             <ActivityIndicator />
                         </View>
                     ) : (
-                        <View className="">
+                        <View>
                             <View>
                                 {coupons.filter(
                                     (coupon: any) =>
@@ -82,13 +83,13 @@ const FirstRoute = ({
                                         .map((coupon: any, index: any) => (
                                             <IndividualCouponComponent
                                                 onCouponClick={() =>
-                                                    handleCouponClick(coupon.coupon.name, coupon.coupon.description)
+                                                    handleCouponClick(isEn? coupon.coupon.name_en:coupon.coupon.name, isEn?coupon.coupon.description_en:coupon.coupon.description)
                                                 }
                                                 // key={coupon.redeem_code}
                                                 key={`${coupon.id}-${index}`}
-                                                title={coupon.coupon.name}
+                                                title={isEn? coupon.coupon.name_en:coupon.coupon.name}
                                                 price={coupon.coupon.amount}
-                                                detail={coupon.coupon.description}
+                                                detail={isEn?coupon.coupon.description_en:coupon.coupon.description}
                                                 date={formatCouponDate(coupon.expire_date)}
                                                 setOpacity={false}
                                                 noCircle={true}
@@ -105,26 +106,30 @@ const FirstRoute = ({
     );
 };
 
-const SecondRoute = ({ coupons }: { coupons: any }) => (
-    <ScrollView style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}>
-        <View className="flex-1 flex-col">
-            {coupons
-                .filter((coupon: any) => coupon.is_consumed === true || new Date(coupon.expire_date) < new Date())
-                .slice(0, 30)
-                .map((coupon: any, index: any) => (
-                    <IndividualCouponComponent
-                        key={`${coupon.id}-${index}`}
-                        title={coupon.coupon.name}
-                        price={coupon.coupon.amount}
-                        detail={coupon.coupon.description}
-                        date={formatCouponDate(coupon.expire_date)}
-                        setOpacity={true}
-                        noCircle={true}
-                    />
-                ))}
-        </View>
-    </ScrollView>
-);
+const SecondRoute = ({ coupons }: { coupons: any }) => {
+    const { t, getCurrentLanguageConfig } = useTranslation(); // 使用翻译钩子
+    const isEn = getCurrentLanguageConfig()?.code === 'en';
+    return (
+        <ScrollView style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}>
+            <View className="flex-1 flex-col">
+                {coupons
+                    .filter((coupon: any) => coupon.is_consumed === true || new Date(coupon.expire_date) < new Date())
+                    .slice(0, 30)
+                    .map((coupon: any, index: any) => (
+                        <IndividualCouponComponent
+                            key={`${coupon.id}-${index}`}
+                            title={isEn? coupon.coupon.name_en:coupon.coupon.name}
+                            price={coupon.coupon.amount}
+                            detail={isEn?coupon.coupon.description_en:coupon.coupon.description}
+                            date={formatCouponDate(coupon.expire_date)}
+                            setOpacity={true}
+                            noCircle={true}
+                        />
+                    ))}
+            </View>
+        </ScrollView>
+    );
+}
 
 const DisplayedOnlyCouponTabView: React.FC<TabViewComponentProps> = ({ titles }) => {
     const layout = useWindowDimensions();

component/resultDetailPage/resultDetailPageComponent.tsx

@@ -192,8 +192,8 @@ const ResultDetailPageComponent = () => {
     const [currentLocation, setCurrentLocation] = useState<Location.LocationObject | null>(null);
     const [price, setPrice] = useState('');
     const [newAvailableConnectors, setNewAvailableConnectors] = useState<any>([]);
-    const { t } = useTranslation();
-
+    const { t , getCurrentLanguageConfig} = useTranslation();
+    const isEn = getCurrentLanguageConfig()?.code === 'en';
     useEffect(() => {
         const imgObj = imageSourceProps? {uri: imageSourceProps} : require('../../assets/dummyStationPicture.png')
         setImageSource(imgObj);
@@ -228,7 +228,7 @@ const ResultDetailPageComponent = () => {
             let isMounted = true; // Simple cleanup flag
             const fetchAllConnectors = async () => {
                 try {
-                    const newAvailableConnectors = await chargeStationService.NewfetchAvailableConnectors();
+                    const newAvailableConnectors = await chargeStationService.NewfetchAvailableConnectors(isEn);
                     // Only update state if component is still mounted
                     if (isMounted) {
                         setNewAvailableConnectors(newAvailableConnectors);
@@ -250,7 +250,6 @@ const ResultDetailPageComponent = () => {
         console.log('starting navigation press in resultDetail', StationLat, StationLng);
         if (StationLat && StationLng) {
             const label = encodeURIComponent(chargeStationName);
-
             const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${StationLat},${StationLng}`;
             // Fallback URL for web browser
             const webUrl = `https://www.google.com/maps/dir/?api=1&destination=${StationLat},${StationLng}`;
@@ -305,21 +304,21 @@ const ResultDetailPageComponent = () => {
                         <Text className="text-3xl ">{chargeStationName}</Text>
                     </View>
                     <View className="flex-row justify-between items-center">
-                        <Text className="text-base" style={{ color: '#888888' }}>
+                        <Text className="text-base w-[82%]" style={{ color: '#888888' }}>
                             {chargeStationAddress}
                         </Text>
                         <NormalButton
                             title={
                                 <View className="flex-row items-center justify-center text-center space-x-1">
                                     <DirectionLogoSvg />
-                                    <Text className="text-base ">{t('charging.result_detail_page.route')}</Text>
+                                    <Text className="text-base">{t('charging.result_detail_page.route')}</Text>
                                 </View>
                             }
                             onPress={() => handleNavigationPress(stationLat, stationLng)}
                             extendedStyle={{
                                 backgroundColor: '#E3F2F8',
                                 borderRadius: 61,
-                                paddingHorizontal: 20,
+                                paddingHorizontal: 14,
                                 paddingVertical: 6
                             }}
                         />

service/chargeStationService.tsx

@@ -170,13 +170,13 @@ class ChargeStationService {
         }
     }
 
-    async NewfetchAvailableConnectors() {
+    async NewfetchAvailableConnectors(isEn: boolean ) {
         try {
             const response = await apiClient.instance.get(`/clients/chargestations/resources/local/info`);
             if (response.status === 200 && response.data.code === 200) {
                 return response.data.data.map((station: any) => {
                     // const snapshotData = JSON.parse(station.snapshot);
-                    const snapshotData = station.snapshot;
+                    const snapshotData = isEn? station.snapshoten:station.snapshot
                     const availableConnectors = station?.Equipments?.reduce((count: number, equipment: any) => {
                         return (
                             count +