From d99d92d4a1ba20976af09a51cc504fdd9a21169a Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 20 Jan 2024 01:58:07 +0300 Subject: [PATCH 01/56] implemented receipt image component --- src/components/DistanceEReceipt.js | 13 +-- ...oraryForRefactorRequestConfirmationList.js | 8 +- src/components/ReceiptImage.tsx | 82 +++++++++++++++++++ .../ReportActionItemImage.tsx | 44 ++-------- 4 files changed, 97 insertions(+), 50 deletions(-) create mode 100644 src/components/ReceiptImage.tsx diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js index 0241eea44063..f900da2affcf 100644 --- a/src/components/DistanceEReceipt.js +++ b/src/components/DistanceEReceipt.js @@ -16,8 +16,8 @@ import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import ImageSVG from './ImageSVG'; import PendingMapView from './MapView/PendingMapView'; +import ReceiptImage from './ReceiptImage'; import Text from './Text'; -import ThumbnailImage from './ThumbnailImage'; import transactionPropTypes from './transactionPropTypes'; const propTypes = { @@ -64,16 +64,7 @@ function DistanceEReceipt({transaction}) { /> - {isOffline || !thumbnailSource ? ( - - ) : ( - - )} + {isOffline || !thumbnailSource ? : } {formattedTransactionAmount} diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index 36d424ea28f2..67cf9db3674c 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -36,6 +36,7 @@ import Image from './Image'; import MenuItemWithTopDescription from './MenuItemWithTopDescription'; import optionPropTypes from './optionPropTypes'; import OptionsSelector from './OptionsSelector'; +import ReceiptImage from './ReceiptImage'; import SettlementButton from './SettlementButton'; import Switch from './Switch'; import tagPropTypes from './tagPropTypes'; @@ -639,9 +640,12 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ )} {(receiptImage || receiptThumbnail) && ( - ; + isAuthTokenRequired?: boolean; + confirmationPage?: boolean; +}; + +function ReceiptImage({transaction, receiptPath, receiptFileName, style, isAuthTokenRequired, confirmationPage}: ReceiptImageProps) { + const styles = useThemeStyles(); + // 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 ?? ''; + // filename of uploaded image or last part of remote URI + const filename = transaction?.filename ?? receiptFileName ?? ''; + const isReceiptImage = Str.isImage(filename); + const shouldDisplayThumbnail = Object.hasOwn(transaction?.pendingFields ?? {}, 'waypoints') || !isReceiptImage; + const image = !shouldDisplayThumbnail && !(path.startsWith('blob:') || path.startsWith('file:')) ? `${path}.1024.jpg` : path; + const isLocalFile = typeof path === 'number' || path.startsWith('blob:') || path.startsWith('file:') || path.startsWith('/'); + + const imageSource = tryResolveUrlFromApiRoot(image ?? ''); + + const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction); + + if (!transaction) { + return ( + + ); + } + + if (!!isEReceipt || shouldDisplayThumbnail) { + if (!(!isLocalFile && !Str.isPDF(imageSource))) { + return ( + + + + ); + } + + return ( + + ); + } + + return isReceiptImage && !confirmationPage ? ( + + ) : ( + + ); +} + +export default ReceiptImage; diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index aa5d0513f0d7..3822f3ab42aa 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -1,16 +1,10 @@ -import Str from 'expensify-common/lib/str'; import React from 'react'; -import type {ReactElement} from 'react'; -import {View} from 'react-native'; import AttachmentModal from '@components/AttachmentModal'; -import EReceiptThumbnail from '@components/EReceiptThumbnail'; -import Image from '@components/Image'; import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus'; +import ReceiptImage from '@components/ReceiptImage'; import {ShowContextMenuContext} from '@components/ShowContextMenuContext'; -import ThumbnailImage from '@components/ThumbnailImage'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as TransactionUtils from '@libs/TransactionUtils'; import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot'; import CONST from '@src/CONST'; import type {Transaction} from '@src/types/onyx'; @@ -45,34 +39,6 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, tr const styles = useThemeStyles(); const {translate} = useLocalize(); const imageSource = tryResolveUrlFromApiRoot(image ?? ''); - const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? ''); - const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction); - - let receiptImageComponent: ReactElement; - - if (isEReceipt) { - receiptImageComponent = ( - - - - ); - } else if (thumbnail && !isLocalFile && !Str.isPDF(imageSource as string)) { - receiptImageComponent = ( - - ); - } else { - receiptImageComponent = ( - - ); - } if (enablePreviewModal) { return ( @@ -98,7 +64,11 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, tr accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} accessibilityLabel={translate('accessibilityHints.viewAttachment')} > - {receiptImageComponent} + ) } @@ -108,7 +78,7 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, tr ); } - return receiptImageComponent; + return ; } ReportActionItemImage.displayName = 'ReportActionItemImage'; From a1f5f69a11350073692f4bd4585d62f2ef6c0112 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 20 Jan 2024 02:02:31 +0300 Subject: [PATCH 02/56] pass receipt name for non modal display --- src/components/ReportActionItem/ReportActionItemImage.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 3822f3ab42aa..1570aba49f7c 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -78,7 +78,13 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, tr ); } - return ; + return ( + + ); } ReportActionItemImage.displayName = 'ReportActionItemImage'; From 7dfd88567c07d4279fa0ed4d1d8745b3c3a1961e Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 20 Jan 2024 02:18:53 +0300 Subject: [PATCH 03/56] minor fix --- src/components/ReceiptImage.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 984ba0bf2e9a..8de6d23127a8 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -36,10 +36,11 @@ function ReceiptImage({transaction, receiptPath, receiptFileName, style, isAuthT if (!transaction) { return ( - ); } From e9c766607677fe453531776d31f4652ba2c4b959 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 20 Jan 2024 22:00:19 +0300 Subject: [PATCH 04/56] changed implementation --- src/components/DistanceEReceipt.js | 12 +++- ...oraryForRefactorRequestConfirmationList.js | 13 ++-- src/components/ReceiptImage.tsx | 66 +++++-------------- .../ReportActionItem/MoneyRequestView.js | 1 + .../ReportActionItemImage.tsx | 39 ++++++----- .../ReportActionItemImages.tsx | 8 ++- src/libs/ReceiptUtils.ts | 38 ++--------- 7 files changed, 71 insertions(+), 106 deletions(-) diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js index f900da2affcf..8593cdcb5b93 100644 --- a/src/components/DistanceEReceipt.js +++ b/src/components/DistanceEReceipt.js @@ -34,7 +34,7 @@ function DistanceEReceipt({transaction}) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const {thumbnail} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {}; + const {thumbnail, isThumbnail} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {}; const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction); const formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : translate('common.tbd'); const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || ''); @@ -64,7 +64,15 @@ function DistanceEReceipt({transaction}) { /> - {isOffline || !thumbnailSource ? : } + {isOffline || !thumbnailSource ? ( + + ) : ( + + )} {formattedTransactionAmount} diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index 67cf9db3674c..c6bc49fd381e 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -32,7 +32,6 @@ import categoryPropTypes from './categoryPropTypes'; import ConfirmedRoute from './ConfirmedRoute'; import FormHelpMessage from './FormHelpMessage'; import * as Expensicons from './Icon/Expensicons'; -import Image from './Image'; import MenuItemWithTopDescription from './MenuItemWithTopDescription'; import optionPropTypes from './optionPropTypes'; import OptionsSelector from './OptionsSelector'; @@ -614,7 +613,11 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ ); }, [isReadOnly, iouType, selectedParticipants.length, confirm, bankAccountRoute, iouCurrencyCode, policyID, splitOrRequestOptions, formError, styles.ph1, styles.mb2, translate]); - const {image: receiptImage, thumbnail: receiptThumbnail} = receiptPath && receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, receiptPath, receiptFilename) : {}; + const { + image: receiptImage, + thumbnail: receiptThumbnail, + isThumbnail, + } = receiptPath && receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, receiptPath, receiptFilename) : {}; return ( ; + transactionID?: string; + isThumbnail?: boolean; + shouldUseThumnailImage?: boolean; + isEReceipt?: boolean; + source?: string; isAuthTokenRequired?: boolean; - confirmationPage?: boolean; + style?: StyleProp; }; -function ReceiptImage({transaction, receiptPath, receiptFileName, style, isAuthTokenRequired, confirmationPage}: ReceiptImageProps) { +function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImage = false, isEReceipt = false, source, isAuthTokenRequired, style}: ReceiptImageProps) { const styles = useThemeStyles(); - // 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 ?? ''; - // filename of uploaded image or last part of remote URI - const filename = transaction?.filename ?? receiptFileName ?? ''; - const isReceiptImage = Str.isImage(filename); - const shouldDisplayThumbnail = Object.hasOwn(transaction?.pendingFields ?? {}, 'waypoints') || !isReceiptImage; - const image = !shouldDisplayThumbnail && !(path.startsWith('blob:') || path.startsWith('file:')) ? `${path}.1024.jpg` : path; - const isLocalFile = typeof path === 'number' || path.startsWith('blob:') || path.startsWith('file:') || path.startsWith('/'); - const imageSource = tryResolveUrlFromApiRoot(image ?? ''); - - const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction); - - if (!transaction) { + if (isEReceipt || isThumbnail) { return ( - + + + ); } - if (!!isEReceipt || shouldDisplayThumbnail) { - if (!(!isLocalFile && !Str.isPDF(imageSource))) { - return ( - - - - ); - } - + if (shouldUseThumnailImage) { return ( - ) : ( + return ( ); } +export type {ReceiptImageProps}; export default ReceiptImage; diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 86affbcac114..4fa2f76e20b8 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -237,6 +237,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate - + ) } @@ -78,13 +93,7 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, tr ); } - return ( - - ); + return ; } ReportActionItemImage.displayName = 'ReportActionItemImage'; diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index c24defb8ac08..8c2fc9638dea 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -11,8 +11,9 @@ import type {Transaction} from '@src/types/onyx'; import ReportActionItemImage from './ReportActionItemImage'; type Image = { - thumbnail: string | number; - image: string | number; + thumbnail?: string; + isThumbnail?: boolean; + image: string; transaction: Transaction; isLocalFile: boolean; }; @@ -71,7 +72,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report return ( - {shownImages.map(({thumbnail, image, transaction, isLocalFile}, index) => { + {shownImages.map(({thumbnail, isThumbnail, image, transaction, isLocalFile}, index) => { const isLastImage = index === numberOfShownImages - 1; // Show a border to separate multiple images. Shown to the right for each except the last. @@ -87,6 +88,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report image={image} isLocalFile={isLocalFile} transaction={transaction} + isThumbnail={isThumbnail} /> {isLastImage && remaining > 0 && ( diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts index bcba68a3a0bd..a01f7779c13a 100644 --- a/src/libs/ReceiptUtils.ts +++ b/src/libs/ReceiptUtils.ts @@ -1,24 +1,13 @@ import Str from 'expensify-common/lib/str'; -import type {ImageSourcePropType} from 'react-native'; -import ReceiptDoc from '@assets/images/receipt-doc.png'; -import ReceiptGeneric from '@assets/images/receipt-generic.png'; -import ReceiptHTML from '@assets/images/receipt-html.png'; -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 * as FileUtils from './fileDownload/FileUtils'; type ThumbnailAndImageURI = { - image: ImageSourcePropType | string; - thumbnail: ImageSourcePropType | string | null; + image: string; + thumbnail?: string; transaction?: Transaction; isLocalFile?: boolean; -}; - -type FileNameAndExtension = { - fileExtension?: string; - fileName?: string; + isThumbnail?: boolean; }; /** @@ -39,12 +28,12 @@ function getThumbnailAndImageURIs(transaction: Transaction, receiptPath: string if (!Object.hasOwn(transaction?.pendingFields ?? {}, 'waypoints')) { if (hasEReceipt) { - return {thumbnail: null, image: ROUTES.ERECEIPT.getRoute(transaction.transactionID), transaction}; + return {image: ROUTES.ERECEIPT.getRoute(transaction.transactionID), transaction}; } // For local files, we won't have a thumbnail yet if (isReceiptImage && (path.startsWith('blob:') || path.startsWith('file:'))) { - return {thumbnail: null, image: path, isLocalFile: true}; + return {image: path, isLocalFile: true}; } if (isReceiptImage) { @@ -52,22 +41,9 @@ function getThumbnailAndImageURIs(transaction: Transaction, receiptPath: string } } - const {fileExtension} = FileUtils.splitExtensionFromFileName(filename) as FileNameAndExtension; - let image = ReceiptGeneric; - if (fileExtension === CONST.IOU.FILE_TYPES.HTML) { - image = ReceiptHTML; - } - - if (fileExtension === CONST.IOU.FILE_TYPES.DOC || fileExtension === CONST.IOU.FILE_TYPES.DOCX) { - image = ReceiptDoc; - } - - if (fileExtension === CONST.IOU.FILE_TYPES.SVG) { - image = ReceiptSVG; - } - const isLocalFile = typeof path === 'number' || path.startsWith('blob:') || path.startsWith('file:') || path.startsWith('/'); - return {thumbnail: image, image: path, isLocalFile}; + + return {isThumbnail: true, image: path, isLocalFile}; } // eslint-disable-next-line import/prefer-default-export From e88e1ce8082cfc9845a6dbe267e45ee6c73f1c2c Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 20 Jan 2024 22:08:44 +0300 Subject: [PATCH 05/56] fix styling --- src/components/ReceiptImage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index df34aec496e0..7c5fde88f600 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -21,7 +21,7 @@ function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImag if (isEReceipt || isThumbnail) { return ( - + ); From 26fa66ba9be8a4f87a8ce1b673653811f3c87f9c Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 20 Jan 2024 22:35:37 +0300 Subject: [PATCH 06/56] fix borderRadius --- src/components/EReceiptThumbnail.tsx | 4 +++- src/components/ReceiptImage.tsx | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 5976200975cd..b677a60cc02c 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -18,6 +18,7 @@ import Image from './Image'; type EReceiptThumbnailOnyxProps = { transaction: OnyxEntry; + borderRadius?: number; }; type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { @@ -35,7 +36,7 @@ const backgroundImages = { [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink, }; -function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) { +function EReceiptThumbnail({transaction, borderRadius}: EReceiptThumbnailProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -83,6 +84,7 @@ function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) { styles.overflowHidden, styles.alignItemsCenter, containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint ? styles.justifyContentCenter : {}, + borderRadius && {borderRadius}, ]} onLayout={onContainerLayout} > diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 7c5fde88f600..7317869cf5d3 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -22,7 +22,10 @@ function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImag if (isEReceipt || isThumbnail) { return ( - + ); } From d4abf53440ba81bca0752b5b6836a787829d50b6 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 20 Jan 2024 23:01:52 +0300 Subject: [PATCH 07/56] type fix --- src/components/EReceiptThumbnail.tsx | 4 ++-- src/components/ReceiptImage.tsx | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index b677a60cc02c..a15f0a2d17bc 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -18,13 +18,13 @@ import Image from './Image'; type EReceiptThumbnailOnyxProps = { transaction: OnyxEntry; - borderRadius?: number; }; type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { /** TransactionID of the transaction this EReceipt corresponds to. It's used by withOnyx HOC */ // eslint-disable-next-line react/no-unused-prop-types transactionID: string; + borderRadius?: number; }; const backgroundImages = { @@ -84,7 +84,7 @@ function EReceiptThumbnail({transaction, borderRadius}: EReceiptThumbnailProps) styles.overflowHidden, styles.alignItemsCenter, containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint ? styles.justifyContentCenter : {}, - borderRadius && {borderRadius}, + borderRadius ? {borderRadius} : {}, ]} onLayout={onContainerLayout} > diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 7317869cf5d3..2c78337c725a 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import type {ImageStyle, StyleProp} from 'react-native'; import {View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; import EReceiptThumbnail from './EReceiptThumbnail'; import Image from './Image'; import ThumbnailImage from './ThumbnailImage'; +type Style = {height: number; borderRadius: number; margin: number}; + type ReceiptImageProps = { transactionID?: string; isThumbnail?: boolean; @@ -13,7 +14,7 @@ type ReceiptImageProps = { isEReceipt?: boolean; source?: string; isAuthTokenRequired?: boolean; - style?: StyleProp; + style?: Style; }; function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImage = false, isEReceipt = false, source, isAuthTokenRequired, style}: ReceiptImageProps) { From 63b41f664bb31b0bfe309521f18982f65abf2024 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 20 Jan 2024 23:28:32 +0300 Subject: [PATCH 08/56] minor fix --- src/components/DistanceEReceipt.js | 1 - src/components/ReportActionItem/ReportActionItemImage.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js index 8593cdcb5b93..ead2e2487848 100644 --- a/src/components/DistanceEReceipt.js +++ b/src/components/DistanceEReceipt.js @@ -69,7 +69,6 @@ function DistanceEReceipt({transaction}) { ) : ( )} diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index b9a98777eb53..d7d2514352c7 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -56,7 +56,7 @@ function ReportActionItemImage({thumbnail, isThumbnail, image, enablePreviewModa } else if ((thumbnail ?? isThumbnail) && !isLocalFile && !Str.isPDF(imageSource)) { propsObj = thumbnailSource ? {shouldUseThumnailImage: true, source: thumbnailSource} : {isThumbnail: true, transactionID: transaction?.transactionID}; } else { - propsObj = {isThumbnail, source: thumbnail ?? image}; + propsObj = {isThumbnail, transactionID: transaction?.transactionID, source: thumbnail ?? image}; } if (enablePreviewModal) { From 404fd8c39c0b19cff84e3c634e715c397e0d2240 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sat, 20 Jan 2024 23:54:15 +0300 Subject: [PATCH 09/56] passed transaction prop --- src/components/DistanceEReceipt.js | 2 +- src/components/ReportActionItem/MoneyRequestPreview.js | 2 +- src/components/ReportActionItem/ReportPreview.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js index ead2e2487848..e322ccd28f4d 100644 --- a/src/components/DistanceEReceipt.js +++ b/src/components/DistanceEReceipt.js @@ -34,7 +34,7 @@ function DistanceEReceipt({transaction}) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const {thumbnail, isThumbnail} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {}; + const {thumbnail} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {}; const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction); const formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : translate('common.tbd'); const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || ''); diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 9cb27e6fac4a..e0351e4e642f 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -178,7 +178,7 @@ function MoneyRequestPreview(props) { merchantOrDescription = requestMerchant.replace(CONST.REGEX.FIRST_SPACE, translate('common.tbd')); } - const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction)] : []; + const receiptImages = hasReceipt ? [{...ReceiptUtils.getThumbnailAndImageURIs(props.transaction), transaction: props.transaction}] : []; const getSettledMessage = () => { if (isExpensifyCardTransaction) { diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index 204c9b5e31d4..f448a227a1a6 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -173,7 +173,7 @@ function ReportPreview(props) { const isScanning = hasReceipts && areAllRequestsBeingSmartScanned; const hasErrors = (hasReceipts && hasMissingSmartscanFields) || (canUseViolations && ReportUtils.hasViolations(props.iouReportID, props.transactionViolations)); const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3); - const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, (transaction) => ReceiptUtils.getThumbnailAndImageURIs(transaction)); + const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, (transaction) => ({...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction})); let formattedMerchant = numberOfRequests === 1 && hasReceipts ? TransactionUtils.getMerchant(transactionsWithReceipts[0]) : null; if (TransactionUtils.isPartialMerchant(formattedMerchant)) { formattedMerchant = null; From 9d38d933207f225f9667a15cc424003c59cc8099 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Wed, 24 Jan 2024 00:13:34 +0300 Subject: [PATCH 10/56] updated attachement modal to consider thumnail display --- src/components/AttachmentModal.js | 6 +++++- src/components/ReportActionItem/ReportActionItemImage.tsx | 1 + src/libs/ReceiptUtils.ts | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 346ff19987ef..2fd8f3b30170 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -49,6 +49,9 @@ const propTypes = { /** Optional source (URL, SVG function) for the image shown. If not passed in via props must be specified when modal is opened. */ source: PropTypes.oneOfType([PropTypes.string, sourcePropTypes]), + /** Whether thumnail should be display */ + isThumbnail: PropTypes.bool, + /** Optional callback to fire when we want to preview an image and approve it for use. */ onConfirm: PropTypes.func, @@ -101,6 +104,7 @@ const propTypes = { const defaultProps = { source: '', + isThumbnail: false, onConfirm: null, defaultOpen: false, originalFileName: '', @@ -471,7 +475,7 @@ function AttachmentModal(props) { setDownloadButtonVisibility={setDownloadButtonVisibility} /> ) : ( - Boolean(sourceForAttachmentView) && + (Boolean(sourceForAttachmentView) || props.isThumbnail) && shouldLoadAttachment && ( Date: Wed, 24 Jan 2024 00:15:27 +0300 Subject: [PATCH 11/56] minor fix --- .../MoneyTemporaryForRefactorRequestConfirmationList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index b82f3eaf2f0f..1ece4679d065 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -643,7 +643,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ )} - {receiptImage || receiptThumbnail ? ( + {receiptImage || receiptThumbnail || isThumbnail ? ( Date: Wed, 24 Jan 2024 00:17:23 +0300 Subject: [PATCH 12/56] minor revert --- src/libs/ReceiptUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts index 18d56075844c..70925b0d42c3 100644 --- a/src/libs/ReceiptUtils.ts +++ b/src/libs/ReceiptUtils.ts @@ -44,7 +44,7 @@ function getThumbnailAndImageURIs(transaction: Transaction, receiptPath: string const isLocalFile = typeof path === 'number' || path.startsWith('blob:') || path.startsWith('file:') || path.startsWith('/'); - return {isThumbnail: true, isLocalFile}; + return {isThumbnail: true, image: path, isLocalFile}; } // eslint-disable-next-line import/prefer-default-export From dc760ca13e718edbcbb3b768b247c608c1d8f7c9 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Wed, 24 Jan 2024 00:18:48 +0300 Subject: [PATCH 13/56] small fix --- .../MoneyTemporaryForRefactorRequestConfirmationList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index 1ece4679d065..b82f3eaf2f0f 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -643,7 +643,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ )} - {receiptImage || receiptThumbnail || isThumbnail ? ( + {receiptImage || receiptThumbnail ? ( Date: Wed, 24 Jan 2024 17:53:31 +0300 Subject: [PATCH 14/56] fix on thumbnail display logic --- src/components/AttachmentModal.js | 6 +----- src/components/MoneyRequestConfirmationList.js | 15 ++++++++++----- .../ReportActionItem/ReportActionItemImage.tsx | 1 - src/libs/ReceiptUtils.ts | 6 +++--- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 2fd8f3b30170..346ff19987ef 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -49,9 +49,6 @@ const propTypes = { /** Optional source (URL, SVG function) for the image shown. If not passed in via props must be specified when modal is opened. */ source: PropTypes.oneOfType([PropTypes.string, sourcePropTypes]), - /** Whether thumnail should be display */ - isThumbnail: PropTypes.bool, - /** Optional callback to fire when we want to preview an image and approve it for use. */ onConfirm: PropTypes.func, @@ -104,7 +101,6 @@ const propTypes = { const defaultProps = { source: '', - isThumbnail: false, onConfirm: null, defaultOpen: false, originalFileName: '', @@ -475,7 +471,7 @@ function AttachmentModal(props) { setDownloadButtonVisibility={setDownloadButtonVisibility} /> ) : ( - (Boolean(sourceForAttachmentView) || props.isThumbnail) && + Boolean(sourceForAttachmentView) && shouldLoadAttachment && ( )} {receiptImage || receiptThumbnail ? ( - Date: Wed, 24 Jan 2024 18:47:34 +0300 Subject: [PATCH 15/56] minor type fix --- src/libs/ReceiptUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts index c7728889c865..509c88d5305d 100644 --- a/src/libs/ReceiptUtils.ts +++ b/src/libs/ReceiptUtils.ts @@ -3,7 +3,7 @@ import ROUTES from '@src/ROUTES'; import type {Transaction} from '@src/types/onyx'; type ThumbnailAndImageURI = { - image?: string; + image: string; thumbnail?: string; transaction?: Transaction; isLocalFile?: boolean; From 0cfb3cba8a164fceafd8e9b534b3320a49760bdf Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Thu, 25 Jan 2024 20:56:52 +0300 Subject: [PATCH 16/56] Added file type label support for eThumbnail --- src/components/EReceiptThumbnail.tsx | 8 ++++++-- src/components/MoneyRequestConfirmationList.js | 2 ++ ...poraryForRefactorRequestConfirmationList.js | 2 ++ src/components/ReceiptImage.tsx | 5 ++++- .../ReportActionItem/MoneyRequestView.js | 1 + .../ReportActionItem/ReportActionItemImage.tsx | 18 +++++++++++++++--- .../ReportActionItemImages.tsx | 15 ++++----------- src/libs/ReceiptUtils.ts | 8 ++++++-- 8 files changed, 40 insertions(+), 19 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index a15f0a2d17bc..75f82b0f0e26 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -15,6 +15,7 @@ import * as eReceiptBGs from './Icon/EReceiptBGs'; import * as Expensicons from './Icon/Expensicons'; import * as MCCIcons from './Icon/MCCIcons'; import Image from './Image'; +import Text from './Text'; type EReceiptThumbnailOnyxProps = { transaction: OnyxEntry; @@ -25,6 +26,8 @@ type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { // eslint-disable-next-line react/no-unused-prop-types transactionID: string; borderRadius?: number; + fileExtension?: string; + isThumbnail?: boolean; }; const backgroundImages = { @@ -36,7 +39,7 @@ const backgroundImages = { [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink, }; -function EReceiptThumbnail({transaction, borderRadius}: EReceiptThumbnailProps) { +function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnail = false}: EReceiptThumbnailProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -102,7 +105,8 @@ function EReceiptThumbnail({transaction, borderRadius}: EReceiptThumbnailProps) fill={secondaryColor} additionalStyles={[styles.fullScreen]} /> - {MCCIcon ? ( + {isThumbnail && fileExtension && {fileExtension.toUpperCase()}} + {MCCIcon && !isThumbnail ? ( ) : ( // The empty receipt component should only show for IOU Requests of a paid policy ("Team" or "Corporate") diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index b82f3eaf2f0f..aea3d20f0b00 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -618,6 +618,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ image: receiptImage, thumbnail: receiptThumbnail, isThumbnail, + fileExtension, } = receiptPath && receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, receiptPath, receiptFilename) : {}; return ( ) : ( // The empty receipt component should only show for IOU Requests of a paid policy ("Team" or "Corporate") diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 2c78337c725a..bf4b0ef832fc 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -15,9 +15,10 @@ type ReceiptImageProps = { source?: string; isAuthTokenRequired?: boolean; style?: Style; + fileExtension?: string; }; -function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImage = false, isEReceipt = false, source, isAuthTokenRequired, style}: ReceiptImageProps) { +function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImage = false, isEReceipt = false, source, isAuthTokenRequired, style, fileExtension}: ReceiptImageProps) { const styles = useThemeStyles(); if (isEReceipt || isThumbnail) { @@ -26,6 +27,8 @@ function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImag ); diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index e2ebc701523d..73c478ca0164 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -237,6 +237,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate - {shownImages.map(({thumbnail, isThumbnail, image, transaction, isLocalFile}, index) => { + {shownImages.map(({thumbnail, isThumbnail, image, transaction, isLocalFile, fileExtension}, index) => { const isLastImage = index === numberOfShownImages - 1; // Show a border to separate multiple images. Shown to the right for each except the last. @@ -85,6 +77,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report > type === fileExtension), image: path, isLocalFile}; } // eslint-disable-next-line import/prefer-default-export export {getThumbnailAndImageURIs}; +export type {ThumbnailAndImageURI}; From c059ed1b78e9af5fa69bae467aaf682a17989625 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Thu, 25 Jan 2024 21:15:53 +0300 Subject: [PATCH 17/56] pass transactionID for confirmation --- src/components/MoneyRequestConfirmationList.js | 1 + .../MoneyTemporaryForRefactorRequestConfirmationList.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 5f43e6a83204..ed39b6256dc4 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -620,6 +620,7 @@ function MoneyRequestConfirmationList(props) { // So if we have a thumbnail, it means we're retrieving the image from the server isAuthTokenRequired={!_.isEmpty(receiptThumbnail)} fileExtension={fileExtension} + transactionID={props.transactionID || (props.transaction && props.transaction.transactionID)} /> ) : ( // The empty receipt component should only show for IOU Requests of a paid policy ("Team" or "Corporate") diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index aea3d20f0b00..a47ddfc3843b 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -653,6 +653,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ // but we don't need it to load the blob:// or file:// image when starting a money request / split bill // So if we have a thumbnail, it means we're retrieving the image from the server isAuthTokenRequired={!_.isEmpty(receiptThumbnail)} + transactionID={transaction && transaction.transactionID} fileExtension={fileExtension} /> ) : ( From 7008a5d10307b64093b65440a675d2e3f0325393 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Mon, 29 Jan 2024 16:36:34 +0300 Subject: [PATCH 18/56] minor fix --- src/components/DistanceEReceipt.js | 2 +- src/components/ReceiptImage.tsx | 6 +++--- src/components/ReportActionItem/ReportActionItemImage.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js index e322ccd28f4d..a42b4cbe42db 100644 --- a/src/components/DistanceEReceipt.js +++ b/src/components/DistanceEReceipt.js @@ -69,7 +69,7 @@ function DistanceEReceipt({transaction}) { ) : ( )} diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index bf4b0ef832fc..d04830bebb36 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -10,7 +10,7 @@ type Style = {height: number; borderRadius: number; margin: number}; type ReceiptImageProps = { transactionID?: string; isThumbnail?: boolean; - shouldUseThumnailImage?: boolean; + shouldUseThumbnailImage?: boolean; isEReceipt?: boolean; source?: string; isAuthTokenRequired?: boolean; @@ -18,7 +18,7 @@ type ReceiptImageProps = { fileExtension?: string; }; -function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImage = false, isEReceipt = false, source, isAuthTokenRequired, style, fileExtension}: ReceiptImageProps) { +function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumbnailImage = false, isEReceipt = false, source, isAuthTokenRequired, style, fileExtension}: ReceiptImageProps) { const styles = useThemeStyles(); if (isEReceipt || isThumbnail) { @@ -34,7 +34,7 @@ function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImag ); } - if (shouldUseThumnailImage) { + if (shouldUseThumbnailImage) { return ( Date: Mon, 29 Jan 2024 17:11:24 +0300 Subject: [PATCH 19/56] fix unnecessary condition --- src/components/ReportActionItem/ReportActionItemImage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index a63b491c18a5..435ff20a6f55 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -65,8 +65,8 @@ function ReportActionItemImage({ if (isEReceipt) { propsObj = {isEReceipt: true, transactionID: transaction.transactionID}; - } else if ((thumbnail ?? isThumbnail) && !isLocalFile && !Str.isPDF(imageSource)) { - propsObj = thumbnailSource ? {shouldUseThumbnailImage: true, source: thumbnailSource} : {isThumbnail: true, fileExtension, transactionID: transaction?.transactionID}; + } else if (thumbnail && !isLocalFile && !Str.isPDF(imageSource)) { + propsObj = {shouldUseThumbnailImage: true, source: thumbnailSource}; } else { propsObj = {isThumbnail, fileExtension, transactionID: transaction?.transactionID, source: thumbnail ?? image}; } From 3f019a51c6d2b6b4c19155e0084a7e814b82fb0d Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Mon, 29 Jan 2024 18:16:46 +0300 Subject: [PATCH 20/56] update to static icon layout --- src/components/EReceiptThumbnail.tsx | 11 ++++++----- src/components/ReceiptImage.tsx | 1 + 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 75f82b0f0e26..efef40b6f7bb 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -28,6 +28,7 @@ type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { borderRadius?: number; fileExtension?: string; isThumbnail?: boolean; + useStaticIconLayout?: boolean; }; const backgroundImages = { @@ -39,7 +40,7 @@ const backgroundImages = { [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink, }; -function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnail = false}: EReceiptThumbnailProps) { +function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnail = false, useStaticIconLayout = false}: EReceiptThumbnailProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -69,11 +70,11 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnai let receiptIconHeight: number = variables.eReceiptIconHeight; let receiptMCCSize: number = variables.eReceiptMCCHeightWidth; - if (isSmall) { + if (isSmall && !useStaticIconLayout) { receiptIconWidth = variables.eReceiptIconWidthSmall; receiptIconHeight = variables.eReceiptIconHeightSmall; receiptMCCSize = variables.eReceiptMCCHeightWidthSmall; - } else if (isMedium) { + } else if (isMedium || useStaticIconLayout) { receiptIconWidth = variables.eReceiptIconWidthMedium; receiptIconHeight = variables.eReceiptIconHeightMedium; receiptMCCSize = variables.eReceiptMCCHeightWidthMedium; @@ -86,10 +87,10 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnai primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : {}, styles.overflowHidden, styles.alignItemsCenter, - containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint ? styles.justifyContentCenter : {}, + useStaticIconLayout || (containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint) ? styles.justifyContentCenter : {}, borderRadius ? {borderRadius} : {}, ]} - onLayout={onContainerLayout} + onLayout={useStaticIconLayout ? undefined : onContainerLayout} > ); From 6d7481c27b0ceed08d726298c7c30ef684f9e130 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Wed, 31 Jan 2024 21:32:48 +0300 Subject: [PATCH 21/56] changed to isStaticIconLayout --- src/components/EReceiptThumbnail.tsx | 12 ++++++------ src/components/ReceiptImage.tsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index efef40b6f7bb..23429fe35d16 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -28,7 +28,7 @@ type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { borderRadius?: number; fileExtension?: string; isThumbnail?: boolean; - useStaticIconLayout?: boolean; + isStaticIconLayout?: boolean; }; const backgroundImages = { @@ -40,7 +40,7 @@ const backgroundImages = { [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink, }; -function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnail = false, useStaticIconLayout = false}: EReceiptThumbnailProps) { +function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnail = false, isStaticIconLayout = false}: EReceiptThumbnailProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -70,11 +70,11 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnai let receiptIconHeight: number = variables.eReceiptIconHeight; let receiptMCCSize: number = variables.eReceiptMCCHeightWidth; - if (isSmall && !useStaticIconLayout) { + if (isSmall && !isStaticIconLayout) { receiptIconWidth = variables.eReceiptIconWidthSmall; receiptIconHeight = variables.eReceiptIconHeightSmall; receiptMCCSize = variables.eReceiptMCCHeightWidthSmall; - } else if (isMedium || useStaticIconLayout) { + } else if (isMedium || isStaticIconLayout) { receiptIconWidth = variables.eReceiptIconWidthMedium; receiptIconHeight = variables.eReceiptIconHeightMedium; receiptMCCSize = variables.eReceiptMCCHeightWidthMedium; @@ -87,10 +87,10 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnai primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : {}, styles.overflowHidden, styles.alignItemsCenter, - useStaticIconLayout || (containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint) ? styles.justifyContentCenter : {}, + isStaticIconLayout || (containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint) ? styles.justifyContentCenter : {}, borderRadius ? {borderRadius} : {}, ]} - onLayout={useStaticIconLayout ? undefined : onContainerLayout} + onLayout={isStaticIconLayout ? undefined : onContainerLayout} > ); From e61a6c7dffbd70f02df2faa72ad7f6c7a267c3de Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Wed, 31 Jan 2024 21:34:26 +0300 Subject: [PATCH 22/56] typescript fix --- src/components/ReportActionItem/ReportActionItemImages.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index 69bb6c592f54..e1abcb54adbb 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -72,7 +72,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {}; return ( Date: Wed, 31 Jan 2024 22:05:51 +0300 Subject: [PATCH 23/56] set label text black --- src/components/EReceiptThumbnail.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 23429fe35d16..708b1707716f 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -6,6 +6,7 @@ import {withOnyx} from 'react-native-onyx'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; +import colors from '@styles/theme/colors'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -106,7 +107,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnai fill={secondaryColor} additionalStyles={[styles.fullScreen]} /> - {isThumbnail && fileExtension && {fileExtension.toUpperCase()}} + {isThumbnail && fileExtension && {fileExtension.toUpperCase()}} {MCCIcon && !isThumbnail ? ( Date: Thu, 1 Feb 2024 14:44:54 +0300 Subject: [PATCH 24/56] removed inline styles --- src/components/EReceiptThumbnail.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 708b1707716f..fa2607965b57 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -107,7 +107,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnai fill={secondaryColor} additionalStyles={[styles.fullScreen]} /> - {isThumbnail && fileExtension && {fileExtension.toUpperCase()}} + {isThumbnail && fileExtension && {fileExtension.toUpperCase()}} {MCCIcon && !isThumbnail ? ( Date: Thu, 1 Feb 2024 14:51:07 +0300 Subject: [PATCH 25/56] fix on comment --- src/libs/ReceiptUtils.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts index bf153118ecfd..44e054b4edc7 100644 --- a/src/libs/ReceiptUtils.ts +++ b/src/libs/ReceiptUtils.ts @@ -7,7 +7,7 @@ import type {ReceiptError} from '@src/types/onyx/Transaction'; import {splitExtensionFromFileName} from './fileDownload/FileUtils'; type ThumbnailAndImageURI = { - image: string; + image?: string; thumbnail?: string; transaction?: Transaction; isLocalFile?: boolean; @@ -23,14 +23,13 @@ type ThumbnailAndImageURI = { * @param receiptFileName */ 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 (Object.hasOwn(transaction?.pendingFields ?? {}, 'waypoints')) { + return {isThumbnail: true, isLocalFile: true}; + } // 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; + // URI to image, i.e. blob:new.expensify.com/9ef3a018-4067-47c6-b29f-5f1bd35f213d or expensify.com/receipts/w_e616108497ef940b7210ec6beb5a462d01a878f4.jpg const path = errors?.source ?? transaction?.receipt?.source ?? receiptPath ?? ''; - if (Object.hasOwn(transaction?.pendingFields ?? {}, 'waypoints')) { - return {isThumbnail: true, image: path, isLocalFile: true}; - } - // filename of uploaded image or last part of remote URI const filename = errors?.filename ?? transaction?.filename ?? receiptFileName ?? ''; const isReceiptImage = Str.isImage(filename); From 73f6495d8cf1d906e190a6461bf94aaa23007fd5 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Thu, 1 Feb 2024 16:31:38 +0300 Subject: [PATCH 26/56] fixed pending waypoints thumbnail display --- src/components/AttachmentModal.tsx | 6 ++---- src/components/ReportActionItem/ReportActionItemImage.tsx | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index f3e8ed316c52..ce1e3c99ac82 100755 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -519,10 +519,8 @@ function AttachmentModal({ setDownloadButtonVisibility={setDownloadButtonVisibility} /> ) : ( - !!sourceForAttachmentView && - shouldLoadAttachment && - !isLoading && - !shouldShowNotFoundPage && ( + ((TransactionUtils.isDistanceRequest(transaction) && Object.hasOwn(transaction?.pendingFields ?? {}, 'waypoints')) || + (!!sourceForAttachmentView && shouldLoadAttachment && !isLoading && !shouldShowNotFoundPage)) && ( Date: Thu, 1 Feb 2024 16:46:16 +0300 Subject: [PATCH 27/56] simplified condition --- src/components/AttachmentModal.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index ce1e3c99ac82..d355c6fc98bb 100755 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -519,8 +519,10 @@ function AttachmentModal({ setDownloadButtonVisibility={setDownloadButtonVisibility} /> ) : ( - ((TransactionUtils.isDistanceRequest(transaction) && Object.hasOwn(transaction?.pendingFields ?? {}, 'waypoints')) || - (!!sourceForAttachmentView && shouldLoadAttachment && !isLoading && !shouldShowNotFoundPage)) && ( + (!!sourceForAttachmentView || Object.hasOwn(transaction?.pendingFields ?? {}, 'waypoints')) && + shouldLoadAttachment && + !isLoading && + !shouldShowNotFoundPage && ( Date: Thu, 1 Feb 2024 19:33:12 +0300 Subject: [PATCH 28/56] changed to isReceiptThumbnail prop --- src/components/EReceiptThumbnail.tsx | 19 ++++++++++--------- src/components/ReceiptImage.tsx | 3 +-- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index fa2607965b57..4ccb6cfc7243 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -28,8 +28,9 @@ type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { transactionID: string; borderRadius?: number; fileExtension?: string; - isThumbnail?: boolean; - isStaticIconLayout?: boolean; + + /** Whether it is a receipt thumbnail we are displaying. */ + isReceiptThumbnail?: boolean; }; const backgroundImages = { @@ -41,7 +42,7 @@ const backgroundImages = { [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink, }; -function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnail = false, isStaticIconLayout = false}: EReceiptThumbnailProps) { +function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptThumbnail = false}: EReceiptThumbnailProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -71,11 +72,11 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnai let receiptIconHeight: number = variables.eReceiptIconHeight; let receiptMCCSize: number = variables.eReceiptMCCHeightWidth; - if (isSmall && !isStaticIconLayout) { + if (isSmall && !isReceiptThumbnail) { receiptIconWidth = variables.eReceiptIconWidthSmall; receiptIconHeight = variables.eReceiptIconHeightSmall; receiptMCCSize = variables.eReceiptMCCHeightWidthSmall; - } else if (isMedium || isStaticIconLayout) { + } else if (isMedium || isReceiptThumbnail) { receiptIconWidth = variables.eReceiptIconWidthMedium; receiptIconHeight = variables.eReceiptIconHeightMedium; receiptMCCSize = variables.eReceiptMCCHeightWidthMedium; @@ -88,10 +89,10 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnai primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : {}, styles.overflowHidden, styles.alignItemsCenter, - isStaticIconLayout || (containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint) ? styles.justifyContentCenter : {}, + isReceiptThumbnail || (containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint) ? styles.justifyContentCenter : {}, borderRadius ? {borderRadius} : {}, ]} - onLayout={isStaticIconLayout ? undefined : onContainerLayout} + onLayout={isReceiptThumbnail ? undefined : onContainerLayout} > - {isThumbnail && fileExtension && {fileExtension.toUpperCase()}} - {MCCIcon && !isThumbnail ? ( + {isReceiptThumbnail && fileExtension && {fileExtension.toUpperCase()}} + {MCCIcon && !isReceiptThumbnail ? ( ); From 1fb6284ff86d9b862605889ca0a9f4c9237616d2 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Mon, 5 Feb 2024 12:27:29 +0300 Subject: [PATCH 29/56] separated Ereceipt and thumbnail logic --- src/components/ReceiptImage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 0b7155ee6597..5f15ea675ff4 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -22,13 +22,13 @@ function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumbnailIma const styles = useThemeStyles(); if (isEReceipt || isThumbnail) { + const props = !isEReceipt && {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true}; return ( ); From 75ca883259e66cd565bd1b27f300119cb2333c3d Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Mon, 5 Feb 2024 14:44:03 +0300 Subject: [PATCH 30/56] minor lint fix --- src/components/ReportActionItem/ReportActionItemImage.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index e32a67acb4fb..91f1e5310273 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -1,9 +1,6 @@ /* eslint-disable react/jsx-props-no-spreading */ import Str from 'expensify-common/lib/str'; import React from 'react'; -import type {ReactElement} from 'react'; -import type {ImageSourcePropType, ViewStyle} from 'react-native'; -import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus'; From ee4d711f9efcdafa5bbf63dabb587a3bba4a1e8f Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Mon, 5 Feb 2024 15:01:05 +0300 Subject: [PATCH 31/56] fix minor typescript issue --- src/components/ReportActionItem/ReportActionItemImage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 91f1e5310273..de12c15a0360 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/jsx-props-no-spreading */ import Str from 'expensify-common/lib/str'; import React from 'react'; +import type {ViewStyle} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus'; From 5f07c3970ce5a2889c428c3df65aeff7ba3b9f6d Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Tue, 6 Feb 2024 22:40:25 +0300 Subject: [PATCH 32/56] fix type --- src/types/onyx/Transaction.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts index b559346a48de..8a1395d6d931 100644 --- a/src/types/onyx/Transaction.ts +++ b/src/types/onyx/Transaction.ts @@ -38,7 +38,7 @@ type Geometry = { type?: GeometryType; }; -type ReceiptSource = string | number; +type ReceiptSource = string; type Receipt = { receiptID?: number; From 8f8572152fc1bde10cccbddf69885eda5cc685e9 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Tue, 6 Feb 2024 23:22:16 +0300 Subject: [PATCH 33/56] fix based on comments --- src/components/EReceiptThumbnail.tsx | 6 +++++- src/components/ReceiptImage.tsx | 15 +++++++++++++++ src/styles/variables.ts | 2 +- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 4ccb6cfc7243..b5f709887478 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -26,7 +26,11 @@ type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { /** TransactionID of the transaction this EReceipt corresponds to. It's used by withOnyx HOC */ // eslint-disable-next-line react/no-unused-prop-types transactionID: string; + + /** Border radius to be applied on the parent view. */ borderRadius?: number; + + /** The file extension of the receipt that the preview thumbnail is being displayed for. */ fileExtension?: string; /** Whether it is a receipt thumbnail we are displaying. */ @@ -89,7 +93,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : {}, styles.overflowHidden, styles.alignItemsCenter, - isReceiptThumbnail || (containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint) ? styles.justifyContentCenter : {}, + isReceiptThumbnail || (containerHeight && containerHeight < variables.eReceiptThumbnailCenterReceiptBreakpoint) ? styles.justifyContentCenter : {}, borderRadius ? {borderRadius} : {}, ]} onLayout={isReceiptThumbnail ? undefined : onContainerLayout} diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 5f15ea675ff4..9037fc29a4c0 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -8,13 +8,28 @@ import ThumbnailImage from './ThumbnailImage'; type Style = {height: number; borderRadius: number; margin: number}; type ReceiptImageProps = { + /** Transaction ID of the transaction the receipt belongs to. */ transactionID?: string; + + /** Whether it is receipt preview thumbnail we are displaying. */ isThumbnail?: boolean; + + /** Whether we should display the receipt with ThumbnailImage component */ shouldUseThumbnailImage?: boolean; + + /** Whether it is EReceipt */ isEReceipt?: boolean; + + /** Url of the receipt image */ source?: string; + + /** Whether the receipt image requires an authToken */ isAuthTokenRequired?: boolean; + + /** Any additional styles to apply */ style?: Style; + + /** The file extension of the receipt file */ fileExtension?: string; }; diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 296780abf0ae..d5e930fc5bbc 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -163,7 +163,7 @@ export default { addBankAccountLeftSpacing: 3, eReceiptThumbnailSmallBreakpoint: 110, eReceiptThumbnailMediumBreakpoint: 335, - eReceiptThumnailCenterReceiptBreakpoint: 200, + eReceiptThumbnailCenterReceiptBreakpoint: 200, eReceiptIconHeight: 100, eReceiptIconWidth: 72, eReceiptMCCHeightWidth: 40, From 7b14b86bc6c7dd2b9e42990ae51c156b91d444c8 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Wed, 7 Feb 2024 17:24:56 +0300 Subject: [PATCH 34/56] fix type --- src/components/ReceiptImage.tsx | 36 +++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 9037fc29a4c0..f962b64ab7b9 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -7,22 +7,36 @@ import ThumbnailImage from './ThumbnailImage'; type Style = {height: number; borderRadius: number; margin: number}; -type ReceiptImageProps = { - /** Transaction ID of the transaction the receipt belongs to. */ - transactionID?: string; +type ReceiptImageProps = ( + | { + /** Transaction ID of the transaction the receipt belongs to */ + transactionID: string; - /** Whether it is receipt preview thumbnail we are displaying. */ - isThumbnail?: boolean; + /** Whether it is EReceipt */ + isEReceipt: boolean; + /** Whether it is receipt preview thumbnail we are displaying */ + isThumbnail?: boolean; + + /** Url of the receipt image */ + source?: string; + } + | { + transactionID: string; + isEReceipt?: boolean; + isThumbnail: boolean; + source?: string; + } + | { + transactionID?: string; + isEReceipt?: boolean; + isThumbnail?: boolean; + source: string; + } +) & { /** Whether we should display the receipt with ThumbnailImage component */ shouldUseThumbnailImage?: boolean; - /** Whether it is EReceipt */ - isEReceipt?: boolean; - - /** Url of the receipt image */ - source?: string; - /** Whether the receipt image requires an authToken */ isAuthTokenRequired?: boolean; From 2a1ddf3a50c5a6f02961c24d91b9893ce5e9bddc Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Wed, 7 Feb 2024 17:28:42 +0300 Subject: [PATCH 35/56] fix typescript --- src/components/ReportActionItem/ReportActionItemImage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index de12c15a0360..a1692a635a19 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -74,7 +74,7 @@ function ReportActionItemImage({ } else if (thumbnail && !isLocalFile && !Str.isPDF(imageSource)) { propsObj = {shouldUseThumbnailImage: true, source: thumbnailSource}; } else { - propsObj = {isThumbnail, fileExtension, transactionID: transaction?.transactionID, source: thumbnail ?? image}; + propsObj = {isThumbnail, fileExtension, transactionID: transaction?.transactionID, source: thumbnail ?? image ?? ''}; } if (enablePreviewModal) { From 6dfc00ba39dd529445e962455bec2caf2631a0a6 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Mon, 12 Feb 2024 23:59:10 +0300 Subject: [PATCH 36/56] minor change --- src/components/ReceiptImage.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index f962b64ab7b9..1f1cba77a873 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; import EReceiptThumbnail from './EReceiptThumbnail'; +import type {IconSize} from './EReceiptThumbnail'; import Image from './Image'; import ThumbnailImage from './ThumbnailImage'; @@ -20,6 +21,9 @@ type ReceiptImageProps = ( /** Url of the receipt image */ source?: string; + + /** number of images displayed in the same parent container */ + iconSize?: IconSize; } | { transactionID: string; From 4a086019a153bab8b3f7807cdfeba154a1a42466 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Tue, 13 Feb 2024 00:06:34 +0300 Subject: [PATCH 37/56] pass iconSize prop --- src/components/ReceiptImage.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 1f1cba77a873..4de2197b2b8c 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -21,9 +21,6 @@ type ReceiptImageProps = ( /** Url of the receipt image */ source?: string; - - /** number of images displayed in the same parent container */ - iconSize?: IconSize; } | { transactionID: string; @@ -49,13 +46,26 @@ type ReceiptImageProps = ( /** The file extension of the receipt file */ fileExtension?: string; + + /** number of images displayed in the same parent container */ + iconSize?: IconSize; }; -function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumbnailImage = false, isEReceipt = false, source, isAuthTokenRequired, style, fileExtension}: ReceiptImageProps) { +function ReceiptImage({ + transactionID, + isThumbnail = false, + shouldUseThumbnailImage = false, + isEReceipt = false, + source, + isAuthTokenRequired, + style, + fileExtension, + iconSize, +}: ReceiptImageProps) { const styles = useThemeStyles(); if (isEReceipt || isThumbnail) { - const props = !isEReceipt && {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true}; + const props = isEReceipt ? {iconSize} : {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true}; return ( Date: Tue, 13 Feb 2024 22:07:54 +0300 Subject: [PATCH 38/56] use fetching waypoint function --- src/components/AttachmentModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index b1ec589a3d3e..6292dbed0a25 100755 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -523,7 +523,7 @@ function AttachmentModal({ setDownloadButtonVisibility={setDownloadButtonVisibility} /> ) : ( - (!!sourceForAttachmentView || Object.hasOwn(transaction?.pendingFields ?? {}, 'waypoints')) && + (!!sourceForAttachmentView || TransactionUtils.isFetchingWaypointsFromServer(transaction)) && shouldLoadAttachment && !isLoading && !shouldShowNotFoundPage && ( From 0f157fce2d446b8ff270e00e1b8c2d44178765de Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Tue, 20 Feb 2024 23:18:37 +0300 Subject: [PATCH 39/56] fix type --- src/components/DistanceEReceipt.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DistanceEReceipt.tsx b/src/components/DistanceEReceipt.tsx index ae6516edf266..b22d21ba8d8a 100644 --- a/src/components/DistanceEReceipt.tsx +++ b/src/components/DistanceEReceipt.tsx @@ -29,7 +29,7 @@ function DistanceEReceipt({transaction}: DistanceEReceiptProps) { const thumbnail = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction).thumbnail : null; const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction) ?? {}; const formattedTransactionAmount = CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency); - const thumbnailSource = tryResolveUrlFromApiRoot((thumbnail as string) || ''); + const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? ''); const waypoints = useMemo(() => transaction?.comment?.waypoints ?? {}, [transaction?.comment?.waypoints]); const sortedWaypoints = useMemo( () => From c44b4309b00d1f91d8220a162513b05493491b81 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 21 Feb 2024 18:09:50 +0300 Subject: [PATCH 40/56] add fallbackIcon --- src/components/ReceiptImage.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 4de2197b2b8c..f293d3b047d5 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; +import type IconAsset from '@src/types/utils/IconAsset'; import EReceiptThumbnail from './EReceiptThumbnail'; import type {IconSize} from './EReceiptThumbnail'; import Image from './Image'; @@ -49,6 +50,12 @@ type ReceiptImageProps = ( /** number of images displayed in the same parent container */ iconSize?: IconSize; + + /** If the image fails to load – show the provided fallback icon */ + fallbackIcon?: IconAsset; + + /** The size of the fallback icon */ + fallbackIconSize?: number; }; function ReceiptImage({ @@ -61,6 +68,8 @@ function ReceiptImage({ style, fileExtension, iconSize, + fallbackIcon, + fallbackIconSize, }: ReceiptImageProps) { const styles = useThemeStyles(); @@ -84,6 +93,8 @@ function ReceiptImage({ style={[styles.w100, styles.h100]} isAuthTokenRequired shouldDynamicallyResize={false} + fallbackIcon={fallbackIcon} + fallbackIconSize={fallbackIconSize} /> ); } From 7025bfa7b10a6c36d788f9804ac627d6156e7e67 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 21 Feb 2024 18:30:35 +0300 Subject: [PATCH 41/56] applied dynamic thumbnail icon size --- src/components/ReceiptImage.tsx | 3 ++- src/components/ReportActionItem/ReportActionItemImage.tsx | 8 +++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index f293d3b047d5..cd70413b7a2e 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -74,11 +74,12 @@ function ReceiptImage({ const styles = useThemeStyles(); if (isEReceipt || isThumbnail) { - const props = isEReceipt ? {iconSize} : {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true}; + const props = isThumbnail && {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true}; return ( diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 0f6131a61c05..cc84abccd6d1 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -86,7 +86,13 @@ function ReportActionItemImage({ fallbackIconSize: isSingleImage ? variables.iconSizeSuperLarge : variables.iconSizeExtraLarge, }; } else { - propsObj = {isThumbnail, fileExtension, transactionID: transaction?.transactionID, source: thumbnail ?? image ?? ''}; + propsObj = { + isThumbnail, + ...(isThumbnail && {iconSize: isSingleImage ? 'medium' : ('small' as IconSize)}), + fileExtension, + transactionID: transaction?.transactionID, + source: thumbnail ?? image ?? '', + }; } if (enablePreviewModal) { From 9eb1edd18a8545774e4114ec3d35a6073be0e3ef Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Mon, 26 Feb 2024 12:22:43 +0300 Subject: [PATCH 42/56] use primary color for label text color --- src/components/EReceiptThumbnail.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 5093e2853e18..f6d5beb7e24d 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -105,7 +105,9 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT fill={secondaryColor} additionalStyles={[styles.fullScreen]} /> - {isReceiptThumbnail && fileExtension && {fileExtension.toUpperCase()}} + {isReceiptThumbnail && fileExtension && ( + {fileExtension.toUpperCase()} + )} {MCCIcon && !isReceiptThumbnail ? ( Date: Wed, 6 Mar 2024 18:23:50 +0300 Subject: [PATCH 43/56] add Pdf thumbnail --- src/components/ReceiptImage.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index cd70413b7a2e..8dc82cb53aea 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -5,6 +5,7 @@ import type IconAsset from '@src/types/utils/IconAsset'; import EReceiptThumbnail from './EReceiptThumbnail'; import type {IconSize} from './EReceiptThumbnail'; import Image from './Image'; +import PDFThumbnail from './PDFThumbnail'; import ThumbnailImage from './ThumbnailImage'; type Style = {height: number; borderRadius: number; margin: number}; @@ -22,18 +23,30 @@ type ReceiptImageProps = ( /** Url of the receipt image */ source?: string; + + /** Whether it is a pdf thumbnail we are displaying */ + isPDFThumbnail?: boolean; } | { transactionID: string; isEReceipt?: boolean; isThumbnail: boolean; source?: string; + isPDFThumbnail?: boolean; + } + | { + transactionID?: string; + isEReceipt?: boolean; + isThumbnail?: boolean; + source: string; + isPDFThumbnail?: boolean; } | { transactionID?: string; isEReceipt?: boolean; isThumbnail?: boolean; source: string; + isPDFThumbnail: string; } ) & { /** Whether we should display the receipt with ThumbnailImage component */ @@ -60,6 +73,7 @@ type ReceiptImageProps = ( function ReceiptImage({ transactionID, + isPDFThumbnail = false, isThumbnail = false, shouldUseThumbnailImage = false, isEReceipt = false, @@ -73,6 +87,15 @@ function ReceiptImage({ }: ReceiptImageProps) { const styles = useThemeStyles(); + if (isPDFThumbnail) { + return ( + + ); + } + if (isEReceipt || isThumbnail) { const props = isThumbnail && {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true}; return ( From 9f38e25e51dcfa089429348fa683bd78f7a4ea88 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 6 Mar 2024 19:07:12 +0300 Subject: [PATCH 44/56] updated to fixed color code depending on file extensions --- src/components/EReceiptThumbnail.tsx | 5 +++-- src/styles/utils/index.ts | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index f6d5beb7e24d..fb1209aa6fed 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -56,10 +56,11 @@ const backgroundImages = { function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptThumbnail = false, centerIconV = true, iconSize = 'large'}: EReceiptThumbnailProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const colorCode = isReceiptThumbnail ? StyleUtils.getFileExtensionColorCode(fileExtension) : StyleUtils.getEReceiptColorCode(transaction); - const backgroundImage = useMemo(() => backgroundImages[StyleUtils.getEReceiptColorCode(transaction)], [StyleUtils, transaction]); + const backgroundImage = useMemo(() => backgroundImages[colorCode], [colorCode]); - const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); + const colorStyles = StyleUtils.getEReceiptColorStyles(colorCode); const primaryColor = colorStyles?.backgroundColor; const secondaryColor = colorStyles?.color; const transactionDetails = ReportUtils.getTransactionDetails(transaction); diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 21af5398232f..5d3da627b411 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -287,6 +287,20 @@ function getEReceiptColorCode(transaction: OnyxEntry): EReceiptColo return eReceiptColors[colorHash]; } +/** + * Helper method to return eReceipt color code for Receipt Thumbnails + */ +function getFileExtensionColorCode(fileExtension?: string): EReceiptColorName { + switch (fileExtension) { + case CONST.IOU.FILE_TYPES.DOC: + return CONST.ERECEIPT_COLORS.PINK; + case CONST.IOU.FILE_TYPES.HTML: + return CONST.ERECEIPT_COLORS.TANGERINE; + default: + return CONST.ERECEIPT_COLORS.GREEN; + } +} + /** * Helper method to return eReceipt color styles */ @@ -1084,6 +1098,7 @@ const staticStyleUtils = { parseStyleFromFunction, getEReceiptColorStyles, getEReceiptColorCode, + getFileExtensionColorCode, getNavigationModalCardStyle, getCardStyles, getOpacityStyle, From e05df18496b72f40c2b39f4699d5a2c8b2f7d73f Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 8 Mar 2024 15:43:56 +0300 Subject: [PATCH 45/56] remove unnecessary condition --- src/components/AttachmentModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index 459252e1ddd2..eed40d75387e 100755 --- a/src/components/AttachmentModal.tsx +++ b/src/components/AttachmentModal.tsx @@ -540,7 +540,7 @@ function AttachmentModal({ setDownloadButtonVisibility={setDownloadButtonVisibility} /> ) : ( - (!!sourceForAttachmentView || TransactionUtils.isFetchingWaypointsFromServer(transaction)) && + !!sourceForAttachmentView && shouldLoadAttachment && !isLoading && !shouldShowNotFoundPage && ( From b6fd6f47574589ddc067155a56964d81c0180b7e Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 8 Mar 2024 16:46:46 +0300 Subject: [PATCH 46/56] final refactor changes --- src/components/MoneyRequestConfirmationList.js | 1 - .../MoneyTemporaryForRefactorRequestConfirmationList.js | 3 +-- src/components/ReceiptImage.tsx | 2 +- .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx | 2 +- src/components/ReportActionItem/ReportActionItemImage.tsx | 4 +--- src/components/ReportActionItem/ReportPreview.tsx | 2 +- 6 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 1f6868a31d00..60a9ad51db56 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -629,7 +629,6 @@ function MoneyRequestConfirmationList(props) { // So if we have a thumbnail, it means we're retrieving the image from the server isAuthTokenRequired={!_.isEmpty(receiptThumbnail)} fileExtension={fileExtension} - transactionID={props.transactionID || (props.transaction && props.transaction.transactionID)} /> ) : ( // The empty receipt component should only show for IOU Requests of a paid policy ("Team" or "Corporate") diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index c22889ad2077..99eb3b83db75 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -909,11 +909,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ // but we don't need it to load the blob:// or file:// image when starting a money request / split bill // So if we have a thumbnail, it means we're retrieving the image from the server isAuthTokenRequired={!_.isEmpty(receiptThumbnail)} - transactionID={transaction && transaction.transactionID} fileExtension={fileExtension} /> ), - [isLocalFile, receiptFilename, receiptImage, styles.moneyRequestImage, isAttachmentInvalid, isThumbnail, receiptThumbnail, transaction, fileExtension], + [isLocalFile, receiptFilename, receiptImage, styles.moneyRequestImage, isAttachmentInvalid, isThumbnail, receiptThumbnail, fileExtension], ); return ( diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 8dc82cb53aea..08892f11b021 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -28,7 +28,7 @@ type ReceiptImageProps = ( isPDFThumbnail?: boolean; } | { - transactionID: string; + transactionID?: string; isEReceipt?: boolean; isThumbnail: boolean; source?: string; diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx index 2ff0170809e3..a5fb03a22dca 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx @@ -114,7 +114,7 @@ function MoneyRequestPreviewContent({ merchantOrDescription = description || ''; } - const receiptImages = hasReceipt ? [{...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction}] : []; + const receiptImages = hasReceipt ? [{...ReceiptUtils.getThumbnailAndImageURIs(transaction)}] : []; const hasPendingWaypoints = transaction?.pendingFields?.waypoints; const showMapAsImage = isDistanceRequest && hasPendingWaypoints; diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 8c9cbb4a4e64..0ea3c0694861 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -90,9 +90,7 @@ function ReportActionItemImage({ } else { propsObj = { isThumbnail, - ...(isThumbnail && {iconSize: isSingleImage ? 'medium' : ('small' as IconSize)}), - fileExtension, - transactionID: transaction?.transactionID, + ...(isThumbnail && {iconSize: isSingleImage ? 'medium' : ('small' as IconSize), fileExtension}), source: thumbnail ?? image ?? '', }; } diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index d46e0a6436b2..7e29fd8ea203 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -139,7 +139,7 @@ function ReportPreview({ const isScanning = hasReceipts && areAllRequestsBeingSmartScanned; const hasErrors = hasMissingSmartscanFields || (canUseViolations && ReportUtils.hasViolations(iouReportID, transactionViolations)); const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3); - const lastThreeReceipts = lastThreeTransactionsWithReceipts.map((transaction) => ({...ReceiptUtils.getThumbnailAndImageURIs(transaction), transaction})); + const lastThreeReceipts = lastThreeTransactionsWithReceipts.map((transaction) => ({...ReceiptUtils.getThumbnailAndImageURIs(transaction)})); let formattedMerchant = numberOfRequests === 1 && hasReceipts ? TransactionUtils.getMerchant(transactionsWithReceipts[0]) : null; if (TransactionUtils.isPartialMerchant(formattedMerchant ?? '')) { formattedMerchant = null; From 4d181211394923d2f8e30c0995c6c3e9527ddf6d Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 8 Mar 2024 17:12:23 +0300 Subject: [PATCH 47/56] minor fix --- .../MoneyRequestPreview/MoneyRequestPreviewContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx index a5fb03a22dca..8577c9fa5f97 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx @@ -114,7 +114,7 @@ function MoneyRequestPreviewContent({ merchantOrDescription = description || ''; } - const receiptImages = hasReceipt ? [{...ReceiptUtils.getThumbnailAndImageURIs(transaction)}] : []; + const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(transaction)] : []; const hasPendingWaypoints = transaction?.pendingFields?.waypoints; const showMapAsImage = isDistanceRequest && hasPendingWaypoints; From aa290ff57fe0047371d79a3aa94392412f59290b Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 8 Mar 2024 17:14:31 +0300 Subject: [PATCH 48/56] minor fix --- src/components/ReportActionItem/ReportPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 7e29fd8ea203..f6ffd54249fb 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -139,7 +139,7 @@ function ReportPreview({ const isScanning = hasReceipts && areAllRequestsBeingSmartScanned; const hasErrors = hasMissingSmartscanFields || (canUseViolations && ReportUtils.hasViolations(iouReportID, transactionViolations)); const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3); - const lastThreeReceipts = lastThreeTransactionsWithReceipts.map((transaction) => ({...ReceiptUtils.getThumbnailAndImageURIs(transaction)})); + const lastThreeReceipts = lastThreeTransactionsWithReceipts.map((transaction) => ReceiptUtils.getThumbnailAndImageURIs(transaction)); let formattedMerchant = numberOfRequests === 1 && hasReceipts ? TransactionUtils.getMerchant(transactionsWithReceipts[0]) : null; if (TransactionUtils.isPartialMerchant(formattedMerchant ?? '')) { formattedMerchant = null; From b6a111a9ff3d05b60ba1f1d2334e5895fbb8c375 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 8 Mar 2024 17:15:14 +0300 Subject: [PATCH 49/56] minor --- src/components/ReportActionItem/ReportPreview.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index f6ffd54249fb..381302489699 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -140,6 +140,7 @@ function ReportPreview({ const hasErrors = hasMissingSmartscanFields || (canUseViolations && ReportUtils.hasViolations(iouReportID, transactionViolations)); const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3); const lastThreeReceipts = lastThreeTransactionsWithReceipts.map((transaction) => ReceiptUtils.getThumbnailAndImageURIs(transaction)); + let formattedMerchant = numberOfRequests === 1 && hasReceipts ? TransactionUtils.getMerchant(transactionsWithReceipts[0]) : null; if (TransactionUtils.isPartialMerchant(formattedMerchant ?? '')) { formattedMerchant = null; From 7c1cf629aa902962e3f738c9f84669135c03afac Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Mon, 11 Mar 2024 20:55:23 +0300 Subject: [PATCH 50/56] fix typescript --- src/pages/TransactionReceiptPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/TransactionReceiptPage.tsx b/src/pages/TransactionReceiptPage.tsx index 8db9e05a5139..f6f2c90e5d2c 100644 --- a/src/pages/TransactionReceiptPage.tsx +++ b/src/pages/TransactionReceiptPage.tsx @@ -28,7 +28,7 @@ type TransactionReceiptProps = TransactionReceiptOnyxProps & StackScreenProps Date: Thu, 14 Mar 2024 22:54:14 +0300 Subject: [PATCH 51/56] fix type --- src/components/MoneyRequestConfirmationList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 6d41f8da8af2..e69a15d7eb5c 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -626,7 +626,7 @@ function MoneyRequestConfirmationList({ Date: Thu, 14 Mar 2024 23:10:48 +0300 Subject: [PATCH 52/56] suppress eslint warning --- src/components/MoneyRequestConfirmationList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index e69a15d7eb5c..8a5886fe1f4e 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -621,7 +621,7 @@ function MoneyRequestConfirmationList({ )} - + {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} {receiptImage || receiptThumbnail ? ( Date: Tue, 19 Mar 2024 22:21:13 +0300 Subject: [PATCH 53/56] updated label font size and line heights --- src/components/EReceiptThumbnail.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index fc4e67441994..e0f88470f460 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -70,15 +70,21 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT let receiptIconWidth: number = variables.eReceiptIconWidth; let receiptIconHeight: number = variables.eReceiptIconHeight; let receiptMCCSize: number = variables.eReceiptMCCHeightWidth; + let labelFontSize: number = variables.fontSizeNormal; + let labelLineHeight: number = variables.lineHeightLarge; if (iconSize === 'small') { receiptIconWidth = variables.eReceiptIconWidthSmall; receiptIconHeight = variables.eReceiptIconHeightSmall; receiptMCCSize = variables.eReceiptMCCHeightWidthSmall; + labelFontSize = variables.fontSizeExtraSmall; + labelLineHeight = variables.lineHeightXSmall; } else if (iconSize === 'medium') { receiptIconWidth = variables.eReceiptIconWidthMedium; receiptIconHeight = variables.eReceiptIconHeightMedium; receiptMCCSize = variables.eReceiptMCCHeightWidthMedium; + labelFontSize = variables.fontSizeLabel; + labelLineHeight = variables.lineHeightNormal; } return ( @@ -107,7 +113,16 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT additionalStyles={[styles.fullScreen]} /> {isReceiptThumbnail && fileExtension && ( - {fileExtension.toUpperCase()} + + {fileExtension.toUpperCase()} + )} {MCCIcon && !isReceiptThumbnail ? ( Date: Thu, 21 Mar 2024 22:46:52 +0300 Subject: [PATCH 54/56] type update --- src/components/ReportActionItem/ReportActionItemImage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index c26a9a93ef72..740f784d2669 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -87,7 +87,7 @@ function ReportActionItemImage({ } else { propsObj = { isThumbnail, - ...(isThumbnail && {iconSize: isSingleImage ? 'medium' : ('small' as IconSize), fileExtension}), + ...(isThumbnail && {iconSize: (isSingleImage ? 'medium' : 'small') as IconSize, fileExtension}), source: thumbnail ?? image ?? '', }; } From 1bd9230ecae518f03f70a4fade716fcba394c5ae Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Mon, 25 Mar 2024 16:26:44 +0300 Subject: [PATCH 55/56] made label unselectable --- src/components/EReceiptThumbnail.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index e0f88470f460..63889f76e67c 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -114,6 +114,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT /> {isReceiptThumbnail && fileExtension && ( Date: Mon, 25 Mar 2024 16:32:39 +0300 Subject: [PATCH 56/56] fix lint --- src/components/ReportActionItem/ReportActionItemImages.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index 1c383dfa4f9f..ee8cb0849ca0 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -71,7 +71,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {}; return (