@oxyhq/services 6.9.43 → 6.9.45

package/lib/module/ui/screens/AccountSwitcherScreen.js

@@ -4,7 +4,8 @@ import { useState, useEffect, useMemo, useCallback } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Platform, Image, Dimensions } from 'react-native';
 import { fontFamilies } from "../styles/fonts.js";
 import { toast } from '../../lib/sonner';
-import { confirmAction } from "../utils/confirmAction.js";
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import OxyIcon from "../components/icon/OxyIcon.js";
 import { Header, GroupedSection, LoadingState } from "../components/index.js";
 import { useI18n } from "../hooks/useI18n.js";
@@ -29,11 +30,15 @@ const ModernAccountSwitcherScreen = ({
     logoutAll,
     refreshSessions,
     isLoading = false,
-    isAuthenticated = false
+    isAuthenticated = false,
+    actingAs,
+    managedAccounts,
+    setActingAs
   } = useOxy();
   const [sessionsWithUsers, setSessionsWithUsers] = useState([]);
   const [switchingToUserId, setSwitchingToUserId] = useState(null);
   const [removingUserId, setRemovingUserId] = useState(null);
+  const [switchingManagedId, setSwitchingManagedId] = useState(null);
 
   // Device session management state
   const [showDeviceManagement, setShowDeviceManagement] = useState(false);
@@ -41,6 +46,16 @@ const ModernAccountSwitcherScreen = ({
   const [loadingDeviceSessions, setLoadingDeviceSessions] = useState(false);
   const [remotingLogoutSessionId, setRemoteLogoutSessionId] = useState(null);
   const [loggingOutAllDevices, setLoggingOutAllDevices] = useState(false);
+
+  // Pending state for prompts
+  const [pendingRemoveSession, setPendingRemoveSession] = useState(null);
+  const [pendingRemoteLogout, setPendingRemoteLogout] = useState(null);
+
+  // Prompt controls
+  const removeSessionPrompt = usePromptControl();
+  const logoutAllPrompt = usePromptControl();
+  const remoteLogoutPrompt = usePromptControl();
+  const logoutAllDevicesPrompt = usePromptControl();
   const screenWidth = Dimensions.get('window').width;
   const {
     t
@@ -135,45 +150,75 @@ const ModernAccountSwitcherScreen = ({
       setSwitchingToUserId(null);
     }
   }, [activeSessionId, switchSession, onClose, t, switchingToUserId]);
-  const handleRemoveSession = useCallback(async (sessionId, displayName) => {
-    if (removingUserId) return; // Already removing
-
-    confirmAction(t('accountSwitcher.confirms.remove', {
+  const confirmRemoveSession = useCallback((sessionId, displayName) => {
+    if (removingUserId) return;
+    setPendingRemoveSession({
+      sessionId,
       displayName
-    }) || `Are you sure you want to remove ${displayName} from this device? You'll need to sign in again to access this account.`, async () => {
-      setRemovingUserId(sessionId);
-      try {
-        await removeSession(sessionId);
-        toast.success(t('accountSwitcher.toasts.removeSuccess') || 'Account removed successfully!');
-      } catch (error) {
-        if (__DEV__) {
-          console.error('Remove session failed:', error);
-        }
-        toast.error(t('accountSwitcher.toasts.removeFailed') || 'There was a problem removing the account. Please try again.');
-      } finally {
-        setRemovingUserId(null);
-      }
     });
-  }, [removeSession, t, removingUserId]);
-  const handleLogoutAll = useCallback(() => {
-    confirmAction(t('accountSwitcher.confirms.logoutAll') || 'Are you sure you want to sign out of all accounts? This will remove all saved accounts from this device.', async () => {
-      try {
-        await logoutAll();
-        toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'All accounts signed out successfully!');
-        if (onClose) {
-          onClose();
-        }
-      } catch (error) {
-        if (__DEV__) {
-          console.error('Logout all failed:', error);
-        }
-        const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-        toast.error(t('accountSwitcher.toasts.signOutAllFailed', {
-          error: errorMessage
-        }) || `There was a problem signing out: ${errorMessage}`);
+    removeSessionPrompt.open();
+  }, [removingUserId, removeSessionPrompt]);
+  const handleRemoveSession = useCallback(async () => {
+    if (!pendingRemoveSession) return;
+    const {
+      sessionId
+    } = pendingRemoveSession;
+    setRemovingUserId(sessionId);
+    try {
+      await removeSession(sessionId);
+      toast.success(t('accountSwitcher.toasts.removeSuccess') || 'Account removed successfully!');
+    } catch (error) {
+      if (__DEV__) {
+        console.error('Remove session failed:', error);
       }
-    });
+      toast.error(t('accountSwitcher.toasts.removeFailed') || 'There was a problem removing the account. Please try again.');
+    } finally {
+      setRemovingUserId(null);
+      setPendingRemoveSession(null);
+    }
+  }, [pendingRemoveSession, removeSession, t]);
+  const confirmLogoutAll = useCallback(() => {
+    logoutAllPrompt.open();
+  }, [logoutAllPrompt]);
+  const handleLogoutAll = useCallback(async () => {
+    try {
+      await logoutAll();
+      toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'All accounts signed out successfully!');
+      if (onClose) {
+        onClose();
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error('Logout all failed:', error);
+      }
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+      toast.error(t('accountSwitcher.toasts.signOutAllFailed', {
+        error: errorMessage
+      }) || `There was a problem signing out: ${errorMessage}`);
+    }
   }, [logoutAll, onClose, t]);
+  const handleSwitchToManagedAccount = useCallback(async accountId => {
+    if (actingAs === accountId) return; // Already acting as this account
+    if (switchingManagedId) return; // Already switching
+
+    setSwitchingManagedId(accountId);
+    try {
+      setActingAs(accountId);
+      toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched identity successfully!');
+      onClose?.();
+    } catch (error) {
+      if (__DEV__) {
+        console.error('Switch managed account failed:', error);
+      }
+      toast.error('Failed to switch identity. Please try again.');
+    } finally {
+      setSwitchingManagedId(null);
+    }
+  }, [actingAs, switchingManagedId, setActingAs, t, onClose]);
+  const handleSwitchBackToPrimary = useCallback(() => {
+    setActingAs(null);
+    toast.success('Switched back to primary account');
+  }, [setActingAs]);
 
   // Device session management functions - optimized with useCallback
   const loadAllDeviceSessions = useCallback(async () => {
@@ -192,58 +237,64 @@ const ModernAccountSwitcherScreen = ({
       setLoadingDeviceSessions(false);
     }
   }, [oxyServices, activeSessionId, t]);
-  const handleRemoteSessionLogout = useCallback((sessionId, deviceName) => {
-    if (remotingLogoutSessionId) return; // Already processing
-
-    confirmAction(t('accountSwitcher.confirms.remoteLogout', {
+  const confirmRemoteSessionLogout = useCallback((sessionId, deviceName) => {
+    if (remotingLogoutSessionId) return;
+    setPendingRemoteLogout({
+      sessionId,
       deviceName
-    }) || `Are you sure you want to sign out from "${deviceName}"? This will end the session on that device.`, async () => {
-      setRemoteLogoutSessionId(sessionId);
-      try {
-        await oxyServices?.logoutSession((activeSessionId ?? null) || '', sessionId);
-        await loadAllDeviceSessions();
-        toast.success(t('accountSwitcher.toasts.remoteSignOutSuccess', {
-          deviceName
-        }) || `Signed out from ${deviceName} successfully!`);
-      } catch (error) {
-        if (__DEV__) {
-          console.error('Remote logout failed:', error);
-        }
-        toast.error(t('accountSwitcher.toasts.remoteSignOutFailed') || 'There was a problem signing out from the device. Please try again.');
-      } finally {
-        setRemoteLogoutSessionId(null);
-      }
     });
-  }, [activeSessionId, oxyServices, loadAllDeviceSessions, t, remotingLogoutSessionId]);
-  const handleLogoutAllDevices = useCallback(() => {
+    remoteLogoutPrompt.open();
+  }, [remotingLogoutSessionId, remoteLogoutPrompt]);
+  const handleRemoteSessionLogout = useCallback(async () => {
+    if (!pendingRemoteLogout) return;
+    const {
+      sessionId
+    } = pendingRemoteLogout;
+    setRemoteLogoutSessionId(sessionId);
+    try {
+      await oxyServices?.logoutSession((activeSessionId ?? null) || '', sessionId);
+      await loadAllDeviceSessions();
+      toast.success(t('accountSwitcher.toasts.remoteSignOutSuccess', {
+        deviceName: pendingRemoteLogout.deviceName
+      }) || `Signed out from ${pendingRemoteLogout.deviceName} successfully!`);
+    } catch (error) {
+      if (__DEV__) {
+        console.error('Remote logout failed:', error);
+      }
+      toast.error(t('accountSwitcher.toasts.remoteSignOutFailed') || 'There was a problem signing out from the device. Please try again.');
+    } finally {
+      setRemoteLogoutSessionId(null);
+      setPendingRemoteLogout(null);
+    }
+  }, [pendingRemoteLogout, activeSessionId, oxyServices, loadAllDeviceSessions, t]);
+  const confirmLogoutAllDevices = useCallback(() => {
     const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
     if (otherDevicesCount === 0) {
       toast.info(t('accountSwitcher.toasts.noOtherDeviceSessions') || 'No other device sessions found to sign out from.');
       return;
     }
-    if (loggingOutAllDevices) return; // Already processing
-
-    confirmAction(t('accountSwitcher.confirms.logoutOthers', {
-      count: otherDevicesCount
-    }) || `Are you sure you want to sign out from all ${otherDevicesCount} other device(s)? This will end sessions on all other devices except this one.`, async () => {
-      setLoggingOutAllDevices(true);
-      try {
-        await oxyServices?.logoutAllDeviceSessions((activeSessionId ?? null) || '');
-        await loadAllDeviceSessions();
-        toast.success(t('accountSwitcher.toasts.signOutOthersSuccess') || 'Signed out from all other devices successfully!');
-      } catch (error) {
-        if (__DEV__) {
-          console.error('Logout all devices failed:', error);
-        }
-        toast.error(t('accountSwitcher.toasts.signOutOthersFailed') || 'There was a problem signing out from other devices. Please try again.');
-      } finally {
-        setLoggingOutAllDevices(false);
+    if (loggingOutAllDevices) return;
+    logoutAllDevicesPrompt.open();
+  }, [deviceSessions, loggingOutAllDevices, logoutAllDevicesPrompt, t]);
+  const handleLogoutAllDevices = useCallback(async () => {
+    setLoggingOutAllDevices(true);
+    try {
+      await oxyServices?.logoutAllDeviceSessions((activeSessionId ?? null) || '');
+      await loadAllDeviceSessions();
+      toast.success(t('accountSwitcher.toasts.signOutOthersSuccess') || 'Signed out from all other devices successfully!');
+    } catch (error) {
+      if (__DEV__) {
+        console.error('Logout all devices failed:', error);
       }
-    });
-  }, [deviceSessions, activeSessionId, oxyServices, loadAllDeviceSessions, t, loggingOutAllDevices]);
+      toast.error(t('accountSwitcher.toasts.signOutOthersFailed') || 'There was a problem signing out from other devices. Please try again.');
+    } finally {
+      setLoggingOutAllDevices(false);
+    }
+  }, [activeSessionId, oxyServices, loadAllDeviceSessions, t]);
 
   // Memoize filtered sessions for performance
   const otherSessions = useMemo(() => sessionsWithUsers.filter(s => s.sessionId !== (activeSessionId ?? null)), [sessionsWithUsers, activeSessionId]);
+  const otherDevicesCount = useMemo(() => deviceSessions.filter(session => !session.isCurrent).length, [deviceSessions]);
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, {
       backgroundColor: bloomTheme.colors.background
@@ -377,7 +428,7 @@ const ModernAccountSwitcherScreen = ({
                   })
                 }), /*#__PURE__*/_jsx(TouchableOpacity, {
                   style: styles.removeButton,
-                  onPress: () => handleRemoveSession(sessionWithUser.sessionId, displayName),
+                  onPress: () => confirmRemoveSession(sessionWithUser.sessionId, displayName),
                   disabled: isSwitching || isRemoving,
                   children: isRemoving ? /*#__PURE__*/_jsx(ActivityIndicator, {
                     size: "small",
@@ -391,6 +442,178 @@ const ModernAccountSwitcherScreen = ({
               })]
             }, `session-${sessionWithUser.sessionId}-${index}`);
           })]
+        }), actingAs && /*#__PURE__*/_jsx(View, {
+          style: styles.section,
+          children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.actingAsBanner],
+            onPress: handleSwitchBackToPrimary,
+            activeOpacity: 0.7,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Switch back to primary account"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "You are currently acting as another identity"
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.switchBackButton,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.switchBackButtonText,
+                children: "Switch Back"
+              })
+            })]
+          })
+        }), managedAccounts.length > 0 && /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: "Managed Accounts"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.sectionSubtitle,
+            children: "Identities you manage"
+          }), managedAccounts.map((managed, index) => {
+            const account = managed.account;
+            if (!account) return null;
+            const isActive = actingAs === managed.accountId;
+            const isSwitching = switchingManagedId === managed.accountId;
+            const isFirst = index === 0;
+            const isLast = index === managedAccounts.length - 1;
+            const managedDisplayName = typeof account.name === 'object' ? account.name.full || account.name.first || account.username : account.name || account.username || 'Unknown';
+
+            // Determine the manager role for badge display
+            const myRole = managed.managers?.find(m => m.userId === user?.id)?.role ?? 'owner';
+            return /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: [styles.settingItem, isFirst && styles.firstSettingItem, isLast && styles.lastSettingItem, isActive && styles.currentAccountCard],
+              onPress: () => handleSwitchToManagedAccount(managed.accountId),
+              disabled: isActive || isSwitching,
+              activeOpacity: 0.7,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.userIcon,
+                children: [account.avatar ? /*#__PURE__*/_jsx(Image, {
+                  source: {
+                    uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb')
+                  },
+                  style: styles.accountAvatarImage
+                }) : /*#__PURE__*/_jsx(View, {
+                  style: [styles.accountAvatarFallback, styles.managedAvatarFallback],
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: styles.accountAvatarText,
+                    children: managedDisplayName.charAt(0).toUpperCase()
+                  })
+                }), isActive && /*#__PURE__*/_jsx(View, {
+                  style: styles.activeBadge,
+                  children: /*#__PURE__*/_jsx(OxyIcon, {
+                    name: "checkmark",
+                    size: 12,
+                    color: "#fff"
+                  })
+                })]
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.settingInfo,
+                children: /*#__PURE__*/_jsxs(View, {
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.settingLabel,
+                    children: managedDisplayName
+                  }), /*#__PURE__*/_jsxs(Text, {
+                    style: styles.settingDescription,
+                    children: ["@", account.username]
+                  })]
+                })
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.accountActions,
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: styles.roleBadge,
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: styles.roleBadgeText,
+                    children: myRole
+                  })
+                }), isActive ? /*#__PURE__*/_jsx(View, {
+                  style: styles.currentBadge,
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: styles.currentBadgeText,
+                    children: "Current"
+                  })
+                }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+                  style: styles.switchButton,
+                  onPress: () => handleSwitchToManagedAccount(managed.accountId),
+                  disabled: isSwitching,
+                  children: isSwitching ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                    size: "small",
+                    color: "#fff"
+                  }) : /*#__PURE__*/_jsx(Text, {
+                    style: styles.switchButtonText,
+                    children: "Act As"
+                  })
+                })]
+              })]
+            }, `managed-${managed.accountId}`);
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, {
+              marginTop: 8
+            }],
+            onPress: () => navigate?.('CreateManagedAccount'),
+            activeOpacity: 0.7,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.userIcon,
+              children: /*#__PURE__*/_jsx(View, {
+                style: [styles.accountAvatarFallback, {
+                  backgroundColor: '#007AFF20'
+                }],
+                children: /*#__PURE__*/_jsx(OxyIcon, {
+                  name: "add",
+                  size: 20,
+                  color: "#007AFF"
+                })
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.settingLabel, {
+                  color: '#007AFF'
+                }],
+                children: "Create New Identity"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Add a managed sub-account"
+              })]
+            })]
+          })]
+        }), managedAccounts.length === 0 && isAuthenticated && /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: "Managed Accounts"
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+            onPress: () => navigate?.('CreateManagedAccount'),
+            activeOpacity: 0.7,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.userIcon,
+              children: /*#__PURE__*/_jsx(View, {
+                style: [styles.accountAvatarFallback, {
+                  backgroundColor: '#007AFF20'
+                }],
+                children: /*#__PURE__*/_jsx(OxyIcon, {
+                  name: "add",
+                  size: 20,
+                  color: "#007AFF"
+                })
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.settingLabel, {
+                  color: '#007AFF'
+                }],
+                children: "Create New Identity"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Create a managed sub-account you control"
+              })]
+            })]
+          })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
@@ -417,7 +640,7 @@ const ModernAccountSwitcherScreen = ({
               iconColor: '#FF3B30',
               title: 'Sign Out All Accounts',
               subtitle: 'Remove all accounts from this device',
-              onPress: handleLogoutAll,
+              onPress: confirmLogoutAll,
               disabled: sessionsWithUsers.length === 0
             }]
           })]
@@ -460,11 +683,11 @@ const ModernAccountSwitcherScreen = ({
               subtitle: t('accountSwitcher.device.lastActive', {
                 date: new Date(session.lastActive).toLocaleDateString()
               }) || `Last active: ${new Date(session.lastActive).toLocaleDateString()}`,
-              onPress: session.isCurrent ? undefined : () => handleRemoteSessionLogout(session.sessionId, session.deviceName),
+              onPress: session.isCurrent ? undefined : () => confirmRemoteSessionLogout(session.sessionId, session.deviceName),
               disabled: session.isCurrent || remotingLogoutSessionId === session.sessionId,
               customContent: !session.isCurrent ? /*#__PURE__*/_jsx(TouchableOpacity, {
                 style: styles.removeButton,
-                onPress: () => handleRemoteSessionLogout(session.sessionId, session.deviceName),
+                onPress: () => confirmRemoteSessionLogout(session.sessionId, session.deviceName),
                 disabled: remotingLogoutSessionId === session.sessionId,
                 children: remotingLogoutSessionId === session.sessionId ? /*#__PURE__*/_jsx(ActivityIndicator, {
                   size: "small",
@@ -512,6 +735,40 @@ const ModernAccountSwitcherScreen = ({
           })
         })]
       })
+    }), /*#__PURE__*/_jsx(Prompt.Basic, {
+      control: removeSessionPrompt,
+      title: t('accountSwitcher.confirms.removeTitle') || 'Remove Account',
+      description: pendingRemoveSession ? t('accountSwitcher.confirms.remove', {
+        displayName: pendingRemoveSession.displayName
+      }) || `Are you sure you want to remove ${pendingRemoveSession.displayName} from this device? You'll need to sign in again to access this account.` : '',
+      onConfirm: handleRemoveSession,
+      confirmButtonCta: t('common.remove') || 'Remove',
+      confirmButtonColor: "negative"
+    }), /*#__PURE__*/_jsx(Prompt.Basic, {
+      control: logoutAllPrompt,
+      title: t('accountSwitcher.confirms.logoutAllTitle') || 'Sign Out All',
+      description: t('accountSwitcher.confirms.logoutAll') || 'Are you sure you want to sign out of all accounts? This will remove all saved accounts from this device.',
+      onConfirm: handleLogoutAll,
+      confirmButtonCta: t('common.signOutAll') || 'Sign Out All',
+      confirmButtonColor: "negative"
+    }), /*#__PURE__*/_jsx(Prompt.Basic, {
+      control: remoteLogoutPrompt,
+      title: t('accountSwitcher.confirms.remoteLogoutTitle') || 'Remote Sign Out',
+      description: pendingRemoteLogout ? t('accountSwitcher.confirms.remoteLogout', {
+        deviceName: pendingRemoteLogout.deviceName
+      }) || `Are you sure you want to sign out from "${pendingRemoteLogout.deviceName}"? This will end the session on that device.` : '',
+      onConfirm: handleRemoteSessionLogout,
+      confirmButtonCta: t('common.signOut') || 'Sign Out',
+      confirmButtonColor: "negative"
+    }), /*#__PURE__*/_jsx(Prompt.Basic, {
+      control: logoutAllDevicesPrompt,
+      title: t('accountSwitcher.confirms.logoutOthersTitle') || 'Sign Out Other Devices',
+      description: t('accountSwitcher.confirms.logoutOthers', {
+        count: otherDevicesCount
+      }) || `Are you sure you want to sign out from all ${otherDevicesCount} other device(s)? This will end sessions on all other devices except this one.`,
+      onConfirm: handleLogoutAllDevices,
+      confirmButtonCta: t('common.signOutAll') || 'Sign Out All',
+      confirmButtonColor: "negative"
     })]
   });
 };
@@ -672,6 +929,42 @@ const styles = StyleSheet.create({
     color: '#fff',
     fontSize: 16,
     fontWeight: '600'
+  },
+  sectionSubtitle: {
+    fontSize: 13,
+    color: '#888',
+    marginBottom: 12
+  },
+  managedAvatarFallback: {
+    backgroundColor: '#5856D6'
+  },
+  roleBadge: {
+    backgroundColor: '#F2F2F7',
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 8
+  },
+  roleBadgeText: {
+    color: '#666',
+    fontSize: 11,
+    fontWeight: '500',
+    textTransform: 'capitalize'
+  },
+  actingAsBanner: {
+    borderWidth: 2,
+    borderColor: '#FF9500',
+    backgroundColor: '#FF950010'
+  },
+  switchBackButton: {
+    backgroundColor: '#FF9500',
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 16
+  },
+  switchBackButtonText: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: '600'
   }
 });
 export default ModernAccountSwitcherScreen;