Merge pull request #24556 from Expensify/tgolen-surface-distance-requ…

…ests [No QA] Allow distance requests to be viewed
Expensify · Aug 23, 2023 · ebb6d33 · ebb6d33
2 parents 4b345be + 50599fe
commit ebb6d33
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 57 deletions.
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
@@ -22,6 +22,7 @@ import useNetwork from '../hooks/useNetwork';
 import useLocalize from '../hooks/useLocalize';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
+import transactionPropTypes from './transactionPropTypes';
 import ScreenWrapper from './ScreenWrapper';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import * as ErrorUtils from '../libs/ErrorUtils';
@@ -38,28 +39,7 @@ const propTypes = {
     transactionID: PropTypes.string,
 
     /** The optimistic transaction for this request */
-    transaction: PropTypes.shape({
-        /** The transactionID of this request */
-        transactionID: PropTypes.string,
-
-        /** The comment object on the transaction */
-        comment: PropTypes.shape({
-            /** The waypoints defining the distance request */
-            waypoints: PropTypes.shape({
-                /** The latitude of the waypoint */
-                lat: PropTypes.number,
-
-                /** The longitude of the waypoint */
-                lng: PropTypes.number,
-
-                /** The address of the waypoint */
-                address: PropTypes.string,
-            }),
-        }),
-
-        /** Server side errors keyed by microtime */
-        errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
-    }),
+    transaction: transactionPropTypes,
 
     /** Data about Mapbox token for calling Mapbox API */
     mapboxAccessToken: PropTypes.shape({

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -31,6 +31,7 @@ import refPropTypes from '../refPropTypes';
 import PressableWithFeedback from '../Pressable/PressableWithoutFeedback';
 import * as ReceiptUtils from '../../libs/ReceiptUtils';
 import ReportActionItemImages from './ReportActionItemImages';
+import transactionPropTypes from '../transactionPropTypes';
 
 const propTypes = {
     /** The active IOUReport, used for Onyx subscription */
@@ -90,6 +91,9 @@ const propTypes = {
         }),
     ),
 
+    /** The transaction attached to the action.message.iouTransactionID */
+    transaction: transactionPropTypes,
+
     /** Session info for the currently logged in user. */
     session: PropTypes.shape({
         /** Currently logged in user email */
@@ -99,9 +103,6 @@ const propTypes = {
     /** Information about the user accepting the terms for payments */
     walletTerms: walletTermsPropTypes,
 
-    /** Pending action, if any */
-    pendingAction: PropTypes.oneOf(_.values(CONST.RED_BRICK_ROAD_PENDING_ACTION)),
-
     /** Whether or not an IOU report contains money requests in a different currency
      * that are either created or cancelled offline, and thus haven't been converted to the report's currency yet
      */
@@ -118,12 +119,12 @@ const defaultProps = {
     checkIfContextMenuActive: () => {},
     containerStyles: [],
     walletTerms: {},
-    pendingAction: null,
     isHovered: false,
     personalDetails: {},
     session: {
         email: null,
     },
+    transaction: {},
     shouldShowPendingConversionMessage: false,
 };
 
@@ -145,10 +146,16 @@ function MoneyRequestPreview(props) {
     // Pay button should only be visible to the manager of the report.
     const isCurrentUserManager = managerID === sessionAccountID;
 
-    const transaction = TransactionUtils.getLinkedTransaction(props.action);
-    const {amount: requestAmount, currency: requestCurrency, comment: requestComment, merchant: requestMerchant} = ReportUtils.getTransactionDetails(transaction);
-    const hasReceipt = TransactionUtils.hasReceipt(transaction);
-    const isScanning = hasReceipt && TransactionUtils.isReceiptBeingScanned(transaction);
+    const {amount: requestAmount, currency: requestCurrency, comment: requestComment, merchant: requestMerchant} = ReportUtils.getTransactionDetails(props.transaction);
+    let description = requestComment;
+    const hasReceipt = TransactionUtils.hasReceipt(props.transaction);
+    const isScanning = hasReceipt && TransactionUtils.isReceiptBeingScanned(props.transaction);
+    const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction);
+
+    // On a distance request the merchant of the transaction will be used for the description since that's where it's stored in the database
+    if (isDistanceRequest) {
+        description = props.transaction.merchant;
+    }
 
     const getSettledMessage = () => {
         switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
@@ -168,6 +175,10 @@ function MoneyRequestPreview(props) {
     };
 
     const getPreviewHeaderText = () => {
+        if (isDistanceRequest) {
+            return props.translate('tabSelector.distance');
+        }
+
         if (isScanning) {
             return props.translate('common.receipt');
         }
@@ -186,6 +197,10 @@ function MoneyRequestPreview(props) {
     };
 
     const getDisplayAmountText = () => {
+        if (isDistanceRequest) {
+            return CurrencyUtils.convertToDisplayString(TransactionUtils.getAmount(props.transaction), props.transaction.currency);
+        }
+
         if (isScanning) {
             return props.translate('iou.receiptScanning');
         }
@@ -196,7 +211,6 @@ function MoneyRequestPreview(props) {
     const childContainer = (
         <View>
             <OfflineWithFeedback
-                pendingAction={props.pendingAction}
                 errors={props.walletTerms.errors}
                 onClose={() => {
                     PaymentMethods.clearWalletTermsError();
@@ -208,7 +222,7 @@ function MoneyRequestPreview(props) {
                 <View style={[styles.moneyRequestPreviewBox, isScanning ? styles.reportPreviewBoxHoverBorder : undefined, ...props.containerStyles]}>
                     {hasReceipt && (
                         <ReportActionItemImages
-                            images={[ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename)]}
+                            images={[ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename)]}
                             isHovered={isScanning}
                         />
                     )}
@@ -264,7 +278,7 @@ function MoneyRequestPreview(props) {
                                 {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
                                     <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
                                 )}
-                                {!_.isEmpty(requestComment) && <Text style={[styles.mt1, styles.colorMuted]}>{requestComment}</Text>}
+                                {!_.isEmpty(description) && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
                             </View>
                             {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
                                 <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
@@ -320,6 +334,9 @@ export default compose(
         session: {
             key: ONYXKEYS.SESSION,
         },
+        transaction: {
+            key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0}`,
+        },
         walletTerms: {
             key: ONYXKEYS.WALLET_TERMS,
         },

diff --git a/src/components/transactionPropTypes.js b/src/components/transactionPropTypes.js
@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types';
+import _ from 'underscore';
+import CONST from '../CONST';
 
 export default PropTypes.shape({
     /** The transaction id */
@@ -28,11 +30,35 @@ export default PropTypes.shape({
     /** The edited merchant name */
     modifiedMerchant: PropTypes.string,
 
-    /** The comment added to the transaction */
+    /** The comment object on the transaction */
     comment: PropTypes.shape({
+        /** The text of the comment */
         comment: PropTypes.string,
+
+        /** The waypoints defining the distance request */
+        waypoints: PropTypes.shape({
+            /** The latitude of the waypoint */
+            lat: PropTypes.number,
+
+            /** The longitude of the waypoint */
+            lng: PropTypes.number,
+
+            /** The address of the waypoint */
+            address: PropTypes.string,
+        }),
     }),
 
+    /** The type of transaction */
+    type: PropTypes.oneOf(_.values(CONST.TRANSACTION.TYPE)),
+
+    /** Custom units attached to the transaction */
+    customUnits: PropTypes.arrayOf(
+        PropTypes.shape({
+            /** The name of the custom unit */
+            name: PropTypes.string,
+        }),
+    ),
+
     /** The original currency of the transaction */
     currency: PropTypes.string,
 
@@ -41,8 +67,11 @@ export default PropTypes.shape({
 
     /** The receipt object associated with the transaction */
     receipt: PropTypes.shape({
-        receiptID: PropTypes.string,
+        receiptID: PropTypes.number,
         source: PropTypes.string,
         state: PropTypes.string,
     }),
+
+    /** Server side errors keyed by microtime */
+    errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
 });
diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js
@@ -225,6 +225,7 @@ function getCreated(transaction) {
 }
 
 /**
+ * Get the transactions related to a report preview with receipts
  * Get the details linked to the IOU reportAction
  *
  * @param {Object} reportAction
@@ -276,9 +277,10 @@ function validateWaypoints(waypoints) {
 
 /*
  * @param {Object} transaction
- * @param {String} transaction.type
- * @param {Object} [transaction.customUnit]
- * @param {String} [transaction.customUnit.name]
+ * @param {Object} transaction.comment
+ * @param {String} transaction.comment.type
+ * @param {Object} [transaction.comment.customUnit]
+ * @param {String} [transaction.comment.customUnit.name]
  * @returns {Boolean}
  */
 function isDistanceRequest(transaction) {

diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
@@ -18,6 +18,7 @@ import * as ValidationUtils from '../../libs/ValidationUtils';
 import ROUTES from '../../ROUTES';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
+import transactionPropTypes from '../../components/transactionPropTypes';
 
 const propTypes = {
     /** The transactionID of the IOU */
@@ -35,25 +36,7 @@ const propTypes = {
     }),
 
     /** The optimistic transaction for this request */
-    transaction: PropTypes.shape({
-        /** The transactionID of this request */
-        transactionID: PropTypes.string,
-
-        /** The comment object on the transaction */
-        comment: PropTypes.shape({
-            /** The waypoints defining the distance request */
-            waypoints: PropTypes.shape({
-                /** The latitude of the waypoint */
-                lat: PropTypes.number,
-
-                /** The longitude of the waypoint */
-                lng: PropTypes.number,
-
-                /** The address of the waypoint */
-                address: PropTypes.string,
-            }),
-        }),
-    }),
+    transaction: transactionPropTypes,
 
     /** Information about the network */
     network: networkPropTypes.isRequired,