@oxyhq/services 6.9.45 → 6.10.1

package/src/ui/screens/AccountCenterScreen.tsx

@@ -10,12 +10,8 @@ import {
 import { useCallback, useMemo } from 'react';
 import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '@oxyhq/core';
-import { toast } from '../../lib/sonner';
-import { fontFamilies } from '../styles/fonts';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import ProfileCard from '../components/ProfileCard';
-import Section from '../components/Section';
 import QuickActions from '../components/QuickActions';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
@@ -39,7 +35,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     const normalizedTheme = normalizeTheme(theme);
     const dangerColor = bloomTheme.colors.error;
     const colors = Colors[normalizeColorScheme(colorScheme, normalizedTheme)];
-    const logoutPrompt = usePromptControl();
+    const logoutDialog = useDialogControl();
 
     const handleLogout = useCallback(async () => {
         try {
@@ -84,7 +80,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
             )}
 
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
-                <Section title={t('accountCenter.sections.quickActions') || 'Quick Actions'} isFirst={true}>
+                <SettingsListGroup title={t('accountCenter.sections.quickActions') || 'Quick Actions'}>
                     <QuickActions
                         theme={normalizedTheme}
                         actions={useMemo(() => [
@@ -96,7 +92,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             ...(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>
+                </SettingsListGroup>
 
                 <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')} />
@@ -135,14 +131,14 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     ) : 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="information" color={bloomTheme.colors.textTertiary} />} title={t('accountCenter.items.appInfo.title') || 'App Information'} description={t('accountCenter.items.appInfo.subtitle') || 'Version and system details'} onPress={() => navigate?.('AppInfo')} />
                 </SettingsListGroup>
 
                 <SettingsListGroup>
                     <SettingsListItem
                         icon={<SettingsIcon name="logout" color={dangerColor} />}
                         title={isLoading ? (t('accountCenter.signingOut') || 'Signing out...') : (t('common.actions.signOut') || 'Sign Out')}
-                        onPress={() => logoutPrompt.open()}
+                        onPress={() => logoutDialog.open()}
                         destructive={true}
                         showChevron={false}
                         disabled={isLoading}
@@ -157,13 +153,18 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 </View>
             </ScrollView>
 
-            <Prompt.Basic
-                control={logoutPrompt}
+            <Dialog
+                control={logoutDialog}
                 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"
+                actions={[
+                    {
+                        label: t('common.actions.signOut') || 'Sign Out',
+                        color: 'destructive',
+                        onPress: handleLogout,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
         </View>
     );
@@ -174,7 +175,7 @@ const styles = StyleSheet.create({
     scrollView: { flex: 1 },
     scrollContainer: screenContentStyle,
     versionContainer: { alignItems: 'center', marginTop: 20, marginBottom: 20 },
-    versionText: { fontSize: 12, fontFamily: fontFamilies.inter },
+    versionText: { fontSize: 12 },
     message: { fontSize: 16, textAlign: 'center', marginTop: 24 },
 });
 

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -14,17 +14,13 @@ 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 { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 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';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { getDisplayName, getShortDisplayName } from '../utils/userUtils';
+import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
@@ -37,7 +33,6 @@ 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
@@ -84,14 +79,14 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         isAuthenticated,
         openAvatarPicker,
     } = useOxy();
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
     const deleteAccountControl = useDialogControl();
-    const logoutPrompt = usePromptControl();
-    const signOutAllPrompt = usePromptControl();
-    const downloadDataPrompt = usePromptControl();
+    const logoutDialog = useDialogControl();
+    const signOutAllDialog = useDialogControl();
+    const downloadDataDialog = useDialogControl();
     const lottieRef = useRef<any>(null);
     const hasPlayedRef = useRef(false);
     const insets = useSafeAreaInsets();
@@ -151,27 +146,13 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
     React.useEffect(() => {
         if (usersData && usersData.length > 0) {
-            const accountsData = usersData.map(({ sessionId, user: userProfile }: { sessionId: string; user: any }) => {
-                if (!userProfile) {
-                    return {
-                        id: sessionId,
-                        sessionId,
-                        username: 'Unknown User',
-                        email: 'No email available',
-                        avatar: null,
-                        userProfile: null
-                    };
-                }
-                return {
-                    id: sessionId,
-                    sessionId,
-                    username: userProfile.username,
-                    email: userProfile.email,
-                    name: userProfile.name,
-                    avatar: userProfile.avatar,
-                    userProfile
-                };
-            });
+            const accountsData = usersData.map(({ sessionId, user: userProfile }: { sessionId: string; user: any }) => ({
+                id: sessionId,
+                sessionId,
+                userProfile: userProfile ?? null,
+                avatar: userProfile?.avatar ?? null,
+                email: userProfile?.email,
+            }));
             setAdditionalAccountsData(accountsData);
             setLoadingAdditionalAccounts(false);
         } else if (additionalAccounts.length === 0) {
@@ -210,7 +191,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     const performDownload = useCallback(async (format: 'json' | 'csv') => {
         if (!oxyServices || !user) { toast.error(t('accountOverview.items.downloadData.error') || 'Service not available'); return; }
         try {
-            toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
+            toast.info(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
             const blob = await oxyServices.downloadAccountData(format);
             if (Platform.OS === 'web') {
                 const url = URL.createObjectURL(blob);
@@ -231,8 +212,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
     const handleDownloadData = useCallback(() => {
         if (!oxyServices || !user) { toast.error(t('accountOverview.items.downloadData.error') || 'Service not available'); return; }
-        downloadDataPrompt.open();
-    }, [oxyServices, user, t, downloadDataPrompt]);
+        downloadDataDialog.open();
+    }, [oxyServices, user, t, downloadDataDialog]);
 
     const handleDeleteAccount = useCallback(() => {
         if (!user) {
@@ -242,12 +223,12 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         deleteAccountControl.open();
     }, [user, t, deleteAccountControl]);
 
-    const handleConfirmDelete = useCallback(async (password: string) => {
+    const handleConfirmDelete = useCallback(async (confirmText: string) => {
         if (!oxyServices || !user) {
             throw new Error(t('accountOverview.items.deleteAccount.error') || 'Service not available');
         }
 
-        await oxyServices.deleteAccount(password);
+        await oxyServices.deleteAccount(confirmText);
         toast.success(t('accountOverview.items.deleteAccount.success') || 'Account deleted successfully');
         deleteAccountControl.close();
         await logout();
@@ -324,7 +305,13 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                     <SettingsListItem
                         icon={<SettingsIcon name="account" color={baseThemeColors.iconSecurity} />}
                         title={displayName}
-                        description={user ? (user.email || user.username) : (t('common.status.loading') || 'Loading...')}
+                        description={(() => {
+                            if (!user) return t('common.status.loading') || 'Loading...';
+                            if (user.email) return user.email;
+                            const handle = getAccountFallbackHandle(user);
+                            if (!handle) return '';
+                            return user.username ? `@${handle}` : handle;
+                        })()}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'profile' })}
                     />
                 </SettingsListGroup>
@@ -365,43 +352,32 @@ 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'
-                                        ? account.name?.full || account.name?.first || account.username
-                                        : account.name || account.username,
-                                    subtitle: account.email || account.username,
-                                    onPress: () => {
-                                        toast.info(t('accountOverview.items.accountSwitcher.switchPrompt', { username: account.username }) || `Switch to ${account.username}?`);
-                                    },
-                                    customContent: (
-                                        <>
+                            additionalAccountsData.map((account) => {
+                                const accountDisplayName = getAccountDisplayName(account.userProfile, locale);
+                                const accountHandle = getAccountFallbackHandle(account.userProfile);
+                                const description = account.email
+                                    ?? (accountHandle && account.userProfile?.username ? `@${accountHandle}` : accountHandle)
+                                    ?? '';
+                                return (
+                                    <SettingsListItem
+                                        key={`account-${account.id}`}
+                                        icon={
                                             <View style={styles.userIcon}>
                                                 {account.avatar ? (
                                                     <Image
@@ -411,32 +387,29 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                                 ) : (
                                                     <View style={styles.accountAvatarFallback}>
                                                         <Text style={styles.accountAvatarText}>
-                                                            {account.username?.charAt(0).toUpperCase() || '?'}
+                                                            {accountDisplayName.charAt(0).toUpperCase()}
                                                         </Text>
                                                     </View>
                                                 )}
                                             </View>
-                                            <OxyIcon name="chevron-forward" size={16} color="#ccc" />
-                                        </>
-                                    ),
-                                }))}
-
-                            />
+                                        }
+                                        title={accountDisplayName}
+                                        description={description}
+                                        onPress={() => {
+                                            toast.info(t('accountOverview.items.accountSwitcher.switchPrompt', { username: accountDisplayName }) || `Switch to ${accountDisplayName}?`);
+                                        }}
+                                    />
+                                );
+                            })
                         ) : (
-                            <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={bloomTheme.colors.textTertiary} />}
+                                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 */}
@@ -452,7 +425,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={() => signOutAllPrompt.open()}
+                            onPress={() => signOutAllDialog.open()}
                         />
                     </SettingsListGroup>
                 )}
@@ -514,7 +487,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         onPress={() => navigate?.('LanguageSelector')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="cog" color="#8E8E93" />}
+                        icon={<SettingsIcon name="cog" color={bloomTheme.colors.textTertiary} />}
                         title={t('accountOverview.items.preferences.title')}
                         description={t('accountOverview.items.preferences.subtitle')}
                         onPress={() => toast.info(t('accountOverview.items.preferences.coming'))}
@@ -544,7 +517,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         onPress={() => toast.info(t('accountOverview.items.connectedApps.coming'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="information" color="#8E8E93" />}
+                        icon={<SettingsIcon name="information" color={bloomTheme.colors.textTertiary} />}
                         title={t('accountOverview.items.about.title')}
                         description={t('accountOverview.items.about.subtitle')}
                         onPress={() => navigate?.('AppInfo')}
@@ -554,10 +527,10 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Sign Out */}
                 <SettingsListGroup title={t('accountOverview.sections.actions')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="logout" color="#FF3B30" />}
+                        icon={<SettingsIcon name="logout" color={bloomTheme.colors.error} />}
                         title={t('accountOverview.items.signOut.title')}
                         description={t('accountOverview.items.signOut.subtitle')}
-                        onPress={() => logoutPrompt.open()}
+                        onPress={() => logoutDialog.open()}
                         destructive={true}
                         showChevron={false}
                     />
@@ -574,33 +547,42 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 />
             )}
 
-            <Prompt.Basic
-                control={logoutPrompt}
+            <Dialog
+                control={logoutDialog}
                 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"
+                actions={[
+                    {
+                        label: t('accountOverview.items.signOut.title') || 'Sign Out',
+                        color: 'destructive',
+                        onPress: handleLogout,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Basic
-                control={signOutAllPrompt}
+            <Dialog
+                control={signOutAllDialog}
                 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"
+                actions={[
+                    {
+                        label: t('accountOverview.items.signOutAll.title') || 'Sign Out All',
+                        color: 'destructive',
+                        onPress: handleLogout,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+            <Dialog
+                control={downloadDataDialog}
+                title={t('accountOverview.items.downloadData.confirmTitle') || 'Download Account Data'}
+                description={t('accountOverview.items.downloadData.confirmMessage') || 'Choose the format for your account data export:'}
+                actions={[
+                    { label: 'JSON', onPress: () => performDownload('json') },
+                    { label: 'CSV', onPress: () => performDownload('csv') },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <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>
     );
 };
@@ -666,7 +648,6 @@ const styles = StyleSheet.create({
         fontSize: 28,
         fontWeight: '600',
         marginBottom: 8,
-        fontFamily: fontFamilies.interBold,
         maxWidth: '90%',
     },
     welcomeSubtext: {
@@ -677,16 +658,6 @@ const styles = StyleSheet.create({
     userIcon: {
         marginRight: 12,
     },
-    manageButton: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 16,
-    },
-    manageButtonText: {
-        color: '#fff',
-        fontSize: 14,
-        fontWeight: '500',
-    },
     accountAvatarImage: {
         width: 40,
         height: 40,
@@ -709,7 +680,6 @@ const styles = StyleSheet.create({
         fontSize: 16,
         textAlign: 'center',
         marginTop: 24,
-        color: '#333',
     },
     loadingContainer: {
         flexDirection: 'row',
@@ -720,7 +690,6 @@ const styles = StyleSheet.create({
     },
     loadingText: {
         fontSize: 16,
-        color: '#666',
     },
 });