[Awaiting Payment][$500] [Wave 6: Categories] Category is not selected when refreshing category selection page and selecting it

[kbecciv]

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.3.94.0
Reproducible in staging?: y
Reproducible in production?: y
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. Go to staging.new.expensify.com.
2. Go to workspace chat > + > Request money > Manual.
3. On the confirmation page, click Category.
4. Refresh the page.
5. Select a category.

Expected Result:

The category is selected.

Actual Result:

The category is not selected.

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Bug6259295_1698838084578.20231101_095722.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d27ff5e9974105ea
• Upwork Job ID: 1719688099307413504
• Last Price Increase: 2023-11-08
• Automatic offers:
• dukenv0307 | Contributor | 27679337

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[DrLoopFall]

Proposal

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

Category is not selected after refreshing the category selection page

What is the root cause of that problem?

We are clearing the category when the request confirmation page is mounted, so when the category selection is refreshed and used goes back to the confirmation page, it is mounted as a new page, and the selected category is cleared.

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Line 84 in c8e7ee5

IOU.resetMoneyRequestCategory();

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

Clearing the selected category only on navigation, instead of on mount would solve the issue.

[BhuvaneshPatil]

Proposal

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

Category is not selected when refreshing category selection page and selecting it

What is the root cause of that problem?

We are calling resetMoneyRequestCategory that is resetting the category to empty value.

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Lines 83 to 86 in c8e7ee5

	useEffect(() => {
	IOU.resetMoneyRequestCategory();
	IOU.resetMoneyRequestTag();
	}, []);

This was added in this PR - #27936
It mentions that category should be empty when participant doesn't contain workspace.

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

We shall add a check before calling resetMoneyRequestCategory() to check if the participant contains the workspace.
Or to be precise if participant is workspace (since we can't have other participant when workspace is selected)

This check and removal logic should be in MoneyRequestConfirmPage, reason being that the action of creating money request/split bill happens in this page.

What alternative solutions did you explore? (Optional)

[FitseTLT]

Proposal

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

Category is not selected when refreshing category selection page

What is the root cause of that problem?

We are resetting category on mount on these lines of code

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Lines 83 to 86 in e99c297

	useEffect(() => {
	IOU.resetMoneyRequestCategory();
	IOU.resetMoneyRequestTag();
	}, []);

So when the user refreshes while the page is on the Category selection page, the MoneyRequestConfirmPage is not rendered as the Category selection page is the one on top of the stack navigator state. Therefore, when the user selects a category the page navigates to MoneyRequestConfirmPage with the selected category set but the MoneyRequestConfirmPage is just only rendered now which means the resetting code above will run and reset the category.

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

We should take the resetting code from the useEffect here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

Lines 77 to 80 in e99c297

	const navigateToConfirmationStep = (moneyRequestType) => {
	IOU.setMoneyRequestId(moneyRequestType);
	Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(moneyRequestType, reportID));
	};

to the navigating function here

const navigateToConfirmationStep = (moneyRequestType) => {
        IOU.setMoneyRequestId(moneyRequestType);
        IOU.resetMoneyRequestCategory();
        IOU.resetMoneyRequestTag();
        Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(moneyRequestType, reportID));
    };

What alternative solutions did you explore? (Optional)

[dukenv0307]

Proposal

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

Category is not selected when refreshing category selection page and selecting it

What is the root cause of that problem?

When we refresh the category page, the confirm page is removed from the navigator stack and then after selecting category, we go back to the confirm page that is just mounted.

And then it is reset here.

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Lines 83 to 86 in c8e7ee5

	useEffect(() => {
	IOU.resetMoneyRequestCategory();
	IOU.resetMoneyRequestTag();
	}, []);

The same issue with tag selection

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

We should only reset tag and category when we navigate to confirm page from participant or amount page with the change of participant.

we should add the reset tag and category function here

App/src/libs/actions/IOU.js

Line 2922 in c8e7ee5

if (_.isEmpty(iou.participants) || shouldReset) {

and here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

Line 77 in c8e7ee5

const navigateToConfirmationStep = (moneyRequestType) => {

What alternative solutions did you explore? (Optional)

[ntdiary]

Hi, @zanyrenney, I have a full plate these this week, so please feel free to reassign this issue as needed. : )

[melvin-bot]

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

[zanyrenney]

readding the labels to get a new c+

[zanyrenney]

bumping here - https://expensify.slack.com/archives/C01GTK53T8Q/p1700048654257029

[melvin-bot]

📣 @parasharrajat Please request via NewDot manual requests for the Reviewer role ($500)

[melvin-bot]

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

[melvin-bot]

@Gonals @parasharrajat @zanyrenney @dukenv0307 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[dukenv0307]

@parasharrajat The PR is ready for review.

[melvin-bot]

This issue has not been updated in over 15 days. @Gonals, @parasharrajat, @zanyrenney, @dukenv0307 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[parasharrajat]

Looks like this was missed. It should be ready for payment. @zanyrenney

[parasharrajat]

@zanyrenney Bump.

[dukenv0307]

@zanyrenney friendly bump on this, thank you!

[parasharrajat]

@zanyrenney This one is a long-standing issue. Could you please check if payment was issued to @dukenv0307. Please post the payment summary and then we can close this issue. I will request it later.

[zanyrenney]

Payment summary

@dukenv0307 - paid $500 via Upwork.
@parasharrajat to request $500 on NewDot.

Thanks for the patience here!

[parasharrajat]

Payment requested as per #30682 (comment)

[JmillsExpensify]

$500 approved for @parasharrajat