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: stringtransactionViolations: 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:
- MoneyRequestPreviewContent.tsx
- ReportPreview.tsx
- 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).
- 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: @mallenexpensify
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.
transactionID:stringtransactionViolations: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.getTransactionViolationstransactionIDin Onyx are therterviolation, withpendingPatternset totrueAdditionally, because this will be called frequently with TransactionUtils.isPending and TransactionUtils.isReceiptBeingScanned let's also make and utilize a method that returns
trueif any of those returntrue:hasPendingUI()We'll outline this in further detail below, but we'll call this method in:
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/ReportPreviewNow that we know if our transaction has the "7-Day Hold"
rterviolation, 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:
hasPendingRTERViolation- in addition to possibly beingisScanning || isPendingas outlined in that doc).hasPendingRTERViolationor similarly,isScanning || isPending).falsein this case.Updates to MoneyReportHeader
Similar to what we're doing for the Report Preview above, if the report contains only transactions with the
rterviolation (which again, we'll alias ashasPendingRTERViolation) 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
MoneyRequestHeaderas described below.Updates to MoneyRequestHeader
If
hasPendingRTERViolationistrue, we'll show aMoneyRequestHeaderStatusBarin theMoneyRequestHeaderhere. This will be similar to what we already do forisPendingandisScanning. 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 isRTERvsSCANNINGvsPENDINGand returns the translations keyed by that type."Mark as cash" Button
This will be covered in a separate issue
Issue Owner
Current Issue Owner: @mallenexpensify