App icon indicating copy to clipboard operation
App copied to clipboard

[$250] "Back button" on Validate your bank account page does nothing

Open nlemma opened this issue 2 weeks ago • 9 comments

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!


Version Number: 9.2.86-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: Exp around this area: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2487/folder/13176706/41236839/1089918348 Email or phone of affected tester (no customers): [email protected] Issue reported by: Applause Internal Team Bug source: Exploratory - Significant User Experience Deterioration Device used: iPhone 15 Pro / 18.6.2 App Component: Workspace Settings

Action Performed:

  1. Sign into a Beta enabled user that has validation on bank account disabled ([email protected])
  2. Go to WS
  3. Tap Company Cards > Learn more > Finish setup
  4. Tap on the back button

Expected Result:

Back button works and user can go back

Actual Result:

Nothing happens, the page freezes, even force closing the app does not fix the issue

Workaround:

Unknown

Platforms:

  • [ ] Android: App
  • [ ] Android: mWeb Chrome
  • [x] iOS: App
  • [ ] iOS: mWeb Safari
  • [ ] iOS: mWeb Chrome
  • [ ] Windows: Chrome
  • [x] MacOS: Chrome / Safari

Screenshots/Videos

https://github.com/user-attachments/assets/d5f706c9-80f8-488f-9893-1a4648bbf3cd

https://github.com/user-attachments/assets/ba412373-2c30-4bee-b0e9-70ec0e31bff7

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~022003523141103142813
  • Upwork Job ID: 2003523141103142813
  • Last Price Increase: 2025-12-23
Issue OwnerCurrent Issue Owner: @abzokhattab

nlemma avatar Dec 23 '25 11:12 nlemma

Triggered auto assignment to @sakluger (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.

melvin-bot[bot] avatar Dec 23 '25 11:12 melvin-bot[bot]

Proposal

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

The back button on the company cards “Finish setup” flow does nothing and the app appears frozen, so users cannot leave the screen after completing or viewing the bank setup.

What is the root cause of that problem?

The back handler for the bank account flow does not handle the ENABLE step (shown after a bank is connected). It falls into the default branch that tries to dismiss a modal, which is not present in this navigation context, so the UI does not go back. https://github.com/Expensify/App/blob/bbfbd4e09f662abc0edf37f8eeb86074a7c624f1/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx#L378-L424

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

Handle the ENABLE step explicitly by sending the user back to the provided backTo route, and track backTo in the hook dependencies so the handler stays in sync. Updated code:

    const goBack = useCallback(() => {
        const shouldShowOnfido = onfidoToken && !achData?.isOnfidoSetupComplete;

        switch (currentStep) {
            ....
            case CONST.BANK_ACCOUNT.STEP.ENABLE:
                Navigation.goBack(backTo);
                break;
            default:
                Navigation.dismissModal();
        }
    }, [achData, backTo, currentStep, onfidoToken]);

https://github.com/user-attachments/assets/0dbd24cb-156f-41b7-aa3b-82195d47290a

ShridharGoel avatar Dec 23 '25 12:12 ShridharGoel

Proposal

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

Nothing happens, the page freezes, even force closing the app does not fix the issue

What is the root cause of that problem?

this step is CONST.BANK_ACCOUNT.STEP.VALIDATION

https://github.com/Expensify/App/blob/bbfbd4e09f662abc0edf37f8eeb86074a7c624f1/src/pages/ReimbursementAccount/USD/USDVerifiedBankAccountFlow.tsx#L76-L83

https://github.com/Expensify/App/blob/bbfbd4e09f662abc0edf37f8eeb86074a7c624f1/src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx#L64-L67

We only call the goBack with no target function in case CONST.BANK_ACCOUNT.STEP.VALIDATION here

https://github.com/Expensify/App/blob/bbfbd4e09f662abc0edf37f8eeb86074a7c624f1/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx#L414-L420

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

We should update the goBack logic for CONST.BANK_ACCOUNT.STEP.VALIDATION

            case CONST.BANK_ACCOUNT.STEP.VALIDATION:
                if ([CONST.BANK_ACCOUNT.STATE.VERIFYING, CONST.BANK_ACCOUNT.STATE.SETUP].some((value) => value === achData?.state)) {
                    goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT);
                } else {
                    if (backTo) {
                        Navigation.goBack(backTo);
                    } else {
                        Navigation.dismissModal();
                    }
                }
                break;

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.

daledah avatar Dec 23 '25 12:12 daledah

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

melvin-bot[bot] avatar Dec 23 '25 17:12 melvin-bot[bot]

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

melvin-bot[bot] avatar Dec 23 '25 17:12 melvin-bot[bot]

Proposal

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

"Back button" on Validate your bank account page does nothing

What is the root cause of that problem?

When achData.state is PENDING (validation disabled), the condition fails. It falls into the else block and calls Navigation.goBack() without a fallback route. If there's no previous screen in the navigation stack (or canGoBack() returns false), the navigation does nothing

Thus, it causes the page to freeze because the back button doesn't work

https://github.com/Expensify/App/blob/0bfe12f3af82e47220af5419a06e6055a9582619/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx#L414-L420

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

We handle the back navigation by resetting to the entry point (the "Continue Setup" screen), similar to how the COUNTRY step handles it

            case CONST.BANK_ACCOUNT.STEP.VALIDATION:
                if ([CONST.BANK_ACCOUNT.STATE.VERIFYING, CONST.BANK_ACCOUNT.STATE.SETUP].some((value) => value === achData?.state)) {
                    goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT);
                } else {
                    // When validation is disabled (PENDING state), go back to the entry point
                    setShouldShowContinueSetupButton(true);
                    setUSDBankAccountStep(null);
                }
                break;

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.

lorretheboy avatar Dec 23 '25 19:12 lorretheboy

Proposal

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

On the "Validate your bank account" page, the back button doesn't work when the account is in PENDING. Clicking it does freeze's the page, which indicates a navigation failure.

What is the root cause of that problem?

In ReimbursementAccountPage.tsx, the goBack handler for the VALIDATION step doesn't handle the PENDING state. When state is PENDING, it falls through to Navigation.goBack(), which can fail because navigation was initiated from Company Cards. The handler only covers VERIFYING and SETUP, so PENDING isn't handled.

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

Update the VALIDATION case in goBack() to handle PENDING state explicitly and handle back navigation respecting backTo:

  1. When state is PENDING: navigate back to the entry point by setting USDBankAccountStep to null and shouldShowContinueSetupButton to true.
  2. Fallback: use backTo if available; otherwise use Navigation.goBack().
  3. Add backTo to the useCallback dependency array.

This matches the pattern used in other steps (e.g., COUNTRY) and ensures users can navigate back when the account is PENDING.

What alternative solutions did you explore? (Optional)

  1. Always use Navigation.goBack(backTo) when backTo exists: but this will not work because PENDING needs to reset to the entry point.
  2. Navigate to a specific route: rejected because resetting state is simpler and consistent with existing patterns.

h7nj9 avatar Dec 24 '25 19:12 h7nj9

📣 @h7nj9! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

  1. Make sure you've read and understood the contributing guidelines.
  2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
  3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
  4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Screen Shot 2022-11-16 at 4 42 54 PM Format:
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

melvin-bot[bot] avatar Dec 24 '25 19:12 melvin-bot[bot]

Reviewing ...

abzokhattab avatar Dec 25 '25 13:12 abzokhattab

@ShridharGoel @daledah @lorretheboy @h7nj9 Thanks for your proposals. After testing, none of them fixed the issue .. I still encounter the bug with all of the suggested solutions.

abzokhattab avatar Dec 29 '25 13:12 abzokhattab

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

melvin-bot[bot] avatar Dec 30 '25 16:12 melvin-bot[bot]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

yatin-italy avatar Dec 31 '25 05:12 yatin-italy

⚠️ @yatin-italy Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

github-actions[bot] avatar Dec 31 '25 05:12 github-actions[bot]

Proposal

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

When a user presses Back on the “Validate your bank account” screen, the app does nothing and appears frozen. This only happens when the user enters the Bank Account Setup flow via “Finish setup” while bank account validation is disabled, leaving the user stuck with no way to exit the screen.

What is the root cause of that problem?

The Back button calls Navigation.goBack(), but in this flow there is no previous route in the navigation stack, so the call silently fails. Additionally, the Bank Account Setup steps are managed inconsistently, and when validation is disabled, certain states aren’t handled, resulting in a dead-end screen with no valid exit path.

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

  • Introduce a dedicated helper function in ReimbursementAccountPage.tsx (e.g., resetBankAccountStep) that fully exits the Bank Account Setup flow by resetting:

    • USDBankAccountStep
    • BankAccountSubStep
    • NonUSDBankAccountStep This ensures a clean and consistent exit from the flow and prevents partial state resets.
  • Refactor the goBack logic for the VALIDATION step:

    • Explicitly check for the PENDING state (validation disabled) and other non-verifying states instead of relying on a generic fallback.
    • When in these states, call resetBankAccountStep() to return the user to the VerifiedBankAccountFlowEntryPoint.
    • Optionally set setShouldShowContinueSetupButton(true) to preserve the expected UI affordance.
  • Refactor the goBack logic for the COUNTRY step:

    • Replace existing ad-hoc state resets with the same resetBankAccountStep() helper.
    • This aligns the exit behavior of COUNTRY and VALIDATION steps and improves long-term maintainability.
  • Critical distinction:

    • Clearing the step state renders the entry point, which already handles backTo navigation.
    • This avoids relying on Navigation.goBack() when the navigation stack may be empty, eliminating the freeze.

What alternative solutions did you explore? (Optional)

  • Directly calling Navigation.goBack(backTo) in all cases, which risks additional failures if the stack is still invalid.
  • Injecting a fallback route into the navigation stack, which adds complexity and deviates from the state-driven design of the flow.
  • Disabling the Back button on the Validation screen, which would degrade user experience.

The chosen solution is preferred because it fixes the root cause, improves structural consistency, and future-proofs the Bank Account Setup flow against similar navigation issues.

yatin-italy avatar Dec 31 '25 05:12 yatin-italy

@abzokhattab Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

melvin-bot[bot] avatar Jan 02 '26 00:01 melvin-bot[bot]