[Wave 8 - ECard Transactions] Show EReceipts in ReportPreviews and Attachment View

src/CONST.ts

@@ -1476,6 +1476,7 @@ const CONST = {
         MAKE_REQUEST_WITH_SIDE_EFFECTS: 'makeRequestWithSideEffects',
     },
 
+    ERECEIPT_PATH: 'eReceipt/',
     ERECEIPT_COLORS: {
         YELLOW: 'Yellow',
         ICE: 'Ice',

src/ROUTES.ts

@@ -286,6 +286,11 @@ export default {
     I_AM_A_TEACHER: 'teachersunite/i-am-a-teacher',
     INTRO_SCHOOL_PRINCIPAL: 'teachersunite/intro-school-principal',
 
+    ERECEIPT: {
+        route: 'eReceipt/:transactionID',
+        getRoute: (transactionID: string) => `eReceipt/${transactionID}`,
+    },
+
     WORKSPACE_NEW: 'workspace/new',
     WORKSPACE_NEW_ROOM: 'workspace/new-room',
     WORKSPACE_INITIAL: {

src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js

@@ -53,7 +53,7 @@ function extractAttachmentsFromReport(report, reportActions) {
 
             const transaction = TransactionUtils.getTransaction(transactionID);
             if (TransactionUtils.hasReceipt(transaction)) {
-                const {image} = ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename);
+                const {image} = ReceiptUtils.getThumbnailAndImageURIs(transaction);
                 attachments.unshift({
                     source: tryResolveUrlFromApiRoot(image),
                     isAuthTokenRequired: true,

src/components/Attachments/AttachmentView/index.js

@@ -18,6 +18,8 @@ import addEncryptedAuthTokenToURL from '../../../libs/addEncryptedAuthTokenToURL
 import * as StyleUtils from '../../../styles/StyleUtils';
 import {attachmentViewPropTypes, attachmentViewDefaultProps} from './propTypes';
 import useNetwork from '../../../hooks/useNetwork';
+import CONST from '../../../CONST';
+import EReceipt from '../../EReceipt';
 
 const propTypes = {
     ...attachmentViewPropTypes,
@@ -92,6 +94,15 @@ function AttachmentView({
         );
     }
 
+    if (_.isString(source) && source.startsWith(CONST.ERECEIPT_PATH)) {
+        const transactionIDFromURL = source.split(CONST.ERECEIPT_PATH)[1];
+        return (
+            <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                <EReceipt transactionID={transactionIDFromURL} />
+            </View>
+        );
+    }
+
     // Check both source and file.name since PDFs dragged into the text field
     // will appear with a source that is a blob
     if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) {

src/components/MoneyRequestConfirmationList.js

@@ -519,8 +519,7 @@ function MoneyRequestConfirmationList(props) {
         );
     }, [confirm, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions, translate, formError]);
 
-    const {image: receiptImage, thumbnail: receiptThumbnail} =
-        props.receiptPath && props.receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(props.receiptPath, props.receiptFilename) : {};
+    const {image: receiptImage, thumbnail: receiptThumbnail} = props.receiptPath && props.receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {};
 
     return (
         <OptionsSelector

src/components/ReportActionItem/MoneyRequestPreview.js

@@ -172,7 +172,7 @@ function MoneyRequestPreview(props) {
         !_.isEmpty(requestMerchant) && !props.isBillSplit && requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT;
     const shouldShowDescription = !_.isEmpty(description) && !shouldShowMerchant;
 
-    const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename || '')] : [];
+    const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction)] : [];
 
     const getSettledMessage = () => {
         if (isExpensifyCardTransaction || isDistanceRequest) {

src/components/ReportActionItem/MoneyRequestView.js

@@ -126,7 +126,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
     let receiptURIs;
     let hasErrors = false;
     if (hasReceipt) {
-        receiptURIs = ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename);
+        receiptURIs = ReceiptUtils.getThumbnailAndImageURIs(transaction);
         hasErrors = canEdit && TransactionUtils.hasMissingSmartscanFields(transaction);
     }
 

src/components/ReportActionItem/ReportActionItemImage.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {View} from 'react-native';
 import styles from '../../styles/styles';
 import Image from '../Image';
 import ThumbnailImage from '../ThumbnailImage';
@@ -10,6 +11,7 @@ import {ShowContextMenuContext} from '../ShowContextMenuContext';
 import Navigation from '../../libs/Navigation/Navigation';
 import PressableWithoutFocus from '../Pressable/PressableWithoutFocus';
 import useLocalize from '../../hooks/useLocalize';
+import EReceiptThumbnail from '../EReceiptThumbnail';
 
 const propTypes = {
     /** thumbnail URI for the image */
@@ -38,7 +40,9 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal}) {
     const imageSource = tryResolveUrlFromApiRoot(image || '');
     const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || '');
 
-    const receiptImageComponent = thumbnail ? (
+    const isEReceipt = imageSource.startsWith(CONST.ERECEIPT_PATH);
+
+    let receiptImageComponent = thumbnail ? (
         <ThumbnailImage
             previewSourceURL={thumbnailSource}
             style={[styles.w100, styles.h100]}
@@ -52,6 +56,15 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal}) {
         />
     );
 
+    if (isEReceipt) {
+        const transactionIDFromURL = imageSource.split(CONST.ERECEIPT_PATH)[1];
+        receiptImageComponent = (
+            <View style={[styles.w100, styles.h100]}>
+                <EReceiptThumbnail transactionID={transactionIDFromURL} />
+            </View>
+        );
+    }
+
     if (enablePreviewModal) {
         return (
             <ShowContextMenuContext.Consumer>

src/components/ReportActionItem/ReportPreview.js

@@ -125,8 +125,9 @@ function ReportPreview(props) {
     const hasReceipts = transactionsWithReceipts.length > 0;
     const isScanning = hasReceipts && ReportUtils.areAllRequestsBeingSmartScanned(props.iouReportID, props.action);
     const hasErrors = hasReceipts && ReportUtils.hasMissingSmartscanFields(props.iouReportID);
-    const lastThreeTransactionsWithReceipts = ReportUtils.getReportPreviewDisplayTransactions(props.action);
-    const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, ({receipt, filename}) => ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename || ''));
+
+    const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3);
+    const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, (transaction) => ReceiptUtils.getThumbnailAndImageURIs(transaction));
 
     const hasOnlyOneReceiptRequest = numberOfRequests === 1 && hasReceipts;
     const previewSubtitle = hasOnlyOneReceiptRequest

src/libs/CardUtils.ts

@@ -47,7 +47,8 @@ function getCardDescription(cardID: number) {
         return '';
     }
     const cardDescriptor = card.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED ? Localize.translateLocal('cardTransactions.notActivated') : card.lastFourPAN;
-    return `${card.bank} - ${cardDescriptor}`;
+    const result = cardDescriptor ? `${card.bank} - ${cardDescriptor}` : `${card.bank}`;
+    return result;
 }
 
 /**

src/libs/ReceiptUtils.ts

@@ -6,6 +6,8 @@ import ReceiptHTML from '../../assets/images/receipt-html.png';
 import ReceiptDoc from '../../assets/images/receipt-doc.png';
 import ReceiptGeneric from '../../assets/images/receipt-generic.png';
 import ReceiptSVG from '../../assets/images/receipt-svg.png';
+import {Transaction} from '../types/onyx';
+import ROUTES from '../ROUTES';
 
 type ThumbnailAndImageURI = {
     image: ImageSourcePropType | string;
@@ -20,12 +22,21 @@ type FileNameAndExtension = {
 /**
  * Grab the appropriate receipt image and thumbnail URIs based on file type
  *
- * @param path URI to image, i.e. blob:new.expensify.com/9ef3a018-4067-47c6-b29f-5f1bd35f213d or expensify.com/receipts/w_e616108497ef940b7210ec6beb5a462d01a878f4.jpg
- * @param filename of uploaded image or last part of remote URI
+ * @param transaction
  */
-function getThumbnailAndImageURIs(path: string, filename: string): ThumbnailAndImageURI {
+function getThumbnailAndImageURIs(transaction: Transaction): ThumbnailAndImageURI {
+    // 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 ?? '';
+    // filename of uploaded image or last part of remote URI
+    const filename = transaction?.filename ?? '';
     const isReceiptImage = Str.isImage(filename);
 
+    const hasEReceipt = transaction?.hasEReceipt;
+
+    if (hasEReceipt) {
+        return {thumbnail: null, image: ROUTES.ERECEIPT.getRoute(transaction.transactionID)};
+    }
+
     // For local files, we won't have a thumbnail yet
     if (isReceiptImage && (path.startsWith('blob:') || path.startsWith('file:'))) {
         return {thumbnail: null, image: path};

src/libs/ReportUtils.js

@@ -3756,29 +3756,6 @@ function getParticipantsIDs(report) {
     return participants;
 }
 
-/**
- * Get the last 3 transactions with receipts of an IOU report that will be displayed on the report preview
- *
- * @param {Object} reportPreviewAction
- * @returns {Object}
- */
-function getReportPreviewDisplayTransactions(reportPreviewAction) {
-    const transactionIDs = lodashGet(reportPreviewAction, ['childRecentReceiptTransactionIDs']);
-    return _.reduce(
-        _.keys(transactionIDs),
-        (transactions, transactionID) => {
-            if (transactionIDs[transactionID] !== null) {
-                const transaction = TransactionUtils.getTransaction(transactionID);
-                if (TransactionUtils.hasReceipt(transaction)) {
-                    transactions.push(transaction);
-                }
-            }
-            return transactions;
-        },
-        [],
-    );
-}
-
 /**
  * Return iou report action display message
  *
@@ -3966,7 +3943,6 @@ export {
     canEditMoneyRequest,
     buildTransactionThread,
     areAllRequestsBeingSmartScanned,
-    getReportPreviewDisplayTransactions,
     getTransactionsWithReceipts,
     hasMissingSmartscanFields,
     getIOUReportActionDisplayMessage,

src/libs/TransactionUtils.ts

@@ -76,8 +76,15 @@ function buildOptimisticTransaction(
     };
 }
 
+/**
+ * Check if the transaction has an Ereceipt
+ */
+function hasEreceipt(transaction: Transaction | undefined | null): boolean {
+    return !!transaction?.hasEReceipt;
+}
+
 function hasReceipt(transaction: Transaction | undefined | null): boolean {
-    return !!transaction?.receipt?.state;
+    return !!transaction?.receipt?.state || hasEreceipt(transaction);
 }
 
 function areRequiredFieldsEmpty(transaction: Transaction): boolean {
@@ -332,13 +339,6 @@ function hasRoute(transaction: Transaction): boolean {
     return !!transaction?.routes?.route0?.geometry?.coordinates;
 }
 
-/**
- * Check if the transaction has an Ereceipt
- */
-function hasEreceipt(transaction: Transaction): boolean {
-    return !!transaction?.hasEReceipt;
-}
-
 /**
  * Get the transactions related to a report preview with receipts
  * Get the details linked to the IOU reportAction