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

import { View, Text, StyleSheet, ActivityIndicator } 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 { authenticationService } from '../../../../service/authService';
import { Alert } from 'react-native';
type CreateWalletProps = {
    goToNextPage: () => void;
};
const creditCard = '信用卡';
const weChatAliPay = '微信支付/支付寶';

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

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

    const handleNextWithSkip = async () => {
        setIsLoading2(true);
        try {
            const result = await authenticationService.signUp(customerData);
            if (result === true) {
                goToNextPage();
            } else {
                Alert.alert('註冊錯誤', '註冊過程中出現錯誤，請稍後再試');
            }
        } catch (error) {
            console.error('Sign up error:', error);
            setError('註冊過程中出現錯誤，請稍後再試。');
        } finally {
            setIsLoading2(false);
        }
    };

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

            setIsLoading(true);
            try {
                const result = await authenticationService.signUp(customerData);
                if (result === true) {
                    goToNextPage();
                } else {
                    Alert.alert('註冊錯誤', '註冊過程中出現錯誤，請稍後再試');
                }
            } catch (error) {
                setError('註冊過程中出現錯誤，請稍後再試。');
                console.error('Sign up error:', error);
            } finally {
                setIsLoading(false);
            }
        }
    };

    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 = {
        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: signUpFormData.licensePlate
        }
    };

    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}
                        selectedOption={selectLabelShown()}
                    />
                </View>
                {error && <Text style={styles.errorMessage}>{error}</Text>}
                <View>
                    <NormalButton
                        title={
                            isLoading ? (
                                <ActivityIndicator />
                            ) : (
                                <Text style={{ color: '#fff' }}>完成</Text>
                            )
                        }
                        onPress={handleNext}
                        extendedStyle={{}}
                    />
                    <NormalButton
                        title={
                            isLoading2 ? (
                                <ActivityIndicator />
                            ) : (
                                <Text style={{ color: '#888888' }}>略過</Text>
                            )
                        }
                        onPress={handleNextWithSkip}
                        extendedStyle={{ backgroundColor: 'transparent' }}
                        buttonPressedStyle={{ backgroundColor: 'transparent' }}
                    />
                </View>
            </View>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginHorizontal: 20
    },
    text: {
        fontSize: 20,
        paddingBottom: 10
    },
    errorMessage: {
        fontSize: 14,
        color: '#ff0033',
        fontWeight: '400',
        marginLeft: 10,
        marginBottom: 10
    }
});
export default CreateWallet;