@umituz/react-native-settings 1.11.4 → 2.4.0

package/src/presentation/screens/__tests__/SettingsScreen.test.tsx

@@ -0,0 +1,322 @@
+/**
+ * Tests for SettingsScreen Component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { SettingsScreen } from '../SettingsScreen';
+import { NavigationContainer } from '@react-navigation/native';
+
+// Mock dependencies
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useDesignSystemTheme: () => ({
+    themeMode: 'light',
+  }),
+  useAppDesignTokens: () => ({
+    colors: {
+      backgroundPrimary: '#ffffff',
+    },
+  }),
+}));
+
+jest.mock('../components/SettingsHeader', () => 'SettingsHeader');
+jest.mock('../components/SettingsContent', () => 'SettingsContent');
+jest.mock('../components/SettingsErrorBoundary', () => 'SettingsErrorBoundary');
+jest.mock('../utils/normalizeConfig', () => ({
+  normalizeSettingsConfig: jest.fn((config) => ({
+    appearance: { enabled: true, config: { enabled: true } },
+    language: { enabled: true, config: { enabled: true } },
+    notifications: { enabled: true, config: { enabled: true } },
+    about: { enabled: true, config: { enabled: true } },
+    legal: { enabled: true, config: { enabled: true } },
+    account: { enabled: true, config: { enabled: true } },
+    support: { enabled: true, config: { enabled: true } },
+    developer: { enabled: true, config: { enabled: true } },
+  })),
+}));
+
+jest.mock('../hooks/useFeatureDetection', () => ({
+  useFeatureDetection: jest.fn(() => ({
+    appearance: true,
+    language: true,
+    notifications: true,
+    about: true,
+    legal: true,
+    account: true,
+    support: true,
+    developer: false,
+  })),
+}));
+
+// Mock navigation
+const mockNavigation = {
+  navigate: jest.fn(),
+  goBack: jest.fn(),
+  getState: jest.fn(() => ({
+    routes: [{ name: 'Settings' }],
+  })),
+};
+
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => mockNavigation,
+}));
+
+// Wrapper component for navigation context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <NavigationContainer>
+    {children}
+  </NavigationContainer>
+);
+
+describe('SettingsScreen', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly with default props', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen />
+      </TestWrapper>
+    );
+
+    // Should render the main container
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('renders with custom config', () => {
+    const config = {
+      appearance: true,
+      notifications: false,
+      about: true,
+    };
+
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen config={config} />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('renders with user profile header', () => {
+    const userProfile = {
+      displayName: 'John Doe',
+      userId: 'user123',
+      isGuest: false,
+    };
+
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          showUserProfile={true}
+          userProfile={userProfile}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('renders with custom footer text', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          footerText="Custom Footer Text"
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('renders with custom sections', () => {
+    const customSections = [
+      {
+        title: 'Custom Section',
+        data: [
+          {
+            id: 'custom-item',
+            title: 'Custom Item',
+            icon: 'Settings',
+          },
+        ],
+      },
+    ];
+
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          customSections={customSections}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('renders with close button', () => {
+    const mockOnClose = jest.fn();
+
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          showCloseButton={true}
+          onClose={mockOnClose}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('applies correct theme styling', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen />
+      </TestWrapper>
+    );
+
+    const container = getByTestId('settings-screen');
+    expect(container.props.style).toContainEqual({
+      backgroundColor: '#ffffff',
+    });
+  });
+
+  it('handles feature detection options', () => {
+    const featureOptions = {
+      notificationServiceAvailable: false,
+    };
+
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          featureOptions={featureOptions}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('wraps content in error boundary', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('renders without footer when showFooter is false', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          showFooter={false}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('handles guest user profile', () => {
+    const guestProfile = {
+      displayName: 'Guest User',
+      userId: 'guest123',
+      isGuest: true,
+      guestDisplayName: 'Guest',
+    };
+
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          showUserProfile={true}
+          userProfile={guestProfile}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('handles user profile with avatar', () => {
+    const profileWithAvatar = {
+      displayName: 'John Doe',
+      userId: 'user123',
+      isGuest: false,
+      avatarUrl: 'https://example.com/avatar.jpg',
+    };
+
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          showUserProfile={true}
+          userProfile={profileWithAvatar}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('handles empty config', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen config={{}} />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('handles missing user profile props', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          showUserProfile={true}
+          userProfile={{}}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('handles null custom sections', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          customSections={null as any}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('handles undefined feature options', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen
+          featureOptions={undefined as any}
+        />
+      </TestWrapper>
+    );
+
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+
+  it('maintains correct component structure', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <SettingsScreen />
+      </TestWrapper>
+    );
+
+    // Should have main container
+    expect(getByTestId('settings-screen')).toBeTruthy();
+  });
+});

package/src/presentation/screens/components/AboutLegalSection.tsx

@@ -7,6 +7,7 @@ import React from "react";
 import { Info, FileText } from "lucide-react-native";
 import { useNavigation } from "@react-navigation/native";
 import { useLocalization } from "@umituz/react-native-localization";
+import type { NavigationProp } from "@react-navigation/native";
 import { SettingItem } from "../../components/SettingItem";
 import { SettingsSection } from "../../components/SettingsSection";
 import type { AboutConfig, LegalConfig } from "../types";
@@ -18,25 +19,33 @@ interface AboutLegalSectionProps {
   legalConfig?: LegalConfig;
 }
 
+type RootStackParamList = {
+  About: undefined;
+  Legal: undefined;
+  [key: string]: undefined;
+};
+
+type NavigationType = NavigationProp<RootStackParamList>;
+
 export const AboutLegalSection: React.FC<AboutLegalSectionProps> = ({
   showAbout,
   showLegal,
   aboutConfig,
   legalConfig,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<NavigationType>();
   const { t } = useLocalization();
 
   if (!showAbout && !showLegal) {
     return null;
   }
 
-  const aboutRoute = aboutConfig?.route || "About";
+  const aboutRoute = aboutConfig?.route || aboutConfig?.defaultRoute || "About";
   const aboutTitle = aboutConfig?.title || t("settings.about.title");
   const aboutDescription =
     aboutConfig?.description || t("settings.about.description");
 
-  const legalRoute = legalConfig?.route || "Legal";
+  const legalRoute = legalConfig?.route || legalConfig?.defaultRoute || "Legal";
   const legalTitle = legalConfig?.title || t("settings.legal.title");
   const legalDescription =
     legalConfig?.description || t("settings.legal.description");
@@ -48,7 +57,7 @@ export const AboutLegalSection: React.FC<AboutLegalSectionProps> = ({
           icon={Info}
           title={aboutTitle}
           value={aboutDescription}
-          onPress={() => navigation.navigate(aboutRoute as never)}
+          onPress={() => navigation.navigate(aboutRoute as string)}
         />
       )}
       {showLegal && (
@@ -56,7 +65,7 @@ export const AboutLegalSection: React.FC<AboutLegalSectionProps> = ({
           icon={FileText}
           title={legalTitle}
           value={legalDescription}
-          onPress={() => navigation.navigate(legalRoute as never)}
+          onPress={() => navigation.navigate(legalRoute as string)}
           isLast={true}
         />
       )}

package/src/presentation/screens/components/AppearanceSection.tsx

@@ -21,7 +21,7 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
   const navigation = useNavigation();
   const { t } = useLocalization();
 
-  const route = config?.route || "Appearance";
+  const route = config?.route || config?.defaultRoute || "Appearance";
   const title = config?.title || t("settings.appearance.title");
   const description = config?.description || t("settings.appearance.description");
 

package/src/presentation/screens/components/LanguageSection.tsx

@@ -26,9 +26,10 @@ export const LanguageSection: React.FC<LanguageSectionProps> = ({
   const description = config?.description || "";
 
   const currentLang = getLanguageByCode(currentLanguage);
+  const defaultLanguageDisplay = config?.defaultLanguageDisplay || "English";
   const languageDisplay = currentLang
     ? `${currentLang.flag} ${currentLang.nativeName}`
-    : "English";
+    : defaultLanguageDisplay;
 
   return (
     <SettingsSection title={t("settings.sections.app.title")}>

package/src/presentation/screens/components/NotificationsSection.tsx

@@ -3,7 +3,7 @@
  * Single Responsibility: Render notifications settings section
  */
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { Bell } from "lucide-react-native";
 import { useNavigation } from "@react-navigation/native";
 import { useLocalization } from "@umituz/react-native-localization";
@@ -12,11 +12,16 @@ import { SettingsSection } from "../../components/SettingsSection";
 import type { NotificationsConfig } from "../types";
 
 // Optional notification service
-let notificationService: any = null;
+let notificationService: {
+  hasPermissions?: () => Promise<boolean>;
+  requestPermissions?: () => Promise<void>;
+} | null = null;
 try {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  notificationService = require("@umituz/react-native-notifications")
-    .notificationService;
+  const module = require("@umituz/react-native-notifications");
+  if (module?.notificationService && typeof module.notificationService === 'object') {
+    notificationService = module.notificationService;
+  }
 } catch {
   // Package not available
 }
@@ -28,7 +33,7 @@ interface NotificationsSectionProps {
 export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
   config,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<any>();
   const { t } = useLocalization();
   const [notificationsEnabled, setNotificationsEnabled] = useState(
     config?.initialValue ?? true,
@@ -40,27 +45,27 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
     }
   }, [config?.initialValue]);
 
-  const handleToggle = async (value: boolean) => {
+  const handleToggle = useCallback(async (value: boolean) => {
     if (notificationService && !value) {
-      const hasPermissions = await notificationService.hasPermissions();
+      const hasPermissions = await notificationService.hasPermissions?.();
       if (!hasPermissions) {
-        await notificationService.requestPermissions();
+        await notificationService.requestPermissions?.();
       }
     }
 
     setNotificationsEnabled(value);
     config?.onToggleChange?.(value);
-  };
+  }, [config?.onToggleChange]);
 
-  const handlePress = async () => {
+  const handlePress = useCallback(async () => {
     if (notificationService) {
-      const hasPermissions = await notificationService.hasPermissions();
+      const hasPermissions = await notificationService.hasPermissions?.();
       if (!hasPermissions) {
-        await notificationService.requestPermissions();
+        await notificationService.requestPermissions?.();
       }
     }
-    navigation.navigate((config?.route || "Notifications") as never);
-  };
+    navigation.navigate(config?.route || config?.defaultRoute || "Notifications" as any);
+  }, [navigation, config?.route, config?.defaultRoute]);
 
   const title = config?.title || t("settings.notifications.title");
   const description = config?.description || t("settings.notifications.description");

package/src/presentation/screens/components/SettingsContent.tsx

@@ -0,0 +1,167 @@
+/**
+ * Settings Content Component
+ * Renders all settings sections and custom content
+ */
+
+import React, { useMemo } from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+import { SettingsFooter } from "../../components/SettingsFooter";
+import { UserProfileHeader } from "../../components/UserProfileHeader";
+import { SettingsSection } from "../../components/SettingsSection";
+import { AppearanceSection } from "./AppearanceSection";
+import { LanguageSection } from "./LanguageSection";
+import { NotificationsSection } from "./NotificationsSection";
+import { AboutLegalSection } from "./AboutLegalSection";
+import type { NormalizedConfig } from "../utils/normalizeConfig";
+import type { CustomSettingsSection } from "../types";
+
+interface SettingsContentProps {
+  normalizedConfig: NormalizedConfig;
+  config?: any; // Original config for emptyStateText
+  features: {
+    appearance: boolean;
+    language: boolean;
+    notifications: boolean;
+    about: boolean;
+    legal: boolean;
+  };
+  showUserProfile?: boolean;
+  userProfile?: {
+    displayName?: string;
+    userId?: string;
+    isGuest?: boolean;
+    avatarUrl?: string;
+    accountSettingsRoute?: string;
+    onPress?: () => void;
+    guestDisplayName?: string;
+    avatarServiceUrl?: string;
+  };
+  showFooter?: boolean;
+  footerText?: string;
+  customSections?: CustomSettingsSection[];
+  showCloseButton?: boolean;
+}
+
+export const SettingsContent: React.FC<SettingsContentProps> = ({
+  normalizedConfig,
+  config,
+  features,
+  showUserProfile = false,
+  userProfile,
+  showFooter = true,
+  footerText,
+  customSections = [],
+  showCloseButton = false,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+  const { t } = useLocalization();
+
+  const hasAnyFeatures = useMemo(() => 
+    features.appearance ||
+    features.language ||
+    features.notifications ||
+    features.about ||
+    features.legal ||
+    customSections.length > 0,
+    [features, customSections.length]
+  );
+
+  const sortedSections = useMemo(() => {
+    return Array.from(customSections)
+      .sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+  }, [customSections]);
+
+  return (
+    <ScrollView
+      style={styles.scrollView}
+      contentContainerStyle={[
+        styles.scrollContent,
+        {
+          paddingTop: showCloseButton ? tokens.spacing.md : insets.top + tokens.spacing.md,
+          paddingBottom: tokens.spacing.xxxl + tokens.spacing.xl,
+          paddingHorizontal: 0,
+        },
+      ]}
+      showsVerticalScrollIndicator={false}
+    >
+      {showUserProfile && (
+        <View style={styles.profileContainer}>
+          <UserProfileHeader
+            displayName={userProfile?.displayName}
+            userId={userProfile?.userId}
+            isGuest={userProfile?.isGuest}
+            avatarUrl={userProfile?.avatarUrl}
+            accountSettingsRoute={userProfile?.accountSettingsRoute}
+            onPress={userProfile?.onPress}
+          />
+        </View>
+      )}
+
+      {features.appearance && (
+        <AppearanceSection config={normalizedConfig.appearance.config} />
+      )}
+
+      {features.language && (
+        <LanguageSection config={normalizedConfig.language.config} />
+      )}
+
+      {features.notifications && (
+        <NotificationsSection config={normalizedConfig.notifications.config} />
+      )}
+
+      {(features.about || features.legal) && (
+        <AboutLegalSection
+          showAbout={features.about}
+          showLegal={features.legal}
+          aboutConfig={normalizedConfig.about.config}
+          legalConfig={normalizedConfig.legal.config}
+        />
+      )}
+
+      {customSections && customSections.length > 0 && (
+        <>
+          {sortedSections.map((section, index) => (
+            <SettingsSection
+              key={section.id || `custom-${index}`}
+              title={section.title}
+            >
+              {section.content}
+            </SettingsSection>
+          ))}
+        </>
+      )}
+
+      {!hasAnyFeatures && (
+        <View style={styles.emptyContainer}>
+          <SettingsSection
+            title={config?.emptyStateText || t("settings.noOptionsAvailable") || "No settings available"}
+          >
+            <View />
+          </SettingsSection>
+        </View>
+      )}
+
+      {showFooter && <SettingsFooter versionText={footerText} />}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+  profileContainer: {
+    marginBottom: 32,
+    paddingHorizontal: 0,
+  },
+  emptyContainer: {
+    paddingVertical: 24,
+  },
+});