diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx index 564c41e4d0f5..de8c68e98d42 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx @@ -1,48 +1,37 @@ -import React, {useCallback, useMemo, useState} from 'react'; +import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; -import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; -import SelectionList from '@components/SelectionList'; -import RadioListItem from '@components/SelectionList/RadioListItem'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; +import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; +import ValuePicker from '@components/ValuePicker'; +import useInternationalBankAccountFormSubmit from '@hooks/useInternationalBankAccountFormSubmit'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {Option} from '@libs/searchOptions'; import type {CustomSubStepProps} from '@pages/settings/Wallet/InternationalDepositAccount/types'; -import {setDraftValues} from '@userActions/FormActions'; import Text from '@src/components/Text'; import CONST from '@src/CONST'; -import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; -function AccountType({isEditing, onNext, formValues, fieldsMap}: CustomSubStepProps) { +function AccountType({isEditing, onNext, fieldsMap}: CustomSubStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [currentAccountType, setCurrentAccountType] = useState(formValues[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY]); - const [error, setError] = useState(undefined); const fieldData = fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE]?.[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY] ?? {}; - const onAccountTypeSelected = useCallback(() => { - setError(undefined); - if (isEditing && formValues[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY] === currentAccountType) { - onNext(); - return; - } - if (fieldData.isRequired && !currentAccountType) { - setError('common.error.pleaseSelectOne'); - return; - } - setDraftValues(ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM, {[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY]: currentAccountType}); - onNext(); - }, [currentAccountType, fieldData.isRequired, formValues, isEditing, onNext]); + const handleSubmit = useInternationalBankAccountFormSubmit({ + fieldIds: Object.keys(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE]), + onNext, + shouldSaveDraft: isEditing, + }); - const onSelectionChange = useCallback( - (country: Option) => { - if (!isEditing) { - setDraftValues(ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM, {[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY]: country.value}); + const validate = useCallback( + (values: FormOnyxValues): FormInputErrors => { + if (!fieldData.isRequired || values[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY]) { + return {}; } - setCurrentAccountType(country.value); + return {[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY]: translate('common.error.pleaseSelectOne')}; }, - [isEditing], + [fieldData.isRequired, translate], ); const options = useMemo( @@ -50,46 +39,33 @@ function AccountType({isEditing, onNext, formValues, fieldsMap}: CustomSubStepPr (fieldData.valueSet ?? []).map((item) => { return { value: item.id, - keyForList: item.id, - text: item.text, - isSelected: currentAccountType === item.id, - searchValue: item.text, + label: item.text, }; }), - [fieldData.valueSet, currentAccountType], + [fieldData.valueSet], ); - const button = useMemo(() => { - const buttonText = isEditing ? translate('common.confirm') : translate('common.next'); - return ( - - ); - }, [error, isEditing, onAccountTypeSelected, styles.flexBasisAuto, styles.flexGrow0, styles.flexReset, styles.flexShrink0, translate]); - return ( - <> + {translate('addPersonalBankAccount.accountTypeStepHeader')} - - + ); }