@oxyhq/services 6.9.28 → 6.9.30

package/src/ui/screens/AccountCenterScreen.tsx

@@ -2,11 +2,9 @@ import type React from 'react';
 import {
     View,
     Text,
-    TouchableOpacity,
     StyleSheet,
     ActivityIndicator,
     ScrollView,
-    Alert,
     Platform,
 } from 'react-native';
 import { useCallback, useMemo } from 'react';
@@ -14,13 +12,11 @@ import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '@oxyhq/core';
 import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
-import { Ionicons } from '@expo/vector-icons';
 import { fontFamilies } from '../styles/fonts';
 import ProfileCard from '../components/ProfileCard';
 import Section from '../components/Section';
 import QuickActions from '../components/QuickActions';
-import GroupedSection from '../components/GroupedSection';
-import GroupedItem from '../components/GroupedItem';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
 import { useColorScheme } from '../hooks/useColorScheme';
@@ -28,6 +24,7 @@ import { Colors } from '../constants/theme';
 import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 import { screenContentStyle } from '../constants/spacing';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -43,7 +40,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     // AccountCenterScreen uses a slightly different light background
     const backgroundColor = themeStyles.isDarkTheme ? themeStyles.backgroundColor : '#f2f2f2';
     // Extract commonly used colors for readability - ensure colors is always defined
-    const { textColor, secondaryBackgroundColor, borderColor, primaryColor, dangerColor, colors: themeColors } = themeStyles;
+    const { textColor, primaryColor, dangerColor, colors: themeColors } = themeStyles;
     const colors = themeColors || Colors[normalizeColorScheme(colorScheme, normalizedTheme)];
 
     // Memoized logout handler - prevents unnecessary re-renders
@@ -116,166 +113,121 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 </Section>
 
                 {/* Account Management */}
-                <Section title={t('accountCenter.sections.accountManagement') || 'Account Management'} >
-                    <GroupedSection
-                        items={useMemo(() => [
-                            {
-                                id: 'overview',
-                                icon: 'account-circle',
-                                iconColor: colors.iconSecurity,
-                                title: t('accountCenter.items.accountOverview.title') || 'Account Overview',
-                                subtitle: t('accountCenter.items.accountOverview.subtitle') || 'Complete account information',
-                                onPress: () => navigate?.('AccountOverview'),
-                            },
-                            {
-                                id: 'settings',
-                                icon: 'cog',
-                                iconColor: colors.iconData,
-                                title: t('accountCenter.items.editProfile.title') || 'Edit Profile',
-                                subtitle: t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences',
-                                onPress: () => navigate?.('AccountSettings'),
-                            },
-                            {
-                                id: 'sessions',
-                                icon: 'shield-check',
-                                iconColor: colors.iconSecurity,
-                                title: t('accountCenter.items.manageSessions.title') || 'Manage Sessions',
-                                subtitle: t('accountCenter.items.manageSessions.subtitle') || 'Security and active devices',
-                                onPress: () => navigate?.('SessionManagement'),
-                            },
-                            {
-                                id: 'files',
-                                icon: 'folder',
-                                iconColor: colors.iconStorage,
-                                title: t('accountCenter.items.fileManagement.title') || 'File Management',
-                                subtitle: t('accountCenter.items.fileManagement.subtitle') || 'Upload, download, and manage your files',
-                                onPress: () => navigate?.('FileManagement'),
-                            },
-                            {
-                                id: 'premium',
-                                icon: 'star',
-                                iconColor: colors.iconPayments,
-                                title: t('accountCenter.items.premium.title') || 'Oxy+ Subscriptions',
-                                subtitle: 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 ? [{
-                                id: 'billing',
-                                icon: 'card',
-                                iconColor: colors.iconPersonalInfo,
-                                title: t('accountCenter.items.billing.title') || 'Billing Management',
-                                subtitle: t('accountCenter.items.billing.subtitle') || 'Payment methods and invoices',
-                                onPress: () => navigate?.('PaymentGateway'),
-                            }] : []),
-                        ], [user?.isPremium, navigate, t, colors])}
-
+                <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')}
                     />
-                </Section>
+                    <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')}
+                        />
+                    ) : null}
+                </SettingsListGroup>
 
                 {/* Multi-Account Management */}
                 {sessions && sessions.length > 1 && (
-                    <Section title={t('accountCenter.sections.multiAccount') || 'Multi-Account'} >
-                        <GroupedSection
-                            items={useMemo(() => [
-                                {
-                                    id: 'switch',
-                                    icon: 'account-group',
-                                    iconColor: colors.iconStorage,
-                                    title: t('accountCenter.items.switchAccount.title') || 'Switch Account',
-                                    subtitle: t('accountCenter.items.switchAccount.subtitle', { count: sessions.length }) || `${sessions.length} accounts available`,
-                                    onPress: () => navigate?.('AccountSwitcher'),
-                                },
-                                {
-                                    id: 'add',
-                                    icon: 'account-plus',
-                                    iconColor: colors.iconPersonalInfo,
-                                    title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
-                                    subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
-                                    onPress: () => navigate?.('OxyAuth'),
-                                },
-                            ], [sessions.length, navigate, t, colors])}
-
+                    <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')}
                         />
-                    </Section>
+                    </SettingsListGroup>
                 )}
 
                 {/* Single Account Setup */}
                 {(!sessions || sessions.length <= 1) && (
-                    <Section title={t('accountCenter.sections.addAccount') || 'Add Account'} >
-                        <GroupedSection
-                            items={useMemo(() => [
-                                {
-                                    id: 'add',
-                                    icon: 'account-plus',
-                                    iconColor: colors.iconPersonalInfo,
-                                    title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
-                                    subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
-                                    onPress: () => navigate?.('OxyAuth'),
-                                },
-                            ], [navigate, t, colors])}
-
+                    <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')}
                         />
-                    </Section>
+                    </SettingsListGroup>
                 )}
 
                 {/* Additional Options */}
-                <Section title={t('accountCenter.sections.moreOptions') || 'More Options'} >
-                    <GroupedSection
-                        items={useMemo(() => [
-                            ...(Platform.OS !== 'web' ? [{
-                                id: 'notifications',
-                                icon: 'bell',
-                                iconColor: colors.iconStorage,
-                                title: t('accountCenter.items.notifications.title') || 'Notifications',
-                                subtitle: t('accountCenter.items.notifications.subtitle') || 'Manage notification settings',
-                                onPress: () => navigate?.('AccountSettings', { activeTab: 'notifications' }),
-                            }] : []),
-                            {
-                                id: 'language',
-                                icon: 'translate',
-                                iconColor: colors.iconPersonalInfo,
-                                title: t('language.title') || 'Language',
-                                subtitle: t('language.subtitle') || 'Choose your preferred language',
-                                onPress: () => navigate?.('LanguageSelector'),
-                            },
-                            {
-                                id: 'help',
-                                icon: 'help-circle',
-                                iconColor: colors.iconSecurity,
-                                title: t('accountOverview.items.help.title') || 'Help & Support',
-                                subtitle: t('accountOverview.items.help.subtitle') || 'Get help and contact support',
-                                onPress: () => navigate?.('HelpSupport'),
-                            },
-                            {
-                                id: 'appinfo',
-                                icon: 'information',
-                                iconColor: '#8E8E93',
-                                title: t('accountCenter.items.appInfo.title') || 'App Information',
-                                subtitle: t('accountCenter.items.appInfo.subtitle') || 'Version and system details',
-                                onPress: () => navigate?.('AppInfo'),
-                            },
-                        ], [navigate, t, colors, Platform.OS])}
-
+                <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' })}
+                        />
+                    ) : 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')}
                     />
-                </Section>
+                    <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 */}
-                <Section >
-                    <GroupedItem
-                        icon="logout"
-                        iconColor={dangerColor}
+                <SettingsListGroup>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="logout" color={dangerColor} />}
                         title={isLoading ? (t('accountCenter.signingOut') || 'Signing out...') : (t('common.actions.signOut') || 'Sign Out')}
-
                         onPress={confirmLogout}
-                        isFirst={true}
-                        isLast={true}
+                        destructive={true}
                         showChevron={false}
                         disabled={isLoading}
-                        customContent={isLoading ? (
-                            <ActivityIndicator color={dangerColor} size="small" style={{ marginRight: 16 }} />
-                        ) : null}
+                        rightElement={isLoading ? (
+                            <ActivityIndicator color={dangerColor} size="small" />
+                        ) : undefined}
                     />
-                </Section>
+                </SettingsListGroup>
 
                 <View style={styles.versionContainer}>
                     <Text style={[styles.versionText, { color: themeStyles.isDarkTheme ? '#666666' : '#999999' }]}>