@oxyhq/services 6.9.43 → 6.9.45

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
     View,
     Text,
@@ -7,7 +7,6 @@ import {
     StyleSheet,
     ScrollView,
     ActivityIndicator,
-    Alert,
     Platform,
     Animated,
     Dimensions,
@@ -15,7 +14,8 @@ import {
 import type { BaseScreenProps } from '../types/navigation';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
-import { confirmAction } from '../utils/confirmAction';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
 import { useI18n } from '../hooks/useI18n';
@@ -80,9 +80,15 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const [billingInterval, setBillingInterval] = useState<'month' | 'year'>('month');
     const [activeTab, setActiveTab] = useState<'plans' | 'features'>('plans');
     const [currentAppPackage, setCurrentAppPackage] = useState<string>('mention'); // Default to mention for demo
+    const [pendingUnsubscribeFeatureId, setPendingUnsubscribeFeatureId] = useState<string | null>(null);
 
     const { t } = useI18n();
     const bloomTheme = useTheme();
+
+    // Prompt controls
+    const cancelSubscriptionPrompt = usePromptControl();
+    const unsubscribeFeaturePrompt = usePromptControl();
+
     // Extract commonly used colors for readability
     const textColor = bloomTheme.colors.text;
     const backgroundColor = bloomTheme.colors.background;
@@ -315,35 +321,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     }, [currentAppPackage, user?.isPremium]);
 
     const detectCurrentApp = () => {
-        // In a real implementation, this would detect the actual app package name
-        // For now, we'll use a mock detection based on available methods
-
-        // Real app detection methods you could use:
-        // 1. Check bundle identifier in React Native: 
-        //    import DeviceInfo from 'react-native-device-info';
-        //    const bundleId = DeviceInfo.getBundleId();
-        //    Example: com.oxy.mention -> 'mention'
-
-        // 2. Environment variables or build configuration
-        //    const appPackage = __DEV__ ? process.env.APP_PACKAGE : 'mention';
-
-        // 3. Check specific app capabilities or modules
-        //    if (typeof MentionModule !== 'undefined') return 'mention';
-        //    if (typeof OxyWorkspaceModule !== 'undefined') return 'oxy-workspace';
-
-        // 4. Use build-time configuration with Metro or similar
-        //    const appPackage = require('../config/app.json').packageName;
-
-        // For demo purposes, we'll simulate different apps
-        // You would replace this with actual app detection logic
-
-        // IMPORTANT: This ensures subscription restrictions work properly:
-        // - Mention+ plan can only be subscribed to when app package == 'mention'
-        // - Other app-specific plans follow the same pattern
-        // - Ecosystem plans work across all apps
-
-        const detectedApp = 'mention'; // This would be dynamic in real implementation
-
+        const detectedApp = 'mention';
         setCurrentAppPackage(detectedApp);
     };
 
@@ -351,13 +329,11 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         try {
             setLoading(true);
 
-            // Filter plans available for current app
             const availablePlans = mockPlans.filter(plan =>
                 plan.applicableApps.includes(currentAppPackage)
             );
             setPlans(availablePlans);
 
-            // Mock current subscription
             let currentSubscription: UserSubscription | null = null;
             if (user?.isPremium) {
                 currentSubscription = {
@@ -371,7 +347,6 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 setSubscription(currentSubscription);
             }
 
-            // Filter features available for current app and update based on current subscription
             const availableFeatures = mockIndividualFeatures.filter(feature =>
                 feature.applicableApps.includes(currentAppPackage)
             );
@@ -383,7 +358,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 return {
                     ...feature,
                     isIncludedInCurrentPlan,
-                    isSubscribed: !!isIncludedInCurrentPlan // Mock some individual subscriptions
+                    isSubscribed: !!isIncludedInCurrentPlan
                 };
             });
 
@@ -405,27 +380,21 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     const handleSubscribe = async (planId: string) => {
         try {
-            // Check if plan is available for current app
             const selectedPlan = mockPlans.find(plan => plan.id === planId);
             if (!selectedPlan?.applicableApps.includes(currentAppPackage)) {
                 toast.error(t('premium.toasts.planUnavailable', { app: currentAppPackage }) || `This plan is not available for the current app (${currentAppPackage})`);
                 return;
             }
 
-            // Special restriction for Mention+ plan - only available in mention app
             if (planId === 'mention-plus' && currentAppPackage !== 'mention') {
                 toast.error(t('premium.toasts.mentionOnly') || 'Mention+ is only available in the Mention app');
                 return;
             }
 
             setProcessingPayment(true);
-
-            // Mock payment processing
             await new Promise(resolve => setTimeout(resolve, 2000));
-
             toast.success(t('premium.toasts.activated') || 'Subscription activated successfully!');
 
-            // Mock subscription update
             setSubscription({
                 id: `sub_${Date.now()}`,
                 planId,
@@ -435,7 +404,6 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 cancelAtPeriodEnd: false
             });
 
-            // Reload data to update feature states
             loadSubscriptionData();
 
         } catch (error) {
@@ -448,23 +416,21 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         }
     };
 
-    const handleCancelSubscription = () => {
-        confirmAction(
-            t('premium.confirms.cancelSub') || 'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.',
-            async () => {
-                try {
-                    // Mock cancellation
-                    setSubscription(prev => prev ? {
-                        ...prev,
-                        cancelAtPeriodEnd: true
-                    } : null);
-                    toast.success(t('premium.toasts.willCancel') || 'Subscription will be canceled at the end of the billing period');
-                } catch (error) {
-                    toast.error(t('premium.toasts.cancelFailed') || 'Failed to cancel subscription');
-                }
-            }
-        );
-    };
+    const confirmCancelSubscription = useCallback(() => {
+        cancelSubscriptionPrompt.open();
+    }, [cancelSubscriptionPrompt]);
+
+    const handleCancelSubscription = useCallback(async () => {
+        try {
+            setSubscription(prev => prev ? {
+                ...prev,
+                cancelAtPeriodEnd: true
+            } : null);
+            toast.success(t('premium.toasts.willCancel') || 'Subscription will be canceled at the end of the billing period');
+        } catch (error) {
+            toast.error(t('premium.toasts.cancelFailed') || 'Failed to cancel subscription');
+        }
+    }, [t]);
 
     const handleReactivateSubscription = async () => {
         try {
@@ -479,7 +445,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     };
 
     const formatPrice = (price: number, currency: string, interval: string) => {
-        const yearlyPrice = interval === 'year' ? price : price * 12 * 0.8; // 20% discount for yearly
+        const yearlyPrice = interval === 'year' ? price : price * 12 * 0.8;
         const displayPrice = billingInterval === 'year' ? yearlyPrice : price;
 
         return {
@@ -496,16 +462,13 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     const handleFeatureSubscribe = async (featureId: string) => {
         try {
-            // Check if feature is available for current app
             const selectedFeature = mockIndividualFeatures.find(feature => feature.id === featureId);
             if (!selectedFeature?.applicableApps.includes(currentAppPackage)) {
                 toast.error(`This feature is not available for the current app (${currentAppPackage})`);
                 return;
             }
 
-            // Special restrictions for app-specific features
             if (selectedFeature.appScope === 'specific') {
-                // For features that are only available in specific apps, enforce strict matching
                 const hasExactMatch = selectedFeature.applicableApps.length === 1 &&
                     selectedFeature.applicableApps[0] === currentAppPackage;
                 if (!hasExactMatch && selectedFeature.applicableApps.length === 1) {
@@ -516,8 +479,6 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
             }
 
             setProcessingPayment(true);
-
-            // Mock feature subscription
             await new Promise(resolve => setTimeout(resolve, 1500));
 
             setIndividualFeatures(prev =>
@@ -541,26 +502,34 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         }
     };
 
-    const handleFeatureUnsubscribe = async (featureId: string) => {
-        const feature = individualFeatures.find(f => f.id === featureId);
-        confirmAction(
-            (t('premium.confirms.unsubscribeFeature', { name: feature?.name ?? '' }) ?? `Are you sure you want to unsubscribe from ${feature?.name}?`),
-            async () => {
-                try {
-                    setIndividualFeatures(prev =>
-                        prev.map(f =>
-                            f.id === featureId
-                                ? { ...f, isSubscribed: false }
-                                : f
-                        )
-                    );
-                    toast.success((t('premium.toasts.featureUnsubscribed', { name: feature?.name ?? '' }) ?? `Unsubscribed from ${feature?.name}`));
-                } catch (error) {
-                    toast.error(t('premium.toasts.featureUnsubscribeFailed') || 'Failed to unsubscribe from feature');
-                }
-            }
-        );
-    };
+    const confirmFeatureUnsubscribe = useCallback((featureId: string) => {
+        setPendingUnsubscribeFeatureId(featureId);
+        unsubscribeFeaturePrompt.open();
+    }, [unsubscribeFeaturePrompt]);
+
+    const handleFeatureUnsubscribe = useCallback(async () => {
+        if (!pendingUnsubscribeFeatureId) return;
+        const feature = individualFeatures.find(f => f.id === pendingUnsubscribeFeatureId);
+        try {
+            setIndividualFeatures(prev =>
+                prev.map(f =>
+                    f.id === pendingUnsubscribeFeatureId
+                        ? { ...f, isSubscribed: false }
+                        : f
+                )
+            );
+            toast.success((t('premium.toasts.featureUnsubscribed', { name: feature?.name ?? '' }) ?? `Unsubscribed from ${feature?.name}`));
+        } catch (error) {
+            toast.error(t('premium.toasts.featureUnsubscribeFailed') || 'Failed to unsubscribe from feature');
+        } finally {
+            setPendingUnsubscribeFeatureId(null);
+        }
+    }, [pendingUnsubscribeFeatureId, individualFeatures, t]);
+
+    const pendingUnsubscribeFeature = useMemo(
+        () => individualFeatures.find(f => f.id === pendingUnsubscribeFeatureId),
+        [individualFeatures, pendingUnsubscribeFeatureId]
+    );
 
     const renderHeader = () => {
         const getAppDisplayName = (packageName: string) => {
@@ -649,7 +618,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         ) : (
                             <TouchableOpacity
                                 style={[styles.actionButton, { backgroundColor: dangerColor }]}
-                                onPress={handleCancelSubscription}
+                                onPress={confirmCancelSubscription}
                             >
                                 <Text style={styles.actionButtonText}>{t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}</Text>
                             </TouchableOpacity>
@@ -965,7 +934,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </View>
                         <TouchableOpacity
                             style={[styles.unsubscribeButton, { borderColor: dangerColor }]}
-                            onPress={() => handleFeatureUnsubscribe(feature.id)}
+                            onPress={() => confirmFeatureUnsubscribe(feature.id)}
                         >
                             <Text style={[styles.unsubscribeText, { color: dangerColor }]}>{t('premium.actions.unsubscribe') || 'Unsubscribe'}</Text>
                         </TouchableOpacity>
@@ -1144,6 +1113,22 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 <View style={styles.bottomSpacing} />
             </ScrollView>
+            <Prompt.Basic
+                control={cancelSubscriptionPrompt}
+                title={t('premium.confirms.cancelSubTitle') || 'Cancel Subscription'}
+                description={t('premium.confirms.cancelSub') || 'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.'}
+                onConfirm={handleCancelSubscription}
+                confirmButtonCta={t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Basic
+                control={unsubscribeFeaturePrompt}
+                title={t('premium.confirms.unsubscribeFeatureTitle') || 'Unsubscribe from Feature'}
+                description={pendingUnsubscribeFeature ? (t('premium.confirms.unsubscribeFeature', { name: pendingUnsubscribeFeature.name }) ?? `Are you sure you want to unsubscribe from ${pendingUnsubscribeFeature.name}?`) : ''}
+                onConfirm={handleFeatureUnsubscribe}
+                confirmButtonCta={t('premium.actions.unsubscribe') || 'Unsubscribe'}
+                confirmButtonColor='negative'
+            />
         </View>
     );
 };
@@ -1396,7 +1381,6 @@ const styles = StyleSheet.create({
     bottomSpacing: {
         height: 40,
     },
-    // Tab Navigation Styles
     tabContainer: {
         flexDirection: 'row',
         borderBottomWidth: 1,
@@ -1412,7 +1396,6 @@ const styles = StyleSheet.create({
         fontSize: 16,
         fontWeight: '600',
     },
-    // Individual Feature Styles
     featureCard: {
         borderRadius: 12,
         borderWidth: 1,
@@ -1506,7 +1489,6 @@ const styles = StyleSheet.create({
         fontWeight: '600',
         marginBottom: 12,
     },
-    // New styles for enhanced feature cards
     featureNameRow: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -1554,7 +1536,6 @@ const styles = StyleSheet.create({
         fontWeight: '500',
         textAlign: 'center',
     },
-    // App-specific plan styles
     appSpecificBadge: {
         position: 'absolute',
         top: 16,
@@ -1584,7 +1565,6 @@ const styles = StyleSheet.create({
         fontSize: 16,
         fontWeight: '600',
     },
-    // App switcher styles (for development/testing)
     appSwitcher: {
         padding: 16,
         borderBottomWidth: 1,

package/src/ui/screens/SessionManagementScreen.tsx

@@ -7,7 +7,6 @@ import {
     StyleSheet,
     ScrollView,
     ActivityIndicator,
-    Alert,
     Platform,
     RefreshControl,
 } from 'react-native';
@@ -15,7 +14,8 @@ import type { BaseScreenProps } from '../types/navigation';
 import { screenContentStyle } from '../constants/spacing';
 import { toast } from '../../lib/sonner';
 import type { ClientSession } from '@oxyhq/core';
-import { confirmAction } from '../utils/confirmAction';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { Header, GroupedSection } from '../components';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
@@ -52,6 +52,12 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     const [actionLoading, setActionLoading] = useState<string | null>(null);
     const [switchLoading, setSwitchLoading] = useState<string | null>(null);
     const [lastRefreshed, setLastRefreshed] = useState<Date | null>(null);
+    const [pendingLogoutSessionId, setPendingLogoutSessionId] = useState<string | null>(null);
+
+    // Prompt controls
+    const logoutSessionPrompt = usePromptControl();
+    const logoutOtherSessionsPrompt = usePromptControl();
+    const logoutAllSessionsPrompt = usePromptControl();
 
     // Use bloom theme for non-style color props (ActivityIndicator, icon colors, etc.)
     const bloomTheme = useTheme();
@@ -75,39 +81,37 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             if (__DEV__) {
                 console.error('Failed to load sessions:', error);
             }
-            if (Platform.OS === 'web') {
-                toast.error(t('sessionManagement.toasts.loadFailed'));
-            } else {
-                Alert.alert(
-                    'Error',
-                    t('sessionManagement.toasts.loadFailed'),
-                    [{ text: 'OK' }]
-                );
-            }
+            toast.error(t('sessionManagement.toasts.loadFailed'));
         } finally {
             setLoading(false);
             setRefreshing(false);
         }
     }, [refreshSessions]);
 
-    // Memoized logout session handler - prevents unnecessary re-renders
-    const handleLogoutSession = useCallback(async (sessionId: string) => {
-        confirmAction(t('sessionManagement.confirms.logoutSession'), async () => {
-            try {
-                setActionLoading(sessionId);
-                await logout(sessionId);
-                await refreshSessions();
-                toast.success(t('sessionManagement.toasts.logoutSuccess'));
-            } catch (error) {
-                if (__DEV__) {
-                    console.error('Logout session failed:', error);
-                }
-                toast.error(t('sessionManagement.toasts.logoutFailed'));
-            } finally {
-                setActionLoading(null);
+    // Confirm logout session - opens prompt
+    const confirmLogoutSession = useCallback((sessionId: string) => {
+        setPendingLogoutSessionId(sessionId);
+        logoutSessionPrompt.open();
+    }, [logoutSessionPrompt]);
+
+    // Handle logout session - executes after prompt confirmation
+    const handleLogoutSession = useCallback(async () => {
+        if (!pendingLogoutSessionId) return;
+        try {
+            setActionLoading(pendingLogoutSessionId);
+            await logout(pendingLogoutSessionId);
+            await refreshSessions();
+            toast.success(t('sessionManagement.toasts.logoutSuccess'));
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Logout session failed:', error);
             }
-        });
-    }, [logout, refreshSessions]);
+            toast.error(t('sessionManagement.toasts.logoutFailed'));
+        } finally {
+            setActionLoading(null);
+            setPendingLogoutSessionId(null);
+        }
+    }, [pendingLogoutSessionId, logout, refreshSessions, t]);
 
     // Memoized bulk action items - prevents unnecessary re-renders when dependencies haven't changed
     const otherSessionsCount = useMemo(() =>
@@ -115,55 +119,55 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         [userSessions, activeSessionId]
     );
 
-    // Memoized logout other sessions handler - prevents unnecessary re-renders
-    const handleLogoutOtherSessions = useCallback(async () => {
+    // Confirm logout other sessions - opens prompt
+    const confirmLogoutOtherSessions = useCallback(() => {
         if (otherSessionsCount === 0) {
             toast.info(t('sessionManagement.toasts.noOtherSessions'));
             return;
         }
-        confirmAction(
-            t('sessionManagement.confirms.logoutOthers', { count: otherSessionsCount }),
-            async () => {
-                try {
-                    setActionLoading('others');
-                    for (const session of userSessions) {
-                        if (session.sessionId !== activeSessionId) {
-                            await logout(session.sessionId);
-                        }
-                    }
-                    await refreshSessions();
-                    toast.success(t('sessionManagement.toasts.logoutOthersSuccess'));
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Logout other sessions failed:', error);
-                    }
-                    toast.error(t('sessionManagement.toasts.logoutOthersFailed'));
-                } finally {
-                    setActionLoading(null);
+        logoutOtherSessionsPrompt.open();
+    }, [otherSessionsCount, logoutOtherSessionsPrompt, t]);
+
+    // Handle logout other sessions - executes after prompt confirmation
+    const handleLogoutOtherSessions = useCallback(async () => {
+        try {
+            setActionLoading('others');
+            for (const session of userSessions) {
+                if (session.sessionId !== activeSessionId) {
+                    await logout(session.sessionId);
                 }
             }
-        );
-    }, [otherSessionsCount, userSessions, activeSessionId, logout, refreshSessions]);
+            await refreshSessions();
+            toast.success(t('sessionManagement.toasts.logoutOthersSuccess'));
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Logout other sessions failed:', error);
+            }
+            toast.error(t('sessionManagement.toasts.logoutOthersFailed'));
+        } finally {
+            setActionLoading(null);
+        }
+    }, [userSessions, activeSessionId, logout, refreshSessions, t]);
+
+    // Confirm logout all sessions - opens prompt
+    const confirmLogoutAllSessions = useCallback(() => {
+        logoutAllSessionsPrompt.open();
+    }, [logoutAllSessionsPrompt]);
 
-    // Memoized logout all sessions handler - prevents unnecessary re-renders
+    // Handle logout all sessions - executes after prompt confirmation
     const handleLogoutAllSessions = useCallback(async () => {
-        confirmAction(
-            t('sessionManagement.confirms.logoutAll'),
-            async () => {
-                try {
-                    setActionLoading('all');
-                    await logoutAll();
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Logout all sessions failed:', error);
-                    }
-                    toast.error(t('sessionManagement.toasts.logoutAllFailed'));
-                } finally {
-                    setActionLoading(null);
-                }
+        try {
+            setActionLoading('all');
+            await logoutAll();
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Logout all sessions failed:', error);
             }
-        );
-    }, [logoutAll]);
+            toast.error(t('sessionManagement.toasts.logoutAllFailed'));
+        } finally {
+            setActionLoading(null);
+        }
+    }, [logoutAll, t]);
 
     // Memoized relative time formatter - prevents function recreation on every render
     const formatRelative = useCallback((dateString?: string) => {
@@ -240,7 +244,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                             )}
                         </TouchableOpacity>
                         <TouchableOpacity
-                            onPress={() => handleLogoutSession(session.sessionId)}
+                            onPress={() => confirmLogoutSession(session.sessionId)}
                             style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? LOGOUT_BUTTON_BG.dark : LOGOUT_BUTTON_BG.light, borderColor: dangerColor }]}
                             disabled={actionLoading === session.sessionId || switchLoading === session.sessionId}
                         >
@@ -260,7 +264,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 dense: true,
             };
         });
-    }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, isDarkTheme, switchLoading, actionLoading, handleSwitchSession, handleLogoutSession, dangerColor]);
+    }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, isDarkTheme, switchLoading, actionLoading, handleSwitchSession, confirmLogoutSession, dangerColor]);
 
     const bulkItems = useMemo(() => [
         {
@@ -269,7 +273,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             iconColor: primaryColor,
             title: t('sessionManagement.logoutOthers.title'),
             subtitle: otherSessionsCount === 0 ? t('sessionManagement.logoutOthers.noOtherSessions') : t('sessionManagement.logoutOthers.subtitle'),
-            onPress: handleLogoutOtherSessions,
+            onPress: confirmLogoutOtherSessions,
             showChevron: false,
             customContent: actionLoading === 'others' ? <ActivityIndicator size="small" color={primaryColor} /> : undefined,
             disabled: actionLoading === 'others' || otherSessionsCount === 0,
@@ -281,13 +285,13 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             iconColor: dangerColor,
             title: t('sessionManagement.logoutAll.title'),
             subtitle: t('sessionManagement.logoutAll.subtitle'),
-            onPress: handleLogoutAllSessions,
+            onPress: confirmLogoutAllSessions,
             showChevron: false,
             customContent: actionLoading === 'all' ? <ActivityIndicator size="small" color={dangerColor} /> : undefined,
             disabled: actionLoading === 'all',
             dense: true,
         },
-    ], [otherSessionsCount, primaryColor, dangerColor, handleLogoutOtherSessions, handleLogoutAllSessions, actionLoading]);
+    ], [otherSessionsCount, primaryColor, dangerColor, confirmLogoutOtherSessions, confirmLogoutAllSessions, actionLoading]);
 
     if (loading) {
         return (
@@ -342,6 +346,30 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                     <Text style={styles.closeButtonText} className="text-primary">{t('sessionManagement.close')}</Text>
                 </TouchableOpacity>
             </View>
+            <Prompt.Basic
+                control={logoutSessionPrompt}
+                title={t('sessionManagement.confirms.logoutSessionTitle') || 'Log Out Session'}
+                description={t('sessionManagement.confirms.logoutSession')}
+                onConfirm={handleLogoutSession}
+                confirmButtonCta={t('sessionManagement.logout') || 'Log Out'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Basic
+                control={logoutOtherSessionsPrompt}
+                title={t('sessionManagement.confirms.logoutOthersTitle') || 'Log Out Other Sessions'}
+                description={t('sessionManagement.confirms.logoutOthers', { count: otherSessionsCount })}
+                onConfirm={handleLogoutOtherSessions}
+                confirmButtonCta={t('sessionManagement.logoutOthers.title') || 'Log Out Others'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Basic
+                control={logoutAllSessionsPrompt}
+                title={t('sessionManagement.confirms.logoutAllTitle') || 'Log Out All Sessions'}
+                description={t('sessionManagement.confirms.logoutAll')}
+                onConfirm={handleLogoutAllSessions}
+                confirmButtonCta={t('sessionManagement.logoutAll.title') || 'Log Out All'}
+                confirmButtonColor='negative'
+            />
         </View>
     );
 };

package/src/ui/utils/fileManagement.ts

@@ -1,4 +1,3 @@
-import { Alert } from 'react-native';
 import type { FileMetadata } from '@oxyhq/core';
 import { File as ExpoFile } from 'expo-file-system';
 import { toast } from '../../lib/sonner';
@@ -39,35 +38,6 @@ export function getFileIcon(contentType: string): string {
     return 'document-outline';
 }
 
-/**
- * Unified confirmation dialog - uses Alert.alert for all platforms
- */
-export function confirmAction(
-    message: string,
-    title?: string,
-    confirmText = 'OK',
-    cancelText = 'Cancel'
-): Promise<boolean> {
-    return new Promise((resolve) => {
-        Alert.alert(
-            title || 'Confirm',
-            message,
-            [
-                {
-                    text: cancelText,
-                    style: 'cancel',
-                    onPress: () => resolve(false),
-                },
-                {
-                    text: confirmText,
-                    onPress: () => resolve(true),
-                },
-            ],
-            { cancelable: true, onDismiss: () => resolve(false) }
-        );
-    });
-}
-
 /**
  * Convert DocumentPicker asset to File object
  * Handles both web (native File API) and mobile (URI-based) file sources