[$250] Dupe detect - Paid expense appears in Review duplicates flow but unable to complete the flow

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.13-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Submit an expense
4. Pay the expense
5. Submit another two same expenses (same amount, date and merchant) as expense from Step 3
6. Go to transaction thread of any of the submitted expense from Step 5
7. Click Review duplicates
8. Click Keep this one on the paid expense (from Step 4)
9. Click Confirm
10. Note that the other two expenses are not removed
11. Go to transaction thread of any of the submitted expense from Step 5
12. Click Review duplicates
13. Click Keep this one on any of the unpaid expense (from Step 5)
14. Click Confirm
15. Note that the process fails and Review duplicates button reappears

Expected Result:

In Step 8, the paid expense should not appear in Review duplicates flow if we cannot keep only the paid one (Step 10)

Actual Result:

In Step 8, the paid expense appears in Review duplicates flow and we cannot keep only the paid one (Step 10)
We also cannot keep only the unpaid one (Step 15) after attempting to keep only the paid expense

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6554735_1722091102495.bandicam_2024-07-27_22-29-22-189.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01add0c19e8ce4b462
• Upwork Job ID: 1817919014389694342
• Last Price Increase: 2024-08-12

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 2

[lanitochka17]

@zanyrenney FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[nyomanjyotisa]

Proposal

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

Paid expense appears in Review duplicates flow but unable to complete the flow

What is the root cause of that problem?

Paid duplicates transaction from other reports are included in the transactionViolations onyx data from the API response

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

We should filter the transactions to show in the Review duplicates page to only show transaction within the current report

Add the following code here

    const finalTransactions = useMemo(
        () => transactions?.filter((transaction) => report?.chatReportID === transaction?.reportID),
        [transactions, report?.chatReportID]
    );

    const finalTransactionIDs = useMemo(
        () => finalTransactions?.map((transaction) => transaction?.transactionID),
        [finalTransactions]
    );

use finalTransactionIDs here

and use finalTransactions here

RESULT

-1-New-Expensify.13.mp4

What alternative solutions did you explore? (Optional)

[daledah]

Edited by proposal-police: This proposal was edited at 2024-08-09 07:00:14 UTC.

Proposal

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

In Step 8, the paid expense appears in Review duplicates flow and we cannot keep only the paid one (Step 10)
We also cannot keep only the unpaid one (Step 15) after attempting to keep only the paid expense

What is the root cause of that problem?

In step 8, the list of transactions to display is from:

App/src/pages/TransactionDuplicate/Review.tsx

Line 36 in 08bb00b

const transactionIDs = [transactionID, ...duplicateTransactionIDs];

where we do not filter out the paid transactions.

The similar logic appears in:

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 282 in 08bb00b

const allTransactionIDsDuplicates = [reviewingTransactionID, ...duplicates].filter((id) => id !== transaction?.transactionID);

App/src/libs/TransactionUtils.ts

Line 853 in 08bb00b

const transactions = [transactionID, ...duplicates].map((item) => getTransaction(item));

App/src/pages/TransactionDuplicate/Review.tsx

Line 36 in 08bb00b

const transactionIDs = [transactionID, ...duplicateTransactionIDs];

App/src/libs/TransactionUtils.ts

Line 973 in 08bb00b

transactionIDList: reviewDuplicates?.duplicates ?? [],

Then, when calling API Transaction_Merge, the transactionIDList includes paid expenses as well.

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

We should create a function to filter out the paid expense:

function removeSettledTransactions(transactionIDs: string[]) {
    return transactionIDs.filter((transactionID) => !isSettled(allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]?.reportID));
}

then use it in

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 282 in 08bb00b

const allTransactionIDsDuplicates = [reviewingTransactionID, ...duplicates].filter((id) => id !== transaction?.transactionID);

App/src/libs/TransactionUtils.ts

Line 853 in 08bb00b

const transactions = [transactionID, ...duplicates].map((item) => getTransaction(item));

App/src/libs/TransactionUtils.ts

Line 973 in 08bb00b

transactionIDList: reviewDuplicates?.duplicates ?? [],

Additional implementation based on new expected behavior in comment:

We should display a message under the Keep All button indicating that some duplicates have already been approved or reimbursed.

In there, add:

    const settledTransaction = transactions.find((transaction) => isSettled(transaction?.reportID));

to know whether we have the transactions that have already been approved or reimbursed.

Then use it to display the text "Some of these duplicates have been approved or paid already":

                    {!!settledTransaction && <View style={[styles.textNormal, styles.colorMuted]}>Some of these duplicates have been approved or paid already</View>}

We can't remove the Keep this one button completely as there might be more than one unapproved expense and the user might want to keep one of them.

We can update it:

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 443 in 08bb00b

{isReviewDuplicateTransactionPage && (

to:

            {isReviewDuplicateTransactionPage && !isSettled (

[zanyrenney]

adding external and to project

[melvin-bot]

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