@oxyhq/services 5.3.11 → 5.4.1

package/src/ui/screens/AccountCenterScreen.tsx

@@ -8,13 +8,20 @@ import {
     ScrollView,
     Alert,
     Platform,
-    TextStyle,
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
-import { fontFamilies } from '../styles/fonts';
 import { packageInfo } from '../../constants/version';
 import { toast } from '../../lib/sonner';
+import { Ionicons } from '@expo/vector-icons';
+import { fontFamilies } from '../styles/fonts';
+import { 
+    ProfileCard, 
+    Section, 
+    QuickActions, 
+    GroupedSection, 
+    GroupedItem 
+} from '../components';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -25,8 +32,8 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
 
     const isDarkTheme = theme === 'dark';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
+    const backgroundColor = isDarkTheme ? '#121212' : '#f2f2f2';
+    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
     const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
     const primaryColor = '#0066CC';
     const dangerColor = '#D32F2F';
@@ -80,97 +87,184 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
 
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
-                <View style={styles.header}>
-                    <Text style={[styles.title, { color: textColor }]}>Account</Text>
-                </View>
-
-                <View style={[styles.userInfoContainer, { backgroundColor: secondaryBackgroundColor, borderColor }]}>
-                    <Text style={[styles.userName, { color: textColor }]}>{user.username}</Text>
-                    {user.email && (
-                        <Text style={[styles.userEmail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                            {user.email}
-                        </Text>
-                    )}
-                </View>
+            {/* Header with user profile */}
+            <ProfileCard
+                user={user}
+                theme={theme}
+                onEditPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
+                onClosePress={onClose}
+                showCloseButton={!!onClose}
+            />
 
-                <View style={styles.actionsContainer}>
-                    {/* Show Account Switcher if multiple sessions exist */}
-                    {sessions && sessions.length > 1 && (
-                        <TouchableOpacity
-                            style={[styles.actionButton, { borderColor }]}
-                            onPress={() => navigate('AccountSwitcher')}
-                        >
-                            <Text style={[styles.actionButtonText, { color: textColor }]}>
-                                Switch Account ({sessions.length} accounts)
-                            </Text>
-                        </TouchableOpacity>
-                    )}
+            <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
+                {/* Quick Actions */}
+                <Section title="Quick Actions" theme={theme} isFirst={true}>
+                    <QuickActions
+                        actions={[
+                            { id: 'overview', icon: 'person-circle', iconColor: '#007AFF', title: 'Overview', onPress: () => navigate('AccountOverview') },
+                            { id: 'settings', icon: 'settings', iconColor: '#5856D6', title: 'Settings', onPress: () => navigate('AccountSettings') },
+                            { id: 'sessions', icon: 'shield-checkmark', iconColor: '#30D158', title: 'Sessions', onPress: () => navigate('SessionManagement') },
+                            { id: 'premium', icon: 'star', iconColor: '#FFD700', title: 'Premium', onPress: () => navigate('PremiumSubscription') },
+                            ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: '#34C759', title: 'Billing', onPress: () => navigate('BillingManagement') }] : []),
+                            ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: '#FF9500', title: 'Switch', onPress: () => navigate('AccountSwitcher') }] : []),
+                        ]}
+                        theme={theme}
+                    />
+                </Section>
 
-                    {/* Add Account button - always shown for multi-user functionality */}
-                    <TouchableOpacity
-                        style={[styles.actionButton, { borderColor }]}
-                        onPress={() => navigate('SignIn')}
-                    >
-                        <Text style={[styles.actionButtonText, { color: textColor }]}>Add Another Account</Text>
-                    </TouchableOpacity>
+                {/* Account Management */}
+                <Section title="Account Management" theme={theme}>
+                    <GroupedSection
+                        items={[
+                            {
+                                id: 'overview',
+                                icon: 'person-circle',
+                                iconColor: '#007AFF',
+                                title: 'Account Overview',
+                                subtitle: 'Complete account information',
+                                onPress: () => navigate('AccountOverview'),
+                            },
+                            {
+                                id: 'settings',
+                                icon: 'settings',
+                                iconColor: '#5856D6',
+                                title: 'Account Settings',
+                                subtitle: 'Manage your preferences',
+                                onPress: () => navigate('AccountSettings'),
+                            },
+                            {
+                                id: 'sessions',
+                                icon: 'shield-checkmark',
+                                iconColor: '#30D158',
+                                title: 'Manage Sessions',
+                                subtitle: 'Security and active devices',
+                                onPress: () => navigate('SessionManagement'),
+                            },
+                            {
+                                id: 'files',
+                                icon: 'folder',
+                                iconColor: '#FF9500',
+                                title: 'File Management',
+                                subtitle: 'Upload, download, and manage your files',
+                                onPress: () => navigate('FileManagement'),
+                            },
+                            {
+                                id: 'premium',
+                                icon: 'star',
+                                iconColor: '#FFD700',
+                                title: 'Oxy+ Subscriptions',
+                                subtitle: user?.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features',
+                                onPress: () => navigate('PremiumSubscription'),
+                            },
+                            ...(user?.isPremium ? [{
+                                id: 'billing',
+                                icon: 'card',
+                                iconColor: '#34C759',
+                                title: 'Billing Management',
+                                subtitle: 'Payment methods and invoices',
+                                onPress: () => navigate('BillingManagement'),
+                            }] : []),
+                        ]}
+                        theme={theme}
+                    />
+                </Section>
 
-                    <TouchableOpacity
-                        style={[styles.actionButton, { borderColor }]}
-                        onPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
-                    >
-                        <Text style={[styles.actionButtonText, { color: textColor }]}>Edit Profile</Text>
-                    </TouchableOpacity>
+                {/* Multi-Account Management */}
+                {sessions && sessions.length > 1 && (
+                    <Section title="Multi-Account" theme={theme}>
+                        <GroupedSection
+                            items={[
+                                {
+                                    id: 'switch',
+                                    icon: 'people',
+                                    iconColor: '#FF9500',
+                                    title: 'Switch Account',
+                                    subtitle: `${sessions.length} accounts available`,
+                                    onPress: () => navigate('AccountSwitcher'),
+                                },
+                                {
+                                    id: 'add',
+                                    icon: 'person-add',
+                                    iconColor: '#30D158',
+                                    title: 'Add Another Account',
+                                    subtitle: 'Sign in with a different account',
+                                    onPress: () => navigate('SignIn'),
+                                },
+                            ]}
+                            theme={theme}
+                        />
+                    </Section>
+                )}
 
-                    <TouchableOpacity
-                        style={[styles.actionButton, { borderColor }]}
-                        onPress={() => navigate('AccountSettings')}
-                    >
-                        <Text style={[styles.actionButtonText, { color: textColor }]}>Account Settings</Text>
-                    </TouchableOpacity>
+                {/* Single Account Setup */}
+                {(!sessions || sessions.length <= 1) && (
+                    <Section title="Add Account" theme={theme}>
+                        <GroupedSection
+                            items={[
+                                {
+                                    id: 'add',
+                                    icon: 'person-add',
+                                    iconColor: '#30D158',
+                                    title: 'Add Another Account',
+                                    subtitle: 'Sign in with a different account',
+                                    onPress: () => navigate('SignIn'),
+                                },
+                            ]}
+                            theme={theme}
+                        />
+                    </Section>
+                )}
 
-                    <TouchableOpacity
-                        style={[styles.actionButton, { borderColor }]}
-                        onPress={() => navigate('SessionManagement')}
-                    >
-                        <Text style={[styles.actionButtonText, { color: textColor }]}>Manage Sessions</Text>
-                    </TouchableOpacity>
-
-                    {Platform.OS !== 'web' && (
-                        <TouchableOpacity
-                            style={[styles.actionButton, { borderColor }]}
-                            onPress={() => toast.info('Notifications feature coming soon!')}
-                        >
-                            <Text style={[styles.actionButtonText, { color: textColor }]}>Notifications</Text>
-                        </TouchableOpacity>
-                    )}
-
-                    <TouchableOpacity
-                        style={[styles.actionButton, { borderColor }]}
-                        onPress={() => toast.info('Help & Support feature coming soon!')}
-                    >
-                        <Text style={[styles.actionButtonText, { color: textColor }]}>Help & Support</Text>
-                    </TouchableOpacity>
-
-                    <TouchableOpacity
-                        style={[styles.actionButton, { borderColor }]}
-                        onPress={() => navigate('AppInfo')}
-                    >
-                        <Text style={[styles.actionButtonText, { color: textColor }]}>App Information</Text>
-                    </TouchableOpacity>
-                </View>
+                {/* Additional Options */}
+                <Section title="More Options" theme={theme}>
+                    <GroupedSection
+                        items={[
+                            ...(Platform.OS !== 'web' ? [{
+                                id: 'notifications',
+                                icon: 'notifications',
+                                iconColor: '#FF9500',
+                                title: 'Notifications',
+                                subtitle: 'Manage notification settings',
+                                onPress: () => toast.info('Notifications feature coming soon!'),
+                            }] : []),
+                            {
+                                id: 'help',
+                                icon: 'help-circle',
+                                iconColor: '#007AFF',
+                                title: 'Help & Support',
+                                subtitle: 'Get help and contact support',
+                                onPress: () => toast.info('Help & Support feature coming soon!'),
+                            },
+                            {
+                                id: 'appinfo',
+                                icon: 'information-circle',
+                                iconColor: '#8E8E93',
+                                title: 'App Information',
+                                subtitle: 'Version and system details',
+                                onPress: () => navigate('AppInfo'),
+                            },
+                        ]}
+                        theme={theme}
+                    />
+                </Section>
 
-                <TouchableOpacity
-                    style={[styles.logoutButton, { backgroundColor: isDarkTheme ? '#300000' : '#FFEBEE' }]}
-                    onPress={confirmLogout}
-                    disabled={isLoading}
-                >
-                    {isLoading ? (
-                        <ActivityIndicator color={dangerColor} size="small" />
-                    ) : (
-                        <Text style={[styles.logoutButtonText, { color: dangerColor }]}>Sign Out</Text>
-                    )}
-                </TouchableOpacity>
+                {/* Sign Out Section */}
+                <Section theme={theme}>
+                    <GroupedItem
+                        icon="log-out"
+                        iconColor={dangerColor}
+                        title={isLoading ? "Signing out..." : "Sign Out"}
+                        theme={theme}
+                        onPress={confirmLogout}
+                        isFirst={true}
+                        isLast={true}
+                        showChevron={false}
+                        disabled={isLoading}
+                        customContent={isLoading ? (
+                            <ActivityIndicator color={dangerColor} size="small" style={{ marginRight: 16 }} />
+                        ) : null}
+                    />
+                </Section>
 
                 <View style={styles.versionContainer}>
                     <Text style={[styles.versionText, { color: isDarkTheme ? '#666666' : '#999999' }]}>
@@ -178,12 +272,6 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     </Text>
                 </View>
             </ScrollView>
-
-            <View style={styles.footer}>
-                <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-                    <Text style={[styles.closeButtonText, { color: primaryColor }]}>Close</Text>
-                </TouchableOpacity>
-            </View>
         </View>
     );
 };
@@ -196,76 +284,17 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     scrollContainer: {
-        padding: 20,
-    },
-    header: {
-        marginBottom: 24,
-        alignItems: 'center',
-    },
-    title: {
-        fontFamily: Platform.OS === 'web'
-            ? 'Phudu'  // Use CSS font name directly for web
-            : 'Phudu-Bold',  // Use exact font name as registered with Font.loadAsync
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
-        fontSize: 24,
-    },
-    userInfoContainer: {
-        padding: 20,
-        borderRadius: 35,
-        borderWidth: 1,
-        marginBottom: 24,
-        alignItems: 'center',
-    },
-    userName: {
-        fontSize: 20,
-        fontWeight: 'bold',
-        marginBottom: 8,
-    },
-    userEmail: {
-        fontSize: 16,
-    },
-    actionsContainer: {
-        marginBottom: 24,
-    },
-    actionButton: {
-        paddingVertical: 16,
-        paddingHorizontal: 20,
-        borderBottomWidth: 1,
-    },
-    actionButtonText: {
-        fontSize: 16,
-    },
-    logoutButton: {
-        height: 50,
-        borderRadius: 35,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: 24,
-    },
-    logoutButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
+        padding: 16,
+        paddingBottom: 20,
     },
     versionContainer: {
         alignItems: 'center',
+        marginTop: 20,
         marginBottom: 20,
     },
     versionText: {
-        fontSize: 14,
-    },
-    footer: {
-        padding: 16,
-        borderTopWidth: 1,
-        borderTopColor: '#E0E0E0',
-        alignItems: 'center',
-    },
-    closeButton: {
-        paddingVertical: 8,
-        paddingHorizontal: 16,
-    },
-    closeButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
+        fontSize: 12,
+        fontFamily: fontFamilies.phudu,
     },
     message: {
         fontSize: 16,