Merge pull request Expensify#24624 from spcheema/fix/24389-request-a-…

…money-clicking-on-the-avatar-open-a-wrong-profile Fix/24389 - Request a money - Clicking on the avatar open a wrong profile
abdel-h66 · Aug 22, 2023 · 8251519 · 8251519
2 parents 999ed93 + 5594626
commit 8251519
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 17 deletions.
diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
@@ -18,6 +18,9 @@ import * as OptionsListUtils from '../libs/OptionsListUtils';
 import Text from './Text';
 import * as StyleUtils from '../styles/StyleUtils';
 import ParentNavigationSubtitle from './ParentNavigationSubtitle';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -50,6 +53,20 @@ const defaultProps = {
     size: CONST.AVATAR_SIZE.DEFAULT,
 };
 
+const showActorDetails = (report) => {
+    if (ReportUtils.isExpenseReport(report)) {
+        Navigation.navigate(ROUTES.getProfileRoute(report.ownerAccountID));
+        return;
+    }
+
+    if (!ReportUtils.isIOUReport(report) && report.participantAccountIDs.length === 1) {
+        Navigation.navigate(ROUTES.getProfileRoute(report.participantAccountIDs[0]));
+        return;
+    }
+
+    Navigation.navigate(ROUTES.getReportParticipantsRoute(report.reportID));
+};
+
 function AvatarWithDisplayName(props) {
     const title = ReportUtils.getReportName(props.report);
     const subtitle = ReportUtils.getChatRoomSubtitle(props.report);
@@ -61,24 +78,31 @@ function AvatarWithDisplayName(props) {
     const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(props.report);
     const isExpenseRequest = ReportUtils.isExpenseRequest(props.report);
     const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : props.size;
+
     return (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
             {Boolean(props.report && title) && (
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                    {shouldShowSubscriptAvatar ? (
-                        <SubscriptAvatar
-                            backgroundColor={themeColors.highlightBG}
-                            mainAvatar={icons[0]}
-                            secondaryAvatar={icons[1]}
-                            size={defaultSubscriptSize}
-                        />
-                    ) : (
-                        <MultipleAvatars
-                            icons={icons}
-                            size={props.size}
-                            secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(themeColors.highlightBG)]}
-                        />
-                    )}
+                    <PressableWithoutFeedback
+                        onPress={() => showActorDetails(props.report)}
+                        accessibilityLabel={title}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    >
+                        {shouldShowSubscriptAvatar ? (
+                            <SubscriptAvatar
+                                backgroundColor={themeColors.highlightBG}
+                                mainAvatar={icons[0]}
+                                secondaryAvatar={icons[1]}
+                                size={defaultSubscriptSize}
+                            />
+                        ) : (
+                            <MultipleAvatars
+                                icons={icons}
+                                size={props.size}
+                                secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(themeColors.highlightBG)]}
+                            />
+                        )}
+                    </PressableWithoutFeedback>
                     <View style={[styles.flex1, styles.flexColumn, shouldShowSubscriptAvatar && !isExpenseRequest ? styles.ml4 : {}]}>
                         <DisplayNames
                             fullTitle={title}

diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
@@ -55,7 +55,14 @@ const defaultProps = {
  * @return {Array}
  */
 const getAllParticipants = (report, personalDetails, translate) => {
-    const {participantAccountIDs} = report;
+    let participantAccountIDs = report.participantAccountIDs;
+
+    // Build participants list for IOU report - there is a possibility that participantAccountIDs may be undefined/empty
+    if (ReportUtils.isIOUReport(report)) {
+        const managerID = report.managerID || '';
+        const ownerAccountID = report.ownerAccountID || '';
+        participantAccountIDs = [managerID, ownerAccountID];
+    }
 
     return _.chain(participantAccountIDs)
         .map((accountID, index) => {

diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
@@ -111,7 +111,7 @@ function ReportActionItemSingle(props) {
 
     // If this is a report preview, display names and avatars of both people involved
     let secondaryAvatar = {};
-    const displayAllActors = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport;
+    const displayAllActors = useMemo(() => props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport, [props.action.actionName, props.iouReport]);
     const primaryDisplayName = displayName;
     if (displayAllActors) {
         const secondaryUserDetails = props.personalDetailsList[props.iouReport.ownerAccountID] || {};
@@ -144,9 +144,14 @@ function ReportActionItemSingle(props) {
         if (isWorkspaceActor) {
             showWorkspaceDetails(props.report.reportID);
         } else {
+            // Show participants page IOU report preview
+            if (displayAllActors) {
+                Navigation.navigate(ROUTES.getReportParticipantsRoute(props.iouReport.reportID));
+                return;
+            }
             showUserDetails(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID);
         }
-    }, [isWorkspaceActor, props.report.reportID, actorAccountID, props.action.delegateAccountID]);
+    }, [isWorkspaceActor, props.report.reportID, actorAccountID, props.action.delegateAccountID, props.iouReport.reportID, displayAllActors]);
 
     const shouldDisableDetailPage = useMemo(
         () => !isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID),