Merge pull request #34087 from tienifr/fix/28343-show-error-for-inval…

…id-receipt

fix: show error message for invalid receipt

src/components/ReportActionItem/MoneyRequestView.js

@@ -39,6 +39,7 @@ import iouReportPropTypes from '@pages/iouReportPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import {policyDefaultProps, policyPropTypes} from '@pages/workspace/withPolicy';
 import * as IOU from '@userActions/IOU';
+import * as Transaction from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -233,7 +234,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={() => {
+ Transaction.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 {ReceiptError} from '@src/types/onyx/Transaction';
 import * as FileUtils from './fileDownload/FileUtils';
 
 type ThumbnailAndImageURI = {
@@ -34,9 +36,11 @@ function getThumbnailAndImageURIs(transaction: Transaction, receiptPath: string
  }
 
  // 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 ?? '';
+ // If there're errors, we need to display them in preview. We can store many files in errors, but we just need to get the last one
+ const errors = _.findLast(transaction.errors) as ReceiptError | undefined;
+ 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

@@ -3499,18 +3499,18 @@ function detachReceipt(transactionID) {
  * @param {String} source
  */
 function replaceReceipt(transactionID, file, source) {
- const transaction = lodashGet(allTransactions, 'transactionID', {});
+ const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] || {};
  const oldReceipt = lodashGet(transaction, 'receipt', {});
-
+ const receiptOptimistic = {
+ source,
+ state: CONST.IOU.RECEIPT_STATE.OPEN,
+ };
  const optimisticData = [
  {
  onyxMethod: Onyx.METHOD.MERGE,
  key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
  value: {
- receipt: {
- source,
- state: CONST.IOU.RECEIPT_STATE.OPEN,
- },
+ receipt: receiptOptimistic,
  filename: file.name,
  },
  },
@@ -3523,6 +3523,7 @@ function replaceReceipt(transactionID, file, source) {
  value: {
  receipt: oldReceipt,
  filename: transaction.filename,
+ errors: getReceiptError(receiptOptimistic, file.name),
  },
  },
  ];

src/libs/actions/Transaction.ts

@@ -266,4 +266,8 @@ function updateWaypoints(transactionID: string, waypoints: WaypointCollection, i
  });
 }
 
-export {addStop, createInitialWaypoints, saveWaypoint, removeWaypoint, getRoute, getRouteForDraft, updateWaypoints};
+function clearError(transactionID: string) {
+ Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {errors: null});
+}
+
+export {addStop, createInitialWaypoints, saveWaypoint, removeWaypoint, getRoute, getRouteForDraft, updateWaypoints, clearError};

src/types/onyx/Transaction.ts

@@ -49,14 +49,18 @@ type Route = {
 
 type Routes = Record<string, Route>;
 
+type ReceiptError = {error?: string; source: string; filename: string};
+
+type ReceiptErrors = Record<string, ReceiptError>;
+
 type Transaction = {
  amount: number;
  billable: boolean;
  category: string;
  comment: Comment;
  created: string;
  currency: string;
- errors?: OnyxCommon.Errors;
+ errors?: OnyxCommon.Errors | ReceiptErrors;
  errorFields?: OnyxCommon.ErrorFields<'route'>;
  // The name of the file used for a receipt (formerly receiptFilename)
  filename?: string;
@@ -97,4 +101,4 @@ type Transaction = {
 };
 
 export default Transaction;
-export type {WaypointCollection, Comment, Receipt, Waypoint};
+export type {WaypointCollection, Comment, Receipt, Waypoint, ReceiptError};