Use fallback user avatar in cases where the user is unknown to us

src/components/Avatar.tsx

@@ -80,18 +80,19 @@ function Avatar({
     }, [originalSource]);
 
     const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;
-    const iconSize = StyleUtils.getAvatarSize(size);
 
-    const imageStyle: StyleProp<ImageStyle> = [StyleUtils.getAvatarStyle(size), imageStyles, styles.noBorderRadius];
-    const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined;
-
-    // We pass the color styles down to the SVG for the workspace and fallback avatar.
-    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, Number(avatarID));
+    // if it's user avatar then accountID will be a number
+    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, avatarID as number);
     const useFallBackAvatar = imageError || !source || source === Expensicons.FallbackAvatar;
     const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar;
     const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon';
     const avatarSource = useFallBackAvatar ? fallbackAvatar : source;
 
+    // We pass the color styles down to the SVG for the workspace and fallback avatar.
+    const iconSize = StyleUtils.getAvatarSize(size);
+    const imageStyle: StyleProp<ImageStyle> = [StyleUtils.getAvatarStyle(size), imageStyles, styles.noBorderRadius];
+    const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined;
+
     let iconColors;
     if (isWorkspace) {
         iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(avatarID?.toString() ?? '');

src/components/AvatarWithImagePicker.tsx

@@ -49,6 +49,9 @@ type AvatarWithImagePickerProps = {
     /** Avatar source to display */
     source?: AvatarSource;
 
+    /** Account id of user for which avatar is displayed  */
+    avatarID?: number | string;
+
     /** Additional style props */
     style?: StyleProp<ViewStyle>;
 
@@ -136,6 +139,7 @@ function AvatarWithImagePicker({
     errorRowStyles,
     onErrorClose = () => {},
     source = '',
+    avatarID,
     fallbackIcon = Expensicons.FallbackAvatar,
     size = CONST.AVATAR_SIZE.DEFAULT,
     type = CONST.ICON_TYPE_AVATAR,
@@ -329,6 +333,7 @@ function AvatarWithImagePicker({
                                         containerStyles={avatarStyle}
                                         imageStyles={[avatarStyle, styles.alignSelfCenter]}
                                         source={source}
+                                        avatarID={avatarID}
                                         fallbackIcon={fallbackIcon}
                                         size={size}
                                         type={type}

src/components/AvatarWithIndicator.tsx

@@ -11,7 +11,10 @@ import Tooltip from './Tooltip';
 
 type AvatarWithIndicatorProps = {
     /** URL for the avatar */
-    source: UserUtils.AvatarSource;
+    source?: UserUtils.AvatarSource;
+
+    /** account id if it's user avatar */
+    accountID?: number;
 
     /** To show a tooltip on hover */
     tooltipText?: string;
@@ -23,7 +26,7 @@ type AvatarWithIndicatorProps = {
     isLoading?: boolean;
 };
 
-function AvatarWithIndicator({source, tooltipText = '', fallbackIcon = Expensicons.FallbackAvatar, isLoading = true}: AvatarWithIndicatorProps) {
+function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon = Expensicons.FallbackAvatar, isLoading = true}: AvatarWithIndicatorProps) {
     const styles = useThemeStyles();
 
     return (
@@ -35,8 +38,9 @@ function AvatarWithIndicator({source, tooltipText = '', fallbackIcon = Expensico
                     <>
                         <Avatar
                             size={CONST.AVATAR_SIZE.SMALL}
-                            source={UserUtils.getSmallSizeAvatar(source)}
+                            source={UserUtils.getSmallSizeAvatar(source, accountID)}
                             fallbackIcon={fallbackIcon}
+                            avatarID={accountID}
                         />
                         <Indicator />
                     </>

src/components/MenuItem.tsx

@@ -527,7 +527,7 @@ function MenuItem(
                                                         <Avatar
                                                             imageStyles={[styles.alignSelfCenter]}
                                                             size={CONST.AVATAR_SIZE.DEFAULT}
-                                                            source={icon as AvatarSource}
+                                                            source={icon}
                                                             fallbackIcon={fallbackIcon}
                                                             name={title}
                                                             avatarID={avatarID}
@@ -537,7 +537,8 @@ function MenuItem(
                                                     {iconType === CONST.ICON_TYPE_AVATAR && (
                                                         <Avatar
                                                             imageStyles={[styles.alignSelfCenter]}
-                                                            source={icon as AvatarSource}
+                                                            source={icon}
+                                                            avatarID={avatarID}
                                                             fallbackIcon={fallbackIcon}
                                                             size={avatarSize}
                                                         />

src/components/ReportActionItem/TaskView.tsx

@@ -152,7 +152,7 @@ function TaskView({report, ...props}: TaskViewProps) {
                         <MenuItem
                             label={translate('task.assignee')}
                             title={ReportUtils.getDisplayNameForParticipant(report.managerID)}
-                            icon={OptionsListUtils.getAvatarsForAccountIDs(report.managerID ? [report.managerID] : [], personalDetails)}
+                            icon={OptionsListUtils.getAvatarsForAccountIDs([report.managerID], personalDetails)}
                             iconType={CONST.ICON_TYPE_AVATAR}
                             avatarSize={CONST.AVATAR_SIZE.SMALLER}
                             titleStyle={styles.assigneeTextStyle}

src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx

@@ -12,7 +12,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {isAnonymousUser} from '@libs/actions/Session';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import * as ReportUtils from '@libs/ReportUtils';
-import * as UserUtils from '@libs/UserUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -60,11 +59,11 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA
                 <View style={styles.emptyAvatar}>
                     <Avatar
                         containerStyles={[styles.actionAvatar]}
-                        source={icon?.source ?? UserUtils.getAvatar(userAvatar, userAccountID)}
+                        source={icon?.source ?? userAvatar}
+                        avatarID={icon?.id ?? userAccountID}
                         type={icon?.type ?? CONST.ICON_TYPE_AVATAR}
                         name={icon?.name ?? userLogin}
                         fallbackIcon={icon?.fallbackIcon}
-                        avatarID={icon?.id}
                     />
                 </View>
                 <Text style={[styles.mt2, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>{title}</Text>

src/libs/OptionsListUtils.ts

@@ -7,6 +7,7 @@ import lodashSet from 'lodash/set';
 import lodashSortBy from 'lodash/sortBy';
 import Onyx from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import {FallbackAvatar} from '@components/Icon/Expensicons';
 import type {SelectedTagOption} from '@components/TagPicker';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -324,13 +325,14 @@ function getAvatarsForAccountIDs(accountIDs: number[], personalDetails: OnyxEntr
     Object.entries(defaultValues).forEach((item) => {
         reversedDefaultValues[item[1]] = item[0];
     });
+
     return accountIDs.map((accountID) => {
         const login = reversedDefaultValues[accountID] ?? '';
-        const userPersonalDetail = personalDetails?.[accountID] ?? {login, accountID, avatar: ''};
+        const userPersonalDetail = personalDetails?.[accountID] ?? {login, accountID};
 
         return {
             id: accountID,
-            source: UserUtils.getAvatar(userPersonalDetail.avatar, userPersonalDetail.accountID),
+            source: userPersonalDetail.avatar ?? FallbackAvatar,
             type: CONST.ICON_TYPE_AVATAR,
             name: userPersonalDetail.login ?? '',
         };
@@ -353,9 +355,7 @@ function getPersonalDetailsForAccountIDs(accountIDs: number[] | undefined, perso
         }
         let personalDetail: OnyxEntry<PersonalDetails> = personalDetails[accountID];
         if (!personalDetail) {
-            personalDetail = {
-                avatar: UserUtils.getDefaultAvatar(cleanAccountID),
-            } as PersonalDetails;
+            personalDetail = {} as PersonalDetails;
         }
 
         if (cleanAccountID === CONST.ACCOUNT_ID.CONCIERGE) {
@@ -384,6 +384,7 @@ function getParticipantsOption(participant: ReportUtils.OptionData | Participant
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const login = detail?.login || participant.login || '';
     const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(detail, LocalePhoneNumber.formatPhoneNumber(login));
+
     return {
         keyForList: String(detail?.accountID),
         login,
@@ -394,7 +395,7 @@ function getParticipantsOption(participant: ReportUtils.OptionData | Participant
         alternateText: LocalePhoneNumber.formatPhoneNumber(login) || displayName,
         icons: [
             {
-                source: UserUtils.getAvatar(detail?.avatar ?? '', detail?.accountID ?? -1),
+                source: detail?.avatar ?? FallbackAvatar,
                 name: login,
                 type: CONST.ICON_TYPE_AVATAR,
                 id: detail?.accountID,
@@ -768,13 +769,7 @@ function createOption(
     // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     result.searchText = getSearchText(report, reportName, personalDetailList, !!result.isChatRoom || !!result.isPolicyExpenseChat, !!result.isThread);
-    result.icons = ReportUtils.getIcons(
-        report,
-        personalDetails,
-        UserUtils.getAvatar(personalDetail?.avatar ?? '', personalDetail?.accountID),
-        personalDetail?.login,
-        personalDetail?.accountID,
-    );
+    result.icons = ReportUtils.getIcons(report, personalDetails, personalDetail?.avatar, personalDetail?.login, personalDetail?.accountID, null);
     result.subtitle = subtitle;
 
     return result;
@@ -1627,7 +1622,8 @@ function getUserToInviteOption({
     // If user doesn't exist, use a fallback avatar
     userToInvite.icons = [
         {
-            source: UserUtils.getAvatar('', optimisticAccountID),
+            source: FallbackAvatar,
+            id: optimisticAccountID,
             name: searchValue,
             type: CONST.ICON_TYPE_AVATAR,
         },
@@ -2029,7 +2025,7 @@ function getIOUConfirmationOptionsFromPayeePersonalDetail(personalDetail: Person
         alternateText: formattedLogin || PersonalDetailsUtils.getDisplayNameOrDefault(personalDetail, '', false),
         icons: [
             {
-                source: UserUtils.getAvatar(personalDetail.avatar, personalDetail.accountID),
+                source: personalDetail.avatar ?? FallbackAvatar,
                 name: personalDetail.login ?? '',
                 type: CONST.ICON_TYPE_AVATAR,
                 id: personalDetail.accountID,

src/libs/PersonalDetailsUtils.ts

@@ -153,7 +153,6 @@ function getPersonalDetailsOnyxDataForOptimisticUsers(newLogins: string[], newAc
         personalDetailsNew[accountID] = {
             login,
             accountID,
-            avatar: UserUtils.getDefaultAvatarURL(accountID),
             displayName: LocalePhoneNumber.formatPhoneNumber(login),
         };