a

component/multiStepForm/formComponent/form.tsx

@@ -16,7 +16,7 @@ type FormProps = {
 	setFormData: React.Dispatch<React.SetStateAction<SignUpFormData>>;
 };
 const Form: React.FC<FormProps> = ({ formData, setFormData }) => {
-	const [screen, setScreen] = useState<number>(0);
+	const [screen, setScreen] = useState<number>(4);
 	const FormTitle = [
 		"",
 		"註冊 - 電話驗證",

component/multiStepForm/formComponent/formPages/basicInformation.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import DateModal from "../../../global/date_input";
 import NormalButton from "../../../global/normal_button";
 import { SignUpFormData, HandleSignUpFormDataChange } from "../../../../types/signup";
+import useSignUpStore from "../../../../providers/signup_form_store";
 
 type basicInformationProps = {
 	goToNextPage: () => void;
@@ -12,9 +13,10 @@ type basicInformationProps = {
 };
 
 const BasicInformation: React.FC<basicInformationProps> = ({ handleFormDataChange, goToNextPage, formData }) => {
+	const { signUpFormData, setSignUpFormData } = useSignUpStore();
 	const [error, setError] = useState("");
 	const handleNext = () => {
-		if (formData.name === "" || formData.password === "" || formData.birthDate === "") {
+		if (signUpFormData.name === "" || signUpFormData.password === "" || signUpFormData.birthDate === "") {
 			setError("請確保所有資料都已填寫。");
 		} else {
 			setError("");
@@ -33,12 +35,28 @@ const BasicInformation: React.FC<basicInformationProps> = ({ handleFormDataChang
 						gap: 10,
 					}}
 				>
-					<NormalInput placeholder="姓名" onChangeText={(text) => handleFormDataChange("name", text)} />
+					{/* <NormalInput placeholder="姓名" onChangeText={(text) => handleFormDataChange("name", text)} /> */}
 					<NormalInput
+						placeholder="姓名"
+						onChangeText={(text) => {
+							setSignUpFormData({ ...signUpFormData, name: text });
+						}}
+					/>
+
+					{/* <NormalInput
 						placeholder="帳戶密碼"
 						onChangeText={(text) => handleFormDataChange("password", text)}
 						secureTextEntry={true}
+					/> */}
+
+					<NormalInput
+						placeholder="帳戶密碼"
+						onChangeText={(text) => {
+							setSignUpFormData({ ...signUpFormData, password: text });
+						}}
+						secureTextEntry={true}
 					/>
+
 					<View style={{ display: "flex", flexDirection: "row", gap: 10 }}>
 						{/* await YoYo's code review for gender */}
 						<NormalInput
@@ -46,11 +64,17 @@ const BasicInformation: React.FC<basicInformationProps> = ({ handleFormDataChang
 							onChangeText={(t) => console.log(t)}
 							extendedStyle={{ width: "50%" }}
 						/>
-						<DateModal
+						{/* <DateModal
 							placeholder={formData.birthDate ? formData.birthDate : "DD/MM/YY"}
 							onDateChange={(date) => {
 								handleFormDataChange("birthDate", date);
 							}}
+						/> */}
+						<DateModal
+							placeholder={signUpFormData.birthDate ? signUpFormData.birthDate : "DD/MM/YY"}
+							onDateChange={(date) => {
+								setSignUpFormData({ ...signUpFormData, birthDate: date });
+							}}
 						/>
 					</View>
 					<NormalButton

component/multiStepForm/formComponent/formPages/carInformation.tsx

@@ -3,6 +3,7 @@ import { SignUpFormData, HandleSignUpFormDataChange } from "../../../../types/si
 import NormalInput from "../../../global/normal_input";
 import NormalButton from "../../../global/normal_button";
 import { useState } from "react";
+import useSignUpStore from "../../../../providers/signup_form_store";
 
 type CarInformationProps = {
 	goToNextPage: () => void;
@@ -11,9 +12,14 @@ type CarInformationProps = {
 };
 
 const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage, handleFormDataChange, formData }) => {
+	const { signUpFormData, setSignUpFormData } = useSignUpStore();
 	const [error, setError] = useState("");
 	const handleNext = () => {
-		if (formData.vehicleModel === "" || formData.vehicleModel === "" || formData.licensePlate === "") {
+		if (
+			signUpFormData.vehicleModel === "" ||
+			signUpFormData.vehicleModel === "" ||
+			signUpFormData.licensePlate === ""
+		) {
 			setError("請確保所有資料都已填寫。");
 		} else {
 			setError("");
@@ -34,15 +40,21 @@ const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage, handleFor
 				>
 					<NormalInput
 						placeholder={"車輛品牌"}
-						onChangeText={(vehicleType) => handleFormDataChange("vehicleType", vehicleType)}
+						onChangeText={(vehicleType) => {
+							setSignUpFormData({ ...signUpFormData, vehicleType: vehicleType });
+						}}
 					/>
 					<NormalInput
 						placeholder={"車輛型號"}
-						onChangeText={(vehicleModel) => handleFormDataChange("vehicleModel", vehicleModel)}
+						onChangeText={(vehicleModel) => {
+							setSignUpFormData({ ...signUpFormData, vehicleModel: vehicleModel });
+						}}
 					/>
 					<NormalInput
 						placeholder="車輛號碼"
-						onChangeText={(licensePlate) => handleFormDataChange("licensePlate", licensePlate)}
+						onChangeText={(licensePlate) => {
+							setSignUpFormData({ ...signUpFormData, licensePlate: licensePlate });
+						}}
 					/>
 					<NormalButton
 						title={<Text style={{ color: "#fff" }}>下一步</Text>}

component/multiStepForm/formComponent/formPages/createWallet.tsx

@@ -4,6 +4,7 @@ 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";
 
 type CreateWalletProps = {
 	goToNextPage: () => void;
@@ -15,6 +16,7 @@ const weChatAliPay = "微信支付/支付寶";
 
 const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage, handleFormDataChange, formData }) => {
 	const options = [{ label: creditCard }, { label: weChatAliPay }];
+	const { signUpFormData, setSignUpFormData } = useSignUpStore();
 
 	const handleSelectedChange = (selectedLabel: string) => {
 		handleFormDataChange("paymentMethod", selectedLabel);
@@ -22,7 +24,7 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage, handleFormDat
 	};
 
 	const handleNext = () => {
-		if (formData.paymentMethod === "" || formData.email === "" || formData.address === "") {
+		if (signUpFormData.paymentMethod === "" || signUpFormData.email === "" || signUpFormData.address === "") {
 			setError("請確保所有資料都已填寫。");
 		} else {
 			setError("");
@@ -31,11 +33,11 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage, handleFormDat
 	};
 
 	const selectLabelShown = () => {
-		if (formData.paymentMethod == null) {
+		if (signUpFormData.paymentMethod == null) {
 			return null;
-		} else if (formData.paymentMethod == creditCard) {
+		} else if (signUpFormData.paymentMethod == creditCard) {
 			return creditCard;
-		} else if (formData.paymentMethod == weChatAliPay) {
+		} else if (signUpFormData.paymentMethod == weChatAliPay) {
 			return weChatAliPay;
 		}
 	};
@@ -54,7 +56,10 @@ const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage, handleFormDat
 				>
 					<NormalInput
 						placeholder={"電子郵件"}
-						onChangeText={(email) => handleFormDataChange("email", email)}
+						// onChangeText={(email) => handleFormDataChange("email", email)}
+						onChangeText={(email) => {
+							setSignUpFormData( ...signUpFormData, email: email )
+						}}
 					/>
 					<NormalInput
 						placeholder="地址"

component/multiStepForm/formComponent/formPages/uberDriver.tsx

@@ -3,6 +3,7 @@ import { SignUpFormData, HandleSignUpFormDataChange } from "../../../../types/si
 import NormalButton from "../../../global/normal_button";
 import { useState } from "react";
 import SingleSelectButtonGroup from "../../../global/select_button";
+import useSignUpStore from "../../../../providers/signup_form_store";
 
 type UberDriverProps = {
 	goToNextPage: () => void;
@@ -11,9 +12,11 @@ type UberDriverProps = {
 };
 
 const UberDriver: React.FC<UberDriverProps> = ({ formData, goToNextPage, handleFormDataChange }) => {
+	const { signUpFormData, setSignUpFormData } = useSignUpStore();
+
 	const [error, setError] = useState("");
 	const handleNext = () => {
-		if (formData.isUberDriver == undefined) {
+		if (signUpFormData.isUberDriver == undefined) {
 			setError("請確保所有資料都已填寫。");
 		} else {
 			setError("");
@@ -26,9 +29,9 @@ const UberDriver: React.FC<UberDriverProps> = ({ formData, goToNextPage, handleF
 	};
 
 	const selectLabelShown = () => {
-		if (formData.isUberDriver == undefined) {
+		if (signUpFormData.isUberDriver == undefined) {
 			return null;
-		} else if (formData.isUberDriver == true) {
+		} else if (signUpFormData.isUberDriver == true) {
 			return "是（可享有獨家優惠)";
 		} else {
 			return "否";
@@ -42,7 +45,12 @@ const UberDriver: React.FC<UberDriverProps> = ({ formData, goToNextPage, handleF
 				<Text style={styles.text}>請問您是Uber Driver嗎?</Text>
 				<SingleSelectButtonGroup
 					options={options}
-					onSelectionChange={handleSelectedChange}
+					// onSelectionChange={handleSelectedChange}
+					onSelectionChange={(label) => {
+						const convertLabelToBoolean =
+							label === "是（可享有獨家優惠)" ? true : label === "否" ? false : undefined;
+						setSignUpFormData({ ...signUpFormData, isUberDriver: convertLabelToBoolean });
+					}}
 					shouldShowRedOutline={error ? true : false}
 					selectedOption={selectLabelShown()}
 				/>

component/multiStepForm/formComponent/formPages/verification.tsx

@@ -4,6 +4,7 @@ import { SignUpFormData, HandleSignUpFormDataChange } from "../../../../types/si
 import PhoneInput from "../../../global/phone_input";
 import NumberInput from "../../../global/number_input";
 import NormalButton from "../../../global/normal_button";
+import useSignUpStore from "../../../../providers/signup_form_store";
 
 type VerificationProps = {
 	setScreen: React.Dispatch<React.SetStateAction<number>>;
@@ -55,7 +56,6 @@ const Verification: React.FC<VerificationProps> = ({ setScreen, formData, handle
 	) : (
 		<Text style={{ color: "#fff" }}>發送</Text>
 	);
-
 	return (
 		<>
 			<View style={styles.container}>
@@ -66,6 +66,7 @@ const Verification: React.FC<VerificationProps> = ({ setScreen, formData, handle
 					editable={!lockPhoneInput}
 					extendedStyle={{ opacity: !lockPhoneInput ? 1 : 0.5 }}
 				/>
+
 				<View
 					style={{
 						display: "flex",

component/multiStepForm/multi_step_form.tsx

@@ -3,6 +3,7 @@ import { StatusBar } from "expo-status-bar";
 import Form from "./formComponent/form";
 import { useEffect, useState } from "react";
 import { SignUpFormData } from "../../types/signup";
+import useSignUpStore from "../../providers/signup_form_store";
 
 const MultiStepForm: React.FC = () => {
 	const [formData, setFormData] = useState<SignUpFormData>({
@@ -21,9 +22,11 @@ const MultiStepForm: React.FC = () => {
 	});
 
 	//logging to check if parent component can successfully receive user input in the multi-step form
+
+	const { signUpFormData } = useSignUpStore();
 	useEffect(() => {
-		console.log(formData);
-	}, [formData]);
+		console.log("Current Zustand Store:", signUpFormData);
+	}, [signUpFormData]);
 
 	return (
 		<View style={styles.container}>

providers/signup_form_store.tsx

@@ -1,8 +1,28 @@
 import { create } from "zustand";
-import { ISignUpStore } from "../types/signup_store";
+import { SignUpFormState } from "../types/signUpFormData";
 
-const useSignUpStore = create<ISignUpStore>((set) => ({
-    
+const useSignUpStore = create<SignUpFormState>((set) => ({
+	signUpFormData: {
+		phone: "",
+		phoneVerificationStatus: false,
+		name: "",
+		password: "",
+		email: "",
+		birthDate: "",
+		isUberDriver: undefined,
+		vehicleType: "",
+		vehicleModel: "",
+		licensePlate: "",
+		address: "",
+		paymentMethod: "",
+	},
+	setSignUpFormData: (newFormData) =>
+		set((state) => ({
+			signUpFormData: {
+				...state.signUpFormData,
+				...newFormData,
+			},
+		})),
 }));
 
 export default useSignUpStore;

types/signUpFormData.ts

@@ -0,0 +1,19 @@
+export interface SignUpFormData {
+	phone: string;
+	phoneVerificationStatus: boolean;
+	name: string;
+	password: string;
+	email: string;
+	birthDate: string;
+	isUberDriver?: boolean | undefined;
+	vehicleType: string;
+	vehicleModel: string;
+	licensePlate: string;
+	address: string;
+	paymentMethod: string;
+}
+
+export interface SignUpFormState {
+	signUpFormData: SignUpFormData;
+	setSignUpFormData: (newFormData: Partial<SignUpFormData>) => void;
+}