Merge pull request #52322 from shubham1206agra/intl-bank-account

Implemented International Bank Account flow

Author: MonilBhavsar

src/CONST.ts

@@ -939,6 +939,7 @@ const CONST = {
     CONFIGURE_REIMBURSEMENT_SETTINGS_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/workspaces/Configure-Reimbursement-Settings',
     COPILOT_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/copilots-and-delegates/Assign-or-remove-a-Copilot',
     DELAYED_SUBMISSION_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/reports/Automatically-submit-employee-reports',
+    ENCRYPTION_AND_SECURITY_HELP_URL: 'https://help.expensify.com/articles/new-expensify/settings/Encryption-and-Data-Security',
     PLAN_TYPES_AND_PRICING_HELP_URL: 'https://help.expensify.com/articles/new-expensify/billing-and-subscriptions/Plan-types-and-pricing',
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:',
@@ -6440,6 +6441,50 @@ const CONST = {
         },
     },
 
+    CORPAY_FIELDS: {
+        BANK_ACCOUNT_DETAILS_FIELDS: ['accountNumber', 'localAccountNumber', 'routingCode', 'localRoutingCode', 'swiftBicCode'] as string[],
+        ACCOUNT_TYPE_KEY: 'BeneficiaryAccountType',
+        BANK_INFORMATION_FIELDS: ['bankName', 'bankAddressLine1', 'bankAddressLine2', 'bankCity', 'bankRegion', 'bankPostal', 'BeneficiaryBankBranchName'] as string[],
+        ACCOUNT_HOLDER_FIELDS: [
+            'accountHolderName',
+            'accountHolderAddress1',
+            'accountHolderAddress2',
+            'accountHolderCity',
+            'accountHolderRegion',
+            'accountHolderCountry',
+            'accountHolderPostal',
+            'accountHolderPhoneNumber',
+            'accountHolderEmail',
+            'ContactName',
+            'BeneficiaryCPF',
+            'BeneficiaryRUT',
+            'BeneficiaryCedulaID',
+            'BeneficiaryTaxID',
+        ] as string[],
+        SPECIAL_LIST_REGION_KEYS: ['bankRegion', 'accountHolderRegion'] as string[],
+        SPECIAL_LIST_ADDRESS_KEYS: ['bankAddressLine1', 'accountHolderAddress1'] as string[],
+        STEPS_NAME: {
+            COUNTRY_SELECTOR: 'CountrySelector',
+            BANK_ACCOUNT_DETAILS: 'BankAccountDetails',
+            ACCOUNT_TYPE: 'AccountType',
+            BANK_INFORMATION: 'BankInformation',
+            ACCOUNT_HOLDER_INFORMATION: 'AccountHolderInformation',
+            CONFIRMATION: 'Confirmation',
+            SUCCESS: 'Success',
+        },
+        INDEXES: {
+            MAPPING: {
+                COUNTRY_SELECTOR: 0,
+                BANK_ACCOUNT_DETAILS: 1,
+                ACCOUNT_TYPE: 2,
+                BANK_INFORMATION: 3,
+                ACCOUNT_HOLDER_INFORMATION: 4,
+                CONFIRMATION: 5,
+                SUCCESS: 6,
+            },
+        },
+    },
+
     HYBRID_APP: {
         REORDERING_REACT_NATIVE_ACTIVITY_TO_FRONT: 'reorderingReactNativeActivityToFront',
     },

src/ONYXKEYS.ts

@@ -600,6 +600,8 @@ const ONYXKEYS = {
         HOME_ADDRESS_FORM_DRAFT: 'homeAddressFormDraft',
         PERSONAL_DETAILS_FORM: 'personalDetailsForm',
         PERSONAL_DETAILS_FORM_DRAFT: 'personalDetailsFormDraft',
+        INTERNATIONAL_BANK_ACCOUNT_FORM: 'internationalBankAccountForm',
+        INTERNATIONAL_BANK_ACCOUNT_FORM_DRAFT: 'internationalBankAccountFormDraft',
         NEW_ROOM_FORM: 'newRoomForm',
         NEW_ROOM_FORM_DRAFT: 'newRoomFormDraft',
         ROOM_SETTINGS_FORM: 'roomSettingsForm',
@@ -819,6 +821,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.RULES_MAX_EXPENSE_AGE_FORM]: FormTypes.RulesMaxExpenseAgeForm;
     [ONYXKEYS.FORMS.SEARCH_SAVED_SEARCH_RENAME_FORM]: FormTypes.SearchSavedSearchRenameForm;
     [ONYXKEYS.FORMS.DEBUG_DETAILS_FORM]: FormTypes.DebugReportForm | FormTypes.DebugReportActionForm | FormTypes.DebugTransactionForm | FormTypes.DebugTransactionViolationForm;
+    [ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM]: FormTypes.InternationalBankAccountForm;
     [ONYXKEYS.FORMS.WORKSPACE_PER_DIEM_FORM]: FormTypes.WorkspacePerDiemForm;
 };
 

src/ROUTES.ts

@@ -200,6 +200,7 @@ const ROUTES = {
     },
     SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card',
     SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account',
+    SETTINGS_ADD_US_BANK_ACCOUNT: 'settings/wallet/add-us-bank-account',
     SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments',
     SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS: {
         route: 'settings/wallet/card/:domain/digital-details/update-address',

src/SCREENS.ts

@@ -69,6 +69,7 @@ const SCREENS = {
         ADD_DEBIT_CARD: 'Settings_Add_Debit_Card',
         ADD_PAYMENT_CARD_CHANGE_CURRENCY: 'Settings_Add_Payment_Card_Change_Currency',
         ADD_BANK_ACCOUNT: 'Settings_Add_Bank_Account',
+        ADD_US_BANK_ACCOUNT: 'Settings_Add_US_Bank_Account',
         CLOSE: 'Settings_Close',
         TWO_FACTOR_AUTH: 'Settings_TwoFactorAuth',
         REPORT_CARD_LOST_OR_DAMAGED: 'Settings_ReportCardLostOrDamaged',

src/components/CurrencyPicker.tsx

@@ -0,0 +1,86 @@
+import type {ReactNode} from 'react';
+import React, {useState} from 'react';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import CurrencySelectionList from './CurrencySelectionList';
+import type {CurrencyListItem} from './CurrencySelectionList/types';
+import HeaderWithBackButton from './HeaderWithBackButton';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import Modal from './Modal';
+import ScreenWrapper from './ScreenWrapper';
+
+type CurrencyPickerProps = {
+    /** Current value of the selected item */
+    value?: string;
+
+    /** Custom content to display in the header */
+    headerContent?: ReactNode;
+
+    /** Callback when the list item is selected */
+    onInputChange?: (value: string, key?: string) => void;
+
+    /** Form Error description */
+    errorText?: string;
+};
+
+function CurrencyPicker({value, errorText, headerContent, onInputChange = () => {}}: CurrencyPickerProps) {
+    const {translate} = useLocalize();
+    const [isPickerVisible, setIsPickerVisible] = useState(false);
+    const styles = useThemeStyles();
+
+    const hidePickerModal = () => {
+        setIsPickerVisible(false);
+    };
+
+    const updateInput = (item: CurrencyListItem) => {
+        onInputChange?.(item.currencyCode);
+        hidePickerModal();
+    };
+
+    return (
+        <>
+            <MenuItemWithTopDescription
+                shouldShowRightIcon
+                title={value ? `${value} - ${CurrencyUtils.getCurrencySymbol(value)}` : undefined}
+                description={translate('common.currency')}
+                onPress={() => setIsPickerVisible(true)}
+                brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                errorText={errorText}
+            />
+            <Modal
+                type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+                isVisible={isPickerVisible}
+                onClose={hidePickerModal}
+                onModalHide={hidePickerModal}
+                hideModalContentWhileAnimating
+                useNativeDriver
+                onBackdropPress={Navigation.dismissModal}
+            >
+                <ScreenWrapper
+                    style={[styles.pb0]}
+                    includePaddingTop={false}
+                    includeSafeAreaPaddingBottom
+                    testID={CurrencyPicker.displayName}
+                >
+                    <HeaderWithBackButton
+                        title={translate('common.currency')}
+                        shouldShowBackButton
+                        onBackButtonPress={hidePickerModal}
+                    />
+                    {!!headerContent && headerContent}
+                    <CurrencySelectionList
+                        initiallySelectedCurrencyCode={value}
+                        onSelect={updateInput}
+                        searchInputLabel={translate('common.search')}
+                    />
+                </ScreenWrapper>
+            </Modal>
+        </>
+    );
+}
+
+CurrencyPicker.displayName = 'CurrencyPicker';
+export default CurrencyPicker;

src/components/Form/FormProvider.tsx

@@ -69,6 +69,9 @@ type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProps<TF
 
     /** Whether HTML is allowed in form inputs */
     allowHTML?: boolean;
+
+    /** Whether the form is loading */
+    isLoading?: boolean;
 };
 
 function FormProvider(
@@ -82,6 +85,7 @@ function FormProvider(
         onSubmit,
         shouldTrimValues = true,
         allowHTML = false,
+        isLoading = false,
         ...rest
     }: FormProviderProps,
     forwardedRef: ForwardedRef<FormRef>,
@@ -189,7 +193,7 @@ function FormProvider(
     const submit = useDebounceNonReactive(
         useCallback(() => {
             // Return early if the form is already submitting to avoid duplicate submission
-            if (formState?.isLoading) {
+            if (!!formState?.isLoading || isLoading) {
                 return;
             }
 
@@ -210,7 +214,7 @@ function FormProvider(
             }
 
             KeyboardUtils.dismiss().then(() => onSubmit(trimmedStringValues));
-        }, [enabledWhenOffline, formState?.isLoading, inputValues, network?.isOffline, onSubmit, onValidate, shouldTrimValues]),
+        }, [enabledWhenOffline, formState?.isLoading, inputValues, isLoading, network?.isOffline, onSubmit, onValidate, shouldTrimValues]),
         1000,
         {leading: true, trailing: false},
     );
@@ -406,6 +410,7 @@ function FormProvider(
                 onSubmit={submit}
                 inputRefs={inputRefs}
                 errors={errors}
+                isLoading={isLoading}
                 enabledWhenOffline={enabledWhenOffline}
             >
                 {typeof children === 'function' ? children({inputValues}) : children}

src/components/Form/FormWrapper.tsx

@@ -36,6 +36,9 @@ type FormWrapperProps = ChildrenProps &
 
         /** Callback to submit the form */
         onSubmit: () => void;
+
+        /** Whether the form is loading */
+        isLoading?: boolean;
     };
 
 function FormWrapper({
@@ -57,6 +60,7 @@ function FormWrapper({
     shouldHideFixErrorsAlert = false,
     disablePressOnEnter = false,
     isSubmitDisabled = false,
+    isLoading = false,
 }: FormWrapperProps) {
     const styles = useThemeStyles();
     const {paddingBottom: safeAreaInsetPaddingBottom} = useStyledSafeAreaInsets();
@@ -112,7 +116,7 @@ function FormWrapper({
                         buttonText={submitButtonText}
                         isDisabled={isSubmitDisabled}
                         isAlertVisible={((!isEmptyObject(errors) || !isEmptyObject(formState?.errorFields)) && !shouldHideFixErrorsAlert) || !!errorMessage}
-                        isLoading={!!formState?.isLoading}
+                        isLoading={!!formState?.isLoading || isLoading}
                         message={isEmptyObject(formState?.errorFields) ? errorMessage : undefined}
                         onSubmit={onSubmit}
                         footerContent={footerContent}
@@ -143,6 +147,7 @@ function FormWrapper({
             formState?.isLoading,
             shouldHideFixErrorsAlert,
             errorMessage,
+            isLoading,
             onSubmit,
             footerContent,
             onFixTheErrorsLinkPressed,

src/components/SelectionList/BaseSelectionList.tsx

@@ -67,6 +67,7 @@ function BaseSelectionList<TItem extends ListItem>(
         showScrollIndicator = true,
         showLoadingPlaceholder = false,
         showConfirmButton = false,
+        isConfirmButtonDisabled = false,
         shouldUseDefaultTheme = false,
         shouldPreventDefaultFocusOnSelectRow = false,
         containerStyle,
@@ -765,7 +766,7 @@ function BaseSelectionList<TItem extends ListItem>(
         {
             captureOnInputs: true,
             shouldBubble: !flattenedSections.allOptions.at(focusedIndex) || focusedIndex === -1,
-            isActive: !disableKeyboardShortcuts && isFocused,
+            isActive: !disableKeyboardShortcuts && isFocused && !isConfirmButtonDisabled,
         },
     );
 
@@ -848,6 +849,7 @@ function BaseSelectionList<TItem extends ListItem>(
                         onPress={onConfirm}
                         pressOnEnter
                         enterKeyEventListenerPriority={1}
+                        isDisabled={isConfirmButtonDisabled}
                     />
                 </FixedFooter>
             )}

src/components/SelectionList/types.ts

@@ -485,6 +485,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Whether to show the default confirm button */
     showConfirmButton?: boolean;
 
+    /** Whether to show the default confirm button disabled */
+    isConfirmButtonDisabled?: boolean;
+
     /** Whether to use the default theme for the confirm button */
     shouldUseDefaultTheme?: boolean;
 

src/components/TextPicker/index.tsx

@@ -7,11 +7,17 @@ import CONST from '@src/CONST';
 import TextSelectorModal from './TextSelectorModal';
 import type {TextPickerProps} from './types';
 
-function TextPicker({value, description, placeholder = '', errorText = '', onInputChange, furtherDetails, rightLabel, ...rest}: TextPickerProps, forwardedRef: ForwardedRef<View>) {
+function TextPicker(
+    {value, description, placeholder = '', errorText = '', onInputChange, furtherDetails, rightLabel, disabled = false, interactive = true, ...rest}: TextPickerProps,
+    forwardedRef: ForwardedRef<View>,
+) {
     const styles = useThemeStyles();
     const [isPickerVisible, setIsPickerVisible] = useState(false);
 
     const showPickerModal = () => {
+        if (disabled) {
+            return;
+        }
         setIsPickerVisible(true);
     };
 
@@ -30,7 +36,7 @@ function TextPicker({value, description, placeholder = '', errorText = '', onInp
         <View>
             <MenuItemWithTopDescription
                 ref={forwardedRef}
-                shouldShowRightIcon
+                shouldShowRightIcon={!disabled}
                 title={value ?? placeholder ?? ''}
                 description={description}
                 onPress={showPickerModal}
@@ -39,13 +45,15 @@ function TextPicker({value, description, placeholder = '', errorText = '', onInp
                 brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                 errorText={errorText}
                 style={[styles.moneyRequestMenuItem]}
+                interactive={interactive}
             />
             <TextSelectorModal
                 value={value}
                 isVisible={isPickerVisible}
                 description={description}
                 onClose={hidePickerModal}
                 onValueSelected={updateInput}
+                disabled={disabled}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...rest}
             />

src/components/TextPicker/types.ts

@@ -42,7 +42,7 @@ type TextPickerProps = {
 
     /** Whether to show the tooltip text */
     shouldShowTooltips?: boolean;
-} & Pick<MenuItemBaseProps, 'rightLabel' | 'subtitle' | 'description'> &
+} & Pick<MenuItemBaseProps, 'rightLabel' | 'subtitle' | 'description' | 'interactive'> &
     TextProps;
 
 export type {TextSelectorModalProps, TextPickerProps};

src/hooks/useInternationalBankAccountFormSubmit.ts

@@ -0,0 +1,27 @@
+import type {FormOnyxKeys} from '@components/Form/types';
+import type {OnyxFormKey} from '@src/ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useStepFormSubmit from './useStepFormSubmit';
+import type {SubStepProps} from './useSubStep/types';
+
+type UseInternationalBankAccountFormSubmitParams = Pick<SubStepProps, 'onNext'> & {
+    formId?: OnyxFormKey;
+    fieldIds: Array<FormOnyxKeys<typeof ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM>>;
+    shouldSaveDraft: boolean;
+};
+
+/**
+ * Hook for handling submit method in Missing Personal Details substeps.
+ * When user is in editing mode, we should save values only when user confirms the change
+ * @param onNext - callback
+ * @param fieldIds - field IDs for particular step
+ * @param shouldSaveDraft - if we should save draft values
+ */
+export default function useInternationalBankAccountFormSubmit({onNext, fieldIds, shouldSaveDraft}: UseInternationalBankAccountFormSubmitParams) {
+    return useStepFormSubmit<typeof ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM>({
+        formId: ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM,
+        onNext,
+        fieldIds,
+        shouldSaveDraft,
+    });
+}