[HOLD for payment 2024-07-10] [HOLD for payment 2024-07-02] [Dupe Detection] Merge Duplicates - Review Page #39756
Description
Part of the Merge Duplicates project
Main issue: https://github.com/Expensify/Expensify/issues/307591
Doc section: Surfacing Potential Duplicates
Project: [Wave: Collect Approvers] Dupe Detection
Part of a series of issues:
- [HOLD for payment 2024-07-10] [HOLD for payment 2024-07-02] [Dupe Detection] Merge Duplicates - Review Page #39756
- [HOLD for payment 2024-07-22] [HOLD for payment 2024-07-17] [Dupe Detection] Merge Duplicates - Review Fields Page #39808
- [Hold for payment 2024-07-31] [Dupe Detection] Merge Duplicates - Confirm Page #39810
Feature Description
Context for ReviewDuplicates
- Review page - /r/:threadReportID/duplicates/review
- Merchant - /r/:threadReportID/duplicates/review/merchant
- Category - /r/:threadReportID/duplicates/review/category
- Tag - /r/:threadReportID/duplicates/review/tag
- Description - /r/:threadReportID/duplicates/review/description
- Confirm page - /r/:threadReportID/duplicates/confirm
All of these screens will exist in their own navigator so they can be pushed (and later popped off once complete) as a group.
All of this will use an Onyx form key of ONYXKEYS.FORMS.REVIEW_DUPLICATES_FORM so we can store the data selected by the user so far when resolving the duplicates. It also lets us keep track of which transaction to keep and which ones are duplicates when the user clicks on Keep this one.
This key will follow a structure like this:
{
"review_duplicates_form_<transactionID>": [
{
"duplicates": {
<transactionID>: <transactionID>,
...
},
"merchant": "...",
"tag": ...",
"description": ...",
…
}
]
}
Review Page
On top of the page, we will add a button to “Keep All” duplicates. When calling onPress, we will call a new API endpoint called DismissViolation and navigate back. On oldDot, we use UpdateTransaction (which does a lot of stuff) but since we only have EditMoneyRequest here, it seems more appropriate to create a new endpoint to avoid breaking 1:1:1.
-
DismissViolationwill receive a list of transactionIDs since we will have to update each one and the type of violation we are dismissing.- As optimistic data, it will update the
transactions_*Onyx key to includedismissedViolationswith the accountID of the person that dismissed it in the comment field. - As an example:
- As optimistic data, it will update the
- On failure, we will just remove the same data we added to the optimistic data.
In order to be able to get the duplicates and display them, we will:
- Using Onyx, we can get the transaction for the threadReportID the same way as we do it for the EditRequestPage here.
- Once we have that, we can get the transaction IDs of the duplicates using this transaction and listening to the
transactions_*Onyx key. - Using Onyx we can fetch the transactions and with each one of those reports we can get the parentReportAction using the
reportActions_key.
To display the different duplicates on the page, we can make use of ReportActionItem which needs each one of the reportActionIDs so we can iterate and display them using the component.
Each one of ReportActionItem will generate a MoneyRequestAction and each one of this will make use MoneyRequestPreview to render the request. To show the button “Keep this one”:
-
MoneyRequestPreview will add a new button component at the end of the childContainer, similar to what we do in ReportPreview here to submit the report.
- We can use the page's route prop to determine whether we need to show the button or hide it.
onButtonPressed: it should store the iouReport we want to keep inONYXKEYS.FORMS.REVIEW_DUPLICATES_FORMand navigate to the page to start reviewing fields.
-
Preview should be navigable the same way as it is defined in
MoneyRequestAction.
Manual Test Steps
TODO
Automated Tests
TODO