fix: show error message for invalid receipt

src/components/ReportActionItem/MoneyRequestView.js

@@ -220,7 +220,14 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
             <AnimatedEmptyStateBackground />
             <View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
                 {hasReceipt && (
-                    <OfflineWithFeedback pendingAction={pendingAction}>
+                    <OfflineWithFeedback
+                        pendingAction={pendingAction}
+                        errors={transaction.errors}
+                        errorRowStyles={[styles.ml4]}
+                        onClose={() => {
+                            IOU.clearError(transaction.transactionID);
+                        }}
+                    >
                         <View style={styles.moneyRequestViewImage}>
                             <ReportActionItemImage
                                 thumbnail={receiptURIs.thumbnail}

src/libs/ReceiptUtils.ts

@@ -1,4 +1,5 @@
 import Str from 'expensify-common/lib/str';
+import _ from 'lodash';
 import type {ImageSourcePropType} from 'react-native';
 import ReceiptDoc from '@assets/images/receipt-doc.png';
 import ReceiptGeneric from '@assets/images/receipt-generic.png';
@@ -7,6 +8,7 @@ import ReceiptSVG from '@assets/images/receipt-svg.png';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Transaction} from '@src/types/onyx';
+import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import * as FileUtils from './fileDownload/FileUtils';
 
 type ThumbnailAndImageURI = {
@@ -30,9 +32,10 @@ type FileNameAndExtension = {
  */
 function getThumbnailAndImageURIs(transaction: Transaction, receiptPath: string | null = null, receiptFileName: string | null = null): ThumbnailAndImageURI {
     // URI to image, i.e. blob:new.expensify.com/9ef3a018-4067-47c6-b29f-5f1bd35f213d or expensify.com/receipts/w_e616108497ef940b7210ec6beb5a462d01a878f4.jpg
-    const path = transaction?.receipt?.source ?? receiptPath ?? '';
+    const errors = _.findLast(transaction.errors) as OnyxCommon.ReceiptError | null;
+    const path = errors?.source ?? transaction?.receipt?.source ?? receiptPath ?? '';
     // filename of uploaded image or last part of remote URI
-    const filename = transaction?.filename ?? receiptFileName ?? '';
+    const filename = errors?.filename ?? transaction?.filename ?? receiptFileName ?? '';
     const isReceiptImage = Str.isImage(filename);
 
     const hasEReceipt = transaction?.hasEReceipt;

src/libs/actions/IOU.js

@@ -3304,18 +3304,18 @@ function detachReceipt(transactionID) {
  * @param {String} filePath
  */
 function replaceReceipt(transactionID, receipt, filePath) {
-    const transaction = lodashGet(allTransactions, 'transactionID', {});
+    const transaction = lodashGet(allTransactions, `transactions_${transactionID}`, {});
     const oldReceipt = lodashGet(transaction, 'receipt', {});
-
+    const receiptOptimistic = {
+        source: filePath,
+        state: CONST.IOU.RECEIPT_STATE.OPEN,
+    };
     const optimisticData = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
             value: {
-                receipt: {
-                    source: filePath,
-                    state: CONST.IOU.RECEIPT_STATE.OPEN,
-                },
+                receipt: receiptOptimistic,
                 filename: receipt.name,
             },
         },
@@ -3328,6 +3328,7 @@ function replaceReceipt(transactionID, receipt, filePath) {
             value: {
                 receipt: oldReceipt,
                 filename: transaction.filename,
+                errors: getReceiptError(receiptOptimistic, receipt.name),
             },
         },
     ];
@@ -3538,6 +3539,10 @@ function getIOUReportID(iou, route) {
     return lodashGet(route, 'params.reportID') || lodashGet(iou, 'participants.0.reportID', '');
 }
 
+function clearError(transactionID) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {errors: null});
+}
+
 export {
     setMoneyRequestParticipants,
     createDistanceRequest,
@@ -3593,4 +3598,5 @@ export {
     detachReceipt,
     getIOUReportID,
     editMoneyRequest,
+    clearError,
 };

src/types/onyx/OnyxCommon.ts

@@ -8,6 +8,10 @@ type PendingFields<TKey extends string = string> = Record<TKey, PendingAction |
 
 type ErrorFields<TKey extends string = string> = Record<TKey, Errors | null | undefined>;
 
+type ReceiptError = {error?: string; source: string; filename: string};
+
+type ReceiptErrors = Record<string, ReceiptError>;
+
 type Errors = Record<string, string>;
 
 type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
@@ -29,4 +33,4 @@ type Icon = {
     fallbackIcon?: AvatarSource;
 };
 
-export type {Icon, PendingAction, PendingFields, ErrorFields, Errors, AvatarType};
+export type {Icon, PendingAction, PendingFields, ErrorFields, Errors, AvatarType, ReceiptError, ReceiptErrors};

src/types/onyx/Transaction.ts

@@ -56,7 +56,7 @@ type Transaction = {
     comment: Comment;
     created: string;
     currency: string;
-    errors?: OnyxCommon.Errors;
+    errors?: OnyxCommon.Errors | OnyxCommon.ReceiptErrors;
     errorFields?: OnyxCommon.ErrorFields<'route'>;
     // The name of the file used for a receipt (formerly receiptFilename)
     filename?: string;