@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/screens/AccountCenterScreen.tsx

@@ -10,8 +10,7 @@ import {
     Platform,
 } from 'react-native';
 import { useCallback, useMemo } from 'react';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '../../constants/version';
 import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
@@ -23,22 +22,29 @@ import QuickActions from '../components/QuickActions';
 import GroupedSection from '../components/GroupedSection';
 import GroupedItem from '../components/GroupedItem';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
+import { useOxy } from '../context/OxyContext';
+import { screenContentStyle } from '../constants/spacing';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     navigate,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { user, logout, isLoading, sessions, isAuthenticated } = useOxy();
     const { t } = useI18n();
-
-    const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#f2f2f2';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-    const primaryColor = '#0066CC';
-    const dangerColor = '#D32F2F';
+    const colorScheme = useColorScheme();
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    // 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 colors = themeColors || Colors[normalizeColorScheme(colorScheme, normalizedTheme)];
 
     // Memoized logout handler - prevents unnecessary re-renders
     const handleLogout = useCallback(async () => {
@@ -83,8 +89,8 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
             {user && (
                 <ProfileCard
                     user={user}
-                    theme={theme}
-                    onEditPress={() => navigate('EditProfile', { activeTab: 'profile' })}
+                    theme={normalizedTheme}
+                    onEditPress={() => navigate?.('EditProfile', { activeTab: 'profile' })}
                     onClosePress={onClose}
                     showCloseButton={!!onClose}
                 />
@@ -92,131 +98,132 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
                 {/* Quick Actions */}
-                <Section title={t('accountCenter.sections.quickActions') || 'Quick Actions'} theme={theme} isFirst={true}>
+                <Section title={t('accountCenter.sections.quickActions') || 'Quick Actions'} isFirst={true}>
                     <QuickActions
+                        theme={normalizedTheme}
                         actions={useMemo(() => [
-                            { id: 'overview', icon: 'person-circle', iconColor: '#007AFF', title: t('accountCenter.quickActions.overview') || 'Overview', onPress: () => navigate('AccountOverview') },
-                            { id: 'settings', icon: 'settings', iconColor: '#5856D6', title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate('EditProfile') },
-                            { id: 'sessions', icon: 'shield-checkmark', iconColor: '#30D158', title: t('accountCenter.quickActions.sessions') || 'Sessions', onPress: () => navigate('SessionManagement') },
-                            { id: 'premium', icon: 'star', iconColor: '#FFD700', title: t('accountCenter.quickActions.premium') || 'Premium', onPress: () => navigate('PremiumSubscription') },
-                            ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: '#34C759', title: t('accountCenter.quickActions.billing') || 'Billing', onPress: () => navigate('PaymentGateway') }] : []),
-                            ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: '#FF9500', title: t('accountCenter.quickActions.switch') || 'Switch', onPress: () => navigate('AccountSwitcher') }] : []),
-                        ], [user?.isPremium, sessions, navigate, t])}
-                        theme={theme}
+                            { id: 'overview', icon: 'person-circle', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.overview') || 'Overview', onPress: () => navigate?.('AccountOverview') },
+                            { id: 'settings', icon: 'settings', iconColor: colors.iconData, title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate?.('EditProfile') },
+                            { id: 'sessions', icon: 'shield-checkmark', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.sessions') || 'Sessions', onPress: () => navigate?.('SessionManagement') },
+                            { id: 'premium', icon: 'star', iconColor: colors.iconPayments, title: t('accountCenter.quickActions.premium') || 'Premium', onPress: () => navigate?.('PremiumSubscription') },
+                            ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: colors.iconPersonalInfo, title: t('accountCenter.quickActions.billing') || 'Billing', onPress: () => navigate?.('PaymentGateway') }] : []),
+                            ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: colors.iconStorage, title: t('accountCenter.quickActions.switch') || 'Switch', onPress: () => navigate?.('AccountSwitcher') }] : []),
+                        ], [user?.isPremium, sessions, navigate, t, colors])}
+
                     />
                 </Section>
 
                 {/* Account Management */}
-                <Section title={t('accountCenter.sections.accountManagement') || 'Account Management'} theme={theme}>
+                <Section title={t('accountCenter.sections.accountManagement') || 'Account Management'} >
                     <GroupedSection
                         items={useMemo(() => [
                             {
                                 id: 'overview',
                                 icon: 'person-circle',
-                                iconColor: '#007AFF',
+                                iconColor: colors.iconSecurity,
                                 title: t('accountCenter.items.accountOverview.title') || 'Account Overview',
                                 subtitle: t('accountCenter.items.accountOverview.subtitle') || 'Complete account information',
-                                onPress: () => navigate('AccountOverview'),
+                                onPress: () => navigate?.('AccountOverview'),
                             },
                             {
                                 id: 'settings',
                                 icon: 'settings',
-                                iconColor: '#5856D6',
+                                iconColor: colors.iconData,
                                 title: t('accountCenter.items.editProfile.title') || 'Edit Profile',
                                 subtitle: t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences',
-                                onPress: () => navigate('EditProfile'),
+                                onPress: () => navigate?.('EditProfile'),
                             },
                             {
                                 id: 'sessions',
                                 icon: 'shield-checkmark',
-                                iconColor: '#30D158',
+                                iconColor: colors.iconSecurity,
                                 title: t('accountCenter.items.manageSessions.title') || 'Manage Sessions',
                                 subtitle: t('accountCenter.items.manageSessions.subtitle') || 'Security and active devices',
-                                onPress: () => navigate('SessionManagement'),
+                                onPress: () => navigate?.('SessionManagement'),
                             },
                             {
                                 id: 'files',
                                 icon: 'folder',
-                                iconColor: '#FF9500',
+                                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'),
+                                onPress: () => navigate?.('FileManagement'),
                             },
                             {
                                 id: 'premium',
                                 icon: 'star',
-                                iconColor: '#FFD700',
+                                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'),
+                                onPress: () => navigate?.('PremiumSubscription'),
                             },
                             ...(user?.isPremium ? [{
                                 id: 'billing',
                                 icon: 'card',
-                                iconColor: '#34C759',
+                                iconColor: colors.iconPersonalInfo,
                                 title: t('accountCenter.items.billing.title') || 'Billing Management',
                                 subtitle: t('accountCenter.items.billing.subtitle') || 'Payment methods and invoices',
-                                onPress: () => navigate('PaymentGateway'),
+                                onPress: () => navigate?.('PaymentGateway'),
                             }] : []),
-                        ], [user?.isPremium, navigate, t])}
-                        theme={theme}
+                        ], [user?.isPremium, navigate, t, colors])}
+
                     />
                 </Section>
 
                 {/* Multi-Account Management */}
                 {sessions && sessions.length > 1 && (
-                    <Section title={t('accountCenter.sections.multiAccount') || 'Multi-Account'} theme={theme}>
+                    <Section title={t('accountCenter.sections.multiAccount') || 'Multi-Account'} >
                         <GroupedSection
                             items={useMemo(() => [
                                 {
                                     id: 'switch',
                                     icon: 'people',
-                                    iconColor: '#FF9500',
+                                    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'),
+                                    onPress: () => navigate?.('AccountSwitcher'),
                                 },
                                 {
                                     id: 'add',
                                     icon: 'person-add',
-                                    iconColor: '#30D158',
+                                    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('SignIn'),
+                                    onPress: () => navigate?.('SignIn'),
                                 },
-                            ], [sessions.length, navigate, t])}
-                            theme={theme}
+                            ], [sessions.length, navigate, t, colors])}
+
                         />
                     </Section>
                 )}
 
                 {/* Single Account Setup */}
                 {(!sessions || sessions.length <= 1) && (
-                    <Section title={t('accountCenter.sections.addAccount') || 'Add Account'} theme={theme}>
+                    <Section title={t('accountCenter.sections.addAccount') || 'Add Account'} >
                         <GroupedSection
                             items={useMemo(() => [
                                 {
                                     id: 'add',
                                     icon: 'person-add',
-                                    iconColor: '#30D158',
+                                    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('SignIn'),
+                                    onPress: () => navigate?.('SignIn'),
                                 },
-                            ], [navigate, t])}
-                            theme={theme}
+                            ], [navigate, t, colors])}
+
                         />
                     </Section>
                 )}
 
                 {/* Additional Options */}
-                <Section title={t('accountCenter.sections.moreOptions') || 'More Options'} theme={theme}>
+                <Section title={t('accountCenter.sections.moreOptions') || 'More Options'} >
                     <GroupedSection
                         items={useMemo(() => [
                             ...(Platform.OS !== 'web' ? [{
                                 id: 'notifications',
                                 icon: 'notifications',
-                                iconColor: '#FF9500',
+                                iconColor: colors.iconStorage,
                                 title: t('accountCenter.items.notifications.title') || 'Notifications',
                                 subtitle: t('accountCenter.items.notifications.subtitle') || 'Manage notification settings',
                                 onPress: () => toast.info(t('accountCenter.items.notifications.coming') || 'Notifications feature coming soon!'),
@@ -224,15 +231,15 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'language',
                                 icon: 'language',
-                                iconColor: '#32D74B',
+                                iconColor: colors.iconPersonalInfo,
                                 title: t('language.title') || 'Language',
                                 subtitle: t('language.subtitle') || 'Choose your preferred language',
-                                onPress: () => navigate('LanguageSelector'),
+                                onPress: () => navigate?.('LanguageSelector'),
                             },
                             {
                                 id: 'help',
                                 icon: 'help-circle',
-                                iconColor: '#007AFF',
+                                iconColor: colors.iconSecurity,
                                 title: t('accountOverview.items.help.title') || 'Help & Support',
                                 subtitle: t('accountOverview.items.help.subtitle') || 'Get help and contact support',
                                 onPress: () => toast.info(t('accountOverview.items.help.coming') || 'Help & Support feature coming soon!'),
@@ -243,20 +250,20 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: '#8E8E93',
                                 title: t('accountCenter.items.appInfo.title') || 'App Information',
                                 subtitle: t('accountCenter.items.appInfo.subtitle') || 'Version and system details',
-                                onPress: () => navigate('AppInfo'),
+                                onPress: () => navigate?.('AppInfo'),
                             },
-                        ], [navigate, t])}
-                        theme={theme}
+                        ], [navigate, t, colors, Platform.OS])}
+
                     />
                 </Section>
 
                 {/* Sign Out Section */}
-                <Section theme={theme}>
+                <Section >
                     <GroupedItem
                         icon="log-out"
                         iconColor={dangerColor}
                         title={isLoading ? (t('accountCenter.signingOut') || 'Signing out...') : (t('common.actions.signOut') || 'Sign Out')}
-                        theme={theme}
+
                         onPress={confirmLogout}
                         isFirst={true}
                         isLast={true}
@@ -269,7 +276,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 </Section>
 
                 <View style={styles.versionContainer}>
-                    <Text style={[styles.versionText, { color: isDarkTheme ? '#666666' : '#999999' }]}>
+                    <Text style={[styles.versionText, { color: themeStyles.isDarkTheme ? '#666666' : '#999999' }]}>
                         {t('accountCenter.version', { version: packageInfo.version }) || `Version ${packageInfo.version}`}
                     </Text>
                 </View>
@@ -285,10 +292,7 @@ const styles = StyleSheet.create({
     scrollView: {
         flex: 1,
     },
-    scrollContainer: {
-        padding: 16,
-        paddingBottom: 20,
-    },
+    scrollContainer: screenContentStyle,
     versionContainer: {
         alignItems: 'center',
         marginTop: 20,