[$250] Add BA - Nothing happens after clicking "Update details" for pending bank account

[unzig21]

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: 9.3.69-3
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #86645
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: MacBook Air 15.7.4 Chrome, iPhone 15 iOS 26.3.1
App Component: Workspace Settings

Action Performed:

1. Sign in to ND with a validated account
2. Go to Workspace > Workflows
3. Click Add bank account
4. Proceed with the flow of adding Plaid 1111 BA
5. On the Company Tax ID Number page enter one wrong digit like "123455789"
6. On the final page click "Save and continue"
7. Click "Update details" on the "Let's finish in chat!" RHP

Expected Result:

User is navigated to the Personal info RHP (Prod behavior)

Actual Result:

Nothing happens after clicking "Update details" push row for pending bank account

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7148877_1778283534176.Update_details_nothing_happens.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022053037903875657675
• Upwork Job ID: 2053037903875657675
• Last Price Increase: 2026-05-09

[MelvinBot]

Proposal

What is the root cause of that problem?

The "Update details" button in FinishChatCard.tsx:79-83 is effectively a no-op in the new route-based USD bank account flow. The handler calls two things after setBankAccountSubStep:

1. setUSDBankAccountStep?.(CONST.BANK_ACCOUNT.STEP.REQUESTOR) — this is always undefined because USDVerifiedBankAccountFlowPage never passes setUSDBankAccountStep to its child pages (it's not part of USDPageProps), so the optional chain is a no-op.
2. goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR) — this only does Onyx.merge to update achData.currentStep in Onyx without calling Navigation.navigate(). In the new route-based flow, Onyx state changes alone don't trigger page transitions.

Neither call performs actual navigation, so the user sees nothing happen.

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

Add a Navigation.navigate() call to the "Update details" onPress handler in FinishChatCard.tsx, navigating to the Requestor step route after setting the Onyx state. This matches the working pattern in continueUSDVBBASetup which correctly calls Navigation.navigate(ROUTES.BANK_ACCOUNT_USD_SETUP.getRoute({policyID, page, backTo})) after updating Onyx. The policyID is already available via reimbursementAccount?.achData?.policyID on line 41.

What alternative solutions did you explore? (Optional)

An alternative would be to thread setUSDBankAccountStep through USDVerifiedBankAccountFlowPage by adding it to USDPageProps. However, that would fight against the new route-based architecture which intentionally moved away from state-driven page transitions. Directly navigating is the cleaner, idiomatic approach for the new flow.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[KJ21-ENG]

Replaces my earlier proposal. The root cause and fix are unchanged, but review confirmed the attached video leaves the user on /bank-account/new/us/validation after pressing "Update details"; I also added the required comparison to MelvinBot and the later proposal.

Proposal

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

After a USD workspace bank account reaches the "Let's finish in chat!" validation state, clicking the "Update details" row should reopen the Personal info step so the user can correct the bank account requestor details. Instead, the row does not move the user away from the validation/final chat screen.

The reviewed video matches that state: after the final click, the URL remains on bank-account/new/us/validation and the same "Let's finish in chat!" card stays mounted.

What is the root cause of that problem?

PR #86645 moved the USD reimbursement-account flow to URL-based pages. The USD navigator now chooses the current page from the URL param and renders that page directly:

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

Lines 69 to 87 in 39d1d17

	function USDVerifiedBankAccountFlowPage({route}: USDVerifiedBankAccountFlowPageProps) {
	const styles = useThemeStyles();
	const policyID = route.params?.policyID;
	const currentPage = route.params?.page;
	const currentSubPage = route.params?.subPage;
	const backTo = route.params?.backTo;
	const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
	const requestorStepRef = useRef<View>(null);
	const isOnfidoSetupComplete = reimbursementAccount?.achData?.isOnfidoSetupComplete;
	const currentPageIndex = useMemo(() => {
	const index = pages.findIndex((p) => p.pageName === currentPage);
	return index >= 0 ? index : 0;
	}, [currentPage]);
	const currentEntry = pages.at(currentPageIndex);
	const CurrentPage = currentEntry?.component ?? (Country as React.ComponentType<USDPageProps>);

When that route renders the validation page, it passes only onSubmit, onBackButtonPress, policyID, currentSubPage, stepNames, ref, and backTo to the current page:

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

Lines 118 to 128 in 39d1d17

	return (
	<View style={[styles.flex1, styles.appBG]}>
	<CurrentPage
	onSubmit={onSubmit}
	onBackButtonPress={onBackButtonPress}
	policyID={policyID}
	currentSubPage={currentSubPage}
	stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
	ref={isRequestorStep ? requestorStepRef : undefined}
	backTo={backTo}
	/>

ConnectBankAccount still passes an optional setUSDBankAccountStep down to FinishChatCard, but in the URL-based route that prop is never supplied:

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

Lines 115 to 119 in 39d1d17

	<FinishChatCard
	requiresTwoFactorAuth={requiresTwoFactorAuth}
	reimbursementAccount={reimbursementAccount}
	setUSDBankAccountStep={setUSDBankAccountStep}
	/>

The "Update details" handler only sets the old local step state when that optional prop exists, then writes the requestor step to Onyx:

App/src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/FinishChatCard.tsx

Lines 76 to 84 in 39d1d17

	<MenuItem
	icon={icons.Pencil}
	title={translate('workspace.bankAccount.updateDetails')}
	onPress={() => {
	setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL).then(() => {
	setUSDBankAccountStep?.(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
	goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
	});
	}}

That Onyx write does not navigate; goToWithdrawalAccountSetupStep only merges achData.currentStep:

App/src/libs/actions/ReimbursementAccount/navigation.ts

Lines 11 to 13 in 39d1d17

	function goToWithdrawalAccountSetupStep(stepID: BankAccountStep) {
	Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {currentStep: stepID}});
	}

So after the route-based refactor, the handler updates state that does not drive the mounted USD page. The screen remains on BANK_ACCOUNT_USD_SETUP with page=validation, which makes the click look like a no-op.

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

Update FinishChatCard to use the route-based USD flow when opening Personal info. The handler should keep setting the setup type to manual and keep writing REQUESTOR via goToWithdrawalAccountSetupStep, then navigate to ROUTES.BANK_ACCOUNT_USD_SETUP.getRoute({policyID, page: CONST.BANK_ACCOUNT.PAGE_NAMES.REQUESTOR, subPage: CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.SUB_PAGE_NAMES.FULL_NAME, backTo}) instead of relying on setUSDBankAccountStep.

To preserve the existing navigation context, pass backTo from USDVerifiedBankAccountFlowPage through ConnectBankAccount to FinishChatCard, or read the active route params there with the existing navigation route prop pattern. The route builder already supports the USD page/subpage shape:

App/src/ROUTES.ts

Lines 693 to 703 in 39d1d17

	BANK_ACCOUNT_USD_SETUP: {
	route: 'bank-account/new/us/:page?/:subPage?/:action?',
	getRoute: ({policyID, page, subPage, action, backTo}: {policyID?: string; page?: string; subPage?: string; action?: 'edit'; backTo?: string}) => {
	const base = 'bank-account/new/us';
	const pagePart = page ? `/${page}` : '';
	const subPagePart = subPage ? `/${subPage}` : '';
	const actionPart = action ? `/${action}` : '';
	const queryString = policyID ? `?policyID=${policyID}` : '';
	// eslint-disable-next-line no-restricted-syntax -- Legacy route generation
	return getUrlWithBackToParam(`${base}${pagePart}${subPagePart}${actionPart}${queryString}`, backTo);
	},

The target page names are already defined as personal-info and full-name:

App/src/CONST/index.ts

Lines 630 to 655 in 39d1d17

	PAGE_NAMES: {
	COUNTRY: 'currency-and-country',
	BANK_ACCOUNT: 'bank-info',
	REQUESTOR: 'personal-info',
	VERIFY_IDENTITY: 'verify-identity',
	COMPANY: 'company',
	BENEFICIAL_OWNERS: 'business-owner',
	ACH_CONTRACT: 'ach-contract',
	VALIDATION: 'validation',
	ENABLE: 'enable',
	},
	STEP_NAMES: ['1', '2', '3', '4', '5', '6'],
	BANK_INFO_STEP: {
	SUB_PAGE_NAMES: {
	MANUAL: 'manual',
	PLAID: 'plaid',
	},
	},
	PERSONAL_INFO_STEP: {
	SUB_PAGE_NAMES: {
	FULL_NAME: 'full-name',
	DATE_OF_BIRTH: 'date-of-birth',
	SSN: 'ssn',
	ADDRESS: 'address',
	CONFIRMATION: 'confirmation',
	},

Scope boundaries: files touched are src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/FinishChatCard.tsx -- the Update details menu item handler, and src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx plus src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlowPage.tsx only if needed to pass backTo. Platforms affected are web, mWeb, and native via the shared USD reimbursement-account route. Code paths not touched are non-USD bank-account setup, personal wallet bank-account setup, Plaid connection, validation code entry, Concierge chat navigation, and backend/API contracts. No API or server behavior changes are required.

What alternative solutions did you explore? (Optional)

MelvinBot identified the same missing Navigation.navigate() boundary in FinishChatCard. I agree with that direction; the important implementation detail is to navigate to the actual USD Personal info subpage and preserve the current backTo context, rather than restoring the old local setUSDBankAccountStep navigation path.

The later proposal also points at the pending-state guard in ReimbursementAccountPage. That guard explains why an Onyx-only requestor-step write does not solve this flow, but changing it would alter the initial pending-account routing contract. Navigating from the "Update details" action is narrower and matches the URL-based USD flow.

I also considered changing the pending/verifying-state effect in ReimbursementAccountPage, but that root screen is no longer the active page controller once the user is inside BANK_ACCOUNT_USD_SETUP; USDVerifiedBankAccountFlowPage drives the mounted page from the URL.

[Abdulloh0109]

Proposal

What is the root cause of that problem?

The "Update details" button in FinishChatCard.tsx only updates Onyx state — it does not navigate.

In src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/FinishChatCard.tsx:79-84, the onPress handler calls setBankAccountSubStep, setUSDBankAccountStep, and goToWithdrawalAccountSetupStep. None of these call Navigation.navigate. goToWithdrawalAccountSetupStep (in src/libs/actions/ReimbursementAccount/navigation.ts:11-13) only merges {achData: {currentStep}} into Onyx.

When the bank account is in PENDING state, the effect in src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx:258-261 immediately overrides any currentStep change back to VALIDATION. So the Onyx merge from "Update details" is reverted on the next render, and the screen does not change.

The "Continue setup" path in the same file (ReimbursementAccountPage.tsx:348-363) works because it explicitly calls Navigation.navigate(ROUTES.BANK_ACCOUNT_USD_SETUP.getRoute({policyID, page, backTo})).

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

In FinishChatCard.tsx, inside the "Update details" onPress handler at lines 79-84, after goToWithdrawalAccountSetupStep, add a Navigation.navigate call to ROUTES.BANK_ACCOUNT_USD_SETUP with page: CONST.BANK_ACCOUNT.PAGE_NAMES.REQUESTOR and the existing policyID from line 41.

This mirrors the working continueUSDVBBASetup pattern in ReimbursementAccountPage.tsx:348-363.

Frontend only. One file touched: FinishChatCard.tsx. All platforms.

What alternative solutions did you explore? (Optional)

Considered relaxing the PENDING-state guard in ReimbursementAccountPage.tsx:258-261 to allow REQUESTOR step changes. Rejected — that guard protects the initial-load flow for pending accounts; changing it risks regressions in other entry points. A direct Navigation.navigate in FinishChatCard is more isolated.

[github-actions]

⚠️ @Abdulloh0109 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).