feat: Receipt Audit Feature / Note type violations.

src/components/ReceiptAudit.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+
+export default function ReceiptAudit({notes = []}: {notes?: string[]}) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const {translate} = useLocalize();
+
+    const issuesFoundText = notes.length > 0 ? translate('iou.receiptIssuesFound', notes.length) : translate('iou.receiptNoIssuesFound');
+    return (
+        <View style={[styles.mt1, styles.mb2, styles.ph5]}>
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
+                <View style={[styles.receiptAuditTitleContainer, {backgroundColor: notes.length ? theme.danger : theme.success}]}>
+                    <Icon
+                        width={18}
+                        height={18}
+                        src={notes.length > 0 ? Expensicons.Receipt : Expensicons.Checkmark}
+                        fill={theme.white}
+                    />
+                    <Text style={[styles.textLabel, styles.textStrong, styles.textWhite]}>{notes.length > 0 ? translate('iou.receiptAudit') : translate('iou.receiptVerified')}</Text>
+                </View>
+                <Text style={[styles.textLabel, styles.textSupporting]}>{issuesFoundText}</Text>
+            </View>
+            <View style={[styles.mt2, styles.gap1]}>{notes.length > 0 && notes.map((message) => <Text style={[styles.textLabelError]}>{message}</Text>)}</View>
+        </View>
+    );
+}

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

@@ -87,6 +87,7 @@ function MoneyRequestPreviewContent({
     const hasReceipt = TransactionUtils.hasReceipt(transaction);
     const isScanning = hasReceipt && TransactionUtils.isReceiptBeingScanned(transaction);
     const hasViolations = TransactionUtils.hasViolation(transaction?.transactionID ?? '', transactionViolations);
+    const hasNoteTypeViolations = TransactionUtils.hasNoteTypeViolation(transaction?.transactionID ?? '', transactionViolations);
     const hasFieldErrors = TransactionUtils.hasMissingSmartscanFields(transaction);
     const shouldShowRBR = hasViolations || hasFieldErrors;
     const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction);
@@ -159,6 +160,8 @@ function MoneyRequestPreviewContent({
                 const isTooLong = violations.filter((v) => v.type === 'violation').length > 1 || violationMessage.length > 15;
                 message += ` • ${isTooLong ? translate('violations.reviewRequired') : violationMessage}`;
             }
+        } else if (hasNoteTypeViolations && transaction && !ReportUtils.isReportApproved(iouReport) && !ReportUtils.isSettled(iouReport?.reportID)) {
+            message += ` • ${translate('violations.reviewRequired')}`;
         } else if (ReportUtils.isPaidGroupPolicyExpenseReport(iouReport) && ReportUtils.isReportApproved(iouReport) && !ReportUtils.isSettled(iouReport?.reportID)) {
             message += ` • ${translate('iou.approved')}`;
         } else if (iouReport?.isWaitingOnBankAccount) {

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -6,6 +6,7 @@ import ConfirmedRoute from '@components/ConfirmedRoute';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import ReceiptAudit from '@components/ReceiptAudit';
 import ReceiptEmptyState from '@components/ReceiptEmptyState';
 import SpacerView from '@components/SpacerView';
 import Switch from '@components/Switch';
@@ -127,6 +128,8 @@ function MoneyRequestView({
     const canEditDate = ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.DATE);
     const canEditReceipt = ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.RECEIPT);
     const canEditDistance = ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, CONST.EDIT_REQUEST_FIELD.DISTANCE);
+    const hasReceipt = TransactionUtils.hasReceipt(transaction);
+    const isReceiptBeingScanned = hasReceipt && TransactionUtils.isReceiptBeingScanned(transaction);
 
     // A flag for verifying that the current report is a sub-report of a workspace chat
     // if the policy of the report is either Collect or Control, then this report must be tied to workspace chat
@@ -148,6 +151,8 @@ function MoneyRequestView({
         (field: ViolationField, data?: OnyxTypes.TransactionViolation['data']): boolean => !!canUseViolations && getViolationsForField(field, data).length > 0,
         [canUseViolations, getViolationsForField],
     );
+    const noteTypeViolations = transactionViolations?.filter((violation) => violation.type === 'note').map((v) => ViolationsUtils.getViolationTranslation(v, translate));
+    const shouldShowNotesViolations = !isReceiptBeingScanned && canUseViolations && hasReceipt;
 
     let amountDescription = `${translate('iou.amount')}`;
 
@@ -189,7 +194,6 @@ function MoneyRequestView({
         }
     }
 
-    const hasReceipt = TransactionUtils.hasReceipt(transaction);
     let receiptURIs;
     const hasErrors = canEdit && TransactionUtils.hasMissingSmartscanFields(transaction);
     if (hasReceipt) {
@@ -285,6 +289,7 @@ function MoneyRequestView({
                         }
                     />
                 )}
+                {shouldShowNotesViolations && <ReceiptAudit notes={noteTypeViolations} />}
                 {canUseViolations && <ViolationMessages violations={getViolationsForField('receipt')} />}
                 <OfflineWithFeedback pendingAction={getPendingFieldAction('amount')}>
                     <MenuItemWithTopDescription

src/languages/en.ts

@@ -601,6 +601,10 @@ export default {
         posted: 'Posted',
         deleteReceipt: 'Delete receipt',
         routePending: 'Route pending...',
+        receiptAudit: 'Receipt Audit',
+        receiptVerified: 'Receipt Verified',
+        receiptNoIssuesFound: 'No issues Found',
+        receiptIssuesFound: (count: number) => `${count} Issue(s) Found`,
         receiptScanning: 'Scan in progress…',
         receiptMissingDetails: 'Receipt missing details',
         receiptStatusTitle: 'Scanning…',

src/languages/es.ts

@@ -594,6 +594,10 @@ export default {
         posted: 'Contabilizado',
         deleteReceipt: 'Eliminar recibo',
         routePending: 'Ruta pendiente...',
+        receiptAudit: 'Auditoría de recibos',
+        receiptVerified: 'Recibo verificado',
+        receiptNoIssuesFound: 'No se encontraron problemas',
+        receiptIssuesFound: (count: number) => `Se encontró ${count} problema(s)`,
         receiptScanning: 'Escaneo en curso…',
         receiptMissingDetails: 'Recibo con campos vacíos',
         receiptStatusTitle: 'Escaneando…',

src/libs/TransactionUtils.ts

@@ -593,6 +593,13 @@ function hasViolation(transactionID: string, transactionViolations: OnyxCollecti
     return Boolean(transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID]?.some((violation: TransactionViolation) => violation.type === 'violation'));
 }
 
+/**
+ * Checks if any violations for the provided transaction are of type 'note'
+ */
+function hasNoteTypeViolation(transactionID: string, transactionViolations: OnyxCollection<TransactionViolation[]>): boolean {
+    return Boolean(transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID]?.some((violation: TransactionViolation) => violation.type === 'note'));
+}
+
 function getTransactionViolations(transactionID: string, transactionViolations: OnyxCollection<TransactionViolation[]>): TransactionViolation[] | null {
     return transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID] ?? null;
 }
@@ -663,6 +670,7 @@ export {
     waypointHasValidAddress,
     getRecentTransactions,
     hasViolation,
+    hasNoteTypeViolation,
 };
 
 export type {TransactionChanges};

src/styles/index.ts

@@ -4197,6 +4197,19 @@ const styles = (theme: ThemeColors) =>
             borderWidth: 1,
         },
 
+        receiptAuditTitleContainer: {
+            flexDirection: 'row',
+            gap: 4,
+            padding: 4,
+            paddingHorizontal: 8,
+            height: variables.inputHeightSmall,
+            borderRadius: variables.componentBorderRadiusSmall,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: theme.border,
+        },
+
         mapViewContainer: {
             ...flex.flex1,
             minHeight: 300,