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

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:

Launch New Expensify app.
Go to Profile > Wallet.
Tap Add bank account > Personal bank account.
Add a bank account.
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?

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

@alexpensify

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

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

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

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 Updated

Updated my proposal to add result video and a side note

I'll try to test this one tomorrow.

No update yet

On my testing list

@eVoloshchak

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:

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

@bernhardoj

Payouts due:

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

Upwork job is here.

The PR that introduced the bug has been identified. Link to the PR: Handle isWaitingOnBankAccount for IOU requests #20821
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
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

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

Do we agree 👍 or 👎

@eVoloshchak

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

I'll work on the regression test.

Closing - the test request has been created

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result Video:

Proposal

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

What is the root cause of that problem?

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

Proposal Updated

31 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

	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);
	}

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Mar 19, 2024

izarutskaya commented on Mar 19, 2024

allgandalf commented on Mar 19, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result Video:

bernhardoj commented on Mar 19, 2024

Proposal

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

What is the root cause of that problem?

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

allgandalf commented on Mar 19, 2024

Proposal Updated

alexpensify commented on Mar 20, 2024

alexpensify commented on Mar 22, 2024

alexpensify commented on Mar 26, 2024

31 remaining items

melvin-bot commented on Apr 8, 2024

alexpensify commented on Apr 12, 2024

alexpensify commented on Apr 15, 2024

eVoloshchak commented on Apr 25, 2024

JmillsExpensify commented on Apr 29, 2024

alexpensify commented on Apr 29, 2024

alexpensify commented on Apr 30, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions