@oxyhq/services 6.9.44 → 6.9.46

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -7,7 +7,6 @@ import {
     StyleSheet,
     ActivityIndicator,
     ScrollView,
-    Alert,
     Platform,
     Image,
     Dimensions,
@@ -17,11 +16,14 @@ 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';
-import { Header, GroupedSection, LoadingState } from '../components';
+import { Header, LoadingState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
@@ -77,6 +79,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();
 
@@ -171,47 +183,48 @@ 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) => {
@@ -257,30 +270,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) {
@@ -288,27 +303,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(
@@ -316,6 +329,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 */}
@@ -440,7 +458,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 ? (
@@ -603,38 +621,28 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                         {/* Quick Actions */}
                         <View style={styles.section}>
-                            <Text style={styles.sectionTitle}>Quick Actions</Text>
-
-                            <GroupedSection
-                                items={[
-                                    {
-                                        id: 'add-account',
-                                        icon: 'account-plus',
-                                        iconColor: '#007AFF',
-                                        title: 'Add Another Account',
-                                        subtitle: 'Sign in with a different account',
-                                        onPress: () => navigate?.('OxyAuth'),
-                                    },
-                                    {
-                                        id: 'device-management',
-                                        icon: 'cellphone',
-                                        iconColor: '#5856D6',
-                                        title: `${showDeviceManagement ? 'Hide' : 'Manage'} Device Sessions`,
-                                        subtitle: 'View and manage sessions on other devices',
-                                        onPress: () => setShowDeviceManagement(!showDeviceManagement),
-                                    },
-                                    {
-                                        id: 'sign-out-all',
-                                        icon: 'logout',
-                                        iconColor: '#FF3B30',
-                                        title: 'Sign Out All Accounts',
-                                        subtitle: 'Remove all accounts from this device',
-                                        onPress: handleLogoutAll,
-                                        disabled: sessionsWithUsers.length === 0,
-                                    },
-                                ]}
-
-                            />
+                            <SettingsListGroup title="Quick Actions">
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="account-plus" color="#007AFF" />}
+                                    title="Add Another Account"
+                                    description="Sign in with a different account"
+                                    onPress={() => navigate?.('OxyAuth')}
+                                />
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="cellphone" color="#5856D6" />}
+                                    title={`${showDeviceManagement ? 'Hide' : 'Manage'} Device Sessions`}
+                                    description="View and manage sessions on other devices"
+                                    onPress={() => setShowDeviceManagement(!showDeviceManagement)}
+                                />
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="logout" color="#FF3B30" />}
+                                    title="Sign Out All Accounts"
+                                    description="Remove all accounts from this device"
+                                    onPress={confirmLogoutAll}
+                                    disabled={sessionsWithUsers.length === 0}
+                                    destructive={true}
+                                />
+                            </SettingsListGroup>
                         </View>
 
                         {/* Device Management Section */}
@@ -643,62 +651,53 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                 <Text style={styles.sectionTitle}>{t('accountSwitcher.sections.deviceSessions') || 'Device Sessions'}</Text>
 
                                 {loadingDeviceSessions ? (
-                                    <GroupedSection
-                                        items={[
-                                            {
-                                                id: 'loading-device-sessions',
-                                                icon: 'sync',
-                                                iconColor: '#007AFF',
-                                                title: t('accountSwitcher.device.loadingTitle') || 'Loading device sessions...',
-                                                subtitle: t('accountSwitcher.device.loadingSubtitle') || 'Please wait while we fetch your device sessions',
-                                                disabled: true,
-                                                customContent: (
-                                                    <ActivityIndicator size="small" color="#007AFF" style={{ marginRight: 16 }} />
-                                                ),
-                                            },
-                                        ]}
-
-                                    />
+                                    <SettingsListGroup>
+                                        <SettingsListItem
+                                            icon={<SettingsIcon name="sync" color="#007AFF" />}
+                                            title={t('accountSwitcher.device.loadingTitle') || 'Loading device sessions...'}
+                                            description={t('accountSwitcher.device.loadingSubtitle') || 'Please wait while we fetch your device sessions'}
+                                            disabled={true}
+                                            rightElement={<ActivityIndicator size="small" color="#007AFF" />}
+                                            showChevron={false}
+                                        />
+                                    </SettingsListGroup>
                                 ) : deviceSessions.length === 0 ? (
-                                    <GroupedSection
-                                        items={[
-                                            {
-                                                id: 'no-device-sessions',
-                                                icon: 'cellphone',
-                                                iconColor: '#ccc',
-                                                title: t('accountSwitcher.device.noneTitle') || 'No device sessions found',
-                                                subtitle: t('accountSwitcher.device.noneSubtitle') || 'Device session management not available',
-                                                disabled: true,
-                                            },
-                                        ]}
-
-                                    />
+                                    <SettingsListGroup>
+                                        <SettingsListItem
+                                            icon={<SettingsIcon name="cellphone" color="#ccc" />}
+                                            title={t('accountSwitcher.device.noneTitle') || 'No device sessions found'}
+                                            description={t('accountSwitcher.device.noneSubtitle') || 'Device session management not available'}
+                                            disabled={true}
+                                            showChevron={false}
+                                        />
+                                    </SettingsListGroup>
                                 ) : (
-                                    <GroupedSection
-                                        items={deviceSessions.map((session, index) => ({
-                                            id: `device-session-${session.sessionId}`,
-                                            icon: session.isCurrent ? 'cellphone' : 'cellphone-basic',
-                                            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),
-                                            disabled: session.isCurrent || remotingLogoutSessionId === session.sessionId,
-                                            customContent: !session.isCurrent ? (
-                                                <TouchableOpacity
-                                                    style={styles.removeButton}
-                                                    onPress={() => handleRemoteSessionLogout(session.sessionId, session.deviceName)}
-                                                    disabled={remotingLogoutSessionId === session.sessionId}
-                                                >
-                                                    {remotingLogoutSessionId === session.sessionId ? (
-                                                        <ActivityIndicator size="small" color="#FF3B30" />
-                                                    ) : (
-                                                        <OxyIcon name="log-out" size={16} color="#FF3B30" />
-                                                    )}
-                                                </TouchableOpacity>
-                                            ) : undefined,
-                                        }))}
-
-                                    />
+                                    <SettingsListGroup>
+                                        {deviceSessions.map((session) => (
+                                            <SettingsListItem
+                                                key={`device-session-${session.sessionId}`}
+                                                icon={<SettingsIcon name={session.isCurrent ? 'cellphone' : 'cellphone-basic'} color={session.isCurrent ? '#34C759' : '#8E8E93'} />}
+                                                title={`${session.deviceName} ${session.isCurrent ? `(${t('accountSwitcher.device.thisDevice') || 'This device'})` : ''}`}
+                                                description={t('accountSwitcher.device.lastActive', { date: new Date(session.lastActive).toLocaleDateString() }) || `Last active: ${new Date(session.lastActive).toLocaleDateString()}`}
+                                                onPress={session.isCurrent ? undefined : () => confirmRemoteSessionLogout(session.sessionId, session.deviceName)}
+                                                disabled={session.isCurrent || remotingLogoutSessionId === session.sessionId}
+                                                showChevron={false}
+                                                rightElement={!session.isCurrent ? (
+                                                    <TouchableOpacity
+                                                        style={styles.removeButton}
+                                                        onPress={() => confirmRemoteSessionLogout(session.sessionId, session.deviceName)}
+                                                        disabled={remotingLogoutSessionId === session.sessionId}
+                                                    >
+                                                        {remotingLogoutSessionId === session.sessionId ? (
+                                                            <ActivityIndicator size="small" color="#FF3B30" />
+                                                        ) : (
+                                                            <OxyIcon name="log-out" size={16} color="#FF3B30" />
+                                                        )}
+                                                    </TouchableOpacity>
+                                                ) : undefined}
+                                            />
+                                        ))}
+                                    </SettingsListGroup>
                                 )}
                             </View>
                         )}
@@ -706,39 +705,67 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                         {/* Empty State */}
                         {sessionsWithUsers.length === 0 && (
                             <View style={styles.section}>
-                                <GroupedSection
-                                    items={[
-                                        {
-                                            id: 'empty-state',
-                                            icon: 'account-outline',
-                                            iconColor: '#ccc',
-                                            title: t('accountSwitcher.empty.title') || 'No saved accounts',
-                                            subtitle: t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly',
-                                            onPress: () => navigate?.('OxyAuth'),
-                                            customContent: (
-                                                <View style={styles.emptyStateContainer}>
-                                                    <OxyIcon name="person-outline" size={48} color="#ccc" />
-                                                    <Text style={styles.emptyStateTitle}>{t('accountSwitcher.empty.title') || 'No saved accounts'}</Text>
-                                                    <Text style={styles.emptyStateDescription}>
-                                                        {t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly'}
-                                                    </Text>
-                                                    <TouchableOpacity
-                                                        style={styles.addAccountButton}
-                                                        onPress={() => navigate?.('OxyAuth')}
-                                                    >
-                                                        <Text style={styles.addAccountButtonText}>{t('accountCenter.sections.addAccount') || 'Add Account'}</Text>
-                                                    </TouchableOpacity>
-                                                </View>
-                                            ),
-                                        },
-                                    ]}
-
-                                />
+                                <SettingsListGroup>
+                                    <SettingsListItem
+                                        icon={<SettingsIcon name="account-outline" color="#ccc" />}
+                                        title={t('accountSwitcher.empty.title') || 'No saved accounts'}
+                                        description={t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly'}
+                                        onPress={() => navigate?.('OxyAuth')}
+                                        rightElement={
+                                            <View style={styles.emptyStateContainer}>
+                                                <OxyIcon name="person-outline" size={48} color="#ccc" />
+                                                <Text style={styles.emptyStateTitle}>{t('accountSwitcher.empty.title') || 'No saved accounts'}</Text>
+                                                <Text style={styles.emptyStateDescription}>
+                                                    {t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly'}
+                                                </Text>
+                                                <TouchableOpacity
+                                                    style={styles.addAccountButton}
+                                                    onPress={() => navigate?.('OxyAuth')}
+                                                >
+                                                    <Text style={styles.addAccountButtonText}>{t('accountCenter.sections.addAccount') || 'Add Account'}</Text>
+                                                </TouchableOpacity>
+                                            </View>
+                                        }
+                                        showChevron={false}
+                                    />
+                                </SettingsListGroup>
                             </View>
                         )}
                     </>
                 )}
             </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>
     );
 };