[HOLD for payment 2024-04-25] [$250] Remove IOUCurrencySelection.js and copy any changes since Nov 27 into IOURequestStepCurrency.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: IOUCurrencySelection
New Component IOURequestStepCurrency

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/~0107fbe87259b2ef2c
• Upwork Job ID: 1747632778655997952
• Last Price Increase: 2024-01-24
• Automatic offers:
• akinwale | Reviewer | 28119949
• ZhenjaHorbach | Contributor | 28119950

Issue Owner

Current Issue Owner: @sakluger

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Remove IOUCurrencySelection.js and copy any changes since Nov 27 into IOURequestStepCurrency.js

What is the root cause of that problem?

This is not a bug. This is a part of #29107

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

To make this ticket we need

1. Check history IOUCurrencySelection

https://github.com/Expensify/App/commits/main/src/pages/iou/IOUCurrencySelection.js?since=2023-11-25&until=2024-01-15

Here we have a few changes
But judging by the new component IOURequestStepCurrency
These changes are not entirely relevant because we don't have useEffect unlike Old component

App/src/pages/iou/IOUCurrencySelection.js

Lines 79 to 97 in d4c28a4

	useEffect(() => {
	// Do not dismiss the modal, when it is not the edit flow.
	if (!threadReportID) {
	return;
	}
	const report = ReportUtils.getReport(threadReportID);
	const parentReportAction = ReportActionsUtils.getReportAction(report.parentReportID, report.parentReportActionID);
	// Do not dismiss the modal, when a current user can edit this currency of this money request.
	if (ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.CURRENCY)) {
	return;
	}
	// Dismiss the modal when a current user cannot edit a money request.
	Navigation.isNavigationReady().then(() => {
	Navigation.dismissModal();
	});
	}, [threadReportID]);

BUT in Old component, we added useEffect in October which is not used in IOURequestStepCurrency
and if I understand correctly
We need to add this useEffect in New component to use other routes ( For example SCREENS.EDIT_REQUEST.CURRENCY)

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

Line 268 in d4c28a4

[SCREENS.EDIT_REQUEST.CURRENCY]: () => require('../../../pages/iou/IOUCurrencySelection').default as React.ComponentType,

2. Make the necessary changes to the new component

Add useEffect from old component to new (We need this component to use other routes ( For example SCREENS.EDIT_REQUEST.CURRENCY) )

App/src/pages/iou/IOUCurrencySelection.js

Lines 79 to 97 in d4c28a4

	useEffect(() => {
	// Do not dismiss the modal, when it is not the edit flow.
	if (!threadReportID) {
	return;
	}
	const report = ReportUtils.getReport(threadReportID);
	const parentReportAction = ReportActionsUtils.getReportAction(report.parentReportID, report.parentReportActionID);
	// Do not dismiss the modal, when a current user can edit this currency of this money request.
	if (ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.CURRENCY)) {
	return;
	}
	// Dismiss the modal when a current user cannot edit a money request.
	Navigation.isNavigationReady().then(() => {
	Navigation.dismissModal();
	});
	}, [threadReportID]);

Why SCREENS.EDIT_REQUEST.CURRENCY?

UseEffect expects to receive threadReportID from params from navigation

App/src/pages/iou/IOUCurrencySelection.js

Lines 81 to 83 in d4c28a4

	if (!threadReportID) {
	return;
	}

And **SCREENS.EDIT_REQUEST.CURRENCY** this is the only place where we use this parameter

App/src/ROUTES.ts

Lines 171 to 174 in 7c8336b

	EDIT_CURRENCY_REQUEST: {
	route: 'r/:threadReportID/edit/currency',
	getRoute: (threadReportID: string, currency: string, backTo: string) => `r/${threadReportID}/edit/currency?currency=${currency}&backTo=${backTo}` as const,
	},

3. Update routes

Old component are used in several places. Therefore, we need to make sure that everything is updated (And check that the new component works correctly) and does not cause any regression

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

Line 97 in a7a3e7f

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

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

Line 114 in a7a3e7f

[SCREENS.SPLIT_DETAILS.EDIT_CURRENCY]: () => require('../../../pages/iou/IOUCurrencySelection').default as React.ComponentType,

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

Line 268 in a7a3e7f

[SCREENS.EDIT_REQUEST.CURRENCY]: () => require('../../../pages/iou/IOUCurrencySelection').default as React.ComponentType,

What alternative solutions did you explore? (Optional)

NA

[njmulsqb]

I would love to take this!

[melvin-bot]

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

[melvin-bot]

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

I want to work on it