[Due for payment 2026-01-07] [$250] Bank Account - Manual connect bank flow display after re-toggle on the Make or track payment

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.2.62-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2116/folder/13176703/50435143/1030266934
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 10/Chrome
App Component: Workspace Settings

Action Performed:

1. Log in as a user who is an admin of a Workspace
2. Navigate to the Workspace feature -> Workflow
3. Toggle off the Make o track payments
4. Toggle on the Make o track payments
5. Click on the Add bank account
6. Click on Log in to your bank

Expected Result:

The Plaid flow displays

Actual Result:

The manual flow displays

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021992047925390640726
• Upwork Job ID: 1992047925390640726
• Last Price Increase: 2025-11-29

Issue Owner

Current Issue Owner: @brianlee-expensify

[melvin-bot]

Triggered auto assignment to @brianlee-expensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[samranahm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

When the Plaid flow is exited (either by the user going back or when plaidData.bankAccounts is empty), the setBankAccountSubStep(null) is called in the Plaid component useEffect. This clears the substep in reimbursementAccount.achData.subStep

And when the user re-toggles the "Make or track payments" off and back on, and clicks "Add bank account" > "Log in to your bank", the system doesn't properly re-initialize the Plaid flow because the substep was cleared.

What changes do you think we should make in order to solve the problem?

we should include missing openPlaidView() call in the handleConnectPlaid function, making it consistent with how the Plaid flow is initialized in the useEffect hook when the account is validated.

removeExistingBankAccountDetails();
openPlaidView();
prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID);

App/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx

Lines 192 to 193 in 44327ad

	removeExistingBankAccountDetails();
	prepareNextStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID);

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a workspace admin toggles the "Make or track payments" setting off and then back on, clicking "Log in to your bank" to add a bank account displays the manual bank account flow instead of the expected Plaid flow.

What is the root cause of that problem?

The issue has two interconnected causes:

1. Stale reimbursementAccountOptionPressed state: The Onyx key ONYXKEYS.REIMBURSEMENT_ACCOUNT_OPTION_PRESSED persists from previous sessions with an old MANUAL value, which triggers the validation useEffect to execute the manual flow immediately when the component mounts.

2. Persistent achData.subStep value: When the VerifiedBankAccountFlowEntryPoint component mounts after toggling, the achData.subStep may contain an old MANUAL value from a previous bank account setup attempt. The BankInfo component determines which flow to show by reading reimbursementAccount?.achData?.subStep (line 48 in BankInfo.tsx). If this value is MANUAL, the manual flow displays regardless of which button the user clicked.

The validation useEffect (lines 149-170 in VerifiedBankAccountFlowEntryPoint.tsx) checks both isAccountValidated and reimbursementAccountOptionPressed. If the latter has a stale non-NONE value when the component mounts, it triggers the flow before the user has even clicked a button.

What changes do you think we should make in order to solve the problem?

In App/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx:

Change 1: Reset both option state and subStep on component mount (lines 114-118)

// Reset the reimbursement account option pressed when component mounts to ensure clean state
useEffect(() => {
    setReimbursementAccountOptionPressed(CONST.BANK_ACCOUNT.SETUP_TYPE.NONE);
    // Clear any stale subStep from previous attempts
    setBankAccountSubStep(null);
}, []);

Why: This clears both the option state and any stale achData.subStep value, ensuring a clean slate when the user opens the bank account flow.

Change 2: Add guard to validation useEffect (line 152)

// Only proceed if user has explicitly selected an option (not NONE) AND account is validated
// This prevents the effect from running with stale values when component mounts
if (!isAccountValidated || reimbursementAccountOptionPressed === CONST.BANK_ACCOUNT.SETUP_TYPE.NONE) {
    return;
}

Why: This prevents the validation effect from executing unless the user has explicitly selected an option (PLAID or MANUAL), not just on component mount with potentially stale values.

What alternative solutions did you explore? (Optional)

N/A

Demo

Screen.Recording.2025-11-22.at.3.20.17.AM.mov

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021992047925390640726

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @bernhardoj (External)

[zainAwan9175]

Proposal

Please re-state the problem that we are trying to solve in this issue.

After toggling "Make or track payments" OFF then ON in Workspace → Workflows, clicking "Add bank account" → "Log in to your bank" briefly displays the manual bank account flow before switching to the Plaid flow. The Plaid flow should display immediately without showing the manual flow first.

What is the root cause of that problem?

The subStep field in reimbursementAccount.achData persists in the server database from previous bank account setup attempts. When toggling "Make or track payments" OFF, the SetWorkspaceReimbursement API only clears local Onyx data but does not clear the server-side bank account setup data.

App/src/libs/actions/Policy/Policy.ts

Lines 928 to 998 in 1d0ce34

	function setWorkspaceReimbursement({policyID, reimbursementChoice, bankAccountID, reimburserEmail, lastPaymentMethod, shouldUpdateLastPaymentMethod}: SetWorkspaceReimbursementActionParams) {
	// This will be fixed as part of https://github.com/Expensify/Expensify/issues/507850
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	const policy = getPolicy(policyID);
	const lastUsedPaymentMethod = typeof lastPaymentMethod === 'string' ? lastPaymentMethod : lastPaymentMethod?.expense?.name;
	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	reimbursementChoice,
	isLoadingWorkspaceReimbursement: true,
	reimburser: reimburserEmail,
	achAccount: {reimburser: reimburserEmail, bankAccountID},
	errorFields: {reimbursementChoice: null},
	pendingFields: {reimbursementChoice: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
	},
	},
	];
	const successData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	isLoadingWorkspaceReimbursement: false,
	errorFields: {reimbursementChoice: null},
	pendingFields: {reimbursementChoice: null},
	},
	},
	];
	// We're using setWorkspaceReimbursement in several places, not all of which require updating the last used payment method.
	if (!lastUsedPaymentMethod && shouldUpdateLastPaymentMethod) {
	successData?.push({
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.NVP_LAST_PAYMENT_METHOD,
	value: {
	[policyID]: {
	expense: {
	name: CONST.IOU.PAYMENT_TYPE.VBBA,
	bankAccountID,
	},
	lastUsed: {
	name: CONST.IOU.PAYMENT_TYPE.VBBA,
	bankAccountID,
	},
	},
	},
	});
	}
	const failureData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	isLoadingWorkspaceReimbursement: false,
	reimbursementChoice: policy?.reimbursementChoice ?? null,
	achAccount: {reimburser: policy?.achAccount?.reimburser ?? null, bankAccountID: null},
	errorFields: {reimbursementChoice: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage')},
	pendingFields: {reimbursementChoice: null},
	},
	},
	];
	const params: SetWorkspaceReimbursementParams = {policyID, reimbursementChoice, bankAccountID};
	API.write(WRITE_COMMANDS.SET_WORKSPACE_REIMBURSEMENT, params, {optimisticData, failureData, successData});
	}

When the user toggles back ON and navigates to add a bank account, ReimbursementAccountPage calls openReimbursementAccountPage():

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Line 163 in 1d0ce34

openReimbursementAccountPage(stepToOpen, subStep, localCurrentStep, policyIDParam);

This API fetches the full bank account record from the server database, which still contains the stale subStep value. The server data is merged into Onyx, overwriting any local clears.
The BankInfo component reads subStep to determine which flow to display:

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

Line 48 in 1d0ce34

let setupType = reimbursementAccount?.achData?.subStep ?? '';

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

Line 94 in 1d0ce34

const bodyContent = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? plaidSubSteps : manualSubSteps;

If subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL, it displays the manual flow. The stale value from the server causes the wrong flow to display.

What changes do you think we should make in order to solve the problem?

Modify setWorkspaceReimbursement() in src/libs/actions/Policy/Policy.ts to call the RESET_BANK_ACCOUNT_SETUP API when disabling reimbursement. This clears the bank account setup data from the server database, not just local Onyx.

App/src/libs/actions/Policy/Policy.ts

Lines 928 to 1008 in 1d0ce34

	function setWorkspaceReimbursement({policyID, reimbursementChoice, bankAccountID, reimburserEmail, lastPaymentMethod, shouldUpdateLastPaymentMethod}: SetWorkspaceReimbursementActionParams) {
	// This will be fixed as part of https://github.com/Expensify/Expensify/issues/507850
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	const policy = getPolicy(policyID);
	const lastUsedPaymentMethod = typeof lastPaymentMethod === 'string' ? lastPaymentMethod : lastPaymentMethod?.expense?.name;
	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	reimbursementChoice,
	isLoadingWorkspaceReimbursement: true,
	reimburser: reimburserEmail,
	achAccount: {reimburser: reimburserEmail, bankAccountID},
	errorFields: {reimbursementChoice: null},
	pendingFields: {reimbursementChoice: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
	},
	},
	];
	const successData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	isLoadingWorkspaceReimbursement: false,
	errorFields: {reimbursementChoice: null},
	pendingFields: {reimbursementChoice: null},
	},
	},
	];
	// We're using setWorkspaceReimbursement in several places, not all of which require updating the last used payment method.
	if (!lastUsedPaymentMethod && shouldUpdateLastPaymentMethod) {
	successData?.push({
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.NVP_LAST_PAYMENT_METHOD,
	value: {
	[policyID]: {
	expense: {
	name: CONST.IOU.PAYMENT_TYPE.VBBA,
	bankAccountID,
	},
	lastUsed: {
	name: CONST.IOU.PAYMENT_TYPE.VBBA,
	bankAccountID,
	},
	},
	},
	});
	}
	const failureData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
	value: {
	isLoadingWorkspaceReimbursement: false,
	reimbursementChoice: policy?.reimbursementChoice ?? null,
	achAccount: {reimburser: policy?.achAccount?.reimburser ?? null, bankAccountID: null},
	errorFields: {reimbursementChoice: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage')},
	pendingFields: {reimbursementChoice: null},
	},
	},
	];
	const params: SetWorkspaceReimbursementParams = {policyID, reimbursementChoice, bankAccountID};
	API.write(WRITE_COMMANDS.SET_WORKSPACE_REIMBURSEMENT, params, {optimisticData, failureData, successData});
	}
	function leaveWorkspace(policyID?: string) {
	if (!policyID) {
	return;
	}
	const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`];
	const workspaceChats = ReportUtils.getAllWorkspaceReports(policyID);
	const optimisticData: OnyxUpdate[] = [
	{

Add the following changes in setWorkspaceReimbursement Function:

function setWorkspaceReimbursement({policyID, reimbursementChoice, bankAccountID, reimburserEmail, lastPaymentMethod, shouldUpdateLastPaymentMethod}: SetWorkspaceReimbursementActionParams) {
    // This will be fixed as part of https://github.com/Expensify/Expensify/issues/507850
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    const policy = getPolicy(policyID);
    const lastUsedPaymentMethod = typeof lastPaymentMethod === 'string' ? lastPaymentMethod : lastPaymentMethod?.expense?.name;

    // When toggling OFF reimbursement, also reset server-side bank account setup to prevent stale data
    const isTogglingOff = reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_NO;

    // ... existing optimisticData, successData, failureData, and params code ...

    API.write(WRITE_COMMANDS.SET_WORKSPACE_REIMBURSEMENT, params, {optimisticData, failureData, successData});

    // Reset server-side bank account setup when disabling reimbursement
    // This prevents stale data (like subStep) from being refetched when user re-enables and adds a bank account
    if (isTogglingOff) {
        API.write(WRITE_COMMANDS.RESET_BANK_ACCOUNT_SETUP, {policyID});
    }
}

This ensures that when the user re-enables reimbursement and adds a bank account, openReimbursementAccountPage() fetches clean data without any stale subStep value.

Result:

screen-capture.webm

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

n/A

What alternative solutions did you explore? (Optional)

Alternative: Frontend-only fix by clearing subStep before navigation
Clear subStep locally right before navigating to the bank account page in WorkspaceWorkflowsPage.tsx in the "Add bank account" button's onPress handler:

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Lines 304 to 320 in 1d0ce34

	onPress={() => {
	if (isAccountLocked) {
	showLockedAccountModal();
	return;
	}
	if (!isCurrencySupportedForGlobalReimbursement((policy?.outputCurrency ?? '') as CurrencyType, isBetaEnabled(CONST.BETAS.GLOBAL_REIMBURSEMENTS_ON_ND))) {
	setIsUpdateWorkspaceCurrencyModalOpen(true);
	return;
	}
	if (!shouldShowBankAccount && hasValidExistingAccounts && !shouldShowContinueModal) {
	Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_CONNECT_EXISTING_BANK_ACCOUNT.getRoute(route.params.policyID));
	return;
	}
	navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID));
	}}

Just Add before navigateToBankAccountRoute():

if (!shouldShowBankAccount) {
    setBankAccountSubStep(null);
}

[bernhardoj]

Thanks for the proposals!

@samranahm

When the Plaid flow is exited

From repro steps, we never exited Plaid flow, so the root cause is inaccurate. Also, prepareNextStep already sets the substep which contradict with your root cause. And please fill the first section of the proposal.

@abbasifaizan70
We only set reimbursementAccountOptionPressed if the account is invalidated, so the root cause is also inaccurate.

@zainAwan9175

When the user toggles back ON and navigates to add a bank account, ReimbursementAccountPage calls openReimbursementAccountPage():

Close, openReimbursementAccountPage is called when pressing the Connect with Plaid. Fixing this will fix the issue. Please dig more into this!

[zainAwan9175]

@bernhardoj Thank you for the feedback! You're absolutely right - I dig deeper into .

The Root Cause

The issue is a chain of events triggered by isPreviousPolicy incorrectly being TRUE after toggle OFF/ON:

1. Why isPreviousPolicy Becomes TRUE

When toggling OFF/ON "Make or track payments", setWorkspaceReimbursement() only updates the policy settings, but never clears the REIMBURSEMENT_ACCOUNT Onyx key.

Result: achData.policyID persists from the previous session.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 103 to 104 in 1d0ce34

	const achData = reimbursementAccount?.achData;
	const isPreviousPolicy = isLoadingOnyxValue(reimbursementAccountMetadata) ? true : policyIDParam === achData?.policyID;

const isPreviousPolicy = policyIDParam === achData?.policyID;
// After toggle: 'BC9BE4B1E55ED3D8' === 'BC9BE4B1E55ED3D8' = TRUE (should be FALSE!)

2. Cleanup is Skipped

Because isPreviousPolicy = TRUE, the initial cleanup useEffect exits early:

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 169 to 187 in 1d0ce34

	useEffect(() => {
	if (isPreviousPolicy) {
	return;
	}
	if (policyIDParam) {
	setReimbursementAccountLoading(true);
	}
	clearReimbursementAccountDraft();
	// If the step to open is empty, we want to clear the sub step, so the connect option view is shown to the user
	const isStepToOpenEmpty = getStepToOpenFromRouteParams(route, hasConfirmedUSDCurrency) === '';
	if (isStepToOpenEmpty) {
	setBankAccountSubStep(null);
	setPlaidEvent(null);
	}
	fetchData();
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isPreviousPolicy]); // Only re-run this effect when isPreviousPolicy changes, which happens once when the component first loads

useEffect(() => {
    if (isPreviousPolicy) {
        return;  // Exits - cleanup never runs
    }
    // This code never runs:
    setBankAccountSubStep(null);
    fetchData();
}, [isPreviousPolicy]);

3. Stale localCurrentStep Sent to Backend

When user clicks "Connect with Plaid" → goToWithdrawalAccountSetupStep() updates achData.currentStep → triggers useEffect → calls fetchData().

Because isPreviousPolicy = TRUE, fetchData() reads stale achData.currentStep:

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 155 to 163 in 1d0ce34

	let localCurrentStep: ReimbursementAccountStep = '';
	if (preserveCurrentStep) {
	localCurrentStep = currentStep;
	} else if (isPreviousPolicy) {
	localCurrentStep = achData?.currentStep ?? '';
	}
	if (policyIDParam) {
	openReimbursementAccountPage(stepToOpen, subStep, localCurrentStep, policyIDParam);

function fetchData(preserveCurrentStep = false) {
    let localCurrentStep: ReimbursementAccountStep = '';
    if (isPreviousPolicy) {  // TRUE!
        localCurrentStep = achData?.currentStep ?? '';  // Gets 'BankAccountStep'
    }
    
    openReimbursementAccountPage(stepToOpen, subStep, localCurrentStep, policyIDParam);
    // Calls API with localCurrentStep = 'BankAccountStep'
}

4. Backend Returns Full Data and Overwrites Local Changes

When openReimbursementAccountPage() is called, the backend responds differently based on the localCurrentStep parameter:

With toggle OFF/ON (broken):

• localCurrentStep = 'BankAccountStep' (stale from previous attempt)
• Backend returns full reimbursementAccount object:

  {
    "key": "reimbursementAccount",
    "onyxMethod": "set",
    "value": {
      "achData": {
        "currentStep": "BankAccountStep",
        "policyID": "BC9BE4B1E55ED3D8",
        "subStep": ""
      }
    }
  }

• The onyxMethod: "set" completely replaces REIMBURSEMENT_ACCOUNT in Onyx
• This overwrites the local subStep = 'PLAID' that was just set → becomes subStep: ""
• Manual flow displays because subStep === ''

Without toggle (works):

• localCurrentStep = '' (empty, fresh start)
• Backend returns only plaidLinkToken, without full reimbursementAccount object

• No overwrite happens, subStep = 'PLAID' persists
• Plaid flow displays correctly

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

Line 94 in 1d0ce34

const bodyContent = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? plaidSubSteps : manualSubSteps;

const bodyContent = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? plaidSubSteps : manualSubSteps;
// '' === 'plaid' → FALSE → Shows manual flow