Merge pull request #18981 from Expensify/vit-showIOUPreviewForSendMoneyFlow

Show IOU preview for send money flow

(cherry picked from commit 04cddaf)

Author: Julesssss

src/components/ReportActionItem/IOUPreview.js

@@ -146,7 +146,7 @@ const IOUPreview = (props) => {
     const moneyRequestAction = ReportUtils.getMoneyRequestAction(props.action);
 
     // If props.action is undefined then we are displaying within IOUDetailsModal and should use the full report amount
-    const requestAmount = props.isIOUAction ? moneyRequestAction.total : ReportUtils.getMoneyRequestTotal(props.iouReport);
+    const requestAmount = props.isIOUAction ? moneyRequestAction.amount : ReportUtils.getMoneyRequestTotal(props.iouReport);
     const requestCurrency = props.isIOUAction ? moneyRequestAction.currency : props.iouReport.currency;
     const requestComment = Str.htmlDecode(moneyRequestAction.comment).trim();
 

src/components/ReportActionItem/MoneyRequestAction.js

@@ -19,7 +19,7 @@ import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as Report from '../../libs/actions/Report';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import * as CurrencyUtils from '../../libs/CurrencyUtils';
+import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 
 const propTypes = {
     /** All the data of the action */
@@ -99,8 +99,8 @@ const MoneyRequestAction = (props) => {
             const formattedUserLogins = _.map(participants, (login) => OptionsListUtils.addSMSDomainIfPhoneNumber(login).toLowerCase());
             const thread = ReportUtils.buildOptimisticChatReport(
                 formattedUserLogins,
-                props.translate('iou.threadReportName', {
-                    formattedAmount: CurrencyUtils.convertToDisplayString(lodashGet(props.action, 'originalMessage.amount', 0), lodashGet(props.action, 'originalMessage.currency', '')),
+                props.translate(ReportActionsUtils.isSentMoneyReportAction(props.action) ? 'iou.threadSentMoneyReportName' : 'iou.threadRequestReportName', {
+                    formattedAmount: ReportActionsUtils.getFormattedAmount(props.action),
                     comment: props.action.originalMessage.comment,
                 }),
                 '',

src/languages/en.js

@@ -333,7 +333,8 @@ export default {
         payerSettled: ({amount}) => `settled up ${amount}`,
         noReimbursableExpenses: 'This report has an invalid amount',
         pendingConversionMessage: "Total will update when you're back online",
-        threadReportName: ({formattedAmount, comment}) => `${formattedAmount} request${comment ? ` for ${comment}` : ''}`,
+        threadRequestReportName: ({formattedAmount, comment}) => `${formattedAmount} request${comment ? ` for ${comment}` : ''}`,
+        threadSentMoneyReportName: ({formattedAmount, comment}) => `${formattedAmount} sent${comment ? ` for ${comment}` : ''}`,
         error: {
             invalidSplit: 'Split amounts do not equal total amount',
             other: 'Unexpected error, please try again later',

src/languages/es.js

@@ -332,7 +332,8 @@ export default {
         payerSettled: ({amount}) => `pagado ${amount}`,
         noReimbursableExpenses: 'El monto de este informe es inválido',
         pendingConversionMessage: 'El total se actualizará cuando estés online',
-        threadReportName: ({formattedAmount, comment}) => `Solicitud de ${formattedAmount}${comment ? ` para ${comment}` : ''}`,
+        threadRequestReportName: ({formattedAmount, comment}) => `Solicitud de ${formattedAmount}${comment ? ` para ${comment}` : ''}`,
+        threadSentMoneyReportName: ({formattedAmount, comment}) => `${formattedAmount} enviado${comment ? ` para ${comment}` : ''}`,
         error: {
             invalidSplit: 'La suma de las partes no equivale al monto total',
             other: 'Error inesperado, por favor inténtalo más tarde',

src/libs/ReportActionsUtils.js

@@ -9,6 +9,7 @@ import * as CollectionUtils from './CollectionUtils';
 import CONST from '../CONST';
 import ONYXKEYS from '../ONYXKEYS';
 import Log from './Log';
+import * as CurrencyUtils from './CurrencyUtils';
 import isReportMessageAttachment from './isReportMessageAttachment';
 
 const allReportActions = {};
@@ -61,16 +62,47 @@ function getParentReportAction(report) {
     return lodashGet(allReportActions, [report.parentReportID, report.parentReportActionID], {});
 }
 
+/**
+ * Determines if the given report action is sent money report action by checking for 'pay' type and presence of IOUDetails object.
+ *
+ * @param {Object} reportAction
+ * @returns {Boolean}
+ */
+function isSentMoneyReportAction(reportAction) {
+    return (
+        reportAction &&
+        reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU &&
+        lodashGet(reportAction, 'originalMessage.type') === CONST.IOU.REPORT_ACTION_TYPE.PAY &&
+        _.has(reportAction.originalMessage, 'IOUDetails')
+    );
+}
+
+/**
+ * Returns the formatted amount of a money request. The request and money sent (from send money flow) have
+ * currency and amount in IOUDetails object.
+ *
+ * @param {Object} reportAction
+ * @returns {Number}
+ */
+function getFormattedAmount(reportAction) {
+    return lodashGet(reportAction, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.PAY && lodashGet(reportAction, 'originalMessage.IOUDetails', false)
+        ? CurrencyUtils.convertToDisplayString(lodashGet(reportAction, 'originalMessage.IOUDetails.amount', 0), lodashGet(reportAction, 'originalMessage.IOUDetails.currency', ''))
+        : CurrencyUtils.convertToDisplayString(lodashGet(reportAction, 'originalMessage.amount', 0), lodashGet(reportAction, 'originalMessage.currency', ''));
+}
+
 /**
  * Returns whether the thread is a transaction thread, which is any thread with IOU parent
- * report action of type create.
+ * report action from requesting money (type - create) or from sending money (type - pay with IOUDetails field)
  *
  * @param {Object} parentReportAction
  * @returns {Boolean}
  */
 function isTransactionThread(parentReportAction) {
+    const originalMessage = lodashGet(parentReportAction, 'originalMessage', {});
     return (
-        parentReportAction && parentReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && lodashGet(parentReportAction, 'originalMessage.type') === CONST.IOU.REPORT_ACTION_TYPE.CREATE
+        parentReportAction &&
+        parentReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU &&
+        (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.CREATE || (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.PAY && originalMessage.IOUDetails))
     );
 }
 
@@ -371,4 +403,6 @@ export {
     isCreatedTaskReportAction,
     getParentReportAction,
     isTransactionThread,
+    getFormattedAmount,
+    isSentMoneyReportAction,
 };

src/libs/ReportUtils.js

@@ -971,17 +971,17 @@ function getDisplayNamesWithTooltips(participants, isMultipleParticipantReport)
  */
 function getMoneyRequestAction(reportAction = {}) {
     const originalMessage = lodashGet(reportAction, 'originalMessage', {});
-    let total = originalMessage.amount || 0;
+    let amount = originalMessage.amount || 0;
     let currency = originalMessage.currency || CONST.CURRENCY.USD;
     let comment = originalMessage.comment || '';
 
     if (_.has(originalMessage, 'IOUDetails')) {
-        total = lodashGet(originalMessage, 'IOUDetails.amount', 0);
+        amount = lodashGet(originalMessage, 'IOUDetails.amount', 0);
         currency = lodashGet(originalMessage, 'IOUDetails.currency', CONST.CURRENCY.USD);
         comment = lodashGet(originalMessage, 'IOUDetails.comment', '');
     }
 
-    return {total, currency, comment};
+    return {amount, currency, comment};
 }
 
 /**
@@ -1055,8 +1055,8 @@ function getMoneyRequestReportName(report) {
  * @returns {String}
  */
 function getTransactionReportName(reportAction) {
-    return Localize.translateLocal('iou.threadReportName', {
-        formattedAmount: CurrencyUtils.convertToDisplayString(lodashGet(reportAction, 'originalMessage.amount', 0), lodashGet(reportAction, 'originalMessage.currency', '')),
+    return Localize.translateLocal(ReportActionsUtils.isSentMoneyReportAction(reportAction) ? 'iou.threadSentMoneyReportName' : 'iou.threadRequestReportName', {
+        formattedAmount: ReportActionsUtils.getFormattedAmount(reportAction),
         comment: lodashGet(reportAction, 'originalMessage.comment'),
     });
 }

src/pages/home/report/ReportActionItem.js

@@ -186,13 +186,17 @@ class ReportActionItem extends Component {
      */
     renderItemContent(hovered = false) {
         let children;
+        const originalMessage = lodashGet(this.props.action, 'originalMessage', {});
+        // Show the IOUPreview for when request was created, bill was split or money was sent
         if (
             this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU &&
-            this.props.action.originalMessage.type !== CONST.IOU.REPORT_ACTION_TYPE.DELETE &&
-            this.props.action.originalMessage.type !== CONST.IOU.REPORT_ACTION_TYPE.PAY
+            originalMessage &&
+            (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.CREATE ||
+                originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.SPLIT ||
+                (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.PAY && originalMessage.IOUDetails))
         ) {
             // There is no single iouReport for bill splits, so only 1:1 requests require an iouReportID
-            const iouReportID = this.props.action.originalMessage.IOUReportID ? this.props.action.originalMessage.IOUReportID.toString() : '0';
+            const iouReportID = originalMessage.IOUReportID ? originalMessage.IOUReportID.toString() : '0';
 
             children = (
                 <MoneyRequestAction