From 2efb5f3de626256e7e2497b8a8097379f0c11921 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 23 Apr 2024 16:28:59 +0700 Subject: [PATCH 1/5] Fix receipt preview in confirmation page --- .../MoneyRequestConfirmationList.tsx | 48 ++++++++++--------- src/styles/index.ts | 1 + 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 99901dd261de..9953ebb9f14a 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -952,29 +952,31 @@ function MoneyRequestConfirmationList({ const resolvedReceiptImage = isLocalFile ? receiptImage : tryResolveUrlFromApiRoot(receiptImage ?? ''); const receiptThumbnailContent = useMemo( - () => - isLocalFile && Str.isPDF(receiptFilename) ? ( - setIsAttachmentInvalid(true)} - /> - ) : ( - - ), + () => ( + + {isLocalFile && Str.isPDF(receiptFilename) ? ( + setIsAttachmentInvalid(true)} + /> + ) : ( + + )} + + ), [isLocalFile, receiptFilename, resolvedThumbnail, styles.moneyRequestImage, isAttachmentInvalid, isThumbnail, resolvedReceiptImage, receiptThumbnail, fileExtension], ); diff --git a/src/styles/index.ts b/src/styles/index.ts index 05defcf8b12c..8d42fcdff907 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4156,6 +4156,7 @@ const styles = (theme: ThemeColors) => height: 200, borderRadius: 16, margin: 20, + overflow: 'hidden', }, reportPreviewBox: { From f788b801cd8fd86d050055459f3b35799f704776 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 25 Apr 2024 18:24:53 +0700 Subject: [PATCH 2/5] fix distance request thumnail --- src/components/DistanceEReceipt.tsx | 1 + src/components/MoneyRequestConfirmationList.tsx | 1 + src/components/ReceiptImage.tsx | 6 +++++- src/components/ReportActionItem/ReportActionItemImage.tsx | 3 +++ 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/DistanceEReceipt.tsx b/src/components/DistanceEReceipt.tsx index f6adac9b6034..ab21e43af2f0 100644 --- a/src/components/DistanceEReceipt.tsx +++ b/src/components/DistanceEReceipt.tsx @@ -61,6 +61,7 @@ function DistanceEReceipt({transaction}: DistanceEReceiptProps) { )} diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 70bdf71c2572..95e77c5a8c34 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -970,6 +970,7 @@ function MoneyRequestConfirmationList({ isAuthTokenRequired={!!receiptThumbnail && !isLocalFile} fileExtension={fileExtension} shouldUseThumbnailImage + shouldUseInitialObjectPosition={isDistanceRequest} /> )} diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx index 118fe769e52b..01873eaf4020 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -53,6 +53,9 @@ type ReceiptImageProps = ( /** Whether we should display the receipt with ThumbnailImage component */ shouldUseThumbnailImage?: boolean; + /** Whether we should display the receipt with inital object position */ + shouldUseInitialObjectPosition?: boolean; + /** Whether the receipt image requires an authToken */ isAuthTokenRequired?: boolean; @@ -85,6 +88,7 @@ function ReceiptImage({ iconSize, fallbackIcon, fallbackIconSize, + shouldUseInitialObjectPosition = false, }: ReceiptImageProps) { const styles = useThemeStyles(); @@ -120,7 +124,7 @@ function ReceiptImage({ shouldDynamicallyResize={false} fallbackIcon={fallbackIcon} fallbackIconSize={fallbackIconSize} - objectPosition={CONST.IMAGE_OBJECT_POSITION.TOP} + objectPosition={shouldUseInitialObjectPosition ? CONST.IMAGE_OBJECT_POSITION.INITIAL : CONST.IMAGE_OBJECT_POSITION.TOP} /> ); } diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index daf0f2711f23..c2e7b2630998 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -70,6 +70,7 @@ function ReportActionItemImage({ const attachmentModalSource = tryResolveUrlFromApiRoot(image ?? ''); const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? ''); const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction); + const isDistanceRequest = transaction && TransactionUtils.isDistanceRequest(transaction); let propsObj: ReceiptImageProps; @@ -82,6 +83,7 @@ function ReportActionItemImage({ fallbackIcon: Expensicons.Receipt, fallbackIconSize: isSingleImage ? variables.iconSizeSuperLarge : variables.iconSizeExtraLarge, isAuthTokenRequired: true, + shouldUseInitialObjectPosition: isDistanceRequest ?? false, }; } else if (isLocalFile && filename && Str.isPDF(filename) && typeof attachmentModalSource === 'string') { propsObj = {isPDFThumbnail: true, source: attachmentModalSource}; @@ -92,6 +94,7 @@ function ReportActionItemImage({ shouldUseThumbnailImage: true, isAuthTokenRequired: false, source: thumbnail ?? image ?? '', + shouldUseInitialObjectPosition: isDistanceRequest ?? false, }; } From b7230786b29729ca31ed879c63bd9718d8fa4558 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 25 Apr 2024 18:32:59 +0700 Subject: [PATCH 3/5] fix lint --- src/components/MoneyRequestConfirmationList.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 95e77c5a8c34..bbd75a6dcabf 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -975,7 +975,18 @@ function MoneyRequestConfirmationList({ )} ), - [isLocalFile, receiptFilename, resolvedThumbnail, styles.moneyRequestImage, isAttachmentInvalid, isThumbnail, resolvedReceiptImage, receiptThumbnail, fileExtension], + [ + isLocalFile, + receiptFilename, + resolvedThumbnail, + styles.moneyRequestImage, + isAttachmentInvalid, + isThumbnail, + resolvedReceiptImage, + receiptThumbnail, + fileExtension, + isDistanceRequest, + ], ); return ( From 11bc78c9a635056f023bb0b38726cb54ab5088c6 Mon Sep 17 00:00:00 2001 From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com> Date: Mon, 6 May 2024 10:58:22 +0700 Subject: [PATCH 4/5] Update src/components/ReceiptImage.tsx Co-authored-by: Alex Beaman --- 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 01873eaf4020..11c49c4b7798 100644 --- a/src/components/ReceiptImage.tsx +++ b/src/components/ReceiptImage.tsx @@ -53,7 +53,7 @@ type ReceiptImageProps = ( /** Whether we should display the receipt with ThumbnailImage component */ shouldUseThumbnailImage?: boolean; - /** Whether we should display the receipt with inital object position */ + /** Whether we should display the receipt with initial object position */ shouldUseInitialObjectPosition?: boolean; /** Whether the receipt image requires an authToken */ From 9177daea7bbf97411ac56d72b36d0d56cc854085 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 6 May 2024 11:04:19 +0700 Subject: [PATCH 5/5] cast isDistanceRequest to boolean --- src/components/ReportActionItem/ReportActionItemImage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index c2e7b2630998..4e7f123a2fb2 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -70,7 +70,7 @@ function ReportActionItemImage({ const attachmentModalSource = tryResolveUrlFromApiRoot(image ?? ''); const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? ''); const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction); - const isDistanceRequest = transaction && TransactionUtils.isDistanceRequest(transaction); + const isDistanceRequest = Boolean(transaction && TransactionUtils.isDistanceRequest(transaction)); let propsObj: ReceiptImageProps; @@ -83,7 +83,7 @@ function ReportActionItemImage({ fallbackIcon: Expensicons.Receipt, fallbackIconSize: isSingleImage ? variables.iconSizeSuperLarge : variables.iconSizeExtraLarge, isAuthTokenRequired: true, - shouldUseInitialObjectPosition: isDistanceRequest ?? false, + shouldUseInitialObjectPosition: isDistanceRequest, }; } else if (isLocalFile && filename && Str.isPDF(filename) && typeof attachmentModalSource === 'string') { propsObj = {isPDFThumbnail: true, source: attachmentModalSource}; @@ -94,7 +94,7 @@ function ReportActionItemImage({ shouldUseThumbnailImage: true, isAuthTokenRequired: false, source: thumbnail ?? image ?? '', - shouldUseInitialObjectPosition: isDistanceRequest ?? false, + shouldUseInitialObjectPosition: isDistanceRequest, }; }