App: [Violations - Pending Receipts] Display the `rter` Violation with the Pending Pattern

Design Doc: https://docs.google.com/document/d/1zJqlTe_RajuBtfQYvbMx8PpXgA9CEnUGVyuqZihQ-ok/edit Tracking GH: https://github.com/Expensify/Expensify/issues/372206

HOLD ON https://github.com/Expensify/Expensify/issues/384996

---

Similar to how we have TransactionUtils.isPending and TransactionUtils.isReceiptBeingScanned in NewDot to help us with other pending UI flows, we’ll add a new method: TransactionUtils.hasPendingRTERViolation:

TransactionUtils.hasPendingRTERViolation

This will have a similar structure to the current TransactionUtils methods that check for / retrieve violations.

• Params:
  • transactionID: string
  • transactionViolations: TransactionViolation[] - the set of violations for that specific transaction. For components where we are subscribing to all violations we can use the output of TransactionUtils.getTransactionViolations
• Returns:
  • A boolean: If any of the violations for that transactionID in Onyx are the rter violation, with pendingPattern set to true

Additionally, because this will be called frequently with TransactionUtils.isPending and TransactionUtils.isReceiptBeingScanned let’s also make and utilize a method that returns true if any of those return true: hasPendingUI()

We’ll outline this in further detail below, but we’ll call this method in:

1. MoneyRequestPreviewContent.tsx
2. ReportPreview.tsx
3. MoneyRequestHeader.tsx

The first two already have access to the transactionViolations onyx collection key. However, we will need to add it to MoneyRequestHeader.tsx.

Updates to ReportActionItems: MoneyRequestPreview / ReportPreview

Now that we know if our transaction has the “7-Day Hold” rter violation, we can adjust the UI to reflect that it’s “Pending”. For ReportActionItem rows, we will do the same thing that was outlined for pending transactions and scanning receipts in the Update how we display / report expenses doc.

We will show the “pending” hover/message/icon UI for these two cases:

• if the action is a Money Request Action and the linked Transaction has the rter violation (hasPendingRTERViolation - in addition to possibly being isScanning || isPending as outlined in that doc).
  • We’ll also get the proper preview header text as part of getPreviewHeaderText in the MoneyRequestPreviewContent component.
• if the action is a Report Preview containing a single transaction with the rter violation (hasPendingRTERViolation or similarly, isScanning || isPending).
  • We’ll also get the proper message “Receipt pending match with credit card”, with the hourglass icon as well, as part of the logic in the ReportPreview component:
  • Additionally, we’ll set shouldShowSubmitButton to false in this case.

Updates to MoneyReportHeader

Similar to what we’re doing for the Report Preview above, if the report contains only transactions with the rter violation (which again, we’ll alias as hasPendingRTERViolation) we’ll show the Next Steps banner indicating that the receipts are pending match with a credit card.

We’ll also hide the Submit/Approve/Pay buttons in this case as well (i.e. all transactions are pending).

In the case of the “One-Expense” Chat, we’ll use the same pattern as the MoneyRequestHeader as described below.

Updates to MoneyRequestHeader

If hasPendingRTERViolation is true, we’ll show a MoneyRequestHeaderStatusBar in the MoneyRequestHeader here. This will be similar to what we already do for isPending and isScanning. The message will utilize the same hourglass icon and have the copy as seen below.

Let’s also refactor this to be a bit less repetitive. We can create a getPendingType() method that checks if the transaction is RTER vs SCANNING vs PENDING and returns the translations keyed by that type.

“Mark as cash” Button

This will be covered in a separate issue

Issue Owner

Current Issue Owner: @smelaa