created wallet page and uber sign up page UI

app/(auth)/(tabs)/(account)/(wallet)/couponPage.tsx

@@ -0,0 +1,13 @@
+import { View, Text } from 'react-native';
+import React from 'react';
+import CouponPageComponent from '../../../../../component/accountPages/couponPageComponent';
+
+const CouponPage = () => {
+    return (
+        <View className="flex-1">
+            <CouponPageComponent />
+        </View>
+    );
+};
+
+export default CouponPage;

app/(auth)/(tabs)/(account)/uberUploadCompletePage.tsx

@@ -0,0 +1,13 @@
+import { View, Text } from 'react-native';
+import React from 'react';
+import UberUploadCompletePageComponent from '../../../../component/accountPages/uberUploadCompletePageComponent';
+
+const UberUploadCompletePage = () => {
+    return (
+        <View className="flex-1">
+            <UberUploadCompletePageComponent />
+        </View>
+    );
+};
+
+export default UberUploadCompletePage;

app/(auth)/(tabs)/(account)/uberUploadPage.tsx

@@ -0,0 +1,13 @@
+import { View, Text } from 'react-native';
+import React from 'react';
+import UberUploadPageComponent from '../../../../component/accountPages/uberUploadPageComponent';
+
+const UberUploadPage = () => {
+    return (
+        <View className="flex-1">
+            <UberUploadPageComponent />
+        </View>
+    );
+};
+
+export default UberUploadPage;

app/(auth)/(tabs)/(account)/uberVerificationPage.tsx

@@ -0,0 +1,13 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import UberVerificationPageComponent from '../../../../component/accountPages/uberVerificationPageComponent'
+
+const UberVerificationPage = () => {
+  return (
+    <View className='flex-1'>
+      <UberVerificationPageComponent />
+    </View>
+  )
+}
+
+export default UberVerificationPage

component/accountPages/accountMainPageComponent.tsx

@@ -1,64 +1,15 @@
 import { View, Text, ScrollView, Image, Pressable } from 'react-native';
-import React from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
-
-import Svg, { Path, Rect } from 'react-native-svg';
 import { router } from 'expo-router';
 import { useAuth } from '../../context/AuthProvider';
-// SVG
-const WalletSvg = () => (
-    <Svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-        <Path
-            d="M12 38.9999C10.0692 38.9999 8.41987 38.3159 7.0519 36.948C5.68397 35.58 5 33.9307 5 32V16C5 14.0692 5.68397 12.4199 7.0519 11.0519C8.41987 9.68397 10.0692 9 12 9H36C37.9307 9 39.58 9.68397 40.948 11.0519C42.3159 12.4199 42.9999 14.0692 42.9999 16V32C42.9999 33.9307 42.3159 35.58 40.948 36.948C39.58 38.3159 37.9307 38.9999 36 38.9999H12ZM12 16.5H36C36.7589 16.5 37.475 16.609 38.1481 16.8269C38.8211 17.0449 39.4384 17.3757 40 17.8193V16C40 14.9 39.6083 13.9583 38.825 13.175C38.0416 12.3916 37.1 12 36 12H12C10.9 12 9.95828 12.3916 9.17495 13.175C8.39162 13.9583 7.99995 14.9 7.99995 16V17.8193C8.56148 17.3757 9.17878 17.0449 9.85185 16.8269C10.525 16.609 11.241 16.5 12 16.5ZM8.18455 22.4807L30.6461 27.9384C30.9205 28.0051 31.198 28.0083 31.4788 27.9481C31.7596 27.8878 32.0141 27.7641 32.2423 27.5769L39.4423 21.5269C39.1141 20.9243 38.6442 20.4358 38.0327 20.0615C37.4211 19.6871 36.7436 19.4999 36 19.4999H12C11.0564 19.4999 10.2371 19.7762 9.54225 20.3288C8.84738 20.8814 8.39482 21.5987 8.18455 22.4807Z"
-            fill="#004E5F"
-        />
-    </Svg>
-);
-
-const MyCarSvg = () => (
-    <Svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-        <Path
-            d="M11.2306 36.9999V39.4999C11.2306 39.9249 11.0869 40.2812 10.7994 40.5687C10.5119 40.8562 10.1557 40.9999 9.7307 40.9999H8.5C8.075 40.9999 7.71875 40.8562 7.43125 40.5687C7.14375 40.2812 7 39.9249 7 39.4999V24.1538L11.0847 12.5C11.2333 12.041 11.5064 11.6763 11.9039 11.4058C12.3013 11.1353 12.7436 11 13.2308 11H34.8461C35.3141 11 35.7391 11.1375 36.1209 11.4125C36.5027 11.6875 36.7675 12.05 36.9153 12.5L40.9999 24.1538V39.4999C40.9999 39.9249 40.8562 40.2812 40.5687 40.5687C40.2812 40.8562 39.9249 40.9999 39.4999 40.9999H38.2692C37.8442 40.9999 37.488 40.8562 37.2005 40.5687C36.913 40.2812 36.7693 39.9249 36.7693 39.4999V36.9999H11.2306ZM11.2153 21.1539H36.7846L34.2615 14H13.7384L11.2153 21.1539ZM14.9276 31.6923C15.6553 31.6923 16.2724 31.4375 16.7788 30.9281C17.2852 30.4187 17.5384 29.8001 17.5384 29.0724C17.5384 28.3446 17.2837 27.7276 16.7743 27.2212C16.2648 26.7147 15.6462 26.4615 14.9185 26.4615C14.1908 26.4615 13.5737 26.7162 13.0673 27.2257C12.5609 27.7351 12.3077 28.3537 12.3077 29.0814C12.3077 29.8091 12.5624 30.4262 13.0718 30.9327C13.5812 31.4391 14.1998 31.6923 14.9276 31.6923ZM33.0814 31.6923C33.8091 31.6923 34.4262 31.4375 34.9326 30.9281C35.4391 30.4187 35.6923 29.8001 35.6923 29.0724C35.6923 28.3446 35.4375 27.7276 34.9281 27.2212C34.4187 26.7147 33.8001 26.4615 33.0724 26.4615C32.3446 26.4615 31.7276 26.7162 31.2212 27.2257C30.7147 27.7351 30.4615 28.3537 30.4615 29.0814C30.4615 29.8091 30.7162 30.4262 31.2257 30.9327C31.7351 31.4391 32.3537 31.6923 33.0814 31.6923ZM9.99995 34H38V24.1538H9.99995V34Z"
-            fill="#004E5F"
-        />
-    </Svg>
-);
-
-const ActivitySvg = () => (
-    <Svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-        <Path
-            d="M24 42C19.4 42 15.3917 40.475 11.975 37.425C8.55833 34.375 6.6 30.5667 6.1 26H10.2C10.6667 29.4667 12.2083 32.3333 14.825 34.6C17.4417 36.8667 20.5 38 24 38C27.9 38 31.2083 36.6417 33.925 33.925C36.6417 31.2083 38 27.9 38 24C38 20.1 36.6417 16.7917 33.925 14.075C31.2083 11.3583 27.9 10 24 10C21.7 10 19.55 10.5333 17.55 11.6C15.55 12.6667 13.8667 14.1333 12.5 16H18V20H6V8H10V12.7C11.7 10.5667 13.775 8.91667 16.225 7.75C18.675 6.58333 21.2667 6 24 6C26.5 6 28.8417 6.475 31.025 7.425C33.2083 8.375 35.1083 9.65833 36.725 11.275C38.3417 12.8917 39.625 14.7917 40.575 16.975C41.525 19.1583 42 21.5 42 24C42 26.5 41.525 28.8417 40.575 31.025C39.625 33.2083 38.3417 35.1083 36.725 36.725C35.1083 38.3417 33.2083 39.625 31.025 40.575C28.8417 41.525 26.5 42 24 42ZM29.6 32.4L22 24.8V14H26V23.2L32.4 29.6L29.6 32.4Z"
-            fill="#004E5F"
-        />
-    </Svg>
-);
-
-const SettingIconSvg = () => (
-    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-        <Path
-            d="M9.69245 21.5L9.31168 18.4538C9.04373 18.3641 8.76905 18.2384 8.48763 18.0769C8.20621 17.9153 7.9546 17.7422 7.7328 17.5576L4.91165 18.7499L2.604 14.75L5.04438 12.9058C5.0213 12.757 5.00495 12.6077 4.99533 12.4577C4.98571 12.3077 4.9809 12.1583 4.9809 12.0096C4.9809 11.8673 4.98571 11.7227 4.99533 11.5759C5.00495 11.4291 5.0213 11.2686 5.04438 11.0942L2.604 9.24998L4.91165 5.26925L7.72318 6.45195C7.96421 6.26092 8.22159 6.08623 8.4953 5.9279C8.76904 5.76955 9.03795 5.6423 9.30205 5.54615L9.69245 2.5H14.3078L14.6885 5.55578C14.9885 5.66474 15.26 5.79198 15.503 5.9375C15.7459 6.08302 15.9911 6.2545 16.2386 6.45195L19.0886 5.26925L21.3962 9.24998L18.9174 11.123C18.9533 11.2846 18.9728 11.4355 18.976 11.5759C18.9792 11.7163 18.9808 11.8577 18.9808 12C18.9808 12.1359 18.9776 12.274 18.9712 12.4144C18.9648 12.5548 18.9417 12.7154 18.902 12.8962L21.3616 14.75L19.0539 18.7499L16.2386 17.548C15.9911 17.7455 15.7386 17.9201 15.4809 18.0721C15.2232 18.224 14.959 18.348 14.6885 18.4442L14.3078 21.5H9.69245ZM12.0116 15C12.8437 15 13.5517 14.708 14.1357 14.124C14.7196 13.54 15.0116 12.832 15.0116 12C15.0116 11.1679 14.7196 10.4599 14.1357 9.87595C13.5517 9.29198 12.8437 9 12.0116 9C11.1693 9 10.4588 9.29198 9.87993 9.87595C9.3011 10.4599 9.01168 11.1679 9.01168 12C9.01168 12.832 9.3011 13.54 9.87993 14.124C10.4588 14.708 11.1693 15 12.0116 15Z"
-            fill="#02677D"
-        />
-    </Svg>
-);
-
-const QuestionMarkIconSvg = () => (
-    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-        <Path
-            d="M11.989 17.6153C12.2745 17.6153 12.5157 17.5168 12.7125 17.3196C12.9093 17.1225 13.0077 16.8811 13.0077 16.5956C13.0077 16.31 12.9091 16.0689 12.7119 15.8721C12.5148 15.6753 12.2734 15.5769 11.9879 15.5769C11.7024 15.5769 11.4612 15.6755 11.2644 15.8726C11.0676 16.0698 10.9692 16.3111 10.9692 16.5967C10.9692 16.8822 11.0678 17.1234 11.265 17.3202C11.4621 17.5169 11.7034 17.6153 11.989 17.6153ZM11.2808 14.0346H12.6884C12.7012 13.5423 12.7734 13.149 12.9048 12.8548C13.0362 12.5606 13.3551 12.1705 13.8615 11.6846C14.3012 11.2449 14.6381 10.8388 14.8721 10.4663C15.106 10.0939 15.223 9.65407 15.223 9.14685C15.223 8.28613 14.9137 7.61378 14.2952 7.1298C13.6766 6.64583 12.9449 6.40385 12.1 6.40385C11.2654 6.40385 10.5747 6.62661 10.0279 7.07213C9.48109 7.51763 9.09103 8.04229 8.8577 8.64613L10.1423 9.1615C10.2641 8.82945 10.4724 8.50606 10.7673 8.19133C11.0622 7.87658 11.5 7.7192 12.0808 7.7192C12.6718 7.7192 13.1086 7.88107 13.3913 8.2048C13.674 8.52852 13.8154 8.88461 13.8154 9.27308C13.8154 9.61281 13.7186 9.9237 13.525 10.2058C13.3314 10.4878 13.0846 10.7602 12.7846 11.0231C12.1282 11.6154 11.7135 12.0878 11.5404 12.4404C11.3673 12.7929 11.2808 13.3243 11.2808 14.0346ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5765 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45268 3.248 8.29655C3.74667 7.1404 4.42342 6.13472 5.27825 5.2795C6.1331 4.42427 7.13834 3.74721 8.29398 3.24833C9.44959 2.74944 10.6844 2.5 11.9983 2.5C13.3122 2.5 14.5473 2.74933 15.7034 3.248C16.8596 3.74667 17.8652 4.42342 18.7205 5.27825C19.5757 6.1331 20.2527 7.13834 20.7516 8.29398C21.2505 9.44959 21.5 10.6844 21.5 11.9983C21.5 13.3122 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8652 18.7217 18.7205C17.8669 19.5757 16.8616 20.2527 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5Z"
-            fill="#02677D"
-        />
-    </Svg>
-);
-
-const AccountSettingIconSvg = () => (
-    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-        <Path
-            d="M16.1058 20.048L15.8827 18.7211C15.6442 18.6506 15.4199 18.5583 15.2096 18.4442C14.9993 18.3301 14.7993 18.1872 14.6096 18.0154L13.3423 18.4557L12.6308 17.2462L13.6654 16.4C13.5936 16.141 13.5577 15.8859 13.5577 15.6346C13.5577 15.3833 13.5936 15.1282 13.6654 14.8692L12.6404 14.0039L13.3519 12.7943L14.6096 13.2443C14.7929 13.0725 14.9913 12.9311 15.2048 12.8202C15.4183 12.7093 15.6442 12.6186 15.8827 12.5481L16.1058 11.2212H17.5288L17.7423 12.5481C17.9807 12.6186 18.2067 12.7119 18.4201 12.8279C18.6336 12.944 18.832 13.093 19.0153 13.275L20.273 12.7943L20.9845 14.0346L19.9595 14.9C20.0313 15.1385 20.0672 15.3885 20.0672 15.65C20.0672 15.9115 20.0313 16.1615 19.9595 16.4L20.9942 17.2462L20.2826 18.4557L19.0153 18.0154C18.8256 18.1872 18.6256 18.3301 18.4153 18.4442C18.2051 18.5583 17.9807 18.6506 17.7423 18.7211L17.5288 20.048H16.1058ZM2.5 19.3077V17.0846C2.5 16.5795 2.62885 16.1222 2.88655 15.7125C3.14423 15.3029 3.50384 14.986 3.96537 14.7616C4.79616 14.3475 5.69359 14.0017 6.65768 13.7241C7.62178 13.4465 8.73588 13.3078 9.99997 13.3078H10.2923C10.3795 13.3078 10.4666 13.318 10.5538 13.3385C10.1666 14.3077 10.0035 15.3279 10.0644 16.3991C10.1253 17.4702 10.4307 18.4398 10.9807 19.3077H2.5ZM16.8077 17.5385C17.332 17.5385 17.7804 17.3522 18.1529 16.9798C18.5253 16.6074 18.7115 16.159 18.7115 15.6346C18.7115 15.1103 18.5253 14.6619 18.1529 14.2894C17.7804 13.917 17.332 13.7308 16.8077 13.7308C16.2833 13.7308 15.8349 13.917 15.4625 14.2894C15.09 14.6619 14.9038 15.1103 14.9038 15.6346C14.9038 16.159 15.09 16.6074 15.4625 16.9798C15.8349 17.3522 16.2833 17.5385 16.8077 17.5385ZM9.99997 11.6923C9.03461 11.6923 8.20993 11.3503 7.52595 10.6664C6.84198 9.98239 6.5 9.15773 6.5 8.19236C6.5 7.22698 6.84198 6.4023 7.52595 5.71833C8.20993 5.03437 9.03461 4.69238 9.99997 4.69238C10.9653 4.69238 11.79 5.03437 12.474 5.71833C13.158 6.4023 13.5 7.22698 13.5 8.19236C13.5 9.15773 13.158 9.98239 12.474 10.6664C11.79 11.3503 10.9653 11.6923 9.99997 11.6923Z"
-            fill="#02677D"
-        />
-    </Svg>
-);
+import {
+    AccountSettingIconSvg,
+    ActivitySvg,
+    MyCarSvg,
+    QuestionMarkIconSvg,
+    SettingIconSvg,
+    WalletSvg
+} from '../global/SVG';
 
 const AccountMainPageComponent = () => {
     const { user, logout } = useAuth();
@@ -103,11 +54,15 @@ const AccountMainPageComponent = () => {
                     </Pressable>
                 </View>
                 <View className="my-4">
-                    <Image
-                        source={require('../../assets/uberDiscountCard.png')}
-                        resizeMode="contain"
-                        style={{ width: '100%' }}
-                    />
+                    <Pressable
+                        onPress={() => router.push('uberVerificationPage')}
+                    >
+                        <Image
+                            source={require('../../assets/uberDiscountCard.png')}
+                            resizeMode="contain"
+                            style={{ width: '100%' }}
+                        />
+                    </Pressable>
                 </View>
                 <View className="w-full h-1 bg-[#DBE4E8]" />
                 <View>

component/accountPages/accountSettingPageComponent.tsx

@@ -19,7 +19,10 @@ const AccountSettingPageComponent = () => {
             className="flex-1 bg-white"
             edges={['top', 'right', 'left']}
         >
-            <ScrollView className="flex-1 mx-[5%]">
+            <ScrollView
+                className="flex-1 mx-[5%]"
+                showsVerticalScrollIndicator={false}
+            >
                 <View style={{ marginTop: 25 }}>
                     <Pressable
                         onPress={() => {

component/accountPages/couponPageComponent.tsx

@@ -0,0 +1,44 @@
+import { View, Text, Pressable, Dimensions } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { router } from 'expo-router';
+import { CrossLogoSvg } from '../global/SVG';
+import CouponTabViewComponent from '../global/couponTabView';
+
+const CouponPageComponent = () => {
+    const screenHeight = Dimensions.get('window').height;
+    return (
+        <SafeAreaView
+            className="flex-1 bg-white"
+            edges={['top', 'right', 'left']}
+        >
+            <View
+                style={{ minHeight: screenHeight, flex: 1 }}
+                className="mx-[5%]"
+            >
+                <View style={{ marginTop: 25 }}>
+                    <Pressable
+                        onPress={() => {
+                            if (router.canGoBack()) {
+                                router.back();
+                            } else {
+                                router.replace('/accountMainPage');
+                            }
+                        }}
+                    >
+                        <CrossLogoSvg />
+                    </Pressable>
+                    <Text style={{ fontSize: 45, marginVertical: 25 }}>
+                        優惠券
+                    </Text>
+                </View>
+                <View className="flex-1 ">
+                    <CouponTabViewComponent
+                        titles={['可用優惠券', '已使用/失效']}
+                    />
+                </View>
+            </View>
+        </SafeAreaView>
+    );
+};
+
+export default CouponPageComponent;

component/accountPages/uberUploadCompletePageComponent.tsx

@@ -0,0 +1,62 @@
+import {
+    View,
+    Text,
+    ScrollView,
+    Pressable,
+    Image,
+    ImageBackground
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { router } from 'expo-router';
+import { PreviousPageBlackSvg, TickLogoSvg } from '../global/SVG';
+import NormalButton from '../global/normal_button';
+
+const UberUploadCompletePageComponent = () => {
+    return (
+        <SafeAreaView
+            className="flex-1 bg-white"
+            edges={['top', 'right', 'left']}
+        >
+            <ScrollView className="flex-1">
+                <View style={{ marginTop: 25 }} className="mx-[5%]">
+                    <Pressable
+                        onPress={() => {
+                            if (router.canGoBack()) {
+                                router.back();
+                            } else {
+                                router.replace('/accountMainPage');
+                            }
+                        }}
+                    >
+                        <PreviousPageBlackSvg />
+                    </Pressable>
+                    <View className="flex-row items-center space-x-2">
+                        <TickLogoSvg />
+                        <Text style={{ fontSize: 38, marginVertical: 25 }}>
+                            圖片已成功上傳
+                        </Text>
+                    </View>
+                    <View>
+                        <Text className="text-xl">
+                            您的驗證將會於一個工作天內完成審批。
+                            如成功驗證，您的帳號將會自動升級，並可享有獨家優惠!
+                        </Text>
+                    </View>
+                    <ImageBackground
+                        className="justify-center items-center  my-6"
+                        source={require('../../assets/uberUploadCompleteBG.png')}
+                        resizeMode="contain"
+                    >
+                        <Image source={require('../../assets/speaker.png')} />
+                    </ImageBackground>
+                    <NormalButton
+                        title={<Text className="text-white text-xl">返回</Text>}
+                        onPress={() => router.push('/accountMainPage')}
+                    />
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default UberUploadCompletePageComponent;

component/accountPages/uberUploadPageComponent.tsx

@@ -0,0 +1,91 @@
+import { View, Text, Pressable, Image, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { router } from 'expo-router';
+import { PreviousPageBlackSvg } from '../global/SVG';
+import NormalButton from '../global/normal_button';
+
+const UberUploadPageComponent = () => {
+    return (
+        <SafeAreaView
+            className="flex-1 bg-white"
+            edges={['top', 'right', 'left']}
+        >
+            <ScrollView
+                style={{ flex: 1 }}
+                className="mx-[5%]"
+                showsVerticalScrollIndicator={false}
+            >
+                <View style={{ marginTop: 25 }}>
+                    <Pressable
+                        onPress={() => {
+                            if (router.canGoBack()) {
+                                router.back();
+                            } else {
+                                router.replace('/accountMainPage');
+                            }
+                        }}
+                    >
+                        <PreviousPageBlackSvg />
+                    </Pressable>
+                    <Text style={{ fontSize: 45, marginVertical: 25 }}>
+                        上傳證明
+                    </Text>
+
+                    <View className="space-y-2">
+                        <Text style={{ fontSize: 22 }}>
+                            請上傳Uber司機的證明圖片
+                        </Text>
+                        <Text style={{ fontSize: 18 }}>• 司機名稱</Text>
+                        <Text style={{ fontSize: 18 }}>• 車牌</Text>
+                        <Text style={{ fontSize: 18 }}>• 車輛品牌及型號</Text>
+                    </View>
+                    <View className="mt-5 ">
+                        <Text style={{ fontSize: 22, marginBottom: 9 }}>
+                            上傳範例
+                        </Text>
+                        <View className="flex-row w-full justify-between">
+                            <Image
+                                source={require('../../assets/uberUploadSample1.png')}
+                                resizeMode="contain"
+                                className="flex-1 h-auto"
+                                style={{ aspectRatio: 1 }}
+                            />
+                            <Image
+                                source={require('../../assets/uberUploadSample2.png')}
+                                resizeMode="contain"
+                                className="flex-1 h-auto"
+                                style={{ aspectRatio: 1 }}
+                            />
+                        </View>
+                        <Pressable onPress={() => console.log('a')}>
+                            <View
+                                style={{ borderWidth: 1 }}
+                                className="border-[#EEEEEE] rounded-2xl items-center justify-center  p-4 "
+                            >
+                                <Text
+                                    style={{ fontSize: 48 }}
+                                    className="text-[#02677d] text-center"
+                                >
+                                    +
+                                </Text>
+                                <Text className="text-xl text-[#02677d] mb-6 text-center ">
+                                    上傳圖片
+                                </Text>
+                            </View>
+                        </Pressable>
+                        <NormalButton
+                            title={
+                                <Text className="text-xl text-white">提交</Text>
+                            }
+                            onPress={() =>
+                                router.push('uberUploadCompletePage')
+                            }
+                        />
+                    </View>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default UberUploadPageComponent;

component/accountPages/uberVerificationPageComponent.tsx

@@ -0,0 +1,113 @@
+import {
+    View,
+    Text,
+    Image,
+    Pressable,
+    Dimensions,
+    ScrollView
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { router } from 'expo-router';
+import { CrossLogoSvg } from '../global/SVG';
+import React from 'react';
+import NormalButton from '../global/normal_button';
+
+const UberVerificationPageComponent = () => {
+    const couponData = [
+        {
+            number: '1',
+            title: 'Uber 獨家充電優惠',
+            description:
+                '我們提供Uber司機獨家充電優惠，驗證後即享折扣，讓您更省錢充電。'
+        },
+        {
+            number: '2',
+            title: '快速驗證',
+            description: '只需通過簡單步驟，輕鬆開啟專屬帳戶訪問。'
+        },
+        {
+            number: '3',
+            title: '輕鬆合作拍檔',
+            description:
+                '成為Crazy Charge合作拍檔！為Uber司機提供便利充電服務，獲得豐厚節省和獎勵。'
+        }
+    ];
+
+    const CouponComponent = () => {
+        return (
+            <View
+                style={{ borderWidth: 1 }}
+                className="border-[#EEEEEE] rounded-2xl my-[5%] mx-[5%]"
+            >
+                <View className="mx-[5%] my-[3%]">
+                    {couponData.map((item, index) => (
+                        <React.Fragment key={index}>
+                            <View className="flex-row items-center">
+                                <Text className="text-5xl text-[#02677d] text-center w-10 mr-4">
+                                    {item.number}
+                                </Text>
+                                <View className="flex-1">
+                                    <Text className="text-lg text-[#222222]">
+                                        {item.title}
+                                    </Text>
+                                    <Text className="text-base text-[#666666] mt-1">
+                                        {item.description}
+                                    </Text>
+                                </View>
+                            </View>
+                            {index < couponData.length - 1 && (
+                                <View className="h-0.5 w-full my-4 bg-[#EEEEEE]" />
+                            )}
+                        </React.Fragment>
+                    ))}
+                </View>
+            </View>
+        );
+    };
+    const screenHeight = Dimensions.get('window').height;
+    return (
+        <SafeAreaView
+            className="flex-1 bg-white"
+            edges={['top', 'right', 'left']}
+        >
+            <ScrollView className="flex-1">
+                <View
+                    style={{
+                        marginTop: 25,
+                        marginLeft: '5%',
+                        marginBottom: '5%'
+                    }}
+                >
+                    <Pressable
+                        onPress={() => {
+                            if (router.canGoBack()) {
+                                router.back();
+                            } else {
+                                router.replace('/accountMainPage');
+                            }
+                        }}
+                    >
+                        <CrossLogoSvg />
+                    </Pressable>
+                </View>
+                <View>
+                    <Image
+                        source={require('../../assets/uberVerification.png')}
+                        resizeMode="contain"
+                    />
+                </View>
+                <CouponComponent />
+                <View className="mx-[5%]">
+                    <NormalButton
+                        title={
+                            <Text className="text-white text-xl">下一步</Text>
+                        }
+                        onPress={() => router.push('uberUploadPage')}
+                    />
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default UberVerificationPageComponent;

component/accountPages/walletPageComponent.tsx

@@ -2,21 +2,90 @@ import {
     View,
     Text,
     ScrollView,
-    Image,
     Pressable,
     ImageBackground
 } from 'react-native';
-import React from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import Svg, { Path } from 'react-native-svg';
 import { router } from 'expo-router';
-const CrossLogoSvg = () => (
-    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-        <Path
-            d="M2.33333 23.3333L0 21L9.33333 11.6667L0 2.33333L2.33333 0L11.6667 9.33333L21 0L23.3333 2.33333L14 11.6667L23.3333 21L21 23.3333L11.6667 14L2.33333 23.3333Z"
-            fill="#222222"
-        />
-    </Svg>
+import { CrossLogoSvg } from '../global/SVG';
+
+const coupons = [
+    {
+        title: '迎新優惠券',
+        price: '999',
+        detail: '這是一段有關迎新優惠券的說明',
+        date: '至14/3/2025'
+    },
+    {
+        title: '折扣優惠券',
+        price: '888',
+        detail: '這是另一段有關迎新優惠券的說明',
+        date: '至15/4/2025'
+    },
+    {
+        title: '三張優惠券',
+        price: '777',
+        detail: '這是第三段有關迎新優惠券的說明',
+        date: '至16/9/2026'
+    }
+];
+
+export const IndividualCouponComponent = ({
+    title,
+    price,
+    detail,
+    date
+}: {
+    title: string;
+    price: string;
+    detail: string;
+    date: string;
+}) => (
+    <View className="bg-[#e7f2f8] h-[124px]  rounded-xl flex-row mb-3">
+        <View className="bg-white mx-3 my-3 w-[28%] rounded-xl">
+            <View className="flex-row justify-center items-center pr-4 pt-4 ">
+                <Text className="color-[#02677d] text-2xl pl-2 pr-1">$</Text>
+                <Text
+                    className="color-[#02677d] text-3xl font-bold"
+                    adjustsFontSizeToFit={true}
+                >
+                    {price}
+                </Text>
+            </View>
+            <View className="items-center justify-center">
+                <Text className="text-base mt-1">{title}</Text>
+            </View>
+        </View>
+
+        {/* //dash line */}
+        <View style={{ overflow: 'hidden' }}>
+            <View
+                style={{
+                    borderStyle: 'dashed',
+                    borderWidth: 1,
+                    borderColor: '#CCCCCC',
+                    margin: -1,
+                    width: 0,
+                    marginRight: 0,
+                    height: '100%'
+                }}
+            >
+                <View style={{ height: 60 }}></View>
+            </View>
+        </View>
+
+        <View className="flex-col flex-1  m-[5%] justify-center ">
+            <Text className="text-lg">{title}</Text>
+            <Text className="color-[#888888] text-sm">{detail}</Text>
+            <View className="flex-row items-center ">
+                <Text className="text-base">有效期 </Text>
+                <Text className="text-base font-bold text-[#02677d]">
+                    {'   '}
+                    {date}
+                </Text>
+            </View>
+        </View>
+    </View>
 );
 
 const WalletPageComponent = () => {
@@ -85,19 +154,26 @@ const WalletPageComponent = () => {
                         </Text>
                     </View>
                 </View>
+
                 <View className="w-full h-1 bg-[#DBE4E8]" />
-                <View className="flex-row justify-between mx-[5%] mt-6 mb-2">
+
+                <View className="flex-row justify-between mx-[5%] pt-6 pb-3">
                     <Text className="text-xl">優惠券</Text>
-                    <Pressable onPress={() => console.log('顯示所有')}>
+                    <Pressable onPress={() => router.push('couponPage')}>
                         <Text className="text-xl text-[#888888]">顯示所有</Text>
                     </Pressable>
                 </View>
-                <View className="bg-[#e7f2f8] h-[124px] mx-[5%] rounded-xl">
-                    <View className="h-9 w-9"></View>
 
-                    <View>
-                        <Text>to be continued after finishing API service</Text>
-                    </View>
+                <View className="flex-1 flex-col mx-[5%]">
+                    {coupons.slice(0, 2).map((coupon, index) => (
+                        <IndividualCouponComponent
+                            key={index}
+                            title={coupon.title}
+                            price={coupon.price}
+                            detail={coupon.detail}
+                            date={coupon.date}
+                        />
+                    ))}
                 </View>
             </ScrollView>
         </SafeAreaView>

component/global/SVG.tsx

@@ -131,12 +131,7 @@ export const ArrowIconSvg = () => (
 );
 
 export const RightArrowIconSvg = () => (
-    <Svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-    >
+    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
         <Path
             d="M15.7076 12L10.0538 17.6538L9 16.6L13.6 12L9 7.39998L10.0538 6.34616L15.7076 12Z"
             fill="#222222"
@@ -187,3 +182,57 @@ export const TickLogoSvg = () => (
         />
     </Svg>
 );
+
+export const WalletSvg = () => (
+    <Svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+        <Path
+            d="M12 38.9999C10.0692 38.9999 8.41987 38.3159 7.0519 36.948C5.68397 35.58 5 33.9307 5 32V16C5 14.0692 5.68397 12.4199 7.0519 11.0519C8.41987 9.68397 10.0692 9 12 9H36C37.9307 9 39.58 9.68397 40.948 11.0519C42.3159 12.4199 42.9999 14.0692 42.9999 16V32C42.9999 33.9307 42.3159 35.58 40.948 36.948C39.58 38.3159 37.9307 38.9999 36 38.9999H12ZM12 16.5H36C36.7589 16.5 37.475 16.609 38.1481 16.8269C38.8211 17.0449 39.4384 17.3757 40 17.8193V16C40 14.9 39.6083 13.9583 38.825 13.175C38.0416 12.3916 37.1 12 36 12H12C10.9 12 9.95828 12.3916 9.17495 13.175C8.39162 13.9583 7.99995 14.9 7.99995 16V17.8193C8.56148 17.3757 9.17878 17.0449 9.85185 16.8269C10.525 16.609 11.241 16.5 12 16.5ZM8.18455 22.4807L30.6461 27.9384C30.9205 28.0051 31.198 28.0083 31.4788 27.9481C31.7596 27.8878 32.0141 27.7641 32.2423 27.5769L39.4423 21.5269C39.1141 20.9243 38.6442 20.4358 38.0327 20.0615C37.4211 19.6871 36.7436 19.4999 36 19.4999H12C11.0564 19.4999 10.2371 19.7762 9.54225 20.3288C8.84738 20.8814 8.39482 21.5987 8.18455 22.4807Z"
+            fill="#004E5F"
+        />
+    </Svg>
+);
+
+export const MyCarSvg = () => (
+    <Svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+        <Path
+            d="M11.2306 36.9999V39.4999C11.2306 39.9249 11.0869 40.2812 10.7994 40.5687C10.5119 40.8562 10.1557 40.9999 9.7307 40.9999H8.5C8.075 40.9999 7.71875 40.8562 7.43125 40.5687C7.14375 40.2812 7 39.9249 7 39.4999V24.1538L11.0847 12.5C11.2333 12.041 11.5064 11.6763 11.9039 11.4058C12.3013 11.1353 12.7436 11 13.2308 11H34.8461C35.3141 11 35.7391 11.1375 36.1209 11.4125C36.5027 11.6875 36.7675 12.05 36.9153 12.5L40.9999 24.1538V39.4999C40.9999 39.9249 40.8562 40.2812 40.5687 40.5687C40.2812 40.8562 39.9249 40.9999 39.4999 40.9999H38.2692C37.8442 40.9999 37.488 40.8562 37.2005 40.5687C36.913 40.2812 36.7693 39.9249 36.7693 39.4999V36.9999H11.2306ZM11.2153 21.1539H36.7846L34.2615 14H13.7384L11.2153 21.1539ZM14.9276 31.6923C15.6553 31.6923 16.2724 31.4375 16.7788 30.9281C17.2852 30.4187 17.5384 29.8001 17.5384 29.0724C17.5384 28.3446 17.2837 27.7276 16.7743 27.2212C16.2648 26.7147 15.6462 26.4615 14.9185 26.4615C14.1908 26.4615 13.5737 26.7162 13.0673 27.2257C12.5609 27.7351 12.3077 28.3537 12.3077 29.0814C12.3077 29.8091 12.5624 30.4262 13.0718 30.9327C13.5812 31.4391 14.1998 31.6923 14.9276 31.6923ZM33.0814 31.6923C33.8091 31.6923 34.4262 31.4375 34.9326 30.9281C35.4391 30.4187 35.6923 29.8001 35.6923 29.0724C35.6923 28.3446 35.4375 27.7276 34.9281 27.2212C34.4187 26.7147 33.8001 26.4615 33.0724 26.4615C32.3446 26.4615 31.7276 26.7162 31.2212 27.2257C30.7147 27.7351 30.4615 28.3537 30.4615 29.0814C30.4615 29.8091 30.7162 30.4262 31.2257 30.9327C31.7351 31.4391 32.3537 31.6923 33.0814 31.6923ZM9.99995 34H38V24.1538H9.99995V34Z"
+            fill="#004E5F"
+        />
+    </Svg>
+);
+
+export const ActivitySvg = () => (
+    <Svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+        <Path
+            d="M24 42C19.4 42 15.3917 40.475 11.975 37.425C8.55833 34.375 6.6 30.5667 6.1 26H10.2C10.6667 29.4667 12.2083 32.3333 14.825 34.6C17.4417 36.8667 20.5 38 24 38C27.9 38 31.2083 36.6417 33.925 33.925C36.6417 31.2083 38 27.9 38 24C38 20.1 36.6417 16.7917 33.925 14.075C31.2083 11.3583 27.9 10 24 10C21.7 10 19.55 10.5333 17.55 11.6C15.55 12.6667 13.8667 14.1333 12.5 16H18V20H6V8H10V12.7C11.7 10.5667 13.775 8.91667 16.225 7.75C18.675 6.58333 21.2667 6 24 6C26.5 6 28.8417 6.475 31.025 7.425C33.2083 8.375 35.1083 9.65833 36.725 11.275C38.3417 12.8917 39.625 14.7917 40.575 16.975C41.525 19.1583 42 21.5 42 24C42 26.5 41.525 28.8417 40.575 31.025C39.625 33.2083 38.3417 35.1083 36.725 36.725C35.1083 38.3417 33.2083 39.625 31.025 40.575C28.8417 41.525 26.5 42 24 42ZM29.6 32.4L22 24.8V14H26V23.2L32.4 29.6L29.6 32.4Z"
+            fill="#004E5F"
+        />
+    </Svg>
+);
+
+export const SettingIconSvg = () => (
+    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <Path
+            d="M9.69245 21.5L9.31168 18.4538C9.04373 18.3641 8.76905 18.2384 8.48763 18.0769C8.20621 17.9153 7.9546 17.7422 7.7328 17.5576L4.91165 18.7499L2.604 14.75L5.04438 12.9058C5.0213 12.757 5.00495 12.6077 4.99533 12.4577C4.98571 12.3077 4.9809 12.1583 4.9809 12.0096C4.9809 11.8673 4.98571 11.7227 4.99533 11.5759C5.00495 11.4291 5.0213 11.2686 5.04438 11.0942L2.604 9.24998L4.91165 5.26925L7.72318 6.45195C7.96421 6.26092 8.22159 6.08623 8.4953 5.9279C8.76904 5.76955 9.03795 5.6423 9.30205 5.54615L9.69245 2.5H14.3078L14.6885 5.55578C14.9885 5.66474 15.26 5.79198 15.503 5.9375C15.7459 6.08302 15.9911 6.2545 16.2386 6.45195L19.0886 5.26925L21.3962 9.24998L18.9174 11.123C18.9533 11.2846 18.9728 11.4355 18.976 11.5759C18.9792 11.7163 18.9808 11.8577 18.9808 12C18.9808 12.1359 18.9776 12.274 18.9712 12.4144C18.9648 12.5548 18.9417 12.7154 18.902 12.8962L21.3616 14.75L19.0539 18.7499L16.2386 17.548C15.9911 17.7455 15.7386 17.9201 15.4809 18.0721C15.2232 18.224 14.959 18.348 14.6885 18.4442L14.3078 21.5H9.69245ZM12.0116 15C12.8437 15 13.5517 14.708 14.1357 14.124C14.7196 13.54 15.0116 12.832 15.0116 12C15.0116 11.1679 14.7196 10.4599 14.1357 9.87595C13.5517 9.29198 12.8437 9 12.0116 9C11.1693 9 10.4588 9.29198 9.87993 9.87595C9.3011 10.4599 9.01168 11.1679 9.01168 12C9.01168 12.832 9.3011 13.54 9.87993 14.124C10.4588 14.708 11.1693 15 12.0116 15Z"
+            fill="#02677D"
+        />
+    </Svg>
+);
+
+export const QuestionMarkIconSvg = () => (
+    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <Path
+            d="M11.989 17.6153C12.2745 17.6153 12.5157 17.5168 12.7125 17.3196C12.9093 17.1225 13.0077 16.8811 13.0077 16.5956C13.0077 16.31 12.9091 16.0689 12.7119 15.8721C12.5148 15.6753 12.2734 15.5769 11.9879 15.5769C11.7024 15.5769 11.4612 15.6755 11.2644 15.8726C11.0676 16.0698 10.9692 16.3111 10.9692 16.5967C10.9692 16.8822 11.0678 17.1234 11.265 17.3202C11.4621 17.5169 11.7034 17.6153 11.989 17.6153ZM11.2808 14.0346H12.6884C12.7012 13.5423 12.7734 13.149 12.9048 12.8548C13.0362 12.5606 13.3551 12.1705 13.8615 11.6846C14.3012 11.2449 14.6381 10.8388 14.8721 10.4663C15.106 10.0939 15.223 9.65407 15.223 9.14685C15.223 8.28613 14.9137 7.61378 14.2952 7.1298C13.6766 6.64583 12.9449 6.40385 12.1 6.40385C11.2654 6.40385 10.5747 6.62661 10.0279 7.07213C9.48109 7.51763 9.09103 8.04229 8.8577 8.64613L10.1423 9.1615C10.2641 8.82945 10.4724 8.50606 10.7673 8.19133C11.0622 7.87658 11.5 7.7192 12.0808 7.7192C12.6718 7.7192 13.1086 7.88107 13.3913 8.2048C13.674 8.52852 13.8154 8.88461 13.8154 9.27308C13.8154 9.61281 13.7186 9.9237 13.525 10.2058C13.3314 10.4878 13.0846 10.7602 12.7846 11.0231C12.1282 11.6154 11.7135 12.0878 11.5404 12.4404C11.3673 12.7929 11.2808 13.3243 11.2808 14.0346ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5765 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45268 3.248 8.29655C3.74667 7.1404 4.42342 6.13472 5.27825 5.2795C6.1331 4.42427 7.13834 3.74721 8.29398 3.24833C9.44959 2.74944 10.6844 2.5 11.9983 2.5C13.3122 2.5 14.5473 2.74933 15.7034 3.248C16.8596 3.74667 17.8652 4.42342 18.7205 5.27825C19.5757 6.1331 20.2527 7.13834 20.7516 8.29398C21.2505 9.44959 21.5 10.6844 21.5 11.9983C21.5 13.3122 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8652 18.7217 18.7205C17.8669 19.5757 16.8616 20.2527 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5Z"
+            fill="#02677D"
+        />
+    </Svg>
+);
+
+export const AccountSettingIconSvg = () => (
+    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <Path
+            d="M16.1058 20.048L15.8827 18.7211C15.6442 18.6506 15.4199 18.5583 15.2096 18.4442C14.9993 18.3301 14.7993 18.1872 14.6096 18.0154L13.3423 18.4557L12.6308 17.2462L13.6654 16.4C13.5936 16.141 13.5577 15.8859 13.5577 15.6346C13.5577 15.3833 13.5936 15.1282 13.6654 14.8692L12.6404 14.0039L13.3519 12.7943L14.6096 13.2443C14.7929 13.0725 14.9913 12.9311 15.2048 12.8202C15.4183 12.7093 15.6442 12.6186 15.8827 12.5481L16.1058 11.2212H17.5288L17.7423 12.5481C17.9807 12.6186 18.2067 12.7119 18.4201 12.8279C18.6336 12.944 18.832 13.093 19.0153 13.275L20.273 12.7943L20.9845 14.0346L19.9595 14.9C20.0313 15.1385 20.0672 15.3885 20.0672 15.65C20.0672 15.9115 20.0313 16.1615 19.9595 16.4L20.9942 17.2462L20.2826 18.4557L19.0153 18.0154C18.8256 18.1872 18.6256 18.3301 18.4153 18.4442C18.2051 18.5583 17.9807 18.6506 17.7423 18.7211L17.5288 20.048H16.1058ZM2.5 19.3077V17.0846C2.5 16.5795 2.62885 16.1222 2.88655 15.7125C3.14423 15.3029 3.50384 14.986 3.96537 14.7616C4.79616 14.3475 5.69359 14.0017 6.65768 13.7241C7.62178 13.4465 8.73588 13.3078 9.99997 13.3078H10.2923C10.3795 13.3078 10.4666 13.318 10.5538 13.3385C10.1666 14.3077 10.0035 15.3279 10.0644 16.3991C10.1253 17.4702 10.4307 18.4398 10.9807 19.3077H2.5ZM16.8077 17.5385C17.332 17.5385 17.7804 17.3522 18.1529 16.9798C18.5253 16.6074 18.7115 16.159 18.7115 15.6346C18.7115 15.1103 18.5253 14.6619 18.1529 14.2894C17.7804 13.917 17.332 13.7308 16.8077 13.7308C16.2833 13.7308 15.8349 13.917 15.4625 14.2894C15.09 14.6619 14.9038 15.1103 14.9038 15.6346C14.9038 16.159 15.09 16.6074 15.4625 16.9798C15.8349 17.3522 16.2833 17.5385 16.8077 17.5385ZM9.99997 11.6923C9.03461 11.6923 8.20993 11.3503 7.52595 10.6664C6.84198 9.98239 6.5 9.15773 6.5 8.19236C6.5 7.22698 6.84198 6.4023 7.52595 5.71833C8.20993 5.03437 9.03461 4.69238 9.99997 4.69238C10.9653 4.69238 11.79 5.03437 12.474 5.71833C13.158 6.4023 13.5 7.22698 13.5 8.19236C13.5 9.15773 13.158 9.98239 12.474 10.6664C11.79 11.3503 10.9653 11.6923 9.99997 11.6923Z"
+            fill="#02677D"
+        />
+    </Svg>
+);

component/global/couponTabView.tsx

@@ -0,0 +1,180 @@
+//the size of the TabView will follow its parent-container's size.
+
+import * as React from 'react';
+import {
+    View,
+    Text,
+    useWindowDimensions,
+    StyleSheet,
+    ImageSourcePropType,
+    ScrollView
+} from 'react-native';
+import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
+
+import { IndividualCouponComponent } from '../accountPages/walletPageComponent';
+
+export interface TabItem {
+    imgURL: ImageSourcePropType;
+    date: string;
+    time: string;
+    chargeStationName: string;
+    chargeStationAddress: string;
+    distance: string;
+}
+
+interface TabViewComponentProps {
+    titles: string[];
+}
+
+const expiredCoupons = [
+    {
+        title: 'abc優惠券',
+        price: '999',
+        detail: '這是一段有關迎新優惠券的說明',
+        date: '至14/3/2025'
+    },
+    {
+        title: 'abc優惠券',
+        price: '888',
+        detail: '這是另一段有關迎新優惠券的說明',
+        date: '至15/4/2025'
+    },
+    {
+        title: 'abc優惠券',
+        price: '777',
+        detail: '這是第三段有關迎新優惠券的說明',
+        date: '至16/9/2026'
+    },
+    {
+        title: 'abc優惠券',
+        price: '777',
+        detail: '這是第三段有關迎新優惠券的說明',
+        date: '至16/9/2026'
+    },
+    {
+        title: 'abc優惠券',
+        price: '777',
+        detail: '這是第三段有關迎新優惠券的說明',
+        date: '至16/9/2026'
+    },
+    {
+        title: 'abc優惠券',
+        price: '777',
+        detail: '這是第三段有關迎新優惠券的說明',
+        date: '至16/9/2026'
+    }
+    // Add more coupon objects as needed
+];
+
+const coupons = [
+    {
+        title: '迎新優惠券',
+        price: '111',
+        detail: 'aaaaasdasdasdasd',
+        date: '至14/3/2025'
+    },
+    {
+        title: '折扣優惠券',
+        price: '222',
+        detail: 'dfgdfgdfgdfg',
+        date: '至15/4/2025'
+    },
+    {
+        title: '三張優惠券',
+        price: '333',
+        detail: 'zxczxczxczxczxc',
+        date: '至16/9/2026'
+    }
+];
+const CouponTabViewComponent: React.FC<TabViewComponentProps> = ({
+    titles
+}) => {
+    const layout = useWindowDimensions();
+
+    //tab 1
+    const FirstRoute = () => (
+        <ScrollView style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}>
+            <View className="flex-1 flex-col">
+                {coupons.map((coupon, index) => (
+                    <IndividualCouponComponent
+                        key={index}
+                        title={coupon.title}
+                        price={coupon.price}
+                        detail={coupon.detail}
+                        date={coupon.date}
+                    />
+                ))}
+            </View>
+        </ScrollView>
+    );
+
+    //tab 2
+    const SecondRoute = () => (
+        <ScrollView style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}>
+            <View className="flex-1 flex-col">
+                {expiredCoupons.map((coupon, index) => (
+                    <IndividualCouponComponent
+                        key={index}
+                        title={coupon.title}
+                        price={coupon.price}
+                        detail={coupon.detail}
+                        date={coupon.date}
+                    />
+                ))}
+            </View>
+        </ScrollView>
+    );
+
+    const renderScene = SceneMap({
+        firstRoute: FirstRoute,
+        secondRoute: SecondRoute
+    });
+    const [routes] = React.useState([
+        { key: 'firstRoute', title: titles[0] },
+        { key: 'secondRoute', title: titles[1] }
+    ]);
+    const [index, setIndex] = React.useState(0);
+
+    const renderTabBar = (props: any) => (
+        <TabBar
+            {...props}
+            renderLabel={({ route, focused }) => (
+                <Text
+                    style={{
+                        color: focused ? '#025c72' : '#888888',
+                        fontWeight: focused ? '900' : 'thin',
+                        fontSize: 20
+                    }}
+                >
+                    {route.title}
+                </Text>
+            )}
+            indicatorStyle={{
+                backgroundColor: '#025c72'
+            }}
+            style={{
+                backgroundColor: 'white',
+                borderColor: '#DBE4E8',
+                elevation: 0,
+                marginHorizontal: 15,
+                borderBottomWidth: 0.5
+            }}
+        />
+    );
+    return (
+        <TabView
+            navigationState={{ index, routes }}
+            renderScene={renderScene}
+            onIndexChange={setIndex}
+            initialLayout={{ width: layout.width }}
+            renderTabBar={renderTabBar}
+        />
+    );
+};
+export default CouponTabViewComponent;
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row' },
+    image: { width: 100, height: 100, margin: 15, borderRadius: 10 },
+    textContainer: { flexDirection: 'column', gap: 8, marginTop: 20 }
+});

component/registrationMultiStepForm/formComponent/formPages/loginPage.tsx

@@ -63,10 +63,11 @@ const LoginPage: React.FC<LoginPageProps> = ({
                         secureTextEntry={true}
                         extendedStyle={{ borderRadius: 12, padding: 20 }}
                     />
-
-                    <Pressable onPress={() => goToForgetPassWordPage()}>
-                        <Text style={styles.text}>忘記密碼</Text>
-                    </Pressable>
+                    <View className="flex-row">
+                        <Pressable onPress={() => goToForgetPassWordPage()}>
+                            <Text style={styles.text}>忘記密碼</Text>
+                        </Pressable>
+                    </View>
                     <NormalButton
                         onPress={() => _login(loginEmail, loginPassword)}
                         title={
@@ -93,9 +94,11 @@ const LoginPage: React.FC<LoginPageProps> = ({
                             )
                         }
                     />
-                    <Pressable onPress={goToNextPage}>
-                        <Text style={styles.text}>註冊會員</Text>
-                    </Pressable>
+                    <View className="flex-row">
+                        <Pressable onPress={goToNextPage}>
+                            <Text style={styles.text}>註冊會員</Text>
+                        </Pressable>
+                    </View>
                 </View>
             </SafeAreaView>
         </ScrollView>