From e81f87e97491897262c55a7751c290d5f0b3c538 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 19 Sep 2024 12:26:47 +0100
Subject: [PATCH] Match report header to report preview avatars

---
 src/libs/ReportUtils.ts                          |  4 ++--
 src/pages/home/report/ReportActionItemSingle.tsx | 15 +++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 87dddb096a0c..9621ac5acd06 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1605,7 +1605,7 @@ function hasOnlyNonReimbursableTransactions(iouReportID: string | undefined): bo
  */
 function isOneTransactionReport(reportID: string): boolean {
     const reportActions = allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`] ?? ([] as ReportAction[]);
-    return ReportActionsUtils.getOneTransactionThreadReportID(reportID, reportActions) !== null;
+    return !!ReportActionsUtils.getOneTransactionThreadReportID(reportID, reportActions);
 }
 
 /*
@@ -6657,7 +6657,7 @@ function shouldReportShowSubscript(report: OnyxEntry<Report>): boolean {
         return true;
     }
 
-    if (isExpenseReport(report) && isOneTransactionReport(report?.reportID ?? '-1')) {
+    if (isExpenseReport(report)) {
         return true;
     }
 
diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index b537aee5f9b2..0c1367646d1a 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -84,13 +84,13 @@ function ReportActionItemSingle({
     const actorAccountID = ReportUtils.getReportActionActorAccountID(action, iouReport);
     const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`);
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
-
+    const icons = ReportUtils.getIcons(iouReport ?? null, personalDetails);
     const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID ?? -1] ?? {};
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     let actorHint = (login || (displayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
     const isTripRoom = ReportUtils.isTripRoom(report);
     const isReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW;
-    const displayAllActors = isReportPreviewAction && !isTripRoom && ReportUtils.isIOUReport(iouReport ?? null);
+    const displayAllActors = isReportPreviewAction && !isTripRoom && ReportUtils.isIOUReport(iouReport ?? null) && icons.length > 1;
     const isInvoiceReport = ReportUtils.isInvoiceReport(iouReport ?? null);
     const isWorkspaceActor = isInvoiceReport || (ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors));
     const ownerAccountID = iouReport?.ownerAccountID ?? action?.childOwnerAccountID;
@@ -134,7 +134,6 @@ function ReportActionItemSingle({
             const secondaryAccountId = ownerAccountID === actorAccountID || isInvoiceReport ? managerID : ownerAccountID;
             const secondaryUserAvatar = personalDetails?.[secondaryAccountId ?? -1]?.avatar ?? FallbackAvatar;
             const secondaryDisplayName = ReportUtils.getDisplayNameForParticipant(secondaryAccountId);
-
             secondaryAvatar = {
                 source: secondaryUserAvatar,
                 type: CONST.ICON_TYPE_AVATAR,
@@ -175,7 +174,7 @@ function ReportActionItemSingle({
               ]
             : action?.person ?? [];
 
-        if (displayAllActors && secondaryAvatar?.name) {
+        if (displayAllActors) {
             return [
                 ...baseArray,
                 {
@@ -215,7 +214,7 @@ function ReportActionItemSingle({
             if (displayAllActors) {
                 return (
                     <MultipleAvatars
-                        icons={[icon, secondaryAvatar]}
+                        icons={icons}
                         isInReportAction
                         shouldShowTooltip
                         secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.hoverComponentBG) : undefined]}
@@ -225,8 +224,8 @@ function ReportActionItemSingle({
             if (shouldShowSubscriptAvatar) {
                 return (
                     <SubscriptAvatar
-                        mainAvatar={icon}
-                        secondaryAvatar={secondaryAvatar}
+                        mainAvatar={icons[0]}
+                        secondaryAvatar={icons[1]}
                         noMargin
                     />
                 );
@@ -258,11 +257,11 @@ function ReportActionItemSingle({
         icon,
         styles.actionAvatar,
         fallbackIcon,
-        secondaryAvatar,
         StyleUtils,
         theme.appBG,
         theme.hoverComponentBG,
         isHovered,
+        icons,
     ]);
 
     const getHeading = useMemo(() => {