@oxyhq/services 6.9.43 → 6.9.45

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -7,7 +7,6 @@ import {
     StyleSheet,
     ActivityIndicator,
     ScrollView,
-    Alert,
     Platform,
     Image,
     Dimensions,
@@ -17,7 +16,8 @@ import type { ClientSession } from '@oxyhq/core';
 import { fontFamilies } from '../styles/fonts';
 import type { User } from '@oxyhq/core';
 import { toast } from '../../lib/sonner';
-import { confirmAction } from '../utils/confirmAction';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import OxyIcon from '../components/icon/OxyIcon';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
@@ -60,11 +60,15 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         refreshSessions,
         isLoading = false,
         isAuthenticated = false,
+        actingAs,
+        managedAccounts,
+        setActingAs,
     } = useOxy();
 
     const [sessionsWithUsers, setSessionsWithUsers] = useState<SessionWithUser[]>([]);
     const [switchingToUserId, setSwitchingToUserId] = useState<string | null>(null);
     const [removingUserId, setRemovingUserId] = useState<string | null>(null);
+    const [switchingManagedId, setSwitchingManagedId] = useState<string | null>(null);
 
     // Device session management state
     const [showDeviceManagement, setShowDeviceManagement] = useState(false);
@@ -73,6 +77,16 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     const [remotingLogoutSessionId, setRemoteLogoutSessionId] = useState<string | null>(null);
     const [loggingOutAllDevices, setLoggingOutAllDevices] = useState(false);
 
+    // Pending state for prompts
+    const [pendingRemoveSession, setPendingRemoveSession] = useState<{ sessionId: string; displayName: string } | null>(null);
+    const [pendingRemoteLogout, setPendingRemoteLogout] = useState<{ sessionId: string; deviceName: string } | null>(null);
+
+    // Prompt controls
+    const removeSessionPrompt = usePromptControl();
+    const logoutAllPrompt = usePromptControl();
+    const remoteLogoutPrompt = usePromptControl();
+    const logoutAllDevicesPrompt = usePromptControl();
+
     const screenWidth = Dimensions.get('window').width;
     const { t } = useI18n();
 
@@ -167,49 +181,74 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         }
     }, [activeSessionId, switchSession, onClose, t, switchingToUserId]);
 
-    const handleRemoveSession = useCallback(async (sessionId: string, displayName: string) => {
-        if (removingUserId) return; // Already removing
-
-        confirmAction(
-            t('accountSwitcher.confirms.remove', { 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);
-                }
+    const confirmRemoveSession = useCallback((sessionId: string, displayName: string) => {
+        if (removingUserId) return;
+        setPendingRemoveSession({ sessionId, displayName });
+        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);
             }
-        );
-    }, [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}`);
-                }
+            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: string) => {
+        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 () => {
         const currentActiveSessionId = activeSessionId ?? null;
@@ -229,30 +268,32 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         }
     }, [oxyServices, activeSessionId, t]);
 
-    const handleRemoteSessionLogout = useCallback((sessionId: string, deviceName: string) => {
-        if (remotingLogoutSessionId) return; // Already processing
-
-        confirmAction(
-            t('accountSwitcher.confirms.remoteLogout', { 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);
-                }
+    const confirmRemoteSessionLogout = useCallback((sessionId: string, deviceName: string) => {
+        if (remotingLogoutSessionId) return;
+        setPendingRemoteLogout({ sessionId, deviceName });
+        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);
             }
-        );
-    }, [activeSessionId, oxyServices, loadAllDeviceSessions, t, remotingLogoutSessionId]);
+            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 handleLogoutAllDevices = useCallback(() => {
+    const confirmLogoutAllDevices = useCallback(() => {
         const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
 
         if (otherDevicesCount === 0) {
@@ -260,27 +301,25 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
             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(
@@ -288,6 +327,11 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         [sessionsWithUsers, activeSessionId]
     );
 
+    const otherDevicesCount = useMemo(
+        () => deviceSessions.filter(session => !session.isCurrent).length,
+        [deviceSessions]
+    );
+
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             {/* Header */}
@@ -412,7 +456,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                 </TouchableOpacity>
                                                 <TouchableOpacity
                                                     style={styles.removeButton}
-                                                    onPress={() => handleRemoveSession(sessionWithUser.sessionId, displayName)}
+                                                    onPress={() => confirmRemoveSession(sessionWithUser.sessionId, displayName)}
                                                     disabled={isSwitching || isRemoving}
                                                 >
                                                     {isRemoving ? (
@@ -428,6 +472,151 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                             </View>
                         )}
 
+                        {/* Acting as banner - show switch-back when acting as a managed account */}
+                        {actingAs && (
+                            <View style={styles.section}>
+                                <TouchableOpacity
+                                    style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.actingAsBanner]}
+                                    onPress={handleSwitchBackToPrimary}
+                                    activeOpacity={0.7}
+                                >
+                                    <View style={styles.settingInfo}>
+                                        <Text style={styles.settingLabel}>Switch back to primary account</Text>
+                                        <Text style={styles.settingDescription}>You are currently acting as another identity</Text>
+                                    </View>
+                                    <View style={styles.switchBackButton}>
+                                        <Text style={styles.switchBackButtonText}>Switch Back</Text>
+                                    </View>
+                                </TouchableOpacity>
+                            </View>
+                        )}
+
+                        {/* Managed Accounts */}
+                        {managedAccounts.length > 0 && (
+                            <View style={styles.section}>
+                                <Text style={styles.sectionTitle}>Managed Accounts</Text>
+                                <Text style={styles.sectionSubtitle}>Identities you manage</Text>
+
+                                {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 (
+                                        <TouchableOpacity
+                                            key={`managed-${managed.accountId}`}
+                                            style={[
+                                                styles.settingItem,
+                                                isFirst && styles.firstSettingItem,
+                                                isLast && styles.lastSettingItem,
+                                                isActive && styles.currentAccountCard,
+                                            ]}
+                                            onPress={() => handleSwitchToManagedAccount(managed.accountId)}
+                                            disabled={isActive || isSwitching}
+                                            activeOpacity={0.7}
+                                        >
+                                            <View style={styles.userIcon}>
+                                                {account.avatar ? (
+                                                    <Image source={{ uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb') }} style={styles.accountAvatarImage} />
+                                                ) : (
+                                                    <View style={[styles.accountAvatarFallback, styles.managedAvatarFallback]}>
+                                                        <Text style={styles.accountAvatarText}>
+                                                            {managedDisplayName.charAt(0).toUpperCase()}
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                                {isActive && (
+                                                    <View style={styles.activeBadge}>
+                                                        <OxyIcon name="checkmark" size={12} color="#fff" />
+                                                    </View>
+                                                )}
+                                            </View>
+                                            <View style={styles.settingInfo}>
+                                                <View>
+                                                    <Text style={styles.settingLabel}>{managedDisplayName}</Text>
+                                                    <Text style={styles.settingDescription}>@{account.username}</Text>
+                                                </View>
+                                            </View>
+                                            <View style={styles.accountActions}>
+                                                <View style={styles.roleBadge}>
+                                                    <Text style={styles.roleBadgeText}>{myRole}</Text>
+                                                </View>
+                                                {isActive ? (
+                                                    <View style={styles.currentBadge}>
+                                                        <Text style={styles.currentBadgeText}>Current</Text>
+                                                    </View>
+                                                ) : (
+                                                    <TouchableOpacity
+                                                        style={styles.switchButton}
+                                                        onPress={() => handleSwitchToManagedAccount(managed.accountId)}
+                                                        disabled={isSwitching}
+                                                    >
+                                                        {isSwitching ? (
+                                                            <ActivityIndicator size="small" color="#fff" />
+                                                        ) : (
+                                                            <Text style={styles.switchButtonText}>Act As</Text>
+                                                        )}
+                                                    </TouchableOpacity>
+                                                )}
+                                            </View>
+                                        </TouchableOpacity>
+                                    );
+                                })}
+
+                                {/* Create New Identity */}
+                                <TouchableOpacity
+                                    style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, { marginTop: 8 }]}
+                                    onPress={() => navigate?.('CreateManagedAccount')}
+                                    activeOpacity={0.7}
+                                >
+                                    <View style={styles.userIcon}>
+                                        <View style={[styles.accountAvatarFallback, { backgroundColor: '#007AFF20' }]}>
+                                            <OxyIcon name="add" size={20} color="#007AFF" />
+                                        </View>
+                                    </View>
+                                    <View style={styles.settingInfo}>
+                                        <Text style={[styles.settingLabel, { color: '#007AFF' }]}>Create New Identity</Text>
+                                        <Text style={styles.settingDescription}>Add a managed sub-account</Text>
+                                    </View>
+                                </TouchableOpacity>
+                            </View>
+                        )}
+
+                        {/* Create first managed account (when none exist yet) */}
+                        {managedAccounts.length === 0 && isAuthenticated && (
+                            <View style={styles.section}>
+                                <Text style={styles.sectionTitle}>Managed Accounts</Text>
+                                <TouchableOpacity
+                                    style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}
+                                    onPress={() => navigate?.('CreateManagedAccount')}
+                                    activeOpacity={0.7}
+                                >
+                                    <View style={styles.userIcon}>
+                                        <View style={[styles.accountAvatarFallback, { backgroundColor: '#007AFF20' }]}>
+                                            <OxyIcon name="add" size={20} color="#007AFF" />
+                                        </View>
+                                    </View>
+                                    <View style={styles.settingInfo}>
+                                        <Text style={[styles.settingLabel, { color: '#007AFF' }]}>Create New Identity</Text>
+                                        <Text style={styles.settingDescription}>Create a managed sub-account you control</Text>
+                                    </View>
+                                </TouchableOpacity>
+                            </View>
+                        )}
+
                         {/* Quick Actions */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Quick Actions</Text>
@@ -456,7 +645,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                         iconColor: '#FF3B30',
                                         title: 'Sign Out All Accounts',
                                         subtitle: 'Remove all accounts from this device',
-                                        onPress: handleLogoutAll,
+                                        onPress: confirmLogoutAll,
                                         disabled: sessionsWithUsers.length === 0,
                                     },
                                 ]}
@@ -508,12 +697,12 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                             iconColor: session.isCurrent ? '#34C759' : '#8E8E93',
                                             title: `${session.deviceName} ${session.isCurrent ? `(${t('accountSwitcher.device.thisDevice') || 'This device'})` : ''}`,
                                             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 ? (
                                                 <TouchableOpacity
                                                     style={styles.removeButton}
-                                                    onPress={() => handleRemoteSessionLogout(session.sessionId, session.deviceName)}
+                                                    onPress={() => confirmRemoteSessionLogout(session.sessionId, session.deviceName)}
                                                     disabled={remotingLogoutSessionId === session.sessionId}
                                                 >
                                                     {remotingLogoutSessionId === session.sessionId ? (
@@ -566,6 +755,38 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                     </>
                 )}
             </ScrollView>
+            <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'
+            />
+            <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'
+            />
+            <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'
+            />
+            <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'
+            />
         </View>
     );
 };
@@ -729,6 +950,42 @@ const styles = StyleSheet.create({
         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;

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -7,10 +7,11 @@ import {
     TextInput,
     TouchableOpacity,
     ActivityIndicator,
-    Alert,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { Header, Section } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -27,9 +28,19 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
     const [reason, setReason] = useState('');
     const [evidence, setEvidence] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [successMessage, setSuccessMessage] = useState('');
 
     const bloomTheme = useTheme();
 
+    // Prompt controls
+    const successPrompt = usePromptControl();
+
+    const handleSuccessAcknowledged = useCallback(() => {
+        setReason('');
+        setEvidence('');
+        goBack?.();
+    }, [goBack]);
+
     const handleSubmit = useCallback(async () => {
         if (!reason.trim()) {
             toast.error(t('accountVerification.reasonRequired') || 'Please provide a reason for verification');
@@ -48,20 +59,10 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                 evidence.trim() || undefined
             );
 
-            Alert.alert(
-                t('accountVerification.successTitle') || 'Request Submitted',
-                t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`,
-                [
-                    {
-                        text: t('accountVerification.ok') || 'OK',
-                        onPress: () => {
-                            setReason('');
-                            setEvidence('');
-                            goBack?.();
-                        },
-                    },
-                ]
+            setSuccessMessage(
+                t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`
             );
+            successPrompt.open();
         } catch (error: unknown) {
             if (__DEV__) {
                 console.error('Failed to submit verification request:', error);
@@ -72,7 +73,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
         } finally {
             setIsSubmitting(false);
         }
-    }, [reason, evidence, oxyServices, t, goBack]);
+    }, [reason, evidence, oxyServices, t, successPrompt]);
 
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
@@ -158,6 +159,14 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                     </Text>
                 </Section>
             </ScrollView>
+            <Prompt.Basic
+                control={successPrompt}
+                title={t('accountVerification.successTitle') || 'Request Submitted'}
+                description={successMessage}
+                onConfirm={handleSuccessAcknowledged}
+                confirmButtonCta={t('accountVerification.ok') || 'OK'}
+                showCancel={false}
+            />
         </View>
     );
 };
@@ -214,4 +223,3 @@ const styles = StyleSheet.create({
 });
 
 export default React.memo(AccountVerificationScreen);
-