crazycharge-app/component/bookingMenuPage/bookingSuccessPage.tsx

import { View, Text, ScrollView, Pressable, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import React from 'react';
import Svg, { Path, Rect } from 'react-native-svg';
import NormalButton from '../global/normal_button';

const TickLogoSvg = () => (
    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <Rect width="40" height="40" rx="20" fill="#02677D" />
        <Path
            d="M15.9169 30L6.41687 20.5L8.79187 18.125L15.9169 25.25L31.2085 9.95837L33.5835 12.3334L15.9169 30Z"
            fill="#FAFAFA"
        />
    </Svg>
);
const BookingSuccessPage = () => {
    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 "
                                    >
                                        3月14 · 16:15
                                    </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"
                                >
                                    上環街市充電站
                                </Text>
                                <Text
                                    style={styles.grayColor}
                                    className="text-base"
                                >
                                    香港上環皇后大道中345號
                                </Text>
                            </View>
                            <View className="flex-1 flex-row items-center ">
                                <View className="flex-column flex-1">
                                    <Text
                                        style={styles.grayColor}
                                        className="text-xs"
                                    >
                                        方案
                                    </Text>
                                    <Text
                                        style={styles.greenColor}
                                        className="text-lg"
                                    >
                                        按每度電結算
                                    </Text>
                                    <Text
                                        style={styles.grayColor}
                                        className="text-sm"
                                    >
                                        度數: 50kWh
                                    </Text>
                                </View>
                                <View className="flex-column flex-1">
                                    <Text
                                        style={styles.grayColor}
                                        className="text-xs"
                                    >
                                        車輛
                                    </Text>
                                    <Text
                                        style={styles.greenColor}
                                        className="text-lg"
                                    >
                                        TESLA Model 3
                                    </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$ 175</Text>
                    </View>
                    <Text style={styles.grayColor} className="text-base">
                        按每度電結算: 50 kWh
                    </Text>
                    <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                    <View className="flex-row justify-between">
                        <Text className="text-base" style={styles.grayColor}>
                            小計
                        </Text>
                        <Text className="text-base">HK$ 175</Text>
                    </View>
                    <View className="flex-row justify-between">
                        <Text className="text-base" style={styles.grayColor}>
                            其他費用
                        </Text>
                        <Text className="text-base">HK$ 11</Text>
                    </View>
                    <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$ 186</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={() => console.log('abc')}
                            extendedStyle={{ padding: 24 }}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

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