diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 8d8710d9f93f..a7fc937ae303 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -8304,6 +8304,7 @@ const CONST = { COPILOT: 'Account-Copilot', SECURITY: 'Account-Security', SUBSCRIPTION: 'Account-Subscription', + STATUS_PICKER: 'Account-StatusPicker', }, DISCOVER_SECTION: { TEST_DRIVE: 'DiscoverSection-TestDrive', diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index f01818dea505..d891058af02d 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -5,6 +5,7 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -33,9 +34,10 @@ import {View} from 'react-native'; import type {PopoverMenuItem} from './PopoverMenu'; import Avatar from './Avatar'; -import Button from './Button'; +import Icon from './Icon'; import {ModalActions} from './Modal/Global/ModalContext'; import PopoverMenu from './PopoverMenu'; +import {PressableWithFeedback} from './Pressable'; import {useProductTrainingContext} from './ProductTrainingContext'; import Text from './Text'; import Tooltip from './Tooltip'; @@ -47,9 +49,10 @@ type AccountSwitcherProps = { }; function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { + const icons = useMemoizedLazyExpensifyIcons(['CaretUpDown', 'Checkmark']); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); - const icons = useMemoizedLazyExpensifyIcons(['CaretUpDown']); const styles = useThemeStyles(); + const theme = useTheme(); const {localeCompare, translate, formatPhoneNumber} = useLocalize(); const {isOffline} = useNetwork(); const {shouldUseNarrowLayout} = useResponsiveLayout(); @@ -64,7 +67,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID); const [gpsDraftDetails] = useOnyx(ONYXKEYS.GPS_DRAFT_DETAILS); - const buttonRef = useRef(null); + const buttonRef = useRef(null); const {windowHeight} = useWindowDimensions(); const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false); @@ -119,18 +122,13 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { shouldRender: shouldShowProductTrainingTooltip, renderTooltipContent: renderProductTrainingTooltip, anchorAlignment: { - // Right-align so the tooltip opens leftward into the sidebar (matching the design mockup), - // instead of overflowing past the Switch button into the central pane. - horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }, shiftVertical: variables.accountSwitcherTooltipShiftVertical, shiftHorizontal: variables.accountSwitcherTooltipShiftHorizontal, wrapperStyle: styles.productTrainingTooltipWrapper, onTooltipPress: onPressSwitcher, - // The switcher lives in the settings sidebar, which isn't the navigation-focused screen on wide layouts. - // Without this the educational tooltip is suppressed (it relies on the screen being focused), so keep it shown until dismissed. - shouldHideOnNavigate: false, } : { text: translate('delegate.copilotAccess'), @@ -232,64 +230,71 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { return ( <> - - - - - {doesDisplayNameContainEmojis ? ( - - - - ) : ( + + + + + + + {doesDisplayNameContainEmojis ? ( + + + + ) : ( + + {formatPhoneNumber(displayName)} + + )} + {!!canSwitchAccounts && ( + + + + )} + - {formatPhoneNumber(displayName)} + {Str.removeSMSDomain(currentUserPersonalDetails?.login ?? '')} - )} - - {Str.removeSMSDomain(currentUserPersonalDetails?.login ?? '')} - - {!!isDebugModeEnabled && ( - - AccountID: {accountID} - - )} - - - {!!canSwitchAccounts && ( - - {/* View wrapper forwards the hover events Tooltip injects; Button doesn't pass them to its underlying pressable, so the tooltip wouldn't show without it */} - -