crazycharge-app/component/registrationMultiStepForm/formComponent/formPages/verification.tsx

import { View, Text, StyleSheet, TextInput, Pressable } from "react-native";
import { useState } from "react";
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>>;
};

const Verification: React.FC<VerificationProps> = ({ setScreen }) => {
	const { signUpFormData, setSignUpFormData } = useSignUpStore();
	const [error, setError] = useState("");
	const [otp, setOtp] = useState("");
	const [canSendOtp, setCanSendOtp] = useState(true);
	const [lockPhoneInput, setLockPhoneInput] = useState(false);

	const handleSignUpPhoneChange = (phone: string) => {
		setSignUpFormData({ phone });
		if (signUpFormData.phone.length + 1 === 8) {
			setSignUpFormData({ phoneVerificationStatus: true });
		} else {
			setSignUpFormData({ phoneVerificationStatus: false });
		}
	};
	const handleVerification = () => {
		if (signUpFormData.phone === "" || otp === "") {
			setError("請確保所有資料都已填寫。");
		} else if (signUpFormData.phoneVerificationStatus === false) {
			setError("請確保電話號碼長度正確");
		} else {
			setError("");
			setScreen((currentScreenNumber) => currentScreenNumber + 1);
		}
	};
	const handleSubmitOtp = () => {
		if (signUpFormData.phoneVerificationStatus) {
			if (canSendOtp) {
				setCanSendOtp(false);
				setLockPhoneInput(true);
				console.log(lockPhoneInput);
				//can only request otp every 60 seconds
				setTimeout(() => {
					setCanSendOtp(true);
					setLockPhoneInput(false);
				}, 60000);
				setError("");
			} else {
				setError("請等待一分鐘後再重新發送。");
			}
		} else {
			setError("請確保所有資料都已填寫。");
		}
	};

	const handleChangePhoneNumber = () => {
		setLockPhoneInput(false);
	};

	const otpButtonText = lockPhoneInput ? (
		<Text style={{ color: "#fff" }}>重新發送</Text>
	) : (
		<Text style={{ color: "#fff" }}>發送</Text>
	);

	const phoneFieldPlaceholder = signUpFormData.phone ? signUpFormData.phone : "輸入電話號碼";

	return (
		<>
			<View style={styles.container}>
				<Text style={styles.text}>請驗證您的電話號碼</Text>
				<PhoneInput
					value={signUpFormData.phone}
					onChangeText={handleSignUpPhoneChange}
					placeholder={phoneFieldPlaceholder}
					editable={!lockPhoneInput}
					extendedStyle={{ opacity: !lockPhoneInput ? 1 : 0.5 }}
				/>

				<View
					style={{
						display: "flex",
						flexDirection: "row",
						paddingVertical: 10,
						gap: 10,
					}}
				>
					<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>}
					onPress={() => {
						handleVerification();
					}}
					extendedStyle={{}}
				/>
				{error && <Text style={styles.errorMessage}>{error}</Text>}
				<Pressable onPress={handleChangePhoneNumber}>
					<Text style={[styles.footer, { opacity: lockPhoneInput ? 1 : 0 }]}>修改電話號碼</Text>
				</Pressable>
			</View>
		</>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		marginHorizontal: 20,
	},
	text: {
		fontSize: 20,
		paddingBottom: 10,
	},
	errorMessage: {
		fontSize: 14,
		color: "#ff0033",
		fontWeight: "400",
		marginLeft: 10,
		marginTop: 10,
	},
	footer: { color: "#02677D", fontSize: 16, paddingVertical: 10 },
});
export default Verification;