@umituz/react-native-settings 1.4.1 → 1.6.0

package/src/presentation/screens/SettingsScreen.tsx

@@ -1,369 +1,266 @@
 /**
  * Settings Screen
- *
- * Modern settings with Paper List.Section pattern:
- * - React Native Paper List.Section + List.Subheader
- * - Organized sections (Appearance, General, About & Legal)
- * - Paper Divider for visual separation
- * - Material Design 3 compliance
- * - OFFLINE MODE: No account, premium, feedback, or donation
- * - Optimized spacing for better visual density
- * - Configurable features via SettingsConfig prop
+ * Modern settings screen with user profile header and organized sections
  */
 
-import React, { useMemo } from 'react';
-import { DeviceEventEmitter, Alert, View, TouchableOpacity, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React, { useMemo, useState } from "react";
+import {
+  View,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Alert,
+  DeviceEventEmitter,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useNavigation, CommonActions } from "@react-navigation/native";
+import {
+  useDesignSystemTheme,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system-theme";
+import { Palette, Bell, Info, FileText } from "lucide-react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import { SettingItem } from "../components/SettingItem";
+import { SettingsSection } from "../components/SettingsSection";
+import { SettingsFooter } from "../components/SettingsFooter";
+import { UserProfileHeader } from "../components/UserProfileHeader";
+import { SettingsConfig } from "./types";
 
-import { useNavigation, CommonActions } from '@react-navigation/native';
-import { useDesignSystemTheme, useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import { ScreenLayout, AtomicIcon, AtomicText, SectionHeader, SectionContainer, AtomicDivider } from '@umituz/react-native-design-system';
-import { SettingItem } from '../components/SettingItem';
-import { getLanguageByCode, useLocalization } from '@umituz/react-native-localization';
-import { SettingsConfig } from './types';
-
-// Optional notification service - only import if package is available
+// Optional notification service
 let notificationService: any = null;
 try {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  notificationService = require('@umituz/react-native-notifications').notificationService;
+  notificationService = require("@umituz/react-native-notifications")
+    .notificationService;
 } catch {
-  // Package not available, notificationService will be null
+  // Package not available
 }
 
-// Optional onboarding store - only import if package is available
+// Optional onboarding store
 let useOnboardingStore: any = null;
 try {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const onboardingPackage = require('@umituz/react-native-onboarding');
+  const onboardingPackage = require("@umituz/react-native-onboarding");
   useOnboardingStore = onboardingPackage.useOnboardingStore;
 } catch {
-  // Package not available, useOnboardingStore will be null
+  // Package not available
 }
 
 /**
- * Check if a navigation screen exists in the navigation state
+ * Check if navigation screen exists
  */
-const hasNavigationScreen = (navigation: any, screenName: string): boolean => {
+const hasNavigationScreen = (
+  navigation: any,
+  screenName: string,
+): boolean => {
   try {
     const state = navigation.getState();
     if (!state) return false;
 
-    // Recursively check all routes in navigation state
     const checkRoutes = (routes: any[]): boolean => {
       if (!routes || !Array.isArray(routes)) return false;
-      
+
       for (const route of routes) {
-        if (route.name === screenName) {
+        if (route.name === screenName) return true;
+        if (route.state?.routes && checkRoutes(route.state.routes)) {
           return true;
         }
-        // Check nested navigators
-        if (route.state?.routes) {
-          if (checkRoutes(route.state.routes)) {
-            return true;
-          }
-        }
       }
       return false;
     };
 
     return checkRoutes(state.routes || []);
   } catch {
-    // If we can't check navigation state, assume it's not available
     return false;
   }
 };
 
 export interface SettingsScreenProps {
-  /**
-   * Configuration for which settings features to show
-   * @default { appearance: 'auto', notifications: 'auto', about: 'auto', legal: 'auto' }
-   */
   config?: SettingsConfig;
+  /** Show user profile header */
+  showUserProfile?: boolean;
+  /** User profile props */
+  userProfile?: {
+    displayName?: string;
+    userId?: string;
+    isGuest?: boolean;
+    avatarUrl?: string;
+    accountSettingsRoute?: string;
+    onPress?: () => void;
+  };
+  /** Show footer with version */
+  showFooter?: boolean;
+  /** Custom footer text */
+  footerText?: string;
 }
 
-export const SettingsScreen: React.FC<SettingsScreenProps> = ({ 
-  config = {} 
+export const SettingsScreen: React.FC<SettingsScreenProps> = ({
+  config = {},
+  showUserProfile = false,
+  userProfile,
+  showFooter = true,
+  footerText,
 }) => {
   const navigation = useNavigation();
-  // Only read themeMode, no theme logic here - theme logic belongs in theme package
   const { themeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
-  const { currentLanguage, t } = useLocalization();
+  const { t } = useLocalization();
+  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
 
-  const currentLang = getLanguageByCode(currentLanguage);
-  const languageDisplay = currentLang ? `${currentLang.flag} ${currentLang.nativeName}` : 'English';
-  const themeDisplay = themeMode === 'dark' ? t('settings.darkMode') : t('settings.lightMode');
+  const isDark = themeMode === "dark";
+  const colors = tokens.colors;
 
-  // Determine which features should be shown
   const features = useMemo(() => {
-    const appearanceConfig = config.appearance ?? 'auto';
-    const notificationsConfig = config.notifications ?? 'auto';
-    const aboutConfig = config.about ?? 'auto';
-    const legalConfig = config.legal ?? 'auto';
+    const appearanceConfig = config?.appearance ?? "auto";
+    const notificationsConfig = config?.notifications ?? "auto";
+    const aboutConfig = config?.about ?? "auto";
+    const legalConfig = config?.legal ?? "auto";
 
     return {
-      appearance: appearanceConfig === true || 
-        (appearanceConfig === 'auto' && hasNavigationScreen(navigation, 'Appearance')),
-      notifications: notificationsConfig === true || 
-        (notificationsConfig === 'auto' && 
-         notificationService !== null && 
-         hasNavigationScreen(navigation, 'Notifications')),
-      about: aboutConfig === true || 
-        (aboutConfig === 'auto' && hasNavigationScreen(navigation, 'About')),
-      legal: legalConfig === true || 
-        (legalConfig === 'auto' && hasNavigationScreen(navigation, 'Legal')),
+      appearance:
+        appearanceConfig === true ||
+        (appearanceConfig === "auto" &&
+          hasNavigationScreen(navigation, "Appearance")),
+      notifications:
+        notificationsConfig === true ||
+        (notificationsConfig === "auto" &&
+          notificationService !== null &&
+          hasNavigationScreen(navigation, "Notifications")),
+      about:
+        aboutConfig === true ||
+        (aboutConfig === "auto" && hasNavigationScreen(navigation, "About")),
+      legal:
+        legalConfig === true ||
+        (legalConfig === "auto" && hasNavigationScreen(navigation, "Legal")),
     };
   }, [config, navigation]);
 
-  const handleAppearancePress = () => {
-    navigation.navigate('Appearance' as never);
-  };
-
-  const handleAboutPress = () => {
-    navigation.navigate('About' as never);
-  };
-
-  const handleLegalPress = () => {
-    navigation.navigate('Legal' as never);
-  };
-
-  const handleNotificationsPress = async () => {
-    if (notificationService) {
+  const handleNotificationsToggle = async (value: boolean) => {
+    if (notificationService && !value) {
       const hasPermissions = await notificationService.hasPermissions();
       if (!hasPermissions) {
         await notificationService.requestPermissions();
       }
     }
-    navigation.navigate('Notifications' as never);
-  };
-
-  const handleClose = () => {
-    // Try to go back in current navigator first
-    if (navigation.canGoBack()) {
-      navigation.goBack();
-      return;
-    }
-    
-    // If we can't go back in current navigator, try to find parent navigator
-    // This handles the case where Settings is the root screen of a stack
-    let parent = navigation.getParent();
-    let depth = 0;
-    const maxDepth = 5; // Safety limit to prevent infinite loops
-    
-    // Traverse up the navigation tree to find a navigator that can go back
-    while (parent && depth < maxDepth) {
-      if (parent.canGoBack()) {
-        parent.goBack();
-        return;
-      }
-      parent = parent.getParent();
-      depth++;
-    }
-    
-    // If no parent can go back, try using CommonActions to go back
-    // This is a fallback for edge cases
-    try {
-      navigation.dispatch(CommonActions.goBack());
-    } catch (error) {
-      // If all else fails, silently fail (close button just won't work)
-      /* eslint-disable-next-line no-console */
-      if (__DEV__) {
-        console.warn('[SettingsScreen] Could not navigate back:', error);
-      }
-    }
+    setNotificationsEnabled(value);
   };
 
-  const handleShowOnboarding = async () => {
-    if (!useOnboardingStore) {
-      Alert.alert('Error', 'Onboarding package is not available');
-      return;
-    }
-
-    try {
-      const onboardingStore = useOnboardingStore.getState();
-      // Reset onboarding state
-      await onboardingStore.reset();
-      // Emit event to trigger navigation to onboarding
-      DeviceEventEmitter.emit('reset-onboarding');
-      // Close settings first - try parent navigator if current can't go back
-      if (navigation.canGoBack()) {
-        navigation.goBack();
-      } else {
-        // Try to find parent navigator that can go back
-        let parent = navigation.getParent();
-        let depth = 0;
-        const maxDepth = 5;
-        
-        while (parent && depth < maxDepth) {
-          if (parent.canGoBack()) {
-            parent.goBack();
-            break;
-          }
-          parent = parent.getParent();
-          depth++;
-        }
-        
-        // Fallback to CommonActions
-        if (!parent || depth >= maxDepth) {
-          try {
-            navigation.dispatch(CommonActions.goBack());
-          } catch (error) {
-            /* eslint-disable-next-line no-console */
-            if (__DEV__) {
-              console.warn('[SettingsScreen] Could not navigate back:', error);
-            }
-          }
-        }
+  const handleNotificationsPress = async () => {
+    if (notificationService) {
+      const hasPermissions = await notificationService.hasPermissions();
+      if (!hasPermissions) {
+        await notificationService.requestPermissions();
       }
-      // Small delay to ensure navigation completes
-      setTimeout(() => {
-        DeviceEventEmitter.emit('show-onboarding');
-      }, 100);
-    } catch (error) {
-      Alert.alert(
-        'Error',
-        'Failed to show onboarding. Please try again.',
-        [{ text: 'OK' }],
-      );
     }
+    navigation.navigate("Notifications" as never);
   };
 
-  // Debug: Log features to help diagnose empty screen issues
-  /* eslint-disable-next-line no-console */
-  if (__DEV__) {
-    console.log('[SettingsScreen] Features:', features);
-    console.log('[SettingsScreen] Config:', config);
-    console.log('[SettingsScreen] Navigation state:', navigation.getState());
-  }
-
-  // Check if any features are enabled
-  const hasAnyFeatures = features.appearance || features.notifications || features.about || features.legal;
+  const hasAnyFeatures =
+    features.appearance ||
+    features.notifications ||
+    features.about ||
+    features.legal;
 
   return (
-    <ScreenLayout testID="settings-screen" hideScrollIndicator>
-      {/* Header with Close Button */}
-      <View style={[
-        styles.header, 
-        { 
-          borderBottomColor: tokens.colors.borderLight,
-          backgroundColor: tokens.colors.surface,
-          paddingTop: insets.top,
-        }
-      ]}>
-        <AtomicText type="headlineLarge" style={{ color: tokens.colors.textPrimary, flex: 1 }}>
-          {t('navigation.settings') || 'Settings'}
-        </AtomicText>
-        <TouchableOpacity
-          onPress={handleClose}
-          style={styles.closeButton}
-          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-          testID="close-settings-button"
-        >
-          <AtomicIcon name="X" size="lg" color="primary" />
-        </TouchableOpacity>
-      </View>
+    <View style={[styles.container, { backgroundColor: colors.backgroundPrimary }]}>
+      <StatusBar barStyle={isDark ? "light-content" : "dark-content"} />
 
-      {/* Appearance Section */}
-      {features.appearance && (
-        <SectionContainer>
-          <SectionHeader>{t('settings.sections.appearance')}</SectionHeader>
-          <SettingItem
-            icon="Palette"
-            iconGradient={((tokens.colors as any).settingGradients?.themeLight as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-            title={t('settings.appearance.title')}
-            description={t('settings.appearance.themeDescription')}
-            onPress={handleAppearancePress}
-            testID="appearance-button"
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={[
+          styles.scrollContent,
+          {
+            paddingTop: insets.top + 16,
+            paddingBottom: 100,
+          },
+        ]}
+        showsVerticalScrollIndicator={false}
+      >
+        {showUserProfile && (
+          <UserProfileHeader
+            displayName={userProfile?.displayName}
+            userId={userProfile?.userId}
+            isGuest={userProfile?.isGuest}
+            avatarUrl={userProfile?.avatarUrl}
+            accountSettingsRoute={userProfile?.accountSettingsRoute}
+            onPress={userProfile?.onPress}
           />
-        </SectionContainer>
-      )}
+        )}
 
-      {/* General Section - Notifications */}
-      {features.notifications && (
-        <SectionContainer>
-          <SectionHeader>{t('settings.sections.general')}</SectionHeader>
-          <SettingItem
-            icon="Bell"
-            iconGradient={((tokens.colors as any).settingGradients?.notifications as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-            title={t('settings.notifications.title')}
-            description={t('settings.notifications.description')}
-            onPress={handleNotificationsPress}
-            testID="notifications-button"
-          />
-        </SectionContainer>
-      )}
-
-      {/* Development/Test: Show Onboarding */}
-      {__DEV__ && useOnboardingStore && (
-        <SectionContainer>
-          <SectionHeader>Development</SectionHeader>
-          <SettingItem
-            icon="Play"
-            iconGradient={((tokens.colors as any).settingGradients?.info as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-            title="Show Onboarding (Dev)"
-            description="Navigate to onboarding screen"
-            onPress={handleShowOnboarding}
-            testID="show-onboarding-button"
-          />
-        </SectionContainer>
-      )}
-
-      {/* About & Legal Section */}
-      {(features.about || features.legal) && (
-        <SectionContainer>
-          <SectionHeader>{t('settings.sections.about')}</SectionHeader>
-          {features.about && (
+        {features.appearance && (
+          <SettingsSection title={t("settings.sections.app.title")}>
             <SettingItem
-              icon="Info"
-              iconGradient={((tokens.colors as any).settingGradients?.info as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-              title={t('settings.about.title')}
-              description={t('settings.about.description')}
-              onPress={handleAboutPress}
-              testID="about-button"
+              icon={Palette}
+              title={t("settings.appearance.title")}
+              value={t("settings.appearance.description")}
+              onPress={() => navigation.navigate("Appearance" as never)}
             />
-          )}
-          {features.about && features.legal && <AtomicDivider />}
-          {features.legal && (
+          </SettingsSection>
+        )}
+
+        {features.notifications && (
+          <SettingsSection title={t("settings.sections.general")}>
             <SettingItem
-              icon="FileText"
-              iconGradient={((tokens.colors as any).settingGradients?.info as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-              title={t('settings.legal.title')}
-              description={t('settings.legal.description')}
-              onPress={handleLegalPress}
-              testID="legal-button"
+              icon={Bell}
+              title={t("settings.notifications.title")}
+              showSwitch={true}
+              switchValue={notificationsEnabled}
+              onSwitchChange={handleNotificationsToggle}
+              isLast={true}
             />
-          )}
-        </SectionContainer>
-      )}
+          </SettingsSection>
+        )}
 
-      {/* Fallback: Show message if no features are enabled */}
-      {!hasAnyFeatures && (
-        <SectionContainer>
-          <SectionHeader>
-            {t('settings.noOptionsAvailable') || 'No settings available'}
-          </SectionHeader>
-        </SectionContainer>
-      )}
-    </ScreenLayout>
+        {(features.about || features.legal) && (
+          <SettingsSection title={t("settings.sections.about")}>
+            {features.about && (
+              <SettingItem
+                icon={Info}
+                title={t("settings.about.title")}
+                value={t("settings.about.description")}
+                onPress={() => navigation.navigate("About" as never)}
+              />
+            )}
+            {features.legal && (
+              <SettingItem
+                icon={FileText}
+                title={t("settings.legal.title")}
+                value={t("settings.legal.description")}
+                onPress={() => navigation.navigate("Legal" as never)}
+                isLast={true}
+              />
+            )}
+          </SettingsSection>
+        )}
+
+        {!hasAnyFeatures && (
+          <View style={styles.emptyContainer}>
+            <SettingsSection
+              title={t("settings.noOptionsAvailable") || "No settings available"}
+            >
+              <View />
+            </SettingsSection>
+          </View>
+        )}
+
+        {showFooter && <SettingsFooter versionText={footerText} />}
+      </ScrollView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingBottom: 12,
-    paddingTop: 12,
-    borderBottomWidth: 1,
-    zIndex: 1000,
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
   },
-  closeButton: {
-    padding: 8,
-    marginLeft: 8,
+  scrollContent: {
+    flexGrow: 1,
+  },
+  emptyContainer: {
+    paddingVertical: 24,
   },
 });
-