[NewDot Manual Merging] Implement the frontend section

[youssef-lr]

Part of the Manual Expense Merging in NewDot project

Main issue: https://github.com/Expensify/Expensify/issues/496985
Doc section: https://docs.google.com/document/d/1RXJyOVsX2AgKWNViLSxNm3PH2bSnJCuo6K_jcOxUGuo/edit?tab=t.0#bookmark=id.d4udct66dw0x
Project:

Feature Description

Implement the frontend section of the design doc allowing manually merging two expenses from the expense view, report view, and the Reports page.

Manual Test Steps

https://docs.google.com/document/d/1bQM6A13GZsrzsx7H9Q6wmbbf-1cwcu2qBM1HXpWABzw/edit?tab=t.0#heading=h.x1tkdmajx2wc

Automated Tests

1. Add tests for making the API call and verifying optimistic data have been set properly. Mock data for MERGE_TRANSACTION{transactionID} key, mock the API call and then verify:

• Original transaction is updated
• If single expense report, the report was deleted
• Other transaction is deleted
• Violations of original transaction are deleted

2. Update test of ReportSecondaryActionUtilsTest by adding test cases of:

• Merging two cash expenses: merge option should show up
• Merging two card expenses: merge option should not show up
• Merging cash/card expenses: merge option should show up

Issue Owner

Current Issue Owner: @alexpensify

Issue Owner

Current Issue Owner: @alexpensify

[hoangzinh]

Quick update:
Today: I spun up a PR here #65596. Currently, it only contains routes of merging transaction + init pages.
Tomorrow: I will start to add "Merge" menu into secondary action in the expense view

[hoangzinh]

Quick update:
Today: I added "Merge" to secondary actions + display skeleton and empty state for list page
Tomorrow: I'm awaiting GetTransactionsForMerging API command to be deployed or a response example of this API so I can mock data in FE and complete the list page.

[hoangzinh]

Quick update: I've done the merge list page. Tomorrow I will implement receipt review page

[melvin-bot]

@hoangzinh Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[hoangzinh]

Quick update: I've done the merge details page. Tomorrow I will try to implement the confirmation page. I also still need to implement getTransactionsForMergingLocally version here

App/src/libs/actions/MergeTransaction.ts

Lines 34 to 55 in 8bca6b8

	/**
	* Fetches eligible transactions for merging locally
	* This is FE version of READ_COMMANDS.GET_TRANSACTIONS_FOR_MERGING API call
	*/
	function getTransactionsForMergingLocally(transactionID: string, transactions: OnyxCollection<Transaction>) {
	const transactionsArray = Object.values(transactions ?? {});
	const targetTransaction = transactionsArray.find((transaction) => transaction?.transactionID === transactionID);
	if (!targetTransaction || !transactionsArray) {
	Onyx.merge(`${ONYXKEYS.COLLECTION.MERGE_TRANSACTION}${transactionID}`, {
	eligibleTransactions: [],
	});
	return;
	}
	// TODO: Will implement this later
	const eligibleTransactions = transactionsArray.filter((transaction): transaction is Transaction => !!transaction && transaction.transactionID !== transactionID);
	Onyx.merge(`${ONYXKEYS.COLLECTION.MERGE_TRANSACTION}${transactionID}`, {
	eligibleTransactions,
	});
	}

[youssef-lr]

@hoangzinh how's the implementation of Confirmation going?