diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 4acf197ba178..f633869ccd30 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -52,7 +52,7 @@ type AvatarProps = {
name?: string;
/** Optional account id if it's user avatar or policy id if it's workspace avatar */
- accountID?: number | string;
+ avatarID?: number | string;
};
function Avatar({
@@ -66,7 +66,7 @@ function Avatar({
fallbackIconTestID = '',
type = CONST.ICON_TYPE_AVATAR,
name = '',
- accountID,
+ avatarID,
}: AvatarProps) {
const theme = useTheme();
const styles = useThemeStyles();
@@ -86,7 +86,7 @@ function Avatar({
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(accountID));
+ const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, Number(avatarID));
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';
@@ -94,7 +94,7 @@ function Avatar({
let iconColors;
if (isWorkspace) {
- iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(accountID?.toString() ?? '');
+ iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(avatarID?.toString() ?? '');
} else if (useFallBackAvatar) {
iconColors = StyleUtils.getBackgroundColorAndFill(theme.buttonHoveredBG, theme.icon);
} else {
diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index 70f1b97c04b1..78cd92dbc223 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -182,7 +182,7 @@ function HeaderWithBackButton({
containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]}
source={policyAvatar?.source}
name={policyAvatar?.name}
- accountID={policyAvatar?.id}
+ avatarID={policyAvatar?.id}
type={policyAvatar?.type}
/>
)}
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index b11ae4f5ecd8..a787ac5ded56 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -83,7 +83,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
source={item.icons[0].source}
size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
name={item.icons[0].name}
- accountID={item.icons[0].id}
+ avatarID={item.icons[0].id}
type={item.icons[0].type}
fill={isIcon ? theme.success : undefined}
fallbackIcon={item.icons[0].fallbackIcon}
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index af38d049a907..ad06f9fcb78c 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -265,6 +265,9 @@ type MenuItemBaseProps = {
/** Handles what to do when the item is focused */
onFocus?: () => void;
+
+ /** Optional account id if it's user avatar or policy id if it's workspace avatar */
+ avatarID?: number | string;
};
type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
@@ -342,6 +345,7 @@ function MenuItem(
isPaneMenu = false,
shouldPutLeftPaddingWhenNoIcon = false,
onFocus,
+ avatarID,
}: MenuItemProps,
ref: PressableRef,
) {
@@ -526,6 +530,7 @@ function MenuItem(
source={icon as AvatarSource}
fallbackIcon={fallbackIcon}
name={title}
+ avatarID={avatarID}
type={CONST.ICON_TYPE_WORKSPACE}
/>
)}
diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
index 6ee364f458f1..5ffd9beda6fe 100755
--- a/src/components/MoneyRequestConfirmationList.tsx
+++ b/src/components/MoneyRequestConfirmationList.tsx
@@ -1133,6 +1133,7 @@ function MoneyRequestConfirmationList({
{isTypeInvoice && (
@@ -206,7 +206,7 @@ function MultipleAvatars({
source={icon.source ?? fallbackIcon}
size={size}
name={icon.name}
- accountID={icon.id}
+ avatarID={icon.id}
type={icon.type}
fallbackIcon={icon.fallbackIcon}
/>
@@ -265,7 +265,7 @@ function MultipleAvatars({
imageStyles={[singleAvatarStyle]}
name={icons[0].name}
type={icons[0].type}
- accountID={icons[0].id}
+ avatarID={icons[0].id}
fallbackIcon={icons[0].fallbackIcon}
/>
@@ -285,7 +285,7 @@ function MultipleAvatars({
size={avatarSize}
imageStyles={[singleAvatarStyle]}
name={icons[1].name}
- accountID={icons[1].id}
+ avatarID={icons[1].id}
type={icons[1].type}
fallbackIcon={icons[1].fallbackIcon}
/>
diff --git a/src/components/RoomHeaderAvatars.tsx b/src/components/RoomHeaderAvatars.tsx
index bdb4a0ac78ab..fc3dda9668dd 100644
--- a/src/components/RoomHeaderAvatars.tsx
+++ b/src/components/RoomHeaderAvatars.tsx
@@ -47,7 +47,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
imageStyles={styles.avatarLarge}
size={CONST.AVATAR_SIZE.LARGE}
name={icons[0].name}
- accountID={icons[0].id}
+ avatarID={icons[0].id}
type={icons[0].type}
fallbackIcon={icons[0].fallbackIcon}
/>
@@ -83,7 +83,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
size={CONST.AVATAR_SIZE.LARGE}
containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
name={icon.name}
- accountID={icon.id}
+ avatarID={icon.id}
type={icon.type}
fallbackIcon={icon.fallbackIcon}
/>
diff --git a/src/components/SelectionList/TransactionListItem.tsx b/src/components/SelectionList/TransactionListItem.tsx
index 04929bf883d1..bb0918d7569b 100644
--- a/src/components/SelectionList/TransactionListItem.tsx
+++ b/src/components/SelectionList/TransactionListItem.tsx
@@ -98,7 +98,7 @@ function TransactionListItem({
source={avatarURL}
name={displayName}
type={iconType}
- accountID={isWorkspace ? participant?.id : participant?.accountID}
+ avatarID={isWorkspace ? participant?.id : participant?.accountID}
/>
@@ -109,7 +109,7 @@ function SubscriptAvatar({
size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
fill={secondaryAvatar.fill}
name={secondaryAvatar.name}
- accountID={secondaryAvatar.id}
+ avatarID={secondaryAvatar.id}
type={secondaryAvatar.type}
fallbackIcon={secondaryAvatar.fallbackIcon}
/>
diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx
index 0f7316062027..7a54aadac495 100644
--- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx
+++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx
@@ -64,6 +64,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA
type={icon?.type ?? CONST.ICON_TYPE_AVATAR}
name={icon?.name ?? userLogin}
fallbackIcon={icon?.fallbackIcon}
+ avatarID={icon?.id}
/>
{title}
diff --git a/src/pages/ReportAvatar.tsx b/src/pages/ReportAvatar.tsx
index 121b238012bf..6b4c2e35c19f 100644
--- a/src/pages/ReportAvatar.tsx
+++ b/src/pages/ReportAvatar.tsx
@@ -35,7 +35,8 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re
}}
isWorkspaceAvatar
maybeIcon
- originalFileName={policy?.originalFileName ?? policyName}
+ // In the case of default workspace avatar, originalFileName prop takes policyID as value to get the color of the avatar
+ originalFileName={policy?.originalFileName ?? policy?.id}
shouldShowNotFoundPage={!report?.reportID && !isLoadingApp}
isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}
/>
diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 234147a30bd5..c082a9122dbb 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -135,7 +135,7 @@ function ReportActionItemSingle({
source: avatarSource,
type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
name: primaryDisplayName ?? '',
- id: isWorkspaceActor ? '' : actorAccountID,
+ id: isWorkspaceActor ? report.policyID : actorAccountID,
};
// Since the display name for a report action message is delivered with the report history as an array of fragments
@@ -205,7 +205,7 @@ function ReportActionItemSingle({
source={icon.source}
type={icon.type}
name={icon.name}
- accountID={icon.id}
+ avatarID={icon.id}
fallbackIcon={fallbackIcon}
/>
diff --git a/src/pages/iou/request/step/IOURequestStepSendFrom.tsx b/src/pages/iou/request/step/IOURequestStepSendFrom.tsx
index a5def1072f7e..46d8a1ce36af 100644
--- a/src/pages/iou/request/step/IOURequestStepSendFrom.tsx
+++ b/src/pages/iou/request/step/IOURequestStepSendFrom.tsx
@@ -47,6 +47,7 @@ function IOURequestStepSendFrom({route, transaction, allPolicies}: IOURequestSte
keyForList: policy.id,
icons: [
{
+ id: policy.id,
source: policy?.avatarURL ? policy.avatarURL : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
name: policy.name,
diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
index 9e41cc2090bc..2b826e89e850 100644
--- a/src/pages/workspace/WorkspaceProfilePage.tsx
+++ b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -92,7 +92,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
size={CONST.AVATAR_SIZE.XLARGE}
name={policyName}
- accountID={policy?.id ?? ''}
+ avatarID={policy?.id ?? ''}
type={CONST.ICON_TYPE_WORKSPACE}
/>
),
diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index a1affd935c50..86cbbabb1784 100644
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -196,7 +196,7 @@ function WorkspacesListRow({
size={CONST.AVATAR_SIZE.DEFAULT}
source={workspaceIcon}
fallbackIcon={fallbackWorkspaceIcon}
- accountID={policyID}
+ avatarID={policyID}
name={title}
type={CONST.ICON_TYPE_WORKSPACE}
/>