[PAID] [$500] Update getIOUReportActionDisplayMessage() to accept the transaction as a parameter

[tgolen]

This is coming from #27262. You can read the issue description there to get context behind the problem being solved and the mess being cleaned up.

Problem

ReportUtils.getIOUReportActionDisplayMessage() is called from a view component. It contains logic which calls const transaction = TransactionUtils.getTransaction(originalMessage.IOUTransactionID ?? ''); (a deprecated method).

Why this is important to fix

It maintains more pure and exact flow of data through the react application. If the view is using transaction data, then it needs to subscribe to the transaction in Onyx so that it's assured that the transaction object will never be stale or out-of-date.

Solution

• Pass transaction as a parameter to getIOUReportActionDisplayMessage() and get the parameter from withOnyx() in the view component.
• Remove the deprecated method completely

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cae110240999840b
• Upwork Job ID: 1768370164615811072
• Last Price Increase: 2024-03-14
• Automatic offers:
• hoangzinh | Reviewer | 0
• FitseTLT | Contributor | 0

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[FitseTLT]

Proposal

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

Update getIOUReportActionDisplayMessage() to accept the transaction as a parameter

What is the root cause of that problem?

Enhancement

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

Update getIOUReportActionDisplayMessage to accept transaction as a parameter instead of this

App/src/libs/ReportUtils.ts

Lines 4958 to 4959 in 02e8025

	const transaction = TransactionUtils.getTransaction(originalMessage.IOUTransactionID ?? '');
	const transactionDetails = getTransactionDetails(!isEmptyObject(transaction) ? transaction : null);

and pass transaction from withOnyx (using transactionID action.originalMessage.IOUTransactionID) for REportactionItem here

And for context menu action we will subscribe to transaction in here

App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx

Lines 280 to 284 in 02e8025

	},
	reportActions: {
	key: ({originalReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${originalReportID}`,
	canEvict: false,
	},

we will pass reportActions and reportActionID to the key and we will subscribe to transaction with transactionID we get from the report action's originalMessage.IOUTransactionID and pass the transaction to onPress in the payload when the context menu item is copy to clipboard ( textTranslateKey=='reportActionContextMenu.copyToClipboard') here

App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx

Lines 264 to 265 in 02e8025

	onPress={(event) => interceptAnonymousUser(() => contextAction.onPress?.(closePopup, {...payload, event}), contextAction.isAnonymousAction)}
	description={contextAction.getDescription?.(selection) ?? ''}

and we will pass the transaction when we call getIOUReportActionDisplayMessage

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Lines 366 to 367 in 02e8025

	const displayMessage = ReportUtils.getIOUReportActionDisplayMessage(reportAction);
	Clipboard.setString(displayMessage);

What alternative solutions did you explore? (Optional)

for the context menu ,of course we can omit the transaction parameter and continue the current method of fetching transaction as we are currently doing because we don't have stale data worry for it as the function will be executed when the user presses copy to clipboard not when context menu component is first rendered 👍

[allgandalf]

Proposal

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

Update getIOUReportActionDisplayMessage() to accept the transaction as a parameter

What is the root cause of that problem?

We want to update getIOUReportActionDisplayMessage as getTransaction is depricated

App/src/libs/ReportUtils.ts

Line 4928 in aca0f8c

function getIOUReportActionDisplayMessage(reportAction: OnyxEntry<ReportAction>): string {

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

First we need to update getIOUReportActionDisplayMessage to accept one additional prop :

function getIOUReportActionDisplayMessage( transaction OnyxEntry<Transaction>): string {

Then remove the reportAction references as we get it from component:

App/src/libs/ReportUtils.ts

Lines 4958 to 4959 in aca0f8c

	const transaction = TransactionUtils.getTransaction(originalMessage.IOUTransactionID ?? '');
	const transactionDetails = getTransactionDetails(!isEmptyObject(transaction) ? transaction : null);

Finally we need to get transaction parameter with withOnyx in each component and pass it, currently we use getIOUReportActionDisplayMessage in :

App/src/pages/home/report/ReportActionItemMessage.tsx

Line 61 in aca0f8c

iouMessage = ReportUtils.getIOUReportActionDisplayMessage(action);

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Line 366 in aca0f8c

const displayMessage = ReportUtils.getIOUReportActionDisplayMessage(reportAction);

What alternative solutions did you explore? (Optional)

N/A

[Krishna2323]

Proposal

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

Update getIOUReportActionDisplayMessage() to accept the transaction as a parameter

What is the root cause of that problem?

Enhancement

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

We need to pass transaction from these two places, in ReportActionItemMessage we can use withOnyx & in ContextMenuActions we need to use Onyx.connect.
We will use reportAction.originalMessage.IOUTransactionID to get the data fro Onyx.

App/src/pages/home/report/ReportActionItemMessage.tsx

Line 61 in 2737e44

iouMessage = ReportUtils.getIOUReportActionDisplayMessage(action);

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Line 366 in 2737e44

const displayMessage = ReportUtils.getIOUReportActionDisplayMessage(reportAction);

Here we need to accept transaction prop and remove the line.

App/src/libs/ReportUtils.ts

Lines 4925 to 4928 in 2737e44

	/**
	* Return iou report action display message
	*/
	function getIOUReportActionDisplayMessage(reportAction: OnyxEntry<ReportAction>): string {

App/src/libs/ReportUtils.ts

Line 4958 in 2737e44

const transaction = TransactionUtils.getTransaction(originalMessage.IOUTransactionID ?? '');

Result

Alternative

Instead of adding additional prop, we can utilize the transactions we have in ReportUtils, we have already connected to Onyx for transactions. We can use it like

allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${iouMessage?.IOUTransactionID}`] ?? ({} as Transaction)

App/src/libs/ReportUtils.ts

Lines 499 to 509 in 2737e44

	let allTransactions: OnyxCollection<Transaction> = {};
	Onyx.connect({
	key: ONYXKEYS.COLLECTION.TRANSACTION,
	waitForCollectionCallback: true,
	callback: (value) => {
	if (!value) {
	return;
	}
	allTransactions = Object.fromEntries(Object.entries(value).filter(([, transaction]) => transaction));
	},
	});