@oxyhq/services 5.14.0 → 5.15.1

package/lib/module/ui/screens/AccountOverviewScreen.js

@@ -1,14 +1,40 @@
 "use strict";
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Alert, Platform, Image } from 'react-native';
-import { useOxy } from '../context/OxyContext';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Avatar from '../components/Avatar';
 import OxyIcon from '../components/icon/OxyIcon';
+import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
-import { Header, Section, GroupedSection, GroupedItem } from '../components';
+import { Section, GroupedSection, GroupedItem } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { getDisplayName, getShortDisplayName } from '../utils/user-utils';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { normalizeTheme } from '../utils/themeUtils';
+import { useOxy } from '../context/OxyContext';
+import { SECTION_GAP, HEADER_PADDING_TOP_OVERVIEW, createScreenContentStyle } from '../constants/spacing';
+
+// Optional Lottie import - gracefully handle if not available
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+let LottieView = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  LottieView = require('lottie-react-native').default;
+} catch {
+  // Lottie not available, will use fallback
+}
+
+// Import Lottie animation - will be undefined if file doesn't exist
+let lottieAnimation = undefined;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  lottieAnimation = require('../assets/lottie/welcomeheader_background_op1.json');
+} catch {
+  // Animation file not available
+}
 
 /**
  * AccountOverviewScreen - Optimized for performance
@@ -20,12 +46,12 @@ import { useI18n } from '../hooks/useI18n';
  * - React.memo wrapper to prevent re-renders when props haven't changed
  * - GroupedSection components for better organization and cleaner code
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const AccountOverviewScreen = ({
   onClose,
   theme,
   navigate
 }) => {
+  // Use useOxy() hook for OxyContext values
   const {
     user,
     logout,
@@ -41,24 +67,54 @@ const AccountOverviewScreen = ({
   const [showMoreAccounts, setShowMoreAccounts] = useState(false);
   const [additionalAccountsData, setAdditionalAccountsData] = useState([]);
   const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
+  const lottieRef = useRef(null);
+  const hasPlayedRef = useRef(false);
+  const insets = useSafeAreaInsets();
 
-  // Memoize theme-related calculations to prevent unnecessary recalculations
-  const themeStyles = useMemo(() => {
-    const isDarkTheme = theme === 'dark';
-    return {
-      isDarkTheme,
-      textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-      backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
-      secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
-      borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-      primaryColor: '#d169e5',
-      dangerColor: '#D32F2F',
-      iconColor: isDarkTheme ? '#BBBBBB' : '#666666'
-    };
-  }, [theme]);
+  // Use centralized theme styles hook for consistency
+  const colorScheme = useColorScheme();
+  const normalizedTheme = normalizeTheme(theme);
+  const baseThemeStyles = useThemeStyles(normalizedTheme, colorScheme);
+  const themeStyles = useMemo(() => ({
+    ...baseThemeStyles,
+    // AccountOverviewScreen uses a custom primary color (purple) instead of the default blue
+    primaryColor: '#d169e5',
+    // Keep custom icon color for this screen
+    iconColor: baseThemeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+  }), [baseThemeStyles]);
+
+  // Compute user data for display
+  const displayName = useMemo(() => getDisplayName(user), [user]);
+  const shortDisplayName = useMemo(() => getShortDisplayName(user), [user]);
+  const avatarUrl = useMemo(() => {
+    if (user?.avatar && oxyServices) {
+      return oxyServices.getFileDownloadUrl(user.avatar, 'thumb');
+    }
+    return undefined;
+  }, [user?.avatar, oxyServices]);
+
+  // Handle avatar press to navigate to EditProfile
+  const handleAvatarPress = useCallback(() => {
+    navigate?.('EditProfile', {
+      initialSection: 'profilePicture',
+      initialField: 'avatar'
+    });
+  }, [navigate]);
+
+  // Play Lottie animation once when component mounts
+  useEffect(() => {
+    if (hasPlayedRef.current || !LottieView || !lottieRef.current || !lottieAnimation) return;
+    const timer = setTimeout(() => {
+      if (lottieRef.current && !hasPlayedRef.current) {
+        lottieRef.current.play();
+        hasPlayedRef.current = true;
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
 
   // Memoize additional accounts filtering to prevent recalculation on every render
-  const additionalAccounts = useMemo(() => sessions.filter(session => session.sessionId !== activeSessionId && session.userId !== user?.id), [sessions, activeSessionId, user?.id]);
+  const additionalAccounts = useMemo(() => (sessions || []).filter(session => session.sessionId !== activeSessionId && session.userId !== user?.id), [sessions, activeSessionId, user?.id]);
 
   // Load user profiles for additional accounts
   React.useEffect(() => {
@@ -257,59 +313,74 @@ const AccountOverviewScreen = ({
       })
     });
   }
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsx(View, {
     style: [styles.container, {
-      backgroundColor: '#f2f2f2'
+      backgroundColor: themeStyles.backgroundColor
     }],
-    children: [/*#__PURE__*/_jsx(Header, {
-      title: t('accountOverview.title'),
-      theme: theme,
-      onBack: onClose,
-      variant: "minimal",
-      elevation: "subtle"
-    }), /*#__PURE__*/_jsxs(ScrollView, {
+    children: /*#__PURE__*/_jsxs(ScrollView, {
       style: styles.content,
-      children: [/*#__PURE__*/_jsx(Section, {
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      children: [user && /*#__PURE__*/_jsx(View, {
+        style: styles.headerSection,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.avatarSectionWrapper,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.avatarContainer,
+            children: [LottieView && lottieAnimation && /*#__PURE__*/_jsx(LottieView, {
+              ref: lottieRef,
+              source: lottieAnimation,
+              style: styles.lottieBackground,
+              loop: false,
+              autoPlay: false
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.avatarWrapper,
+              onPress: handleAvatarPress,
+              activeOpacity: 0.8,
+              children: /*#__PURE__*/_jsx(Avatar, {
+                uri: avatarUrl,
+                name: displayName,
+                size: 100,
+                theme: normalizedTheme
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.nameWrapper,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.welcomeText, {
+                color: themeStyles.textColor
+              }],
+              children: displayName
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.welcomeSubtext, {
+                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+              }],
+              children: "Manage your Oxy account."
+            })]
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Section, {
         title: t('accountOverview.sections.profile'),
-        theme: theme,
         isFirst: true,
         children: /*#__PURE__*/_jsx(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 : t('common.status.loading') || 'Loading...',
+            iconColor: baseThemeStyles.colors.iconSecurity,
+            title: displayName,
             subtitle: user ? user.email || user.username : t('common.status.loading') || 'Loading...',
-            onPress: () => toast.info(t('accountOverview.manageComing')),
-            customContent: /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(View, {
-                style: styles.userIcon,
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  uri: user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined,
-                  name: user?.name?.full,
-                  size: 40,
-                  theme: theme
-                })
-              }), /*#__PURE__*/_jsx(TouchableOpacity, {
-                style: styles.manageButton,
-                onPress: () => toast.info(t('accountOverview.manageComing')),
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.manageButtonText,
-                  children: t('accountOverview.actions.manage')
-                })
-              })]
+            onPress: () => navigate?.('EditProfile', {
+              activeTab: 'profile'
             })
-          }],
-          theme: theme
+          }]
         })
       }), /*#__PURE__*/_jsx(Section, {
         title: t('accountOverview.sections.accountSettings'),
-        theme: theme,
         children: /*#__PURE__*/_jsx(GroupedSection, {
           items: [{
             id: 'edit-profile',
             icon: 'person-circle',
-            iconColor: '#007AFF',
+            iconColor: baseThemeStyles.colors.iconPersonalInfo,
             title: t('accountOverview.items.editProfile.title'),
             subtitle: t('accountOverview.items.editProfile.subtitle'),
             onPress: () => navigate?.('EditProfile', {
@@ -318,7 +389,7 @@ const AccountOverviewScreen = ({
           }, {
             id: 'security-privacy',
             icon: 'shield-checkmark',
-            iconColor: '#30D158',
+            iconColor: baseThemeStyles.colors.iconSecurity,
             title: t('accountOverview.items.security.title'),
             subtitle: t('accountOverview.items.security.subtitle'),
             onPress: () => navigate?.('EditProfile', {
@@ -327,7 +398,7 @@ const AccountOverviewScreen = ({
           }, {
             id: 'notifications',
             icon: 'notifications',
-            iconColor: '#FF9500',
+            iconColor: baseThemeStyles.colors.iconStorage,
             title: t('accountOverview.items.notifications.title'),
             subtitle: t('accountOverview.items.notifications.subtitle'),
             onPress: () => navigate?.('EditProfile', {
@@ -336,47 +407,44 @@ const AccountOverviewScreen = ({
           }, {
             id: 'premium-subscription',
             icon: 'star',
-            iconColor: '#FFD700',
+            iconColor: baseThemeStyles.colors.iconPayments,
             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',
+            iconColor: baseThemeStyles.colors.iconPersonalInfo,
             title: t('accountOverview.items.billing.title'),
             subtitle: t('accountOverview.items.billing.subtitle'),
             onPress: () => toast.info(t('accountOverview.items.billing.coming'))
-          }] : [])],
-          theme: theme
+          }] : [])]
         })
       }), showMoreAccounts && /*#__PURE__*/_jsx(Section, {
         title: `${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`,
-        theme: theme,
         children: loadingAdditionalAccounts ? /*#__PURE__*/_jsx(GroupedSection, {
           items: [{
             id: 'loading-accounts',
             icon: 'sync',
-            iconColor: '#007AFF',
+            iconColor: baseThemeStyles.colors.iconSecurity,
             title: t('accountOverview.loadingAdditional.title') || 'Loading accounts...',
             subtitle: t('accountOverview.loadingAdditional.subtitle') || 'Please wait while we load your additional accounts',
             customContent: /*#__PURE__*/_jsxs(View, {
               style: styles.loadingContainer,
               children: [/*#__PURE__*/_jsx(ActivityIndicator, {
                 size: "small",
-                color: "#007AFF"
+                color: baseThemeStyles.colors.iconSecurity
               }), /*#__PURE__*/_jsx(Text, {
                 style: styles.loadingText,
                 children: t('accountOverview.loadingAdditional.title') || 'Loading accounts...'
               })]
             })
-          }],
-          theme: theme
+          }]
         }) : additionalAccountsData.length > 0 ? /*#__PURE__*/_jsx(GroupedSection, {
           items: additionalAccountsData.map((account, index) => ({
             id: `account-${account.id}`,
             icon: 'person',
-            iconColor: '#5856D6',
+            iconColor: baseThemeStyles.colors.iconData,
             title: typeof account.name === 'object' ? account.name?.full || account.name?.first || account.username : account.name || account.username,
             subtitle: account.email || account.username,
             onPress: () => {
@@ -405,8 +473,7 @@ const AccountOverviewScreen = ({
                 color: "#ccc"
               })]
             })
-          })),
-          theme: theme
+          }))
         }) : /*#__PURE__*/_jsx(GroupedSection, {
           items: [{
             id: 'no-accounts',
@@ -414,38 +481,34 @@ const AccountOverviewScreen = ({
             iconColor: '#ccc',
             title: t('accountOverview.additional.noAccounts.title') || 'No other accounts',
             subtitle: t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them'
-          }],
-          theme: theme
+          }]
         })
       }), showMoreAccounts && /*#__PURE__*/_jsx(Section, {
         title: t('accountOverview.sections.accountManagement') || 'Account Management',
-        theme: theme,
         children: /*#__PURE__*/_jsx(GroupedSection, {
           items: [{
             id: 'add-account',
             icon: 'add',
-            iconColor: '#007AFF',
+            iconColor: baseThemeStyles.colors.iconSecurity,
             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',
+            iconColor: baseThemeStyles.colors.iconSharing,
             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
-          }],
-          theme: theme
+          }]
         })
       }), /*#__PURE__*/_jsx(Section, {
         title: t('accountOverview.sections.quickActions'),
-        theme: theme,
         children: /*#__PURE__*/_jsx(GroupedSection, {
           items: [{
             id: 'account-switcher',
             icon: 'people',
-            iconColor: '#5856D6',
+            iconColor: baseThemeStyles.colors.iconData,
             title: showMoreAccounts ? t('accountOverview.items.accountSwitcher.titleHide') : t('accountOverview.items.accountSwitcher.titleShow'),
             subtitle: showMoreAccounts ? t('accountOverview.items.accountSwitcher.subtitleHide') : additionalAccountsData.length > 0 ? t('accountOverview.items.accountSwitcher.subtitleSwitchBetween', {
               count: String(additionalAccountsData.length + 1)
@@ -454,49 +517,47 @@ const AccountOverviewScreen = ({
           }, {
             id: 'history-view',
             icon: 'time',
-            iconColor: '#007AFF',
+            iconColor: baseThemeStyles.colors.iconSecurity,
             title: t('accountOverview.items.history.title') || 'History',
             subtitle: t('accountOverview.items.history.subtitle') || 'View and manage your search history',
             onPress: () => navigate?.('HistoryView')
           }, {
             id: 'saves-collections',
             icon: 'bookmark',
-            iconColor: '#FF9500',
+            iconColor: baseThemeStyles.colors.iconStorage,
             title: t('accountOverview.items.saves.title') || 'Saves & Collections',
             subtitle: t('accountOverview.items.saves.subtitle') || 'View your saved items and collections',
             onPress: () => navigate?.('SavesCollections')
           }, {
             id: 'download-data',
             icon: 'download',
-            iconColor: '#34C759',
+            iconColor: baseThemeStyles.colors.iconPersonalInfo,
             title: t('accountOverview.items.downloadData.title'),
             subtitle: t('accountOverview.items.downloadData.subtitle'),
             onPress: handleDownloadData
           }, {
             id: 'delete-account',
             icon: 'trash',
-            iconColor: '#FF3B30',
+            iconColor: baseThemeStyles.colors.iconSharing,
             title: t('accountOverview.items.deleteAccount.title'),
             subtitle: t('accountOverview.items.deleteAccount.subtitle'),
             onPress: handleDeleteAccount
-          }],
-          theme: theme
+          }]
         })
       }), /*#__PURE__*/_jsx(Section, {
         title: t('accountOverview.sections.support'),
-        theme: theme,
         children: /*#__PURE__*/_jsx(GroupedSection, {
           items: [{
             id: 'search-settings',
             icon: 'search',
-            iconColor: '#007AFF',
+            iconColor: baseThemeStyles.colors.iconSecurity,
             title: t('accountOverview.items.searchSettings.title') || 'Search Settings',
             subtitle: t('accountOverview.items.searchSettings.subtitle') || 'SafeSearch and personalization',
             onPress: () => navigate?.('SearchSettings')
           }, {
             id: 'language-settings',
             icon: 'language',
-            iconColor: '#32D74B',
+            iconColor: baseThemeStyles.colors.iconPersonalInfo,
             title: t('accountOverview.items.language.title') || 'Language',
             subtitle: t('accountOverview.items.language.subtitle') || 'Choose your preferred language',
             onPress: () => navigate?.('LanguageSelector')
@@ -510,14 +571,14 @@ const AccountOverviewScreen = ({
           }, {
             id: 'help-support',
             icon: 'help-circle',
-            iconColor: '#007AFF',
+            iconColor: baseThemeStyles.colors.iconSecurity,
             title: t('accountOverview.items.help.title'),
             subtitle: t('accountOverview.items.help.subtitle'),
             onPress: () => navigate?.('HelpSupport')
           }, {
             id: 'privacy-policy',
             icon: 'shield-checkmark',
-            iconColor: '#30D158',
+            iconColor: baseThemeStyles.colors.iconPersonalInfo,
             title: t('accountOverview.items.privacyPolicy.title') || 'Privacy Policy',
             subtitle: t('accountOverview.items.privacyPolicy.subtitle') || 'How we handle your data',
             onPress: () => navigate?.('LegalDocuments', {
@@ -526,7 +587,7 @@ const AccountOverviewScreen = ({
           }, {
             id: 'terms-of-service',
             icon: 'document-text',
-            iconColor: '#007AFF',
+            iconColor: baseThemeStyles.colors.iconSecurity,
             title: t('accountOverview.items.termsOfService.title') || 'Terms of Service',
             subtitle: t('accountOverview.items.termsOfService.subtitle') || 'Terms and conditions of use',
             onPress: () => navigate?.('LegalDocuments', {
@@ -535,7 +596,7 @@ const AccountOverviewScreen = ({
           }, {
             id: 'connected-apps',
             icon: 'link',
-            iconColor: '#32D74B',
+            iconColor: baseThemeStyles.colors.iconPersonalInfo,
             title: t('accountOverview.items.connectedApps.title'),
             subtitle: t('accountOverview.items.connectedApps.subtitle'),
             onPress: () => toast.info(t('accountOverview.items.connectedApps.coming'))
@@ -546,44 +607,101 @@ const AccountOverviewScreen = ({
             title: t('accountOverview.items.about.title'),
             subtitle: t('accountOverview.items.about.subtitle'),
             onPress: () => navigate?.('AppInfo')
-          }],
-          theme: theme
+          }]
         })
       }), /*#__PURE__*/_jsx(Section, {
         title: t('accountOverview.sections.actions'),
-        theme: theme,
         children: /*#__PURE__*/_jsx(GroupedItem, {
           icon: "log-out",
           iconColor: "#FF3B30",
           title: t('accountOverview.items.signOut.title'),
           subtitle: t('accountOverview.items.signOut.subtitle'),
-          theme: theme,
           onPress: confirmLogout,
           isFirst: true,
           isLast: true,
           showChevron: false
         })
       })]
-    })]
+    })
   });
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: '#f2f2f2'
+    flex: 1
   },
   content: {
-    flex: 1,
-    padding: 16
+    flex: 1
+  },
+  scrollContent: createScreenContentStyle(HEADER_PADDING_TOP_OVERVIEW),
+  headerSection: {
+    alignItems: 'center',
+    marginBottom: SECTION_GAP,
+    paddingTop: HEADER_PADDING_TOP_OVERVIEW
+  },
+  avatarSectionWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%'
+  },
+  avatarContainer: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    maxWidth: 600,
+    minHeight: 100,
+    overflow: 'hidden',
+    alignSelf: 'center',
+    aspectRatio: 6
+  },
+  lottieBackground: {
+    position: 'absolute',
+    width: '100%',
+    maxWidth: 600,
+    minHeight: 100,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 0,
+    aspectRatio: 6
+  },
+  avatarWrapper: {
+    zIndex: 1,
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 100,
+    height: 100,
+    left: '50%',
+    marginLeft: -50,
+    top: 0
+  },
+  nameWrapper: {
+    marginTop: 12,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  welcomeText: {
+    fontSize: 28,
+    fontWeight: '600',
+    marginBottom: 8,
+    fontFamily: fontFamilies.phuduBold,
+    maxWidth: '90%'
+  },
+  welcomeSubtext: {
+    fontSize: 16,
+    fontWeight: '400',
+    opacity: 0.6
   },
   userIcon: {
     marginRight: 12
   },
   manageButton: {
-    backgroundColor: '#007AFF',
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 16
+    // backgroundColor should be applied inline using colors.iconSecurity
   },
   manageButtonText: {
     color: '#fff',