@oxyhq/services 6.9.44 → 6.9.46

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -6,7 +6,6 @@ import {
     StyleSheet,
     ActivityIndicator,
     ScrollView,
-    Alert,
     Platform,
     Image,
     TextStyle,
@@ -15,12 +14,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { BaseScreenProps } from '../types/navigation';
 import OxyLogo from '../components/OxyLogo';
 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 { Section, GroupedSection, GroupedItem } from '../components';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -37,6 +35,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 +86,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 +201,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 +247,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();
@@ -427,78 +363,59 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                     ) : null}
                 </SettingsListGroup>
 
-                {/* Additional Accounts - kept with GroupedSection due to custom avatar content */}
+                {/* Additional Accounts */}
                 {showMoreAccounts && (
-                    <Section title={`${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`} >
+                    <SettingsListGroup title={`${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`}>
                         {loadingAdditionalAccounts ? (
-                            <GroupedSection
-                                items={[
-                                    {
-                                        id: 'loading-accounts',
-                                        icon: 'sync',
-                                        iconColor: baseThemeColors.iconSecurity,
-                                        title: t('accountOverview.loadingAdditional.title') || 'Loading accounts...',
-                                        subtitle: t('accountOverview.loadingAdditional.subtitle') || 'Please wait while we load your additional accounts',
-                                        customContent: (
-                                            <View style={styles.loadingContainer}>
-                                                <ActivityIndicator size="small" color={baseThemeColors.iconSecurity} />
-                                                <Text style={styles.loadingText}>{t('accountOverview.loadingAdditional.title') || 'Loading accounts...'}</Text>
-                                            </View>
-                                        ),
-                                    },
-                                ]}
-
+                            <SettingsListItem
+                                icon={<SettingsIcon name="sync" color={baseThemeColors.iconSecurity} />}
+                                title={t('accountOverview.loadingAdditional.title') || 'Loading accounts...'}
+                                description={t('accountOverview.loadingAdditional.subtitle') || 'Please wait while we load your additional accounts'}
+                                rightElement={
+                                    <View style={styles.loadingContainer}>
+                                        <ActivityIndicator size="small" color={baseThemeColors.iconSecurity} />
+                                    </View>
+                                }
+                                showChevron={false}
                             />
                         ) : additionalAccountsData.length > 0 ? (
-                            <GroupedSection
-                                items={additionalAccountsData.map((account, index) => ({
-                                    id: `account-${account.id}`,
-                                    icon: 'account',
-                                    iconColor: baseThemeColors.iconData,
-                                    title: typeof account.name === 'object'
+                            additionalAccountsData.map((account) => (
+                                <SettingsListItem
+                                    key={`account-${account.id}`}
+                                    icon={
+                                        <View style={styles.userIcon}>
+                                            {account.avatar ? (
+                                                <Image
+                                                    source={{ uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb') }}
+                                                    style={styles.accountAvatarImage}
+                                                />
+                                            ) : (
+                                                <View style={styles.accountAvatarFallback}>
+                                                    <Text style={styles.accountAvatarText}>
+                                                        {account.username?.charAt(0).toUpperCase() || '?'}
+                                                    </Text>
+                                                </View>
+                                            )}
+                                        </View>
+                                    }
+                                    title={typeof account.name === 'object'
                                         ? account.name?.full || account.name?.first || account.username
-                                        : account.name || account.username,
-                                    subtitle: account.email || account.username,
-                                    onPress: () => {
+                                        : account.name || account.username}
+                                    description={account.email || account.username}
+                                    onPress={() => {
                                         toast.info(t('accountOverview.items.accountSwitcher.switchPrompt', { username: account.username }) || `Switch to ${account.username}?`);
-                                    },
-                                    customContent: (
-                                        <>
-                                            <View style={styles.userIcon}>
-                                                {account.avatar ? (
-                                                    <Image
-                                                        source={{ uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb') }}
-                                                        style={styles.accountAvatarImage}
-                                                    />
-                                                ) : (
-                                                    <View style={styles.accountAvatarFallback}>
-                                                        <Text style={styles.accountAvatarText}>
-                                                            {account.username?.charAt(0).toUpperCase() || '?'}
-                                                        </Text>
-                                                    </View>
-                                                )}
-                                            </View>
-                                            <OxyIcon name="chevron-forward" size={16} color="#ccc" />
-                                        </>
-                                    ),
-                                }))}
-
-                            />
+                                    }}
+                                />
+                            ))
                         ) : (
-                            <GroupedSection
-                                items={[
-                                    {
-                                        id: 'no-accounts',
-                                        icon: 'account-outline',
-                                        iconColor: '#ccc',
-                                        title: t('accountOverview.additional.noAccounts.title') || 'No other accounts',
-                                        subtitle: t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them',
-                                    },
-                                ]}
-
+                            <SettingsListItem
+                                icon={<SettingsIcon name="account-outline" color="#ccc" />}
+                                title={t('accountOverview.additional.noAccounts.title') || 'No other accounts'}
+                                description={t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them'}
+                                showChevron={false}
                             />
                         )}
-                    </Section>
+                    </SettingsListGroup>
                 )}
 
                 {/* Account Management */}
@@ -514,7 +431,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 +536,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>
     );
 };