From 3406d257a43b78719113788324b080c99b2ceec3 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 4 Feb 2026 00:51:14 +0800 Subject: [PATCH 1/9] refactor to use useSubPage --- src/CONST/index.ts | 16 ++-- src/ROUTES.ts | 13 +++- src/libs/Navigation/types.ts | 8 +- .../InternationalDepositAccountContent.tsx | 75 +++++++++++-------- .../substeps/AccountHolderInformation.tsx | 18 ++--- .../substeps/AccountType.tsx | 8 +- .../substeps/BankAccountDetails.tsx | 14 ++-- .../substeps/BankInformation.tsx | 18 ++--- .../substeps/Confirmation.tsx | 12 +-- .../substeps/CountrySelection.tsx | 8 +- .../substeps/Success.tsx | 4 +- .../InternationalDepositAccount/types.ts | 8 +- .../InternationalDepositAccount/utils.ts | 32 ++++---- 13 files changed, 129 insertions(+), 105 deletions(-) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 766a5451176d..a6c60f0b3254 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -7839,14 +7839,14 @@ const CONST = { ] 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', + PAGE_NAME: { + COUNTRY: 'country', + ACCOUNT_DETAILS: 'account-details', + ACCOUNT_TYPE: 'account-type', + BANK_INFORMATION: 'bank-information', + ACCOUNT_HOLDER_DETAILS: 'account-holder-details', + CONFIRM: 'confirm', + SUCCESS: 'success', }, INDEXES: { MAPPING: { diff --git a/src/ROUTES.ts b/src/ROUTES.ts index f391d08d0254..273f6e9d1c53 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -360,10 +360,15 @@ const ROUTES = { }, SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card', SETTINGS_ADD_BANK_ACCOUNT: { - route: 'settings/wallet/add-bank-account', - - // eslint-disable-next-line no-restricted-syntax -- Legacy route generation - getRoute: (backTo?: string) => getUrlWithBackToParam('settings/wallet/add-bank-account', backTo), + route: 'settings/wallet/add-bank-account/:subPage?/:action?', + getRoute: (backTo?: string, subPage?: string, action?: 'edit') => { + if (!subPage) { + // eslint-disable-next-line no-restricted-syntax -- Legacy route generation + return getUrlWithBackToParam('settings/wallet/add-bank-account', backTo); + } + // eslint-disable-next-line no-restricted-syntax -- Legacy route generation + return getUrlWithBackToParam(`settings/wallet/add-bank-account/${subPage}${action ? `/${action}` : ''}`, backTo); + }, }, SETTINGS_ADD_BANK_ACCOUNT_VERIFY_ACCOUNT: { route: `settings/wallet/add-bank-account/${VERIFY_ACCOUNT}`, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index a29fb057fbda..45443d6d65de 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -231,7 +231,13 @@ type SettingsNavigatorParamList = { bankAccountID: string; }; [SCREENS.SETTINGS.ADD_DEBIT_CARD]: undefined; - [SCREENS.SETTINGS.ADD_BANK_ACCOUNT]: undefined; + [SCREENS.SETTINGS.ADD_BANK_ACCOUNT]: { + // TODO will be removed once dynamic routes are implemented https://github.com/Expensify/App/issues/73825 + // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md + backTo?: Routes; + subPage?: string; + action?: 'edit'; + }; [SCREENS.SETTINGS.ADD_BANK_ACCOUNT_VERIFY_ACCOUNT]: { // TODO will be removed once dynamic routes are implemented https://github.com/Expensify/App/issues/73825 // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx index f00d95b6c1ab..29c526d6feab 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx @@ -1,3 +1,4 @@ +import {useRoute} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; @@ -6,14 +7,17 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useHandleBackButton from '@hooks/useHandleBackButton'; import useLocalize from '@hooks/useLocalize'; import useRootNavigationState from '@hooks/useRootNavigationState'; -import useSubStep from '@hooks/useSubStep'; +import useSubPage from '@hooks/useSubPage'; import {clearDraftValues} from '@libs/actions/FormActions'; import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName'; import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; +import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import NAVIGATORS from '@src/NAVIGATORS'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; import type {InternationalBankAccountForm} from '@src/types/form'; import type {BankAccountList, CorpayFields, PrivatePersonalDetails} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -24,7 +28,7 @@ import BankInformation from './substeps/BankInformation'; import Confirmation from './substeps/Confirmation'; import CountrySelection from './substeps/CountrySelection'; import Success from './substeps/Success'; -import type CustomSubStepProps from './types'; +import type CustomSubPageProps from './types'; import {getFieldsMap, getInitialPersonalDetailsValues, getInitialSubstep, getSubstepValues, testValidation} from './utils'; type InternationalDepositAccountContentProps = { @@ -36,15 +40,23 @@ type InternationalDepositAccountContentProps = { isAccountLoading: boolean; }; -const formSteps = [CountrySelection, BankAccountDetails, AccountType, BankInformation, AccountHolderInformation, Confirmation, Success]; - -function getSkippedSteps(skipAccountTypeStep: boolean, skipAccountHolderInformationStep: boolean) { +const pages = [ + {pageName: CONST.CORPAY_FIELDS.PAGE_NAME.COUNTRY, component: CountrySelection}, + {pageName: CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS, component: BankAccountDetails}, + {pageName: CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_TYPE, component: AccountType}, + {pageName: CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION, component: BankInformation}, + {pageName: CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS, component: AccountHolderInformation}, + {pageName: CONST.CORPAY_FIELDS.PAGE_NAME.CONFIRM, component: Confirmation}, + {pageName: CONST.CORPAY_FIELDS.PAGE_NAME.SUCCESS, component: Success}, +]; + +function getSkippedPages(skipAccountTypeStep: boolean, skipAccountHolderInformationStep: boolean) { const skippedSteps = []; if (skipAccountTypeStep) { - skippedSteps.push(CONST.CORPAY_FIELDS.INDEXES.MAPPING.ACCOUNT_TYPE); + skippedSteps.push(CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_TYPE); } if (skipAccountHolderInformationStep) { - skippedSteps.push(CONST.CORPAY_FIELDS.INDEXES.MAPPING.ACCOUNT_HOLDER_INFORMATION); + skippedSteps.push(CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS); } return skippedSteps; } @@ -63,12 +75,13 @@ function InternationalDepositAccountContent({privatePersonalDetails, corpayField const startFrom = useMemo(() => getInitialSubstep(values, fieldsMap), [fieldsMap, values]); - const skipAccountTypeStep = isEmptyObject(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE]); + const skipAccountTypeStep = isEmptyObject(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_TYPE]); - const skipAccountHolderInformationStep = testValidation(initialAccountHolderDetailsValues, fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION]); + const skipAccountHolderInformationStep = testValidation(initialAccountHolderDetailsValues, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_INFORMATION]); - const skippedSteps = getSkippedSteps(skipAccountTypeStep, skipAccountHolderInformationStep); + const skippedPages = getSkippedPages(skipAccountTypeStep, skipAccountHolderInformationStep); + const route = useRoute>(); const topmostFullScreenRoute = useRootNavigationState((state) => state?.routes.findLast((route) => isFullScreenName(route.name))); const goBack = useCallback(() => { @@ -90,36 +103,38 @@ function InternationalDepositAccountContent({privatePersonalDetails, corpayField goBack(); }, [goBack]); - const { - componentToRender: SubStep, - isEditing, - nextScreen, - prevScreen, - screenIndex, - moveTo, - resetScreenIndex, - } = useSubStep({bodyContent: formSteps, startFrom, onFinished: handleFinishStep, skipSteps: skippedSteps}); + const {CurrentPage, isEditing, nextPage, prevPage, pageIndex, moveTo, isRedirecting} = useSubPage({ + pages, + startFrom, + onFinished: handleFinishStep, + skipPages: skippedPages, + buildRoute: (pageName, action) => ROUTES.SETTINGS_ADD_BANK_ACCOUNT.getRoute(route.params?.backTo, pageName, action), + }); + + const goBackToConfirmStep = () => { + Navigation.goBack(ROUTES.SETTINGS_ADD_BANK_ACCOUNT.getRoute(route.params?.backTo, CONST.CORPAY_FIELDS.PAGE_NAME.CONFIRM, undefined)); + }; const handleBackButtonPress = () => { if (isEditing) { - resetScreenIndex(CONST.CORPAY_FIELDS.INDEXES.MAPPING.CONFIRMATION); + goBackToConfirmStep(); return true; } // Clicking back on the first screen should dismiss the modal - if (screenIndex === CONST.CORPAY_FIELDS.INDEXES.MAPPING.COUNTRY_SELECTOR) { + if (pageIndex === CONST.CORPAY_FIELDS.INDEXES.MAPPING.COUNTRY_SELECTOR) { clearDraftValues(ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM); goBack(); return true; } // Clicking back on the success screen should dismiss the modal - if (screenIndex === CONST.CORPAY_FIELDS.INDEXES.MAPPING.SUCCESS) { + if (pageIndex === CONST.CORPAY_FIELDS.INDEXES.MAPPING.SUCCESS) { clearDraftValues(ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM); goBack(); return true; } - prevScreen(); + prevPage(); return true; }; @@ -127,13 +142,13 @@ function InternationalDepositAccountContent({privatePersonalDetails, corpayField const handleNextScreen = useCallback(() => { if (isEditing) { - resetScreenIndex(CONST.CORPAY_FIELDS.INDEXES.MAPPING.CONFIRMATION); + goBackToConfirmStep(); return; } - nextScreen(); - }, [resetScreenIndex, isEditing, nextScreen]); + nextPage(); + }, [isEditing, goBackToConfirmStep, nextPage]); - if (isAccountLoading) { + if (isRedirecting || isAccountLoading) { return ; } @@ -141,18 +156,16 @@ function InternationalDepositAccountContent({privatePersonalDetails, corpayField - diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountHolderInformation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountHolderInformation.tsx index e0cdac13e82e..47df74bfcf4a 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountHolderInformation.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountHolderInformation.tsx @@ -10,7 +10,7 @@ import ValuePicker from '@components/ValuePicker'; import useInternationalBankAccountFormSubmit from '@hooks/useInternationalBankAccountFormSubmit'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import type CustomSubStepProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; +import type CustomSubPageProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; import {getValidationErrors} from '@pages/settings/Wallet/InternationalDepositAccount/utils'; import Text from '@src/components/Text'; import CONST from '@src/CONST'; @@ -41,19 +41,19 @@ function getItems(field: CorpayFormField) { return (field.links?.[0]?.content.regions ?? []).map(({name, code}) => ({value: code, label: name})); } -function AccountHolderInformation({isEditing, onNext, formValues, fieldsMap}: CustomSubStepProps) { +function AccountHolderInformation({isEditing, onNext, formValues, fieldsMap}: CustomSubPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const handleSubmit = useInternationalBankAccountFormSubmit({ - fieldIds: Object.keys(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION]), + fieldIds: Object.keys(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS]), onNext, shouldSaveDraft: isEditing, }); const validate = useCallback( (values: FormOnyxValues): FormInputErrors => { - return getValidationErrors(values, fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION], translate); + return getValidationErrors(values, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS], translate); }, [fieldsMap, translate], ); @@ -89,7 +89,7 @@ function AccountHolderInformation({isEditing, onNext, formValues, fieldsMap}: Cu > {translate('addPersonalBankAccount.accountHolderInformationStepHeader')} - {Object.values(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION]) + {Object.values(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS]) .sort((a, b) => CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_FIELDS.indexOf(a.id) - CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_FIELDS.indexOf(b.id)) .map((field, index) => ( (null); - const fieldData = fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE]?.[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY] ?? {}; + const fieldData = fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_TYPE]?.[CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY] ?? {}; const handleSubmit = useInternationalBankAccountFormSubmit({ - fieldIds: Object.keys(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE]), + fieldIds: Object.keys(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_TYPE]), onNext, shouldSaveDraft: isEditing, }); diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankAccountDetails.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankAccountDetails.tsx index 64335b4edeec..582c86f99c02 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankAccountDetails.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankAccountDetails.tsx @@ -14,21 +14,21 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type CustomSubStepProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; +import type CustomSubPageProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; import {getValidationErrors} from '@pages/settings/Wallet/InternationalDepositAccount/utils'; import {fetchCorpayFields} from '@userActions/BankAccounts'; import Text from '@src/components/Text'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -function BankAccountDetails({isEditing, onNext, resetScreenIndex, formValues, fieldsMap}: CustomSubStepProps) { +function BankAccountDetails({isEditing, onNext, onMove, formValues, fieldsMap}: CustomSubPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); const {isOffline} = useNetwork(); const handleSubmit = useInternationalBankAccountFormSubmit({ - fieldIds: Object.keys(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS] ?? {}), + fieldIds: Object.keys(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS] ?? {}), onNext, shouldSaveDraft: isEditing, }); @@ -39,14 +39,14 @@ function BankAccountDetails({isEditing, onNext, resetScreenIndex, formValues, fi return; } fetchCorpayFields(formValues.bankCountry, value); - resetScreenIndex?.(CONST.CORPAY_FIELDS.INDEXES.MAPPING.BANK_ACCOUNT_DETAILS); + onMove(CONST.CORPAY_FIELDS.INDEXES.MAPPING.BANK_ACCOUNT_DETAILS, false); }, - [formValues.bankCountry, formValues.bankCurrency, resetScreenIndex], + [formValues.bankCountry, formValues.bankCurrency, onMove], ); const validate = useCallback( (values: FormOnyxValues): FormInputErrors => { - return getValidationErrors(values, fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS], translate); + return getValidationErrors(values, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS], translate); }, [fieldsMap, translate], ); @@ -80,7 +80,7 @@ function BankAccountDetails({isEditing, onNext, resetScreenIndex, formValues, fi shouldShowFullPageOfflineView /> - {Object.values(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS] ?? {}).map((field) => ( + {Object.values(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS] ?? {}).map((field) => ( 0 ? [styles.mhn5, styles.pv1] : [styles.pv2]} key={field.id} diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankInformation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankInformation.tsx index 01653eb18d70..1d368568f9cb 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankInformation.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankInformation.tsx @@ -9,7 +9,7 @@ import ValuePicker from '@components/ValuePicker'; import useInternationalBankAccountFormSubmit from '@hooks/useInternationalBankAccountFormSubmit'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import type CustomSubStepProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; +import type CustomSubPageProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; import {getValidationErrors} from '@pages/settings/Wallet/InternationalDepositAccount/utils'; import Text from '@src/components/Text'; import CONST from '@src/CONST'; @@ -37,19 +37,19 @@ function getItems(field: CorpayFormField) { return (field.links?.[0]?.content.regions ?? []).map(({name, code}) => ({value: code, label: name})); } -function BankInformation({isEditing, onNext, formValues, fieldsMap}: CustomSubStepProps) { +function BankInformation({isEditing, onNext, formValues, fieldsMap}: CustomSubPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const handleSubmit = useInternationalBankAccountFormSubmit({ - fieldIds: Object.keys(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION]), + fieldIds: Object.keys(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION]), onNext, shouldSaveDraft: isEditing, }); const validate = useCallback( (values: FormOnyxValues): FormInputErrors => { - return getValidationErrors(values, fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION], translate); + return getValidationErrors(values, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION], translate); }, [fieldsMap, translate], ); @@ -82,7 +82,7 @@ function BankInformation({isEditing, onNext, formValues, fieldsMap}: CustomSubSt > {translate('addPersonalBankAccount.bankInformationStepHeader')} - {Object.values(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION]) + {Object.values(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION]) .sort((a, b) => CONST.CORPAY_FIELDS.BANK_INFORMATION_FIELDS.indexOf(a.id) - CONST.CORPAY_FIELDS.BANK_INFORMATION_FIELDS.indexOf(b.id)) .map((field, index) => ( ; } -function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProps) { +function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [corpayFields] = useOnyx(ONYXKEYS.CORPAY_FIELDS, {canBeMissing: false}); @@ -104,7 +104,7 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp }, ]; - for (const [fieldName, field] of Object.entries(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS] ?? {})) { + for (const [fieldName, field] of Object.entries(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS] ?? {})) { summaryItems.push({ description: field.label + (field.isRequired ? '' : ` (${translate('common.optional')})`), title: getTitle(field, fieldName), @@ -115,7 +115,7 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp }); } - for (const [fieldName, field] of Object.entries(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE] ?? {})) { + for (const [fieldName, field] of Object.entries(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_TYPE] ?? {})) { summaryItems.push({ description: field.label + (field.isRequired ? '' : ` (${translate('common.optional')})`), title: getTitle(field, fieldName), @@ -126,7 +126,7 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp }); } - for (const [fieldName, field] of Object.entries(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION] ?? {}).sort( + for (const [fieldName, field] of Object.entries(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION] ?? {}).sort( ([field1], [field2]) => CONST.CORPAY_FIELDS.BANK_INFORMATION_FIELDS.indexOf(field1) - CONST.CORPAY_FIELDS.BANK_INFORMATION_FIELDS.indexOf(field2), )) { summaryItems.push({ @@ -139,7 +139,7 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp }); } - for (const [fieldName, field] of Object.entries(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION] ?? {}).sort( + for (const [fieldName, field] of Object.entries(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS] ?? {}).sort( ([field1], [field2]) => CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_FIELDS.indexOf(field1) - CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_FIELDS.indexOf(field2), )) { summaryItems.push({ diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/CountrySelection.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/CountrySelection.tsx index efcf103cf305..5bf1b428551c 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/CountrySelection.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/CountrySelection.tsx @@ -12,7 +12,7 @@ import Navigation from '@libs/Navigation/Navigation'; import searchOptions from '@libs/searchOptions'; import type {Option} from '@libs/searchOptions'; import StringUtils from '@libs/StringUtils'; -import type CustomSubStepProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; +import type CustomSubPageProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; import {fetchCorpayFields} from '@userActions/BankAccounts'; import Text from '@src/components/Text'; import CONST, {COUNTRIES_US_BANK_FLOW} from '@src/CONST'; @@ -21,7 +21,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -function CountrySelection({isEditing, onNext, formValues, resetScreenIndex, fieldsMap}: CustomSubStepProps) { +function CountrySelection({isEditing, onNext, onMove, formValues, fieldsMap}: CustomSubPageProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); const styles = useThemeStyles(); @@ -43,8 +43,8 @@ function CountrySelection({isEditing, onNext, formValues, resetScreenIndex, fiel return; } fetchCorpayFields(currentCountry); - resetScreenIndex?.(CONST.CORPAY_FIELDS.INDEXES.MAPPING.BANK_ACCOUNT_DETAILS); - }, [currentCountry, fieldsMap, formValues.bankCountry, resetScreenIndex, isUserValidated, onNext]); + onMove(CONST.CORPAY_FIELDS.INDEXES.MAPPING.BANK_ACCOUNT_DETAILS, false); + }, [currentCountry, fieldsMap, formValues.bankCountry, onMove, isUserValidated, onNext]); const onSelectionChange = useCallback((country: Option) => { setCurrentCountry(country.value); diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Success.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Success.tsx index 42251d531cfd..dd1943413df6 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Success.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Success.tsx @@ -3,9 +3,9 @@ import ConfirmationPage from '@components/ConfirmationPage'; import ScrollView from '@components/ScrollView'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import type CustomSubStepProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; +import type CustomSubPageProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; -function Confirmation({onNext}: CustomSubStepProps) { +function Confirmation({onNext}: CustomSubPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/types.ts b/src/pages/settings/Wallet/InternationalDepositAccount/types.ts index 8e53157134ea..9ae475bac75f 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/types.ts +++ b/src/pages/settings/Wallet/InternationalDepositAccount/types.ts @@ -1,15 +1,15 @@ import type {ValueOf} from 'type-fest'; -import type {SubStepProps} from '@hooks/useSubStep/types'; +import type {SubPageProps} from '@hooks/useSubPage/types'; import type CONST from '@src/CONST'; import type {InternationalBankAccountForm} from '@src/types/form'; import type {CorpayFieldsMap} from '@src/types/onyx/CorpayFields'; -type CustomSubStepProps = SubStepProps & { +type CustomSubPageProps = SubPageProps & { /** User's form values */ formValues: InternationalBankAccountForm; /** Fields map for the step rendering */ - fieldsMap: Record, CorpayFieldsMap>; + fieldsMap: Record, CorpayFieldsMap>; }; -export default CustomSubStepProps; +export default CustomSubPageProps; diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/utils.ts b/src/pages/settings/Wallet/InternationalDepositAccount/utils.ts index 4b7865f513ec..70bac8e12dc2 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/utils.ts +++ b/src/pages/settings/Wallet/InternationalDepositAccount/utils.ts @@ -12,27 +12,27 @@ import type {BankAccount, BankAccountList, CorpayFields, PrivatePersonalDetails} import type {CorpayFieldsMap} from '@src/types/onyx/CorpayFields'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -function getFieldsMap(corpayFields: OnyxEntry): Record, CorpayFieldsMap> { +function getFieldsMap(corpayFields: OnyxEntry): Record, CorpayFieldsMap> { return (corpayFields?.formFields ?? []).reduce( (acc, field) => { if (!field.id) { return acc; } if (field.id === CONST.CORPAY_FIELDS.ACCOUNT_TYPE_KEY) { - acc[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE] = {[field.id]: field}; + acc[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_TYPE] = {[field.id]: field}; } else if (CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_FIELDS.includes(field.id)) { - acc[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION] = acc[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION] ?? {}; - acc[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION][field.id] = field; + acc[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS] = acc[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS] ?? {}; + acc[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS][field.id] = field; } else if (CONST.CORPAY_FIELDS.BANK_INFORMATION_FIELDS.includes(field.id)) { - acc[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION] = acc[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION] ?? {}; - acc[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION][field.id] = field; + acc[CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION] = acc[CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION] ?? {}; + acc[CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION][field.id] = field; } else { - acc[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS] = acc[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS] ?? {}; - acc[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS][field.id] = field; + acc[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS] = acc[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS] ?? {}; + acc[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS][field.id] = field; } return acc; }, - {} as Record, CorpayFieldsMap>, + {} as Record, CorpayFieldsMap>, ); } @@ -46,10 +46,10 @@ function getSubstepValues( bankAccountList: OnyxEntry, internationalBankAccountDraft: OnyxEntry, country: OnyxEntry, - fieldsMap: Record, CorpayFieldsMap>, + fieldsMap: Record, CorpayFieldsMap>, ): InternationalBankAccountForm { const address = getCurrentAddress(privatePersonalDetails); - const personalDetailsFieldMap = fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION]; + const personalDetailsFieldMap = fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS]; const {street} = address ?? {}; const [street1, street2] = street ? street.split('\n') : [undefined, undefined]; const firstName = privatePersonalDetails?.legalFirstName ?? ''; @@ -110,20 +110,20 @@ function testValidation(values: InternationalBankAccountForm, fieldsMap: CorpayF return true; } -function getInitialSubstep(values: InternationalBankAccountForm, fieldsMap: Record, CorpayFieldsMap>) { +function getInitialSubstep(values: InternationalBankAccountForm, fieldsMap: Record, CorpayFieldsMap>) { if (values.bankCountry === '' || isEmptyObject(fieldsMap)) { return CONST.CORPAY_FIELDS.INDEXES.MAPPING.COUNTRY_SELECTOR; } - if (values.bankCurrency === '' || !testValidation(values, fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS])) { + if (values.bankCurrency === '' || !testValidation(values, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS])) { return CONST.CORPAY_FIELDS.INDEXES.MAPPING.BANK_ACCOUNT_DETAILS; } - if (!testValidation(values, fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE])) { + if (!testValidation(values, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_TYPE])) { return CONST.CORPAY_FIELDS.INDEXES.MAPPING.ACCOUNT_TYPE; } - if (!testValidation(values, fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION])) { + if (!testValidation(values, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION])) { return CONST.CORPAY_FIELDS.INDEXES.MAPPING.BANK_INFORMATION; } - if (!testValidation(values, fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION])) { + if (!testValidation(values, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS])) { return CONST.CORPAY_FIELDS.INDEXES.MAPPING.ACCOUNT_HOLDER_INFORMATION; } return CONST.CORPAY_FIELDS.INDEXES.MAPPING.CONFIRMATION; From a155a72084f2a50e57e19d7a726065ea6339ce23 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 4 Feb 2026 01:25:25 +0800 Subject: [PATCH 2/9] lint --- .../InternationalDepositAccountContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx index 29c526d6feab..f859af94d59f 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx @@ -77,12 +77,12 @@ function InternationalDepositAccountContent({privatePersonalDetails, corpayField const skipAccountTypeStep = isEmptyObject(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_TYPE]); - const skipAccountHolderInformationStep = testValidation(initialAccountHolderDetailsValues, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_INFORMATION]); + const skipAccountHolderInformationStep = testValidation(initialAccountHolderDetailsValues, fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS]); const skippedPages = getSkippedPages(skipAccountTypeStep, skipAccountHolderInformationStep); const route = useRoute>(); - const topmostFullScreenRoute = useRootNavigationState((state) => state?.routes.findLast((route) => isFullScreenName(route.name))); + const topmostFullScreenRoute = useRootNavigationState((state) => state?.routes.findLast((r) => isFullScreenName(r.name))); const goBack = useCallback(() => { switch (topmostFullScreenRoute?.name) { From 07004c6eefe7e0424a9e82b956a709ad68d23720 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 16 Feb 2026 15:22:14 +0800 Subject: [PATCH 3/9] rename --- .../InternationalDepositAccountContent.tsx | 14 +++++++------- .../AccountFlowEntryPoint.tsx | 0 .../AccountHolderInformation.tsx | 0 .../{substeps => subPages}/AccountType.tsx | 0 .../{substeps => subPages}/BankAccountDetails.tsx | 0 .../{substeps => subPages}/BankInformation.tsx | 0 .../{substeps => subPages}/Confirmation.tsx | 0 .../{substeps => subPages}/CountrySelection.tsx | 0 .../{substeps => subPages}/Success.tsx | 0 9 files changed, 7 insertions(+), 7 deletions(-) rename src/pages/settings/Wallet/InternationalDepositAccount/{substeps => subPages}/AccountFlowEntryPoint.tsx (100%) rename src/pages/settings/Wallet/InternationalDepositAccount/{substeps => subPages}/AccountHolderInformation.tsx (100%) rename src/pages/settings/Wallet/InternationalDepositAccount/{substeps => subPages}/AccountType.tsx (100%) rename src/pages/settings/Wallet/InternationalDepositAccount/{substeps => subPages}/BankAccountDetails.tsx (100%) rename src/pages/settings/Wallet/InternationalDepositAccount/{substeps => subPages}/BankInformation.tsx (100%) rename src/pages/settings/Wallet/InternationalDepositAccount/{substeps => subPages}/Confirmation.tsx (100%) rename src/pages/settings/Wallet/InternationalDepositAccount/{substeps => subPages}/CountrySelection.tsx (100%) rename src/pages/settings/Wallet/InternationalDepositAccount/{substeps => subPages}/Success.tsx (100%) diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx index 63e4234740c0..fe3b73e7542a 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx @@ -21,13 +21,13 @@ import type SCREENS from '@src/SCREENS'; import type {InternationalBankAccountForm} from '@src/types/form'; import type {BankAccountList, CorpayFields, PrivatePersonalDetails} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import AccountHolderInformation from './substeps/AccountHolderInformation'; -import AccountType from './substeps/AccountType'; -import BankAccountDetails from './substeps/BankAccountDetails'; -import BankInformation from './substeps/BankInformation'; -import Confirmation from './substeps/Confirmation'; -import CountrySelection from './substeps/CountrySelection'; -import Success from './substeps/Success'; +import AccountHolderInformation from './subPages/AccountHolderInformation'; +import AccountType from './subPages/AccountType'; +import BankAccountDetails from './subPages/BankAccountDetails'; +import BankInformation from './subPages/BankInformation'; +import Confirmation from './subPages/Confirmation'; +import CountrySelection from './subPages/CountrySelection'; +import Success from './subPages/Success'; import type CustomSubPageProps from './types'; import {getFieldsMap, getInitialPersonalDetailsValues, getInitialSubstep, getSubstepValues, testValidation} from './utils'; diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountFlowEntryPoint.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountFlowEntryPoint.tsx similarity index 100% rename from src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountFlowEntryPoint.tsx rename to src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountFlowEntryPoint.tsx diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountHolderInformation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountHolderInformation.tsx similarity index 100% rename from src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountHolderInformation.tsx rename to src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountHolderInformation.tsx diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountType.tsx similarity index 100% rename from src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx rename to src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountType.tsx diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankAccountDetails.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/BankAccountDetails.tsx similarity index 100% rename from src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankAccountDetails.tsx rename to src/pages/settings/Wallet/InternationalDepositAccount/subPages/BankAccountDetails.tsx diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankInformation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/BankInformation.tsx similarity index 100% rename from src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankInformation.tsx rename to src/pages/settings/Wallet/InternationalDepositAccount/subPages/BankInformation.tsx diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/Confirmation.tsx similarity index 100% rename from src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx rename to src/pages/settings/Wallet/InternationalDepositAccount/subPages/Confirmation.tsx diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/CountrySelection.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/CountrySelection.tsx similarity index 100% rename from src/pages/settings/Wallet/InternationalDepositAccount/substeps/CountrySelection.tsx rename to src/pages/settings/Wallet/InternationalDepositAccount/subPages/CountrySelection.tsx diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Success.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/Success.tsx similarity index 100% rename from src/pages/settings/Wallet/InternationalDepositAccount/substeps/Success.tsx rename to src/pages/settings/Wallet/InternationalDepositAccount/subPages/Success.tsx From 4a4b6650369573cc2a85fc14cd773eddff7d48fe Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 16 Feb 2026 15:45:08 +0800 Subject: [PATCH 4/9] rename --- src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index dc6f2dc04db2..7a18a163bfb1 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -436,7 +436,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/settings/Wallet/InternationalDepositAccount').default, [SCREENS.SETTINGS.ADD_US_BANK_ACCOUNT]: () => require('../../../../pages/AddPersonalBankAccountPage').default, [SCREENS.SETTINGS.ADD_US_BANK_ACCOUNT_ENTRY_POINT]: () => - require('../../../../pages/settings/Wallet/InternationalDepositAccount/substeps/AccountFlowEntryPoint').default, + require('../../../../pages/settings/Wallet/InternationalDepositAccount/subPages/AccountFlowEntryPoint').default, [SCREENS.SETTINGS.ADD_BANK_ACCOUNT_SELECT_COUNTRY_VERIFY_ACCOUNT]: () => require('../../../../pages/settings/Wallet/InternationalDepositAccount/CountrySelectionVerifyAccountPage').default, [SCREENS.SETTINGS.RULES.ROOT]: () => require('../../../../pages/settings/Rules/ExpenseRulesPage').default, From bf0c21077f8198f8a127c6ddacebc457f5f6f605 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 25 Feb 2026 18:35:52 +0800 Subject: [PATCH 5/9] fix loading has transparent bg --- .../InternationalDepositAccountContent.tsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx index 46fe24b44567..e5d95ee0e257 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx @@ -165,7 +165,7 @@ function InternationalDepositAccountContent({ nextPage(); }, [isEditing, goBackToConfirmStep, nextPage]); - if (isRedirecting || isAccountLoading) { + if (isAccountLoading) { return ; } @@ -175,17 +175,23 @@ function InternationalDepositAccountContent({ testID="InternationalDepositAccountContent" shouldShowOfflineIndicatorInWideScreen={pageIndex === CONST.CORPAY_FIELDS.INDEXES.MAPPING.CONFIRMATION} > - - + {isRedirecting ? ( + + ) : ( + <> + + + + )} ); } From 3e8bce8d6d1562ebca62cc2e66e04ba5a5ada982 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 26 Feb 2026 17:25:13 +0800 Subject: [PATCH 6/9] fix loading has transparent bg --- .../InternationalDepositAccountContent.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx index e5d95ee0e257..2b87573a00ac 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx @@ -165,17 +165,13 @@ function InternationalDepositAccountContent({ nextPage(); }, [isEditing, goBackToConfirmStep, nextPage]); - if (isAccountLoading) { - return ; - } - return ( - {isRedirecting ? ( + {(isRedirecting || isAccountLoading) ? ( ) : ( <> From 8b5725981f82e5f7c22022e8500cddb13b51faac Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 26 Feb 2026 18:55:50 +0800 Subject: [PATCH 7/9] prettier --- .../InternationalDepositAccountContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx index 2b87573a00ac..53d58fe75b27 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx @@ -171,7 +171,7 @@ function InternationalDepositAccountContent({ testID="InternationalDepositAccountContent" shouldShowOfflineIndicatorInWideScreen={pageIndex === CONST.CORPAY_FIELDS.INDEXES.MAPPING.CONFIRMATION} > - {(isRedirecting || isAccountLoading) ? ( + {isRedirecting || isAccountLoading ? ( ) : ( <> From b9e9fa4702fb830d6318c29efd254125d00372a7 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 27 Feb 2026 22:54:04 +0800 Subject: [PATCH 8/9] change the animation type --- .../Navigation/AppNavigator/ModalStackNavigators/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 2deca576278e..6594de327c20 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -91,7 +91,9 @@ const OPTIONS_PER_SCREEN: Partial [SCREENS.MISSING_PERSONAL_DETAILS]: { animationTypeForReplace: 'push', }, - + [SCREENS.SETTINGS.ADD_BANK_ACCOUNT]: { + animationTypeForReplace: 'push', + }, [SCREENS.MULTIFACTOR_AUTHENTICATION.MAGIC_CODE]: { animationTypeForReplace: 'push', }, From 70773940536a81d98ea98cce565c3539d1c3ca13 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 28 Feb 2026 12:03:04 +0800 Subject: [PATCH 9/9] add sentry label --- .../subPages/AccountFlowEntryPoint.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountFlowEntryPoint.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountFlowEntryPoint.tsx index 5cb4b2a199e1..073927652c68 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountFlowEntryPoint.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountFlowEntryPoint.tsx @@ -118,6 +118,7 @@ function AccountFlowEntryPoint({policyName = '', onBackButtonPress}: AccountFlow onPress={() => openExternalLink(CONST.ENCRYPTION_AND_SECURITY_HELP_URL)} style={[styles.flexRow, styles.alignItemsCenter]} accessibilityLabel={translate('bankAccount.yourDataIsSecure')} + sentryLabel={CONST.SENTRY_LABEL.BANK_ACCOUNT.DATA_SECURE_LINK} > {translate('bankAccount.yourDataIsSecure')}