[HOLD for payment 2024-10-24] [$250] Expensify Card -App returns to card feed selection page after issuing card from member profile

[IuliiaHerets]

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.0.44-7
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+pso@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Bank account is already set up in Expensify Card page.
• Company card feature is enabled.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Members.
3. Click on any member.
4. Click New Card.
5. Click Expensify Card.
6. Go through the setup process.
7. Click Issue card on the confirmation page.

Expected Result:

App will return to member profile page after issuing card from member profile.

Actual Result:

App returns to card feed selection page after issuing card from member profile.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6624197_1728034246752.20241004_171833.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843172551777303100
• Upwork Job ID: 1843172551777303100
• Last Price Increase: 2024-10-07
• Automatic offers:
• paultsimura | Reviewer | 104321384
• abzokhattab | Contributor | 104321385

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (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.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 2

[IuliiaHerets]

@Christinadobrzyn FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-10-04 14:45:09 UTC.

Proposal

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

Expensify Card -App returns to card feed selection page after issuing card from member profile

What is the root cause of that problem?

The backTo route is incorrectly set to activeRoute, which is the feed selector page, causing it to loop continuously

App/src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx

Line 84 in 0e21365

Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, activeRoute));

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

we should change the back to the workspace member detail page

Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID, ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(policyID, accountID)));

What alternative solutions did you explore? (Optional)

Another solution would be to add backTo to this route, and then use it here. However, I don't think we should do that, since this route is only navigated to once in the code, so we can confidently hardcode the backTo

[cretadn22]

Proposal

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

App returns to card feed selection page after issuing card from member profile

What is the root cause of that problem?

We always return the backTo parameter after a new card is created

App/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx

Line 50 in b9d9686

Navigation.navigate(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1'));

In this scenario, the navigation stack will be: IssueNewCardPage > WorkspaceMemberNewCardPage > WorkspaceMemberDetailsPage. Therefore, the backTo parameter for IssueNewCardPage will be WorkspaceMemberNewCardPage, then the app to navigate back to WorkspaceMemberNewCardPage

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

We shouldn't navigate to backTo when the user submits a new card; the backTo parameter should only be used when users click the back button

We should check if users create a card in WorkspaceMemberDetailsPage, and if so, navigate them back to that page after creating the new card by checking the backTo parameter.

        if (backTo && backTo.includes('expensify-card')) {
            Navigation.navigate(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1'));
        } else {
            const accountID = PersonalDetailsUtils.getPersonalDetailByEmail(data?.assigneeEmail ?? '')?.accountID
            Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(policyID, accountID ?? -1));
        }

What alternative solutions did you explore? (Optional)

Alternatively, we can use the background screen from "state.FullScreenNavigator" to determine which page to navigate to when the user submits a card.

If the background screen is the Expensify Card Page, we will navigate to that page.
If the background screen is the Member Page, we will navigate to the Member Detail Page.

        const stateTopmostFullScreen = getTopmostFullScreenRoute(navigationRef.getRootState());
        if (stateTopmostFullScreen && stateTopmostFullScreen.name === SCREENS.WORKSPACE.MEMBERS) {
            const accountID = PersonalDetailsUtils.getPersonalDetailByEmail(data?.assigneeEmail ?? '')?.accountID
            Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(policyID, accountID ?? -1));
        } else {
            Navigation.navigate(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1'));
        }

[Christinadobrzyn]

I'm not sure if this needs to be a backend but since we have a proposal let's start with External

[melvin-bot]

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

[melvin-bot]

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

[paultsimura]

Reviewing soon 👀

[paultsimura]

The proposal by @abzokhattab looks good to me.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[cretadn22]

@paultsimura The selected proposal will break the back button behaviors

[paultsimura]

The selected proposal will break the back button behaviors

@cretadn22 when making such claims, please attach corresponding recordings.

[cretadn22]

On the assignee step page, when we reload and hit the back button, the navigation should take us to the WorkspaceMemberNewCardPage as determined by the backTo route. As such, I don't think we should alter the backTo parameter in this case.

[paultsimura]

On the assignee step page, when we reload and hit the back button, the navigation should take us to the WorkspaceMemberNewCardPage as determined by the backTo route.

It doesn't work like this now, does it?

[cretadn22]

There's another issue here: after reloading the page, we’re navigating to the Expensify Card in the background, it should remain on the Member Page as expected. After reloading and clicking the back button, the navigation should go to the WorkspaceMemberNewCardPage

[cretadn22]

Overall, I don’t think the selected proposal is a good pattern for our app. Consider this chain of navigation: A -> B -> C. When we navigate to a new page (C), the backTo parameter should reference the previous page (B), not the page before that (A). Setting it to A can be confusing and may lead to unintended side effects.

[paultsimura]

This is a common pattern for deeply nested scenarios when we pass the 'backTo' param from one page to another to be able to eventually navigate back to the root point of the flow.

e.g. here:

App/src/pages/workspace/categories/CategorySettingsPage.tsx

Lines 117 to 123 in 273e751

	const navigateToEditCategory = () => {
	if (backTo) {
	Navigation.navigate(ROUTES.SETTINGS_CATEGORY_EDIT.getRoute(policyID, policyCategory.name, backTo));
	return;
	}
	Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_EDIT.getRoute(policyID, policyCategory.name));
	};

[mountiny]

@koko57 @VickyStash can you look at the proposals? I think this must be regression from adding the select feed option

[koko57]

@mountiny @paultsimura I agree with @paultsimura - @abzokhattab proposal looks good. We're using this pattern quite frequently and it doesn't cause any problems with normal back button behaviour.

@cretadn22 could you please add some evidence (screen recording) that it doesn't work as expected and breaks the navigation?

[narefyev91]

Agree with @paultsimura - that's why backTo was introduced - we have a lot of pages which may start the same workflows from different starting point. And when user comes to the last step of the workflow - navigation should move them back to the initial screen

[mountiny]

@abzokhattab can you please raise the PR? thanks!

[melvin-bot]

📣 @abzokhattab 🎉 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 📖

[paultsimura]

@abzokhattab I've seen you actively posting new proposals while this issue has been pending a PR for 2 days now. Please prioritize opening a PR here ASAP.

[abzokhattab]

Thanks for the feedback. And sorry i was working on other PRs

Noted. will work on it today.

[Christinadobrzyn]

Looks like the PR is in staging so we're getting close! #50597

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

• Fix: App returns to card feed selection page after issuing a card from member profile #50597

If no regressions arise, payment will be issued on 2024-10-24. 🎊

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

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

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

[paultsimura]

• The PR that introduced the bug has been identified. Link to the PR: [No QA] Feat/47377 multiple card feeds #49148
• 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/49148/files#r1809216202
• 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

Precondition:

• Bank account is already set up in Expensify Card page.
• The company card feature is enabled.

Test:

1. Go to workspace settings > Members.
2. Click on any member.
3. Click "New Card".
4. Click "Expensify Card".
5. Go through the setup process.
6. Click "Issue card" on the confirmation page.
7. Ensure that the app returns to the member profile page after issuing a card from the member profile.

Do we agree 👍 or 👎

[Christinadobrzyn]

Payment coming in a few days so I'm going to move this to daily so I don't miss it

[Christinadobrzyn]

Prepping for payment...

• Contributor: $250 @abzokhattab (Upwork offer - https://www.upwork.com/nx/wm/offer/104321385)
• Reviewer: $250 @paultsimura (Upwork offer - https://www.upwork.com/nx/wm/offer/104321384)

Regression test - https://github.com/Expensify/Expensify/issues/438129

[Christinadobrzyn]

Payment day! Paid out based on this summary - #50243 (comment)

Closing

[melvin-bot]

@mountiny @Christinadobrzyn Be sure to fill out the Contact List!