Receipt audit design updates.

Signed-off-by: Krishna Gupta <[email protected]>
Expensify · Mar 22, 2024 · da3ae8c · da3ae8c
1 parent 25cc0fa
commit da3ae8c
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 36 deletions.
diff --git a/src/components/ReceiptAudit.tsx b/src/components/ReceiptAudit.tsx
@@ -7,32 +7,37 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
 
-function ReceiptAuditHeader({notes = []}: {notes?: string[]}) {
+function ReceiptAuditHeader({notes = [], showAuditMessage = false}: {notes?: string[]; showAuditMessage?: boolean}) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
 
-    const issuesFoundText = notes.length > 0 ? translate('iou.receiptIssuesFound', notes.length) : translate('iou.receiptNoIssuesFound');
+    const issuesFoundText = notes.length > 0 ? translate('iou.receiptIssuesFound', notes.length) : translate('common.verified');
     return (
-        <View style={[styles.ph5]}>
+        <View style={[styles.ph5, styles.mbn1]}>
             <View style={[styles.flexRow, styles.alignItemsCenter]}>
                 <Text style={[styles.textLabelSupporting]}>{translate('common.receipt')}</Text>
-                <Text style={[styles.textLabelSupporting]}>{` • ${issuesFoundText}`}</Text>
-                <Icon
-                    width={12}
-                    height={12}
-                    src={notes.length > 0 ? Expensicons.DotIndicator : Expensicons.Checkmark}
-                    fill={notes.length ? theme.danger : theme.success}
-                    additionalStyles={styles.ml2}
-                />
+                {showAuditMessage && (
+                    <>
+                        <Text style={[styles.textLabelSupporting, styles.textLarge]}>{' • '}</Text>
+                        <Text style={[styles.textLabelSupporting]}>{`${issuesFoundText}`}</Text>
+                        <Icon
+                            width={12}
+                            height={12}
+                            src={notes.length > 0 ? Expensicons.DotIndicator : Expensicons.Checkmark}
+                            fill={notes.length ? theme.danger : theme.success}
+                            additionalStyles={styles.ml1}
+                        />
+                    </>
+                )}
             </View>
         </View>
     );
 }
 
 function ReceiptAuditMessages({notes = []}: {notes?: string[]}) {
     const styles = useThemeStyles();
-    return <View style={[styles.mt1, styles.mb2, styles.ph5, {gap: 6}]}>{notes.length > 0 && notes.map((message) => <Text style={[styles.textLabelError]}>{message}</Text>)}</View>;
+    return <View style={[styles.mtn1, styles.mb2, styles.ph5, styles.gap1]}>{notes.length > 0 && notes.map((message) => <Text style={[styles.textLabelError]}>{message}</Text>)}</View>;
 }
 
 export {ReceiptAuditHeader, ReceiptAuditMessages};
diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -244,8 +244,12 @@ function MoneyRequestView({
         <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)]}>
             <AnimatedEmptyStateBackground />
             <View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
-                {shouldShowNotesViolations && <ReceiptAuditHeader notes={noteTypeViolations} />}
-                {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+                {hasReceipt && (
+                    <ReceiptAuditHeader
+                        notes={noteTypeViolations}
+                        showAuditMessage={shouldShowNotesViolations}
+                    />
+                )}
                 {(showMapAsImage || hasReceipt) && (
                     <OfflineWithFeedback
                         pendingAction={pendingAction}
@@ -291,7 +295,7 @@ function MoneyRequestView({
                     />
                 )}
                 {shouldShowNotesViolations && <ReceiptAuditMessages notes={noteTypeViolations} />}
-                {canUseViolations && <ViolationMessages violations={getViolationsForField('receipt')} />}
+                <ViolationMessages violations={getViolationsForField('receipt')} />
                 <OfflineWithFeedback pendingAction={getPendingFieldAction('amount')}>
                     <MenuItemWithTopDescription
                         title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -291,6 +291,7 @@ export default {
         nonBillable: 'Non-billable',
         tag: 'Tag',
         receipt: 'Receipt',
+        verified: `Verified`,
         replace: 'Replace',
         distance: 'Distance',
         mile: 'mile',
@@ -602,10 +603,7 @@ export default {
         posted: 'Posted',
         deleteReceipt: 'Delete receipt',
         routePending: 'Route pending...',
-        receiptAudit: 'Receipt Audit',
-        receiptVerified: 'Receipt Verified',
-        receiptNoIssuesFound: 'No issues found',
-        receiptIssuesFound: (count: number) => `${count} ${count === 1 ? 'issue' : 'issues'} found`,
+        receiptIssuesFound: (count: number) => `${count === 1 ? 'Issue' : 'Issues'} found`,
         receiptScanning: 'Scan in progress…',
         receiptMissingDetails: 'Receipt missing details',
         missingAmount: 'Missing amount',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -281,6 +281,7 @@ export default {
         nonBillable: 'No facturable',
         tag: 'Etiqueta',
         receipt: 'Recibo',
+        verified: `Verificado`,
         replace: 'Sustituir',
         distance: 'Distancia',
         mile: 'milla',
@@ -595,10 +596,7 @@ 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} ${count === 1 ? 'problema' : 'problemas'}`,
+        receiptIssuesFound: (count: number) => `${count === 1 ? 'Problema' : 'Problemas'}`,
         receiptScanning: 'Escaneo en curso…',
         receiptMissingDetails: 'Recibo con campos vacíos',
         missingAmount: 'Falta importe',

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4225,19 +4225,6 @@ 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,