@oxyhq/services 6.9.44 → 6.9.45

package/src/ui/screens/AccountCenterScreen.tsx

@@ -11,8 +11,9 @@ import { useCallback, useMemo } from 'react';
 import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '@oxyhq/core';
 import { toast } from '../../lib/sonner';
-import { confirmAction } from '../utils/confirmAction';
 import { fontFamilies } from '../styles/fonts';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import ProfileCard from '../components/ProfileCard';
 import Section from '../components/Section';
 import QuickActions from '../components/QuickActions';
@@ -31,7 +32,6 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    // Use useOxy() hook for OxyContext values
     const { user, logout, isLoading, sessions, isAuthenticated, managedAccounts } = useOxy();
     const { t } = useI18n();
     const bloomTheme = useTheme();
@@ -39,8 +39,8 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     const normalizedTheme = normalizeTheme(theme);
     const dangerColor = bloomTheme.colors.error;
     const colors = Colors[normalizeColorScheme(colorScheme, normalizedTheme)];
+    const logoutPrompt = usePromptControl();
 
-    // Memoized logout handler - prevents unnecessary re-renders
     const handleLogout = useCallback(async () => {
         try {
             await logout();
@@ -55,14 +55,6 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
         }
     }, [logout, onClose, t]);
 
-    // Memoized confirm logout handler - prevents unnecessary re-renders
-    const confirmLogout = useCallback(() => {
-        confirmAction(
-            t('common.confirms.signOut') || 'Are you sure you want to sign out?',
-            handleLogout
-        );
-    }, [handleLogout, t]);
-
     if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
@@ -81,7 +73,6 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
 
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-            {/* Header with user profile */}
             {user && (
                 <ProfileCard
                     user={user}
@@ -93,7 +84,6 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
             )}
 
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
-                {/* Quick Actions */}
                 <Section title={t('accountCenter.sections.quickActions') || 'Quick Actions'} isFirst={true}>
                     <QuickActions
                         theme={normalizedTheme}
@@ -105,144 +95,58 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: colors.iconPersonalInfo, title: t('accountCenter.quickActions.billing') || 'Billing', onPress: () => navigate?.('PaymentGateway') }] : []),
                             ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: colors.iconStorage, title: t('accountCenter.quickActions.switch') || 'Switch', onPress: () => navigate?.('AccountSwitcher') }] : []),
                         ], [user?.isPremium, sessions, navigate, t, colors])}
-
                     />
                 </Section>
 
-                {/* Account Management */}
                 <SettingsListGroup title={t('accountCenter.sections.accountManagement') || 'Account Management'}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="account-circle" color={colors.iconSecurity} />}
-                        title={t('accountCenter.items.accountOverview.title') || 'Account Overview'}
-                        description={t('accountCenter.items.accountOverview.subtitle') || 'Complete account information'}
-                        onPress={() => navigate?.('AccountOverview')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="cog" color={colors.iconData} />}
-                        title={t('accountCenter.items.editProfile.title') || 'Edit Profile'}
-                        description={t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences'}
-                        onPress={() => navigate?.('AccountSettings')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="shield-check" color={colors.iconSecurity} />}
-                        title={t('accountCenter.items.manageSessions.title') || 'Manage Sessions'}
-                        description={t('accountCenter.items.manageSessions.subtitle') || 'Security and active devices'}
-                        onPress={() => navigate?.('SessionManagement')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="folder" color={colors.iconStorage} />}
-                        title={t('accountCenter.items.fileManagement.title') || 'File Management'}
-                        description={t('accountCenter.items.fileManagement.subtitle') || 'Upload, download, and manage your files'}
-                        onPress={() => navigate?.('FileManagement')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="star" color={colors.iconPayments} />}
-                        title={t('accountCenter.items.premium.title') || 'Oxy+ Subscriptions'}
-                        description={user?.isPremium ? (t('accountCenter.items.premium.manage') || 'Manage your premium plan') : (t('accountCenter.items.premium.upgrade') || 'Upgrade to premium features')}
-                        onPress={() => navigate?.('PremiumSubscription')}
-                    />
+                    <SettingsListItem icon={<SettingsIcon name="account-circle" color={colors.iconSecurity} />} title={t('accountCenter.items.accountOverview.title') || 'Account Overview'} description={t('accountCenter.items.accountOverview.subtitle') || 'Complete account information'} onPress={() => navigate?.('AccountOverview')} />
+                    <SettingsListItem icon={<SettingsIcon name="cog" color={colors.iconData} />} title={t('accountCenter.items.editProfile.title') || 'Edit Profile'} description={t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences'} onPress={() => navigate?.('AccountSettings')} />
+                    <SettingsListItem icon={<SettingsIcon name="shield-check" color={colors.iconSecurity} />} title={t('accountCenter.items.manageSessions.title') || 'Manage Sessions'} description={t('accountCenter.items.manageSessions.subtitle') || 'Security and active devices'} onPress={() => navigate?.('SessionManagement')} />
+                    <SettingsListItem icon={<SettingsIcon name="folder" color={colors.iconStorage} />} title={t('accountCenter.items.fileManagement.title') || 'File Management'} description={t('accountCenter.items.fileManagement.subtitle') || 'Upload, download, and manage your files'} onPress={() => navigate?.('FileManagement')} />
+                    <SettingsListItem icon={<SettingsIcon name="star" color={colors.iconPayments} />} title={t('accountCenter.items.premium.title') || 'Oxy+ Subscriptions'} description={user?.isPremium ? (t('accountCenter.items.premium.manage') || 'Manage your premium plan') : (t('accountCenter.items.premium.upgrade') || 'Upgrade to premium features')} onPress={() => navigate?.('PremiumSubscription')} />
                     {user?.isPremium ? (
-                        <SettingsListItem
-                            icon={<SettingsIcon name="credit-card" color={colors.iconPersonalInfo} />}
-                            title={t('accountCenter.items.billing.title') || 'Billing Management'}
-                            description={t('accountCenter.items.billing.subtitle') || 'Payment methods and invoices'}
-                            onPress={() => navigate?.('PaymentGateway')}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="credit-card" color={colors.iconPersonalInfo} />} title={t('accountCenter.items.billing.title') || 'Billing Management'} description={t('accountCenter.items.billing.subtitle') || 'Payment methods and invoices'} onPress={() => navigate?.('PaymentGateway')} />
                     ) : null}
                 </SettingsListGroup>
 
-                {/* Multi-Account Management */}
                 {sessions && sessions.length > 1 && (
                     <SettingsListGroup title={t('accountCenter.sections.multiAccount') || 'Multi-Account'}>
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-group" color={colors.iconStorage} />}
-                            title={t('accountCenter.items.switchAccount.title') || 'Switch Account'}
-                            description={t('accountCenter.items.switchAccount.subtitle', { count: sessions.length }) || `${sessions.length} accounts available`}
-                            onPress={() => navigate?.('AccountSwitcher')}
-                        />
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />}
-                            title={t('accountCenter.items.addAccount.title') || 'Add Another Account'}
-                            description={t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account'}
-                            onPress={() => navigate?.('OxyAuth')}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="account-group" color={colors.iconStorage} />} title={t('accountCenter.items.switchAccount.title') || 'Switch Account'} description={t('accountCenter.items.switchAccount.subtitle', { count: sessions.length }) || `${sessions.length} accounts available`} onPress={() => navigate?.('AccountSwitcher')} />
+                        <SettingsListItem icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />} title={t('accountCenter.items.addAccount.title') || 'Add Another Account'} description={t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account'} onPress={() => navigate?.('OxyAuth')} />
                     </SettingsListGroup>
                 )}
 
-                {/* Single Account Setup */}
                 {(!sessions || sessions.length <= 1) && (
                     <SettingsListGroup title={t('accountCenter.sections.addAccount') || 'Add Account'}>
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />}
-                            title={t('accountCenter.items.addAccount.title') || 'Add Another Account'}
-                            description={t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account'}
-                            onPress={() => navigate?.('OxyAuth')}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />} title={t('accountCenter.items.addAccount.title') || 'Add Another Account'} description={t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account'} onPress={() => navigate?.('OxyAuth')} />
                     </SettingsListGroup>
                 )}
 
-                {/* Managed Accounts */}
                 {isAuthenticated && (
                     <SettingsListGroup title="Managed Accounts">
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-switch" color={colors.iconStorage} />}
-                            title="Manage Identities"
-                            description={managedAccounts.length > 0
-                                ? `${managedAccounts.length} managed ${managedAccounts.length === 1 ? 'identity' : 'identities'}`
-                                : 'Sub-accounts you control'}
-                            onPress={() => navigate?.('AccountSwitcher')}
-                        />
-                        <SettingsListItem
-                            icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />}
-                            title="Create New Identity"
-                            description="Add a managed sub-account"
-                            onPress={() => navigate?.('CreateManagedAccount')}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="account-switch" color={colors.iconStorage} />} title="Manage Identities" description={managedAccounts.length > 0 ? `${managedAccounts.length} managed ${managedAccounts.length === 1 ? 'identity' : 'identities'}` : 'Sub-accounts you control'} onPress={() => navigate?.('AccountSwitcher')} />
+                        <SettingsListItem icon={<SettingsIcon name="account-plus" color={colors.iconPersonalInfo} />} title="Create New Identity" description="Add a managed sub-account" onPress={() => navigate?.('CreateManagedAccount')} />
                     </SettingsListGroup>
                 )}
 
-                {/* Additional Options */}
                 <SettingsListGroup title={t('accountCenter.sections.moreOptions') || 'More Options'}>
                     {Platform.OS !== 'web' ? (
-                        <SettingsListItem
-                            icon={<SettingsIcon name="bell" color={colors.iconStorage} />}
-                            title={t('accountCenter.items.notifications.title') || 'Notifications'}
-                            description={t('accountCenter.items.notifications.subtitle') || 'Manage notification settings'}
-                            onPress={() => navigate?.('AccountSettings', { activeTab: 'notifications' })}
-                        />
+                        <SettingsListItem icon={<SettingsIcon name="bell" color={colors.iconStorage} />} title={t('accountCenter.items.notifications.title') || 'Notifications'} description={t('accountCenter.items.notifications.subtitle') || 'Manage notification settings'} onPress={() => navigate?.('AccountSettings', { activeTab: 'notifications' })} />
                     ) : null}
-                    <SettingsListItem
-                        icon={<SettingsIcon name="translate" color={colors.iconPersonalInfo} />}
-                        title={t('language.title') || 'Language'}
-                        description={t('language.subtitle') || 'Choose your preferred language'}
-                        onPress={() => navigate?.('LanguageSelector')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="help-circle" color={colors.iconSecurity} />}
-                        title={t('accountOverview.items.help.title') || 'Help & Support'}
-                        description={t('accountOverview.items.help.subtitle') || 'Get help and contact support'}
-                        onPress={() => navigate?.('HelpSupport')}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="information" color="#8E8E93" />}
-                        title={t('accountCenter.items.appInfo.title') || 'App Information'}
-                        description={t('accountCenter.items.appInfo.subtitle') || 'Version and system details'}
-                        onPress={() => navigate?.('AppInfo')}
-                    />
+                    <SettingsListItem icon={<SettingsIcon name="translate" color={colors.iconPersonalInfo} />} title={t('language.title') || 'Language'} description={t('language.subtitle') || 'Choose your preferred language'} onPress={() => navigate?.('LanguageSelector')} />
+                    <SettingsListItem icon={<SettingsIcon name="help-circle" color={colors.iconSecurity} />} title={t('accountOverview.items.help.title') || 'Help & Support'} description={t('accountOverview.items.help.subtitle') || 'Get help and contact support'} onPress={() => navigate?.('HelpSupport')} />
+                    <SettingsListItem icon={<SettingsIcon name="information" color="#8E8E93" />} title={t('accountCenter.items.appInfo.title') || 'App Information'} description={t('accountCenter.items.appInfo.subtitle') || 'Version and system details'} onPress={() => navigate?.('AppInfo')} />
                 </SettingsListGroup>
 
-                {/* Sign Out Section */}
                 <SettingsListGroup>
                     <SettingsListItem
                         icon={<SettingsIcon name="logout" color={dangerColor} />}
                         title={isLoading ? (t('accountCenter.signingOut') || 'Signing out...') : (t('common.actions.signOut') || 'Sign Out')}
-                        onPress={confirmLogout}
+                        onPress={() => logoutPrompt.open()}
                         destructive={true}
                         showChevron={false}
                         disabled={isLoading}
-                        rightElement={isLoading ? (
-                            <ActivityIndicator color={dangerColor} size="small" />
-                        ) : undefined}
+                        rightElement={isLoading ? (<ActivityIndicator color={dangerColor} size="small" />) : undefined}
                     />
                 </SettingsListGroup>
 
@@ -252,32 +156,26 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     </Text>
                 </View>
             </ScrollView>
+
+            <Prompt.Basic
+                control={logoutPrompt}
+                title={t('common.actions.signOut') || 'Sign Out'}
+                description={t('common.confirms.signOut') || 'Are you sure you want to sign out?'}
+                onConfirm={handleLogout}
+                confirmButtonCta={t('common.actions.signOut') || 'Sign Out'}
+                confirmButtonColor="negative"
+            />
         </View>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    scrollView: {
-        flex: 1,
-    },
+    container: { flex: 1 },
+    scrollView: { flex: 1 },
     scrollContainer: screenContentStyle,
-    versionContainer: {
-        alignItems: 'center',
-        marginTop: 20,
-        marginBottom: 20,
-    },
-    versionText: {
-        fontSize: 12,
-        fontFamily: fontFamilies.inter,
-    },
-    message: {
-        fontSize: 16,
-        textAlign: 'center',
-        marginTop: 24,
-    },
+    versionContainer: { alignItems: 'center', marginTop: 20, marginBottom: 20 },
+    versionText: { fontSize: 12, fontFamily: fontFamilies.inter },
+    message: { fontSize: 16, textAlign: 'center', marginTop: 24 },
 });
 
 export default AccountCenterScreen;

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -6,7 +6,6 @@ import {
     StyleSheet,
     ActivityIndicator,
     ScrollView,
-    Alert,
     Platform,
     Image,
     TextStyle,
@@ -18,8 +17,9 @@ import Avatar from '../components/Avatar';
 import OxyIcon from '../components/icon/OxyIcon';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
-import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { Section, GroupedSection, GroupedItem } from '../components';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
@@ -37,6 +37,7 @@ import {
     createScreenContentStyle,
 } from '../constants/spacing';
 import { DeleteAccountModal } from '../components/modals';
+import { useDialogControl } from '@oxyhq/bloom/dialog';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 // Optional Lottie import - gracefully handle if not available
@@ -87,7 +88,10 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
-    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const deleteAccountControl = useDialogControl();
+    const logoutPrompt = usePromptControl();
+    const signOutAllPrompt = usePromptControl();
+    const downloadDataPrompt = usePromptControl();
     const lottieRef = useRef<any>(null);
     const hasPlayedRef = useRef(false);
     const insets = useSafeAreaInsets();
@@ -199,110 +203,44 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         }
     }, [logout, onClose]);
 
-    const confirmLogout = useCallback(() => {
-        confirmAction(t('common.confirms.signOut'), handleLogout);
-    }, [handleLogout]);
-
     const handleAddAccount = useCallback(() => {
         toast.info(t('accountOverview.addAccountComing'));
     }, [t]);
 
-    const handleSignOutAll = useCallback(() => {
-        confirmAction(t('common.confirms.signOutAll'), handleLogout);
-    }, [handleLogout]);
-
-    const handleDownloadData = useCallback(async () => {
-        if (!oxyServices || !user) {
-            toast.error(t('accountOverview.items.downloadData.error') || 'Service not available');
-            return;
-        }
-
+    const performDownload = useCallback(async (format: 'json' | 'csv') => {
+        if (!oxyServices || !user) { toast.error(t('accountOverview.items.downloadData.error') || 'Service not available'); return; }
         try {
-            Alert.alert(
-                t('accountOverview.items.downloadData.confirmTitle') || 'Download Account Data',
-                t('accountOverview.items.downloadData.confirmMessage') || 'Choose the format for your account data export:',
-                [
-                    {
-                        text: t('common.cancel') || 'Cancel',
-                        style: 'cancel',
-                    },
-                    {
-                        text: 'JSON',
-                        onPress: async () => {
-                            try {
-                                toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
-                                const blob = await oxyServices.downloadAccountData('json');
-
-                                // Create download link for web
-                                if (Platform.OS === 'web') {
-                                    const url = URL.createObjectURL(blob);
-                                    const link = document.createElement('a');
-                                    link.href = url;
-                                    link.download = `account-data-${Date.now()}.json`;
-                                    document.body.appendChild(link);
-                                    link.click();
-                                    document.body.removeChild(link);
-                                    URL.revokeObjectURL(url);
-                                    toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
-                                } else {
-                                    // For React Native, you'd need to use a library like expo-file-system
-                                    toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
-                                }
-                            } catch (error: unknown) {
-                                if (__DEV__) {
-                                    console.error('Failed to download data:', error);
-                                }
-                                toast.error((error instanceof Error ? error.message : null) || t('accountOverview.items.downloadData.error') || 'Failed to download data');
-                            }
-                        },
-                    },
-                    {
-                        text: 'CSV',
-                        onPress: async () => {
-                            try {
-                                toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
-                                const blob = await oxyServices.downloadAccountData('csv');
-
-                                // Create download link for web
-                                if (Platform.OS === 'web') {
-                                    const url = URL.createObjectURL(blob);
-                                    const link = document.createElement('a');
-                                    link.href = url;
-                                    link.download = `account-data-${Date.now()}.csv`;
-                                    document.body.appendChild(link);
-                                    link.click();
-                                    document.body.removeChild(link);
-                                    URL.revokeObjectURL(url);
-                                    toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
-                                } else {
-                                    // For React Native, you'd need to use a library like expo-file-system
-                                    toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
-                                }
-                            } catch (error: unknown) {
-                                if (__DEV__) {
-                                    console.error('Failed to download data:', error);
-                                }
-                                toast.error((error instanceof Error ? error.message : null) || t('accountOverview.items.downloadData.error') || 'Failed to download data');
-                            }
-                        },
-                    },
-                ]
-            );
-        } catch (error: unknown) {
-            if (__DEV__) {
-                console.error('Failed to initiate download:', error);
+            toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
+            const blob = await oxyServices.downloadAccountData(format);
+            if (Platform.OS === 'web') {
+                const url = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = `account-data-${Date.now()}.${format}`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
             }
+            toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
+        } catch (error: unknown) {
+            if (__DEV__) { console.error('Failed to download data:', error); }
             toast.error((error instanceof Error ? error.message : null) || t('accountOverview.items.downloadData.error') || 'Failed to download data');
         }
     }, [oxyServices, user, t]);
 
+    const handleDownloadData = useCallback(() => {
+        if (!oxyServices || !user) { toast.error(t('accountOverview.items.downloadData.error') || 'Service not available'); return; }
+        downloadDataPrompt.open();
+    }, [oxyServices, user, t, downloadDataPrompt]);
+
     const handleDeleteAccount = useCallback(() => {
         if (!user) {
             toast.error(t('accountOverview.items.deleteAccount.error') || 'User not available');
             return;
         }
-        setShowDeleteModal(true);
-    }, [user, t]);
+        deleteAccountControl.open();
+    }, [user, t, deleteAccountControl]);
 
     const handleConfirmDelete = useCallback(async (password: string) => {
         if (!oxyServices || !user) {
@@ -311,7 +249,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
         await oxyServices.deleteAccount(password);
         toast.success(t('accountOverview.items.deleteAccount.success') || 'Account deleted successfully');
-        setShowDeleteModal(false);
+        deleteAccountControl.close();
         await logout();
         if (onClose) {
             onClose();
@@ -514,7 +452,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             icon={<SettingsIcon name="logout" color={baseThemeColors.iconSharing} />}
                             title={t('accountOverview.items.signOutAll.title') || 'Sign out of all accounts'}
                             description={t('accountOverview.items.signOutAll.subtitle') || 'Remove all accounts from this device'}
-                            onPress={handleSignOutAll}
+                            onPress={() => signOutAllPrompt.open()}
                         />
                     </SettingsListGroup>
                 )}
@@ -619,23 +557,50 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         icon={<SettingsIcon name="logout" color="#FF3B30" />}
                         title={t('accountOverview.items.signOut.title')}
                         description={t('accountOverview.items.signOut.subtitle')}
-                        onPress={confirmLogout}
+                        onPress={() => logoutPrompt.open()}
                         destructive={true}
                         showChevron={false}
                     />
                 </SettingsListGroup>
             </ScrollView>
 
-            {/* Delete Account Modal */}
+            {/* Delete Account Dialog */}
             {user && (
                 <DeleteAccountModal
-                    visible={showDeleteModal}
+                    control={deleteAccountControl}
                     username={user.username || ''}
-                    onClose={() => setShowDeleteModal(false)}
                     onDelete={handleConfirmDelete}
                     t={t}
                 />
             )}
+
+            <Prompt.Basic
+                control={logoutPrompt}
+                title={t('accountOverview.items.signOut.title') || 'Sign Out'}
+                description={t('common.confirms.signOut') || 'Are you sure you want to sign out?'}
+                onConfirm={handleLogout}
+                confirmButtonCta={t('accountOverview.items.signOut.title') || 'Sign Out'}
+                confirmButtonColor="negative"
+            />
+            <Prompt.Basic
+                control={signOutAllPrompt}
+                title={t('accountOverview.items.signOutAll.title') || 'Sign Out All'}
+                description={t('common.confirms.signOutAll') || 'Are you sure you want to sign out of all accounts?'}
+                onConfirm={handleLogout}
+                confirmButtonCta={t('accountOverview.items.signOutAll.title') || 'Sign Out All'}
+                confirmButtonColor="negative"
+            />
+            <Prompt.Outer control={downloadDataPrompt}>
+                <Prompt.Content>
+                    <Prompt.TitleText>{t('accountOverview.items.downloadData.confirmTitle') || 'Download Account Data'}</Prompt.TitleText>
+                    <Prompt.DescriptionText>{t('accountOverview.items.downloadData.confirmMessage') || 'Choose the format for your account data export:'}</Prompt.DescriptionText>
+                </Prompt.Content>
+                <Prompt.Actions>
+                    <Prompt.Action cta="JSON" onPress={() => performDownload('json')} color="primary" />
+                    <Prompt.Action cta="CSV" onPress={() => performDownload('csv')} color="primary_subtle" />
+                    <Prompt.Cancel cta={t('common.cancel') || 'Cancel'} />
+                </Prompt.Actions>
+            </Prompt.Outer>
         </View>
     );
 };

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -12,7 +12,8 @@ import {
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
 import { fontFamilies } from '../styles/fonts';
-import { confirmAction } from '../utils/confirmAction';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { useAuthStore } from '../stores/authStore';
 import { GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
@@ -54,6 +55,9 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const { data: user, isLoading: userLoading } = useCurrentUser({ enabled: isAuthenticated });
     const uploadAvatarMutation = useUploadAvatar();
 
+    // Prompt controls
+    const removeAvatarPrompt = usePromptControl();
+
     // Fallback to store for backward compatibility
     const userFromStore = useAuthStore((state) => state.user);
     const finalUser = user || userFromStore;
@@ -259,12 +263,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         }
     }, [initialSection, sectionYPositions]);
 
-    const handleAvatarRemove = () => {
-        confirmAction(t('editProfile.confirms.removeAvatar') || 'Remove your profile picture?', () => {
-            setAvatarFileId('');
-            toast.success(t('editProfile.toasts.avatarRemoved') || 'Avatar removed');
-        });
-    };
+    const handleAvatarRemoveConfirmed = useCallback(() => {
+        setAvatarFileId('');
+        toast.success(t('editProfile.toasts.avatarRemoved') || 'Avatar removed');
+    }, [t]);
+
+    const handleAvatarRemove = useCallback(() => {
+        removeAvatarPrompt.open();
+    }, [removeAvatarPrompt]);
 
     const { openAvatarPicker } = useOxy();
 
@@ -573,6 +579,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                             </View>
                         </View>
             </ScrollView>
+            <Prompt.Basic
+                control={removeAvatarPrompt}
+                title={t('editProfile.confirms.removeAvatarTitle') || 'Remove Avatar'}
+                description={t('editProfile.confirms.removeAvatar') || 'Remove your profile picture?'}
+                onConfirm={handleAvatarRemoveConfirmed}
+                confirmButtonCta={t('common.remove') || 'Remove'}
+                confirmButtonColor='negative'
+            />
         </View>
     );
 };