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 && (