Show eReceipts for distance requests

src/components/Attachments/AttachmentView/index.js

@@ -3,6 +3,7 @@ import {View, ActivityIndicator} from 'react-native';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
+import {useRoute} from '@react-navigation/native';
 import styles from '../../../styles/styles';
 import Icon from '../../Icon';
 import * as Expensicons from '../../Icon/Expensicons';
@@ -17,6 +18,10 @@ import AttachmentViewPdf from './AttachmentViewPdf';
 import addEncryptedAuthTokenToURL from '../../../libs/addEncryptedAuthTokenToURL';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import {attachmentViewPropTypes, attachmentViewDefaultProps} from './propTypes';
+import * as ReportUtils from '../../../libs/ReportUtils';
+import * as TransactionUtils from '../../../libs/TransactionUtils';
+import DistanceEReceipt from '../../DistanceEReceipt';
+import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
 
 const propTypes = {
     ...attachmentViewPropTypes,
@@ -64,6 +69,7 @@ function AttachmentView({
     isWorkspaceAvatar,
 }) {
     const [loadComplete, setLoadComplete] = useState(false);
+    const currentRoute = useRoute();
 
     // Handles case where source is a component (ex: SVG)
     if (_.isFunction(source)) {
@@ -107,6 +113,18 @@ function AttachmentView({
         );
     }
 
+    const reportID = _.get(currentRoute, ['params', 'reportID']);
+    const report = ReportUtils.getReport(reportID);
+
+    // Get the money request transaction
+    const parentReportAction = ReportActionsUtils.getParentReportAction(report);
+    const transactionID = _.get(parentReportAction, ['originalMessage', 'IOUTransactionID'], 0);
+    const transaction = TransactionUtils.getTransaction(transactionID);
+    const shouldShowEReceipt = TransactionUtils.isDistanceRequest(transaction);
+    if (shouldShowEReceipt) {
+        return <DistanceEReceipt transaction={transaction} />;
+    }
+
     // For this check we use both source and file.name since temporary file source is a blob
     // both PDFs and images will appear as images when pasted into the the text field
     const isImage = Str.isImage(source);

src/components/DistanceEReceipt.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import {View} from 'react-native';
+import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import Text from './Text';
+import styles from '../styles/styles';
+import transactionPropTypes from './transactionPropTypes';
+import * as ReceiptUtils from '../libs/ReceiptUtils';
+import * as ReportUtils from '../libs/ReportUtils';
+import * as CurrencyUtils from '../libs/CurrencyUtils';
+import * as TransactionUtils from '../libs/TransactionUtils';
+import tryResolveUrlFromApiRoot from '../libs/tryResolveUrlFromApiRoot';
+import ThumbnailImage from './ThumbnailImage';
+import useLocalize from '../hooks/useLocalize';
+import Icon from './Icon';
+import themeColors from '../styles/themes/default';
+import * as Expensicons from './Icon/Expensicons';
+import EReceiptBackground from '../../assets/images/eReceipt_background.svg';
+
+const propTypes = {
+    /** The transaction for the eReceipt */
+    transaction: transactionPropTypes,
+};
+
+const defaultProps = {
+    transaction: {},
+};
+
+function DistanceEReceipt({transaction}) {
+    const {translate} = useLocalize();
+    const {thumbnail} = ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename);
+    const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction);
+    const formattedTransactionAmount = CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
+    const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || '');
+    const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+    return (
+        <View style={[styles.ph5, styles.pv5, styles.flex1, styles.alignItemsCenter]}>
+            <View style={styles.eReceiptPanel}>
+                <View style={styles.eReceiptBackgroundContainer}>
+                    <EReceiptBackground
+                        style={styles.eReceiptBackground}
+                        pointerEvents="none"
+                    />
+                </View>
+                <View style={[styles.moneyRequestViewImage, styles.mh0, styles.mt0, styles.mb5]}>
+                    <ThumbnailImage
+                        previewSourceURL={thumbnailSource}
+                        style={[styles.w100, styles.h100]}
+                        isAuthTokenRequired
+                        shouldDynamicallyResize={false}
+                    />
+                </View>
+                <View style={[styles.mb10, styles.gap5, styles.ph2, styles.flexColumn, styles.alignItemsCenter]}>
+                    <Text style={styles.eReceiptAmount}>{formattedTransactionAmount}</Text>
+                    <Text style={styles.eReceiptMerchant}>{transactionMerchant}</Text>
+                </View>
+                <View style={[styles.mb10, styles.gap5, styles.ph2]}>
+                    {_.map(waypoints, (waypoint, key) => {
+                        const index = TransactionUtils.getWaypointIndex(key);
+                        let descriptionKey = 'distance.waypointDescription.';
+                        if (index === 0) {
+                            descriptionKey += 'start';
+                        } else if (index === _.size(waypoints) - 1) {
+                            descriptionKey += 'finish';
+                        } else {
+                            descriptionKey += 'stop';
+                        }
+                        return (
+                            <View
+                                style={styles.gap1}
+                                key={key}
+                            >
+                                <Text style={styles.eReceiptWaypointTitle}>{translate(descriptionKey)}</Text>
+                                <Text style={styles.eReceiptWaypointAddress}>{waypoint.address || ''}</Text>
+                            </View>
+                        );
+                    })}
+                    <View style={styles.gap1}>
+                        <Text style={styles.eReceiptWaypointTitle}>{translate('common.date')}</Text>
+                        <Text style={styles.eReceiptWaypointAddress}>{transactionDate}</Text>
+                    </View>
+                </View>
+                <View style={[styles.ph2, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                    <Icon
+                        width={86}
+                        height={19.25}
+                        fill={themeColors.textBrand}
+                        src={Expensicons.ExpensifyWordmark}
+                    />
+                    <Text style={styles.eReceiptGuaranteed}>{translate('eReceipt.guaranteed')}</Text>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+export default DistanceEReceipt;
+DistanceEReceipt.displayName = 'DistanceEReceipt';
+DistanceEReceipt.propTypes = propTypes;
+DistanceEReceipt.defaultProps = defaultProps;

src/languages/en.ts

@@ -1778,4 +1778,7 @@ export default {
             selectSuggestedAddress: 'Please select a suggested address',
         },
     },
+    eReceipt: {
+        guaranteed: 'Guaranteed eReceipt',
+    },
 } satisfies TranslationBase;

src/styles/styles.js

@@ -3553,6 +3553,69 @@ const styles = (theme) => ({
         lineHeight: variables.lineHeightXXLarge,
     },
 
+    eReceiptAmount: {
+        ...headlineFont,
+        fontSize: variables.fontSizeXXXLarge,
+        lineHeight: variables.lineHeightXXXLarge,
+        color: theme.textBrand,
+    },
+
+    eReceiptMerchant: {
+        fontFamily: fontFamily.EXP_NEUE,
+        fontSize: variables.fontSizeXLarge,
+        lineHeight: variables.lineHeightXLarge,
+        color: theme.text,
+    },
+
+    eReceiptWaypointTitle: {
+        fontFamily: fontFamily.EXP_NEUE,
+        fontSize: variables.fontSizeSmall,
+        lineHeight: variables.lineHeightSmall,
+        color: theme.textBrand,
+    },
+
+    eReceiptWaypointAddress: {
+        fontFamily: fontFamily.MONOSPACE,
+        fontSize: variables.fontSizeNormal,
+        lineHeight: variables.lineHeightNormal,
+        color: theme.textColorfulBackground,
+    },
+
+    eReceiptGuaranteed: {
+        fontFamily: fontFamily.MONOSPACE,
+        fontSize: variables.fontSizeSmall,
+        lineHeight: variables.lineHeightSmall,
+        color: theme.textColorfulBackground,
+    },
+
+    eReceiptBackgroundContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+
+    eReceiptBackground: {
+        ...sizing.w100,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        minHeight: 540,
+    },
+
+    eReceiptPanel: {
+        ...spacing.p5,
+        ...spacing.pb8,
+        backgroundColor: theme.panelBackground,
+        borderRadius: 20,
+        width: 335,
+    },
+
     loginHeroBody: {
         fontFamily: fontFamily.EXP_NEUE,
         fontSize: variables.fontSizeSignInHeroBody,

src/styles/themes/default.js

@@ -1,7 +1,6 @@
 /* eslint-disable no-unused-vars */
 import colors from '../colors';
 import SCREENS from '../../SCREENS';
-import ROUTES from '../../ROUTES';
 
 const darkTheme = {
     // Figma keys
@@ -83,6 +82,8 @@ const darkTheme = {
     QRLogo: colors.green400,
     starDefaultBG: 'rgb(254, 228, 94)',
     loungeAccessOverlay: colors.blue800,
+    textBrand: colors.green400,
+    panelBackground: colors.green800,
 };
 
 darkTheme.PAGE_BACKGROUND_COLORS = {

src/styles/utilities/spacing.ts

@@ -55,6 +55,10 @@ export default {
         marginHorizontal: -20,
     },
 
+    mv0: {
+        marginVertical: 0,
+    },
+
     mv1: {
         marginVertical: 4,
     },
@@ -167,6 +171,10 @@ export default {
         marginLeft: -32,
     },
 
+    mt0: {
+        marginTop: 0,
+    },
+
     mt1: {
         marginTop: 4,
     },
@@ -239,6 +247,10 @@ export default {
         marginBottom: 32,
     },
 
+    mb10: {
+        marginBottom: 40,
+    },
+
     mb15: {
         marginBottom: 60,
     },