created choose car type pages

component/registrationMultiStepForm/formComponent/form.tsx

@@ -16,10 +16,13 @@ import CreateWallet from './formPages/createWallet';
 import FinishSignUp from './formPages/finishSignUp';
 import LoginPage from './formPages/loginPage';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import ChooseCarBrand from './formPages/chooseCarPage/carBrand';
+import ChooseCarSeries from './formPages/chooseCarPage/carSeries';
+import ChooseCarModel from './formPages/chooseCarPage/carModel';
 
 type FormProps = {};
 const Form: React.FC<FormProps> = ({}) => {
-    const [screen, setScreen] = useState<number>(0);
+    const [screen, setScreen] = useState<number>(4);
     const FormTitle = [
         '',
         '註冊 - 電話驗證',
@@ -40,11 +43,38 @@ const Form: React.FC<FormProps> = ({}) => {
             case 3:
                 return <UberDriver goToNextPage={goToNextPage} />;
             case 4:
-                return <CarInformation goToNextPage={goToNextPage} />;
+                return (
+                    <CarInformation
+                        goToNextPage={goToNextPage}
+                        goToChooseCarPage={goToChooseCarBrandPage}
+                    />
+                );
             case 5:
                 return <CreateWallet goToNextPage={goToNextPage} />;
             case 6:
                 return <FinishSignUp />;
+            case 7:
+                return (
+                    <ChooseCarBrand
+                        goToCarInformation={goToCarInformation}
+                        goToChooseCarSeriesPage={goToChooseCarSeriesPage}
+                    />
+                );
+            case 8:
+                return (
+                    <ChooseCarSeries
+                        goToChooseCarBrandPage={goToChooseCarBrandPage}
+                        goToChooseCarModelPage={goToChooseCarModelPage}
+                    />
+                );
+
+            case 9:
+                return (
+                    <ChooseCarModel
+                        goToChooseCarSeriesPage={goToChooseCarSeriesPage}
+                        goToCarInformation={goToCarInformation}
+                    />
+                );
             default:
                 return <></>;
         }
@@ -69,7 +99,28 @@ const Form: React.FC<FormProps> = ({}) => {
             }
         });
     };
+    const goToChooseCarBrandPage = () => {
+        setScreen((prevState) => {
+            return 7;
+        });
+    };
+
+    const goToChooseCarSeriesPage = () => {
+        setScreen((prevState) => {
+            return 8;
+        });
+    };
+    const goToChooseCarModelPage = () => {
+        setScreen((prevState) => {
+            return 9;
+        });
+    };
 
+    const goToCarInformation = () => {
+        setScreen((prevState) => {
+            return 4;
+        });
+    };
     return (
         <>
             <KeyboardAwareScrollView

component/registrationMultiStepForm/formComponent/formPages/carInformation.tsx

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, Pressable, TextInput } from 'react-native';
 import NormalInput from '../../../global/normal_input';
 import NormalButton from '../../../global/normal_button';
 import { useState } from 'react';
@@ -6,16 +6,20 @@ import useSignUpStore from '../../../../providers/signup_form_store';
 
 type CarInformationProps = {
     goToNextPage: () => void;
+    goToChooseCarPage: () => void;
 };
 
-const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage }) => {
-    const { signUpFormData, setSignUpFormData } = useSignUpStore();
+const CarInformation: React.FC<CarInformationProps> = ({
+    goToNextPage,
+    goToChooseCarPage
+}) => {
+    const { signUpFormData } = useSignUpStore();
     const [error, setError] = useState('');
     const handleNext = () => {
         if (
-            signUpFormData.vehicleModel === '' ||
-            signUpFormData.vehicleModel === '' ||
-            signUpFormData.licensePlate === ''
+            signUpFormData.selectedCarBrand === '' ||
+            signUpFormData.selectedCarSeries === '' ||
+            signUpFormData.selectedCarModel === ''
         ) {
             setError('請確保所有資料都已填寫。');
         } else {
@@ -24,14 +28,14 @@ const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage }) => {
         }
     };
 
-    const vehicleTypeFieldPlaceholder = signUpFormData.vehicleType
-        ? signUpFormData.vehicleType
+    const vehicleTypeFieldPlaceholder = signUpFormData.selectedCarBrand
+        ? signUpFormData.selectedCarBrand
         : '車輛品牌';
-    const vehicleModelFieldPlaceholder = signUpFormData.vehicleModel
-        ? signUpFormData.vehicleModel
+    const vehicleModelFieldPlaceholder = signUpFormData.selectedCarSeries
+        ? signUpFormData.selectedCarSeries
         : '車輛型號';
-    const licensePlateFieldPlaceholder = signUpFormData.licensePlate
-        ? signUpFormData.licensePlate
+    const licensePlateFieldPlaceholder = signUpFormData.selectedCarModel
+        ? signUpFormData.selectedCarModel
         : '車輛號碼';
 
     return (
@@ -45,36 +49,29 @@ const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage }) => {
                         gap: 10
                     }}
                 >
-                    <NormalInput
-                        value={signUpFormData.vehicleType}
-                        placeholder={vehicleTypeFieldPlaceholder}
-                        onChangeText={(vehicleType) => {
-                            setSignUpFormData({
-                                ...signUpFormData,
-                                vehicleType: vehicleType
-                            });
-                        }}
-                    />
-                    <NormalInput
-                        value={signUpFormData.vehicleModel}
-                        placeholder={vehicleModelFieldPlaceholder}
-                        onChangeText={(vehicleModel) => {
-                            setSignUpFormData({
-                                ...signUpFormData,
-                                vehicleModel: vehicleModel
-                            });
-                        }}
-                    />
-                    <NormalInput
-                        value={signUpFormData.licensePlate}
-                        placeholder={licensePlateFieldPlaceholder}
-                        onChangeText={(licensePlate) => {
-                            setSignUpFormData({
-                                ...signUpFormData,
-                                licensePlate: licensePlate
-                            });
-                        }}
-                    />
+                    <Pressable
+                        style={styles.button}
+                        onPress={goToChooseCarPage}
+                    >
+                        <TextInput
+                            style={styles.fakeTextInput}
+                            placeholder={vehicleTypeFieldPlaceholder}
+                            editable={false}
+                            pointerEvents="none"
+                        ></TextInput>
+                        <TextInput
+                            style={styles.fakeTextInput}
+                            placeholder={vehicleModelFieldPlaceholder}
+                            editable={false}
+                            pointerEvents="none"
+                        ></TextInput>
+                        <TextInput
+                            style={styles.fakeTextInput}
+                            placeholder={licensePlateFieldPlaceholder}
+                            editable={false}
+                            pointerEvents="none"
+                        ></TextInput>
+                    </Pressable>
                     <NormalButton
                         title={<Text style={{ color: '#fff' }}>下一步</Text>}
                         onPress={handleNext}
@@ -97,6 +94,15 @@ const styles = StyleSheet.create({
         flex: 1,
         marginHorizontal: 20
     },
+    button: { flex: 1, gap: 10, marginTop: 5 },
+    fakeTextInput: {
+        maxWidth: '100%',
+        fontSize: 16,
+        borderWidth: 1,
+        padding: 20,
+        borderRadius: 12,
+        borderColor: '#bbbbbb'
+    },
     text: {
         fontSize: 20,
         paddingBottom: 10

component/registrationMultiStepForm/formComponent/formPages/chooseCarPage/carBrand.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react';
+import React from 'react';
+import { View, Text, StyleSheet, Pressable, FlatList } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import useSignUpStore from '../../../../../providers/signup_form_store';
+import { ICarBrand } from '../../../../../types/car';
+type ChooseCarBrandProps = {
+    goToCarInformation: () => void;
+    goToChooseCarSeriesPage: () => void;
+};
+
+//hard-coded mock data
+const data: ICarBrand[] = [
+    { imgUrl: 'logo1', name: 'Brand A', id: 'Brand A' },
+    { imgUrl: 'logo2', name: 'Brand B', id: 'Brand B' },
+    { imgUrl: 'logo3', name: 'Brand C', id: 'Brand C' }
+];
+
+const ChooseCarBrand: React.FC<ChooseCarBrandProps> = ({
+    goToCarInformation,
+    goToChooseCarSeriesPage
+}) => {
+    const { signUpFormData, setSignUpFormData } = useSignUpStore();
+    const handleSelectBrand = (brand: string) => {
+        setSignUpFormData({
+            ...signUpFormData,
+            selectedCarBrand: brand
+        });
+        goToChooseCarSeriesPage();
+    };
+
+    return (
+        <View style={styles.mainContainer}>
+            <View style={styles.titleContainer}>
+                <Text style={{ fontSize: 24, fontWeight: '300' }}>
+                    選擇品牌
+                </Text>
+            </View>
+            <View style={styles.paginationContainer}>
+                <Pressable onPress={goToCarInformation}>
+                    <Text style={{ color: '#888888' }}>{`<  上一步`}</Text>
+                </Pressable>
+            </View>
+            <View style={styles.bottomContainer}>
+                <FlashList
+                    data={data}
+                    estimatedItemSize={20}
+                    renderItem={({ item }) => (
+                        <Pressable onPress={() => handleSelectBrand(item.name)}>
+                            <View style={styles.listContainer}>
+                                <View style={styles.logoContainer}>
+                                    <Text
+                                        style={{
+                                            fontSize: 24,
+                                            fontWeight: '200'
+                                        }}
+                                    >
+                                        {item.imgUrl}
+                                    </Text>
+                                </View>
+                                <View style={styles.itemContainer}>
+                                    <Text style={styles.item}>{item.name}</Text>
+                                </View>
+                            </View>
+                        </Pressable>
+                    )}
+                />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    mainContainer: {
+        flex: 1,
+        flexDirection: 'column',
+        backgroundColor: '#FFFFFF'
+    },
+    titleContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+
+    paginationContainer: {
+        flex: 0.3,
+        paddingLeft: '6%',
+        paddingBottom: '5%'
+    },
+    bottomContainer: {
+        flex: 7,
+        minHeight: 2
+    },
+    listContainer: {
+        flex: 0.5,
+        flexDirection: 'row',
+        alignItems: 'center',
+        // borderTopWidth: 1,
+        paddingVertical: 15
+    },
+    logoContainer: {
+        flex: 2,
+        alignItems: 'center'
+    },
+    itemContainer: {
+        flex: 8
+    },
+    item: {
+        paddingLeft: '6%',
+        fontSize: 24,
+        fontWeight: '200'
+    }
+});
+
+export default ChooseCarBrand;
+
+// const styles = StyleSheet.create({
+// 	topContainer: { flex: 1, alignItems: "center", justifyContent: "center", paddingBottom: "20%", paddingTop: "15%" },
+// 	previouspageAndPaginationWrapper: {
+// 		display: "flex",
+// 		width: "100%",
+// 		flexDirection: "row",
+// 		justifyContent: "space-between",
+// 		alignItems: "center",
+// 		paddingHorizontal: 25,
+// 	},
+
+// 	bottomContainer: { flex: 2.5 },
+// 	breakline: { width: 24, height: 1, backgroundColor: "#000000", marginVertical: 17 },
+// 	text: { fontSize: 24, fontWeight: "300" },
+// });

component/registrationMultiStepForm/formComponent/formPages/chooseCarPage/carModel.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable, FlatList } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import useSignUpStore from '../../../../../providers/signup_form_store';
+
+type ChooseCarModelProps = {
+    goToChooseCarSeriesPage: () => void;
+    goToCarInformation: () => void;
+};
+
+//hard-coded mock data
+const fakeData = [
+    { name: 'vehicle 1' },
+    { name: 'vehicle 2' },
+    { name: 'vehicle 3' },
+    { name: 'vehicle 4' }
+];
+
+const ChooseCarModel: React.FC<ChooseCarModelProps> = ({
+    goToChooseCarSeriesPage,
+    goToCarInformation
+}) => {
+    const { signUpFormData, setSignUpFormData } = useSignUpStore();
+
+    const handleSelectModel = (model: string) => {
+        setSignUpFormData({
+            ...signUpFormData,
+            selectedCarModel: model
+        });
+        goToCarInformation();
+    };
+
+    return (
+        <View style={styles.mainContainer}>
+            <View style={styles.titleContainer}>
+                <Text style={{ fontSize: 24, fontWeight: '300' }}>
+                    選擇車系
+                </Text>
+            </View>
+            <View style={styles.paginationContainer}>
+                <Pressable onPress={goToChooseCarSeriesPage}>
+                    <Text style={{ color: '#888888' }}>{`<  上一步`}</Text>
+                </Pressable>
+            </View>
+            <View style={styles.bottomContainer}>
+                <FlashList
+                    data={fakeData}
+                    estimatedItemSize={20}
+                    renderItem={({ item }) => (
+                        <Pressable onPress={() => handleSelectModel(item.name)}>
+                            <View style={styles.listContainer}>
+                                <View style={styles.logoContainer}>
+                                    <Text
+                                        style={{
+                                            fontSize: 24,
+                                            fontWeight: '200'
+                                        }}
+                                    >
+                                        {'logo'}
+                                    </Text>
+                                </View>
+                                <View style={styles.itemContainer}>
+                                    <Text style={styles.item}>{item.name}</Text>
+                                </View>
+                            </View>
+                        </Pressable>
+                    )}
+                />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    mainContainer: {
+        flex: 1,
+        flexDirection: 'column',
+        backgroundColor: '#FFFFFF'
+    },
+    titleContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    paginationContainer: {
+        flex: 0.3,
+        paddingLeft: '6%',
+
+        paddingBottom: '5%'
+    },
+    bottomContainer: {
+        flex: 7
+    },
+    listContainer: {
+        flex: 0.5,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 15
+    },
+    logoContainer: {
+        flex: 2,
+        alignItems: 'center'
+    },
+    itemContainer: {
+        flex: 8
+    },
+    item: {
+        paddingLeft: '6%',
+        fontSize: 24,
+        fontWeight: '200'
+    }
+});
+
+export default ChooseCarModel;

component/registrationMultiStepForm/formComponent/formPages/chooseCarPage/carSeries.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useState } from 'react';
+import React from 'react';
+import { View, Text, StyleSheet, Pressable, FlatList } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import useSignUpStore from '../../../../../providers/signup_form_store';
+import { ICarSeries } from '../../../../../types/car';
+
+type CarBrandSeriesMap = {
+    [brand: string]: ICarSeries[];
+};
+
+//hard-coded mock data
+const vehicles: CarBrandSeriesMap = {
+    'Brand A': [
+        {
+            imgUrl: 'logo1',
+            name: 'Brand A - Series 1',
+            id: 'Brand A - Series 1'
+        },
+        {
+            imgUrl: 'logo2',
+            name: 'Brand A - Series 2',
+            id: 'Brand A - Series 2'
+        },
+        {
+            imgUrl: 'logo3',
+            name: 'Brand A - Series 3',
+            id: 'Brand A - Series 3'
+        },
+        {
+            imgUrl: 'logo4',
+            name: 'Brand A - Series 4',
+            id: 'Brand A - Series 4'
+        }
+    ],
+    'Brand B': [
+        {
+            imgUrl: 'logo1',
+            name: 'Brand B - Series 1',
+            id: 'Brand B - Series 1'
+        },
+        {
+            imgUrl: 'logo2',
+            name: 'Brand B - Series 2',
+            id: 'Brand B - Series 2'
+        },
+        {
+            imgUrl: 'logo3',
+            name: 'Brand B - Series 3',
+            id: 'Brand B - Series 3'
+        },
+        {
+            imgUrl: 'logo4',
+            name: 'Brand B - Series 4',
+            id: 'Brand B - Series 4'
+        }
+    ],
+    'Brand C': [
+        {
+            imgUrl: 'logo1',
+            name: 'Brand C - Series 1',
+            id: 'Brand C - Series 1'
+        },
+        {
+            imgUrl: 'logo2',
+            name: 'Brand C - Series 2',
+            id: 'Brand C - Series 2'
+        },
+        {
+            imgUrl: 'logo3',
+            name: 'Brand C - Series 3',
+            id: 'Brand C - Series 3'
+        },
+        {
+            imgUrl: 'logo4',
+            name: 'Brand C - Series 4',
+            id: 'Brand C - Series 4'
+        }
+    ]
+};
+
+type ChooseCarSeriesProps = {
+    goToChooseCarBrandPage: () => void;
+    goToChooseCarModelPage: () => void;
+};
+
+const ChooseCarSeries: React.FC<ChooseCarSeriesProps> = ({
+    goToChooseCarBrandPage,
+    goToChooseCarModelPage
+}) => {
+    const { signUpFormData, setSignUpFormData } = useSignUpStore();
+    const handleSelectSeries = (brand: string) => {
+        setSignUpFormData({
+            ...signUpFormData,
+            selectedCarSeries: brand
+        });
+        goToChooseCarModelPage();
+    };
+
+    return (
+        <View style={styles.mainContainer}>
+            <View style={styles.titleContainer}>
+                <Text style={{ fontSize: 24, fontWeight: '300' }}>
+                    選擇車系
+                </Text>
+            </View>
+            <View style={styles.paginationContainer}>
+                <Pressable onPress={goToChooseCarBrandPage}>
+                    <Text style={{ color: '#888888' }}>{`<  上一步`}</Text>
+                </Pressable>
+            </View>
+            <View style={styles.bottomContainer}>
+                <FlashList
+                    data={vehicles[signUpFormData.selectedCarBrand]}
+                    estimatedItemSize={20}
+                    renderItem={({ item }) => (
+                        <Pressable
+                            onPress={() => handleSelectSeries(item.name)}
+                        >
+                            <View style={styles.listContainer}>
+                                <View style={styles.logoContainer}>
+                                    <Text
+                                        style={{
+                                            fontSize: 24,
+                                            fontWeight: '200'
+                                        }}
+                                    >
+                                        {'logo'}
+                                    </Text>
+                                </View>
+                                <View style={styles.itemContainer}>
+                                    <Text style={styles.item}>{item.name}</Text>
+                                </View>
+                            </View>
+                        </Pressable>
+                    )}
+                />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    mainContainer: {
+        flex: 1,
+        flexDirection: 'column',
+        backgroundColor: '#FFFFFF'
+    },
+    titleContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+
+    paginationContainer: {
+        flex: 0.3,
+        paddingLeft: '6%',
+
+        paddingBottom: '5%'
+    },
+    bottomContainer: {
+        flex: 7
+    },
+    listContainer: {
+        flex: 0.5,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 15
+    },
+    logoContainer: {
+        flex: 2,
+        alignItems: 'center'
+    },
+    itemContainer: {
+        flex: 8
+    },
+    item: {
+        paddingLeft: '6%',
+        fontSize: 24,
+        fontWeight: '200'
+    }
+});
+
+export default ChooseCarSeries;

types/signUpFormData.d.ts

@@ -7,6 +7,9 @@ export interface SignUpFormData {
     email: string;
     birthDate: string;
     isUberDriver?: boolean | undefined;
+    selectedCarBrand: string;
+    selectedCarSeries: string;
+    selectedCarModel: string;
     vehicleType: string;
     vehicleModel: string;
     licensePlate: string;