fix: not validated account edgecase

Author: MrMuzyk

src/CONST/index.ts

@@ -487,11 +487,6 @@ const CONST = {
         },
         STEP_NAMES: ['1', '2', '3', '4', '5', '6'],
         STEPS_HEADER_HEIGHT: 40,
-        SUBSTEP: {
-            MANUAL: 'manual',
-            PLAID: 'plaid',
-            EMPTY: '',
-        },
         VERIFICATIONS: {
             ERROR_MESSAGE: 'verifications.errorMessage',
             THROTTLED: 'verifications.throttled',
@@ -510,6 +505,7 @@ const CONST = {
         SETUP_TYPE: {
             MANUAL: 'manual',
             PLAID: 'plaid',
+            EMPTY: '',
         },
         REGEX: {
             US_ACCOUNT_NUMBER: /^[0-9]{4,17}$/,

src/ONYXKEYS.ts

@@ -304,6 +304,9 @@ const ONYXKEYS = {
     /** Stores Workspace ID that will be tied to reimbursement account during setup */
     REIMBURSEMENT_ACCOUNT_WORKSPACE_ID: 'reimbursementAccountWorkspaceID',
 
+    /** Stores information about type of connection user wants to perform before showing him validation code modal */
+    REIMBURSEMENT_ACCOUNT_OPTION_PRESSED: 'reimbursementAccountOptionPressed',
+
     /** Set when we are loading payment methods */
     IS_LOADING_PAYMENT_METHODS: 'isLoadingPaymentMethods',
 
@@ -1104,6 +1107,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.PURCHASE_LIST]: OnyxTypes.PurchaseList;
     [ONYXKEYS.PERSONAL_BANK_ACCOUNT]: OnyxTypes.PersonalBankAccount;
     [ONYXKEYS.REIMBURSEMENT_ACCOUNT]: OnyxTypes.ReimbursementAccount;
+    [ONYXKEYS.REIMBURSEMENT_ACCOUNT_OPTION_PRESSED]: ValueOf<typeof CONST.BANK_ACCOUNT.SETUP_TYPE>;
     [ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE]: string | number;
     [ONYXKEYS.FREQUENTLY_USED_EMOJIS]: OnyxTypes.FrequentlyUsedEmoji[];
     [ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID]: string;

src/libs/actions/ReimbursementAccount/index.ts

@@ -1,4 +1,6 @@
 import Onyx from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReimbursementAccountForm} from '@src/types/form';
 import type {BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount';
@@ -49,6 +51,13 @@ function cancelResetBankAccount() {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {shouldShowResetModal: false});
 }
 
+/**
+ *  Sets pressed option during connecting reimbursement account
+ */
+function setReimbursementAccountOptionPressed(optionPressed: ValueOf<typeof CONST.BANK_ACCOUNT.SETUP_TYPE>) {
+    Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT_OPTION_PRESSED, optionPressed);
+}
+
 export {
     resetUSDBankAccount,
     resetNonUSDBankAccount,
@@ -59,4 +68,5 @@ export {
     cancelResetBankAccount,
     clearReimbursementAccountDraft,
     setBankAccountState,
+    setReimbursementAccountOptionPressed,
 };

src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

@@ -93,26 +93,23 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen
         : `${environmentURL}/${ROUTES.WORKSPACE_INITIAL.getRoute(policyIDParam, Navigation.getActiveRoute())}`;
 
     const contactMethodRoute = `${environmentURL}/${ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo)}`;
-
-    /**
-     The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
-     user left off. This view will refer to the achData as the single source of truth to determine which route to
-     display. We can also specify a specific route to navigate to via route params when the component first
-     mounts which will set the achData.currentStep after the account data is fetched and overwrite the logical
-     next step.
-     */
     const achData = reimbursementAccount?.achData;
     const isPreviousPolicy = policyIDParam === achData?.policyID;
     const hasConfirmedUSDCurrency = (reimbursementAccountDraft?.[INPUT_IDS.ADDITIONAL_DATA.COUNTRY] ?? '') !== '' || (achData?.accountNumber ?? '') !== '';
 
+    /**
+     currentStep determines the step that is displayed in the USD flow. In the majority of the cases it is based on the
+     achData?.current step with one exception - the beginning of the flow. There is a step where user confirms the currency
+     and the country, and it exists purely from FE perspective. We return early in getInitialCurrentStep and ignore
+     achData?.currentStep value to display very first step.
+     */
     const getInitialCurrentStep = () => {
         if (!hasConfirmedUSDCurrency) {
             return CONST.BANK_ACCOUNT.STEP.COUNTRY;
         }
 
         return achData?.currentStep ?? CONST.BANK_ACCOUNT.STEP.COUNTRY;
     };
-
     const currentStep = getInitialCurrentStep();
     const [nonUSDBankAccountStep, setNonUSDBankAccountStep] = useState<string | null>(null);
     const [USDBankAccountStep, setUSDBankAccountStep] = useState<string | null>(null);
@@ -258,7 +255,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen
     );
 
     const continueUSDVBBASetup = useCallback(() => {
-        const subStep = achData?.subStep !== undefined ? achData.subStep : CONST.BANK_ACCOUNT.SUBSTEP.MANUAL;
+        const subStep = achData?.subStep !== undefined ? achData.subStep : CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
 
         setBankAccountSubStep(subStep).then(() => {
             setShouldShowContinueSetupButton(false);

src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx

@@ -46,7 +46,7 @@ function BankInfo({onBackButtonPress, policyID, setUSDBankAccountStep}: BankInfo
 
     let setupType = reimbursementAccount?.achData?.setupType ?? reimbursementAccount?.achData?.subStep ?? '';
 
-    const shouldReinitializePlaidLink = plaidLinkToken && receivedRedirectURI && setupType !== CONST.BANK_ACCOUNT.SUBSTEP.MANUAL;
+    const shouldReinitializePlaidLink = plaidLinkToken && receivedRedirectURI && setupType !== CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
     if (shouldReinitializePlaidLink) {
         setupType = CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID;
     }

src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx

@@ -1,6 +1,7 @@
-import React, {useEffect, useMemo, useRef} from 'react';
+import React, {useCallback, useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import {Bank, Connect, Lightbulb, Lock, RotateLeft} from '@components/Icon/Expensicons';
@@ -25,7 +26,7 @@ import {REIMBURSEMENT_ACCOUNT_ROUTE_NAMES} from '@libs/ReimbursementAccountUtils
 import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal';
 import {goToWithdrawalAccountSetupStep, openPlaidView, updateReimbursementAccountDraft} from '@userActions/BankAccounts';
 import {openExternalLink, openExternalLinkWithToken} from '@userActions/Link';
-import {requestResetBankAccount, resetReimbursementAccount, setBankAccountSubStep} from '@userActions/ReimbursementAccount';
+import {requestResetBankAccount, resetReimbursementAccount, setBankAccountSubStep, setReimbursementAccountOptionPressed} from '@userActions/ReimbursementAccount';
 import {clearContactMethodErrors, requestValidateCodeAction, validateSecondaryLogin} from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -96,7 +97,7 @@ function VerifiedBankAccountFlowEntryPoint({
     const errors = reimbursementAccount?.errors ?? {};
     const pendingAction = reimbursementAccount?.pendingAction ?? null;
     const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST, {canBeMissing: true});
-    const optionPressed = useRef('');
+    const [reimbursementAccountOptionPressed] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT_OPTION_PRESSED, {canBeMissing: true});
     const isAccountValidated = account?.validated ?? false;
 
     const contactMethod = account?.primaryLogin ?? '';
@@ -119,6 +120,18 @@ function VerifiedBankAccountFlowEntryPoint({
         updateReimbursementAccountDraft(bankAccountData);
     };
 
+    /**
+     * Prepares and redirects user to next step in the USD flow
+     */
+    const prepareNextStep = useCallback(
+        (setupType: ValueOf<typeof CONST.BANK_ACCOUNT.SETUP_TYPE>) => {
+            setBankAccountSubStep(setupType);
+            setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.COUNTRY);
+            goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COUNTRY);
+        },
+        [setUSDBankAccountStep],
+    );
+
     /**
      * optionPressed ref indicates what user selected before modal to validate account was displayed
      * In this hook we check if account was validated and then proceed with the option user selected
@@ -129,23 +142,25 @@ function VerifiedBankAccountFlowEntryPoint({
             return;
         }
 
-        if (optionPressed.current === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) {
+        if (reimbursementAccountOptionPressed === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) {
             if (isNonUSDWorkspace) {
                 setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY);
+                setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.EMPTY);
                 return;
             }
 
-            setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
-            goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COUNTRY);
-        } else if (optionPressed.current === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
+            prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
+            setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.EMPTY);
+        } else if (reimbursementAccountOptionPressed === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
             openPlaidView();
-            goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COUNTRY);
+            prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID);
+            setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.EMPTY);
         }
-    }, [isAccountValidated, isNonUSDWorkspace, setNonUSDBankAccountStep]);
+    }, [isAccountValidated, isNonUSDWorkspace, prepareNextStep, reimbursementAccountOptionPressed, setNonUSDBankAccountStep]);
 
     const handleConnectManually = () => {
         if (!isAccountValidated) {
-            optionPressed.current = CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
+            setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
             toggleValidateCodeActionModal?.(true);
             return;
         }
@@ -156,9 +171,7 @@ function VerifiedBankAccountFlowEntryPoint({
         }
 
         removeExistingBankAccountDetails();
-        setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
-        setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.COUNTRY);
-        goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COUNTRY);
+        prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
     };
 
     const handleConnectPlaid = () => {
@@ -167,15 +180,13 @@ function VerifiedBankAccountFlowEntryPoint({
         }
 
         if (!isAccountValidated) {
-            optionPressed.current = CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID;
+            setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID);
             toggleValidateCodeActionModal?.(true);
             return;
         }
 
         removeExistingBankAccountDetails();
-        setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID);
-        setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.COUNTRY);
-        goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COUNTRY);
+        prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID);
     };
 
     return (

src/types/onyx/ReimbursementAccount.ts

@@ -11,7 +11,7 @@ import type * as OnyxCommon from './OnyxCommon';
 type BankAccountStep = ValueOf<typeof CONST.BANK_ACCOUNT.STEP>;
 
 /** Substeps to setup a reimbursement bank account */
-type BankAccountSubStep = ValueOf<typeof CONST.BANK_ACCOUNT.SUBSTEP>;
+type BankAccountSubStep = ValueOf<typeof CONST.BANK_ACCOUNT.SETUP_TYPE>;
 
 /** Model of Corpay data */
 type Corpay = {