bug-fixes

app/(auth)/(tabs)/_layout.tsx

@@ -9,17 +9,28 @@ import {
 
 export default function TabLayout() {
     const { height } = Dimensions.get('window');
-    
+
+    // Calculate marginBottom based on screen height
+    const calculateMarginBottom = () => {
+        if (Platform.OS === 'ios') return 0;
+        if (height < 600) return 0;
+        return 15;
+    };
+
     return (
         <Tabs
             screenOptions={{
                 headerShown: false,
                 tabBarLabelStyle: {
                     fontSize: 16,
-                    marginBottom: Platform.OS === 'ios' ? 0 : 25
+                    marginBottom: calculateMarginBottom()
                 },
                 tabBarStyle: {
-                    height: height * 0.105,    
+                    height: height * 0.105
+                },
+                tabBarIconStyle: {
+                    width: 10,
+                    height: 10
                 }
             }}
         >

component/accountPages/changePasswordPageComponent.tsx

@@ -101,7 +101,10 @@ const changePasswordPageComponent = () => {
             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/bookingMenuPage/bookingMenuPage.tsx

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet, Image, ScrollView } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, Dimensions } from 'react-native';
 import TabViewComponent, { TabItem } from '../global/tabView';
 import NormalButton from '../global/normal_button';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -35,14 +35,34 @@ const dummyTabItems: TabItem[] = [
 ];
 
 const BookingMenuPageComponent: React.FC<BookingMenuPageProps> = () => {
+    const calculateResponsivePadding = () => {
+        const screenHeight = Dimensions.get('window').height;
+        return screenHeight * 0.03;
+    };
+
+    const calculateTabViewHeight = () => {
+        const screenHeight = Dimensions.get('window').height;
+        if (screenHeight > 800) {
+            return 500;
+        } else if (screenHeight > 550) {
+            return 300;
+        } else {
+            return 150;
+        }
+    };
+
     return (
         <SafeAreaView
             edges={['top', 'left', 'right']}
             className="flex-1 bg-white"
         >
-            <View className="flex-1 mt-8 ">
-                <View className="h-[55%] mx-[5%]">
-                    <View className="justify-center">
+            <ScrollView
+                className="flex-1 mt-8 "
+                nestedScrollEnabled={true}
+                showsVerticalScrollIndicator={false}
+            >
+                <View className="mx-[5%]">
+                    <View className="">
                         <Text className="text-5xl pt-1 pb-6">預約</Text>
                         <NormalButton
                             title={
@@ -59,20 +79,25 @@ const BookingMenuPageComponent: React.FC<BookingMenuPageProps> = () => {
                             onPress={() =>
                                 router.push('reservationLocationPage')
                             }
-                            extendedStyle={{ padding: 28 }}
+                            extendedStyle={{
+                                padding: calculateResponsivePadding()
+                            }}
                         />
                     </View>
-                    <View className='min-h-[200px]'>
+                    <View className="">
                         <RecentlyBookedScrollView />
                     </View>
                 </View>
-                <View className="h-[45%]">
+                <View
+                    className="flex-1"
+                    style={{ height: calculateTabViewHeight() }}
+                >
                     <TabViewComponent
                         titles={['已預約', '已完成']}
                         tabItems={dummyTabItems}
                     />
                 </View>
-            </View>
+            </ScrollView>
         </SafeAreaView>
     );
 };

component/forgetPasswordMultiStepForm/formComponent/formPages/resetSuccessful.tsx

@@ -1,60 +1,35 @@
-import { View, Text, StyleSheet, Image, SafeAreaView } from 'react-native';
-import { Link } from 'expo-router';
-import { Dimensions } from 'react-native';
+import { View, Text, StyleSheet, Image } from 'react-native';
+import { router } from 'expo-router';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import NormalButton from '../../../global/normal_button';
 
 const ResetSuccessful = ({}) => {
-    const width = Dimensions.get('window').width;
-    const height = Dimensions.get('window').height;
-    const imageSize = 300;
     return (
-        <View
-            className="flex-1 items-center justify-center"
-            style={{ width: width, height: height - height * 0.2 }}
-        >
-            <View className="items-center justify-center space-y-5">
-                <Text style={styles.titleText}>重置密碼成功</Text>
-                <Text style={styles.text}>歡迎使用 Crazy Charge</Text>
-                <Text style={styles.text}>祝你一路順“瘋“</Text>
-            </View>
-            <View className="items-center justify-center">
+        <SafeAreaView className="flex-1">
+            <View className="flex-1 justify-center">
+                <View className="items-center space-y-6">
+                    <Text style={styles.titleText}>重置密碼成功</Text>
+                    <Text style={styles.text}>歡迎使用 Crazy Charge</Text>
+                    <Text style={styles.text}>祝你一路順“瘋“</Text>
+                </View>
                 <Image
                     style={{
-                        width: imageSize,
-                        height: imageSize,
-                        alignSelf: 'center',
-                        marginVertical: 9,
-                        resizeMode: 'contain'
+                        alignSelf: 'center'
                     }}
                     source={require('../../../../assets/successLogo.png')}
                 />
+                <View className="mx-[5%]">
+                    <NormalButton
+                        onPress={() => router.replace('login')}
+                        title={<Text className="text-white">完成</Text>}
+                    />
+                </View>
             </View>
-            <View
-                style={{
-                    maxWidth: '100%',
-                    backgroundColor: '#025c72',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    borderRadius: 12,
-                    padding: 20
-                }}
-            >
-                <Link replace href="/">
-                    <Text
-                        style={{
-                            color: 'white',
-                            fontSize: 16,
-                            fontWeight: 500
-                        }}
-                    >
-                        返回登錄畫面
-                    </Text>
-                </Link>
-            </View>
-        </View>
+        </SafeAreaView>
     );
 };
 const styles = StyleSheet.create({
-    titleText: { fontSize: 32, fontWeight:"400" },
+    titleText: { fontSize: 32, fontWeight: '400' },
     text: {
         fontSize: 18
     }

component/global/normal_input.tsx

@@ -8,14 +8,60 @@ import {
 } from 'react-native';
 
 interface NormalInputProps {
-    placeholder: string | undefined ;
+    placeholder: string | undefined;
     extendedStyle?: StyleProp<ViewStyle>;
     onChangeText: (text: string) => void;
     type?: KeyboardTypeOptions;
     secureTextEntry?: boolean;
     value?: string;
     editable?: boolean;
-    textContentType?: 'oneTimeCode';
+    textContentType?:
+        | 'none'
+        | 'URL'
+        | 'addressCity'
+        | 'addressCityAndState'
+        | 'addressState'
+        | 'countryName'
+        | 'creditCardNumber'
+        | 'emailAddress'
+        | 'familyName'
+        | 'fullStreetAddress'
+        | 'givenName'
+        | 'jobTitle'
+        | 'location'
+        | 'middleName'
+        | 'name'
+        | 'namePrefix'
+        | 'nameSuffix'
+        | 'nickname'
+        | 'organizationName'
+        | 'postalCode'
+        | 'streetAddressLine1'
+        | 'streetAddressLine2'
+        | 'sublocality'
+        | 'telephoneNumber'
+        | 'username'
+        | 'password'
+        | 'newPassword'
+        | 'oneTimeCode';
+    autoComplete?:
+        | 'name'
+        | 'nickname'
+        | 'username'
+        | 'password'
+        | 'new-password'
+        | 'one-time-code'
+        | 'email'
+        | 'tel'
+        | 'street-address'
+        | 'postal-code'
+        | 'cc-number'
+        | 'cc-exp'
+        | 'cc-csc'
+        | 'cc-exp-month'
+        | 'cc-exp-year'
+        | 'off'
+        | 'password-new';
 }
 
 const NormalInput = forwardRef<TextInput, NormalInputProps>(
@@ -25,10 +71,11 @@ const NormalInput = forwardRef<TextInput, NormalInputProps>(
             extendedStyle,
             type,
             onChangeText,
+            autoComplete,
             secureTextEntry = false,
             value,
             editable,
-            textContentType
+            textContentType = 'oneTimeCode'
         },
         ref
     ) => {
@@ -44,6 +91,7 @@ const NormalInput = forwardRef<TextInput, NormalInputProps>(
                 onChangeText={(value) => onChangeText(value)}
                 textContentType={textContentType}
                 editable={editable}
+                autoComplete={autoComplete}
             />
         );
     }

component/global/recentlyBookedScrollView.tsx

@@ -1,9 +1,15 @@
-import { View, Text, ScrollView } from 'react-native';
+import { View, Text, ScrollView, Dimensions } from 'react-native';
 import React from 'react';
 import NormalButton from './normal_button';
 import Svg, { Path } from 'react-native-svg';
 import { BookingIconSvg } from './SVG';
 
+
+
+const calculateResponsivePadding = () => {
+    const screenHeight = Dimensions.get('window').height;
+    return screenHeight * 0.01; // 3% of screen height, adjust as needed
+};
 const RecentBookedRowItemsData = [
     { chargingStationName: '充電站#1', chargingStationAddress: '充電站#1地址' },
     { chargingStationName: '充電站#2', chargingStationAddress: '充電站#2地址' },
@@ -15,7 +21,6 @@ const RecentBookedRowItemsData = [
     { chargingStationName: '充電站#8', chargingStationAddress: '充電站#8地址' }
 ];
 
-
 const RecentBookedRowItems = ({
     chargingStationName,
     chargingStationAddress
@@ -36,7 +41,7 @@ const RecentBookedRowItems = ({
                 justifyContent: 'space-between',
                 flex: 1,
                 borderBottomWidth: 0.5,
-                paddingVertical: 15,
+                paddingVertical: calculateResponsivePadding(),
                 borderColor: '#ccc',
                 borderRadius: 8
             }}
@@ -94,16 +99,14 @@ const RecentlyBookedScrollView = () => {
             >
                 近期預約過
             </Text>
-            <View className="h-[25vh]">
-                <ScrollView nestedScrollEnabled={true}>
-                    {RecentBookedRowItemsData.map((item) => (
-                        <RecentBookedRowItems
-                            key={`${item.chargingStationName}+${item.chargingStationAddress}`}
-                            chargingStationName={item.chargingStationName}
-                            chargingStationAddress={item.chargingStationAddress}
-                        />
-                    ))}
-                </ScrollView>
+            <View className="">
+                {RecentBookedRowItemsData.slice(0, 2).map((item) => (
+                    <RecentBookedRowItems
+                        key={`${item.chargingStationName}+${item.chargingStationAddress}`}
+                        chargingStationName={item.chargingStationName}
+                        chargingStationAddress={item.chargingStationAddress}
+                    />
+                ))}
             </View>
         </View>
     );

component/global/select_button.tsx

@@ -1,77 +1,88 @@
-import React from "react";
-import { Text, View, StyleSheet, ViewStyle, StyleProp, TouchableOpacity } from "react-native";
+import React from 'react';
+import {
+    Text,
+    View,
+    StyleSheet,
+    ViewStyle,
+    StyleProp,
+    TouchableOpacity
+} from 'react-native';
 
 type Option = {
-	label: string;
+    label: string;
 };
 
 interface SingleSelectButtonGroupProps {
-	options: Option[];
-	onSelectionChange: (value: string) => void;
-	extendedStyle?: StyleProp<ViewStyle>;
-	shouldShowRedOutline: boolean;
-	selectedOption: string | null | undefined;
+    options: Option[];
+    onSelectionChange: (value: string) => void;
+    extendedStyle?: StyleProp<ViewStyle>;
+    selectedOption: string | null | undefined;
 }
 
 const SingleSelectButtonGroup: React.FC<SingleSelectButtonGroupProps> = ({
-	options,
-	onSelectionChange,
-	extendedStyle,
-	shouldShowRedOutline,
-	selectedOption,
+    options,
+    onSelectionChange,
+    extendedStyle,
+    selectedOption
 }) => {
-	return (
-		<View>
-			{options.map((option, index) => (
-				<TouchableOpacity
-					key={index}
-					style={[
-						styles.button,
-						selectedOption === option.label && styles.selectedButton,
-						shouldShowRedOutline && styles.redOutline,
-						extendedStyle,
-					]}
-					onPress={() => onSelectionChange(option.label)}
-				>
-					<Text style={{ fontSize: 16 }}>{option.label}</Text>
-					<View style={[styles.circle, selectedOption === option.label && styles.selectedCircle]} />
-				</TouchableOpacity>
-			))}
-		</View>
-	);
+    return (
+        <View>
+            {options.map((option, index) => (
+                <TouchableOpacity
+                    key={index}
+                    style={[
+                        styles.button,
+                        selectedOption === option.label &&
+                            styles.selectedButton,
+                        extendedStyle
+                    ]}
+                    onPress={() => onSelectionChange(option.label)}
+                >
+                    <Text style={{ fontSize: 16 }}>{option.label}</Text>
+                    <View
+                        style={[
+                            styles.circle,
+                            selectedOption === option.label &&
+                                styles.selectedCircle
+                        ]}
+                    />
+                </TouchableOpacity>
+            ))}
+        </View>
+    );
 };
 
 const styles = StyleSheet.create({
-	button: {
-		maxWidth: "100%",
-		padding: 20,
-		marginBottom: 10,
-		borderWidth: 1,
-		justifyContent: "space-between",
-		alignItems: "center",
-		flexDirection: "row",
-		borderRadius: 12,
-		borderColor: "#bbbbbb",
-	},
-	circle: {
-		width: 10,
-		height: 10,
-		borderRadius: 5,
-		backgroundColor: "#e8e8e8",
-		borderWidth: 1,
-		borderColor: "#bbbbbb",
-	},
-	selectedButton: {
-		borderWidth: 1,
-		borderColor: "#949494",
-	},
-	selectedCircle: {
-		backgroundColor: "#949494",
-	},
-	redOutline: {
-		borderWidth: 1,
-		borderColor: "red",
-	},
+    button: {
+        maxWidth: '100%',
+        padding: 20,
+        marginBottom: 10,
+        borderWidth: 1,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexDirection: 'row',
+        borderRadius: 12,
+        borderColor: '#bbbbbb'
+    },
+    circle: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: '#e8e8e8',
+        borderWidth: 1,
+        borderColor: '#bbbbbb'
+    },
+    selectedButton: {
+        borderWidth: 1,
+        borderColor: '#949494'
+    },
+    selectedCircle: {
+        backgroundColor: '#949494'
+    },
+    redOutline: {
+        borderWidth: 1,
+        borderColor: 'red'
+    }
 });
 
 export default SingleSelectButtonGroup;

component/global/tabView.tsx

@@ -35,6 +35,7 @@ const TabViewComponent: React.FC<TabViewComponentProps> = ({
     const FirstRoute = () => (
         <View style={{ flex: 1, backgroundColor: 'white' }}>
             <FlashList
+                nestedScrollEnabled={true}
                 data={tabItems}
                 renderItem={({ item }) => {
                     return (
@@ -120,7 +121,7 @@ const TabViewComponent: React.FC<TabViewComponentProps> = ({
             }}
             style={{
                 backgroundColor: 'white',
-                borderTopWidth: 4,
+                // borderTopWidth: 4,
                 borderColor: '#DBE4E8',
                 elevation: 0,
                 marginHorizontal: 15,

component/homePage/homePage.tsx

@@ -62,9 +62,7 @@ const HomePage: React.FC<HomePageProps> = () => {
                     <View className="flex-1 flex-row justify-between gap-6">
                         <View className="flex-1">
                             <NormalButton
-                                onPress={() =>
-                                    router.push('bookingMenuPage')
-                                }
+                                onPress={() => router.push('bookingMenuPage')}
                                 title={
                                     <Text className="text-white font-bold text-lg">
                                         我的預約

component/registrationMultiStepForm/formComponent/form.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react-native';
 import Verification from './formPages/verification';
 import BasicInformation from './formPages/basicInformation';
-import UberDriver from './formPages/uberDriver';
 import CarInformation from './formPages/carInformation';
 import PaginationIndicator from '../../global/PaginationIndicator';
 import CreateWallet from './formPages/createWallet';
@@ -28,7 +27,6 @@ const Form: React.FC<FormProps> = ({}) => {
         '',
         '註冊 - 電郵驗證',
         '註冊 - 基本資料',
-        '註冊 - Uber Driver',
         '註冊 - 車輛資料',
         '註冊 - 設立銀包'
     ];
@@ -46,27 +44,27 @@ const Form: React.FC<FormProps> = ({}) => {
                 return <Verification setScreen={setScreen} />;
             case 2:
                 return <BasicInformation goToNextPage={goToNextPage} />;
+            // case 3:
+            //     return <UberDriver goToNextPage={goToNextPage} />;
             case 3:
-                return <UberDriver goToNextPage={goToNextPage} />;
-            case 4:
                 return (
                     <CarInformation
                         goToNextPage={goToNextPage}
                         goToChooseCarPage={goToChooseCarBrandPage}
                     />
                 );
-            case 5:
+            case 4:
                 return <CreateWallet goToNextPage={goToNextPage} />;
-            case 6:
+            case 5:
                 return <FinishSignUp />;
-            case 7:
+            case 6:
                 return (
                     <ChooseCarBrand
                         goToCarInformation={goToCarInformation}
                         goToChooseCarSeriesPage={goToChooseCarSeriesPage}
                     />
                 );
-            case 8:
+            case 7:
                 return (
                     <ChooseCarSeries
                         goToChooseCarBrandPage={goToChooseCarBrandPage}
@@ -74,14 +72,14 @@ const Form: React.FC<FormProps> = ({}) => {
                     />
                 );
 
-            case 9:
+            case 8:
                 return (
                     <ChooseCarModel
                         goToChooseCarSeriesPage={goToChooseCarSeriesPage}
                         goToCarInformation={goToCarInformation}
                     />
                 );
-            case 10:
+            case 9:
                 return <ForgetPasswordForm />;
             default:
                 return <></>;
@@ -109,18 +107,18 @@ const Form: React.FC<FormProps> = ({}) => {
     };
     const goToChooseCarBrandPage = () => {
         setScreen((prevState) => {
-            return 7;
+            return 6;
         });
     };
 
     const goToChooseCarSeriesPage = () => {
         setScreen((prevState) => {
-            return 8;
+            return 7;
         });
     };
     const goToChooseCarModelPage = () => {
         setScreen((prevState) => {
-            return 9;
+            return 8;
         });
     };
 
@@ -139,11 +137,11 @@ const Form: React.FC<FormProps> = ({}) => {
         <>
             <KeyboardAwareScrollView
                 enableOnAndroid={true}
-                resetScrollToCoords={{ x: 0, y: 0 }}
+                // resetScrollToCoords={{ x: 0, y: 0 }}
             >
                 {/* not showing title and pagination on the first and last page */}
                 {screen == 0 ||
-                    (screen < 6 && (
+                    (screen < 5 && (
                         //dismiss keyboard when user click outside of the input field to improve user experience
                         <TouchableWithoutFeedback
                             onPress={() => Keyboard.dismiss()}

component/registrationMultiStepForm/formComponent/formPages/carInformation.tsx

@@ -17,9 +17,9 @@ const CarInformation: React.FC<CarInformationProps> = ({
     const [error, setError] = useState('');
     const handleNext = () => {
         if (
-            signUpFormData.selectedCarBrand === '' ||
-            signUpFormData.selectedCarSeries === '' ||
-            signUpFormData.selectedCarModel === ''
+            signUpFormData.selectedCarBrand === '0000' ||
+            signUpFormData.selectedCarSeries === '0000' ||
+            signUpFormData.selectedCarModel === '0000'
         ) {
             setError('請確保所有資料都已填寫。');
         } else {
@@ -28,15 +28,15 @@ const CarInformation: React.FC<CarInformationProps> = ({
         }
     };
 
-    const vehicleTypeFieldPlaceholder = signUpFormData.selectedCarBrand
-        ? signUpFormData.selectedCarBrand
-        : '車輛品牌';
-    const vehicleModelFieldPlaceholder = signUpFormData.selectedCarSeries
-        ? signUpFormData.selectedCarSeries
-        : '車輛型號';
-    const licensePlateFieldPlaceholder = signUpFormData.selectedCarModel
-        ? signUpFormData.selectedCarModel
-        : '車輛號碼';
+    // const vehicleTypeFieldPlaceholder = signUpFormData.selectedCarBrand
+    //     ? signUpFormData.selectedCarBrand
+    //     : '車輛品牌';
+    // const vehicleModelFieldPlaceholder = signUpFormData.selectedCarSeries
+    //     ? signUpFormData.selectedCarSeries
+    //     : '車輛型號';
+    // const licensePlateFieldPlaceholder = signUpFormData.selectedCarModel
+    //     ? signUpFormData.selectedCarModel
+    //     : '車輛號碼';
 
     return (
         <>
@@ -55,19 +55,19 @@ const CarInformation: React.FC<CarInformationProps> = ({
                     >
                         <TextInput
                             style={styles.fakeTextInput}
-                            placeholder={vehicleTypeFieldPlaceholder}
+                            placeholder="車輛品牌"
                             editable={false}
                             pointerEvents="none"
                         ></TextInput>
                         <TextInput
                             style={styles.fakeTextInput}
-                            placeholder={vehicleModelFieldPlaceholder}
+                            placeholder="車輛型號"
                             editable={false}
                             pointerEvents="none"
                         ></TextInput>
                         <TextInput
                             style={styles.fakeTextInput}
-                            placeholder={licensePlateFieldPlaceholder}
+                            placeholder="車輛號碼"
                             editable={false}
                             pointerEvents="none"
                         ></TextInput>

component/registrationMultiStepForm/formComponent/formPages/createWallet.tsx

@@ -1,13 +1,12 @@
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import NormalInput from '../../../global/normal_input';
 import NormalButton from '../../../global/normal_button';
 import { useState } from 'react';
 import SingleSelectButtonGroup from '../../../global/select_button';
 import useSignUpStore from '../../../../providers/signup_form_store';
 import PhoneInput from '../../../global/phone_input';
-import { SignUp, authenticationService } from '../../../../service/authService';
-import { CustomerData } from '../../../../types/signUpFormData';
-
+import { authenticationService } from '../../../../service/authService';
+import { Alert } from 'react-native';
 type CreateWalletProps = {
     goToNextPage: () => void;
 };
@@ -16,6 +15,8 @@ const weChatAliPay = '微信支付/支付寶';
 
 const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
     const options = [{ label: creditCard }, { label: weChatAliPay }];
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoading2, setIsLoading2] = useState(false);
     const { signUpFormData, setSignUpFormData } = useSignUpStore();
 
     const handleSelectedChange = (selectedLabel: string) => {
@@ -23,12 +24,24 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
         setError('');
     };
 
-    const handleNextWithSkip = () => {
-        authenticationService.signUp(customerData);
-        goToNextPage();
+    const handleNextWithSkip = async () => {
+        setIsLoading2(true);
+        try {
+            const result = await authenticationService.signUp(customerData);
+            if (result === true) {
+                goToNextPage();
+            } else {
+                Alert.alert('註冊錯誤', '註冊過程中出現錯誤，請稍後再試');
+            }
+        } catch (error) {
+            console.error('Sign up error:', error);
+            setError('註冊過程中出現錯誤，請稍後再試。');
+        } finally {
+            setIsLoading2(false);
+        }
     };
 
-    const handleNext = () => {
+    const handleNext = async () => {
         if (
             signUpFormData.paymentMethod === '' ||
             signUpFormData.phone === '' ||
@@ -37,9 +50,21 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
             setError('請確保所有資料都已填寫。');
         } else {
             setError('');
-            authenticationService.signUp(customerData);
-            // SignUp(customerData);
-            goToNextPage();
+
+            setIsLoading(true);
+            try {
+                const result = await authenticationService.signUp(customerData);
+                if (result === true) {
+                    goToNextPage();
+                } else {
+                    Alert.alert('註冊錯誤', '註冊過程中出現錯誤，請稍後再試');
+                }
+            } catch (error) {
+                setError('註冊過程中出現錯誤，請稍後再試。');
+                console.error('Sign up error:', error);
+            } finally {
+                setIsLoading(false);
+            }
         }
     };
 
@@ -59,40 +84,23 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
 
     const [error, setError] = useState('');
 
-    let customerData: CustomerData;
-    if (signUpFormData.selectedCarModel === '') {
-        // Empty SelectedCarModel means user has clicked "略過"
-        customerData = {
-            customerBaseInfo: {
-                name: signUpFormData.nickName.trim(),
-                email: signUpFormData.email,
-                password: signUpFormData.password,
-                gender: signUpFormData.gender,
-                birthday: signUpFormData.birthDate,
-                address: signUpFormData.address,
-                phone: signUpFormData.phone,
-                isUberDriver: signUpFormData.isUberDriver
-            }
-        };
-    } else {
-        customerData = {
-            customerBaseInfo: {
-                name: signUpFormData.nickName.trim(),
-                email: signUpFormData.email,
-                password: signUpFormData.password,
-                gender: signUpFormData.gender,
-                birthday: signUpFormData.birthDate,
-                address: signUpFormData.address,
-                phone: signUpFormData.phone,
-                isUberDriver: signUpFormData.isUberDriver
-            },
-            customerCarInfo: {
-                type_id: signUpFormData.selectedCarModel,
-                brand_id: signUpFormData.selectedCarBrand,
-                licensePlate: 'placeholder'
-            }
-        };
-    }
+    let customerData = {
+        customerBaseInfo: {
+            name: signUpFormData.nickName.trim(),
+            email: signUpFormData.email,
+            password: signUpFormData.password,
+            gender: signUpFormData.gender,
+            birthday: signUpFormData.birthDate,
+            address: signUpFormData.address,
+            phone: signUpFormData.phone,
+            isUberDriver: signUpFormData.isUberDriver
+        },
+        customerCarInfo: {
+            type_id: signUpFormData.selectedCarModel,
+            brand_id: signUpFormData.selectedCarBrand,
+            licensePlate: signUpFormData.licensePlate
+        }
+    };
 
     return (
         <>
@@ -115,7 +123,6 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
                         }}
                         placeholder={phoneFieldPlaceholder}
                     />
-
                     <NormalInput
                         placeholder="地址"
                         onChangeText={(address) => {
@@ -125,25 +132,38 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
                             });
                         }}
                     />
-
                     <SingleSelectButtonGroup
                         options={options}
                         onSelectionChange={handleSelectedChange}
-                        shouldShowRedOutline={error ? true : false}
                         selectedOption={selectLabelShown()}
                     />
+                </View>
+                {error && <Text style={styles.errorMessage}>{error}</Text>}
+                <View>
                     <NormalButton
-                        title={<Text style={{ color: '#fff' }}>完成</Text>}
+                        title={
+                            isLoading ? (
+                                <ActivityIndicator />
+                            ) : (
+                                <Text style={{ color: '#fff' }}>完成</Text>
+                            )
+                        }
                         onPress={handleNext}
                         extendedStyle={{}}
                     />
                     <NormalButton
-                        title={<Text style={{ color: '#888888' }}>略過</Text>}
+                        title={
+                            isLoading2 ? (
+                                <ActivityIndicator />
+                            ) : (
+                                <Text style={{ color: '#888888' }}>略過</Text>
+                            )
+                        }
                         onPress={handleNextWithSkip}
                         extendedStyle={{ backgroundColor: 'transparent' }}
+                        buttonPressedStyle={{ backgroundColor: 'transparent' }}
                     />
                 </View>
-                {error && <Text style={styles.errorMessage}>{error}</Text>}
             </View>
         </>
     );
@@ -163,7 +183,7 @@ const styles = StyleSheet.create({
         color: '#ff0033',
         fontWeight: '400',
         marginLeft: 10,
-        marginTop: 10
+        marginBottom: 10
     }
 });
 export default CreateWallet;

component/registrationMultiStepForm/formComponent/formPages/loginPage.tsx

@@ -3,21 +3,21 @@ import {
     Text,
     StyleSheet,
     Pressable,
-    ScrollView,
-    Alert
+    Alert,
+    Dimensions,
+    ActivityIndicator
 } from 'react-native';
 import NormalButton from '../../../global/normal_button';
 import Logo from '../../../global/logo';
 import NormalInput from '../../../global/normal_input';
-import { useEffect, useState } from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { authenticationService } from '../../../../service/authService';
+import { useState } from 'react';
 import { useAuth } from '../../../../context/AuthProvider';
 type LoginPageProps = {
     goToNextPage: () => void;
     goToForgetPassWordPage: () => void;
 };
 
+const screenHeight = Dimensions.get('window').height;
 const LoginPage: React.FC<LoginPageProps> = ({
     goToNextPage,
     goToForgetPassWordPage
@@ -27,10 +27,6 @@ const LoginPage: React.FC<LoginPageProps> = ({
     const [isLoading, setIsLoading] = useState(false);
     const { login } = useAuth();
 
-    // useEffect(() => {
-    //     console.log(loginEmail, loginPassword);
-    // }, [loginEmail, loginPassword]);
-
     const _login = async (username: string, password: string) => {
         setIsLoading(true);
         if (username === '' || password === '') {
@@ -46,78 +42,79 @@ const LoginPage: React.FC<LoginPageProps> = ({
     };
 
     return (
-        <ScrollView>
-            <SafeAreaView style={styles.container}>
-                <View style={styles.topContainerForLogo}>
-                    <Logo />
-                </View>
-                <View style={styles.bottomContainer}>
-                    <NormalInput
-                        placeholder="電子郵件"
-                        onChangeText={(email) => setLoginEmail(email)}
-                        extendedStyle={{ borderRadius: 12, padding: 20 }}
-                    />
-                    <NormalInput
-                        placeholder="密碼"
-                        onChangeText={(password) => setLoginPassword(password)}
-                        secureTextEntry={true}
-                        extendedStyle={{ borderRadius: 12, padding: 20 }}
-                    />
-                    <View className="flex-row">
-                        <Pressable onPress={() => goToForgetPassWordPage()}>
-                            <Text style={styles.text}>忘記密碼</Text>
-                        </Pressable>
-                    </View>
-                    <NormalButton
-                        onPress={() => _login(loginEmail, loginPassword)}
-                        title={
-                            isLoading ? (
-                                <Text
-                                    style={{
-                                        fontWeight: '700',
-                                        fontSize: 20,
-                                        color: '#fff'
-                                    }}
-                                >
-                                    Loading ...{' '}
-                                </Text>
-                            ) : (
-                                <Text
-                                    style={{
-                                        fontWeight: '700',
-                                        fontSize: 20,
-                                        color: '#fff'
-                                    }}
-                                >
-                                    登入
-                                </Text>
-                            )
-                        }
-                    />
-                    <View className="flex-row">
-                        <Pressable onPress={goToNextPage}>
-                            <Text style={styles.text}>註冊會員</Text>
-                        </Pressable>
-                    </View>
-                </View>
-            </SafeAreaView>
-        </ScrollView>
+        <View style={styles.container} className="">
+            <View style={styles.topContainerForLogo}>
+                <Logo />
+            </View>
+            <View style={styles.bottomContainer} className="">
+                <NormalInput
+                    placeholder="電子郵件"
+                    onChangeText={(email) => setLoginEmail(email)}
+                    extendedStyle={{ borderRadius: 12, padding: 20 }}
+                    textContentType="username"
+                    autoComplete="username"
+                />
+                <NormalInput
+                    placeholder="密碼"
+                    onChangeText={(password) => setLoginPassword(password)}
+                    secureTextEntry={true}
+                    extendedStyle={{ borderRadius: 12, padding: 20 }}
+                    textContentType="password"
+                    autoComplete="password"
+                />
+
+                <Pressable onPress={() => goToForgetPassWordPage()}>
+                    <Text style={styles.text}>忘記密碼</Text>
+                </Pressable>
+                <NormalButton
+                    extendedStyle={{ padding: 20 }}
+                    onPress={() => _login(loginEmail, loginPassword)}
+                    title={
+                        isLoading ? (
+                            <Text
+                                style={{
+                                    fontWeight: '700',
+                                    fontSize: 20,
+                                    color: '#fff'
+                                }}
+                            >
+                                <ActivityIndicator />
+                            </Text>
+                        ) : (
+                            <Text
+                                style={{
+                                    fontWeight: '700',
+                                    fontSize: 20,
+                                    color: '#fff'
+                                }}
+                            >
+                                登入
+                            </Text>
+                        )
+                    }
+                />
+                <Pressable onPress={goToNextPage}>
+                    <Text style={styles.text}>註冊會員</Text>
+                </Pressable>
+            </View>
+        </View>
     );
 };
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        gap: 50,
+        height: Dimensions.get('window').height,
+        justifyContent: 'center',
         marginHorizontal: 20
     },
-    topContainerForLogo: {
-        flex: 1 / 2
-    },
+    topContainerForLogo: { marginBottom: screenHeight < 700 ? '0%' : '20%' },
     bottomContainer: {
-        flex: 1,
+        marginBottom: '20%',
+        justifyContent: 'flex-start',
         gap: 10
     },
+
     text: {
         color: '#02677D',
         fontSize: 16,

component/registrationMultiStepForm/multi_step_form.tsx

@@ -17,7 +17,7 @@ const MultiStepForm: React.FC = () => {
             className="flex-1 bg-white"
             edges={['top', 'left', 'right']}
         >
-            <ScrollView className="flex-1">
+            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
                 <View style={styles.container}>
                     <Form />
                     <StatusBar style="auto" />

providers/signup_form_store.tsx

@@ -10,10 +10,10 @@ const useSignUpStore = create<SignUpFormState>((set) => ({
         email: '',
         birthDate: '',
         isUberDriver: false,
-        selectedCarModel: '',
-        selectedCarBrand: '',
-        selectedCarSeries:'',
-        licensePlate: '',
+        selectedCarModel: '0000',
+        selectedCarBrand: '0000',
+        selectedCarSeries:'0000',
+        licensePlate: '0000',
         address: '',
         paymentMethod: ''
     },