[HOLD for payment 2024-12-17] [$250] Business Bank Account -"It's not here" page is displayed after selecting Business Bank Account

[izarutskaya]

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.0.66-6
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #53064
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Precondition: The default currency for individual policy is USD

1. [User B] Submit a money request to user A in USD
2. [User A] Open the chat with user B
3. [User A] Go offline
4. [User A] Press Pay with Expensify and select Business Bank Account

Expected Result:

The "Connect bank account" page is directly displayed.

Actual Result:

When the app is offline, the "It's not here" page is displayed briefly after tapping Business Bank Account. Then, the "Connect bank account" page is displayed.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Bug6676225_1732569623093.It_s_not_here_page_displayed.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864428005734930557
• Upwork Job ID: 1864428005734930557
• Last Price Increase: 2024-12-04
• Automatic offers:
• ikevin127 | Reviewer | 105204338

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

[bernhardoj]

Proposal

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

Not found page shows briefly when select business bank account payment option on a IOU request.

What is the root cause of that problem?

When we select the business bank account, it will optimistically create a new workspace and open a bank account page for that workspace. The page that was not found is showing because the policy object is still empty.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 432 to 443 in 0135d4e

	if (!isLoading && (isEmptyObject(policy) || !PolicyUtils.isPolicyAdmin(policy))) {
	return (
	<ScreenWrapper testID={ReimbursementAccountPage.displayName}>
	<FullPageNotFoundView
	shouldShow
	onBackButtonPress={PolicyUtils.goBackFromInvalidPolicy}
	onLinkPress={PolicyUtils.goBackFromInvalidPolicy}
	subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'}
	/>
	</ScreenWrapper>
	);
	}

It doesn't happen while online because we show a loading animation only when online when the ach data hasn't been loaded yet.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 423 to 430 in 0135d4e

	if (
	(!hasACHDataBeenLoaded || isLoading) &&
	shouldShowOfflineLoader &&
	(shouldReopenOnfido || !requestorStepRef?.current) &&
	!(currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && isValidateCodeActionModalVisible)
	) {
	return <ReimbursementAccountLoadingIndicator onBackButtonPress={goBack} />;
	}

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

The bank account page is wrapped with usePolicy and it passes isPolicyLoading as a prop. We can see that it's still loading after we create the new workspace optimistically. So, we can fix this by preventing the not found page from showing if the policy onyx data is still loading. We can put the isPolicyLoading prop to the isLoading variable here.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Line 406 in 0135d4e

const isLoading = (!!isLoadingApp || !!account?.isLoading || reimbursementAccount?.isLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT);

This will prevent the not found page from showing because isLoading is true.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 432 to 443 in 0135d4e

	if (!isLoading && (isEmptyObject(policy) || !PolicyUtils.isPolicyAdmin(policy))) {
	return (
	<ScreenWrapper testID={ReimbursementAccountPage.displayName}>
	<FullPageNotFoundView
	shouldShow
	onBackButtonPress={PolicyUtils.goBackFromInvalidPolicy}
	onLinkPress={PolicyUtils.goBackFromInvalidPolicy}
	subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'}
	/>
	</ScreenWrapper>
	);
	}

However, this leads to an errorText variable to have some value

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 510 to 511 in 0135d4e

	errorText = translate('bankAccount.hasCurrencyError');
	}

which will render an error view.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 513 to 526 in 0135d4e

	if (errorText) {
	return (
	<ScreenWrapper testID={ReimbursementAccountPage.displayName}>
	<HeaderWithBackButton
	title={translate('workspace.common.connectBankAccount')}
	subtitle={policyName}
	onBackButtonPress={() => Navigation.goBack()}
	/>
	<View style={[styles.m5, styles.mv3, styles.flex1]}>
	<Text>{errorText}</Text>
	</View>
	</ScreenWrapper>
	);
	}

But it's actually not shown because it switched really fast when the policy data becomes ready. But I think we can be safe by showing a loading indicator when isPolicyLoading is true. Something like this.

if (isLoadingPolicy) {
    return <FullScreenLoadingIndicator />
}

(or just return null?)

[RachCHopkins]

Needs some setup to repro - will do this Monday.

[RachCHopkins]

Goit my hands on Android, working on installing Hybridapp.

[bernhardoj]

@RachCHopkins it's reproducible on non hybrid app too from my testing.

[RachCHopkins]

I'm sorry, I simply cannot replicate this - no matter what I do, what settings I use or which device I use, the system forces it to NZD and then doesn't give an in-app payment option.

I'll need to rely on the C+ to confirm they can replicate.