Merge pull request #40763 from dukenv0307/fix/34120

Fix receipt preview in confirmation page
Expensify · May 6, 2024 · bb78140 · bb78140
2 parents 8db67c4 + 05360e9
commit bb78140
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 25 deletions.
diff --git a/src/components/DistanceEReceipt.tsx b/src/components/DistanceEReceipt.tsx
@@ -61,6 +61,7 @@ function DistanceEReceipt({transaction}: DistanceEReceiptProps) {
                             <ReceiptImage
                                 source={thumbnailSource}
                                 shouldUseThumbnailImage
+                                shouldUseInitialObjectPosition
                             />
                         )}
                     </View>

diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
@@ -969,30 +969,44 @@ function MoneyRequestConfirmationList({
     const resolvedReceiptImage = isLocalFile ? receiptImage : tryResolveUrlFromApiRoot(receiptImage ?? '');
 
     const receiptThumbnailContent = useMemo(
-        () =>
-            isLocalFile && Str.isPDF(receiptFilename) ? (
-                <PDFThumbnail
-                    // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
-                    previewSourceURL={resolvedReceiptImage as string}
-                    style={styles.moneyRequestImage}
-                    // We don't support scaning password protected PDF receipt
-                    enabled={!isAttachmentInvalid}
-                    onPassword={() => setIsAttachmentInvalid(true)}
-                />
-            ) : (
-                <ReceiptImage
-                    style={styles.moneyRequestImage}
-                    isThumbnail={isThumbnail}
-                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    source={resolvedThumbnail || resolvedReceiptImage || ''}
-                    // AuthToken is required when retrieving the image from the server
-                    // but we don't need it to load the blob:// or file:// image when starting an expense/split
-                    // So if we have a thumbnail, it means we're retrieving the image from the server
-                    isAuthTokenRequired={!!receiptThumbnail}
-                    fileExtension={fileExtension}
-                />
-            ),
-        [isLocalFile, receiptFilename, resolvedThumbnail, styles.moneyRequestImage, isAttachmentInvalid, isThumbnail, resolvedReceiptImage, receiptThumbnail, fileExtension],
+        () => (
+            <View style={styles.moneyRequestImage}>
+                {isLocalFile && Str.isPDF(receiptFilename) ? (
+                    <PDFThumbnail
+                        // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+                        previewSourceURL={resolvedReceiptImage as string}
+                        // We don't support scaning password protected PDF receipt
+                        enabled={!isAttachmentInvalid}
+                        onPassword={() => setIsAttachmentInvalid(true)}
+                    />
+                ) : (
+                    <ReceiptImage
+                        isThumbnail={isThumbnail}
+                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                        source={resolvedThumbnail || resolvedReceiptImage || ''}
+                        // AuthToken is required when retrieving the image from the server
+                        // but we don't need it to load the blob:// or file:// image when starting an expense/split
+                        // So if we have a thumbnail, it means we're retrieving the image from the server
+                        isAuthTokenRequired={!!receiptThumbnail && !isLocalFile}
+                        fileExtension={fileExtension}
+                        shouldUseThumbnailImage
+                        shouldUseInitialObjectPosition={isDistanceRequest}
+                    />
+                )}
+            </View>
+        ),
+        [
+            isLocalFile,
+            receiptFilename,
+            resolvedThumbnail,
+            styles.moneyRequestImage,
+            isAttachmentInvalid,
+            isThumbnail,
+            resolvedReceiptImage,
+            receiptThumbnail,
+            fileExtension,
+            isDistanceRequest,
+        ],
     );
 
     return (

diff --git 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 initial 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
@@ -70,6 +70,7 @@ function ReportActionItemImage({
     const attachmentModalSource = tryResolveUrlFromApiRoot(image ?? '');
     const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? '');
     const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction);
+    const isDistanceRequest = Boolean(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,
         };
     } 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,
         };
     }
 

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4209,6 +4209,7 @@ const styles = (theme: ThemeColors) =>
             height: 200,
             borderRadius: 16,
             margin: 20,
+            overflow: 'hidden',
         },
 
         reportPreviewBox: {