[HOLD for payment 2024-03-26] [$250] Remove MoneyRequestSelectorPage.js and copy any changes since Nov 27 into IOURequestStartPage.js

[tgolen]

This is a part of #29107. You can look at that issue for more context behind the cleanup process.

Problem

The app has two redundant components:

Old Component: MoneyRequestSelectorPage
New Component IOURequestStartPage

Solution

Following the examples (example 1, example 2), the Old Component needs to be completely removed from the codebase

1. Look at the history of the Old Component
2. If there are any changes since Nov 27, 2023 which have not been added to the New Component, copy those changes
3. Replace all uses of the Old Component with the New Component
4. Remove all traces of Old Component
5. Be sure to update all routes and navigation to use the new :action param (instead of being hard-coded with "create")
6. Update any logic like isEditing to use the new action param from the route

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011477b63464907ecf
• Upwork Job ID: 1747632909135507456
• Last Price Increase: 2024-01-17
• Automatic offers:
• hoangzinh | Reviewer | 28117811
• Krishna2323 | Contributor | 28117812

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[Krishna2323]

Proposal

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

Remove MoneyRequestSelectorPage.js and copy any changes since Nov 27 into IOURequestStartPage.js

What is the root cause of that problem?

Component update

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

I checked all the commits after 27th Nov and the new component is updated according to the old component, we just need to remove the file and route created for it. I checked the commits thoroughly but will check again in the PR. There are total 10 commits which includes importing updated components, updating const variables and adding a policy prop. All of them have been updated inside new component also.

Component to remove:
https://github.com/Expensify/App/blob/main/src/pages/iou/MoneyRequestSelectorPage.js

App/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

Line 93 in 52adf77

[SCREENS.MONEY_REQUEST.ROOT]: () => require('../../../pages/iou/MoneyRequestSelectorPage').default as React.ComponentType,

We also need to remove all traces from src/libs/Navigation/types.ts & src/libs/Navigation/linkingConfig.ts:

App/src/libs/Navigation/linkingConfig.ts

Line 407 in 3033f99

[SCREENS.MONEY_REQUEST.ROOT]: {

App/src/libs/Navigation/types.ts

Line 182 in 3033f99

[SCREENS.MONEY_REQUEST.ROOT]: undefined;

We will update to :action param here:

App/src/ROUTES.ts

Line 305 in 3033f99

route: 'create/:iouType/start/:transactionID/:reportID',

We are using ROUTES.MONEY_REQUEST_CREATE.getRoute from several places so we need to add action accordingly:

App/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js

Line 147 in 3033f99

onSelected: () => Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE.getRoute(CONST.IOU.TYPE.SPLIT, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, report.reportID)),

App/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js

Line 152 in 3033f99

onSelected: () => Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE.getRoute(CONST.IOU.TYPE.REQUEST, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, report.reportID)),

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js

Line 194 in 3033f99

ROUTES.MONEY_REQUEST_CREATE.getRoute(CONST.IOU.TYPE.REQUEST, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, ReportUtils.generateReportID()),

There is a comment inside NewRequestAmountPage which mentions MoneyRequestSelectorPage, we also need to update that.

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

Lines 156 to 157 in 93e68b5

	// ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage).
	// The rest of the cases this component is rendered through <MoneyRequestSelectorPage /> which has it's own ScreenWrapper

There are 4 components which will get the action param with this update & uses IOU actions, most of them will be only used for create so it will only update TRANSACTION_DRAFT inside Onyx thats why we don't need to use isDraft parameter for actions. We only support editing inside IOURequestStepScan and there is a action setMoneyRequestReceipt which needs isDraft parameter for updating the TRANSACTION_DRAFT or TRANSACTION accordingly but we already handle that correctly.

App/src/pages/iou/request/step/IOURequestStepScan/index.js

Lines 155 to 160 in 6040dd3

	IOU.setMoneyRequestReceipt(transactionID, source, file.name, action !== CONST.IOU.ACTION.EDIT);
	if (action === CONST.IOU.ACTION.EDIT) {
	updateScanAndNavigate(file, source);
	return;
	}

App/src/pages/iou/request/step/IOURequestStepScan/index.js

Lines 173 to 178 in 6040dd3

	IOU.setMoneyRequestReceipt(transactionID, source, file.name, action !== CONST.IOU.ACTION.EDIT);
	if (action === CONST.IOU.ACTION.EDIT) {
	updateScanAndNavigate(file, source);
	return;
	}

Result

[njmulsqb]

I would love to take this!

[DylanDylann]

Proposal

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

Remove MoneyRequestSelectorPage.js and copy any changes since Nov 27 into IOURequestStartPage.js

What is the root cause of that problem?

Remove deprecated component

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

1. Remove MoneyRequestSelectorPage component and all traces
   

   App/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

   Line 93 in 278d04e

   [SCREENS.MONEY_REQUEST.ROOT]: () => require('../../../pages/iou/MoneyRequestSelectorPage').default as React.ComponentType,

App/src/libs/Navigation/linkingConfig.ts

Lines 407 to 425 in 278d04e

	[SCREENS.MONEY_REQUEST.ROOT]: {
	path: ROUTES.MONEY_REQUEST.route,
	exact: true,
	screens: {
	[SCREENS.MONEY_REQUEST.MANUAL_TAB]: {
	path: ROUTES.MONEY_REQUEST_MANUAL_TAB,
	exact: true,
	},
	[SCREENS.MONEY_REQUEST.SCAN_TAB]: {
	path: ROUTES.MONEY_REQUEST_SCAN_TAB,
	exact: true,
	},
	[SCREENS.MONEY_REQUEST.DISTANCE_TAB]: {
	path: ROUTES.MONEY_REQUEST_DISTANCE_TAB.route,
	exact: true,
	},
	},
	},
	[SCREENS.MONEY_REQUEST.AMOUNT]: ROUTES.MONEY_REQUEST_AMOUNT.route,

App/src/ROUTES.ts

Lines 249 to 252 in a2f5bd5

	MONEY_REQUEST: {
	route: ':iouType/new/:reportID?',
	getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}` as const,
	},

and all sub route ROUTES.MONEY_REQUEST_MANUAL_TAB, ROUTES.MONEY_REQUEST_SCAN_TAB, ROUTES.MONEY_REQUEST_DISTANCE_TAB

We also need to update ROUTES.MONEY_REQUEST.getRoute to ROUTES.MONEY_REQUEST_CREATE.getRoute in all places

2. Copy changes since 27 Nov to new components based on list commit here: https://github.com/Expensify/App/commits/main/src/pages/iou/MoneyRequestSelectorPage.js

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[MahmudjonToraqulov]

I would love to take this!

[ghost]

I want to work on it

[ishpaul777]

I'd love to work on the issue

[melvin-bot]

Upwork job price has been updated to $250

[michaelhaxhiu]

@hoangzinh how do you feel about the proposal above?

Others on the GH issue need to suggest a proposal as well to be considered here, btw.

[Krishna2323]

Proposal Updated

Replaced the permalink inside ModalStackNavigators.tsx, by mistake I mentioned line 94 instead of 93.

[hoangzinh]

Sorry for late update, I will post review today

[hoangzinh]

@Krishna2323 , @DylanDylann thanks for your proposal. @Krishna2323's proposal #34613 (comment) looks good to me because he's first and his proposal pointed out:

1. Look at the history of the Old Component ✅
2. If there are any changes since Nov 27, 2023 which have not been added to the New Component, copy those changes ✅
3. Replace all uses of the Old Component with the New Component ✅
4. Remove all traces of Old Component ✅
5. Be sure to update all routes and navigation to use the new :action param (instead of being hard-coded with "create") ✅
6. Update any logic like isEditing to use the new action param from the route

Link to proposal #34613 (comment)

🎀👀🎀 C+ reviewed

[DylanDylann]

@hoangzinh could you help to check edit history? @Krishna2323 updated proposal after i posted proposal

[garrettmknight]

Back - PR is still in progress.

[melvin-bot]

@garrettmknight, @hoangzinh, @Krishna2323 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[hoangzinh]

we're in a final discussion here #35455 (comment)

[garrettmknight]

Final final discussion 😆

[melvin-bot]

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

[melvin-bot]

@garrettmknight, @hoangzinh, @neil-marcellini, @Krishna2323 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[hoangzinh]

awaiting @neil-marcellini to do the final review round

[garrettmknight]

This has been reviewed, merged and deployed to staging.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.54-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Remove MoneyRequestSelectorPage.js and copy any changes since Nov 27 into IOURequestStartPage.js. #35455

If no regressions arise, payment will be issued on 2024-03-26. 🎊

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

• @hoangzinh requires payment automatic offer (Reviewer)
• @Krishna2323 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.
• [@garrettmknight] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[Krishna2323]

@garrettmknight, bump for payments.

[garrettmknight]

@Krishna2323 just paid you.

@hoangzinh sent a new offer to you since the old one expired. (link)

[hoangzinh]

Accepted. Thanks @garrettmknight

[garrettmknight]

All paid up, closing.