Merge pull request #56464 from mkzie2/mkzie2-issue/55688

cead22 · web-flow · commit a1362bf3a2ec · 2025-03-20T13:01:02.000-07:00
migrate AccountType step to FormProvider
diff --git a/src/components/ValuePicker/ValueSelectionList.tsx b/src/components/ValuePicker/ValueSelectionList.tsx
@@ -0,0 +1,27 @@
+import React, {useMemo} from 'react';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/RadioListItem';
+import type {ValueSelectionListProps} from './types';
+
+function ValueSelectionList({items = [], selectedItem, onItemSelected, shouldShowTooltips = true}: ValueSelectionListProps) {
+    const sections = useMemo(
+        () => [{data: items.map((item) => ({value: item.value, alternateText: item.description, text: item.label ?? '', isSelected: item === selectedItem, keyForList: item.value ?? ''}))}],
+        [items, selectedItem],
+    );
+
+    return (
+        <SelectionList
+            sections={sections}
+            onSelectRow={(item) => onItemSelected?.(item)}
+            initiallyFocusedOptionKey={selectedItem?.value}
+            shouldStopPropagation
+            shouldShowTooltips={shouldShowTooltips}
+            shouldUpdateFocusedIndex
+            ListItem={RadioListItem}
+        />
+    );
+}
+
+ValueSelectionList.displayName = 'ValueSelectionList';
+
+export default ValueSelectionList;
diff --git a/src/components/ValuePicker/ValueSelectorModal.tsx b/src/components/ValuePicker/ValueSelectorModal.tsx
@@ -1,12 +1,11 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/RadioListItem';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {ValueSelectorModalProps} from './types';
+import ValueSelectionList from './ValueSelectionList';
 
 function ValueSelectorModal({
     items = [],
@@ -21,11 +20,6 @@ function ValueSelectorModal({
 }: ValueSelectorModalProps) {
     const styles = useThemeStyles();
 
-    const sections = useMemo(
-        () => [{data: items.map((item) => ({value: item.value, alternateText: item.description, text: item.label ?? '', isSelected: item === selectedItem, keyForList: item.value ?? ''}))}],
-        [items, selectedItem],
-    );
-
     return (
         <Modal
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
@@ -47,13 +41,11 @@ function ValueSelectorModal({
                     title={label}
                     onBackButtonPress={onClose}
                 />
-                <SelectionList
-                    sections={sections}
-                    onSelectRow={(item) => onItemSelected?.(item)}
-                    initiallyFocusedOptionKey={selectedItem?.value}
-                    shouldStopPropagation
+                <ValueSelectionList
+                    items={items}
+                    selectedItem={selectedItem}
+                    onItemSelected={onItemSelected}
                     shouldShowTooltips={shouldShowTooltips}
-                    ListItem={RadioListItem}
                 />
             </ScreenWrapper>
         </Modal>
diff --git a/src/components/ValuePicker/index.tsx b/src/components/ValuePicker/index.tsx
@@ -5,9 +5,13 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import type {ValuePickerItem, ValuePickerProps} from './types';
+import ValueSelectionList from './ValueSelectionList';
 import ValueSelectorModal from './ValueSelectorModal';
 
-function ValuePicker({value, label, items, placeholder = '', errorText = '', onInputChange, furtherDetails, shouldShowTooltips = true}: ValuePickerProps, forwardedRef: ForwardedRef<View>) {
+function ValuePicker(
+    {value, label, items, placeholder = '', errorText = '', onInputChange, furtherDetails, shouldShowTooltips = true, shouldShowModal = true}: ValuePickerProps,
+    forwardedRef: ForwardedRef<View>,
+) {
     const [isPickerVisible, setIsPickerVisible] = useState(false);
 
     const showPickerModal = () => {
@@ -29,28 +33,39 @@ function ValuePicker({value, label, items, placeholder = '', errorText = '', onI
 
     return (
         <View>
-            <MenuItemWithTopDescription
-                ref={forwardedRef}
-                shouldShowRightIcon
-                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                title={selectedItem?.label || placeholder || ''}
-                description={label}
-                onPress={showPickerModal}
-                furtherDetails={furtherDetails}
-                brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
-                errorText={errorText}
-            />
-            <ValueSelectorModal
-                isVisible={isPickerVisible}
-                label={label}
-                selectedItem={selectedItem}
-                items={items}
-                onClose={hidePickerModal}
-                onItemSelected={updateInput}
-                shouldShowTooltips={shouldShowTooltips}
-                onBackdropPress={Navigation.dismissModal}
-                shouldEnableKeyboardAvoidingView={false}
-            />
+            {shouldShowModal ? (
+                <>
+                    <MenuItemWithTopDescription
+                        ref={forwardedRef}
+                        shouldShowRightIcon
+                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                        title={selectedItem?.label || placeholder || ''}
+                        description={label}
+                        onPress={showPickerModal}
+                        furtherDetails={furtherDetails}
+                        brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                        errorText={errorText}
+                    />
+                    <ValueSelectorModal
+                        isVisible={isPickerVisible}
+                        label={label}
+                        selectedItem={selectedItem}
+                        items={items}
+                        onClose={hidePickerModal}
+                        onItemSelected={updateInput}
+                        shouldShowTooltips={shouldShowTooltips}
+                        onBackdropPress={Navigation.dismissModal}
+                        shouldEnableKeyboardAvoidingView={false}
+                    />
+                </>
+            ) : (
+                <ValueSelectionList
+                    items={items}
+                    selectedItem={selectedItem}
+                    onItemSelected={updateInput}
+                    shouldShowTooltips={shouldShowTooltips}
+                />
+            )}
         </View>
     );
 }
diff --git a/src/components/ValuePicker/types.ts b/src/components/ValuePicker/types.ts
@@ -39,6 +39,8 @@ type ValueSelectorModalProps = {
     shouldEnableKeyboardAvoidingView?: boolean;
 };
 
+type ValueSelectionListProps = Pick<ValueSelectorModalProps, 'items' | 'selectedItem' | 'onItemSelected' | 'shouldShowTooltips'>;
+
 type ValuePickerProps = {
     /** Item to display */
     value?: string;
@@ -63,6 +65,9 @@ type ValuePickerProps = {
 
     /** Whether to show the tooltip text */
     shouldShowTooltips?: boolean;
+
+    /** Whether to show the selector modal */
+    shouldShowModal?: boolean;
 };
 
-export type {ValuePickerItem, ValueSelectorModalProps, ValuePickerProps, ValuePickerListItem};
+export type {ValuePickerItem, ValueSelectorModalProps, ValuePickerProps, ValuePickerListItem, ValueSelectionListProps};
diff --git a/src/libs/actions/FormActions.ts b/src/libs/actions/FormActions.ts
@@ -23,8 +23,8 @@ function clearErrorFields(formID: OnyxFormKey) {
     Onyx.merge(formID, {errorFields: null});
 }
 
-function setDraftValues(formID: OnyxFormKey, draftValues: NullishDeep<OnyxValue<OnyxFormDraftKey>>) {
-    Onyx.merge(`${formID}Draft`, draftValues ?? null);
+function setDraftValues(formID: OnyxFormKey, draftValues: NullishDeep<OnyxValue<OnyxFormDraftKey>>): Promise<void> {
+    return Onyx.merge(`${formID}Draft`, draftValues ?? null);
 }
 
 function clearDraftValues(formID: OnyxFormKey) {
diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx
@@ -1,95 +1,84 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useRef} 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, FormRef} 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 {setDraftValues} from '@libs/actions/FormActions';
 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<TranslationPaths | undefined>(undefined);
+    const formRef = useRef<FormRef>(null);
 
     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<typeof ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM> => {
+            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(
         () =>
             (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 (
-            <FormAlertWithSubmitButton
-                message={error ? translate(error) : ''}
-                isAlertVisible={!!error}
-                buttonText={buttonText}
-                onSubmit={onAccountTypeSelected}
-                containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
-                enabledWhenOffline
-            />
-        );
-    }, [error, isEditing, onAccountTypeSelected, styles.flexBasisAuto, styles.flexGrow0, styles.flexReset, styles.flexShrink0, translate]);
-
     return (
-        <>
+        <FormProvider
+            formID={ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM}
+            submitButtonText={translate('common.confirm')}
+            onSubmit={handleSubmit}
+            validate={validate}
+            style={[styles.flexGrow1, styles.mt3]}
+            submitButtonStyles={[styles.ph5, styles.mb0]}
+            enabledWhenOffline
+            ref={formRef}
+            isSubmitButtonVisible={!isEditing}
+        >
             <View style={styles.ph5}>
                 <Text style={[styles.textHeadlineLineHeightXXL, styles.mb6]}>{translate('addPersonalBankAccount.accountTypeStepHeader')}</Text>
             </View>
-            <SelectionList
-                sections={[{data: options}]}
-                onSelectRow={onSelectionChange}
-                ListItem={RadioListItem}
-                initiallyFocusedOptionKey={currentAccountType}
-                footerContent={button}
-                shouldSingleExecuteRowSelect
-                shouldStopPropagation
-                shouldUseDynamicMaxToRenderPerBatch
-                shouldUpdateFocusedIndex
+            <InputWrapper
+                InputComponent={ValuePicker}
+                inputID={fieldData.id}
+                label={fieldData.label}
+                items={options}
+                shouldSaveDraft={!isEditing}
+                shouldShowModal={false}
+                onValueChange={(value) => {
+                    if (!isEditing) {
+                        return;
+                    }
+                    setDraftValues(ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM, {[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY]: value}).then(() => {
+                        onNext();
+                    });
+                }}
             />
-        </>
+        </FormProvider>
     );
 }
 

Original file line number	Diff line number	Diff line change
`@@ -23,8 +23,8 @@ function clearErrorFields(formID: OnyxFormKey) {`
`23`	`23`	`Onyx.merge(formID, {errorFields: null});`
`24`	`24`	`}`
`25`	`25`
`26`		`-function setDraftValues(formID: OnyxFormKey, draftValues: NullishDeep<OnyxValue<OnyxFormDraftKey>>) {`
`27`		- Onyx.merge(`${formID}Draft`, draftValues ?? null);
	`26`	`+function setDraftValues(formID: OnyxFormKey, draftValues: NullishDeep<OnyxValue<OnyxFormDraftKey>>): Promise<void> {`
	`27`	+ return Onyx.merge(`${formID}Draft`, draftValues ?? null);
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`function clearDraftValues(formID: OnyxFormKey) {`