diff --git a/src/pages/home/sidebar/AvatarWithDelegateAvatar.tsx b/src/pages/home/sidebar/AvatarWithDelegateAvatar.tsx
new file mode 100644
index 000000000000..0192d3d8423a
--- /dev/null
+++ b/src/pages/home/sidebar/AvatarWithDelegateAvatar.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Avatar from '@components/Avatar';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as UserUtils from '@libs/UserUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ProfileAvatarWithIndicator from './ProfileAvatarWithIndicator';
+
+type AvatarWithDelegateAvatarProps = {
+ /** Emoji status */
+ delegateEmail: string;
+
+ /** Whether the avatar is selected */
+ isSelected?: boolean;
+};
+
+function AvatarWithDelegateAvatar({delegateEmail, isSelected = false}: AvatarWithDelegateAvatarProps) {
+ const styles = useThemeStyles();
+ const personalDetails = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+ const delegatePersonalDetail = Object.values(personalDetails[0] ?? {}).find((personalDetail) => personalDetail?.login?.toLowerCase() === delegateEmail);
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+AvatarWithDelegateAvatar.displayName = 'AvatarWithDelegateAvatar';
+
+export default AvatarWithDelegateAvatar;
diff --git a/src/pages/home/sidebar/BottomTabAvatar.tsx b/src/pages/home/sidebar/BottomTabAvatar.tsx
index c928fdbc7dd8..0a798389517b 100644
--- a/src/pages/home/sidebar/BottomTabAvatar.tsx
+++ b/src/pages/home/sidebar/BottomTabAvatar.tsx
@@ -1,4 +1,5 @@
import React, {useCallback} from 'react';
+import {useOnyx} from 'react-native-onyx';
import {PressableWithFeedback} from '@components/Pressable';
import Tooltip from '@components/Tooltip';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -7,7 +8,9 @@ import useThemeStyles from '@hooks/useThemeStyles';
import interceptAnonymousUser from '@libs/interceptAnonymousUser';
import Navigation from '@libs/Navigation/Navigation';
import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
+import AvatarWithDelegateAvatar from './AvatarWithDelegateAvatar';
import AvatarWithOptionalStatus from './AvatarWithOptionalStatus';
import ProfileAvatarWithIndicator from './ProfileAvatarWithIndicator';
@@ -22,6 +25,8 @@ type BottomTabAvatarProps = {
function BottomTabAvatar({isCreateMenuOpen = false, isSelected = false}: BottomTabAvatarProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
+ const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+ const delegateEmail = account?.delegatedAccess?.delegate ?? '';
const currentUserPersonalDetails = useCurrentUserPersonalDetails();
const emojiStatus = currentUserPersonalDetails?.status?.emojiCode ?? '';
@@ -36,7 +41,14 @@ function BottomTabAvatar({isCreateMenuOpen = false, isSelected = false}: BottomT
let children;
- if (emojiStatus) {
+ if (delegateEmail) {
+ children = (
+
+ );
+ } else if (emojiStatus) {
children = (