[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

[ghost]

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

[ghost]

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

[alexpensify]

I tested this one on Android and see a double click on the back button is required to get to the Profile page.

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@eVoloshchak - can you please review if these proposals will resolve this issue? Thanks!

[alexpensify]

No update yet, this one needs a proposal review.

[eVoloshchak]

I think we should proceed with @bernhardoj's proposal, as it's the most universal one (we don't rely on setting ROUTES.SETTINGS as a fallback route, which would need to be changed in case we move wallet page outside settings)

🎀👀🎀 C+ reviewed!

[melvin-bot]

Triggered auto assignment to @MariaHCD, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[bernhardoj]

PR is ready

cc: @eVoloshchak

[alexpensify]

Awesome, the PR is moving forward.

[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 1.4.60-13 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix going back from wallet page returns to the same page after adding a bank account #39351

If no regressions arise, payment will be issued on 2024-04-15. 🎊

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

• @eVoloshchak requires payment through NewDot Manual Requests
• @bernhardoj requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@eVoloshchak] The PR that introduced the bug has been identified. Link to the PR:
• [@eVoloshchak] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@eVoloshchak] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@eVoloshchak] Determine if we should create a regression test for this bug.
• [@eVoloshchak] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[alexpensify]

I confirmed there is an Upwork job here and will continue with the payment process on Monday.

[alexpensify]

Payouts due:

• Contributor: $500 @bernhardoj -- paid via Upwork
• Contributor+: $500 @eVoloshchak -- please submit a request

Upwork job is here.

[eVoloshchak]

1. The PR that introduced the bug has been identified. Link to the PR: Handle isWaitingOnBankAccount for IOU requests #20821
2. The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/20821/files#r1579541672
3. A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: this is a very simple bug, additional discussion isn't needed

Regression Test Proposal

1. Go to Settings > Wallet.
2. Tap Add bank account > Personal bank account.
3. Add a bank account and complete the process until you see the success screen.
4. Press continue, it will bring you back to wallet page.
5. After returning to the Wallet page, tap the back button on the top left.
6. Verify the wallet page is closed

Do we agree 👍 or 👎

[JmillsExpensify]

$500 approved for @eVoloshchak though re-opening for Al to handle the regression test.

[alexpensify]

I'll work on the regression test.

[alexpensify]

Closing - the test request has been created