perf: 首页罚款弹窗

.env.development

@@ -1,2 +1,2 @@
 EXPO_PUBLIC_NODE_ENV=development
-EXPO_PUBLIC_API_URL=https://charging.ayftech.xyz/api/v1
+EXPO_PUBLIC_API_URL=https://api.crazycharge.com.hk/api/v1

component/chargingPage/penaltyPaymentPageComponent.tsx

@@ -5,6 +5,7 @@ import NormalButton from '../global/normal_button';
 import { useEffect } from 'react';
 import { chargeStationService } from '../../service/chargeStationService';
 import useUserInfoStore from '../../providers/userinfo_store';
+import { PreviousPageBlackSvg } from '../global/SVG';
 
 const PenaltyPaymentPageComponent = () => {
     const params = useLocalSearchParams();
@@ -62,12 +63,15 @@ const PenaltyPaymentPageComponent = () => {
     const handlePayment = async () => {
         try {
             const result = await chargeStationService.payPenalty(payload);
-            if (result) {
+            console.log('Payment result:', result);
+            if (result.status) {
                 Alert.alert('支付成功', '罰款已成功支付', [
                     { text: '確認', onPress: () => router.replace('/mainPage') }
                 ]);
             } else {
-                Alert.alert('支付失敗', '請稍後再試');
+                Alert.alert('支付失敗', '餘額不足，即將跳轉到錢包', [
+                    { text: '確認', onPress: () => router.push('/(account)/(wallet)/walletPage') }
+                ]);
             }
         } catch (error) {
             console.error('Payment error:', error);
@@ -78,63 +82,75 @@ const PenaltyPaymentPageComponent = () => {
     return (
         <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }} edges={['top', 'left', 'right']}>
             <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
-                <View className="flex-1">
-                    <View className="pl-8 pt-8">
-                        <Text className="text-3xl mt-8">尚未繳付罰款的充電記錄</Text>
-                    </View>
+                <View style={{ marginTop: 25 }} className="mx-[5%]">
+                    <Pressable
+                        onPress={() => {
+                            if (router.canGoBack()) {
+                                router.back();
+                            } else {
+                                router.replace('/mainPage');
+                            }
+                        }}
+                    >
+                        <PreviousPageBlackSvg />
+                    </Pressable>
+                    <Text className="text-3xl my-8 text-center">尚未繳付罰款的充電記錄</Text>
+                </View>
+                {/* <View className="pl-8 pt-8">
+                    <Text className="text-3xl mt-8">尚未繳付罰款的充電記錄</Text>
+                </View> */}
 
-                    <View className="flex-1 mt-4 mx-[5%]">
-                        <View className="flex-1 flex-row items-center pb-3">
-                            <View className="flex-1 flex-column">
-                                <Text style={styles.grayColor} className="text-base">
-                                    實際充電到期時間
-                                </Text>
-                                <Text style={styles.greenColor} className="text-4xl text-center  pt-2">
-                                    {actual_end_time}
-                                </Text>
-                            </View>
-                            <View className="flex-1 flex-column">
-                                <Text style={styles.grayColor} className="text-base pl-7">
-                                    實際充電結束時間
-                                </Text>
-                                <Text style={styles.greenColor} className="text-4xl text-center pt-2">
-                                    {user_end_time}
-                                </Text>
-                            </View>
-                        </View>
-                        <View className="flex-1 flex-column justify-center space-y-1 pb-3">
-                            <Text style={styles.grayColor} className="text-base">
-                                充電日期
-                            </Text>
-                            <Text style={styles.greenColor} className="text-base">
-                                {date}
-                            </Text>
-                        </View>
-                        {/* <View className="flex-1 flex-column justify-center space-y-1 pb-3">
-                            <Text style={styles.grayColor} className="text-base">
-                                充電地點
-                            </Text>
-                            <Text style={styles.greenColor} className="text-base ">
-                                Crazy Charge(偉業街)
-                            </Text>
-                        </View> */}
-                        <View className="flex-1 flex-column justify-center space-y-1 pb-3">
+                <View className="flex-1 mt-4 mx-[5%]">
+                    <View className="flex-1 flex-row items-center pb-3">
+                        <View className="flex-1 flex-column">
                             <Text style={styles.grayColor} className="text-base">
-                                罰款金額
+                                實際充電到期時間
                             </Text>
-                            <Text style={styles.greenColor} className="text-lg ">
-                                {params.penalty_fee}
+                            <Text style={styles.greenColor} className="text-4xl text-center  pt-2">
+                                {actual_end_time}
                             </Text>
                         </View>
-                        <View className="flex-1 flex-column justify-center space-y-1 pb-3">
-                            <Text style={styles.grayColor} className="text-base">
-                                訂單編號
+                        <View className="flex-1 flex-column">
+                            <Text style={styles.grayColor} className="text-base pl-7">
+                                實際充電結束時間
                             </Text>
-                            <Text style={styles.greenColor} className=" ">
-                                {params.format_order_id}
+                            <Text style={styles.greenColor} className="text-4xl text-center pt-2">
+                                {user_end_time}
                             </Text>
                         </View>
                     </View>
+                    <View className="flex-1 flex-column justify-center space-y-1 pb-3">
+                        <Text style={styles.grayColor} className="text-base">
+                            充電日期
+                        </Text>
+                        <Text style={styles.greenColor} className="text-base">
+                            {date}
+                        </Text>
+                    </View>
+                    {/* <View className="flex-1 flex-column justify-center space-y-1 pb-3">
+                        <Text style={styles.grayColor} className="text-base">
+                            充電地點
+                        </Text>
+                        <Text style={styles.greenColor} className="text-base ">
+                            Crazy Charge(偉業街)
+                        </Text>
+                    </View> */}
+                    <View className="flex-1 flex-column justify-center space-y-1 pb-3">
+                        <Text style={styles.grayColor} className="text-base">
+                            罰款金額
+                        </Text>
+                        <Text style={styles.greenColor} className="text-lg ">
+                            {params.penalty_fee}
+                        </Text>
+                    </View>
+                    <View className="flex-1 flex-column justify-center space-y-1 pb-3">
+                        <Text style={styles.grayColor} className="text-base">
+                            訂單編號
+                        </Text>
+                        <Text style={styles.greenColor} className=" ">
+                            {params.format_order_id}
+                        </Text>
+                    </View>
                 </View>
 
                 <View className="border-t mx-4 border-[#CCCCCC]"></View>

component/homePage/homePage.tsx

@@ -34,9 +34,26 @@ import useUserInfoStore from '../../providers/userinfo_store';
 import NormalInput from '../global/normal_input';
 import { notificationStorage } from '../notificationStorage';
 import { handleGoWhatsApp } from '../../util/index';
+import { useChargingStore } from '../../providers/scan_qr_payload_store';
+
 interface HomePageProps {}
 
 const HomePage: React.FC<HomePageProps> = () => {
+    const {
+        promotion_code,
+        stationID,
+        sum_of_coupon,
+        scanned_qr_code,
+        coupon_detail,
+        total_power,
+        processed_coupon_store,
+        setPromotionCode,
+        setCouponDetail,
+        setTotalPower,
+        setProcessedCouponStore,
+        setSumOfCoupon,
+        setCurrentPriceStore
+    } = useChargingStore();
     const now = new Date();
     const { user } = useContext(AuthContext);
     const { userID, currentPrice, setUserID, setCurrentPrice, setNotifySessionID } = useUserInfoStore();
@@ -112,8 +129,15 @@ const HomePage: React.FC<HomePageProps> = () => {
             ]);
         };
         fetchWithAllSettled();
+        
     }, []);
-
+    const cleanupData = () => {
+        setPromotionCode([]);
+        setCouponDetail([]);
+        setProcessedCouponStore([]);
+        setSumOfCoupon(0);
+        setTotalPower(null);
+    };
     useFocusEffect(
         useCallback(() => {
             let isActive = true;
@@ -124,7 +148,7 @@ const HomePage: React.FC<HomePageProps> = () => {
                         chargeStationService.fetchReservationHistories(),
                         chargeStationService.getAdvertise()
                     ]);
-
+    
                     if (!isActive) return;
 
                     // Handle reservation data
@@ -160,6 +184,54 @@ const HomePage: React.FC<HomePageProps> = () => {
                         totalUnread += unreadPromotions.length;
                     }
                     setUnreadCount(totalUnread);
+                    if (results[0].status === 'fulfilled') {
+
+                        const reservationHistories = results[0].value;
+
+                        if (reservationHistories || Array.isArray(reservationHistories)) {
+                        const unpaidPenalties = reservationHistories.filter(
+                            (reservation: any) => reservation.penalty_fee > 0 && reservation.penalty_paid_status === false
+                        );
+                        const mostRecentUnpaidReservation = unpaidPenalties.reduce((mostRecent: any, current: any) => {
+                            return new Date(mostRecent.created_at) > new Date(current.created_at) ? mostRecent : current;
+                        }, unpaidPenalties[0]);
+
+                        if (unpaidPenalties.length > 0) {
+                            Alert.alert(
+                                '未付罰款',
+                                '您有未支付的罰款。請先支付罰款後再重新掃描充電。',
+                                [
+                                    {
+                                        text: '查看詳情',
+                                        onPress: () => {
+                                            // Navigate to a page showing penalty details
+                                            cleanupData();
+                                            router.push({
+                                                pathname: '(auth)/(tabs)/(home)/penaltyPaymentPage',
+                                                params: {
+                                                    book_time: mostRecentUnpaidReservation.book_time,
+                                                    end_time: mostRecentUnpaidReservation.end_time,
+                                                    actual_end_time: mostRecentUnpaidReservation.actual_end_time,
+                                                    penalty_fee: mostRecentUnpaidReservation.penalty_fee,
+                                                    format_order_id: mostRecentUnpaidReservation.format_order_id,
+                                                    id: mostRecentUnpaidReservation.id
+                                                }
+                                            });
+                                        }
+                                    },
+                                    {
+                                        text: '關閉',
+                                        onPress: () => {
+                                            cleanupData();
+                                        }
+                                    }
+                                ],
+                                { cancelable: false }
+                            );
+                            return;
+                        }
+                    }
+                }
                 } catch (error) {
                     if (!isActive) return;
                     console.log('Error fetching data');

service/chargeStationService.tsx

@@ -478,7 +478,6 @@ class ChargeStationService {
     }
 
     async fetchReservationHistories() {
-        const aa = await SecureStore.getItemAsync('accessToken')
         try {
             const response = await axios.get(`${this.apiUrl}/clients/reservation/all`, {
                 headers: {