From 5c8b97270563898a6d20711b8462d3ad7612ab86 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 8 Jan 2024 13:32:49 +0700 Subject: [PATCH 1/4] fix: show error message for invalid receipt --- .../ReportActionItem/MoneyRequestView.js | 9 ++++++++- src/libs/ReceiptUtils.ts | 7 +++++-- src/libs/actions/IOU.js | 18 ++++++++++++------ src/types/onyx/OnyxCommon.ts | 6 +++++- src/types/onyx/Transaction.ts | 2 +- 5 files changed, 31 insertions(+), 11 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 37ff163f23c8..766413e60d08 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -220,7 +220,14 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate {hasReceipt && ( - + { + IOU.clearError(transaction.transactionID); + }} + > = Record = Record; +type ReceiptError = {error?: string; source: string; filename: string}; + +type ReceiptErrors = Record; + type Errors = Record; 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}; diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts index 8b7e26280305..f01729591a73 100644 --- a/src/types/onyx/Transaction.ts +++ b/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; From 290c569eaeac6e49df708bfd145047d30b8fecec Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 10 Jan 2024 16:28:54 +0700 Subject: [PATCH 2/4] clean code --- src/components/ReportActionItem/MoneyRequestView.js | 3 ++- src/libs/ReceiptUtils.ts | 4 ++-- src/libs/actions/IOU.js | 7 +------ src/libs/actions/Transaction.ts | 6 +++++- src/types/onyx/OnyxCommon.ts | 6 +----- src/types/onyx/Transaction.ts | 8 ++++++-- 6 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 766413e60d08..7bd4c5461e40 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/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'; @@ -225,7 +226,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate errors={transaction.errors} errorRowStyles={[styles.ml4]} onClose={() => { - IOU.clearError(transaction.transactionID); + Transaction.clearError(transaction.transactionID); }} > diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts index 5ceea7f8a21b..5e49287831ba 100644 --- a/src/libs/ReceiptUtils.ts +++ b/src/libs/ReceiptUtils.ts @@ -8,7 +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 type {ReceiptError} from '@src/types/onyx/Transaction'; import * as FileUtils from './fileDownload/FileUtils'; type ThumbnailAndImageURI = { @@ -32,7 +32,7 @@ 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 errors = _.findLast(transaction.errors) as OnyxCommon.ReceiptError | null; + const errors = _.findLast(transaction.errors) as ReceiptError | null; const path = errors?.source ?? transaction?.receipt?.source ?? receiptPath ?? ''; // filename of uploaded image or last part of remote URI const filename = errors?.filename ?? transaction?.filename ?? receiptFileName ?? ''; diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index fc9b699d5c87..2eefe7963819 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -3304,7 +3304,7 @@ function detachReceipt(transactionID) { * @param {String} filePath */ function replaceReceipt(transactionID, receipt, filePath) { - const transaction = lodashGet(allTransactions, `transactions_${transactionID}`, {}); + const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] || {}; const oldReceipt = lodashGet(transaction, 'receipt', {}); const receiptOptimistic = { source: filePath, @@ -3539,10 +3539,6 @@ 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, @@ -3598,5 +3594,4 @@ export { detachReceipt, getIOUReportID, editMoneyRequest, - clearError, }; diff --git a/src/libs/actions/Transaction.ts b/src/libs/actions/Transaction.ts index f8bfa5fe78fd..b996a117540f 100644 --- a/src/libs/actions/Transaction.ts +++ b/src/libs/actions/Transaction.ts @@ -262,4 +262,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}; diff --git a/src/types/onyx/OnyxCommon.ts b/src/types/onyx/OnyxCommon.ts index 2da8390db54c..b26dc167ed44 100644 --- a/src/types/onyx/OnyxCommon.ts +++ b/src/types/onyx/OnyxCommon.ts @@ -8,10 +8,6 @@ type PendingFields = Record = Record; -type ReceiptError = {error?: string; source: string; filename: string}; - -type ReceiptErrors = Record; - type Errors = Record; type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE; @@ -33,4 +29,4 @@ type Icon = { fallbackIcon?: AvatarSource; }; -export type {Icon, PendingAction, PendingFields, ErrorFields, Errors, AvatarType, ReceiptError, ReceiptErrors}; +export type {Icon, PendingAction, PendingFields, ErrorFields, Errors, AvatarType}; diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts index f01729591a73..dfdfad703991 100644 --- a/src/types/onyx/Transaction.ts +++ b/src/types/onyx/Transaction.ts @@ -49,6 +49,10 @@ type Route = { type Routes = Record; +type ReceiptError = {error?: string; source: string; filename: string}; + +type ReceiptErrors = Record; + type Transaction = { amount: number; billable: boolean; @@ -56,7 +60,7 @@ type Transaction = { comment: Comment; created: string; currency: string; - errors?: OnyxCommon.Errors | OnyxCommon.ReceiptErrors; + 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}; From 2a20b9bf3efd11e82ef1ceb21d0354389b86d144 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 17 Jan 2024 14:07:28 +0700 Subject: [PATCH 3/4] add undefined --- src/libs/ReceiptUtils.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts index 7233558626b6..0b9dda78092a 100644 --- a/src/libs/ReceiptUtils.ts +++ b/src/libs/ReceiptUtils.ts @@ -33,10 +33,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 // 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; - const path = errors.source ?? transaction?.receipt?.source ?? receiptPath ?? ''; + 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 = errors.filename ?? transaction?.filename ?? receiptFileName ?? ''; + const filename = errors?.filename ?? transaction?.filename ?? receiptFileName ?? ''; const isReceiptImage = Str.isImage(filename); const hasEReceipt = transaction?.hasEReceipt; From f48ddc179b9d2ee11cf727029ba29e8b4e5a9ae7 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 19 Jan 2024 16:41:35 +0700 Subject: [PATCH 4/4] add filename --- src/libs/actions/IOU.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 2ef13b9021a1..15967e0e39c1 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -3439,7 +3439,7 @@ function replaceReceipt(transactionID, file, source) { value: { receipt: oldReceipt, filename: transaction.filename, - errors: getReceiptError(receiptOptimistic, source.name), + errors: getReceiptError(receiptOptimistic, file.name), }, }, ];