@umituz/react-native-settings 4.20.53 → 4.20.54

package/src/domains/legal/presentation/screens/PrivacyPolicyScreen.tsx

@@ -2,46 +2,17 @@
  * Privacy Policy Screen Component
  * Display Privacy Policy content
  */
-
 import React 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";
-import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
-import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
-import { ContentValidationService } from "../../domain/services/ContentValidationService";
-import { StyleCacheService } from "../../domain/services/StyleCacheService";
+import { StyleSheet } from "react-native";
+import { LegalContentScreen } from "./LegalContentScreen";
 
 export interface PrivacyPolicyScreenProps {
-  /**
-   * Privacy Policy content (HTML or plain text)
-   * Either content or url must be provided
-   */
   content?: string;
-  /**
-   * Privacy Policy URL (if content is not provided, will open URL)
-   * Either content or url must be provided
-   */
   url?: string;
-  /**
-   * Custom title
-   */
   title: string;
-  /**
-   * Text for viewing online button (required when url is provided)
-   */
   viewOnlineText?: string;
-  /**
-   * Text for open button (required when url is provided)
-   */
   openText?: string;
-  /**
-   * Callback when URL is pressed (if content is not provided)
-   */
   onUrlPress?: () => void;
-  /**
-   * Test ID for E2E testing
-   */
   testID?: string;
 }
 
@@ -54,119 +25,7 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   onUrlPress,
   testID = "privacy-policy-screen",
 }) => {
-  const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
-  
-  // Validate required props
-  React.useEffect(() => {
-    ContentValidationService.validateScreenContent(
-      content,
-      url,
-      title,
-      viewOnlineText,
-      openText,
-      'PrivacyPolicyScreen'
-    );
-  }, [content, url, title, viewOnlineText, openText]);
-  
-  // Use cached styles
-  const styles = React.useMemo(() => {
-    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
-    return StyleCacheService.getCachedStyles(
-      'PrivacyPolicyScreen',
-      cacheKey,
-      () => createPrivacyPolicyStyles(tokens)
-    );
-  }, [tokens]);
-
-  // Memoize URL press handler to prevent child re-renders
-  const handleUrlPress = React.useCallback(async () => {
-    if (onUrlPress) {
-      onUrlPress();
-    } else if (url) {
-      try {
-        await UrlHandlerService.openUrl(url);
-      } catch {
-        // Silent error handling
-      }
-    }
-  }, [onUrlPress, url]);
-
-  // Memoize container style to prevent object creation
-  const containerStyle = React.useMemo(() => [
-    styles.container,
-    {
-      backgroundColor: tokens.colors.backgroundPrimary,
-      paddingTop: insets.top,
-    },
-  ], [styles.container, tokens.colors.backgroundPrimary, insets.top]);
-
-  // Memoize conditional rendering
-  const showContent = React.useMemo(() => !!(content), [content]);
-  const showUrlSection = React.useMemo(() => 
-    ContentValidationService.shouldShowUrlSection(url, onUrlPress), 
-    [url, onUrlPress]
-  );
-
-  // Memoize content section
-  const contentSection = React.useMemo(() => {
-    if (showContent) {
-      return (
-        <AtomicText type="bodyMedium" color="onSurface" style={styles.text}>
-          {content}
-        </AtomicText>
-      );
-    }
-
-    if (showUrlSection) {
-      return (
-        <View style={styles.urlContainer}>
-          <AtomicText
-            type="bodyMedium"
-            color="secondary"
-            style={styles.urlText}
-          >
-            {viewOnlineText}
-          </AtomicText>
-          <AtomicButton
-            variant="primary"
-            onPress={handleUrlPress}
-            fullWidth
-            style={styles.urlButton}
-          >
-            {openText}
-          </AtomicButton>
-        </View>
-      );
-    }
-
-    return null;
-  }, [showContent, showUrlSection, styles.text, styles.urlContainer, styles.urlText, styles.urlButton, content, viewOnlineText, openText, handleUrlPress]);
-
-  return (
-    <View style={containerStyle} testID={testID}>
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        <View style={styles.content}>
-          <AtomicText
-            type="headlineLarge"
-            color="primary"
-            style={styles.title}
-          >
-            {title}
-          </AtomicText>
-
-          {contentSection}
-        </View>
-      </ScrollView>
-    </View>
-  );
-});
-
-const createPrivacyPolicyStyles = (tokens: any) => {
-  return StyleSheet.create({
+  const createStyles = (tokens: any) => StyleSheet.create({
     container: {
       flex: 1,
     },
@@ -197,15 +56,18 @@ const createPrivacyPolicyStyles = (tokens: any) => {
       marginTop: 8,
     },
   });
-};
-
-
-
-
-
-
-
-
-
-
 
+  return (
+    <LegalContentScreen
+      content={content}
+      url={url}
+      title={title}
+      viewOnlineText={viewOnlineText}
+      openText={openText}
+      onUrlPress={onUrlPress}
+      testID={testID}
+      styleCacheKey="PrivacyPolicyScreen"
+      createStyles={createStyles}
+    />
+  );
+});

package/src/domains/legal/presentation/screens/TermsOfServiceScreen.tsx

@@ -2,46 +2,17 @@
  * Terms of Service Screen Component
  * Display Terms of Service content
  */
-
 import React 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";
-import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
-import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
-import { ContentValidationService } from "../../domain/services/ContentValidationService";
-import { StyleCacheService } from "../../domain/services/StyleCacheService";
+import { StyleSheet } from "react-native";
+import { LegalContentScreen } from "./LegalContentScreen";
 
 export interface TermsOfServiceScreenProps {
-  /**
-   * Terms of Service content (HTML or plain text)
-   * Either content or url must be provided
-   */
   content?: string;
-  /**
-   * Terms of Service URL (if content is not provided, will open URL)
-   * Either content or url must be provided
-   */
   url?: string;
-  /**
-   * Custom title
-   */
   title: string;
-  /**
-   * Text for viewing online button (required when url is provided)
-   */
   viewOnlineText?: string;
-  /**
-   * Text for open button (required when url is provided)
-   */
   openText?: string;
-  /**
-   * Callback when URL is pressed (if content is not provided)
-   */
   onUrlPress?: () => void;
-  /**
-   * Test ID for E2E testing
-   */
   testID?: string;
 }
 
@@ -54,119 +25,7 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   onUrlPress,
   testID = "terms-of-service-screen",
 }) => {
-  const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
-  
-  // Validate required props
-  React.useEffect(() => {
-    ContentValidationService.validateScreenContent(
-      content,
-      url,
-      title,
-      viewOnlineText,
-      openText,
-      'TermsOfServiceScreen'
-    );
-  }, [content, url, title, viewOnlineText, openText]);
-  
-  // Use cached styles
-  const styles = React.useMemo(() => {
-    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
-    return StyleCacheService.getCachedStyles(
-      'TermsOfServiceScreen',
-      cacheKey,
-      () => createTermsOfServiceStyles(tokens)
-    );
-  }, [tokens]);
-
-  // Memoize URL press handler to prevent child re-renders
-  const handleUrlPress = React.useCallback(async () => {
-    if (onUrlPress) {
-      onUrlPress();
-    } else if (url) {
-      try {
-        await UrlHandlerService.openUrl(url);
-      } catch {
-        // Silent error handling
-      }
-    }
-  }, [onUrlPress, url]);
-
-  // Memoize container style to prevent object creation
-  const containerStyle = React.useMemo(() => [
-    styles.container,
-    {
-      backgroundColor: tokens.colors.backgroundPrimary,
-      paddingTop: insets.top,
-    },
-  ], [styles.container, tokens.colors.backgroundPrimary, insets.top]);
-
-  // Memoize conditional rendering
-  const showContent = React.useMemo(() => !!(content), [content]);
-  const showUrlSection = React.useMemo(() => 
-    ContentValidationService.shouldShowUrlSection(url, onUrlPress), 
-    [url, onUrlPress]
-  );
-
-  // Memoize content section
-  const contentSection = React.useMemo(() => {
-    if (showContent) {
-      return (
-        <AtomicText type="bodyMedium" color="onSurface" style={styles.text}>
-          {content}
-        </AtomicText>
-      );
-    }
-
-    if (showUrlSection) {
-      return (
-        <View style={styles.urlContainer}>
-          <AtomicText
-            type="bodyMedium"
-            color="secondary"
-            style={styles.urlText}
-          >
-            {viewOnlineText}
-          </AtomicText>
-          <AtomicButton
-            variant="primary"
-            onPress={handleUrlPress}
-            fullWidth
-            style={styles.urlButton}
-          >
-            {openText}
-          </AtomicButton>
-        </View>
-      );
-    }
-
-    return null;
-  }, [showContent, showUrlSection, styles.text, styles.urlContainer, styles.urlText, styles.urlButton, content, viewOnlineText, openText, handleUrlPress]);
-
-  return (
-    <View style={containerStyle} testID={testID}>
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        <View style={styles.content}>
-          <AtomicText
-            type="headlineLarge"
-            color="primary"
-            style={styles.title}
-          >
-            {title}
-          </AtomicText>
-
-          {contentSection}
-        </View>
-      </ScrollView>
-    </View>
-  );
-});
-
-const createTermsOfServiceStyles = (tokens: any) => {
-  return StyleSheet.create({
+  const createStyles = (tokens: any) => StyleSheet.create({
     container: {
       flex: 1,
     },
@@ -197,15 +56,18 @@ const createTermsOfServiceStyles = (tokens: any) => {
       marginTop: 8,
     },
   });
-};
-
-
-
-
-
-
-
-
-
-
 
+  return (
+    <LegalContentScreen
+      content={content}
+      url={url}
+      title={title}
+      viewOnlineText={viewOnlineText}
+      openText={openText}
+      onUrlPress={onUrlPress}
+      testID={testID}
+      styleCacheKey="TermsOfServiceScreen"
+      createStyles={createStyles}
+    />
+  );
+});

package/src/presentation/components/SettingsItemCard.tsx

@@ -92,7 +92,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
 
     const renderContent = () => (
         <View style={styles.content}>
-            <View style={[styles.iconContainer, { backgroundColor: defaultIconBg, borderRadius: tokens.radius.md }]}>
+            <View style={[styles.iconContainer, { backgroundColor: defaultIconBg, borderRadius: tokens.borderRadius.md }]}>
                 <AtomicIcon name={icon} size="lg" customColor={defaultIconColor} />
             </View>
             <View style={styles.textContainer}>
@@ -120,7 +120,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
                 styles.sectionContainer,
                 { 
                     backgroundColor: colors.surface,
-                    borderRadius: tokens.radius.lg,
+                    borderRadius: tokens.borderRadius.lg,
                 },
                 containerStyle,
             ]}

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -5,17 +5,31 @@
  * Receives appInfo and legalUrls from app.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization, LanguageSelectionScreen } from "@umituz/react-native-localization";
 import { NotificationSettingsScreen } from "@umituz/react-native-notifications";
-import { SettingsScreen } from "../screens/SettingsScreen";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
-import { LegalScreen } from "../../domains/legal";
-import { AboutScreen } from "../../domains/about";
 import { FAQScreen } from "../../domains/faqs";
 import { useNavigationHandlers } from "./hooks";
+import {
+  SettingsScreenWrapper,
+  LegalScreenWrapper,
+  AboutScreenWrapper,
+} from "./components/wrappers";
+import {
+  createNotificationTranslations,
+  createQuietHoursTranslations,
+  createLegalScreenProps,
+  createScreenOptions,
+  createAppearanceScreenOptions,
+  createAboutScreenOptions,
+  createLegalScreenOptions,
+  createNotificationsScreenOptions,
+  createFAQScreenOptions,
+  createLanguageSelectionScreenOptions,
+} from "./utils";
 import type { SettingsStackParamList, SettingsStackNavigatorProps } from "./types";
 
 const Stack = createStackNavigator<SettingsStackParamList>();
@@ -36,138 +50,55 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
   const { handlePrivacyPress, handleTermsPress, handleEulaPress, aboutConfig } =
     useNavigationHandlers(appInfo, legalUrls);
 
-  const screenOptions = useMemo(
-    () => ({
-      headerStyle: {
-        backgroundColor: tokens.colors.surface,
-        borderBottomColor: tokens.colors.borderLight,
-        borderBottomWidth: 1,
-      },
-      headerTitleStyle: {
-        fontSize: 18,
-        fontWeight: "600" as const,
-        color: tokens.colors.textPrimary,
-      },
-      headerTintColor: tokens.colors.textPrimary,
-    }),
-    [tokens]
-  );
-
-  const SettingsScreenWrapper = useMemo(() => {
-    const Wrapper = () => (
-      <SettingsScreen
-        config={config}
-        appVersion={appInfo.version}
-        showUserProfile={showUserProfile}
-        userProfile={userProfile}
-        devSettings={devSettings}
-        customSections={customSections}
-      />
-    );
-    Wrapper.displayName = "SettingsScreenWrapper";
-    return Wrapper;
-  }, [config, appInfo.version, showUserProfile, userProfile, devSettings, customSections]);
-
-  const notificationTranslations = useMemo(
-    () => ({
-      screenTitle: t("settings.notifications.title"),
-      masterToggleTitle: t("settings.notifications.masterToggleTitle"),
-      masterToggleDescription: t("settings.notifications.masterToggleDescription"),
-      soundTitle: t("settings.notifications.soundTitle"),
-      soundDescription: t("settings.notifications.soundDescription"),
-      vibrationTitle: t("settings.notifications.vibrationTitle"),
-      vibrationDescription: t("settings.notifications.vibrationDescription"),
-      remindersTitle: t("settings.notifications.remindersTitle"),
-      remindersDescription: t("settings.notifications.remindersDescription"),
-      quietHoursTitle: t("settings.notifications.quietHoursTitle"),
-      quietHoursDescription: t("settings.notifications.quietHoursDescription"),
-    }),
-    [t]
+  const screenOptions = React.useMemo(() => createScreenOptions(tokens), [tokens]);
+  const notificationTranslations = React.useMemo(() => createNotificationTranslations(t), [t]);
+  const quietHoursTranslations = React.useMemo(() => createQuietHoursTranslations(t), [t]);
+  const legalScreenProps = React.useMemo(
+    () => createLegalScreenProps(t, handlePrivacyPress, handleTermsPress, handleEulaPress),
+    [t, handlePrivacyPress, handleTermsPress, handleEulaPress]
   );
 
-  const quietHoursTranslations = useMemo(
-    () => ({
-      title: t("settings.notifications.quietHours.title"),
-      description: t("settings.notifications.quietHours.description"),
-      startTimeLabel: t("settings.notifications.quietHours.startTimeLabel"),
-      endTimeLabel: t("settings.notifications.quietHours.endTimeLabel"),
-      enabledLabel: t("settings.notifications.quietHours.enabledLabel"),
-    }),
-    [t]
-  );
-
-  const LegalScreenWrapper = useMemo(() => {
-    const Wrapper = () => (
-      <LegalScreen
-        title={t("settings.legal.title")}
-        description={t("settings.legal.description")}
-        documentsHeader={t("settings.legal.documentsHeader")}
-        privacyTitle={t("settings.legal.privacyTitle")}
-        privacyDescription={t("settings.legal.privacyDescription")}
-        termsTitle={t("settings.legal.termsTitle")}
-        termsDescription={t("settings.legal.termsDescription")}
-        eulaTitle={t("settings.legal.eulaTitle")}
-        eulaDescription={t("settings.legal.eulaDescription")}
-        onPrivacyPress={handlePrivacyPress}
-        onTermsPress={handleTermsPress}
-        onEulaPress={handleEulaPress}
-      />
-    );
-    Wrapper.displayName = "LegalScreenWrapper";
-    return Wrapper;
-  }, [t, handlePrivacyPress, handleTermsPress, handleEulaPress]);
-
-  const AboutScreenWrapper = useMemo(() => {
-    const Wrapper = () => <AboutScreen config={aboutConfig} />;
-    Wrapper.displayName = "AboutScreenWrapper";
-    return Wrapper;
-  }, [aboutConfig]);
-
   return (
     <Stack.Navigator screenOptions={screenOptions}>
       <Stack.Screen
         name="SettingsMain"
-        component={SettingsScreenWrapper}
         options={{ headerShown: false }}
-      />
+      >
+        {() => (
+          <SettingsScreenWrapper
+            config={config}
+            appVersion={appInfo.version}
+            showUserProfile={showUserProfile}
+            userProfile={userProfile}
+            devSettings={devSettings}
+            customSections={customSections}
+          />
+        )}
+      </Stack.Screen>
 
       <Stack.Screen
         name="Appearance"
         component={AppearanceScreen}
-        options={{
-          headerShown: true,
-          headerTitle: t("settings.appearance.title"),
-          headerTitleAlign: "center",
-        }}
+        options={createAppearanceScreenOptions(t)}
       />
 
       <Stack.Screen
         name="About"
-        component={AboutScreenWrapper}
-        options={{
-          headerShown: true,
-          headerTitle: t("settings.about.title"),
-          headerTitleAlign: "center",
-        }}
-      />
+        options={createAboutScreenOptions(t)}
+      >
+        {() => <AboutScreenWrapper config={aboutConfig} />}
+      </Stack.Screen>
 
       <Stack.Screen
         name="Legal"
-        component={LegalScreenWrapper}
-        options={{
-          headerShown: true,
-          headerTitle: t("settings.legal.title"),
-          headerTitleAlign: "center",
-        }}
-      />
+        options={createLegalScreenOptions(t)}
+      >
+        {() => <LegalScreenWrapper {...legalScreenProps} />}
+      </Stack.Screen>
 
       <Stack.Screen
         name="Notifications"
-        options={{
-          headerShown: true,
-          headerTitle: t("settings.notifications.title"),
-          headerTitleAlign: "center",
-        }}
+        options={createNotificationsScreenOptions(t)}
       >
         {() => (
           <NotificationSettingsScreen
@@ -178,14 +109,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
       </Stack.Screen>
 
       {faqData && faqData.categories.length > 0 && (
-        <Stack.Screen
-          name="FAQ"
-          options={{
-            headerShown: true,
-            headerTitle: t("settings.faqs.title"),
-            headerTitleAlign: "center",
-          }}
-        >
+        <Stack.Screen name="FAQ" options={createFAQScreenOptions(t)}>
           {() => (
             <FAQScreen
               categories={faqData.categories}
@@ -216,13 +140,10 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
           />
         ) : null
       )}
+
       <Stack.Screen
         name="LanguageSelection"
-        options={{
-          headerShown: true,
-          headerTitle: t("settings.language.title"),
-          headerTitleAlign: "center",
-        }}
+        options={createLanguageSelectionScreenOptions(t)}
       >
         {() => (
           <LanguageSelectionScreen

package/src/presentation/navigation/components/wrappers/AboutScreenWrapper.tsx

@@ -0,0 +1,13 @@
+/**
+ * About Screen Wrapper Component
+ */
+import React from "react";
+import { AboutScreen } from "../../../../domains/about";
+
+export interface AboutScreenWrapperProps {
+  config: any;
+}
+
+export const AboutScreenWrapper: React.FC<AboutScreenWrapperProps> = ({
+  config,
+}) => <AboutScreen config={config} />;