diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 88955766c991..0ed4ae665781 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -150,24 +150,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)] ?? []; + + 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; @@ -231,6 +247,74 @@ 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.flex1, + styles.chatItemMessageHeaderSender, + styles.pre, + action, + actorAccountID, + displayName, + icon, + ]); + const hasEmojiStatus = !displayAllActors && status?.emojiCode; const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? ''); const statusText = status?.text ?? ''; @@ -261,18 +345,7 @@ function ReportActionItemSingle({ accessibilityLabel={actorHint} role={CONST.ROLE.BUTTON} > - {personArray?.map((fragment, index) => ( - - ))} + {getHeading()} {!!hasEmojiStatus && (