Transactions - Update Generic Receipts to use ReceiptBackground

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 = {
@@ -67,11 +67,9 @@ function DistanceEReceipt({transaction}) {
                         {isOffline || !thumbnailSource ? (
                             <PendingMapView />
                         ) : (
-                            <ThumbnailImage
-                                previewSourceURL={thumbnailSource}
-                                style={[styles.w100, styles.h100]}
-                                isAuthTokenRequired
-                                shouldDynamicallyResize={false}
+                            <ReceiptImage
+                                source={thumbnailSource}
+                                shouldUseThumnailImage
                             />
                         )}
                     </View>

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<Transaction>;
@@ -24,6 +25,9 @@ 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;
+    fileExtension?: string;
+    isThumbnail?: boolean;
 };
 
 const backgroundImages = {
@@ -35,7 +39,7 @@ const backgroundImages = {
     [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink,
 };
 
-function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) {
+function EReceiptThumbnail({transaction, borderRadius, fileExtension, isThumbnail = false}: EReceiptThumbnailProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
@@ -83,6 +87,7 @@ function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) {
                 styles.overflowHidden,
                 styles.alignItemsCenter,
                 containerHeight && containerHeight < variables.eReceiptThumnailCenterReceiptBreakpoint ? styles.justifyContentCenter : {},
+                borderRadius ? {borderRadius} : {},
             ]}
             onLayout={onContainerLayout}
         >
@@ -100,7 +105,8 @@ function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) {
                         fill={secondaryColor}
                         additionalStyles={[styles.fullScreen]}
                     />
-                    {MCCIcon ? (
+                    {isThumbnail && fileExtension && <Text style={styles.labelStrong}>{fileExtension.toUpperCase()}</Text>}
+                    {MCCIcon && !isThumbnail ? (
                         <Icon
                             src={MCCIcon}
                             height={receiptMCCSize}

src/components/MoneyRequestConfirmationList.js

@@ -32,11 +32,11 @@ import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
 import categoryPropTypes from './categoryPropTypes';
 import ConfirmedRoute from './ConfirmedRoute';
 import FormHelpMessage from './FormHelpMessage';
-import Image from './Image';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import optionPropTypes from './optionPropTypes';
 import OptionsSelector from './OptionsSelector';
 import ReceiptEmptyState from './ReceiptEmptyState';
+import ReceiptImage from './ReceiptImage';
 import SettlementButton from './SettlementButton';
 import ShowMoreButton from './ShowMoreButton';
 import Switch from './Switch';
@@ -579,8 +579,13 @@ function MoneyRequestConfirmationList(props) {
         translate,
     ]);
 
-    const {image: receiptImage, thumbnail: receiptThumbnail} =
-        props.receiptPath && props.receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, props.receiptPath, props.receiptFilename) : {};
+    const {
+        image: receiptImage,
+        thumbnail: receiptThumbnail,
+        isThumbnail,
+        fileExtension,
+    } = props.receiptPath && props.receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, props.receiptPath, props.receiptFilename) : {};
+
     return (
         <OptionsSelector
             sections={optionSelectorSections}
@@ -606,13 +611,16 @@ function MoneyRequestConfirmationList(props) {
                 </View>
             )}
             {receiptImage || receiptThumbnail ? (
-                <Image
+                <ReceiptImage
                     style={styles.moneyRequestImage}
-                    source={{uri: receiptThumbnail || receiptImage}}
+                    isThumbnail={isThumbnail}
+                    source={receiptThumbnail || receiptImage}
                     // 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 a money request / split bill
                     // 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")

src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

@@ -32,11 +32,11 @@ 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';
 import ReceiptEmptyState from './ReceiptEmptyState';
+import ReceiptImage from './ReceiptImage';
 import SettlementButton from './SettlementButton';
 import Switch from './Switch';
 import tagPropTypes from './tagPropTypes';
@@ -614,7 +614,12 @@ 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,
+        fileExtension,
+    } = receiptPath && receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, receiptPath, receiptFilename) : {};
     return (
         <OptionsSelector
             sections={optionSelectorSections}
@@ -640,13 +645,16 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                 </View>
             )}
             {receiptImage || receiptThumbnail ? (
-                <Image
+                <ReceiptImage
                     style={styles.moneyRequestImage}
-                    source={{uri: receiptThumbnail || receiptImage}}
+                    isThumbnail={isThumbnail}
+                    source={receiptThumbnail || receiptImage}
                     // 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 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}
                 />
             ) : (
                 // The empty receipt component should only show for IOU Requests of a paid policy ("Team" or "Corporate")

src/components/ReceiptImage.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+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;
+    shouldUseThumnailImage?: boolean;
+    isEReceipt?: boolean;
+    source?: string;
+    isAuthTokenRequired?: boolean;
+    style?: Style;
+    fileExtension?: string;
+};
+
+function ReceiptImage({transactionID, isThumbnail = false, shouldUseThumnailImage = false, isEReceipt = false, source, isAuthTokenRequired, style, fileExtension}: ReceiptImageProps) {
+    const styles = useThemeStyles();
+
+    if (isEReceipt || isThumbnail) {
+        return (
+            <View style={style ?? [styles.w100, styles.h100]}>
+                <EReceiptThumbnail
+                    transactionID={transactionID ?? ''}
+                    borderRadius={style?.borderRadius}
+                    fileExtension={fileExtension}
+                    isThumbnail
+                />
+            </View>
+        );
+    }
+
+    if (shouldUseThumnailImage) {
+        return (
+            <ThumbnailImage
+                previewSourceURL={source ?? ''}
+                style={[styles.w100, styles.h100]}
+                isAuthTokenRequired
+                shouldDynamicallyResize={false}
+            />
+        );
+    }
+
+    return (
+        <Image
+            source={{uri: source}}
+            style={style ?? [styles.w100, styles.h100]}
+            isAuthTokenRequired={isAuthTokenRequired}
+        />
+    );
+}
+
+export type {ReceiptImageProps};
+export default ReceiptImage;

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) {

src/components/ReportActionItem/MoneyRequestView.js

@@ -237,6 +237,8 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
                         <View style={styles.moneyRequestViewImage}>
                             <ReportActionItemImage
                                 thumbnail={receiptURIs.thumbnail}
+                                fileExtension={receiptURIs.fileExtension}
+                                isThumbnail={receiptURIs.isThumbnail}
                                 image={receiptURIs.image}
                                 isLocalFile={receiptURIs.isLocalFile}
                                 transaction={transaction}

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -1,13 +1,11 @@
+/* eslint-disable react/jsx-props-no-spreading */
 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 type {ReceiptImageProps} from '@components/ReceiptImage';
+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';
@@ -17,10 +15,16 @@ import type {Transaction} from '@src/types/onyx';
 
 type ReportActionItemImageProps = {
     /** thumbnail URI for the image */
-    thumbnail?: string | number;
+    thumbnail?: string;
+
+    /** The file type of the receipt */
+    fileExtension?: string;
+
+    /** whether or not we are going to display a thumbnail */
+    isThumbnail?: boolean;
 
     /** URI for the image or local numeric reference for the image  */
-    image: string | number;
+    image: string;
 
     /** whether or not to enable the image preview modal */
     enablePreviewModal?: boolean;
@@ -41,37 +45,30 @@ type ReportActionItemImageProps = {
  * and optional preview modal as well.
  */
 
-function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, transaction, canEditReceipt = false, isLocalFile = false}: ReportActionItemImageProps) {
+function ReportActionItemImage({
+    thumbnail,
+    isThumbnail,
+    image,
+    enablePreviewModal = false,
+    transaction,
+    canEditReceipt = false,
+    isLocalFile = false,
+    fileExtension,
+}: ReportActionItemImageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const imageSource = tryResolveUrlFromApiRoot(image ?? '');
     const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? '');
     const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction);
 
-    let receiptImageComponent: ReactElement;
+    let propsObj: ReceiptImageProps;
 
     if (isEReceipt) {
-        receiptImageComponent = (
-            <View style={[styles.w100, styles.h100]}>
-                <EReceiptThumbnail transactionID={transaction.transactionID} />
-            </View>
-        );
-    } else if (thumbnail && !isLocalFile && !Str.isPDF(imageSource as string)) {
-        receiptImageComponent = (
-            <ThumbnailImage
-                previewSourceURL={thumbnailSource}
-                style={[styles.w100, styles.h100]}
-                isAuthTokenRequired
-                shouldDynamicallyResize={false}
-            />
-        );
+        propsObj = {isEReceipt: true, transactionID: transaction.transactionID};
+    } else if ((thumbnail ?? isThumbnail) && !isLocalFile && !Str.isPDF(imageSource)) {
+        propsObj = thumbnailSource ? {shouldUseThumnailImage: true, source: thumbnailSource} : {isThumbnail: true, fileExtension, transactionID: transaction?.transactionID};
     } else {
-        receiptImageComponent = (
-            <Image
-                source={{uri: thumbnail ?? image}}
-                style={[styles.w100, styles.h100]}
-            />
-        );
+        propsObj = {isThumbnail, fileExtension, transactionID: transaction?.transactionID, source: thumbnail ?? image};
     }
 
     if (enablePreviewModal) {
@@ -98,7 +95,7 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, tr
                                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                                     accessibilityLabel={translate('accessibilityHints.viewAttachment')}
                                 >
-                                    {receiptImageComponent}
+                                    <ReceiptImage {...propsObj} />
                                 </PressableWithoutFocus>
                             )
                         }
@@ -108,7 +105,7 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, tr
         );
     }
 
-    return receiptImageComponent;
+    return <ReceiptImage {...propsObj} />;
 }
 
 ReportActionItemImage.displayName = 'ReportActionItemImage';

src/components/ReportActionItem/ReportActionItemImages.tsx

@@ -6,20 +6,13 @@ import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils';
 import variables from '@styles/variables';
-import type {Transaction} from '@src/types/onyx';
 import ReportActionItemImage from './ReportActionItemImage';
 
-type Image = {
-    thumbnail: string | number;
-    image: string | number;
-    transaction: Transaction;
-    isLocalFile: boolean;
-};
-
 type ReportActionItemImagesProps = {
     /** array of image and thumbnail URIs */
-    images: Image[];
+    images: ThumbnailAndImageURI[];
 
     // We're not providing default values for size and total and disabling the ESLint rule
     // because we want them to default to the length of images, but we can't set default props
@@ -71,7 +64,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
 
     return (
         <View style={[styles.reportActionItemImages, hoverStyle, heightStyle]}>
-            {shownImages.map(({thumbnail, 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.
@@ -84,9 +77,11 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
                     >
                         <ReportActionItemImage
                             thumbnail={thumbnail}
+                            fileExtension={fileExtension}
                             image={image}
                             isLocalFile={isLocalFile}
                             transaction={transaction}
+                            isThumbnail={isThumbnail}
                         />
                         {isLastImage && remaining > 0 && (
                             <View style={[styles.reportActionItemImagesMoreContainer]}>