[HOLD for payment 2024-04-15] [$500] Wallet - Back button returns to the same page after adding a bank account in Wallet page

[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: 1.4.54-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Launch New Expensify app.
2. Go to Profile > Wallet.
3. Tap Add bank account > Personal bank account.
4. Add a bank account.
5. After returning to Wallet page, tap back button on the top left.

Expected Result:

App will return to Profile page.

Actual Result:

App returns to the same Wallet page.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6418351_1710793704406.RPReplay_Final1710792508.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0172f19f6c44056361
• Upwork Job ID: 1773070619325939712
• Last Price Increase: 2024-03-27
• Automatic offers:
• bernhardoj | Contributor | 0

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[izarutskaya]

We think that this bug might be related to the #collect project.

[allgandalf]

Proposal

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

Back button returns to the same page after adding a bank account in Wallet page

What is the root cause of that problem?

For Wallet Page, We have Navigation.goBack defined to go back to the last fallback:

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

Lines 357 to 360 in 34fa987

	<HeaderWithBackButton
	title={translate('common.wallet')}
	onBackButtonPress={() => Navigation.goBack()}
	icon={Illustrations.MoneyIntoWallet}

But when we verify the bank account, the fallback route itself is the wallet page as we were redirected to the wallet page when we added bank account

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

We can set shouldEnforceFallback to true:

App/src/libs/Navigation/Navigation.ts

Line 185 in 34fa987

function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopToTop = false) {

Also we need to update Navigation.goBack to make it fallback to the profile settings page.

What alternative solutions did you explore? (Optional)

Or, Simply update the goBack route to profile settings page:

<HeaderWithBackButton 
     title={translate('common.wallet')} 
     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}

Note

The Wallet Page is a Central Pane and not a RHP hence we can put the correct route inside of goBack, this won't cause any regression with the animation of pages as it is with RHP pages.

Result Video:

2024-03-19-19.07.33.515936459.mp4

[bernhardoj]

Proposal

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

Pressing back button from wallet page returns to the add personal bank account page again.

What is the root cause of that problem?

When we press the continue button after successfully add the bank account, it will call exitFlow which will call goBack with fallback route of wallet page.

App/src/pages/AddPersonalBankAccountPage.tsx

Lines 44 to 55 in 34fa987

	const exitFlow = useCallback(
	(shouldContinue = false) => {
	const exitReportID = personalBankAccount?.exitReportID;
	const onSuccessFallbackRoute = personalBankAccount?.onSuccessFallbackRoute ?? '';
	if (exitReportID) {
	Navigation.dismissModal(exitReportID);
	} else if (shouldContinue && onSuccessFallbackRoute) {
	PaymentMethods.continueSetup(onSuccessFallbackRoute);
	} else {
	Navigation.goBack(ROUTES.SETTINGS_WALLET);
	}

Because the add bank account is the only page in the route, it will use the fallback route and push it to the nav stack.
[wallet page, add personal bank account page, wallet page]

So, when we press back, we will arrive at add personal bank account page again.

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

Remove the fallback route from goBack.

App/src/pages/AddPersonalBankAccountPage.tsx

Line 54 in 34fa987

Navigation.goBack(ROUTES.SETTINGS_WALLET);

btw, a separate thing, I think we can force the fallback here

Proposal

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

Wallet - Back button returns to the same page after adding a bank account in Wallet page

What is the root cause of that problem?

The root cause is here :

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

Line 359 in 34fa987

onBackButtonPress={() => Navigation.goBack()}

we are just defining Navigation.goBack()

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

To move back to Profile Settings page. We need to modify this route to by adding this :

Navigation.goBack(ROUTES.SETTINGS)

What alternative solutions did you explore? (Optional)

N/A

Updated Proposal

[allgandalf]

Proposal Updated

Updated my proposal to add result video and a side note

[alexpensify]

I'll try to test this one tomorrow.

[alexpensify]

No update yet

[alexpensify]

On my testing list