Wallet - Not here page is opened from "Add payment method" button when app is loading

[lanitochka17]

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.1.7-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
**If this was caught during regression testing, add the test name, ID and link from TestRail:**N/A
Email or phone of affected tester (no customers): applausetester+sj9032@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Settings > Troubleshoot
3. Click Clear cache and restart > Reset and refresh
4. While app is loading, go to Wallet
5. Click Add payment method

Expected Result:

"Add payment method" button should not be accessible when app is loading

Actual Result:

"Add payment method" button is accessible when app is loading and it leads to not here page

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

Add any screenshot/video evidence

Bug6757600_1740754932943.20250228_225908.mp4

View all open jobs on GitHub

[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.

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-28 15:41:14 UTC.

Proposal

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

Wallet - Not here page is opened from "Add payment method" button when app is loading

What is the root cause of that problem?

We display in WalletEmptyState with add payment method button even if the app is loading

App/src/pages/settings/Wallet/WalletEmptyState.tsx

Lines 51 to 60 in 0a8e7aa

	<FeatureList
	menuItems={WALLET_FEATURES}
	illustration={LottieAnimations.FastMoney}
	illustrationBackgroundColor={theme.fallbackIconColor}
	title={translate('walletPage.getPaidFaster')}
	subtitle={translate('walletPage.addPaymentMethod')}
	ctaText={translate('paymentMethodList.addPaymentMethod')}
	ctaAccessibilityLabel={translate('paymentMethodList.addPaymentMethod')}
	onCtaPress={onAddPaymentMethod}
	/>

App/src/components/FeatureList.tsx

Lines 113 to 121 in 0a8e7aa

	{!!ctaText && (
	<Button
	text={ctaText}
	onPress={onCtaPress}
	accessibilityLabel={ctaAccessibilityLabel}
	style={styles.w100}
	success
	large
	/>

So the not found page is displayed when pressing add payment because isUserValidated will be false here

App/src/pages/AddPersonalBankAccountPage.tsx

Line 29 in 0a8e7aa

const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated});

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

We have a lot of options: we can either avoid the button or disable (isDisabled) it or display loading indicator (isLoading)) in the button or other approach the Design team suggests when app is loading. (we can also optionally use !isUserValidated condition instead of isLoadingApp as we are displaying the not found page based on !isUserValidated condition)

const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);

Optionally because WalletEmptyState is used when the user has no payment method yet it might not be appropriate to display it in loading app state so we can optionally display loading indicator in WalletPage when the app is loading like we do in other places like WorkspaceSwitcherPage

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

N / A - UI bug

What alternative solutions did you explore? (Optional)

[truph01]

Proposal

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

• "Add payment method" button is accessible when app is loading and it leads to not here page

What is the root cause of that problem?

• When we clear cache, all the onyx data are cleared (we just preserve a few keys), so the condition to display the WalletEmptyState is true:
  

  App/src/pages/settings/Wallet/WalletPage/WalletPage.tsx

  Lines 388 to 389 in ec99650

  	{shouldShowEmptyState ? (
  	<WalletEmptyState onAddPaymentMethod={paymentMethodPressed} />

• In the WalletEmptyState, clicking on the Add payment method button we navigate user to InternationalDepositAccount. In here, it can show AddPersonalBankAccountPage or InternationalDepositAccountContent, based on whether user can use the international bank account (via canUseInternationalBankAccount permission).

• In case of this bug, user don't have permission to use international bank account, so it opens AddPersonalBankAccountPage page.

• In when the app is loading, the !user.isUserValidated is true and the not found page is shown.

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

• Because clicking on the "Add payment method" can either open this:
  

  App/src/pages/settings/Wallet/InternationalDepositAccount/index.tsx

  Line 22 in ec99650

  return <AddPersonalBankAccountPage />;

  
  or
  

  App/src/pages/settings/Wallet/InternationalDepositAccount/index.tsx

  Lines 29 to 30 in ec99650

  	return (
  	<InternationalDepositAccountContent

  , and the not here page is only shown if it opens AddPersonalBankAccountPage (in other words, user doesn't have permission to use international bank account) and the user is not validated. So we can disable that button in WalletEmptyState (we can hide or disable it based on design, it is straightforward to implement it) when shouldDisableCTA below is true:

    const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated});
    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
    const {canUseInternationalBankAccount} = usePermissions();
    const shouldDisableCTA = !canUseInternationalBankAccount && !isUserValidated && isLoadingApp;

the isLoadingApp is optional.

• The above logic will make sure:

1. If user can use international bank account, should not disable the CTA since the not here page is not shown in this case.
2. If user already validated the account, should not disable the CTA since the not here page is not shown in this case.

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

• We can render the WalletPage page and mock the onyx data so that the WalletEmptyState is shown then verify that the button is not shown or is disabled.

What alternative solutions did you explore? (Optional)

Option 1:

• When the app is loading, we can display the loading indicator instead of AddPersonalBankAccountPage in:

App/src/pages/settings/Wallet/InternationalDepositAccount/index.tsx

Lines 21 to 23 in ec99650

	if (!canUseInternationalBankAccount) {
	return <AddPersonalBankAccountPage />;
	}

    if (!canUseInternationalBankAccount) {
        if (isLoadingApp) {
            return <FullScreenLoadingIndicator />;
        }
        return <AddPersonalBankAccountPage />;
    }

like we did in:

App/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx

Lines 132 to 134 in ec99650

	if (isAccountLoading) {
	return <FullScreenLoadingIndicator />;
	}

when the account is loading.

• We can update the condition for displaying the loading indicator in my suggestion above to isLoadingApp && !user?.validated. This means the loading indicator will only be shown if the app is loading and the user is not validated. If the app is still loading but the user is already validated, we shouldn’t block them from accessing the add bank account page. This is because isLoadingApp can be set to true even when the cache is not cleared.

Option 2:

• We can show loading indicator in here when the isLoadingApp is true.