Implement easier change of bank account

src/CONST/index.ts

@@ -732,6 +732,9 @@ const CONST = {
             PLAID: 'plaid',
             NONE: '',
         },
+        CONNECT_EXISTING_SOURCE: {
+            CHANGE_BANK_ACCOUNT: 'changeBankAccount',
+        },
         REGEX: {
             US_ACCOUNT_NUMBER: /^[0-9]{4,17}$/,
 

src/ONYXKEYS.ts

@@ -406,6 +406,9 @@ const ONYXKEYS = {
     /** Stores information about the active reimbursement account being set up */
     REIMBURSEMENT_ACCOUNT: 'reimbursementAccount',
 
+    /** Indicates whether the user started changing their business bank account to a fresh account */
+    IS_CHANGING_TO_NEW_BANK_ACCOUNT: 'isChangingToNewBankAccount',
+
     /** Stores Workspace ID that will be tied to reimbursement account during setup */
     REIMBURSEMENT_ACCOUNT_WORKSPACE_ID: 'reimbursementAccountWorkspaceID',
 
@@ -1580,6 +1583,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.SHARE_BANK_ACCOUNT]: OnyxTypes.ShareBankAccount;
     [ONYXKEYS.UNSHARE_BANK_ACCOUNT]: OnyxTypes.UnshareBankAccount;
     [ONYXKEYS.REIMBURSEMENT_ACCOUNT]: OnyxTypes.ReimbursementAccount;
+    [ONYXKEYS.IS_CHANGING_TO_NEW_BANK_ACCOUNT]: boolean;
     [ONYXKEYS.REIMBURSEMENT_ACCOUNT_OPTION_PRESSED]: ValueOf<typeof CONST.BANK_ACCOUNT.SETUP_TYPE>;
     [ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE]: number;
     [ONYXKEYS.FREQUENTLY_USED_EMOJIS]: OnyxTypes.FrequentlyUsedEmoji[];

src/ROUTES.ts

@@ -1271,13 +1271,16 @@ const ROUTES = {
     // TODO: rename the route as no longer accepts step
     BANK_ACCOUNT_WITH_STEP_TO_OPEN: {
         route: 'bank-account/new',
-        getRoute: ({policyID, bankAccountID, backTo}: {policyID: string | undefined; bankAccountID?: number; backTo?: string}) => {
+        getRoute: ({policyID, bankAccountID, backTo, isChangingBankAccount}: {policyID: string | undefined; bankAccountID?: number; backTo?: string; isChangingBankAccount?: boolean}) => {
             let queryString = '';
             if (bankAccountID) {
                 queryString = `?bankAccountID=${bankAccountID}`;
             } else if (policyID) {
                 queryString = `?policyID=${policyID}`;
             }
+            if (isChangingBankAccount) {
+                queryString += queryString ? '&isChangingBankAccount=true' : '?isChangingBankAccount=true';
+            }
             // TODO this backTo comes from drilling it through bank account form screens
             // should be removed once https://github.com/Expensify/App/pull/72219 is resolved
             return getUrlWithBackToParam(`bank-account/new${queryString}`, backTo);
@@ -1295,7 +1298,11 @@ const ROUTES = {
     BANK_ACCOUNT_CONNECT_EXISTING_BUSINESS_BANK_ACCOUNT: {
         route: 'bank-account/connect-existing-business-bank-account',
 
-        getRoute: (policyID: string, backTo?: string) => getUrlWithBackToParam(`bank-account/connect-existing-business-bank-account?policyID=${policyID}`, backTo),
+        getRoute: (policyID: string, backTo?: string, source?: ValueOf<typeof CONST.BANK_ACCOUNT.CONNECT_EXISTING_SOURCE>) => {
+            const baseRoute = `bank-account/connect-existing-business-bank-account?policyID=${policyID}` as const;
+            const routeWithSource = source ? (`${baseRoute}&source=${source}` as const) : baseRoute;
+            return getUrlWithBackToParam(routeWithSource, backTo);
+        },
     },
     BANK_ACCOUNT_NON_USD_SETUP: {
         route: 'bank-account/new/global/:page?/:subPage?/:action?',

src/hooks/useChangeBankAccount.ts

@@ -0,0 +1,35 @@
+import Navigation from '@navigation/Navigation';
+
+import {navigateToBankAccountRoute} from '@userActions/ReimbursementAccount';
+
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+import {hasOtherEligibleBusinessBankAccountsSelector} from '@selectors/ReimbursementAccount';
+
+import useOnyx from './useOnyx';
+
+/**
+ * Returns a handler that changes the workspace's verified business bank account. When there are other eligible
+ * business bank accounts to connect it opens the existing-account picker, otherwise it starts a fresh setup.
+ * Shared by ConnectedVerifiedBankAccount and VerifiedBankAccountFlowEntryPoint.
+ */
+function useChangeBankAccount(policyID: string | undefined, currency: string | undefined, bankAccountID: number | undefined) {
+    const [hasOtherEligibleAccountsToConnect = false] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST, {selector: hasOtherEligibleBusinessBankAccountsSelector(currency, bankAccountID)});
+
+    return () => {
+        if (!policyID || !currency) {
+            return;
+        }
+
+        if (hasOtherEligibleAccountsToConnect) {
+            Navigation.navigate(ROUTES.BANK_ACCOUNT_CONNECT_EXISTING_BUSINESS_BANK_ACCOUNT.getRoute(policyID, undefined, CONST.BANK_ACCOUNT.CONNECT_EXISTING_SOURCE.CHANGE_BANK_ACCOUNT));
+            return;
+        }
+
+        navigateToBankAccountRoute({policyID, isChangingBankAccount: true});
+    };
+}
+
+export default useChangeBankAccount;

src/languages/de.ts

@@ -7039,6 +7039,7 @@ Der Control-Tarif beginnt bei 9 $ pro aktivem Mitglied und Monat.`,
             workspaceCurrencyNotSupported: 'Workspace-Währung wird nicht unterstützt',
             yourWorkspace: `Dein Arbeitsbereich ist auf eine nicht unterstützte Währung eingestellt. Sieh dir die <a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">Liste der unterstützten Währungen</a> an.`,
             chooseAnExisting: 'Wähle ein bestehendes Bankkonto zum Bezahlen von Ausgaben oder füge ein neues hinzu.',
+            changeBankAccount: 'Bankkonto ändern',
         },
         changeOwner: {
             changeOwnerPageTitle: 'Besitz übertragen',

src/languages/en.ts

@@ -7223,6 +7223,7 @@ const translations = {
             workspaceCurrencyNotSupported: 'Workspace currency not supported',
             yourWorkspace: `Your workspace is set to an unsupported currency. View the <a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">list of supported currencies</a>.`,
             chooseAnExisting: 'Choose an existing bank account to pay expenses or add a new one.',
+            changeBankAccount: 'Change bank account',
         },
         changeOwner: {
             changeOwnerPageTitle: 'Transfer owner',

src/languages/es.ts

@@ -6951,6 +6951,7 @@ El plan Controlar empieza en 9 $ por miembro activo al mes.`,
             workspaceCurrencyNotSupported: 'Moneda del espacio de trabajo no soportada',
             yourWorkspace: `Tu espacio de trabajo está configurado en una moneda no soportada. Consulta la <a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">lista de monedas soportadas</a>.`,
             chooseAnExisting: 'Elige una cuenta bancaria existente para pagar gastos o añade una nueva.',
+            changeBankAccount: 'Cambiar cuenta bancaria',
         },
         changeOwner: {
             changeOwnerPageTitle: 'Transferir la propiedad',

src/languages/fr.ts

@@ -7067,6 +7067,7 @@ Le forfait Control commence à 9 $ par Membre actif et par mois.`,
             workspaceCurrencyNotSupported: "Devise de l'espace de travail non prise en charge",
             yourWorkspace: `Votre espace de travail est défini sur une devise non prise en charge. Consultez la <a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">liste des devises prises en charge</a>.`,
             chooseAnExisting: 'Choisissez un compte bancaire existant pour payer les dépenses ou ajoutez-en un nouveau.',
+            changeBankAccount: 'Changer de compte bancaire',
         },
         changeOwner: {
             changeOwnerPageTitle: 'Transférer le responsable',

src/languages/it.ts

@@ -7021,6 +7021,7 @@ Il piano Control parte da 9 $ al mese per ogni membro attivo.`,
             workspaceCurrencyNotSupported: 'Valuta dello spazio di lavoro non supportata',
             yourWorkspace: `La tua area di lavoro è impostata su una valuta non supportata. Visualizza l’<a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">elenco delle valute supportate</a>.`,
             chooseAnExisting: 'Scegli un conto bancario esistente per pagare le spese oppure aggiungine uno nuovo.',
+            changeBankAccount: 'Cambia conto bancario',
         },
         changeOwner: {
             changeOwnerPageTitle: 'Trasferisci proprietario',

src/languages/ja.ts

@@ -6937,6 +6937,7 @@ Control プランは、アクティブメンバー1人あたり月額 $9 から
             workspaceCurrencyNotSupported: 'ワークスペースの通貨はサポートされていません',
             yourWorkspace: `ご利用のワークスペースはサポートされていない通貨に設定されています。<a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">サポートされている通貨の一覧</a>を表示します。`,
             chooseAnExisting: '既存の銀行口座を選択して経費を支払うか、新しい口座を追加してください。',
+            changeBankAccount: '銀行口座を変更',
         },
         changeOwner: {
             changeOwnerPageTitle: '所有者を変更',

src/languages/nl.ts

@@ -7004,6 +7004,7 @@ Het Control-abonnement begint bij $9 per actieve deelnemer per maand.`,
             workspaceCurrencyNotSupported: 'Werkruimtevaluta wordt niet ondersteund',
             yourWorkspace: `Je werkruimte is ingesteld op een niet-ondersteunde valuta. Bekijk de <a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">lijst met ondersteunde valuta's</a>.`,
             chooseAnExisting: 'Kies een bestaande bankrekening om onkosten te betalen of voeg een nieuwe toe.',
+            changeBankAccount: 'Bankrekening wijzigen',
         },
         changeOwner: {
             changeOwnerPageTitle: 'Eigenaar overdragen',

src/languages/pl.ts

@@ -6984,6 +6984,7 @@ Plan Control zaczyna się od 9 USD za aktywnego członka miesięcznie.`,
             workspaceCurrencyNotSupported: 'Waluta przestrzeni roboczej nie jest obsługiwana',
             yourWorkspace: `Twoje miejsce pracy jest ustawione na nieobsługiwaną walutę. Zobacz <a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">listę obsługiwanych walut</a>.`,
             chooseAnExisting: 'Wybierz istniejące konto bankowe do opłacania wydatków lub dodaj nowe.',
+            changeBankAccount: 'Zmień konto bankowe',
         },
         changeOwner: {
             changeOwnerPageTitle: 'Przenieś właściciela',

src/languages/pt-BR.ts

@@ -6996,6 +6996,7 @@ O plano Control começa em US$ 9 por membro ativo por mês.`,
             workspaceCurrencyNotSupported: 'Moeda do workspace não suportada',
             yourWorkspace: `Seu workspace está configurado para uma moeda não compatível. Veja a <a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">lista de moedas compatíveis</a>.`,
             chooseAnExisting: 'Escolha uma conta bancária existente para pagar despesas ou adicione uma nova.',
+            changeBankAccount: 'Alterar conta bancária',
         },
         changeOwner: {
             changeOwnerPageTitle: 'Transferir proprietário',

src/languages/zh-hans.ts

@@ -6801,6 +6801,7 @@ _如需更详细的说明，请[访问我们的帮助网站](${CONST.NETSUITE_IM
             workspaceCurrencyNotSupported: '不支持工作区货币',
             yourWorkspace: `您的工作区当前使用不受支持的货币。请查看<a href="${CONST.ENABLE_GLOBAL_REIMBURSEMENT_HELP_URL}">支持的货币列表</a>。`,
             chooseAnExisting: '选择现有银行账户来支付报销，或添加新账户。',
+            changeBankAccount: '更改银行账户',
         },
         changeOwner: {
             changeOwnerPageTitle: '转移所有者',

src/libs/ExportOnyxState/common.ts

@@ -178,6 +178,7 @@ const safeOnyxKeys = new Set<string>([
     ONYXKEYS.IMPORTED_SPREADSHEET_MEMBER_ROLE,
     ONYXKEYS.INPUT_FOCUSED,
     ONYXKEYS.IS_BETA,
+    ONYXKEYS.IS_CHANGING_TO_NEW_BANK_ACCOUNT,
     ONYXKEYS.IS_COMING_FROM_GLOBAL_REIMBURSEMENTS_FLOW,
     ONYXKEYS.IS_DEBUG_MODE_ENABLED,
     ONYXKEYS.IS_GPS_IN_PROGRESS_MODAL_OPEN,

src/libs/Navigation/types.ts

@@ -2433,6 +2433,7 @@ type ReimbursementAccountNavigatorParamList = {
         policyID?: string;
         bankAccountID?: string;
         subStep?: typeof CONST.BANK_ACCOUNT.STEP.COUNTRY;
+        isChangingBankAccount?: boolean;
     };
     [SCREENS.REIMBURSEMENT_ACCOUNT_USD]: {
         page?: string;
@@ -2472,6 +2473,8 @@ type ConnectExistingBankAccountNavigatorParamList = {
         policyID: string;
         // eslint-disable-next-line no-restricted-syntax -- backTo is a temporary param will be removed after https://github.com/Expensify/App/issues/73825 is done
         backTo?: Routes;
+        /** Identifies the entry point that opened this screen, so shared logic can branch on intent */
+        source?: ValueOf<typeof CONST.BANK_ACCOUNT.CONNECT_EXISTING_SOURCE>;
     };
 };
 

src/libs/WorkflowUtils.ts

@@ -649,7 +649,12 @@ function updateWorkflowDataOnApproverRemoval({approvalWorkflows, removedApprover
 /**
  * Get eligible business bank accounts for the workspace reimbursement workflow
  */
-function getEligibleExistingBusinessBankAccounts(bankAccountList: BankAccountList | undefined, policyCurrency: string | undefined, shouldIncludePartiallySetup?: boolean) {
+function getEligibleExistingBusinessBankAccounts(
+    bankAccountList: BankAccountList | undefined,
+    policyCurrency: string | undefined,
+    shouldIncludePartiallySetup?: boolean,
+    excludeBankAccountID?: number,
+) {
     if (!bankAccountList || policyCurrency === undefined) {
         return [];
     }
@@ -658,7 +663,8 @@ function getEligibleExistingBusinessBankAccounts(bankAccountList: BankAccountLis
         return (
             account.bankCurrency === policyCurrency &&
             (account.accountData?.state === CONST.BANK_ACCOUNT.STATE.OPEN || (shouldIncludePartiallySetup && isBankAccountPartiallySetup(account.accountData?.state))) &&
-            account.accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS
+            account.accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS &&
+            account.methodID !== excludeBankAccountID
         );
     });
 }

src/libs/actions/Policy/Policy.ts

@@ -152,7 +152,7 @@ import type ReportNextStepDeprecated from '@src/types/onyx/ReportNextStepDepreca
 import type {OnyxData} from '@src/types/onyx/Request';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-import type {OnyxCollection, OnyxCollectionInputValue, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
+import type {NullishDeep, OnyxCollection, OnyxCollectionInputValue, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import type {TupleToUnion, ValueOf} from 'type-fest';
 
 /* eslint-disable max-lines */
@@ -1202,12 +1202,13 @@ function setWorkspaceReimbursement({
     ];
 
     if (bankAccountID !== undefined && bankAccountList !== undefined) {
-        const optimisticBankAccountList: BankAccountList = {};
+        const optimisticBankAccountList: NullishDeep<BankAccountList> = {};
         if (oldBankAccountID) {
             optimisticBankAccountList[oldBankAccountID] = {
                 ...optimisticBankAccountList[oldBankAccountID],
                 accountData: {
                     policyIDs: bankAccountList?.[oldBankAccountID]?.accountData?.policyIDs?.filter((id) => id !== policyID) ?? [],
+                    additionalData: {policyID: null},
                 },
             };
         }
@@ -1216,6 +1217,7 @@ function setWorkspaceReimbursement({
             ...optimisticBankAccountList[bankAccountID],
             accountData: {
                 policyIDs: [...new Set([...currentPolicyIDs, policyID])],
+                additionalData: {policyID},
             },
         };
 
@@ -1280,19 +1282,21 @@ function setWorkspaceReimbursement({
     ];
 
     if (bankAccountID !== undefined && bankAccountList !== undefined) {
-        const failureBankAccountList: BankAccountList = {};
+        const failureBankAccountList: NullishDeep<BankAccountList> = {};
         if (oldBankAccountID) {
             failureBankAccountList[oldBankAccountID] = {
                 ...failureBankAccountList[oldBankAccountID],
                 accountData: {
                     policyIDs: bankAccountList?.[oldBankAccountID]?.accountData?.policyIDs ?? [],
+                    additionalData: {policyID: bankAccountList?.[oldBankAccountID]?.accountData?.additionalData?.policyID ?? null},
                 },
             };
         }
         failureBankAccountList[bankAccountID] = {
             ...failureBankAccountList[bankAccountID],
             accountData: {
                 policyIDs: bankAccountList?.[bankAccountID]?.accountData?.policyIDs ?? [],
+                additionalData: {policyID: bankAccountList?.[bankAccountID]?.accountData?.additionalData?.policyID ?? null},
             },
         };
         failureData.push({

src/libs/actions/ReimbursementAccount/index.ts

@@ -1,3 +1,5 @@
+import mapCurrencyToCountry from '@libs/mapCurrencyToCountry';
+
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReimbursementAccountForm} from '@src/types/form';
@@ -43,6 +45,28 @@ function clearReimbursementAccount() {
     Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA);
 }
 
+/**
+ * Prepares the app to set up a new bank account by marking the account change, clearing existing data,
+ * and initializing draft with country and currency.
+ * We need to temporarily clear this data to set up new account without disconnecting existing one
+ */
+function prepareNewBankAccountSetup(currency: string) {
+    Onyx.set(ONYXKEYS.IS_CHANGING_TO_NEW_BANK_ACCOUNT, true);
+    clearReimbursementAccount();
+    clearReimbursementAccountDraft();
+    updateReimbursementAccountDraft({
+        country: mapCurrencyToCountry(currency),
+        currency,
+    });
+}
+
+/**
+ * Cancels the change to new bank account
+ */
+function cancelChangingToNewBankAccount() {
+    Onyx.set(ONYXKEYS.IS_CHANGING_TO_NEW_BANK_ACCOUNT, false);
+}
+
 /**
  * Triggers a modal to open allowing the user to reset their bank account
  */
@@ -88,4 +112,6 @@ export {
     setReimbursementAccountOptionPressed,
     updateReimbursementAccount,
     resetReimbursementAccount,
+    cancelChangingToNewBankAccount,
+    prepareNewBankAccountSetup,
 };

src/libs/actions/ReimbursementAccount/navigation.ts

@@ -21,19 +21,22 @@ function goToWithdrawalAccountSetupStep(stepID: BankAccountStep) {
  * @param [backTo] - An optional return path. If provided, it will be URL-encoded and appended to the resulting URL.
  * @param [bankAccountID] - An optional bank account ID. There can be bank accounts that are not linked to any workspace.
  * @param [navigationOptions] - Optional navigation options to customize the navigation behavior.
+ * @param [isChangingBankAccount] - Whether the user is in change bank account flow.
  */
 function navigateToBankAccountRoute({
     policyID = '',
     bankAccountID,
     backTo,
     navigationOptions,
+    isChangingBankAccount,
 }: {
     policyID?: string;
     bankAccountID?: number;
     backTo?: string;
     navigationOptions?: LinkToOptions;
+    isChangingBankAccount?: boolean;
 }) {
-    Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute({policyID, bankAccountID, backTo}), navigationOptions);
+    Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute({policyID, bankAccountID, backTo, isChangingBankAccount}), navigationOptions);
 }
 
 export {goToWithdrawalAccountSetupStep, navigateToBankAccountRoute};

src/libs/mapCurrencyToCountry.ts

@@ -1,6 +1,7 @@
+import type {Country} from '@src/CONST';
 import CONST from '@src/CONST';
 
-function mapCurrencyToCountry(currency: string): string {
+function mapCurrencyToCountry(currency: string): Country | '' {
     switch (currency) {
         case CONST.CURRENCY.USD:
             return CONST.COUNTRY.US;