[Avatars - Reports] If a report contains the expenses of one person, only display their avatar + fix isOneTransactionReport

__mocks__/reportData/personalDetails.ts

@@ -2,7 +2,7 @@ import type {PersonalDetailsList} from '@src/types/onyx';
 
 const usersIDs = [15593135, 51760358, 26502375] as const;
 
-const personalDetails: PersonalDetailsList = {
+const personalDetails = {
     [usersIDs[0]]: {
         accountID: usersIDs[0],
         avatar: '@assets/images/avatars/user/default-avatar_1.svg',
@@ -63,6 +63,6 @@ const personalDetails: PersonalDetailsList = {
         phoneNumber: '33333333',
         validated: true,
     },
-};
+} satisfies PersonalDetailsList;
 
 export default personalDetails;

src/components/AvatarWithDisplayName.tsx

@@ -4,6 +4,7 @@ import type {ColorValue, TextStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import useOnyx from '@hooks/useOnyx';
+import type {ReportAvatarDetails} from '@hooks/useReportAvatarDetails';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -39,6 +40,7 @@ import {FallbackAvatar} from './Icon/Expensicons';
 import MultipleAvatars from './MultipleAvatars';
 import ParentNavigationSubtitle from './ParentNavigationSubtitle';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import SingleReportAvatar from './ReportActionItem/SingleReportAvatar';
 import type {TransactionListItemType} from './SelectionList/types';
 import SubscriptAvatar from './SubscriptAvatar';
 import Text from './Text';
@@ -73,6 +75,9 @@ type AvatarWithDisplayNameProps = {
 
     /** Color of the secondary avatar border, usually should match the container background */
     avatarBorderColor?: ColorValue;
+
+    /** If we want to override the default avatar behavior and set a single avatar, we should pass this prop. */
+    singleAvatarDetails?: ReportAvatarDetails;
 };
 
 const fallbackIcon: Icon = {
@@ -167,6 +172,7 @@ function AvatarWithDisplayName({
     shouldEnableAvatarNavigation = true,
     shouldUseCustomSearchTitleName = false,
     transactions = [],
+    singleAvatarDetails,
     openParentReportInCurrentTab = false,
     avatarBorderColor: avatarBorderColorProp,
 }: AvatarWithDisplayNameProps) {
@@ -236,40 +242,74 @@ function AvatarWithDisplayName({
             Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
         }
     }, [report, shouldEnableDetailPageNavigation, goToDetailsPage]);
+
     const shouldUseFullTitle = isMoneyRequestOrReport || isAnonymous;
-    const avatar = (
-        <View accessibilityLabel={title}>
-            {shouldShowSubscriptAvatar ? (
-                <SubscriptAvatar
-                    backgroundColor={avatarBorderColor}
-                    mainAvatar={icons.at(0) ?? fallbackIcon}
-                    secondaryAvatar={icons.at(1)}
-                    size={size}
-                />
-            ) : (
-                <MultipleAvatars
-                    icons={icons}
-                    size={size}
-                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
+
+    const getAvatar = useCallback(
+        (accountID: number) => {
+            if (shouldShowSubscriptAvatar) {
+                return (
+                    <SubscriptAvatar
+                        backgroundColor={avatarBorderColor}
+                        mainAvatar={icons.at(0) ?? fallbackIcon}
+                        secondaryAvatar={icons.at(1)}
+                        size={size}
+                    />
+                );
+            }
+
+            if (!singleAvatarDetails || singleAvatarDetails.shouldDisplayAllActors || !singleAvatarDetails.reportPreviewSenderID) {
+                return (
+                    <MultipleAvatars
+                        icons={icons}
+                        size={size}
+                        secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
+                    />
+                );
+            }
+
+            return (
+                <SingleReportAvatar
+                    reportPreviewDetails={singleAvatarDetails}
+                    personalDetails={personalDetails}
+                    containerStyles={[styles.actionAvatar, styles.mr3]}
+                    actorAccountID={accountID}
                 />
-            )}
-        </View>
+            );
+        },
+        [StyleUtils, avatarBorderColor, icons, personalDetails, shouldShowSubscriptAvatar, singleAvatarDetails, size, styles],
     );
+
+    const getWrappedAvatar = useCallback(
+        (accountID: number) => {
+            const avatar = getAvatar(accountID);
+
+            if (!shouldEnableAvatarNavigation) {
+                return <View accessibilityLabel={title}>{avatar}</View>;
+            }
+
+            return (
+                <View accessibilityLabel={title}>
+                    <PressableWithoutFeedback
+                        onPress={showActorDetails}
+                        accessibilityLabel={title}
+                        role={getButtonRole(true)}
+                    >
+                        {avatar}
+                    </PressableWithoutFeedback>
+                </View>
+            );
+        },
+        [getAvatar, shouldEnableAvatarNavigation, showActorDetails, title],
+    );
+
+    const WrappedAvatar = getWrappedAvatar(actorAccountID?.current ?? CONST.DEFAULT_NUMBER_ID);
+
     const headerView = (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
             {!!report && !!title && (
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                    {shouldEnableAvatarNavigation ? (
-                        <PressableWithoutFeedback
-                            onPress={showActorDetails}
-                            accessibilityLabel={title}
-                            role={getButtonRole(true)}
-                        >
-                            {avatar}
-                        </PressableWithoutFeedback>
-                    ) : (
-                        avatar
-                    )}
+                    {WrappedAvatar}
                     <View style={[styles.flex1, styles.flexColumn]}>
                         {getCustomDisplayName(
                             shouldUseCustomSearchTitleName,

src/components/HeaderWithBackButton/index.tsx

@@ -37,6 +37,7 @@ function HeaderWithBackButton({
     report,
     policy,
     policyAvatar,
+    singleAvatarDetails,
     shouldShowReportAvatarWithDisplay = false,
     shouldShowBackButton = true,
     shouldShowBorderBottom = false,
@@ -103,6 +104,7 @@ function HeaderWithBackButton({
                 <AvatarWithDisplayName
                     report={report}
                     policy={policy}
+                    singleAvatarDetails={singleAvatarDetails}
                     shouldEnableDetailPageNavigation={shouldEnableDetailPageNavigation}
                     openParentReportInCurrentTab={openParentReportInCurrentTab}
                 />
@@ -138,6 +140,7 @@ function HeaderWithBackButton({
         titleColor,
         translate,
         openParentReportInCurrentTab,
+        singleAvatarDetails,
     ]);
     const ThreeDotMenuButton = useMemo(() => {
         if (shouldShowThreeDotsButton) {

src/components/HeaderWithBackButton/types.ts

@@ -2,6 +2,7 @@ import type {ReactNode} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
+import type {ReportAvatarDetails} from '@hooks/useReportAvatarDetails';
 import type {Action} from '@hooks/useSingleExecution';
 import type {StepCounterParams} from '@src/languages/params';
 import type {TranslationPaths} from '@src/languages/types';
@@ -161,6 +162,9 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     shouldMinimizeMenuButton?: boolean;
     /** Whether to open the parent report link in the current tab if possible */
     openParentReportInCurrentTab?: boolean;
+
+    /** If we want to override the default avatar behavior and set a single avatar, we should pass this prop. */
+    singleAvatarDetails?: ReportAvatarDetails;
 };
 
 export type {ThreeDotsMenuItem};

src/components/MoneyReportHeader.tsx

@@ -10,6 +10,7 @@ import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import usePaymentAnimations from '@hooks/usePaymentAnimations';
 import usePaymentOptions from '@hooks/usePaymentOptions';
+import useReportAvatarDetails from '@hooks/useReportAvatarDetails';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSelectedTransactionsActions from '@hooks/useSelectedTransactionsActions';
@@ -185,6 +186,15 @@ function MoneyReportHeader({
     const isExported = isExportedUtils(reportActions);
     const integrationNameFromExportMessage = isExported ? getIntegrationNameFromExportMessageUtils(reportActions) : null;
 
+    const [reportPreviewAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport?.reportID}`, {
+        canBeMissing: true,
+        selector: (actions) => Object.entries(actions ?? {}).find(([id]) => id === moneyRequestReport?.parentReportActionID)?.[1],
+    });
+
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        canBeMissing: true,
+    });
+
     const [downloadErrorModalVisible, setDownloadErrorModalVisible] = useState(false);
     const [isCancelPaymentModalVisible, setIsCancelPaymentModalVisible] = useState(false);
     const [isDeleteExpenseModalVisible, setIsDeleteExpenseModalVisible] = useState(false);
@@ -220,6 +230,8 @@ function MoneyReportHeader({
         [allViolations, transactionIDs],
     );
 
+    const details = useReportAvatarDetails({report: chatReport, iouReport: moneyRequestReport, action: reportPreviewAction, policy, innerPolicies: policies, personalDetails});
+
     const messagePDF = useMemo(() => {
         if (!reportPDFFilename) {
             return translate('reportDetailsPage.waitForPDF');
@@ -944,6 +956,7 @@ function MoneyReportHeader({
             <HeaderWithBackButton
                 shouldShowReportAvatarWithDisplay
                 shouldShowPinButton={false}
+                singleAvatarDetails={details}
                 report={moneyRequestReport}
                 policy={policy}
                 shouldShowBackButton={shouldShowBackButton}

src/components/ReportActionItem/SingleReportAvatar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type {ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import Avatar from '@components/Avatar';
+import UserDetailsTooltip from '@components/UserDetailsTooltip';
+import type {ReportAvatarDetails} from '@hooks/useReportAvatarDetails';
+import CONST from '@src/CONST';
+import type {PersonalDetailsList} from '@src/types/onyx';
+
+function SingleReportAvatar({
+    reportPreviewDetails,
+    personalDetails,
+    containerStyles,
+    actorAccountID,
+}: {
+    reportPreviewDetails: ReportAvatarDetails;
+    personalDetails: PersonalDetailsList | undefined;
+    containerStyles: ViewStyle[];
+    actorAccountID: number | null | undefined;
+}) {
+    const {primaryAvatar, isWorkspaceActor, fallbackIcon: reportFallbackIcon, reportPreviewAction} = reportPreviewDetails;
+    const delegatePersonalDetails = reportPreviewAction?.delegateAccountID ? personalDetails?.[reportPreviewAction?.delegateAccountID] : undefined;
+
+    return (
+        <UserDetailsTooltip
+            accountID={Number(delegatePersonalDetails && !isWorkspaceActor ? actorAccountID : (primaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID))}
+            delegateAccountID={reportPreviewAction?.delegateAccountID}
+            icon={primaryAvatar}
+        >
+            <View>
+                <Avatar
+                    containerStyles={containerStyles}
+                    source={primaryAvatar.source}
+                    type={primaryAvatar.type}
+                    name={primaryAvatar.name}
+                    avatarID={primaryAvatar.id}
+                    fallbackIcon={reportFallbackIcon}
+                />
+            </View>
+        </UserDetailsTooltip>
+    );
+}
+
+export default SingleReportAvatar;

src/components/ReportActionItem/TransactionPreview/types.ts

@@ -105,7 +105,7 @@ type TransactionPreviewContentProps = {
     /** Holds the transaction data entry from Onyx */
     transaction: OnyxEntry<Transaction>;
 
-    /** The original amount value on the transaction. This is used to deduce who is the sender and who is the receiver of the money request
+    /** The amount of the transaction saved in the database. This is used to deduce who is the sender and who is the receiver of the money request
      * In case of Splits the property `transaction` is actually an original transaction (for the whole split) and it does not have the data required to deduce who is the sender */
     transactionRawAmount: number;