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 = (