[Due for payment 2025-05-22] [$250] Bank account - "Business bank account details" page becomes blank after return online

[mitarachim]

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.1.30-0
Reproducible in staging?: Yes
Reproducible in production?: Unable to check
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: No, reproducible on hybrid only
If this was caught during regression testing, add the test name, ID and link from TestRail: #56931
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Workspace Settings

Action Performed:

1. Go to staging.new.expensify.com
2. Create a workspace with EUR as default currency.
3. Go to workspace settings > Workflows.
4. Click Connect bank account.
5. Tap Connect manually.
6. Click Country.
7. Select any country.
8. Click Confirm.
9. On "What are your business bank account details?" page, go offline.
10. Go online.

Expected Result:

After returning online, the page will not be blank.

Actual Result:

After returning online, the page becomes blank.
When returning to previous page, Country field is cleared.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6806801_1745016793926.20250419_064717.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021914413773616142569
• Upwork Job ID: 1914413773616142569
• Last Price Increase: 2025-04-21

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (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]

Triggered auto assignment to @marcaaron (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[hungvu193]

Not a blocker. GR is under beta. cc @burczu

[yuwenmemon]

Coming from the perspective of the Web Deploy, I removed the DeployBlocker label.

Not a blocker. GR is under beta. cc @burczu

[alexpensify]

@marcaaron, since this isn't a deploy blocker, I moved it to Daily. Is this one ready for the External label or should it be handled internally? Thanks!

[melvin-bot]

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

[melvin-bot]

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

[Monti-27]

Proposal

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

When a user is on the "Business bank account details" page, goes offline, and then returns online, the page content remains blank. The expected bank account information fails to load automatically after the network connection is restored.

What is the root cause of that problem?

The root cause is that the component responsible for displaying the bank account details does not automatically trigger a data refresh when the network status changes from offline to online. While the app likely detects the reconnection globally (e.g., via listeners connected to src/libs/NetworkConnection.ts), this specific component either isn't subscribed to this network change event or doesn't react to it by re-fetching the necessary data (potentially managed via Onyx with keys like ONYXKEYS.REIMBURSEMENT_ACCOUNT or similar defined in src/ONYXKEYS.ts).

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

We need to ensure that the component responsible for this view (likely within src/pages/settings/Wallet/) explicitly re-fetches its data upon reconnection.

The plan is:

1. Connect to Network State: Wrap the component with withNetwork (e.g., from @components/withNetwork) to inject the network prop.
2. Implement Re-fetch Logic: Add a useEffect hook that monitors network.isOffline.
3. Trigger API Call: Inside the useEffect, when the status changes from offline to online, call the appropriate action/API (e.g., from src/libs/actions/BankAccounts.ts or src/libs/API/) to refresh the bank account data.

Here's the core logic snippet illustrating the useEffect hook:

import React, {useEffect, useRef} from 'react';
// Adjust import paths as needed
import withNetwork from '@components/withNetwork';
import * as BankAccounts from '@libs/actions/BankAccounts';

function BusinessBankAccountDetailsPage({ network, /* other props */ }) {
    const prevIsOffline = useRef(network.isOffline);

    useEffect(() => {
        // Re-fetch data when coming back online
        if (prevIsOffline.current && !network.isOffline) {
            BankAccounts.openPersonalBankAccountPage(); // Or the relevant refresh action
        }
        prevIsOffline.current = network.isOffline;
    }, [network.isOffline]);

    // ... Rest of component rendering logic using data from Onyx ...
    return ( /* JSX */ );
}

// Ensure the component is wrapped with withNetwork HOC
export default withNetwork()(/* potentially other HOCs like withOnyx */(BusinessBankAccountDetailsPage));

This hook ensures the data refresh action is called precisely when the app transitions back online.

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

We need tests specifically targeting the offline-to-online transition for this page:

1. Basic Reconnect Test: Simulate navigating to the page, going offline, then online. Verify the bank details load automatically and the refresh API was called.
2. Rapid Toggle Test: Quickly toggle network offline/online. Ensure the page settles correctly and the API isn't called excessively.
3. Stale Data Check: If feasible, ensure fresh data is displayed after reconnecting, not stale cached data.

These tests should run across iOS, Android, and Web platforms.

Contributor details

Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01f2c6d03de4b6e443

Looking forward to work on the issue

[alexpensify]

@MrMuzyk - I've assigned this GH to you, so you can help with the update. Thanks!

[MrMuzyk]

Because there were other issues with the flow and they're all relatively small we've decided to fix all of them in one big follow-up issue - #60633

[marcaaron]

Seems fix is in progress here.

[MrMuzyk]

PR that fixes it just got merged. This will be ready to be retested soon.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.45-21 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Global Reimbursements fixes and improvements #60696

If no regressions arise, payment will be issued on 2025-05-22. 🎊

For reference, here are some details about the assignees on this issue:

• @MrMuzyk does not require payment (Contractor)
• @jjcoffee requires payment through NewDot Manual Requests

[melvin-bot]

@jjcoffee @alexpensify @jjcoffee The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[jjcoffee]

No payment required for me as I didn't work on this. @alexpensify can you unassign me?

[melvin-bot]

Skipping the payment summary for this issue since all the assignees are employees or vendors. If this is incorrect, please manually add the payment summary SO.

[alexpensify]

Closing - I believe that @hungvu193 will be paid via the Project GH.