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

import { View, Text, StyleSheet } from 'react-native';
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';
import PhoneInput from '../../../global/phone_input';
import { SignUp, authenticationService } from '../../../../service/authService';
import { CustomerData } from '../../../../types/signUpFormData';

type CreateWalletProps = {
    goToNextPage: () => void;
};
const creditCard = '信用卡';
const weChatAliPay = '微信支付/支付寶';

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

    const handleSelectedChange = (selectedLabel: string) => {
        setSignUpFormData({ ...signUpFormData, paymentMethod: selectedLabel });
        setError('');
    };

    const handleNextWithSkip = () => {
        authenticationService.signUp(customerData);
        goToNextPage();
    };

    const handleNext = () => {
        if (
            signUpFormData.paymentMethod === '' ||
            signUpFormData.phone === '' ||
            signUpFormData.address === ''
        ) {
            setError('請確保所有資料都已填寫。');
        } else {
            setError('');
            authenticationService.signUp(customerData);
            // SignUp(customerData);
            goToNextPage();
        }
    };

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

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

    const [error, setError] = useState('');

    let customerData: CustomerData;
    if (signUpFormData.selectedCarModel === '') {
        // Empty SelectedCarModel means user has clicked "略過"
        customerData = {
            customerBaseInfo: {
                name: signUpFormData.nickName.trim(),
                email: signUpFormData.email,
                password: signUpFormData.password,
                gender: signUpFormData.gender,
                birthday: signUpFormData.birthDate,
                address: signUpFormData.address,
                phone: signUpFormData.phone,
                isUberDriver: signUpFormData.isUberDriver
            }
        };
    } else {
        customerData = {
            customerBaseInfo: {
                name: signUpFormData.nickName.trim(),
                email: signUpFormData.email,
                password: signUpFormData.password,
                gender: signUpFormData.gender,
                birthday: signUpFormData.birthDate,
                address: signUpFormData.address,
                phone: signUpFormData.phone,
                isUberDriver: signUpFormData.isUberDriver
            },
            customerCarInfo: {
                type_id: signUpFormData.selectedCarModel,
                brand_id: signUpFormData.selectedCarBrand,
                licensePlate: 'placeholder'
            }
        };
    }

    return (
        <>
            <View style={styles.container}>
                <Text style={styles.text}>請填妥以下資料</Text>
                <View
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <PhoneInput
                        value={signUpFormData.phone}
                        onChangeText={(phone) => {
                            setSignUpFormData({
                                ...signUpFormData,
                                phone: phone
                            });
                        }}
                        placeholder={phoneFieldPlaceholder}
                    />

                    <NormalInput
                        placeholder="地址"
                        onChangeText={(address) => {
                            setSignUpFormData({
                                ...signUpFormData,
                                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={handleNextWithSkip}
                        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;