@oxyhq/services 5.11.12 → 5.12.0

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -21,6 +21,7 @@ import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
 import { Header, Section, GroupedSection, GroupedItem } from '../components';
+import { useI18n } from '../hooks/useI18n';
 
 /**
  * AccountOverviewScreen - Optimized for performance
@@ -38,6 +39,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     navigate,
 }) => {
     const { user, logout, isLoading, sessions, activeSessionId, oxyServices, isAuthenticated } = useOxy();
+    const { t } = useI18n();
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
@@ -127,32 +129,26 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
             }
         } catch (error) {
             console.error('Logout failed:', error);
-            toast.error('There was a problem signing you out. Please try again.');
+            toast.error(t('common.errors.signOutFailed'));
         }
     }, [logout, onClose]);
 
     const confirmLogout = useCallback(() => {
-        confirmAction(
-            'Are you sure you want to sign out?',
-            handleLogout
-        );
+        confirmAction(t('common.confirms.signOut'), handleLogout);
     }, [handleLogout]);
 
     const handleAddAccount = useCallback(() => {
-        toast.info('Add another account feature coming soon!');
-    }, []);
+        toast.info(t('accountOverview.addAccountComing'));
+    }, [t]);
 
     const handleSignOutAll = useCallback(() => {
-        confirmAction(
-            'Are you sure you want to sign out of all accounts?',
-            handleLogout
-        );
+        confirmAction(t('common.confirms.signOutAll'), handleLogout);
     }, [handleLogout]);
 
     if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
-                <Text style={[styles.message, { color: themeStyles.textColor }]}>Not signed in</Text>
+                <Text style={[styles.message, { color: themeStyles.textColor }]}>{t('common.status.notSignedIn')}</Text>
             </View>
         );
     }
@@ -169,7 +165,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         <View style={[styles.container, { backgroundColor: '#f2f2f2' }]}>
             {/* Header */}
             <Header
-                title="Account"
+                title={t('accountOverview.title')}
                 theme={theme}
                 onBack={onClose}
                 variant="minimal"
@@ -178,16 +174,16 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 {/* User Profile Section */}
-                <Section title="Profile" theme={theme} isFirst={true}>
+                <Section title={t('accountOverview.sections.profile')} theme={theme} isFirst={true}>
                     <GroupedSection
                         items={[
                             {
                                 id: 'profile-info',
                                 icon: 'person',
                                 iconColor: '#007AFF',
-                                title: user ? (typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username) : 'Loading...',
-                                subtitle: user ? (user.email || user.username) : 'Loading...',
-                                onPress: () => toast.info('Manage your Oxy Account feature coming soon!'),
+                                title: user ? (typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username) : (t('common.status.loading') || 'Loading...'),
+                                subtitle: user ? (user.email || user.username) : (t('common.status.loading') || 'Loading...'),
+                                onPress: () => toast.info(t('accountOverview.manageComing')),
                                 customContent: (
                                     <>
                                         <View style={styles.userIcon}>
@@ -200,9 +196,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                         </View>
                                         <TouchableOpacity
                                             style={styles.manageButton}
-                                            onPress={() => toast.info('Manage your Oxy Account feature coming soon!')}
+                                            onPress={() => toast.info(t('accountOverview.manageComing'))}
                                         >
-                                            <Text style={styles.manageButtonText}>Manage</Text>
+                                            <Text style={styles.manageButtonText}>{t('accountOverview.actions.manage')}</Text>
                                         </TouchableOpacity>
                                     </>
                                 ),
@@ -213,48 +209,48 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 </Section>
 
                 {/* Account Settings */}
-                <Section title="Account Settings" theme={theme}>
+                <Section title={t('accountOverview.sections.accountSettings')} theme={theme}>
                     <GroupedSection
                         items={[
                             {
                                 id: 'edit-profile',
                                 icon: 'person-circle',
                                 iconColor: '#007AFF',
-                                title: 'Edit Profile',
-                                subtitle: 'Update your personal information',
+                                title: t('accountOverview.items.editProfile.title'),
+                                subtitle: t('accountOverview.items.editProfile.subtitle'),
                                 onPress: () => navigate?.('EditProfile', { activeTab: 'profile' }),
                             },
                             {
                                 id: 'security-privacy',
                                 icon: 'shield-checkmark',
                                 iconColor: '#30D158',
-                                title: 'Security & Privacy',
-                                subtitle: 'Password, 2FA, and privacy settings',
+                                title: t('accountOverview.items.security.title'),
+                                subtitle: t('accountOverview.items.security.subtitle'),
                                 onPress: () => navigate?.('EditProfile', { activeTab: 'password' }),
                             },
                             {
                                 id: 'notifications',
                                 icon: 'notifications',
                                 iconColor: '#FF9500',
-                                title: 'Notifications',
-                                subtitle: 'Manage your notification preferences',
+                                title: t('accountOverview.items.notifications.title'),
+                                subtitle: t('accountOverview.items.notifications.subtitle'),
                                 onPress: () => navigate?.('EditProfile', { activeTab: 'notifications' }),
                             },
                             {
                                 id: 'premium-subscription',
                                 icon: 'star',
                                 iconColor: '#FFD700',
-                                title: 'Oxy+ Subscriptions',
-                                subtitle: user?.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features',
+                                title: t('accountOverview.items.premium.title'),
+                                subtitle: user?.isPremium ? t('accountOverview.items.premium.manage') : t('accountOverview.items.premium.upgrade'),
                                 onPress: () => navigate?.('PremiumSubscription'),
                             },
                             ...(user?.isPremium ? [{
                                 id: 'billing-management',
                                 icon: 'card',
                                 iconColor: '#34C759',
-                                title: 'Billing Management',
-                                subtitle: 'Payment methods and invoices',
-                                onPress: () => toast.info('Billing management feature coming soon!'),
+                                title: t('accountOverview.items.billing.title'),
+                                subtitle: t('accountOverview.items.billing.subtitle'),
+                                onPress: () => toast.info(t('accountOverview.items.billing.coming')),
                             }] : []),
                         ]}
                         theme={theme}
@@ -263,7 +259,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
                 {/* Additional Accounts */}
                 {showMoreAccounts && (
-                    <Section title={`Additional Accounts${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`} theme={theme}>
+                    <Section title={`${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`} theme={theme}>
                         {loadingAdditionalAccounts ? (
                             <GroupedSection
                                 items={[
@@ -271,12 +267,12 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                         id: 'loading-accounts',
                                         icon: 'sync',
                                         iconColor: '#007AFF',
-                                        title: 'Loading accounts...',
-                                        subtitle: 'Please wait while we load your additional accounts',
+                                        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="#007AFF" />
-                                                <Text style={styles.loadingText}>Loading accounts...</Text>
+                                                <Text style={styles.loadingText}>{t('accountOverview.loadingAdditional.title') || 'Loading accounts...'}</Text>
                                             </View>
                                         ),
                                     },
@@ -294,7 +290,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                         : account.name || account.username,
                                     subtitle: account.email || account.username,
                                     onPress: () => {
-                                        toast.info(`Switch to ${account.username}?`);
+                                        toast.info(t('accountOverview.items.accountSwitcher.switchPrompt', { username: account.username }) || `Switch to ${account.username}?`);
                                         // TODO: Implement account switching logic
                                         // switchSession(account.sessionId);
                                     },
@@ -324,8 +320,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                         id: 'no-accounts',
                                         icon: 'person-outline',
                                         iconColor: '#ccc',
-                                        title: 'No other accounts',
-                                        subtitle: 'Add another account to switch between them',
+                                        title: t('accountOverview.additional.noAccounts.title') || 'No other accounts',
+                                        subtitle: t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them',
                                     },
                                 ]}
                                 theme={theme}
@@ -336,23 +332,23 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
                 {/* Account Management */}
                 {showMoreAccounts && (
-                    <Section title="Account Management" theme={theme}>
+                    <Section title={t('accountOverview.sections.accountManagement') || 'Account Management'} theme={theme}>
                         <GroupedSection
                             items={[
                                 {
                                     id: 'add-account',
                                     icon: 'add',
                                     iconColor: '#007AFF',
-                                    title: 'Add another account',
-                                    subtitle: 'Sign in with a different account',
+                                    title: t('accountOverview.items.addAccount.title') || 'Add Another Account',
+                                    subtitle: t('accountOverview.items.addAccount.subtitle') || 'Sign in with a different account',
                                     onPress: handleAddAccount,
                                 },
                                 {
                                     id: 'sign-out-all',
                                     icon: 'log-out',
                                     iconColor: '#FF3B30',
-                                    title: 'Sign out of all accounts',
-                                    subtitle: 'Remove all accounts from this device',
+                                    title: t('accountOverview.items.signOutAll.title') || 'Sign out of all accounts',
+                                    subtitle: t('accountOverview.items.signOutAll.subtitle') || 'Remove all accounts from this device',
                                     onPress: handleSignOutAll,
                                 },
                             ]}
@@ -362,38 +358,40 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 )}
 
                 {/* Quick Actions */}
-                <Section title="Quick Actions" theme={theme}>
+                <Section title={t('accountOverview.sections.quickActions')} theme={theme}>
                     <GroupedSection
                         items={[
                             {
                                 id: 'account-switcher',
                                 icon: 'people',
                                 iconColor: '#5856D6',
-                                title: `${showMoreAccounts ? 'Hide' : 'Show'} Account Switcher`,
+                                title: showMoreAccounts
+                                    ? t('accountOverview.items.accountSwitcher.titleHide')
+                                    : t('accountOverview.items.accountSwitcher.titleShow'),
                                 subtitle: showMoreAccounts
-                                    ? 'Hide account switcher'
+                                    ? t('accountOverview.items.accountSwitcher.subtitleHide')
                                     : additionalAccountsData.length > 0
-                                        ? `Switch between ${additionalAccountsData.length + 1} accounts`
+                                        ? t('accountOverview.items.accountSwitcher.subtitleSwitchBetween', { count: String(additionalAccountsData.length + 1) })
                                         : loadingAdditionalAccounts
-                                            ? 'Loading additional accounts...'
-                                            : 'Manage multiple accounts',
+                                            ? t('accountOverview.items.accountSwitcher.subtitleLoading')
+                                            : t('accountOverview.items.accountSwitcher.subtitleManageMultiple'),
                                 onPress: () => setShowMoreAccounts(!showMoreAccounts),
                             },
                             {
                                 id: 'download-data',
                                 icon: 'download',
                                 iconColor: '#34C759',
-                                title: 'Download My Data',
-                                subtitle: 'Export your account information',
-                                onPress: () => toast.info('Download account data feature coming soon!'),
+                                title: t('accountOverview.items.downloadData.title'),
+                                subtitle: t('accountOverview.items.downloadData.subtitle'),
+                                onPress: () => toast.info(t('accountOverview.items.downloadData.coming')),
                             },
                             {
                                 id: 'delete-account',
                                 icon: 'trash',
                                 iconColor: '#FF3B30',
-                                title: 'Delete Account',
-                                subtitle: 'Permanently delete your account',
-                                onPress: () => toast.info('Delete account feature coming soon!'),
+                                title: t('accountOverview.items.deleteAccount.title'),
+                                subtitle: t('accountOverview.items.deleteAccount.subtitle'),
+                                onPress: () => toast.info(t('accountOverview.items.deleteAccount.coming')),
                             },
                         ]}
                         theme={theme}
@@ -401,39 +399,39 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 </Section>
 
                 {/* Support & Settings */}
-                <Section title="Support & Settings" theme={theme}>
+                <Section title={t('accountOverview.sections.support')} theme={theme}>
                     <GroupedSection
                         items={[
                             {
                                 id: 'account-preferences',
                                 icon: 'settings',
                                 iconColor: '#8E8E93',
-                                title: 'Account Preferences',
-                                subtitle: 'Customize your account experience',
-                                onPress: () => toast.info('Account preferences coming soon!'),
+                                title: t('accountOverview.items.preferences.title'),
+                                subtitle: t('accountOverview.items.preferences.subtitle'),
+                                onPress: () => toast.info(t('accountOverview.items.preferences.coming')),
                             },
                             {
                                 id: 'help-support',
                                 icon: 'help-circle',
                                 iconColor: '#007AFF',
-                                title: 'Help & Support',
-                                subtitle: 'Get help with your account',
-                                onPress: () => toast.info('Help & support feature coming soon!'),
+                                title: t('accountOverview.items.help.title'),
+                                subtitle: t('accountOverview.items.help.subtitle'),
+                                onPress: () => toast.info(t('accountOverview.items.help.coming')),
                             },
                             {
                                 id: 'connected-apps',
                                 icon: 'link',
                                 iconColor: '#32D74B',
-                                title: 'Connected Apps',
-                                subtitle: 'Manage third-party app access',
-                                onPress: () => toast.info('Connected apps feature coming soon!'),
+                                title: t('accountOverview.items.connectedApps.title'),
+                                subtitle: t('accountOverview.items.connectedApps.subtitle'),
+                                onPress: () => toast.info(t('accountOverview.items.connectedApps.coming')),
                             },
                             {
                                 id: 'about',
                                 icon: 'information-circle',
                                 iconColor: '#8E8E93',
-                                title: 'About',
-                                subtitle: 'App version and information',
+                                title: t('accountOverview.items.about.title'),
+                                subtitle: t('accountOverview.items.about.subtitle'),
                                 onPress: () => navigate?.('AppInfo'),
                             },
                         ]}
@@ -442,12 +440,12 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 </Section>
 
                 {/* Sign Out */}
-                <Section title="Account Actions" theme={theme}>
+                <Section title={t('accountOverview.sections.actions')} theme={theme}>
                     <GroupedItem
                         icon="log-out"
                         iconColor="#FF3B30"
-                        title="Sign Out"
-                        subtitle="Sign out of your current account"
+                        title={t('accountOverview.items.signOut.title')}
+                        subtitle={t('accountOverview.items.signOut.subtitle')}
                         theme={theme}
                         onPress={confirmLogout}
                         isFirst={true}