[HOLD for payment 2024-02-26] [$250] Remove MoneyRequestMerchantPage.js and copy any changes since Nov 27 into IOURequestStepMerchant.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: MoneyRequestMerchantPage
New Component IOURequestStepMerchant

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/~013e56ba72ea82ea62
• Upwork Job ID: 1747386410233479168
• Last Price Increase: 2024-01-24
• Automatic offers:
• hoangzinh | Reviewer | 28132635
• DylanDylann | Contributor | 28132636

[melvin-bot]

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

[neonbhai]

I can help work on this!

[neonbhai]

Proposal

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

Remove MoneyRequestMerchantPage.js and copy any changes since Nov 27 into IOURequestStepMerchant.js

What is the root cause of that problem?

Clean Up
 of MoneyRequestMerchantPage

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

We will be deleting the component here:

App/src/pages/iou/MoneyRequestMerchantPage.js

Lines 50 to 52 in a7a3e7f

	function MoneyRequestMerchantPage({iou, route}) {
	const styles = useThemeStyles();
	const {translate} = useLocalize();

This file will be removed. Checking history (link), we have had a few updates. We will be going through each and applying these to the new component.

We will remove the screen from ModalStackNavigators.tsx

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

Line 102 in a7a3e7f

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

[melvin-bot]

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

[melvin-bot]

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

[abzokhattab]

I can help working on this!

[njmulsqb]

I would love to take this!

[DylanDylann]

Proposal

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

Remove MoneyRequestMerchantPage.js and copy any changes since Nov 27 into IOURequestStepMerchant.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 MoneyRequestMerchantPage component and all traces like

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

Line 102 in 278d04e

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

App/src/libs/Navigation/linkingConfig.ts

Line 435 in 278d04e

[SCREENS.MONEY_REQUEST.MERCHANT]: ROUTES.MONEY_REQUEST_MERCHANT.route,

App/src/ROUTES.ts

Lines 285 to 288 in a2f5bd5

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

App/src/SCREENS.ts

Line 147 in a2f5bd5

MERCHANT: 'Money_Request_Merchant',

App/src/libs/Navigation/types.ts

Lines 230 to 235 in a2f5bd5

	[SCREENS.MONEY_REQUEST.MERCHANT]: {
	iouType: string;
	reportID: string;
	field: string;
	threadReportID: string;
	};

2. For new component IOURequestStepMerchant
   In here
   

   App/src/ROUTES.ts

   Lines 356 to 360 in a2f5bd5

   	},
   	MONEY_REQUEST_STEP_PARTICIPANTS: {
   	route: 'create/:iouType/participants/:transactionID/:reportID',
   	getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
   	getUrlWithBackToParam(`create/${iouType}/participants/${transactionID}/${reportID}`, backTo),

   
   We need to use the new :action param (instead of being hard-coded with "create") like

MONEY_REQUEST_STEP_MERCHANT: {
        route: ':action/:iouType/merchant/:transactionID/:reportID',
        getRoute: (action: ValueOf<typeof CONST.IOU.ACTION>, iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
            getUrlWithBackToParam(`${action}/${iouType}/merchant/${transactionID}/${reportID}`, backTo),
    },

And then we will create new variable
const isDraft = action === CONST.IOU.ACTION.CREATE (we will get action from route) and pass it to setMoneyRequestMerchant_temporaryForRefactor as a new param. In setMoneyRequestMerchant_temporaryForRefactor we will save the new description to draft_transaction if isDraft is true else we will save it to the transaction

3. We also need to remove EditRequestMerchantPage and update the route to navigate to IOURequestStepMerchant (with action = edit) instead of EditRequestMerchantPage
   In here
   

   App/src/components/ReportActionItem/MoneyRequestView.js

   Line 315 in d8fb3f4

   onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));

We also need to update

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Line 769 in d8fb3f4

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.CREATE, iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));

In editing split flow, we also need to update to navigate to IOURequestStepMerchant

App/src/components/MoneyRequestConfirmationList.js

Line 727 in cc71f70

Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(props.reportID, props.reportActionID, CONST.EDIT_REQUEST_FIELD.MERCHANT));

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, props.iouType, transaction.transactionID, props.reportID, Navigation.getActiveRouteWithoutParams()));

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

Current assignee @sobitneupane is eligible for the External assigner, not assigning anyone new.

[dukenv0307]

I would love to work on this issue.

[melvin-bot]

Upwork job price has been updated to $250

[joekaufmanexpensify]

Pending review from @sobitneupane

[joekaufmanexpensify]

@sobitneupane could you please take a look at this one?

[joekaufmanexpensify]

Bumped

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[cead22]

Oh hmmm, maybe we need to wait for the prod deploy so the payment automation kicks in, I'll reopen

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

• Fix/34611: Remove old merchant page #35641

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

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

• @hoangzinh requires payment automatic offer (Reviewer)
• @DylanDylann 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 / @DylanDylann] The PR that introduced the bug has been identified. Link to the PR: N/A
• [@hoangzinh / @DylanDylann] 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: N/A
• [@hoangzinh / @DylanDylann] 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
• [@hoangzinh / @DylanDylann] Determine if we should create a regression test for this bug.
• [@hoangzinh / @DylanDylann] 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.
• [@joekaufmanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: N/A

[joekaufmanexpensify]

@hoangzinh is any BZ checklist needed here?

[hoangzinh]

@joekaufmanexpensify nope, I think. This issue is not a bug fix.

[joekaufmanexpensify]

Sounds good! All set to issue payment on the 26th then.

[joekaufmanexpensify]

All set to issue payment. We need to pay:

• @hoangzinh $250 for C+. Paid via upwork.
• @DylanDylann $250 for PR. Paid via upwork.

[joekaufmanexpensify]

@hoangzinh $250 sent and contract ended!

[joekaufmanexpensify]

@DylanDylann $250 sent and contract ended!

[joekaufmanexpensify]

I also noticed @maddylewis issued a third offer for this job to a different contributor. I don't see this contributor worked on this job, so thinking this was by mistake. Checking with Maddy, but not blocking on this, since all of the actual payments have been issued.

[joekaufmanexpensify]

All set. Thanks everyone!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.