Add delegate avatar component

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 (
+        <View style={styles.sidebarStatusAvatarContainer}>
+            <ProfileAvatarWithIndicator isSelected={isSelected} />
+            <View style={[styles.sidebarStatusAvatar]}>
+                <View style={styles.emojiStatusLHN}>
+                    <Avatar
+                        size={CONST.AVATAR_SIZE.SMALL}
+                        source={UserUtils.getSmallSizeAvatar(delegatePersonalDetail?.avatar, delegatePersonalDetail?.accountID)}
+                        fallbackIcon={delegatePersonalDetail?.fallbackIcon}
+                        type={CONST.ICON_TYPE_AVATAR}
+                    />
+                </View>
+            </View>
+        </View>
+    );
+}
+
+AvatarWithDelegateAvatar.displayName = 'AvatarWithDelegateAvatar';
+
+export default AvatarWithDelegateAvatar;

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 = (
+            <AvatarWithDelegateAvatar
+                delegateEmail={delegateEmail}
+                isSelected={isSelected}
+            />
+        );
+    } else if (emojiStatus) {
         children = (
             <AvatarWithOptionalStatus
                 emojiStatus={emojiStatus}