From c2209498e1c5344c05249e086451e8f9351c320c Mon Sep 17 00:00:00 2001
From: Rocio Perez-Cano <pecanoro@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:13:52 -0500
Subject: [PATCH] Merge pull request #31659 from
 Expensify/puneet-displayname-group

Set displayName fallback for group chat members page

(cherry picked from commit 981173c7fe3063e82de60c36f3460c9489cb8787)
---
 src/pages/ReportParticipantsPage.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index 376ef35da7cd..ceaa53a41a6b 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -12,6 +12,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -59,10 +60,11 @@ const getAllParticipants = (report, personalDetails, translate) =>
         .map((accountID, index) => {
             const userPersonalDetail = lodashGet(personalDetails, accountID, {displayName: personalDetails.displayName || translate('common.hidden'), avatar: ''});
             const userLogin = LocalePhoneNumber.formatPhoneNumber(userPersonalDetail.login || '') || translate('common.hidden');
+            const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(userPersonalDetail, 'displayName');
 
             return {
                 alternateText: userLogin,
-                displayName: userPersonalDetail.displayName,
+                displayName,
                 accountID: userPersonalDetail.accountID,
                 icons: [
                     {
@@ -74,9 +76,9 @@ const getAllParticipants = (report, personalDetails, translate) =>
                 ],
                 keyForList: `${index}-${userLogin}`,
                 login: userLogin,
-                text: userPersonalDetail.displayName,
+                text: displayName,
                 tooltipText: userLogin,
-                participantsList: [{accountID, displayName: userPersonalDetail.displayName}],
+                participantsList: [{accountID, displayName}],
             };
         })
         .sortBy((participant) => participant.displayName.toLowerCase())