Show eReceipts for distance requests

src/components/Attachments/AttachmentCarousel/CarouselItem.js

@@ -10,6 +10,7 @@ import Button from '../../Button';
 import AttachmentView from '../AttachmentView';
 import SafeAreaConsumer from '../../SafeAreaConsumer';
 import ReportAttachmentsContext from '../../../pages/home/report/ReportAttachmentsContext';
+import * as AttachmentsPropTypes from '../propTypes';
 
 const propTypes = {
  /** Attachment required information such as the source and file name */
@@ -20,8 +21,8 @@ const propTypes = {
  /** Whether source URL requires authentication */
  isAuthTokenRequired: PropTypes.bool,
 
- /** The source (URL) of the attachment */
- source: PropTypes.string,
+ /** URL to full-sized attachment or SVG function */
+ source: AttachmentsPropTypes.attachmentSourcePropType.isRequired,
 
  /** Additional information about the attachment file */
  file: PropTypes.shape({
@@ -31,6 +32,9 @@ const propTypes = {
 
  /** Whether the attachment has been flagged */
  hasBeenFlagged: PropTypes.bool,
+
+ /** The id of the transaction related to the attachment */
+ transactionID: PropTypes.string,
  }).isRequired,
 
  /** Whether the attachment is currently being viewed in the carousel */
@@ -97,6 +101,7 @@ function CarouselItem({item, isFocused, onPress}) {
  isFocused={isFocused}
  onPress={onPress}
  isUsedInCarousel
+ transactionID={item.transactionID}
  />
  </View>
 

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 {withOnyx} from 'react-native-onyx';
 import styles from '../../../styles/styles';
 import Icon from '../../Icon';
 import * as Expensicons from '../../Icon/Expensicons';
@@ -17,7 +18,10 @@ import AttachmentViewPdf from './AttachmentViewPdf';
 import addEncryptedAuthTokenToURL from '../../../libs/addEncryptedAuthTokenToURL';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import {attachmentViewPropTypes, attachmentViewDefaultProps} from './propTypes';
+import * as TransactionUtils from '../../../libs/TransactionUtils';
+import DistanceEReceipt from '../../DistanceEReceipt';
 import useNetwork from '../../../hooks/useNetwork';
+import ONYXKEYS from '../../../ONYXKEYS';
 
 const propTypes = {
  ...attachmentViewPropTypes,
@@ -38,6 +42,10 @@ const propTypes = {
 
  /** Denotes whether it is a workspace avatar or not */
  isWorkspaceAvatar: PropTypes.bool,
+
+ /** The id of the transaction related to the attachment */
+ // eslint-disable-next-line react/no-unused-prop-types
+ transactionID: PropTypes.string,
 };
 
 const defaultProps = {
@@ -47,6 +55,7 @@ const defaultProps = {
  onToggleKeyboard: () => {},
  containerStyles: [],
  isWorkspaceAvatar: false,
+ transactionID: 0,
 };
 
 function AttachmentView({
@@ -64,9 +73,9 @@ function AttachmentView({
  isFocused,
  isWorkspaceAvatar,
  fallbackSource,
+ transaction,
 }) {
  const [loadComplete, setLoadComplete] = useState(false);
-
  const [imageError, setImageError] = useState(false);
 
  useNetwork({onReconnect: () => setImageError(false)});
@@ -94,7 +103,7 @@ function AttachmentView({
 
  // Check both source and file.name since PDFs dragged into the the text field
  // will appear with a source that is a blob
- if (Str.isPDF(source) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) {
+ if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) {
  const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source;
 
  return (
@@ -113,6 +122,10 @@ function AttachmentView({
  );
  }
 
+ if (TransactionUtils.isDistanceRequest(transaction)) {
+ 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);
@@ -167,4 +180,12 @@ AttachmentView.propTypes = propTypes;
 AttachmentView.defaultProps = defaultProps;
 AttachmentView.displayName = 'AttachmentView';
 
-export default compose(memo, withLocalize)(AttachmentView);
+export default compose(
+ memo,
+ withLocalize,
+ withOnyx({
+ transaction: {
+ key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+ },
+ }),
+)(AttachmentView);

src/components/Attachments/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-const attachmentSourcePropType = PropTypes.oneOfType([PropTypes.string, PropTypes.func]);
+const attachmentSourcePropType = PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number]);
 const attachmentFilePropType = PropTypes.shape({
  name: PropTypes.string,
 });

src/components/DistanceEReceipt.js

@@ -0,0 +1,121 @@
+import React, {useMemo} from 'react';
+import {View, ScrollView} 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';
+import useNetwork from '../hooks/useNetwork';
+import PendingMapView from './MapView/PendingMapView';
+
+const propTypes = {
+ /** The transaction for the distance request */
+ transaction: transactionPropTypes,
+};
+
+const defaultProps = {
+ transaction: {},
+};
+
+function DistanceEReceipt({transaction}) {
+ const {translate} = useLocalize();
+ const {isOffline} = useNetwork();
+ const {thumbnail} = ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename);
+ const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction);
+ const formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : translate('common.tbd');
+ const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || '');
+ const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+ const sortedWaypoints = useMemo(
+ () =>
+ // The waypoint keys are sometimes out of order
+ _.chain(waypoints)
+ .keys()
+ .sort((keyA, keyB) => TransactionUtils.getWaypointIndex(keyA) - TransactionUtils.getWaypointIndex(keyB))
+ .map((key) => ({[key]: waypoints[key]}))
+ .reduce((result, obj) => _.assign(result, obj), {})
+ .value(),
+ [waypoints],
+ );
+ return (
+ <View style={[styles.flex1, styles.alignItemsCenter]}>
+ <ScrollView
+ style={styles.w100}
+ contentContainerStyle={[styles.flexGrow1, styles.justifyContentCenter, styles.alignItemsCenter]}
+ >
+ <View style={styles.eReceiptPanel}>
+ <EReceiptBackground
+ style={styles.eReceiptBackground}
+ pointerEvents="none"
+ />
+ <View style={[styles.moneyRequestViewImage, styles.mh0, styles.mt0, styles.mb5, styles.borderNone]}>
+ {isOffline || !thumbnailSource ? (
+ <PendingMapView />
+ ) : (
+ <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(sortedWaypoints, (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>
+ </ScrollView>
+ </View>
+ );
+}
+
+export default DistanceEReceipt;
+DistanceEReceipt.displayName = 'DistanceEReceipt';
+DistanceEReceipt.propTypes = propTypes;
+DistanceEReceipt.defaultProps = defaultProps;

src/languages/en.ts

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

src/languages/es.ts

@@ -2276,4 +2276,7 @@ export default {
  selectSuggestedAddress: 'Por favor, selecciona una dirección sugerida',
  },
  },
+ eReceipt: {
+ guaranteed: 'eRecibo garantizado',
+ },
 } satisfies EnglishTranslation;

src/libs/DistanceRequestUtils.js

@@ -89,8 +89,7 @@ const getDistanceMerchant = (hasRoute, distanceInMeters, unit, rate, currency, t
  const distanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.miles') : translate('common.kilometers');
  const singularDistanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.mile') : translate('common.kilometer');
  const unitString = distanceInUnits === 1 ? singularDistanceUnit : distanceUnit;
-
- const ratePerUnit = PolicyUtils.getUnitRateValue({rate}, toLocaleDigit);
+ const ratePerUnit = rate ? PolicyUtils.getUnitRateValue({rate}, toLocaleDigit) : translate('common.tbd');
  const currencySymbol = CurrencyUtils.getCurrencySymbol(currency) || `${currency} `;
 
  return `${distanceInUnits} ${unitString} @ ${currencySymbol}${ratePerUnit} / ${singularDistanceUnit}`;

src/libs/actions/IOU.js

@@ -2247,9 +2247,12 @@ function setMoneyRequestReceipt(receiptPath, receiptSource) {
  Onyx.merge(ONYXKEYS.IOU, {receiptPath, receiptSource, merchant: ''});
 }
 
-function createEmptyTransaction() {
+function setUpDistanceTransaction() {
  const transactionID = NumberUtils.rand64();
- Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {transactionID});
+ Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {
+ transactionID,
+ comment: {type: CONST.TRANSACTION.TYPE.CUSTOM_UNIT, customUnit: {name: CONST.CUSTOM_UNITS.NAME_DISTANCE}},
+ });
  Onyx.merge(ONYXKEYS.IOU, {transactionID});
 }
 
@@ -2325,7 +2328,7 @@ export {
  setMoneyRequestBillable,
  setMoneyRequestParticipants,
  setMoneyRequestReceipt,
- createEmptyTransaction,
+ setUpDistanceTransaction,
  navigateToNextPage,
  updateDistanceRequest,
  replaceReceipt,

src/pages/iou/NewDistanceRequestPage.js

@@ -49,7 +49,7 @@ function NewDistanceRequestPage({iou, report, route}) {
  if (iou.transactionID) {
  return;
  }
- IOU.createEmptyTransaction();
+ IOU.setUpDistanceTransaction();
  }, [iou.transactionID]);
 
  return (

src/styles/styles.js

@@ -26,6 +26,7 @@ import * as Browser from '../libs/Browser';
 import cursor from './utilities/cursor';
 import userSelect from './utilities/userSelect';
 import textUnderline from './utilities/textUnderline';
+import colors from './colors';
 
 // touchCallout is an iOS safari only property that controls the display of the callout information when you touch and hold a target
 const touchCalloutNone = Browser.isMobileSafari() ? {WebkitTouchCallout: 'none'} : {};
@@ -3249,6 +3250,59 @@ const styles = (theme) => ({
  lineHeight: variables.lineHeightXXLarge,
  },
 
+ eReceiptAmount: {
+ ...headlineFont,
+ fontSize: variables.fontSizeXXXLarge,
+ lineHeight: variables.lineHeightXXXLarge,
+ color: colors.green400,
+ },
+
+ eReceiptMerchant: {
+ fontFamily: fontFamily.EXP_NEUE,
+ fontSize: variables.fontSizeXLarge,
+ lineHeight: variables.lineHeightXXLarge,
+ color: theme.text,
+ },
+
+ eReceiptWaypointTitle: {
+ fontFamily: fontFamily.EXP_NEUE,
+ fontSize: variables.fontSizeSmall,
+ lineHeight: variables.lineHeightSmall,
+ color: colors.green400,
+ },
+
+ 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,
+ },
+
+ eReceiptBackground: {
+ ...sizing.w100,
+ borderRadius: 20,
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ height: 540,
+ },
+
+ eReceiptPanel: {
+ ...spacing.p5,
+ ...spacing.pb8,
+ ...spacing.m5,
+ backgroundColor: colors.green800,
+ 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