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

@garrettmknight

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

Look at the history of the Old Component
If there are any changes since Nov 27, 2023 which have not been added to the New Component, copy those changes
Replace all uses of the Old Component with the New Component
Remove all traces of Old Component
Be sure to update all routes and navigation to use the new :action param (instead of being hard-coded with "create")
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

@michaelhaxhiu

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

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

I would love to take this!

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?

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

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)

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

@hoangzinh

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

I would love to take this!

@hoangzinh

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)

@hoangzinh

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:

@garrettmknight

@garrettmknight, bump for payments.

@Krishna2323

@Krishna2323 just paid you.

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

@garrettmknight

Accepted. Thanks @garrettmknight

All paid up, closing.

Navigation Menu

Repository navigation

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

Problem

Solution

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?

Result

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)

68 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	// 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

	IOU.setMoneyRequestReceipt(transactionID, source, file.name, action !== CONST.IOU.ACTION.EDIT);

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

	[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,

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

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

Description

Problem

Solution

Activity

melvin-bot commented on Jan 16, 2024

Krishna2323 commented on Jan 16, 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?

Result

njmulsqb commented on Jan 17, 2024

DylanDylann commented on Jan 17, 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)

melvin-bot commented on Jan 17, 2024

melvin-bot commented on Jan 17, 2024

MahmudjonToraqulov commented on Jan 17, 2024

68 remaining items

melvin-bot commented on Mar 19, 2024

melvin-bot commented on Mar 19, 2024

Krishna2323 commented on Mar 28, 2024

garrettmknight commented on Mar 28, 2024

hoangzinh commented on Mar 29, 2024

garrettmknight commented on Apr 2, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions