crazycharge-app/component/multiStepForm/formComponent/formPages/createWallet.tsx

import { View, Text, StyleSheet } from "react-native";
import { SignUpFormData, HandleSignUpFormDataChange } from "../../../../types/signup";
import NormalInput from "../../../global/normal_input";
import NormalButton from "../../../global/normal_button";
import { useState } from "react";
import SingleSelectButtonGroup from "../../../global/select_button";

type CreateWalletProps = {
	goToNextPage: () => void;
	handleFormDataChange: HandleSignUpFormDataChange;
	formData: SignUpFormData;
};
const creditCard = "信用卡";
const weChatAliPay = "微信支付/支付寶";

const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage, handleFormDataChange, formData }) => {
	const options = [{ label: creditCard }, { label: weChatAliPay }];

	const handleSelectedChange = (selectedLabel: string) => {
		handleFormDataChange("paymentMethod", selectedLabel);
		setError("");
	};

	const handleNext = () => {
		if (formData.paymentMethod === "" || formData.email === "" || formData.address === "") {
			setError("請確保所有資料都已填寫。");
		} else {
			setError("");
			goToNextPage();
		}
	};

	const selectLabelShown = () => {
		if (formData.paymentMethod == null) {
			return null;
		} else if (formData.paymentMethod == creditCard) {
			return creditCard;
		} else if (formData.paymentMethod == weChatAliPay) {
			return weChatAliPay;
		}
	};

	const [error, setError] = useState("");
	return (
		<>
			<View style={styles.container}>
				<Text style={styles.text}>請填妥以下資料</Text>
				<View
					style={{
						display: "flex",
						flexDirection: "column",
						gap: 10,
					}}
				>
					<NormalInput
						placeholder={"電子郵件"}
						onChangeText={(email) => handleFormDataChange("email", email)}
					/>
					<NormalInput
						placeholder="地址"
						onChangeText={(address) => handleFormDataChange("address", address)}
					/>
					<SingleSelectButtonGroup
						options={options}
						onSelectionChange={handleSelectedChange}
						shouldShowRedOutline={error ? true : false}
						selectedOption={selectLabelShown()}
					/>
					<NormalButton
						title={<Text style={{ color: "#fff" }}>完成</Text>}
						onPress={handleNext}
						extendedStyle={{}}
					/>
					<NormalButton
						title={<Text style={{ color: "#888888" }}>略過</Text>}
						onPress={goToNextPage}
						extendedStyle={{ backgroundColor: "transparent" }}
					/>
				</View>
				{error && <Text style={styles.errorMessage}>{error}</Text>}
			</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,
	},
});
export default CreateWallet;