.

app/(auth)/(tabs)/(home)/(vehicle)/setVehiclesOne.tsx

@@ -4,7 +4,7 @@ interface AlphabetSection {
 }
 
 import React, { useEffect, useState } from 'react';
-import { View, Text, Image, Pressable, StyleSheet, ScrollView } from 'react-native';
+import { View, Text, Image, Pressable, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
 
 import { FlashList } from '@shopify/flash-list';
 import { router } from 'expo-router';
@@ -14,6 +14,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { chargeStationService } from '../../../../../service/chargeStationService';
 
 const SetVehiclesOne = () => {
+    const [loading, setLoading] = useState(true);
     const [carData, setCarData] = useState();
     const [extractedCarNameAndImgUrl, setExtractedCarNameAndImgUrl] = useState('');
     const [processedCarData, setProcessedCarData] = useState([]);
@@ -46,6 +47,8 @@ const SetVehiclesOne = () => {
                 }
             } catch (error) {
                 console.log(error);
+            } finally {
+                setLoading(false);
             }
         };
         fetchCarBrand();
@@ -60,6 +63,7 @@ const SetVehiclesOne = () => {
 
     const renderBrandItem = ({ item: brand }: { item }) => (
         <Pressable
+            key={brand.id}
             style={styles.brandItem}
             onPress={() => {
                 setVehicleBrand(brand.name);
@@ -115,7 +119,32 @@ const SetVehiclesOne = () => {
                         選擇品牌
                     </Text>
                 </View>
-                <View className="flex-1">
+                {loading ? (
+                    <View className="flex h-full items-center justify-center">
+                        <ActivityIndicator />
+                    </View>
+                ) : (
+                    <View className="flex-1 min-h-[80vh]">
+                        <FlashList
+                            estimatedItemSize={100}
+                            data={processedCarData
+                                .sort((a, b) => a.name.localeCompare(b.name))
+                                .reduce((acc, brand) => {
+                                    const letter = brand.name[0].toUpperCase();
+                                    const existingSection = acc.find((section) => section.letter === letter);
+                                    if (existingSection) {
+                                        existingSection.brands.push(brand);
+                                    } else {
+                                        acc.push({ letter, brands: [brand] });
+                                    }
+                                    return acc;
+                                }, [] as AlphabetSection[])}
+                            renderItem={renderAlphabetSection}
+                            keyExtractor={(item) => item.letter}
+                        />
+                    </View>
+                )}
+                {/* <View className="flex-1 min-h-[80vh]">
                     <FlashList
                         estimatedItemSize={100}
                         data={processedCarData.reduce((acc, brand) => {
@@ -131,7 +160,7 @@ const SetVehiclesOne = () => {
                         renderItem={renderAlphabetSection}
                         keyExtractor={(item) => item.letter}
                     />
-                </View>
+                </View> */}
             </ScrollView>
         </SafeAreaView>
     );

app/(auth)/(tabs)/(home)/scanQrPage.tsx

@@ -356,6 +356,7 @@ const ScanQrPage = () => {
     const now = new Date();
     const [loading, setLoading] = useState(false);
     const [carData, setCarData] = useState([]);
+   
     useEffect(() => {
         (async () => {
             const { status } = await requestPermission();

app/(public)/registerChooseVehiclesOne.tsx

@@ -4,7 +4,7 @@ interface AlphabetSection {
 }
 
 import React, { useEffect, useState } from 'react';
-import { View, Text, Image, Pressable, StyleSheet, ScrollView } from 'react-native';
+import { View, Text, Image, Pressable, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
 
 import { FlashList } from '@shopify/flash-list';
 import { router } from 'expo-router';
@@ -15,6 +15,7 @@ import { chargeStationService } from '../../service/chargeStationService';
 import { PreviousPageBlackSvg } from '../../component/global/SVG';
 
 const RegisterChooseVehiclesOne = () => {
+    const [loading, setLoading] = useState(true);
     const [carData, setCarData] = useState();
     const [extractedCarNameAndImgUrl, setExtractedCarNameAndImgUrl] = useState('');
     const [processedCarData, setProcessedCarData] = useState([]);
@@ -47,6 +48,8 @@ const RegisterChooseVehiclesOne = () => {
                 }
             } catch (error) {
                 console.log(error);
+            } finally {
+                setLoading(false);
             }
         };
         fetchCarBrand();
@@ -61,6 +64,7 @@ const RegisterChooseVehiclesOne = () => {
 
     const renderBrandItem = ({ item: brand }: { item }) => (
         <Pressable
+            key={brand.id}
             style={styles.brandItem}
             onPress={() => {
                 setVehicleBrand(brand.name);
@@ -116,7 +120,35 @@ const RegisterChooseVehiclesOne = () => {
                         選擇品牌
                     </Text>
                 </View>
-                <View className="flex-1">
+
+                {loading ? (
+                    <View className="flex h-full items-center justify-center">
+                        <ActivityIndicator />
+                    </View>
+                ) : (
+                    <View className="flex-1 min-h-[80vh]">
+                        <FlashList
+                            estimatedItemSize={100}
+                            data={processedCarData
+                                .sort((a, b) => a.name.localeCompare(b.name))
+                                .reduce((acc, brand) => {
+                                    const letter = brand.name[0].toUpperCase();
+                                    const existingSection = acc.find((section) => section.letter === letter);
+                                    if (existingSection) {
+                                        existingSection.brands.push(brand);
+                                    } else {
+                                        acc.push({ letter, brands: [brand] });
+                                    }
+                                    return acc;
+                                }, [] as AlphabetSection[])}
+                            renderItem={renderAlphabetSection}
+                            keyExtractor={(item) => item.letter}
+                        />
+                    </View>
+                )}
+
+                {/* 
+                <View className="flex-1 min-h-[80vh]">
                     <FlashList
                         estimatedItemSize={100}
                         data={processedCarData.reduce((acc, brand) => {
@@ -132,7 +164,7 @@ const RegisterChooseVehiclesOne = () => {
                         renderItem={renderAlphabetSection}
                         keyExtractor={(item) => item.letter}
                     />
-                </View>
+                </View> */}
             </ScrollView>
         </SafeAreaView>
     );

app/(public)/test.tsx

@@ -51,7 +51,7 @@ export default function Test() {
     };
 
     return (
-        <View style={{ flex: 1 }} className="items-center justify-center bg-gray-50">
+        <View style={{ flex: 1 }} className="items-center justify-center bg-gray-50 ">
             <Button
                 title="abc"
                 onPress={() => {

component/bookingMenuPage/bookingSuccessPageComponent.tsx

@@ -26,10 +26,7 @@ const BookingSuccessPageComponent = () => {
     } = useBookingStore();
 
     return (
-        <SafeAreaView
-            style={{ flex: 1, backgroundColor: 'white' }}
-            edges={['top', 'left', 'right']}
-        >
+        <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }} edges={['top', 'left', 'right']}>
             <ScrollView className="flex-1">
                 <View>
                     <View className="flex-row pl-8 pt-8 space-x-4 items-center">
@@ -48,93 +45,55 @@ const BookingSuccessPageComponent = () => {
                         <View className="space-y-3  py-4 mx-[5%]">
                             <View className="flex-1 flex-row items-center ">
                                 <View className="flex-1 flex-column">
-                                    <Text
-                                        style={styles.grayColor}
-                                        className="text-xs "
-                                    >
+                                    <Text style={styles.grayColor} className="text-xs ">
                                         時間日期
                                     </Text>
-                                    <Text
-                                        style={styles.greenColor}
-                                        className="text-4xl  pt-2 "
-                                    >
-                                        {bookDateForDisplay} ·{' '}
-                                        {bookTimeForDisplay}
+                                    <Text style={styles.greenColor} className="text-4xl  pt-2 ">
+                                        {bookDateForDisplay} · {bookTimeForDisplay}
                                     </Text>
                                 </View>
                             </View>
                             <View className="flex-1 flex-column justify-center">
-                                <Text
-                                    style={styles.grayColor}
-                                    className="text-xs"
-                                >
+                                <Text style={styles.grayColor} className="text-xs">
                                     充電地點
                                 </Text>
-                                <Text
-                                    style={styles.greenColor}
-                                    className="text-xl"
-                                >
+                                <Text style={styles.greenColor} className="text-xl">
                                     {chargeStationNameForDisplay}
                                 </Text>
-                                <Text
-                                    style={styles.grayColor}
-                                    className="text-base"
-                                >
+                                <Text style={styles.grayColor} className="text-base">
                                     {chargeStationAddressForDisplay}
                                 </Text>
                             </View>
                             <View className="flex-1 flex-row items-center ">
                                 <View className="flex-column flex-1">
-                                    <Text
-                                        style={styles.grayColor}
-                                        className="text-xs"
-                                    >
+                                    <Text style={styles.grayColor} className="text-xs">
                                         方案
                                     </Text>
                                     {chargingWatt === '' ? (
                                         <>
-                                            <Text
-                                                style={styles.greenColor}
-                                                className="text-lg"
-                                            >
+                                            <Text style={styles.greenColor} className="text-lg">
                                                 按每度電結算
                                             </Text>
-                                            <Text
-                                                style={styles.grayColor}
-                                                className="text-sm"
-                                            >
+                                            <Text style={styles.grayColor} className="text-sm">
                                                 充滿停機預估費用
                                             </Text>
                                         </>
                                     ) : (
                                         <>
-                                            <Text
-                                                style={styles.greenColor}
-                                                className="text-lg"
-                                            >
+                                            <Text style={styles.greenColor} className="text-lg">
                                                 按每度電結算
                                             </Text>
-                                            <Text
-                                                style={styles.grayColor}
-                                                className="text-sm"
-                                            >
-                                                度數:{' '}
-                                                {chargingWatt.split('~')[0]}
+                                            <Text style={styles.grayColor} className="text-sm">
+                                                度數: {chargingWatt.split('~')[0]}
                                             </Text>
                                         </>
                                     )}
                                 </View>
                                 <View className="flex-column flex-1">
-                                    <Text
-                                        style={styles.grayColor}
-                                        className="text-xs"
-                                    >
+                                    <Text style={styles.grayColor} className="text-xs">
                                         車輛
                                     </Text>
-                                    <Text
-                                        style={styles.greenColor}
-                                        className="text-lg"
-                                    >
+                                    <Text style={styles.greenColor} className="text-lg">
                                         {carNameForDisplay}
                                     </Text>
                                 </View>
@@ -162,19 +121,13 @@ const BookingSuccessPageComponent = () => {
                     <View className="space-y-4">
                         <Text className="text-xl ">付款資訊</Text>
                         <View>
-                            <Text
-                                className="text-base"
-                                style={styles.grayColor}
-                            >
+                            <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 className="text-base" style={styles.grayColor}>
                                 付款方式
                             </Text>
                             <Text className="text-base">預付銀包</Text>

component/global/birthday_select.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import DropdownSelect from './dropdown_select';
+
+type BirthdaySelectProps = {
+    onSelect: (year: string, month: string, day: string) => void;
+};
+const BirthdaySelect: React.FC<BirthdaySelectProps> = ({ onSelect }) => {
+    const [selectedYear, setSelectedYear] = useState('');
+    const [selectedMonth, setSelectedMonth] = useState('');
+    const [selectedDay, setSelectedDay] = useState('');
+
+    const birthYearOptions = Array.from({ length: 100 }, (_, i) => {
+        const year = new Date().getFullYear() - i;
+        return { label: year.toString(), value: year.toString() };
+    });
+
+    const birthMonthOptions = Array.from({ length: 12 }, (_, i) => {
+        const month = i + 1;
+        return { label: month.toString(), value: month.toString() };
+    });
+
+    const birthDayOptions = Array.from({ length: 31 }, (_, i) => {
+        const day = i + 1;
+        return { label: day.toString(), value: day.toString() };
+    });
+
+    const handleSelect = (type: string, value: string) => {
+        if (type === 'year') {
+            setSelectedYear(value);
+        } else if (type === 'month') {
+            setSelectedMonth(value);
+        } else if (type === 'day') {
+            setSelectedDay(value);
+        }
+
+        if (selectedYear && selectedMonth && selectedDay) {
+            onSelect(selectedYear, selectedMonth, selectedDay);
+        }
+    };
+
+    return (
+        <View style={styles.container}>
+            <DropdownSelect
+                onSelect={(value) => handleSelect('year', value)}
+                dropdownOptions={birthYearOptions}
+                placeholder={'年份'}
+                extendedStyle={{ paddingLeft: 10 }}
+            />
+            <DropdownSelect
+                onSelect={(value) => handleSelect('month', value)}
+                dropdownOptions={birthMonthOptions}
+                placeholder={'月份'}
+                extendedStyle={{ paddingLeft: 10 }}
+            />
+            <DropdownSelect
+                onSelect={(value) => handleSelect('day', value)}
+                dropdownOptions={birthDayOptions}
+                placeholder={'日期'}
+                extendedStyle={{ paddingLeft: 10 }}
+            />
+        </View>
+    );
+};
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 10
+    }
+});
+export default BirthdaySelect;

component/registrationMultiStepForm/formComponent/formPages/basicInformation.tsx

@@ -9,17 +9,28 @@ import DropdownSelect from '../../../global/dropdown_select';
 type basicInformationProps = {
     goToNextPage: () => void;
 };
+type BirthdaySelectProps = {
+    onSelect: (year: string, month: string, day: string) => void;
+};
 
-const BasicInformation: React.FC<basicInformationProps> = ({
-    goToNextPage
-}) => {
+const BasicInformation: React.FC<basicInformationProps> = ({ goToNextPage }) => {
     const { signUpFormData, setSignUpFormData } = useSignUpStore();
+    const [selectedYear, setSelectedYear] = useState('');
+    const [selectedMonth, setSelectedMonth] = useState('');
+    const [selectedDay, setSelectedDay] = useState('');
+    const [birthDate, setBirthDate] = useState('');
     const [error, setError] = useState('');
     const handleNext = () => {
+        setSignUpFormData({
+            ...signUpFormData,
+            birthDate: birthDate
+        });
         if (
             signUpFormData.nickName === '' ||
             signUpFormData.password === '' ||
-            signUpFormData.birthDate === ''
+            signUpFormData.gender === '' ||
+            signUpFormData.birthDateMonth === '' ||
+            signUpFormData.birthDateDay === ''
         ) {
             setError('請確保所有資料都已填寫。');
         } else {
@@ -28,19 +39,46 @@ const BasicInformation: React.FC<basicInformationProps> = ({
         }
     };
 
-    const nameFieldPlaceholder = signUpFormData.nickName
-        ? signUpFormData.nickName
-        : '暱稱';
+    const nameFieldPlaceholder = signUpFormData.nickName ? signUpFormData.nickName : '暱稱';
+
+    const birthMonthOptions = Array.from({ length: 12 }, (_, i) => {
+        const month = i + 1;
+        return { label: month.toString(), value: month.toString() };
+    });
+
+    const birthDayOptions = Array.from({ length: 31 }, (_, i) => {
+        const day = i + 1;
+        return { label: day.toString(), value: day.toString() };
+    });
 
     const genderDropdownOptions = [
         { label: '男', value: 'man' },
         { label: '女', value: 'woman' }
     ];
+
+    const handleSelect = (type: string, value: string) => {
+        if (type === 'year') {
+            setSelectedYear(value);
+        } else if (type === 'month') {
+            setSelectedMonth(value);
+        } else if (type === 'day') {
+            setSelectedDay(value);
+        }
+
+        if (selectedMonth && selectedDay) {
+            const day = selectedDay.padStart(2, '0');
+            const month = selectedMonth.padStart(2, '0');
+            const date = `${day}/${month}/11`;
+            setBirthDate(date);
+        }
+    };
+
     return (
         <>
             <View style={styles.container}>
                 <Text style={styles.text}>請填妥以下資料</Text>
                 <View
+                    className=""
                     style={{
                         display: 'flex',
                         flexDirection: 'column',
@@ -69,13 +107,7 @@ const BasicInformation: React.FC<basicInformationProps> = ({
                         secureTextEntry={true}
                     />
 
-                    <View
-                        style={{
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: 10
-                        }}
-                    >
+                    <View className="">
                         <DropdownSelect
                             onSelect={(value) => {
                                 setSignUpFormData({
@@ -85,23 +117,52 @@ const BasicInformation: React.FC<basicInformationProps> = ({
                             }}
                             dropdownOptions={genderDropdownOptions}
                             placeholder={'性別'}
-                            extendedStyle={{ paddingLeft: 10 }}
+                            extendedStyle={{ paddingLeft: 10, paddingVertical: 13 }}
                         />
 
-                        <DateModal
-                            placeholder={
-                                signUpFormData.birthDate
-                                    ? signUpFormData.birthDate
-                                    : 'DD/MM/YY'
-                            }
+                        {/* <DateModal
+                            placeholder={signUpFormData.birthDate ? signUpFormData.birthDate : 'DD/MM/YY'}
                             onDateChange={(date) => {
                                 setSignUpFormData({
                                     ...signUpFormData,
                                     birthDate: date
                                 });
                             }}
+                        /> */}
+                    </View>
+
+                    <View className=" flex flex-row ">
+                        {/* <DropdownSelect
+                            onSelect={(value) => handleSelect('month', value)}
+                            dropdownOptions={birthMonthOptions}
+                            placeholder={'生日月份'}
+                            extendedStyle={{ paddingLeft: 10, paddingVertical: 13, marginRight: 6 }}
+                        /> */}
+
+                        <DropdownSelect
+                            onSelect={(value) => {
+                                setSignUpFormData({
+                                    ...signUpFormData,
+                                    birthDateMonth: value.padStart(2, '0')
+                                });
+                            }}
+                            dropdownOptions={birthMonthOptions}
+                            placeholder={'生日月份'}
+                            extendedStyle={{ paddingLeft: 10, paddingVertical: 13, marginRight: 6 }}
+                        />
+                        <DropdownSelect
+                            onSelect={(value) => {
+                                setSignUpFormData({
+                                    ...signUpFormData,
+                                    birthDateDay: value.padStart(2, '0')
+                                });
+                            }}
+                            dropdownOptions={birthDayOptions}
+                            placeholder={'日期'}
+                            extendedStyle={{ paddingLeft: 10, paddingVertical: 13, marginLeft: 6 }}
                         />
                     </View>
+
                     <NormalButton
                         title={<Text style={{ color: '#fff' }}>下一步</Text>}
                         onPress={handleNext}

component/registrationMultiStepForm/formComponent/formPages/carInformation.tsx

@@ -254,6 +254,7 @@ const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage, goToChoos
     const [isChecked, setChecked] = useState(false);
     const [brandNameDropdownOptions, setBrandNameDropdownOptions] = useState([]);
     const [brandData, setBrandData] = useState([]);
+
     const [brandTypeDropdownOptions, setBrandTypeDropdownOptions] = useState([
         {
             label: '車輛型號',
@@ -317,8 +318,14 @@ const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage, goToChoos
         }
     }, [signUpFormData.selectedCarBrand, brandData]);
 
+    //HERE I need to get car information, and the final create wallet i need to get car information
     const handleNext = () => {
-        if (BrandID === null || ModelID === null || licensePlate === null) {
+        if (
+            BrandID === '' ||
+            ModelID === '' ||
+            signUpFormData.licensePlate === '0000' ||
+            signUpFormData.licensePlate === ''
+        ) {
             setError('請確保所有資料都已填寫。');
         } else {
             setError('');

component/registrationMultiStepForm/formComponent/formPages/createWallet.tsx

@@ -41,6 +41,7 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
         setIsLoading2(true);
         try {
             const result = await authenticationService.signUp(customerData);
+            console.log('handleNextWithSkip in CreateWallet Page, i am sending this customerData', customerData);
             if (result === true) {
                 goToNextPage();
             } else {
@@ -55,7 +56,7 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
     };
 
     const handleNext = async () => {
-        if (signUpFormData.paymentMethod === '' || signUpFormData.phone === '' || signUpFormData.address === '') {
+        if (signUpFormData.paymentMethod === '' || signUpFormData.phone === '') {
             setError('請確保所有資料都已填寫。');
         } else {
             setError('');
@@ -63,6 +64,7 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
             setIsLoading(true);
             try {
                 const result = await authenticationService.signUp(customerData);
+                console.log('handleNext in CreateWallet Page, i am sending this customerData', customerData);
                 if (result === true) {
                     goToNextPage();
                 } else {
@@ -96,7 +98,7 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
             email: signUpFormData.email,
             password: signUpFormData.password,
             gender: signUpFormData.gender,
-            birthday: signUpFormData.birthDate,
+            birthday: signUpFormData.birthDateDay + '/' + signUpFormData.birthDateMonth + '/11',
             address: signUpFormData.address,
             phone: signUpFormData.phone,
             isUberDriver: signUpFormData.isUberDriver
@@ -104,7 +106,7 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
         customerCarInfo: {
             type_id: ModelID,
             brand_id: BrandID,
-            licensePlate: licensePlate
+            licensePlate: signUpFormData.licensePlate
         }
     };
 
@@ -129,15 +131,7 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
                         }}
                         placeholder={phoneFieldPlaceholder}
                     />
-                    <NormalInput
-                        placeholder="地址"
-                        onChangeText={(address) => {
-                            setSignUpFormData({
-                                ...signUpFormData,
-                                address: address
-                            });
-                        }}
-                    />
+
                     <SingleSelectButtonGroup
                         options={options}
                         onSelectionChange={handleSelectedChange}

component/registrationMultiStepForm/formComponent/formPages/verification.tsx

@@ -23,12 +23,7 @@ const Verification: React.FC<VerificationProps> = ({ setScreen }) => {
             setError('請確保所有資料都已填寫。');
         } else {
             setError('');
-            authenticationService.verifySignUpOtp(
-                signUpFormData.email.toLowerCase(),
-                otp,
-                setScreen,
-                setError
-            );
+            authenticationService.verifySignUpOtp(signUpFormData.email, otp, setScreen, setError);
         }
     };
 
@@ -37,9 +32,7 @@ const Verification: React.FC<VerificationProps> = ({ setScreen }) => {
             if (canSendOtp) {
                 setCanSendOtp(false);
                 setLockEmailInput(true);
-                authenticationService.sendOtpToSignUpEmail(
-                    signUpFormData.email.toLowerCase()
-                );
+                authenticationService.sendOtpToSignUpEmail(signUpFormData.email);
                 setTimeout(() => {
                     setCanSendOtp(true);
                     setLockEmailInput(false);
@@ -78,6 +71,7 @@ const Verification: React.FC<VerificationProps> = ({ setScreen }) => {
                     }
                     editable={!lockEmailInput}
                     extendedStyle={{ opacity: !lockEmailInput ? 1 : 0.5 }}
+                    autoCapitalize="none"
                 />
 
                 <View
@@ -88,16 +82,8 @@ const Verification: React.FC<VerificationProps> = ({ setScreen }) => {
                         gap: 10
                     }}
                 >
-                    <NumberInput
-                        placeholder="OTP驗證碼"
-                        onChangeText={setOtp}
-                        extendedStyle={{ flex: 1 }}
-                    />
-                    <NormalButton
-                        title={otpButtonText}
-                        onPress={handleSubmitOtp}
-                        extendedStyle={{ flex: 1 / 2 }}
-                    />
+                    <NumberInput placeholder="OTP驗證碼" onChangeText={setOtp} extendedStyle={{ flex: 1 }} />
+                    <NormalButton title={otpButtonText} onPress={handleSubmitOtp} extendedStyle={{ flex: 1 / 2 }} />
                 </View>
                 <NormalButton
                     title={<Text style={{ color: '#fff' }}>驗證</Text>}
@@ -109,14 +95,7 @@ const Verification: React.FC<VerificationProps> = ({ setScreen }) => {
                 {error && <Text style={styles.errorMessage}>{error}</Text>}
 
                 <Pressable onPress={handleChangePhoneNumber}>
-                    <Text
-                        style={[
-                            styles.footer,
-                            { opacity: lockEmailInput ? 1 : 0 }
-                        ]}
-                    >
-                        修改電子郵件
-                    </Text>
+                    <Text style={[styles.footer, { opacity: lockEmailInput ? 1 : 0 }]}>修改電子郵件</Text>
                 </Pressable>
             </View>
         </>

component/registrationMultiStepForm/multi_step_form.tsx

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

providers/signup_form_store.tsx

@@ -15,7 +15,9 @@ const useSignUpStore = create<SignUpFormState>((set) => ({
         selectedCarSeries: '0000',
         licensePlate: '0000',
         address: '',
-        paymentMethod: ''
+        paymentMethod: '',
+        birthDateMonth: '',
+        birthDateDay: ''
     },
     setSignUpFormData: (newFormData) =>
         set((state) => ({

service/chargeStationService.tsx

@@ -305,7 +305,7 @@ class ChargeStationService {
                 }
             );
             if (response.status === 200 || response.status === 201) {
-                // console.log(response.data);
+                console.log('received data from fetchOngoingChargingData at chargingStationService', response.data);
                 return response.data;
             } else {
                 console.log('invalid response');
@@ -377,7 +377,7 @@ class ChargeStationService {
 
     async getProcessedCarImageUrl(filename: string) {
         try {
-            const response = await axios.get(`http://192.168.1.121:12300/cdn/public/file/crazycharge/${filename}`, {
+            const response = await axios.get(`http://ftp.hkmgt.com/cdn/public/file/crazycharge/${filename}`, {
                 headers: {
                     Authorization: `Bearer ${await SecureStore.getItemAsync('accessToken')}`
                 }

types/signUpFormData.d.ts

@@ -12,6 +12,8 @@ export interface SignUpFormData {
     licensePlate?: string;
     address?: string;
     paymentMethod?: string;
+    birthDateMonth: string;
+    birthDateDay: string;
 }
 
 export interface SignUpFormState {