diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 40749c525a38a..3bb330adb62f4 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -1686,7 +1686,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); } /* @@ -2428,7 +2428,7 @@ function getIcons( // For one transaction IOUs, display a simplified report icon if (isOneTransactionReport(report?.reportID ?? '-1')) { - return [ownerIcon]; + return [managerIcon]; } return isManager ? [managerIcon, ownerIcon] : [ownerIcon, managerIcon]; diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index fa8230640c8e8..befc2acb035e4 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -96,7 +96,8 @@ function ReportActionItemSingle({ // 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 displayAllActors = isReportPreviewAction && !isTripRoom && !ReportUtils.isPolicyExpenseChat(report); + const icons = ReportUtils.getIcons(iouReport ?? null, personalDetails); + const displayAllActors = isReportPreviewAction && !isTripRoom && !ReportUtils.isPolicyExpenseChat(report) && (icons ? icons.length > 1 : true); const isInvoiceReport = ReportUtils.isInvoiceReport(iouReport ?? null); const isWorkspaceActor = isInvoiceReport || (ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors)); @@ -151,24 +152,40 @@ function ReportActionItemSingle({ } else { secondaryAvatar = {name: '', source: '', type: 'avatar'}; } - const icon = { - source: avatarSource ?? FallbackAvatar, - type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR, - name: primaryDisplayName ?? '', - id: avatarId, - }; + const icon = useMemo( + () => ({ + source: avatarSource ?? FallbackAvatar, + type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR, + name: primaryDisplayName ?? '', + id: avatarId, + }), + [avatarSource, isWorkspaceActor, primaryDisplayName, avatarId], + ); // Since the display name for a report action message is delivered with the report history as an array of fragments // we'll need to take the displayName from personal details and have it be in the same format for now. Eventually, // we should stop referring to the report history items entirely for this information. - const personArray = displayName - ? [ - { - type: 'TEXT', - text: displayName, - }, - ] - : action?.person; + const personArray = useMemo(() => { + const baseArray = displayName + ? [ + { + type: 'TEXT', + text: displayName, + }, + ] + : [action?.person?.at(0)].filter(Boolean) ?? []; + + if (displayAllActors && secondaryAvatar?.name) { + return [ + ...baseArray, + { + type: 'TEXT', + text: secondaryAvatar?.name ?? '', + }, + ]; + } + return baseArray; + }, [displayName, action?.person, displayAllActors, secondaryAvatar?.name]); const reportID = report?.reportID; const iouReportID = iouReport?.reportID; @@ -232,6 +249,77 @@ function ReportActionItemSingle({ ); }; + + const getHeading = useCallback(() => { + return () => { + if (displayAllActors && personArray.length === 2 && isReportPreviewAction) { + return ( + + + + {` & `} + + + + ); + } + return ( + + {personArray.map((fragment, index) => ( + + ))} + + ); + }; + }, [ + displayAllActors, + secondaryAvatar, + isReportPreviewAction, + personArray, + styles.flexRow, + styles.flexShrink0, + styles.flexShrink1, + styles.flex1, + styles.chatItemMessageHeaderSender, + styles.pre, + styles.overflowHidden, + action, + actorAccountID, + displayName, + icon, + ]); + const hasEmojiStatus = !displayAllActors && status?.emojiCode; const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? ''); const statusText = status?.text ?? ''; @@ -262,18 +350,7 @@ function ReportActionItemSingle({ accessibilityLabel={actorHint} role={CONST.ROLE.BUTTON} > - {personArray?.map((fragment, index) => ( - - ))} + {getHeading()} {!!hasEmojiStatus && (