[HOLD for payment 2024-02-07] [$500] Workplace - User is unable to return back to homepage after clicking “here” in Concierge chat

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.24-4
Reproducible in staging?: Y
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Open any Workplace setting and select Bank account
2. Select "connect manually" and go through process until Concierge chat to validate bank account
3. In Concierge chat, click on "here" to review and make necessary changes
4. A "Hmm, its not here" page should display and click on "Go back to home page"

Expected Result:

User should be directed to home page

Actual Result:

User is sent back to Connect Bank Account page. Selecting back button on this page leads to a loop which sends user to the Workplace's setting page then immediately back to "Connect Bank Account"

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

Add any screenshot/video evidence

Bug6340259_1705070395464.XRecorder_11012024_181231.mp4

Bug6340259_1705070395479.RPReplay_Final1705015564.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01056d0ac9c53002bf
• Upwork Job ID: 1746702570069852160
• Last Price Increase: 2024-01-22
• Automatic offers:
• hoangzinh | Reviewer | 28120500
• bernhardoj | Contributor | 28120501

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @grgia (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01056d0ac9c53002bf

[melvin-bot]

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

[tienifr]

Proposal

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

User is sent back to Connect Bank Account page. Selecting back button on this page leads to a loop which sends user to the Workplace's setting page then immediately back to "Connect Bank Account"

What is the root cause of that problem?

We're not passing the onLinkPress of navigating to home to FullPageNotFoundView that shows the workspace unauthorized page, which has default title of Go back to home page, there're many occurrences of this.

So it will use the default onLinkPress here which will call dismissModal by default and will not go to home page.

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

Pass the onLinkPress of navigating to home to FullPageNotFoundView that shows the workspace unauthorized page

Navigation.navigate(ROUTES.HOME);

(If we'd like to pop other screens from the stack before going back we can also do that)

Or we can make "navigate to home" the default action of onLinkPress inside FullPageNotFoundView, or in BlockingView as well. Currently it's dismissModal

What alternative solutions did you explore? (Optional)

NA

[jordan-ae]

Proposal

Problem re-statement:

The identified issue revolves around users encountering a repetitive loop when attempting to navigate back using the back button, consistently landing them on the "Connect Bank Account" page. This loop takes them through the Workplace's setting page and back to "Connect Bank Account."

Root Cause Analysis:

The core problem stems from the omission of passing the onClick action for navigating to the home page when users encounter an unauthorized workspace. The Page not found view, responsible for displaying the workspace unauthorized page, lacks the necessary handling for users trying to return home. This absence results in an ongoing loop, creating frustration for the users.

Recommended Course of Action:

To tackle this issue effectively, it is suggested to include the onClick action for navigating to the home page in The Page not found view. This adjustment ensures that users, upon facing unauthorized access, are promptly redirected to the home page, breaking the loop.

[melvin-bot]

📣 @okhot! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[jordan-ae]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01de3d646530efa373

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[eh2077]

Proposal

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

Workplace - User is unable to return back to homepage after clicking “here” in Concierge chat.

What is the root cause of that problem?

The root cause of this issue is that we call

App/src/components/BlockingViews/FullPageNotFoundView.tsx

Line 52 in a2864a0

onLinkPress = () => Navigation.dismissModal(),

by default when clicking Go back to home page

As we don't pass targetReportId to method dismissModal, so it'll navigate to the previous Connect Bank Account page, see

App/src/libs/Navigation/dismissModal.ts

Line 48 in a2864a0

navigationRef.dispatch({...StackActions.pop(), target: state.key});

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

To fix this issue, we can improve FullPageNotFoundView.tsx by

1. Make property onLinkPress as optional in FullPageNotFoundViewProps

2. Change the default value of onLinkPress

App/src/components/BlockingViews/FullPageNotFoundView.tsx

Line 52 in a2864a0

onLinkPress = () => Navigation.dismissModal(),

to undefined, like

onLinkPress = undefined,

3. Pass onLinkPress property to BlockingView by

// if onLinkPress is defined, then return onLinkPress
// if onLinkPress is undefined, then return () => Navigation.goBack(ROUTES.HOME) if linkKey is 'notFound.goBackHome' else return () => Navigation.dismissModal()
onLinkPress={onLinkPress ?? linkKey === 'notFound.goBackHome' ? () => Navigation.goBack(ROUTES.HOME) : () => Navigation.dismissModal()}

Can also apply the above improvement at lower level in BlockingView.

What alternative solutions did you explore? (Optional)

N/A

[situchan]

what's the offending PR?

[hoangzinh]

@tienifr @eh2077 are you able to find offending PR? Thanks

[bernhardoj]

Proposal

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

Pressing the go back to homepage in reimbursement account page not found view will reopen the bank account page.

What is the root cause of that problem?

If we follow the navigation step from OP, we will get this navigation stack:

1. Open the bank account validation page. [RHP (validation step)]
2. Press Let's Chat which will open the concierge chat. [RHP (validation step), Concierge]
3. Press "here" which opens the not found bank account page. [RHP (validation step), Concierge, RHP (requestor, not found)]

When we press go back to the homepage or simply go back, the 2nd RHP will be unmounted and clear the bank account data.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.js

Lines 278 to 287 in a2864a0

	useEffect(
	() => {
	fetchData();
	return () => {
	BankAccounts.clearReimbursementAccount();
	};
	},
	// eslint-disable-next-line react-hooks/exhaustive-deps
	[],
	); // The empty dependency array ensures this runs only once after the component mounts.

This triggers the useEffect for the first RHP that compares the step from params and the step from bank account data Onyx.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.js

Line 252 in a2864a0

const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.js

Lines 316 to 335 in a2864a0

	const currentStepRouteParam = getStepToOpenFromRouteParams(route);
	if (currentStepRouteParam === currentStep) {
	// The route is showing the correct step, no need to update the route param or clear errors.
	return;
	}
	if (currentStepRouteParam !== '') {
	// When we click "Connect bank account", we load the page without the current step param, if there
	// was an error when we tried to disconnect or start over, we want the user to be able to see the error,
	// so we don't clear it. We only want to clear the errors if we are moving between steps.
	BankAccounts.hideBankAccountErrors();
	}
	const backTo = lodashGet(route.params, 'backTo');
	const policyId = lodashGet(route.params, 'policyID');
	Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyId, backTo));
	},
	// eslint-disable-next-line react-hooks/exhaustive-deps
	[isOffline, reimbursementAccount, route, hasACHDataBeenLoaded, shouldShowContinueSetupButton],
	);

And because the onyx data is cleared, the navigation logic above is triggered (BankAccountStep !== ValidationStep), making it impossible to leave the page.

This has the same root cause as #21401 and also, we shouldn't clear the onyx data on unmount as it raises this issue but was closed as not priority.

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

Dismiss the modal (RHP) before navigating to the concierge chat.

I think we can have the same pattern as navigateToAndOpenReport by having a param shouldDismissModal

I'm thinking that if we want to fix it globally, we can dismiss the RHP in Navigation.navigate if the route is a report route

[bernhardoj]

I don't think it's a DB. I can reproduce this on prod too. I think the reason QA can't reproduce this on prod is, the link from concierge points to staging.

[melvin-bot]

📣 @hoangzinh 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

PR is ready

cc: @hoangzinh

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

• Fix unable to close bank account page #35130

If no regressions arise, payment will be issued on 2024-02-07. 🎊

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

• @hoangzinh requires payment automatic offer (Reviewer)
• @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:

• [@hoangzinh] The PR that introduced the bug has been identified. Link to the PR:
• [@hoangzinh] 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:
• [@hoangzinh] 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:
• [@hoangzinh] Determine if we should create a regression test for this bug.
• [@hoangzinh] 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.
• [@sonialiap] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[stitesExpensify]

@hoangzinh can you update the checklist so that we can get you paid today? :)

[hoangzinh]

sure @stitesExpensify I will complete the checklist tomorrow. Sorry for late

[sonialiap]

@hoangzinh reviewer - $500 paid ✔️ Please complete the checklist
@bernhardoj contributor - $500 paid ✔️

[hoangzinh]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR: fix: navigation for exisiting report screen #5131
• 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/5131/files#r1485060285
• 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: N/A
• Determine if we should create a regression test for this bug. Yes
• 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.

Regression Test Proposal

1. Open Settings > Workspace > Select any workspace > Bank account
2. Connect a bank account and complete it until the validation step
3. Press "Yes, let's chat" button.
4. Verify you are navigated to the concierge chat
5. In the concierge chat, there should be a message with a "here" link text. Press it. Wait until a not-found page is shown.
6. Press "go back to home page" link text
7. Verify the not found page is closed and you see the concierge chat back

Do we agree 👍 or 👎

[melvin-bot]

@hoangzinh, @sonialiap, @grgia, @stitesExpensify, @bernhardoj Whoops! This issue is 2 days overdue. Let's get this updated quick!