Display displayName instead of primaryLogin on the ReportPreview message

src/components/ReportActionItem/ReportPreview.js

@@ -16,7 +16,6 @@ import ControlSelection from '../../libs/ControlSelection';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import {showContextMenuForReport} from '../ShowContextMenuContext';
 import * as StyleUtils from '../../styles/StyleUtils';
-import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
@@ -95,11 +94,10 @@ const defaultProps = {
 };
 
 function ReportPreview(props) {
-    const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
     const managerEmail = props.iouReport.managerEmail || '';
-    const managerName = ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true);
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
+    const displayingMessage = ReportUtils.getMoneyRequestReportActionMessage(props.iouReport, props.action);
     return (
         <View style={[styles.chatItemMessage]}>
             {_.map(props.action.message, (message, index) => (
@@ -115,26 +113,18 @@ function ReportPreview(props) {
                     focusable
                 >
                     <View style={[styles.flexShrink1]}>
-                        {props.iouReport.hasOutstandingIOU ? (
-                            <Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>
-                                {lodashGet(message, 'html', props.translate('iou.payerOwesAmount', {payer: managerName, amount: reportAmount}))}
-                            </Text>
-                        ) : (
-                            <View style={[styles.flexRow]}>
-                                <Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>
-                                    {lodashGet(message, 'html', props.translate('iou.payerSettled', {amount: reportAmount}))}
-                                </Text>
-                                {!props.iouReport.hasOutstandingIOU && (
-                                    <View style={styles.iouPreviewBoxCheckmark}>
-                                        <Icon
-                                            style={[styles.ml10]}
-                                            src={Expensicons.Checkmark}
-                                            fill={themeColors.iconSuccessFill}
-                                        />
-                                    </View>
-                                )}
-                            </View>
-                        )}
+                        <View style={[styles.flexRow]}>
+                            <Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>{displayingMessage}</Text>
+                            {!props.iouReport.hasOutstandingIOU && (
+                                <View style={styles.iouPreviewBoxCheckmark}>
+                                    <Icon
+                                        style={[styles.ml10]}
+                                        src={Expensicons.Checkmark}
+                                        fill={themeColors.iconSuccessFill}
+                                    />
+                                </View>
+                            )}
+                        </View>
                     </View>
                     <Icon
                         src={Expensicons.ArrowRight}

src/libs/ReportActionsUtils.js

@@ -56,6 +56,14 @@ function isMoneyRequestAction(reportAction) {
     return lodashGet(reportAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.IOU;
 }
 
+/**
+ * @param {Object} reportAction
+ * @returns {Boolean}
+ */
+function isReportPreviewAction(reportAction) {
+    return lodashGet(reportAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW;
+}
+
 /**
  * @param {Object} reportAction
  * @returns {Boolean}
@@ -417,6 +425,16 @@ function getReportPreviewAction(chatReportID, iouReportID) {
     );
 }
 
+/**
+ * Get the iouReportID for a given report action.
+ *
+ * @param {Object} reportAction
+ * @returns {String}
+ */
+function getIOUReportID(reportAction) {
+    return lodashGet(reportAction, 'originalMessage.linkedReportID', '');
+}
+
 function isCreatedTaskReportAction(reportAction) {
     return reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT && _.has(reportAction.originalMessage, 'taskReportID');
 }
@@ -453,5 +471,7 @@ export {
     isTransactionThread,
     getFormattedAmount,
     isSentMoneyReportAction,
+    isReportPreviewAction,
+    getIOUReportID,
     isMessageDeleted,
 };

src/libs/ReportUtils.js

@@ -978,6 +978,37 @@ function getTransactionReportName(reportAction) {
     });
 }
 
+/**
+ * Get money request message for a IOU report
+ *
+ * @param {Object} report
+ * @param {Object} reportAction
+ * @returns  {String}
+ */
+function getMoneyRequestReportActionMessage(report, reportAction) {
+    let formattedAmount = null;
+    let reportHasOutstandingIOU = null;
+    const totalAmount = getMoneyRequestTotal(report);
+    const payerName = isExpenseReport(report) ? getPolicyName(report) : getDisplayNameForParticipant(report.managerEmail, true);
+
+    if (totalAmount > 0) {
+        formattedAmount = CurrencyUtils.convertToDisplayString(totalAmount, report.currency);
+        reportHasOutstandingIOU = report.hasOutstandingIOU;
+    } else {
+        const reportActionMessage = lodashGet(reportAction, 'message[0].html', '');
+
+        // The totalAmount is 0 after Sign in because OpenApp API won't return iouReports if it's paid, so we need to retrieve it from the reportActionMessage
+        // reportActionMessage is in the format of either "payer@mail.com owes $1.00" or "paid $1.00"
+        formattedAmount = _.last(reportActionMessage.split(' '));
+        reportHasOutstandingIOU = Boolean(reportActionMessage.match(/ owes /));
+    }
+
+    if (reportHasOutstandingIOU) {
+        return Localize.translateLocal('iou.payerOwesAmount', {payer: payerName, amount: formattedAmount});
+    }
+    return Localize.translateLocal('iou.payerSettled', {amount: formattedAmount});
+}
+
 /**
  * Get the title for a report.
  *
@@ -2317,4 +2348,5 @@ export {
     getMoneyRequestAction,
     getBankAccountRoute,
     getParentReport,
+    getMoneyRequestReportActionMessage,
 };

src/libs/SidebarUtils.js

@@ -290,13 +290,17 @@ function getOptionData(reportID) {
 
     const login = Str.removeSMSDomain(lodashGet(personalDetail, 'login', ''));
     const formattedLogin = Str.isSMSLogin(login) ? LocalePhoneNumber.formatPhoneNumber(login) : login;
+    const lastReportAction = lastReportActions[report.reportID];
 
     // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
     const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((participantPersonalDetailList || []).slice(0, 10), hasMultipleParticipants);
 
     let lastMessageTextFromReport = '';
     if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml})) {
         lastMessageTextFromReport = `[${Localize.translateLocal('common.attachment')}]`;
+    } else if (ReportActionsUtils.isReportPreviewAction(lastReportAction)) {
+        const iouReport = ReportUtils.getReport(ReportActionsUtils.getIOUReportID(lastReportAction));
+        lastMessageTextFromReport = ReportUtils.getMoneyRequestReportActionMessage(iouReport, lastReportAction);
     } else {
         lastMessageTextFromReport = report ? report.lastMessageText || '' : '';
     }

src/pages/home/report/ReportActionItem.js

@@ -231,7 +231,7 @@ function ReportActionItem(props) {
         } else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW) {
             children = (
                 <ReportPreview
-                    iouReportID={props.action.originalMessage.linkedReportID}
+                    iouReportID={ReportActionsUtils.getIOUReportID(props.action)}
                     chatReportID={props.report.reportID}
                     action={props.action}
                     isHovered={hovered}