@umituz/react-native-settings 4.17.14 → 4.17.16

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

@@ -0,0 +1,214 @@
+/**
+ * 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 { useResponsiveDesignTokens } 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";
+
+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;
+}
+
+export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.memo(({
+  content,
+  url,
+  title,
+  viewOnlineText,
+  openText,
+  onUrlPress,
+  testID = "privacy-policy-screen",
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  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(() => {
+    return StyleCacheService.getCachedStyles(
+      'PrivacyPolicyScreen',
+      'privacy-policy-styles',
+      createPrivacyPolicyStyles
+    );
+  }, []);
+
+  // Memoize URL press handler to prevent child re-renders
+  const handleUrlPress = React.useCallback(async () => {
+    if (__DEV__) {
+      console.log('PrivacyPolicyScreen: URL pressed', { url });
+    }
+    
+    if (onUrlPress) {
+      onUrlPress();
+    } else if (url) {
+      try {
+        await UrlHandlerService.openUrl(url);
+      } catch (error) {
+        if (__DEV__) {
+          console.error('PrivacyPolicyScreen: Error opening URL', error);
+        }
+      }
+    }
+  }, [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 = () => {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      padding: 20,
+    },
+    content: {
+      flex: 1,
+    },
+    title: {
+      marginBottom: 24,
+    },
+    text: {
+      lineHeight: 24,
+    },
+    urlContainer: {
+      marginTop: 32,
+      alignItems: "center",
+    },
+    urlText: {
+      marginBottom: 16,
+      textAlign: "center",
+    },
+    urlButton: {
+      marginTop: 8,
+    },
+  });
+};
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,214 @@
+/**
+ * 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 { useResponsiveDesignTokens } 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";
+
+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;
+}
+
+export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.memo(({
+  content,
+  url,
+  title,
+  viewOnlineText,
+  openText,
+  onUrlPress,
+  testID = "terms-of-service-screen",
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  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(() => {
+    return StyleCacheService.getCachedStyles(
+      'TermsOfServiceScreen',
+      'terms-of-service-styles',
+      createTermsOfServiceStyles
+    );
+  }, []);
+
+  // Memoize URL press handler to prevent child re-renders
+  const handleUrlPress = React.useCallback(async () => {
+    if (__DEV__) {
+      console.log('TermsOfServiceScreen: URL pressed', { url });
+    }
+    
+    if (onUrlPress) {
+      onUrlPress();
+    } else if (url) {
+      try {
+        await UrlHandlerService.openUrl(url);
+      } catch (error) {
+        if (__DEV__) {
+          console.error('TermsOfServiceScreen: Error opening URL', error);
+        }
+      }
+    }
+  }, [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 = () => {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      padding: 20,
+    },
+    content: {
+      flex: 1,
+    },
+    title: {
+      marginBottom: 24,
+    },
+    text: {
+      lineHeight: 24,
+    },
+    urlContainer: {
+      marginTop: 32,
+      alignItems: "center",
+    },
+    urlText: {
+      marginBottom: 16,
+      textAlign: "center",
+    },
+    urlButton: {
+      marginTop: 8,
+    },
+  });
+};
+
+
+
+
+
+
+
+
+
+
+

package/src/index.ts

@@ -80,6 +80,25 @@ export type { StorageClearSettingProps } from './presentation/components/Storage
 export { DevSettingsSection } from './presentation/components/DevSettingsSection';
 export type { DevSettingsProps } from './presentation/components/DevSettingsSection';
 
+// =============================================================================
+// DOMAIN EXPORTS - Consolidated Features
+// =============================================================================
+
+// About Domain - User info, app details, version
+export * from './domains/about';
+
+// Legal Domain - Terms, privacy, licenses
+export * from './domains/legal';
+
+// Appearance Domain - Theme, dark mode
+export * from './domains/appearance';
+
+// Feedback Domain - User feedback, bug reports
+export * from './domains/feedback';
+
+// FAQs Domain - Frequently asked questions
+export * from './domains/faqs';
+
 // =============================================================================
 // PRESENTATION LAYER - Re-exports from Dependencies
 // =============================================================================

package/src/presentation/components/DevSettingsSection.tsx

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { Alert } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 import { storageRepository } from "@umituz/react-native-storage";
 import { SettingsSection } from "./SettingsSection";
 import { SettingItem } from "./SettingItem";
@@ -46,7 +46,7 @@ export const DevSettingsSection: React.FC<DevSettingsProps> = ({
   texts = {},
   customDevComponents = [],
 }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
 
   // Merge custom texts with defaults
   const t = { ...DEFAULT_TEXTS, ...texts };

package/src/presentation/components/SettingItem.tsx

@@ -6,7 +6,7 @@
 
 import React from "react";
 import { View, Text, Pressable, StyleSheet, Switch } from "react-native";
-import { AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicIcon, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 
 export interface SettingItemProps {
   /** Icon name (Ionicons) */
@@ -58,7 +58,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
   switchThumbColor,
   switchTrackColors,
 }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
   const colors = tokens.colors;
 
   return (

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -5,7 +5,7 @@
 
 import React, { Component, ReactNode } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { useLocalization } from '@umituz/react-native-localization';
 
@@ -67,7 +67,7 @@ const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({
   fallbackTitle,
   fallbackMessage
 }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
   const { t } = useLocalization();
 
   const title = __DEV__ && error?.message

package/src/presentation/components/SettingsFooter.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 
 export interface SettingsFooterProps {
   /** Custom version text (optional) - should include version number from app config */
@@ -21,7 +21,7 @@ export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   appVersion,
   versionLabel = "Version",
 }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
   const colors = tokens.colors;
 
   // If versionText is provided, use it directly

package/src/presentation/components/SettingsSection.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 
 export interface SettingsSectionProps {
   /** Section title */
@@ -18,7 +18,7 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
   title,
   children,
 }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
   const colors = tokens.colors;
 
   return (

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -7,7 +7,7 @@
 
 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 import { SettingsScreen } from "../screens/SettingsScreen";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import type { SettingsConfig } from "../screens/types";
@@ -76,7 +76,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     additionalScreens = [],
     devSettings,
 }) => {
-    const tokens = useAppDesignTokens();
+    const tokens = useResponsiveDesignTokens();
 
     const screenOptions = {
         headerStyle: {

package/src/presentation/screens/SettingsScreen.tsx

@@ -8,7 +8,7 @@ import { View, StatusBar, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {
   useDesignSystemTheme,
-  useAppDesignTokens,
+  useResponsiveDesignTokens,
 } from "@umituz/react-native-design-system";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
@@ -68,7 +68,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 }) => {
   const navigation = useNavigation();
   const { themeMode } = useDesignSystemTheme();
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
 
   const isDark = themeMode === "dark";
   const colors = tokens.colors;

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

@@ -6,7 +6,7 @@
 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";
+import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
 import { ProfileSection } from "@umituz/react-native-auth";
@@ -107,7 +107,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   showCloseButton = false,
   devSettings,
 }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
 

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

@@ -7,7 +7,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useNavigation } from "@react-navigation/native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 import { AtomicIcon } from "@umituz/react-native-design-system";
 
 interface SettingsHeaderProps {
@@ -20,7 +20,7 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
   onClose,
 }) => {
   const navigation = useNavigation();
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
   const insets = useSafeAreaInsets();
 
   const handleClose = () => {