crazycharge-app/component/chargingPage/penaltyPaymentPageComponent.tsx

import { View, Text, ScrollView, Pressable, StyleSheet, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useLocalSearchParams, useNavigation } from 'expo-router';
import NormalButton from '../global/normal_button';
import { PreviousPageBlackSvg, PreviousPageSvg } from '../global/SVG';
import useCouponStore from '../../providers/coupon_store';
import { useEffect } from 'react';
import useBookingStore from '../../providers/booking_store';
import { chargeStationService } from '../../service/chargeStationService';
import useUserInfoStore from '../../providers/userinfo_store';

const PenaltyPaymentPageComponent = () => {
    const params = useLocalSearchParams();
    const { userID } = useUserInfoStore();
    console.log('params in penaltyPaymentPageComponent', params);
    const navigation = useNavigation();

    useEffect(() => {
        navigation.setOptions({
            gestureEnabled: false
        });
    }, [navigation]);
    const convertBookingDateTime = (isoDateString: string): { date: string; time: string } => {
        const bookingDate = new Date(isoDateString);

        // Adjust to local time (+8 hours)
        bookingDate.setHours(bookingDate.getHours() + 8);

        // Format date as "MM-DD"
        const date = `${(bookingDate.getMonth() + 1).toString().padStart(2, '0')}-${bookingDate
            .getDate()
            .toString()
            .padStart(2, '0')}`;

        // Format time as "HH:mm"
        const time = `${bookingDate.getHours().toString().padStart(2, '0')}:${bookingDate
            .getMinutes()
            .toString()
            .padStart(2, '0')}`;

        return { date, time };
    };

    const { date, time } = convertBookingDateTime(params.book_time);
    const { date: end_date, time: end_time } = convertBookingDateTime(params.end_time as string);
    const { date: actual_end_date, time: actual_end_time } = convertBookingDateTime(params.actual_end_time as string);

    const payload = {
        userId: userID,
        amount: parseFloat(params.penalty_fee as string),
        reservationId: params.id
    };

    const handlePayment = async () => {
        try {
            const result = await chargeStationService.payPenalty(payload);
            if (result) {
                Alert.alert('支付成功', '罰款已成功支付', [{ text: '確認', onPress: () => router.replace('/') }]);
            } else {
                Alert.alert('支付失敗', '請稍後再試');
            }
        } catch (error) {
            console.error('Payment error:', error);
            Alert.alert('支付錯誤', '發生錯誤，請稍後再試');
        }
    };

    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 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">
                                    {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">
                                    {actual_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>

                <View className="border-t mx-4 border-[#CCCCCC]"></View>
                <View className="flex-1 mx-[5%] mt-4 space-y-1">
                    <View className="mt-4">
                        <NormalButton
                            title={
                                <Text
                                    style={{
                                        color: 'white',
                                        fontSize: 16,
                                        fontWeight: '800'
                                    }}
                                >
                                    支付罰款
                                </Text>
                            }
                            onPress={handlePayment}
                            extendedStyle={{ padding: 24, marginTop: 24 }}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default PenaltyPaymentPageComponent;

const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    }
});