@umituz/react-native-settings 4.17.14 → 4.17.16

package/src/domains/legal/presentation/components/LegalLinks.tsx

@@ -0,0 +1,154 @@
+/**
+ * LegalLinks Component
+ * Single Responsibility: Display Privacy Policy and Terms of Service links
+ * Required for App Store compliance in paywall screens
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+import { ContentValidationService } from "../../domain/services/ContentValidationService";
+import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
+
+export interface LegalLinksProps {
+  /**
+   * Privacy Policy URL
+   */
+  privacyPolicyUrl?: string;
+  /**
+   * Terms of Service URL
+   */
+  termsOfServiceUrl?: string;
+  /**
+   * Privacy Policy link text (required when privacyPolicyUrl is provided)
+   */
+  privacyText?: string;
+  /**
+   * Terms of Service link text (required when termsOfServiceUrl is provided)
+   */
+  termsText?: string;
+  /**
+   * Callback when Privacy Policy is pressed
+   */
+  onPrivacyPress?: () => void;
+  /**
+   * Callback when Terms of Service is pressed
+   */
+  onTermsPress?: () => void;
+  /**
+   * Additional styles
+   */
+  style?: object;
+}
+
+export const LegalLinks: React.FC<LegalLinksProps> = React.memo(
+  ({
+    privacyPolicyUrl,
+    termsOfServiceUrl,
+    privacyText,
+    termsText,
+    onPrivacyPress,
+    onTermsPress,
+    style,
+  }) => {
+    // Validate required props
+    React.useEffect(() => {
+      ContentValidationService.validateLegalLinks(
+        privacyPolicyUrl,
+        termsOfServiceUrl,
+        privacyText,
+        termsText,
+        onPrivacyPress,
+        onTermsPress
+      );
+    }, [privacyPolicyUrl, termsOfServiceUrl, privacyText, termsText, onPrivacyPress, onTermsPress]);
+
+    // Memoize press handlers to prevent child re-renders
+    const handlePrivacyPress = React.useCallback(async () => {
+      if (onPrivacyPress) {
+        onPrivacyPress();
+      } else if (privacyPolicyUrl) {
+        try {
+          await UrlHandlerService.openUrl(privacyPolicyUrl);
+        } catch (error) {
+          if (__DEV__) {
+            console.error('LegalLinks: Error opening privacy policy URL', error);
+          }
+        }
+      }
+    }, [onPrivacyPress, privacyPolicyUrl]);
+
+    const handleTermsPress = React.useCallback(async () => {
+      if (onTermsPress) {
+        onTermsPress();
+      } else if (termsOfServiceUrl) {
+        try {
+          await UrlHandlerService.openUrl(termsOfServiceUrl);
+        } catch (error) {
+          if (__DEV__) {
+            console.error('LegalLinks: Error opening terms of service URL', error);
+          }
+        }
+      }
+    }, [onTermsPress, termsOfServiceUrl]);
+
+    // Memoize conditional rendering to prevent unnecessary re-renders
+    const showPrivacy = React.useMemo(() => !!(onPrivacyPress || privacyPolicyUrl), [onPrivacyPress, privacyPolicyUrl]);
+    const showTerms = React.useMemo(() => !!(onTermsPress || termsOfServiceUrl), [onTermsPress, termsOfServiceUrl]);
+    const showSeparator = React.useMemo(() => showPrivacy && showTerms, [showPrivacy, showTerms]);
+
+    return (
+      <View style={[styles.container, style]}>
+        {showPrivacy && (
+          <TouchableOpacity onPress={handlePrivacyPress} hitSlop={styles.hitSlop}>
+            <AtomicText
+              type="labelSmall"
+              color="primary"
+              style={styles.link}
+            >
+              {privacyText}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+        {showSeparator && (
+          <AtomicText
+            type="labelSmall"
+            color="textTertiary"
+          >
+            {" • "}
+          </AtomicText>
+        )}
+        {showTerms && (
+          <TouchableOpacity onPress={handleTermsPress} hitSlop={styles.hitSlop}>
+            <AtomicText
+              type="labelSmall"
+              color="primary"
+              style={styles.link}
+            >
+              {termsText}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  },
+);
+
+LegalLinks.displayName = "LegalLinks";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  link: {
+    textDecorationLine: "underline",
+  },
+  hitSlop: {
+    top: 10,
+    bottom: 10,
+    left: 10,
+    right: 10,
+  },
+});

package/src/domains/legal/presentation/components/LegalSection.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { View, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useResponsiveDesignTokens, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
+import { LegalConfig } from '../../domain/entities/LegalConfig';
+
+export interface LegalSectionProps {
+    config?: LegalConfig;
+    onPress?: () => void;
+    containerStyle?: ViewStyle;
+    title?: string;
+    description?: string;
+    sectionTitle?: string;
+}
+
+export const LegalSection: React.FC<LegalSectionProps> = ({
+    config,
+    onPress,
+    containerStyle,
+    title: propsTitle,
+    description: propsDescription,
+    sectionTitle: propsSectionTitle,
+}) => {
+    const navigation = useNavigation();
+    const tokens = useResponsiveDesignTokens();
+    const colors = tokens.colors;
+
+    const route = config?.route || config?.defaultRoute || 'Legal';
+    const title = propsTitle || config?.title;
+    const description = propsDescription || config?.description;
+    const sectionTitle = propsSectionTitle || title;
+
+    const handlePress = () => {
+        if (onPress) {
+            onPress();
+        } else {
+            navigation.navigate(route as never);
+        }
+    };
+
+    if (!title) return null;
+
+    return (
+        <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
+            {!!sectionTitle && (
+                <View style={styles.headerContainer}>
+                    <AtomicText
+                        type="titleMedium"
+                        color="primary"
+                    >
+                        {sectionTitle}
+                    </AtomicText>
+                </View>
+            )}
+            <Pressable
+                style={({ pressed }) => [
+                    styles.itemContainer,
+                    {
+                        backgroundColor: pressed ? `${colors.primary}08` : 'transparent',
+                    },
+                ]}
+                onPress={handlePress}
+            >
+                <View style={styles.content}>
+                    <View
+                        style={[
+                            styles.iconContainer,
+                            { backgroundColor: `${colors.primary}15` },
+                        ]}
+                    >
+                        <AtomicIcon name="document-text" size="lg" color="primary" />
+                    </View>
+                    <View style={styles.textContainer}>
+                        <AtomicText
+                            type="bodyLarge"
+                            color="primary"
+                            numberOfLines={1}
+                            style={{ marginBottom: 4 }}
+                        >
+                            {title}
+                        </AtomicText>
+                        {!!description && (
+                            <AtomicText
+                                type="bodyMedium"
+                                color="secondary"
+                                numberOfLines={2}
+                            >
+                                {description}
+                            </AtomicText>
+                        )}
+                    </View>
+                    <AtomicIcon name="chevron-right" size="md" color="secondary" />
+                </View>
+            </Pressable>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    sectionContainer: {
+        marginBottom: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    headerContainer: {
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 8,
+    },
+    itemContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        minHeight: 72,
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        width: 48,
+        height: 48,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 16,
+    },
+    textContainer: {
+        flex: 1,
+        marginRight: 8,
+    },
+});

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

@@ -0,0 +1,237 @@
+/**
+ * Legal Screen Component
+ * 
+ * Single Responsibility: Layout and orchestration of legal documents list
+ * Delegates item rendering to LegalItem component
+ * 
+ * All text content is passed as props (no localization dependency).
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useResponsiveDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system";
+import { ScreenLayout } from "@umituz/react-native-design-system";
+import { LegalItem } from "../components/LegalItem";
+import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
+import { ContentValidationService } from "../../domain/services/ContentValidationService";
+import { StyleCacheService } from "../../domain/services/StyleCacheService";
+
+export interface LegalScreenProps {
+  /**
+   * Title of the screen
+   */
+  title?: string;
+  /**
+   * Description/subtitle text
+   */
+  description?: string;
+  /**
+   * Header text for documents section
+   */
+  documentsHeader?: string;
+  /**
+   * Privacy Policy button text
+   */
+  privacyTitle?: string;
+  /**
+   * Privacy Policy description
+   */
+  privacyDescription?: string;
+  /**
+   * Terms of Service button text
+   */
+  termsTitle?: string;
+  /**
+   * Terms of Service description
+   */
+  termsDescription?: string;
+  /**
+   * EULA button text
+   */
+  eulaTitle?: string;
+  /**
+   * EULA description
+   */
+  eulaDescription?: string;
+  /**
+   * Callback when Privacy Policy is pressed
+   */
+  onPrivacyPress?: () => void;
+  /**
+   * Callback when Terms of Service is pressed
+   */
+  onTermsPress?: () => void;
+  /**
+   * Callback when EULA is pressed
+   * Icon name from Feather library (e.g., "shield", "file-text", "file") EULA URL
+   */
+  onEulaPress?: () => void;
+  /**
+   * EULA URL (defaults to Apple's standard EULA)
+   */
+  eulaUrl?: string;
+  /**
+   * Test ID for E2E testing
+   */
+  testID?: string;
+}
+
+export const LegalScreen: React.FC<LegalScreenProps> = React.memo(({
+  title,
+  description,
+  documentsHeader,
+  privacyTitle,
+  privacyDescription,
+  termsTitle,
+  termsDescription,
+  eulaTitle,
+  eulaDescription,
+  onPrivacyPress,
+  onTermsPress,
+  onEulaPress,
+  eulaUrl,
+  testID = "legal-screen",
+}) => {
+  const tokens = useResponsiveDesignTokens();
+
+  // Memoize styles to prevent recreation on every render
+  const styles = React.useMemo(() => {
+    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
+    return StyleCacheService.getCachedStyles(
+      'LegalScreen',
+      cacheKey,
+      () => createLegalScreenStyles(tokens)
+    );
+  }, [tokens]);
+
+  // Memoize EULA press handler to prevent child re-renders
+  const handleEulaPress = React.useCallback(async () => {
+    if (__DEV__) {
+      console.log('LegalScreen: EULA pressed', { eulaUrl });
+    }
+
+    if (onEulaPress) {
+      onEulaPress();
+    } else if (eulaUrl) {
+      try {
+        await UrlHandlerService.openUrl(eulaUrl);
+      } catch (error) {
+        if (__DEV__) {
+          console.error('LegalScreen: Error opening EULA URL', error);
+        }
+      }
+    }
+  }, [onEulaPress, eulaUrl]);
+
+  // Memoize conditional rendering to prevent unnecessary re-renders
+  const showHeader = React.useMemo(() => !!(title), [title]);
+  const showDescription = React.useMemo(() => !!(description), [description]);
+  const showSectionHeader = React.useMemo(() => !!(documentsHeader), [documentsHeader]);
+  const showPrivacy = React.useMemo(() =>
+    ContentValidationService.shouldShowLegalItem(onPrivacyPress, privacyTitle),
+    [onPrivacyPress, privacyTitle]
+  );
+  const showTerms = React.useMemo(() =>
+    ContentValidationService.shouldShowLegalItem(onTermsPress, termsTitle),
+    [onTermsPress, termsTitle]
+  );
+  const showEula = React.useMemo(() =>
+    !!((onEulaPress || eulaUrl) && eulaTitle),
+    [onEulaPress, eulaUrl, eulaTitle]
+  );
+
+  // Memoize header content
+  const headerContent = React.useMemo(() => {
+    if (!showHeader) return null;
+
+    return (
+      <View style={styles.header}>
+        <AtomicText type="headlineLarge" color="textPrimary">
+          {title}
+        </AtomicText>
+        {showDescription && (
+          <AtomicText
+            type="bodyMedium"
+            color="textSecondary"
+            style={styles.headerSubtitle}
+          >
+            {description}
+          </AtomicText>
+        )}
+      </View>
+    );
+  }, [showHeader, showDescription, styles.header, styles.headerSubtitle, title, description]);
+
+  return (
+    <ScreenLayout testID={testID} hideScrollIndicator>
+      {/* Header */}
+      {headerContent}
+
+      {/* Legal Documents Section */}
+      <View style={styles.section}>
+        {showSectionHeader && (
+          <AtomicText
+            type="labelLarge"
+            color="textSecondary"
+            style={styles.sectionHeader}
+          >
+            {documentsHeader}
+          </AtomicText>
+        )}
+
+        {/* Privacy Policy */}
+        {showPrivacy && (
+          <LegalItem
+            iconName="shield"
+            title={privacyTitle!}
+            description={privacyDescription}
+            onPress={onPrivacyPress}
+            testID="privacy-policy-item"
+          />
+        )}
+
+        {/* Terms of Service */}
+        {showTerms && (
+          <LegalItem
+            iconName="document-text"
+            title={termsTitle!}
+            description={termsDescription}
+            onPress={onTermsPress}
+            testID="terms-of-service-item"
+          />
+        )}
+
+        {/* EULA */}
+        {showEula && (
+          <LegalItem
+            iconName="document"
+            title={eulaTitle!}
+            description={eulaDescription}
+            onPress={handleEulaPress}
+            testID="eula-item"
+          />
+        )}
+      </View>
+    </ScreenLayout>
+  );
+});
+
+const createLegalScreenStyles = (tokens: DesignTokens) => {
+  return StyleSheet.create({
+    header: {
+      paddingBottom: tokens.spacing.lg,
+      paddingTop: tokens.spacing.md,
+    },
+    headerSubtitle: {
+      marginTop: tokens.spacing.xs,
+    },
+    section: {
+      marginTop: tokens.spacing.md,
+    },
+    sectionHeader: {
+      marginBottom: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+    },
+  });
+};