@umituz/react-native-settings 4.3.0 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -39,6 +39,7 @@
     "@umituz/react-native-design-system-theme": "*",
     "@umituz/react-native-design-system-typography": "*",
     "@umituz/react-native-legal": "*",
+    "@umituz/react-native-disclaimer": "*",
     "@umituz/react-native-localization": "*",
     "@umituz/react-native-storage": "*",
     "react": ">=18.2.0",
@@ -69,6 +70,7 @@
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-design-system-typography": "latest",
     "@umituz/react-native-legal": "^2.0.3",
+    "@umituz/react-native-disclaimer": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-notifications": "latest",
     "@umituz/react-native-storage": "latest",
@@ -90,4 +92,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

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

@@ -16,6 +16,7 @@ import { AboutSection } from "@umituz/react-native-about";
 import { LegalSection } from "@umituz/react-native-legal";
 import { AppearanceSection } from "@umituz/react-native-appearance";
 import { LanguageSection } from "@umituz/react-native-localization";
+import { DisclaimerSetting } from "@umituz/react-native-disclaimer";
 import type { NormalizedConfig } from "../utils/normalizeConfig";
 import type { CustomSettingsSection } from "../types";
 
@@ -28,6 +29,7 @@ interface SettingsContentProps {
     notifications: boolean;
     about: boolean;
     legal: boolean;
+    disclaimer: boolean;
   };
   showUserProfile?: boolean;
   userProfile?: {
@@ -69,6 +71,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
     features.notifications ||
     features.about ||
     features.legal ||
+    features.disclaimer ||
     customSections.length > 0,
     [features, customSections.length]
   );
@@ -124,6 +127,10 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         <LegalSection config={normalizedConfig.legal.config} />
       )}
 
+      {features.disclaimer && (
+        <DisclaimerSetting />
+      )}
+
       {customSections && customSections.length > 0 && (
         <>
           {sortedSections.map((section, index) => (

package/src/presentation/screens/hooks/useFeatureDetection.ts

@@ -61,7 +61,7 @@ export function useFeatureDetection(
   },
 ) {
   return useMemo(() => {
-    const { appearance, language, notifications, about, legal, account, support, developer } =
+    const { appearance, language, notifications, about, legal, disclaimer, account, support, developer } =
       normalizedConfig;
     
     const notificationServiceAvailable = options?.notificationServiceAvailable ?? notificationService !== null;
@@ -102,6 +102,11 @@ export function useFeatureDetection(
         (legal.config?.enabled === true ||
           (legal.config?.enabled !== false &&
             hasNavigationScreen(navigation, legal.config?.route || "Legal"))),
+      disclaimer:
+        disclaimer.enabled &&
+        (disclaimer.config?.enabled === true ||
+          (disclaimer.config?.enabled !== false &&
+            hasNavigationScreen(navigation, disclaimer.config?.route || "Disclaimer"))),
       account:
         account.enabled &&
         (account.config?.enabled === true ||

package/src/presentation/screens/types/FeatureConfig.ts

@@ -99,4 +99,22 @@ export interface LegalConfig {
   description?: string;
   /** Default route name when no custom route provided */
   defaultRoute?: string;
+}
+
+/**
+ * Disclaimer Settings Configuration
+ */
+export interface DisclaimerConfig {
+  /** Show disclaimer section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for disclaimer screen */
+  route?: string;
+  /** Custom disclaimer title */
+  title?: string;
+  /** Custom disclaimer description */
+  description?: string;
+  /** Custom short message for card display */
+  shortMessage?: string;
+  /** Default route name when no custom route provided */
+  defaultRoute?: string;
 }

package/src/presentation/screens/types/SettingsConfig.ts

@@ -10,6 +10,7 @@ import type {
   NotificationsConfig,
   AboutConfig,
   LegalConfig,
+  DisclaimerConfig,
 } from "./FeatureConfig";
 import type {
   AccountConfig,
@@ -91,6 +92,12 @@ export interface SettingsConfig {
    */
   legal?: FeatureVisibility | LegalConfig;
 
+  /**
+   * Disclaimer settings (Important notices, warnings)
+   * @default false
+   */
+  disclaimer?: FeatureVisibility | DisclaimerConfig;
+
   /**
    * Account settings
    * @default false

package/src/presentation/screens/types/index.ts

@@ -10,6 +10,7 @@ export type {
   NotificationsConfig,
   AboutConfig,
   LegalConfig,
+  DisclaimerConfig,
 } from "./FeatureConfig";
 export type {
   AccountConfig,

package/src/presentation/screens/utils/normalizeConfig.ts

@@ -10,6 +10,7 @@ import type {
   NotificationsConfig,
   AboutConfig,
   LegalConfig,
+  DisclaimerConfig,
   AccountConfig,
   SupportConfig,
   DeveloperConfig,
@@ -37,6 +38,10 @@ export interface NormalizedConfig {
     enabled: boolean;
     config?: LegalConfig;
   };
+  disclaimer: {
+    enabled: boolean;
+    config?: DisclaimerConfig;
+  };
   account: {
     enabled: boolean;
     config?: AccountConfig;
@@ -88,6 +93,7 @@ export function normalizeSettingsConfig(
     notifications: normalizeConfigValue(config?.notifications, "auto"),
     about: normalizeConfigValue(config?.about, "auto"),
     legal: normalizeConfigValue(config?.legal, "auto"),
+    disclaimer: normalizeConfigValue(config?.disclaimer, false),
     account: normalizeConfigValue(config?.account, false),
     support: normalizeConfigValue(config?.support, false),
     developer: normalizeConfigValue(config?.developer, false),

package/src/presentation/components/DisclaimerCard.tsx

@@ -1,115 +0,0 @@
-/**
- * Disclaimer Card Component
- * Extracted from DisclaimerSetting to follow single responsibility and 200-line rules
- */
-
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-} from 'react-native';
-
-import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system-theme';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
-
-export interface DisclaimerCardProps {
-  title: string;
-  shortMessage: string;
-  iconName: string;
-  iconColor: string;
-  backgroundColor: string;
-  onPress: () => void;
-}
-
-export const DisclaimerCard: React.FC<DisclaimerCardProps> = ({
-  title,
-  shortMessage,
-  iconName,
-  iconColor,
-  backgroundColor,
-  onPress,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-
-  return (
-    <TouchableOpacity
-      style={[
-        styles.container,
-        { backgroundColor },
-      ]}
-      onPress={onPress}
-      activeOpacity={0.7}
-      testID="disclaimer-setting"
-    >
-      {/* Icon and Title Row */}
-      <View style={styles.headerRow}>
-        <View
-          style={[
-            styles.iconContainer,
-            {
-              backgroundColor: withAlpha(iconColor, 0.2),
-              borderColor: withAlpha(iconColor, 0.4),
-              borderWidth: 1,
-            },
-          ]}
-        >
-          <AtomicIcon name={iconName} color="warning" />
-        </View>
-        <AtomicText type="bodyLarge" color="primary" style={styles.title}>
-          {title}
-        </AtomicText>
-        <AtomicIcon name="ArrowRight" color="secondary" size="sm" />
-      </View>
-
-      {/* Short Message */}
-      <AtomicText
-        type="bodySmall"
-        color="secondary"
-        style={styles.shortMessage}
-      >
-        {shortMessage}
-      </AtomicText>
-    </TouchableOpacity>
-  );
-};
-
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.md,
-      marginHorizontal: tokens.spacing.md,
-      marginTop: 8,
-      marginBottom: 8,
-      borderRadius: 12,
-    },
-
-    headerRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginBottom: 12,
-    },
-
-    iconContainer: {
-      width: 40,
-      height: 40,
-      borderRadius: 20,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginRight: 12,
-    },
-
-    title: {
-      flex: 1,
-      fontWeight: tokens.typography.labelLarge.fontWeight as any,
-      fontSize: tokens.typography.labelLarge.fontSize,
-    },
-
-    shortMessage: {
-      lineHeight: 18,
-      paddingLeft: 52, // Align with title (40px icon + 12px margin)
-      fontSize: 13,
-    },
-  });

package/src/presentation/components/DisclaimerModal.tsx

@@ -1,104 +0,0 @@
-/**
- * Disclaimer Modal Component
- * Extracted from DisclaimerSetting to follow single responsibility and 200-line rules
- */
-
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-} from 'react-native';
-
-import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
-
-export interface DisclaimerModalProps {
-  visible: boolean;
-  title: string;
-  content: string;
-  onClose: () => void;
-}
-
-export const DisclaimerModal: React.FC<DisclaimerModalProps> = ({
-  visible,
-  title,
-  content,
-  onClose,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-
-  if (!visible) return null;
-
-  return (
-    <View
-      style={[
-        styles.modalContainer,
-        { backgroundColor: tokens.colors.backgroundPrimary },
-      ]}
-    >
-      {/* Modal Header */}
-      <View
-        style={[
-          styles.modalHeader,
-          { borderBottomColor: tokens.colors.borderLight },
-        ]}
-      >
-        <AtomicText type="headlineMedium" color="primary">
-          {title}
-        </AtomicText>
-        <TouchableOpacity
-          onPress={onClose}
-          testID="close-disclaimer-modal"
-        >
-          <AtomicIcon name="X" color="primary" size="md" />
-        </TouchableOpacity>
-      </View>
-
-      {/* Scrollable Content */}
-      <ScrollView
-        style={styles.modalContent}
-        contentContainerStyle={styles.modalContentContainer}
-      >
-        <AtomicText
-          type="bodyMedium"
-          color="primary"
-          style={styles.modalText}
-        >
-          {content}
-        </AtomicText>
-      </ScrollView>
-    </View>
-  );
-};
-
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    modalContainer: {
-      flex: 1,
-    },
-
-    modalHeader: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingHorizontal: 20,
-      paddingVertical: 16,
-      borderBottomWidth: 1,
-    },
-
-    modalContent: {
-      flex: 1,
-    },
-
-    modalContentContainer: {
-      padding: 20,
-    },
-
-    modalText: {
-      lineHeight: 24,
-      fontSize: 15,
-    },
-  });

package/src/presentation/components/DisclaimerSetting.tsx

@@ -1,114 +0,0 @@
-/**
- * DisclaimerSetting Component
- *
- * Displays customizable disclaimer with important legal notice
- * Used in About screens for apps that require disclaimers
- *
- * Features:
- * - Tappable card that opens full disclaimer modal
- * - Warning icon with background color
- * - Internationalized title and message
- * - Full-screen modal with scrollable content
- * - NO shadows (CLAUDE.md compliance)
- * - Universal across iOS, Android, Web (NO Platform.OS checks)
- *
- * Usage:
- * - Import and use in AboutScreen
- * - Requires translations: settings.disclaimer.title, settings.disclaimer.message, settings.disclaimer.shortMessage
- */
-
-import React, { useState, useEffect, useCallback } from 'react';
-import { Modal } from 'react-native';
-
-import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system-theme';
-import { useLocalization } from '@umituz/react-native-localization';
-import { DisclaimerCard } from './DisclaimerCard';
-import { DisclaimerModal } from './DisclaimerModal';
-
-export interface DisclaimerSettingProps {
-  /** Custom title translation key */
-  titleKey?: string;
-  /** Custom message translation key */
-  messageKey?: string;
-  /** Custom short message translation key */
-  shortMessageKey?: string;
-  /** Custom icon name */
-  iconName?: string;
-  /** Custom icon color */
-  iconColor?: string;
-  /** Custom background color */
-  backgroundColor?: string;
-  /** Custom modal title */
-  modalTitle?: string;
-  /** Custom modal content */
-  modalContent?: string;
-}
-
-export const DisclaimerSetting: React.FC<DisclaimerSettingProps> = ({
-  titleKey = "settings.disclaimer.title",
-  messageKey = "settings.disclaimer.message",
-  shortMessageKey = "settings.disclaimer.shortMessage",
-  iconName = "AlertTriangle",
-  iconColor,
-  backgroundColor,
-  modalTitle,
-  modalContent,
-}) => {
-  const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
-  const [modalVisible, setModalVisible] = useState(false);
-
-  useEffect(() => {
-    return () => {
-      setModalVisible(false);
-    };
-  }, []);
-
-  const title = modalTitle || t(titleKey);
-  const content = modalContent || t(messageKey);
-  const shortMessage = t(shortMessageKey);
-  const finalIconColor = iconColor || tokens.colors.warning;
-  const finalBackgroundColor = backgroundColor || withAlpha(finalIconColor, 0.1);
-
-  const handleOpenModal = useCallback(() => {
-    setModalVisible(true);
-    if (__DEV__) {
-      console.log('DisclaimerSetting: Modal opened');
-    }
-  }, []);
-
-  const handleCloseModal = useCallback(() => {
-    setModalVisible(false);
-    if (__DEV__) {
-      console.log('DisclaimerSetting: Modal closed');
-    }
-  }, []);
-
-  return (
-    <>
-      <DisclaimerCard
-        title={title}
-        shortMessage={shortMessage}
-        iconName={iconName}
-        iconColor={finalIconColor}
-        backgroundColor={finalBackgroundColor}
-        onPress={handleOpenModal}
-      />
-
-      <Modal
-        visible={modalVisible}
-        animationType="slide"
-        presentationStyle="pageSheet"
-        onRequestClose={handleCloseModal}
-      >
-        <DisclaimerModal
-          visible={modalVisible}
-          title={title}
-          content={content}
-          onClose={handleCloseModal}
-        />
-      </Modal>
-    </>
-  );
-};
-

package/src/presentation/components/__tests__/DisclaimerCard.test.tsx

@@ -1,208 +0,0 @@
-/**
- * Tests for DisclaimerCard Component
- */
-
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react-native';
-import { DisclaimerCard } from '../DisclaimerCard';
-
-// Mock dependencies
-jest.mock('@umituz/react-native-design-system-theme', () => ({
-  useAppDesignTokens: () => ({
-    colors: {
-      backgroundPrimary: '#ffffff',
-    },
-    spacing: {
-      md: 16,
-    },
-    typography: {
-      labelLarge: {
-        fontWeight: '500',
-        fontSize: 14,
-      },
-    },
-  }),
-  withAlpha: jest.fn((color: string, alpha: number) => `${color}${alpha}`),
-}));
-
-jest.mock('@umituz/react-native-design-system-atoms', () => ({
-  AtomicText: ({ children, type, color, style }: any) => (
-    <Text style={style} testID={`atomic-text-${type}-${color}`}>
-      {children}
-    </Text>
-  ),
-  AtomicIcon: ({ name, color, size, style }: any) => (
-    <Text style={style} testID={`atomic-icon-${name}-${color}-${size}`}>
-      Icon: {name}
-    </Text>
-  ),
-}));
-
-import { Text } from 'react-native';
-
-describe('DisclaimerCard', () => {
-  it('renders correctly with basic props', () => {
-    const { getByTestId, getByText } = render(
-      <DisclaimerCard
-        title="Test Title"
-        shortMessage="Test Message"
-        iconName="AlertTriangle"
-        iconColor="#FF9800"
-        backgroundColor="#FFF3E0"
-        onPress={jest.fn()}
-      />
-    );
-
-    expect(getByText('Test Title')).toBeTruthy();
-    expect(getByText('Test Message')).toBeTruthy();
-    expect(getByTestId('disclaimer-setting')).toBeTruthy();
-    expect(getByTestId('atomic-icon-AlertTriangle-warning')).toBeTruthy();
-    expect(getByTestId('atomic-icon-ArrowRight-secondary-sm')).toBeTruthy();
-  });
-
-  it('calls onPress when pressed', () => {
-    const mockOnPress = jest.fn();
-    const { getByTestId } = render(
-      <DisclaimerCard
-        title="Test Title"
-        shortMessage="Test Message"
-        iconName="AlertTriangle"
-        iconColor="#FF9800"
-        backgroundColor="#FFF3E0"
-        onPress={mockOnPress}
-      />
-    );
-
-    fireEvent.press(getByTestId('disclaimer-setting'));
-    expect(mockOnPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('applies correct styling with theme tokens', () => {
-    const { getByTestId } = render(
-      <DisclaimerCard
-        title="Test Title"
-        shortMessage="Test Message"
-        iconName="AlertTriangle"
-        iconColor="#FF9800"
-        backgroundColor="#FFF3E0"
-        onPress={jest.fn()}
-      />
-    );
-
-    const card = getByTestId('disclaimer-setting');
-    expect(card.props.style).toContainEqual({
-      backgroundColor: '#FFF3E0',
-    });
-  });
-
-  it('renders with different icon names', () => {
-    const { getByTestId } = render(
-      <DisclaimerCard
-        title="Test Title"
-        shortMessage="Test Message"
-        iconName="info"
-        iconColor="#2196F3"
-        backgroundColor="#E3F2FD"
-        onPress={jest.fn()}
-      />
-    );
-
-    expect(getByTestId('atomic-icon-info-warning')).toBeTruthy();
-  });
-
-  it('handles long text content', () => {
-    const longTitle = 'This is a very long disclaimer title that should be handled properly';
-    const longMessage = 'This is a very long disclaimer message that should wrap properly and not break the layout';
-
-    const { getByText } = render(
-      <DisclaimerCard
-        title={longTitle}
-        shortMessage={longMessage}
-        iconName="AlertTriangle"
-        iconColor="#FF9800"
-        backgroundColor="#FFF3E0"
-        onPress={jest.fn()}
-      />
-    );
-
-    expect(getByText(longTitle)).toBeTruthy();
-    expect(getByText(longMessage)).toBeTruthy();
-  });
-
-  it('has correct accessibility properties', () => {
-    const mockOnPress = jest.fn();
-    const { getByTestId } = render(
-      <DisclaimerCard
-        title="Test Title"
-        shortMessage="Test Message"
-        iconName="AlertTriangle"
-        iconColor="#FF9800"
-        backgroundColor="#FFF3E0"
-        onPress={mockOnPress}
-      />
-    );
-
-    const touchable = getByTestId('disclaimer-setting');
-    expect(touchable.props.activeOpacity).toBe(0.7);
-  });
-
-  it('uses withAlpha utility correctly', () => {
-    const { withAlpha } = require('@umituz/react-native-design-system-theme');
-
-    render(
-      <DisclaimerCard
-        title="Test Title"
-        shortMessage="Test Message"
-        iconName="AlertTriangle"
-        iconColor="#FF9800"
-        backgroundColor="#FFF3E0"
-        onPress={jest.fn()}
-      />
-    );
-
-    expect(withAlpha).toHaveBeenCalledWith('#FF9800', 0.2);
-    expect(withAlpha).toHaveBeenCalledWith('#FF9800', 0.4);
-  });
-
-  it('maintains correct layout structure', () => {
-    const { getByTestId } = render(
-      <DisclaimerCard
-        title="Test Title"
-        shortMessage="Test Message"
-        iconName="AlertTriangle"
-        iconColor="#FF9800"
-        backgroundColor="#FFF3E0"
-        onPress={jest.fn()}
-      />
-    );
-
-    // Check that icon container has correct styles
-    expect(getByTestId('atomic-icon-AlertTriangle-warning')).toBeTruthy();
-
-    // Check that title and arrow are present
-    expect(getByTestId('atomic-icon-ArrowRight-secondary-sm')).toBeTruthy();
-  });
-
-  it('handles press events correctly', () => {
-    const mockOnPress = jest.fn();
-    const { getByTestId } = render(
-      <DisclaimerCard
-        title="Test Title"
-        shortMessage="Test Message"
-        iconName="AlertTriangle"
-        iconColor="#FF9800"
-        backgroundColor="#FFF3E0"
-        onPress={mockOnPress}
-      />
-    );
-
-    // Test single press
-    fireEvent.press(getByTestId('disclaimer-setting'));
-    expect(mockOnPress).toHaveBeenCalledTimes(1);
-
-    // Test multiple presses
-    fireEvent.press(getByTestId('disclaimer-setting'));
-    fireEvent.press(getByTestId('disclaimer-setting'));
-    expect(mockOnPress).toHaveBeenCalledTimes(3);
-  });
-});

package/src/presentation/components/__tests__/DisclaimerModal.test.tsx

@@ -1,236 +0,0 @@
-/**
- * Tests for DisclaimerModal Component
- */
-
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react-native';
-import { DisclaimerModal } from '../DisclaimerModal';
-
-// Mock dependencies
-jest.mock('@umituz/react-native-design-system-theme', () => ({
-  useAppDesignTokens: () => ({
-    colors: {
-      backgroundPrimary: '#ffffff',
-      borderLight: '#e0e0e0',
-    },
-  }),
-}));
-
-jest.mock('@umituz/react-native-design-system-atoms', () => ({
-  AtomicText: ({ children, type, color, style }: any) => (
-    <Text style={style} testID={`atomic-text-${type}-${color}`}>
-      {children}
-    </Text>
-  ),
-  AtomicIcon: ({ name, color, size, style }: any) => (
-    <Text style={style} testID={`atomic-icon-${name}-${color}-${size}`}>
-      Icon: {name}
-    </Text>
-  ),
-}));
-
-import { Text, Modal, ScrollView } from 'react-native';
-
-describe('DisclaimerModal', () => {
-  it('renders null when visible is false', () => {
-    const { queryByTestId } = render(
-      <DisclaimerModal
-        visible={false}
-        title="Test Title"
-        content="Test Content"
-        onClose={jest.fn()}
-      />
-    );
-
-    expect(queryByTestId('disclaimer-modal')).toBeNull();
-  });
-
-  it('renders correctly when visible is true', () => {
-    const { getByTestId, getByText } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content="Test Content"
-        onClose={jest.fn()}
-      />
-    );
-
-    expect(getByTestId('disclaimer-modal')).toBeTruthy();
-    expect(getByText('Test Title')).toBeTruthy();
-    expect(getByText('Test Content')).toBeTruthy();
-  });
-
-  it('calls onClose when close button is pressed', () => {
-    const mockOnClose = jest.fn();
-    const { getByTestId } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content="Test Content"
-        onClose={mockOnClose}
-      />
-    );
-
-    fireEvent.press(getByTestId('close-disclaimer-modal'));
-    expect(mockOnClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('applies correct theme colors', () => {
-    const { getByTestId } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content="Test Content"
-        onClose={jest.fn()}
-      />
-    );
-
-    const modalContainer = getByTestId('disclaimer-modal');
-    expect(modalContainer.props.style).toContainEqual({
-      backgroundColor: '#ffffff',
-    });
-  });
-
-  it('renders header with correct structure', () => {
-    const { getByTestId, getByText } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content="Test Content"
-        onClose={jest.fn()}
-      />
-    );
-
-    expect(getByTestId('atomic-text-headlineMedium-primary')).toBeTruthy();
-    expect(getByTestId('atomic-icon-X-primary-md')).toBeTruthy();
-    expect(getByText('Test Title')).toBeTruthy();
-  });
-
-  it('renders content in ScrollView', () => {
-    const { getByTestId } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content="Test Content"
-        onClose={jest.fn()}
-      />
-    );
-
-    expect(getByTestId('disclaimer-modal-content')).toBeTruthy();
-  });
-
-  it('handles long content correctly', () => {
-    const longContent = 'This is a very long disclaimer content that should scroll properly. '.repeat(20);
-    
-    const { getByText } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content={longContent}
-        onClose={jest.fn()}
-      />
-    );
-
-    expect(getByText(longContent)).toBeTruthy();
-  });
-
-  it('applies correct text styling', () => {
-    const { getByTestId } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content="Test Content"
-        onClose={jest.fn()}
-      />
-    );
-
-    expect(getByTestId('atomic-text-bodyMedium-primary')).toBeTruthy();
-  });
-
-  it('has correct accessibility properties', () => {
-    const mockOnClose = jest.fn();
-    const { getByTestId } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content="Test Content"
-        onClose={mockOnClose}
-      />
-    );
-
-    const closeButton = getByTestId('close-disclaimer-modal');
-    expect(closeButton).toBeTruthy();
-  });
-
-  it('handles multiple close calls', () => {
-    const mockOnClose = jest.fn();
-    const { getByTestId } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content="Test Content"
-        onClose={mockOnClose}
-      />
-    );
-
-    const closeButton = getByTestId('close-disclaimer-modal');
-    
-    fireEvent.press(closeButton);
-    fireEvent.press(closeButton);
-    fireEvent.press(closeButton);
-    
-    expect(mockOnClose).toHaveBeenCalledTimes(3);
-  });
-
-  it('maintains correct layout structure', () => {
-    const { getByTestId } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content="Test Content"
-        onClose={jest.fn()}
-      />
-    );
-
-    // Check modal container exists
-    expect(getByTestId('disclaimer-modal')).toBeTruthy();
-    
-    // Check header elements exist
-    expect(getByTestId('atomic-text-headlineMedium-primary')).toBeTruthy();
-    expect(getByTestId('atomic-icon-X-primary-md')).toBeTruthy();
-    
-    // Check content exists
-    expect(getByTestId('disclaimer-modal-content')).toBeTruthy();
-  });
-
-  it('handles empty content gracefully', () => {
-    const { getByTestId, queryByText } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content=""
-        onClose={jest.fn()}
-      />
-    );
-
-    expect(getByTestId('disclaimer-modal')).toBeTruthy();
-    expect(getByTestId('atomic-text-headlineMedium-primary')).toBeTruthy();
-    // Empty content should still render the text component
-    expect(getByTestId('atomic-text-bodyMedium-primary')).toBeTruthy();
-  });
-
-  it('handles special characters in content', () => {
-    const specialContent = 'Content with special chars: © ® ™ "quotes" \'apostrophes\'';
-    
-    const { getByText } = render(
-      <DisclaimerModal
-        visible={true}
-        title="Test Title"
-        content={specialContent}
-        onClose={jest.fn()}
-      />
-    );
-
-    expect(getByText(specialContent)).toBeTruthy();
-  });
-});

package/src/presentation/components/__tests__/DisclaimerSetting.test.tsx

@@ -1,74 +0,0 @@
-/**
- * Tests for DisclaimerSetting Component
- */
-
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react-native';
-import { DisclaimerSetting } from '../DisclaimerSetting';
-
-// Mock dependencies
-jest.mock('@umituz/react-native-localization', () => ({
-  useLocalization: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-jest.mock('@umituz/react-native-design-system-theme', () => ({
-  useAppDesignTokens: () => ({
-    colors: {
-      backgroundPrimary: '#ffffff',
-      warning: '#ff9800',
-    },
-    spacing: {
-      md: 16,
-    },
-  }),
-  withAlpha: (color: string, alpha: number) => `${color}${alpha}`,
-}));
-
-describe('DisclaimerSetting', () => {
-  it('renders disclaimer card correctly', () => {
-    const { getByTestId } = render(<DisclaimerSetting />);
-
-    expect(getByTestId('disclaimer-setting')).toBeTruthy();
-  });
-
-  it('opens modal when card is pressed', () => {
-    const { getByTestId } = render(<DisclaimerSetting />);
-
-    const card = getByTestId('disclaimer-setting');
-    fireEvent.press(card);
-
-    // Modal should be visible now
-    expect(getByTestId('close-disclaimer-modal')).toBeTruthy();
-  });
-
-  it('closes modal when close button is pressed', () => {
-    const { getByTestId } = render(<DisclaimerSetting />);
-
-    // Open modal first
-    const card = getByTestId('disclaimer-setting');
-    fireEvent.press(card);
-
-    // Close modal
-    const closeButton = getByTestId('close-disclaimer-modal');
-    fireEvent.press(closeButton);
-
-    // Modal should be closed
-    expect(() => getByTestId('close-disclaimer-modal')).toThrow();
-  });
-
-  it('uses custom props when provided', () => {
-    const customProps = {
-      titleKey: 'custom.title',
-      messageKey: 'custom.message',
-      shortMessageKey: 'custom.shortMessage',
-      iconName: 'info',
-    };
-
-    const { getByText } = render(<DisclaimerSetting {...customProps} />);
-
-    expect(getByText('custom.title')).toBeTruthy();
-    expect(getByText('custom.shortMessage')).toBeTruthy();
-  });
-});