Merge pull request #25613 from Expensify/andrewli-polishreceipts

[CP Staging] Polish displaying receipts in chat

src/components/ReportActionItem/MoneyRequestPreview.js

@@ -254,7 +254,7 @@ function MoneyRequestPreview(props) {
                                 </View>
                             )}
                         </View>
-                        {requestMerchant && (
+                        {!_.isEmpty(requestMerchant) && (
                             <View style={[styles.flexRow]}>
                                 <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh16]}>{requestMerchant}</Text>
                             </View>

src/components/ReportActionItem/ReportActionItemImages.js

@@ -35,6 +35,15 @@ const defaultProps = {
     isHovered: false,
 };
 
+/**
+ * This component displays a row of images in a report action item like a card, such
+ * as report previews or money request previews which contain receipt images. The maximum of images
+ * shown in this row is dictated by the size prop, which, if not passed, is just the number of images.
+ * Otherwise, if size is passed and the number of images is over size, we show a small overlay on the
+ * last image of how many additional images there are. If passed, total prop can be used to change how this
+ * additional number when subtracted from size.
+ */
+
 function ReportActionItemImages({images, size, total, isHovered}) {
     const numberOfShownImages = size || images.length;
     const shownImages = images.slice(0, size);

src/components/ReportActionItem/ReportPreview.js

@@ -105,10 +105,10 @@ function ReportPreview(props) {
     const numberOfRequests = ReportActionUtils.getNumberOfMoneyRequests(props.action);
     const moneyRequestComment = lodashGet(props.action, 'childLastMoneyRequestComment', '');
 
-    const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(props.iouReport);
+    const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(props.iouReportID);
     const numberOfScanningReceipts = _.filter(transactionsWithReceipts, (transaction) => TransactionUtils.isReceiptBeingScanned(transaction)).length;
     const hasReceipts = transactionsWithReceipts.length > 0;
-    const isScanning = hasReceipts && ReportUtils.areAllRequestsBeingSmartScanned(props.iouReport, props.action);
+    const isScanning = hasReceipts && ReportUtils.areAllRequestsBeingSmartScanned(props.iouReportID, props.action);
     const lastThreeTransactionsWithReceipts = ReportUtils.getReportPreviewDisplayTransactions(props.action);
 
     const hasOnlyOneReceiptRequest = numberOfRequests === 1 && hasReceipts;

src/libs/ReportUtils.js

@@ -1253,12 +1253,11 @@ function getTransactionDetails(transaction) {
 /**
  * Gets all transactions on an IOU report with a receipt
  *
- * @param {Object|null} iouReport
+ * @param {Object|null} iouReportID
  * @returns {[Object]}
  */
-function getTransactionsWithReceipts(iouReport) {
-    const reportID = lodashGet(iouReport, 'reportID');
-    const reportActions = ReportActionsUtils.getAllReportActions(reportID);
+function getTransactionsWithReceipts(iouReportID) {
+    const reportActions = ReportActionsUtils.getAllReportActions(iouReportID);
     return _.reduce(
         reportActions,
         (transactions, action) => {
@@ -1281,17 +1280,17 @@ function getTransactionsWithReceipts(iouReport) {
  * or as soon as one receipt request is done scanning, we have at least one
  * "ready" money request, and we remove this indicator to show the partial report total.
  *
- * @param {Object|null} iouReport
+ * @param {Object|null} iouReportID
  * @param {Object|null} reportPreviewAction the preview action associated with the IOU report
  * @returns {Boolean}
  */
-function areAllRequestsBeingSmartScanned(iouReport, reportPreviewAction) {
-    const transactions = getTransactionsWithReceipts(iouReport);
+function areAllRequestsBeingSmartScanned(iouReportID, reportPreviewAction) {
+    const transactionsWithReceipts = getTransactionsWithReceipts(iouReportID);
     // If we have more requests than requests with receipts, we have some manual requests
-    if (ReportActionsUtils.getNumberOfMoneyRequests(reportPreviewAction) > transactions.length) {
+    if (ReportActionsUtils.getNumberOfMoneyRequests(reportPreviewAction) > transactionsWithReceipts.length) {
         return false;
     }
-    return _.all(transactions, (transaction) => TransactionUtils.isReceiptBeingScanned(transaction));
+    return _.all(transactionsWithReceipts, (transaction) => TransactionUtils.isReceiptBeingScanned(transaction));
 }
 
 /**

src/libs/actions/IOU.js

@@ -426,6 +426,8 @@ function getMoneyRequestInformation(report, participant, comment, amount, curren
         optimisticTransaction.transactionID,
         '',
         iouReport.reportID,
+        false,
+        false,
         receiptObject,
     );