created bookingConfirmed & bookingSuccessful page components

component/bookingMenuPage/bookingConfirmationPage.tsx

@@ -0,0 +1,182 @@
+import { View, Text, ScrollView, Pressable, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { router } from 'expo-router';
+import Svg, { Path } from 'react-native-svg';
+import NormalButton from '../global/normal_button';
+
+const PreviousPageSvg = () => (
+    <Svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+        <Path
+            d="M7.04167 15.6667L16.375 25L14 27.3334L0.666672 14L14 0.666687L16.375 3.00002L7.04167 12.3334H27.3333V15.6667H7.04167Z"
+            fill="black"
+        />
+    </Svg>
+);
+
+const BookingConfirmationPage = () => {
+    return (
+        <SafeAreaView
+            style={{ flex: 1, backgroundColor: 'white' }}
+            edges={['top', 'left', 'right']}
+        >
+            <ScrollView className="flex-1">
+                <View className="h-[50vh]">
+                    <View className="pl-8 pt-8">
+                        <Pressable
+                            style={{ alignSelf: 'flex-start' }}
+                            onPress={() => {
+                                if (router.canGoBack()) {
+                                    router.back();
+                                } else {
+                                    router.replace('./');
+                                }
+                            }}
+                        >
+                            <PreviousPageSvg />
+                        </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 ">
+                            <View className="flex-1 flex-column">
+                                <Text
+                                    style={styles.grayColor}
+                                    className="text-xs "
+                                >
+                                    日期
+                                </Text>
+                                <Text
+                                    style={styles.greenColor}
+                                    className="text-5xl text-center pt-2"
+                                >
+                                    3月14
+                                </Text>
+                            </View>
+                            <View className="flex-1 flex-column">
+                                <Text
+                                    style={styles.grayColor}
+                                    className="text-xs pl-7"
+                                >
+                                    時間
+                                </Text>
+                                <Text
+                                    style={styles.greenColor}
+                                    className="text-5xl text-center pt-2"
+                                >
+                                    15:15
+                                </Text>
+                            </View>
+                        </View>
+                        <View className="flex-1 flex-column justify-center space-y-1">
+                            <Text style={styles.grayColor} className="text-xs">
+                                充電地點
+                            </Text>
+                            <Text
+                                style={styles.greenColor}
+                                className="text-2xl"
+                            >
+                                上環街市充電站
+                            </Text>
+                            <Text style={styles.grayColor} className="text-lg">
+                                香港上環皇后大道中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 className="w-full h-1 bg-[#DBE4E8]" />
+                <View className="h-[50vh] 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="mt-4">
+                        <NormalButton
+                            title={
+                                <Text
+                                    style={{
+                                        color: 'white',
+                                        fontSize: 16,
+                                        fontWeight: '800'
+                                    }}
+                                >
+                                    下一步
+                                </Text>
+                            }
+                            onPress={() => console.log('abc')}
+                            extendedStyle={{ padding: 24 }}
+                        />
+                    </View>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default BookingConfirmationPage;
+
+const styles = StyleSheet.create({
+    grayColor: {
+        color: '#888888'
+    },
+    greenColor: {
+        color: '#02677D'
+    }
+});

component/bookingMenuPage/bookingSuccessPage.tsx

@@ -0,0 +1,204 @@
+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 className="h-[42vh] ">
+                    <View className="flex-row pl-8 pt-8 space-x-4 items-center">
+                        <TickLogoSvg />
+                        <Text className="text-3xl">成功預約</Text>
+                    </View>
+                    <View
+                        className="flex-1 m-4"
+                        style={{
+                            borderWidth: 1,
+                            borderColor: '#EEEEEE',
+                            borderRadius: 12
+                        }}
+                    >
+                        <View className="flex-1 mt-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-3xl  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="min-h-[50vh] h-[70vh] 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="mt-4">
+                        <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'
+    }
+});