@umituz/react-native-settings 5.4.10 → 5.4.12

package/src/domains/rating/index.ts

@@ -34,11 +34,11 @@ export { StarRating } from './presentation/components/StarRating';
 export type { StarRatingProps } from './presentation/components/StarRating';
 
 // =============================================================================
-// PRESENTATION LAYER - Components (App Store Rating)
+// PRESENTATION LAYER - Screens
 // =============================================================================
 
-export { useRatingPromptModal } from './presentation/hooks/useRatingPromptModal';
-export type { RatingPromptOptions } from './presentation/hooks/useRatingPromptModal';
+export { RatingPromptScreen } from './presentation/screens/RatingPromptScreen';
+export type { RatingPromptScreenProps, RatingPromptScreenParams } from './presentation/screens/RatingPromptScreen';
 
 // =============================================================================
 // PRESENTATION LAYER - Hooks (App Store Rating)

package/src/domains/rating/presentation/hooks/useAppRating.tsx

@@ -4,7 +4,7 @@
  * Lazy loads expo-store-review to reduce bundle size
  */
 
-import React, { useState, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import type {
   RatingConfig,
   UseAppRatingResult,
@@ -12,14 +12,14 @@ import type {
 } from "../../domain/entities/RatingConfig";
 import { DEFAULT_RATING_CONFIG } from "../../domain/entities/RatingConfig";
 import * as RatingService from "../../application/services/RatingService";
-import { RatingPromptModal } from "../components/RatingPromptModal";
+import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
 import { isDev } from "../../../../utils/devUtils";
 
 /**
- * App rating hook with 2-step prompt flow
+ * App rating hook with navigation-based prompt flow
  */
 export function useAppRating(config: RatingConfig): UseAppRatingResult {
-  const [isVisible, setIsVisible] = useState(false);
+  const navigation = useAppNavigation();
 
   const mergedConfig = useMemo<RatingConfig>(() => ({
     ...DEFAULT_RATING_CONFIG,
@@ -35,13 +35,48 @@ export function useAppRating(config: RatingConfig): UseAppRatingResult {
   }, [mergedConfig]);
 
   const showPrompt = useCallback(async (): Promise<void> => {
-    setIsVisible(true);
     await RatingService.markPromptShown(mergedConfig.eventType);
 
+    navigation.push('RatingPrompt' as never, {
+      appName: mergedConfig.appName,
+      translations: mergedConfig.translations,
+      onPositive: async () => {
+        await RatingService.markRated();
+
+        try {
+          // Lazy load expo-store-review
+          const StoreReview = await import('expo-store-review');
+          const isAvailable = await StoreReview.isAvailableAsync();
+
+          if (isAvailable) {
+            await StoreReview.requestReview();
+          }
+        } catch (error) {
+          if (isDev()) {
+            console.error('[useAppRating] Failed to request review:', error);
+          }
+        }
+
+        if (mergedConfig.onPositiveFeedback) {
+          await mergedConfig.onPositiveFeedback();
+        }
+      },
+      onNegative: async () => {
+        if (mergedConfig.onNegativeFeedback) {
+          await mergedConfig.onNegativeFeedback();
+        }
+      },
+      onLater: async () => {
+        if (mergedConfig.onPromptDismissed) {
+          await mergedConfig.onPromptDismissed();
+        }
+      },
+    });
+
     if (mergedConfig.onPromptShown) {
       await mergedConfig.onPromptShown();
     }
-  }, [mergedConfig]);
+  }, [mergedConfig, navigation]);
 
   const checkAndShow = useCallback(async (): Promise<boolean> => {
     const should = await shouldShow();
@@ -62,62 +97,6 @@ export function useAppRating(config: RatingConfig): UseAppRatingResult {
     return RatingService.getState(mergedConfig.eventType);
   }, [mergedConfig.eventType]);
 
-  const handlePositive = useCallback(async () => {
-    setIsVisible(false);
-    await RatingService.markRated();
-
-    try {
-      // Lazy load expo-store-review
-      const StoreReview = await import('expo-store-review');
-      const isAvailable = await StoreReview.isAvailableAsync();
-
-      if (isAvailable) {
-        await StoreReview.requestReview();
-      }
-    } catch (error) {
-      if (isDev()) {
-        console.error('[useAppRating] Failed to request review:', error);
-      }
-    }
-
-    if (mergedConfig.onPositiveFeedback) {
-      await mergedConfig.onPositiveFeedback();
-    }
-  }, [mergedConfig]);
-
-  const handleNegative = useCallback(async () => {
-    setIsVisible(false);
-
-    if (mergedConfig.onNegativeFeedback) {
-      await mergedConfig.onNegativeFeedback();
-    }
-  }, [mergedConfig]);
-
-  const handleLater = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  const handleDismiss = useCallback(async () => {
-    setIsVisible(false);
-    await RatingService.markDismissed();
-
-    if (mergedConfig.onPromptDismissed) {
-      await mergedConfig.onPromptDismissed();
-    }
-  }, [mergedConfig]);
-
-  const modal = (
-    <RatingPromptModal
-      visible={isVisible}
-      onPositive={handlePositive}
-      onNegative={handleNegative}
-      onLater={handleLater}
-      onDismiss={handleDismiss}
-      translations={mergedConfig.translations}
-      appName={mergedConfig.appName}
-    />
-  );
-
   return {
     trackEvent,
     checkAndShow,
@@ -125,7 +104,5 @@ export function useAppRating(config: RatingConfig): UseAppRatingResult {
     showPrompt,
     reset,
     getState,
-    isVisible,
-    modal,
-  } as UseAppRatingResult & { modal: React.ReactNode };
+  } as UseAppRatingResult;
 }

package/src/domains/rating/presentation/screens/RatingPromptScreen.tsx

@@ -0,0 +1,162 @@
+/**
+ * Rating Prompt Screen
+ *
+ * Full screen for app rating prompt.
+ * Replaces modal approach with native navigation.
+ */
+
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
+import { AtomicText, AtomicButton, AtomicIcon } from '@umituz/react-native-design-system/atoms';
+import { NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system/molecules';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
+import type { RatingTranslations } from '../../domain/entities/RatingConfig';
+
+export interface RatingPromptScreenParams {
+  appName?: string;
+  translations?: RatingTranslations;
+  onPositive?: () => void;
+  onNegative?: () => void;
+  onLater?: () => void;
+  [key: string]: unknown;
+}
+
+export interface RatingPromptScreenProps {
+  route: {
+    params: RatingPromptScreenParams;
+  };
+}
+
+export const RatingPromptScreen: React.FC<RatingPromptScreenProps> = ({ route }) => {
+  const navigation = useAppNavigation();
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+  const { appName = 'this app', translations, onPositive, onNegative, onLater } = route.params;
+
+  const defaultTranslations: RatingTranslations = {
+    title: translations?.title ?? 'Enjoying the app?',
+    message:
+      translations?.message ??
+      `If you love using ${appName}, would you mind taking a moment to rate it?`,
+    positiveButton: translations?.positiveButton ?? 'Yes, I love it!',
+    negativeButton: translations?.negativeButton ?? 'Not really',
+    laterButton: translations?.laterButton ?? 'Maybe later',
+  };
+
+  const handlePositive = async () => {
+    try {
+      // Lazy load expo-store-review
+      const StoreReview = await import('expo-store-review');
+      const isAvailable = await StoreReview.isAvailableAsync();
+
+      if (isAvailable) {
+        await StoreReview.requestReview();
+      }
+    } catch (error) {
+      console.error('[RatingPromptScreen] Failed to request review:', error);
+    }
+
+    if (onPositive) {
+      onPositive();
+    }
+    navigation.goBack();
+  };
+
+  const handleNegative = () => {
+    if (onNegative) {
+      onNegative();
+    }
+    navigation.goBack();
+  };
+
+  const handleLater = () => {
+    if (onLater) {
+      onLater();
+    }
+    navigation.goBack();
+  };
+
+  return (
+    <ScreenLayout
+      scrollable={true}
+      edges={['top', 'bottom', 'left', 'right']}
+      hideScrollIndicator={false}
+    >
+      <NavigationHeader title="" />
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <View style={styles.iconContainer}>
+          <AtomicIcon name="star" size="xxl" color="primary" />
+        </View>
+
+        <AtomicText style={styles.title}>{defaultTranslations.title}</AtomicText>
+
+        <AtomicText style={styles.message}>{defaultTranslations.message}</AtomicText>
+
+        <View style={styles.buttonContainer}>
+          <AtomicButton
+            variant="primary"
+            onPress={handlePositive}
+            style={styles.button}
+          >
+            {defaultTranslations.positiveButton}
+          </AtomicButton>
+
+          <AtomicButton
+            variant="outline"
+            onPress={handleNegative}
+            style={styles.button}
+          >
+            {defaultTranslations.negativeButton}
+          </AtomicButton>
+
+          <AtomicButton
+            variant="text"
+            onPress={handleLater}
+            style={styles.button}
+          >
+            {defaultTranslations.laterButton}
+          </AtomicButton>
+        </View>
+      </ScrollView>
+    </ScreenLayout>
+  );
+};
+
+const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      padding: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '100%',
+    },
+    iconContainer: {
+      marginBottom: 24,
+    },
+    title: {
+      fontSize: 24,
+      fontWeight: '700',
+      textAlign: 'center',
+      marginBottom: 16,
+    },
+    message: {
+      fontSize: 16,
+      textAlign: 'center',
+      marginBottom: 32,
+      lineHeight: 24,
+    },
+    buttonContainer: {
+      width: '100%',
+      gap: 12,
+    },
+    button: {
+      width: '100%',
+    },
+  });

package/src/infrastructure/services/SettingsService.ts

@@ -19,21 +19,15 @@ export class SettingsService extends BaseService {
   }
 
   async getSettings(userId: string): Promise<SettingsResult<UserSettings>> {
-    return this.execute('getSettings', async () => {
-      return await this.repository.getSettings(userId);
-    });
+    return await this.repository.getSettings(userId);
   }
 
   async saveSettings(settings: UserSettings): Promise<SettingsResult<void>> {
-    return this.execute('saveSettings', async () => {
-      return await this.repository.saveSettings(settings);
-    });
+    return await this.repository.saveSettings(settings);
   }
 
   async resetSettings(userId: string): Promise<SettingsResult<void>> {
-    return this.execute('resetSettings', async () => {
-      return await this.repository.deleteSettings(userId);
-    });
+    return await this.repository.deleteSettings(userId);
   }
 }
 

package/src/presentation/components/GenericModal.tsx

@@ -18,12 +18,12 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { BaseModal } from '@umituz/react-native-design-system/molecules';
 import { AtomicText, AtomicButton, AtomicIcon } from '@umituz/react-native-design-system/atoms';
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import { useResponsive } from '@umituz/react-native-design-system/responsive';
-import type { ModalConfig, ModalState } from '../../core/patterns/Modal/ModalConfig';
+import type { ModalState } from '../../core/patterns/Modal/ModalConfig';
 
 export interface GenericModalProps {
   /**
@@ -68,8 +68,6 @@ export const GenericModal: React.FC<GenericModalProps> = ({
     footer,
     actions = [],
     dismissible = true,
-    closeOnBackdropPress = true,
-    closeOnBackPress = true,
     maxWidth,
   } = config;
 
@@ -85,8 +83,6 @@ export const GenericModal: React.FC<GenericModalProps> = ({
     <BaseModal
       visible={visible}
       onClose={handleDismiss}
-      closeOnBackdropPress={closeOnBackdropPress}
-      closeOnBackPress={closeOnBackPress}
     >
       <View
         style={[
@@ -113,7 +109,7 @@ export const GenericModal: React.FC<GenericModalProps> = ({
                 <AtomicIcon
                   name={icon}
                   size="xl"
-                  color={iconColor || 'primary'}
+                  color={iconColor as any || 'primary'}
                 />
               </View>
             )}

package/src/presentation/components/GenericScreen.tsx

@@ -20,7 +20,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
 import {
   NavigationHeader,
@@ -88,11 +88,6 @@ export function GenericScreen<T>({
     <NavigationHeader
       title={header?.title || ''}
       onBackPress={showBackButton ? onBackPress : undefined}
-      actions={header?.actions?.map((action) => ({
-        icon: action.icon,
-        onPress: action.onPress,
-        testID: action.testID,
-      }))}
     />
   ) : undefined;
 

package/src/presentation/navigation/hooks/useSettingsScreens.ts

@@ -3,6 +3,9 @@ import type { StackScreen } from "@umituz/react-native-design-system/molecules";
 import { LanguageSelectionScreen } from "../../../domains/localization";
 import { NotificationSettingsScreen } from "../../../domains/notifications";
 import { SettingsScreen } from "../../screens/SettingsScreen";
+import { DisclaimerScreen } from "../../../domains/disclaimer/presentation/screens/DisclaimerScreen";
+import { FeedbackScreen } from "../../../domains/feedback/presentation/screens/FeedbackScreen";
+import { RatingPromptScreen } from "../../../domains/rating/presentation/screens/RatingPromptScreen";
 
 // AccountScreen is an optional peer — lazy require so the package works without @umituz/react-native-auth
 // Returns null if @umituz/react-native-auth is not installed
@@ -176,6 +179,25 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
       }
     });
 
+    // New screens to replace modals
+    const disclaimerScreen = {
+      name: "Disclaimer" as const,
+      component: DisclaimerScreen,
+      options: { headerShown: false },
+    };
+
+    const feedbackScreen = {
+      name: "Feedback" as const,
+      component: FeedbackScreen,
+      options: { headerShown: false },
+    };
+
+    const ratingPromptScreen = {
+      name: "RatingPrompt" as const,
+      component: RatingPromptScreen,
+      options: { headerShown: false },
+    };
+
     return combineScreens(
       baseScreens,
       faqScreen,
@@ -184,7 +206,10 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
       languageScreen,
       accountScreen,
       videoTutorialScreen,
-      featureRequestScreen
+      featureRequestScreen,
+      disclaimerScreen,
+      feedbackScreen,
+      ratingPromptScreen
     );
   }, [
     translations,

package/src/presentation/navigation/types.ts

@@ -6,6 +6,9 @@ import type React from 'react';
 import type { SettingsConfig, CustomSettingsSection } from "../screens/types";
 import type { DevSettingsProps } from "../../domains/dev";
 import type { FAQCategory } from "../../domains/faqs";
+import type { DisclaimerScreenParams } from "../../domains/disclaimer/presentation/screens/DisclaimerScreen";
+import type { FeedbackScreenParams } from "../../domains/feedback/presentation/screens/FeedbackScreen";
+import type { RatingPromptScreenParams } from "../../domains/rating/presentation/screens/RatingPromptScreen";
 
 /**
  * App Info passed from main app (APP_INFO constant)
@@ -48,6 +51,9 @@ export type SettingsStackParamList = {
   Account: undefined;
   VideoTutorial: undefined;
   FeatureRequest: undefined;
+  Disclaimer: DisclaimerScreenParams;
+  Feedback: FeedbackScreenParams;
+  RatingPrompt: RatingPromptScreenParams;
   PasswordPrompt: {
     onComplete: (password: string | null) => void;
     title?: string;

package/src/domains/disclaimer/presentation/hooks/useDisclaimerModal.ts

@@ -1,72 +0,0 @@
-/**
- * useDisclaimerModal Hook
- *
- * Refactored to use GenericModal and ModalConfig.
- * Replaces old DisclaimerModal component.
- *
- * @example
- * ```ts
- * const { DisclaimerModal, showDisclaimer } = useDisclaimerModal();
- *
- * return (
- *   <>
- *     <Button onPress={() => showDisclaimer({ title: 'Terms', content: '...' })} />
- *     <DisclaimerModal />
- *   </>
- * );
- * ```
- */
-
-import { useCallback } from 'react';
-import { GenericModal } from '../../../../presentation/components/GenericModal';
-import { useModalState } from '../../../../core/patterns/Modal/useModalState';
-import type { ModalConfig } from '../../../../core/patterns/Modal/ModalConfig';
-
-export interface DisclaimerModalOptions {
-  /**
-   * Disclaimer title
-   */
-  title: string;
-
-  /**
-   * Disclaimer content
-   */
-  content: string;
-
-  /**
-   * Custom modal configuration
-   */
-  config?: Partial<ModalConfig>;
-}
-
-/**
- * Disclaimer modal hook
- */
-export function useDisclaimerModal() {
-  const modal = useModalState();
-
-  const showDisclaimer = useCallback((options: DisclaimerModalOptions) => {
-    const { title, content, config: customConfig } = options;
-
-    const modalConfig: ModalConfig = {
-      title,
-      message: content,
-      dismissible: true,
-      closeOnBackdropPress: true,
-      closeOnBackPress: true,
-      ...customConfig,
-    };
-
-    modal.show(modalConfig);
-  }, [modal]);
-
-  const DisclaimerModal = useCallback(() => {
-    return <GenericModal state={modal} testID="disclaimer-modal" />;
-  }, [modal]);
-
-  return {
-    DisclaimerModal,
-    showDisclaimer,
-    modal,
-  };
-}