Merge pull request #22693 from alitoshmatov/21946/tooltip-fallback-av…

…atar
Expensify · Jul 13, 2023 · 451096b · 451096b
2 parents f54c4f3 + 6751cda
commit 451096b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
@@ -112,6 +112,10 @@ function MultipleAvatars(props) {
             <UserDetailsTooltip
                 accountID={props.icons[0].id}
                 icon={props.icons[0]}
+                fallbackUserDetails={{
+                    displayName: props.icons[0].name,
+                    avatar: props.icons[0].avatar,
+                }}
             >
                 <View style={avatarContainerStyles}>
                     <Avatar
@@ -158,6 +162,10 @@ function MultipleAvatars(props) {
                                 key={`stackedAvatars-${index}`}
                                 accountID={icon.id}
                                 icon={icon}
+                                fallbackUserDetails={{
+                                    displayName: icon.name,
+                                    avatar: icon.avatar,
+                                }}
                             >
                                 <View
                                     style={[
@@ -226,6 +234,10 @@ function MultipleAvatars(props) {
                         <UserDetailsTooltip
                             accountID={props.icons[0].id}
                             icon={props.icons[0]}
+                            fallbackUserDetails={{
+                                displayName: props.icons[0].name,
+                                avatar: props.icons[0].avatar,
+                            }}
                         >
                             {/* View is necessary for tooltip to show for multiple avatars in LHN */}
                             <View>
@@ -244,6 +256,10 @@ function MultipleAvatars(props) {
                                 <UserDetailsTooltip
                                     accountID={props.icons[1].id}
                                     icon={props.icons[1]}
+                                    fallbackUserDetails={{
+                                        displayName: props.icons[1].name,
+                                        avatar: props.icons[1].avatar,
+                                    }}
                                 >
                                     <View>
                                         <Avatar

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
@@ -150,11 +150,18 @@ function addSMSDomainIfPhoneNumber(login) {
  *
  * @param {Array<Number>} accountIDs
  * @param {Object} personalDetails
+ * @param {Object} defaultValues {login: accountID} In workspace invite page, when new user is added we pass available data to opt in
  * @returns {Object}
  */
-function getAvatarsForAccountIDs(accountIDs, personalDetails) {
+function getAvatarsForAccountIDs(accountIDs, personalDetails, defaultValues = {}) {
+    const reversedDefaultValues = {};
+    _.map(Object.entries(defaultValues), (item) => {
+        reversedDefaultValues[item[1]] = item[0];
+    });
+
     return _.map(accountIDs, (accountID) => {
-        const userPersonalDetail = lodashGet(personalDetails, accountID, {login: '', accountID, avatar: ''});
+        const login = lodashGet(reversedDefaultValues, accountID, '');
+        const userPersonalDetail = lodashGet(personalDetails, accountID, {login, accountID, avatar: ''});
         return {
             id: accountID,
             source: UserUtils.getAvatar(userPersonalDetail.avatar, userPersonalDetail.accountID),

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -194,7 +194,11 @@ class WorkspaceInviteMessagePage extends React.Component {
                         <View style={[styles.mv4, styles.justifyContentCenter, styles.alignItemsCenter]}>
                             <MultipleAvatars
                                 size={CONST.AVATAR_SIZE.LARGE}
-                                icons={OptionsListUtils.getAvatarsForAccountIDs(_.values(this.props.invitedEmailsToAccountIDsDraft), this.props.personalDetails)}
+                                icons={OptionsListUtils.getAvatarsForAccountIDs(
+                                    _.values(this.props.invitedEmailsToAccountIDsDraft),
+                                    this.props.personalDetails,
+                                    this.props.invitedEmailsToAccountIDsDraft,
+                                )}
                                 shouldStackHorizontally
                                 shouldDisplayAvatarsInRows
                                 secondAvatarStyle={[styles.secondAvatarInline]}