crazycharge-app/component/bookingMenuPage/bookingSuccessPageComponent.tsx

import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import NormalButton from '../global/normal_button';
import { TickLogoSvg } from '../global/SVG';
import { router } from 'expo-router';
import useBookingStore from '../../providers/booking_store';

const BookingSuccessPageComponent = () => {
    const {
        bookTime,
        carID,
        date,
        chargingWatt,
        connectorID,
        price,
        stationID,
        user,
        paymentFee,
        carCapacitance,
        bookDateForDisplay,
        bookTimeForDisplay,
        chargeStationAddressForDisplay,
        chargeStationNameForDisplay,
        carNameForDisplay
    } = useBookingStore();

    return (
        <SafeAreaView
            style={{ flex: 1, backgroundColor: 'white' }}
            edges={['top', 'left', 'right']}
        >
            <ScrollView className="flex-1">
                <View>
                    <View className="flex-row pl-8 pt-8 space-x-4 items-center">
                        <TickLogoSvg />
                        <Text className="text-3xl">成功預約</Text>
                    </View>

                    <View
                        className="m-4"
                        style={{
                            borderWidth: 1,
                            borderColor: '#EEEEEE',
                            borderRadius: 12
                        }}
                    >
                        <View className="space-y-3  py-4 mx-[5%]">
                            <View className="flex-1 flex-row items-center ">
                                <View className="flex-1 flex-column">
                                    <Text
                                        style={styles.grayColor}
                                        className="text-xs "
                                    >
                                        時間日期
                                    </Text>
                                    <Text
                                        style={styles.greenColor}
                                        className="text-4xl  pt-2 "
                                    >
                                        {bookDateForDisplay} ·{' '}
                                        {bookTimeForDisplay}
                                    </Text>
                                </View>
                            </View>
                            <View className="flex-1 flex-column justify-center">
                                <Text
                                    style={styles.grayColor}
                                    className="text-xs"
                                >
                                    充電地點
                                </Text>
                                <Text
                                    style={styles.greenColor}
                                    className="text-xl"
                                >
                                    {chargeStationNameForDisplay}
                                </Text>
                                <Text
                                    style={styles.grayColor}
                                    className="text-base"
                                >
                                    {chargeStationAddressForDisplay}
                                </Text>
                            </View>
                            <View className="flex-1 flex-row items-center ">
                                <View className="flex-column flex-1">
                                    <Text
                                        style={styles.grayColor}
                                        className="text-xs"
                                    >
                                        方案
                                    </Text>
                                    {chargingWatt === '' ? (
                                        <>
                                            <Text
                                                style={styles.greenColor}
                                                className="text-lg"
                                            >
                                                按每度電結算
                                            </Text>
                                            <Text
                                                style={styles.grayColor}
                                                className="text-sm"
                                            >
                                                充滿停機預估費用
                                            </Text>
                                        </>
                                    ) : (
                                        <>
                                            <Text
                                                style={styles.greenColor}
                                                className="text-lg"
                                            >
                                                按每度電結算
                                            </Text>
                                            <Text
                                                style={styles.grayColor}
                                                className="text-sm"
                                            >
                                                度數:{' '}
                                                {chargingWatt.split('~')[0]}
                                            </Text>
                                        </>
                                    )}
                                </View>
                                <View className="flex-column flex-1">
                                    <Text
                                        style={styles.grayColor}
                                        className="text-xs"
                                    >
                                        車輛
                                    </Text>
                                    <Text
                                        style={styles.greenColor}
                                        className="text-lg"
                                    >
                                        {carNameForDisplay}
                                    </Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>

                <View className="mx-[5%]">
                    <Text className="text-xl py-4">收費概要</Text>
                    <View className="flex-row justify-between">
                        <Text className="text-base">充電費用</Text>
                        <Text className="text-base">HK$ {paymentFee}</Text>
                    </View>
                    <Text style={styles.grayColor} className="text-base">
                        按每度電結算: {chargingWatt.split('~')[0]}
                    </Text>

                    <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                    <View className="flex-row justify-between ">
                        <Text className="text-xl">總計</Text>
                        <Text className="text-xl">HK$ {paymentFee}</Text>
                    </View>
                    <View className="w-full h-1 my-4 bg-[#DBE4E8]" />
                    <View className="space-y-4">
                        <Text className="text-xl ">付款資訊</Text>
                        <View>
                            <Text
                                className="text-base"
                                style={styles.grayColor}
                            >
                                訂單編號
                            </Text>
                            <Text className="text-base">CXZ-16336958</Text>
                        </View>
                        <View>
                            <Text
                                className="text-base"
                                style={styles.grayColor}
                            >
                                付款方式
                            </Text>
                            <Text className="text-base">預付銀包</Text>
                        </View>
                        {/* <View>
                            <Text
                                className="text-base"
                                style={styles.grayColor}
                            >
                                電郵地址
                            </Text>
                            <Text className="text-base">
                                mikechan123@gmail.com
                            </Text>
                        </View> */}
                    </View>
                    <View className="my-4 pb-8">
                        <NormalButton
                            title={
                                <Text
                                    style={{
                                        color: 'white',
                                        fontSize: 16,
                                        fontWeight: '800'
                                    }}
                                >
                                    返回主頁
                                </Text>
                            }
                            onPress={() => router.replace('bookingMenuPage')}
                            extendedStyle={{ padding: 24 }}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

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