crazycharge-app/component/bookingMenuPage/bookingConfirmationPage.tsx

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

const BookingConfirmationPageComponent = () => {
    const params = useLocalSearchParams();

    const { setSelectedCouponName, setSelectedCouponRedeemCode } = useCouponStore();

    useEffect(() => {
        setSelectedCouponName('');
        setSelectedCouponRedeemCode('');
    }, []);

    const convertDate = (dateString: string) => {
        const [year, month, day] = dateString.split('-');
        const monthNumber = parseInt(month, 10);
        return `${monthNumber}月${parseInt(day, 10)}日`;
    };
    const price = params.price;

    const calculatePaymentFee = () => {
        const chargingMethod = params.chargingMethod;
        const price = parseFloat(params.price);

        if (chargingMethod === 'stopChargingUponBatteryFull') {
            const carCapacitance = parseFloat(params.carCapacitance);
            return (carCapacitance * price).toFixed(2);
        } else {
            const chargingWatt = parseFloat(params.chargingWatt);
            return (price * chargingWatt).toFixed(2);
        }
    };

    const paymentFee = calculatePaymentFee();

    const setBookingInfo = useBookingStore((state) => state.setBookingInfo);

    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">
                        <Pressable
                            style={{ alignSelf: 'flex-start' }}
                            onPress={() => {
                                if (router.canGoBack()) {
                                    router.back();
                                } else {
                                    router.replace('./');
                                }
                            }}
                        >
                            <PreviousPageBlackSvg />
                        </Pressable>
                        <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">
                                    {convertDate(params.date)}
                                </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">
                                    {params.bookTime}
                                </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-3xl ">
                                {params.chargeStationName}
                            </Text>
                            <Text style={styles.grayColor} className="text-sm">
                                {params.chargeStationAddress}
                            </Text>
                        </View>
                        <View className="flex-1 flex-row  pb-3  ">
                            <View className="flex-column flex-1">
                                <Text style={styles.grayColor} className="text-base">
                                    方案
                                </Text>
                                {params.chargingMethod === 'chargingBasedOnWatt' ? (
                                    <>
                                        <Text style={styles.greenColor} className="text-lg">
                                            按每度電結算
                                        </Text>
                                        <Text style={styles.grayColor} className="text-sm">
                                            {params.chargingWatt?.split('~')[0]}
                                        </Text>
                                    </>
                                ) : (
                                    <Text style={styles.greenColor} className="text-lg">
                                        充滿停機
                                    </Text>
                                )}
                            </View>
                            <View className="flex-column flex-1">
                                <Text style={styles.grayColor} className="text-base">
                                    預約充電座號碼
                                </Text>
                                <Text style={styles.greenColor} className="text-lg">
                                    {params.connectorLabel}號充電座
                                </Text>
                            </View>
                        </View>
                        {/* <View className="flex-1 flex-row  pb-3  ">
                            <View className="flex-column flex-1">
                                <Text style={styles.grayColor} className="text-base">
                                    預約充電座號碼
                                </Text>

                                <Text style={styles.greenColor} className="text-lg">
                                    {params.connectorLabel}號充電座
                                </Text>
                            </View>
                        </View> */}
                    </View>
                </View>

                <View className="border-t mx-4 border-[#CCCCCC]"></View>
                <View className="flex-1 mx-[5%] mt-4 space-y-1">
                    <Text className="text-xs text-[#888888]">
                        **由於充電站車流眾多，敬請客戶務必於預約時間的十五分鐘內到達充電站。
                    </Text>
                    <Text className="text-xs text-[#888888]">
                        **若客戶逾時超過15分鐘，系統將視作自動放棄預約，客戶需要重新預約一次。
                    </Text>
                    <Text className="text-xs text-[#888888]">**本公司有權保留全數費用，恕不退還。</Text>
                    <View className="mt-4">
                        <NormalButton
                            title={
                                <Text
                                    style={{
                                        color: 'white',
                                        fontSize: 16,
                                        fontWeight: '800'
                                    }}
                                >
                                    下一步
                                </Text>
                            }
                            // onPress={() => router.push('bookingSuccessPage')}
                            onPress={() => {
                                setBookingInfo({
                                    bookDateForDisplay: convertDate(params.date),
                                    bookTimeForDisplay: params.bookTime,
                                    chargeStationAddressForDisplay: params.chargeStationAddress,
                                    chargeStationNameForDisplay: params.chargeStationName,
                                    carNameForDisplay: params.carName
                                });
                                router.push({
                                    pathname: 'paymentSummaryPage',
                                    params: {
                                        stationID: params.chargeStationID,
                                        connectorID: params.connectorID,
                                        userID: params.userID,
                                        date: params.date,
                                        bookTime: params.bookTime,
                                        endTime: params.endTime,
                                        price: params.price,
                                        chargingWatt: params.chargingWatt,
                                        carID: params.carID,
                                        paymentFee: paymentFee,
                                        car_Capacity: params.carCapacitance
                                    }
                                });
                            }}
                            extendedStyle={{ padding: 24, marginTop: 24 }}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default BookingConfirmationPageComponent;

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