@umituz/react-native-settings 4.23.84 → 4.23.85

package/src/presentation/screens/components/sections/CustomSettingsList.tsx

@@ -2,14 +2,13 @@ import React, { useMemo } from "react";
 import { SettingsSection } from "../../../components/SettingsSection";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { CustomSettingsSection } from "../../types";
+import { createSinglePropComparator } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 interface CustomSettingsListProps {
     customSections?: CustomSettingsSection[];
 }
 
-export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
-    customSections = [],
-}) => {
+export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({ customSections = [] }) => {
     const sortedSections = useMemo(() => {
         return Array.from(customSections)
             .sort((a: CustomSettingsSection, b: CustomSettingsSection) => (a.order ?? 999) - (b.order ?? 999));
@@ -25,9 +24,9 @@ export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
                     title={section.title}
                 >
                     {section.content}
-                    {!section.content && section.items && section.items.length > 0 && section.items.map((item) => (
+                    {!section.content && section.items && section.items.length > 0 && section.items.map((item, itemIndex) => (
                         <SettingsItemCard
-                            key={item.id || `item-${index}`}
+                            key={item.id || `item-${itemIndex}`}
                             title={item.title}
                             description={item.subtitle}
                             icon={item.icon}
@@ -42,3 +41,11 @@ export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
         </>
     );
 };
+
+CustomSettingsList.displayName = "CustomSettingsList";
+
+export const MemoizedCustomSettingsList = React.memo(
+    CustomSettingsList,
+    createSinglePropComparator("customSections")
+);
+MemoizedCustomSettingsList.displayName = "MemoizedCustomSettingsList";

package/src/presentation/screens/components/sections/FeatureSettingsSection.tsx

@@ -5,8 +5,8 @@ import { NotificationsSection } from "../../../../domains/notifications";
 import { useLocalization, getLanguageByCode } from "../../../../domains/localization";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
-
 import { SettingsSection } from "../../../components/SettingsSection";
+import { compareConfigAndFeatures } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 interface FeatureSettingsSectionProps {
   normalizedConfig: NormalizedConfig;
@@ -24,23 +24,22 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
   const { t, currentLanguage } = useLocalization();
   const navigation = useAppNavigation();
 
-  const handleLanguagePress = () => {
+  const handleLanguagePress = React.useCallback(() => {
     if (normalizedConfig.language.config?.onPress) {
       normalizedConfig.language.config.onPress();
     } else {
-      const route =
-        normalizedConfig.language.config?.route || "LanguageSelection";
+      const route = normalizedConfig.language.config?.route || "LanguageSelection";
       navigation.navigate(route as never);
     }
-  };
+  }, [navigation, normalizedConfig.language.config]);
 
-  const currentLanguageData = getLanguageByCode(currentLanguage);
-  const languageDisplayName = currentLanguageData
-    ? `${currentLanguageData.flag} ${currentLanguageData.nativeName}`
-    : currentLanguage;
+  const currentLanguageData = React.useMemo(() => getLanguageByCode(currentLanguage), [currentLanguage]);
+  const languageDisplayName = React.useMemo(() => {
+    if (!currentLanguageData) return currentLanguage;
+    return `${currentLanguageData.flag} ${currentLanguageData.nativeName}`;
+  }, [currentLanguageData, currentLanguage]);
 
-  if (!features.appearance && !features.language && !features.notifications)
-    return null;
+  if (!features.appearance && !features.language && !features.notifications) return null;
 
   return (
     <SettingsSection
@@ -85,3 +84,5 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
   );
 };
 
+export const MemoizedFeatureSettingsSection = React.memo(FeatureSettingsSection, compareConfigAndFeatures);
+MemoizedFeatureSettingsSection.displayName = "MemoizedFeatureSettingsSection";

package/src/presentation/screens/components/sections/IdentitySettingsSection.tsx

@@ -3,8 +3,8 @@ import { AboutSection } from "../../../../domains/about/presentation/components/
 import { LegalSection } from "../../../../domains/legal/presentation/components/LegalSection";
 import { useLocalization } from "../../../../domains/localization";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
-
 import { SettingsSection } from "../../../components/SettingsSection";
+import { compareConfigAndFeatures } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 interface IdentitySettingsSectionProps {
     normalizedConfig: NormalizedConfig;
@@ -48,4 +48,7 @@ export const IdentitySettingsSection: React.FC<IdentitySettingsSectionProps> = (
     );
 };
 
+IdentitySettingsSection.displayName = "IdentitySettingsSection";
 
+export const MemoizedIdentitySettingsSection = React.memo(IdentitySettingsSection, compareConfigAndFeatures);
+MemoizedIdentitySettingsSection.displayName = "MemoizedIdentitySettingsSection";

package/src/presentation/screens/components/sections/ProfileSectionLoader.tsx

@@ -3,6 +3,7 @@ import { View, StyleSheet } from "react-native";
 import { ProfileSection } from "@umituz/react-native-auth";
 import { useLocalization } from "../../../../domains/localization";
 import { useAppNavigation } from "@umituz/react-native-design-system";
+import { createSinglePropComparator } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 export interface ProfileSectionLoaderProps {
     userProfile?: {
@@ -16,24 +17,27 @@ export interface ProfileSectionLoaderProps {
     };
 }
 
-
-export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = ({ userProfile }) => {
+export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.memo(({ userProfile }) => {
     const { t } = useLocalization();
     const navigation = useAppNavigation();
 
-    if (!userProfile) return null;
-
-    const handlePress = () => {
+    const handlePress = React.useCallback(() => {
+        if (!userProfile) return;
         if (userProfile.onPress) {
             userProfile.onPress();
         } else if (userProfile.accountSettingsRoute) {
             navigation.navigate(userProfile.accountSettingsRoute);
         }
-    };
+    }, [navigation, userProfile]);
 
-    const anonymousDisplayName = userProfile.isAnonymous && userProfile.userId 
-        ? `${t("profile.guest", "Guest")} ${userProfile.userId.substring(0, 8)}`
-        : t("settings.profile.anonymousName", "Anonymous User");
+    const anonymousDisplayName = React.useMemo(() => {
+        if (!userProfile) return "";
+        return userProfile.isAnonymous && userProfile.userId
+            ? `${t("profile.guest", "Guest")} ${userProfile.userId.substring(0, 8)}`
+            : t("settings.profile.anonymousName", "Anonymous User");
+    }, [userProfile, t]);
+
+    if (!userProfile) return null;
 
     return (
         <View style={styles.profileContainer}>
@@ -53,7 +57,9 @@ export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = ({ user
             />
         </View>
     );
-};
+}, createSinglePropComparator("userProfile"));
+
+ProfileSectionLoader.displayName = "ProfileSectionLoader";
 
 const styles = StyleSheet.create({
     profileContainer: {

package/src/presentation/screens/components/sections/SupportSettingsSection.tsx

@@ -5,6 +5,7 @@ import { SupportSection } from "../../../../domains/feedback/presentation/compon
 import { SettingsSection } from "../../../components/SettingsSection";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
+import { compareConfigAndFeatures } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 interface SupportSettingsSectionProps {
     features: { feedback: boolean; rating: boolean; faqs: boolean; [key: string]: boolean };
@@ -30,10 +31,10 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
                 <SupportSection
                     renderSection={(props: { title: string; children: React.ReactNode }) => <>{props.children}</>}
                     renderItem={(props: { title: string; icon: string; onPress: () => void; isLast?: boolean }) => (
-                        <SettingsItemCard 
-                            title={props.title} 
-                            icon={props.icon} 
-                            onPress={props.onPress} 
+                        <SettingsItemCard
+                            title={props.title}
+                            icon={props.icon}
+                            onPress={props.onPress}
                             noBackground={true}
                             hideMargin={true}
                         />
@@ -98,3 +99,7 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
     );
 };
 
+SupportSettingsSection.displayName = "SupportSettingsSection";
+
+export const MemoizedSupportSettingsSection = React.memo(SupportSettingsSection, compareConfigAndFeatures);
+MemoizedSupportSettingsSection.displayName = "MemoizedSupportSettingsSection";

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

@@ -51,6 +51,7 @@ export function useFeatureDetection(
       subscription,
       wallet,
       gamification,
+      videoTutorial,
     } = normalizedConfig;
 
     const notificationServiceAvailable = !!options?.notificationServiceAvailable;
@@ -118,6 +119,7 @@ export function useFeatureDetection(
       subscription: subscription.enabled,
       wallet: wallet.enabled,
       gamification: gamification.enabled,
+      videoTutorial: videoTutorial.enabled,
     };
   }, [normalizedConfig, navigation, options]);
 }

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

@@ -21,6 +21,7 @@ import type {
   SubscriptionConfig,
   WalletConfig,
   GamificationItemConfig,
+  VideoTutorialConfig,
 } from "./UserFeatureConfig";
 
 /**
@@ -133,10 +134,16 @@ export interface SettingsConfig {
 
   /**
    * Gamification settings configuration
-   * @default false
+   * @default 'auto'
    */
   gamification?: FeatureVisibility | GamificationItemConfig;
 
+  /**
+   * Video tutorial settings configuration
+   * @default 'auto'
+   */
+  videoTutorial?: FeatureVisibility | VideoTutorialConfig;
+
   /**
    * Custom empty state text when no settings are available
    */

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

@@ -161,3 +161,23 @@ export interface GamificationItemConfig {
   achievementsCount?: number;
 }
 
+/**
+ * Video Tutorial Settings Configuration
+ */
+export interface VideoTutorialConfig {
+  /** Enable video tutorial feature */
+  enabled?: FeatureVisibility;
+  /** Custom title for the video tutorial section */
+  title?: string;
+  /** Custom label for the video tutorial item */
+  description?: string;
+  /** Custom icon name (Ionicons) */
+  icon?: string;
+  /** Custom section title for grouping */
+  sectionTitle?: string;
+  /** Handler to open video tutorial screen */
+  onPress?: () => void;
+  /** Navigation route for video tutorial screen */
+  route?: string;
+}
+

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

@@ -21,6 +21,7 @@ export type {
   SubscriptionConfig,
   WalletConfig,
   GamificationItemConfig,
+  VideoTutorialConfig,
 } from "./UserFeatureConfig";
 export type { GamificationSettingsConfig as GamificationConfig } from "../../../domains/gamification";
 export type { SettingsConfig } from "./SettingsConfig";

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

@@ -18,6 +18,7 @@ import type {
   SubscriptionConfig,
   WalletConfig,
   GamificationItemConfig,
+  VideoTutorialConfig,
   SettingsConfig,
 } from "../types";
 
@@ -74,6 +75,10 @@ export interface NormalizedConfig {
     enabled: boolean;
     config?: GamificationItemConfig;
   };
+  videoTutorial: {
+    enabled: boolean;
+    config?: VideoTutorialConfig;
+  };
 }
 
 /**
@@ -121,6 +126,7 @@ export function normalizeSettingsConfig(
     faqs: normalizeConfigValue(config?.faqs, false),
     subscription: normalizeConfigValue(config?.subscription, false),
     wallet: normalizeConfigValue(config?.wallet, false),
-    gamification: normalizeConfigValue(config?.gamification, false),
+    gamification: normalizeConfigValue(config?.gamification, "auto"),
+    videoTutorial: normalizeConfigValue(config?.videoTutorial, "auto"),
   };
 }

package/src/presentation/utils/accountConfigUtils.ts

@@ -0,0 +1,67 @@
+/**
+ * Account Configuration Utilities
+ *
+ * Helper functions for creating account screen configurations.
+ */
+
+import type { AccountScreenConfig } from "@umituz/react-native-auth";
+
+export interface CreateAccountConfigParams {
+  displayName?: string;
+  userId?: string;
+  photoURL?: string;
+  isAnonymous?: boolean;
+  avatarUrl?: string;
+  onSignIn: () => void;
+  onLogout: () => Promise<void>;
+  onDeleteAccount: () => Promise<void>;
+  t: (key: string) => string;
+}
+
+/**
+ * Create account screen configuration
+ */
+export function createAccountConfig(params: CreateAccountConfigParams): AccountScreenConfig {
+  const {
+    displayName,
+    userId,
+    photoURL,
+    isAnonymous,
+    avatarUrl,
+    onSignIn,
+    onLogout,
+    onDeleteAccount,
+    t,
+  } = params;
+
+  const anonymous = isAnonymous ?? true;
+
+  return {
+    profile: {
+      displayName: displayName || t("settings.profile.anonymousName"),
+      userId: userId ?? undefined,
+      isAnonymous: anonymous,
+      avatarUrl: avatarUrl ?? photoURL ?? undefined,
+      benefits: anonymous ? [
+        t("settings.profile.benefits.saveHistory"),
+        t("settings.profile.benefits.syncDevices"),
+        t("settings.profile.benefits.cloudSync"),
+        t("settings.profile.benefits.secureBackup"),
+      ] : undefined,
+    },
+    isAnonymous: anonymous,
+    editProfileText: t("settings.account.editProfile"),
+    onSignIn,
+    accountActions: {
+      onLogout,
+      onDeleteAccount,
+      logoutText: t("settings.account.logout"),
+      logoutConfirmTitle: t("settings.account.logoutConfirmTitle"),
+      logoutConfirmMessage: t("settings.account.logoutConfirmMessage"),
+      cancelText: t("common.cancel"),
+      deleteAccountText: t("settings.account.deleteAccount"),
+      deleteConfirmTitle: t("settings.account.deleteConfirmTitle"),
+      deleteConfirmMessage: t("settings.account.deleteConfirmMessage"),
+    },
+  };
+}

package/src/presentation/utils/screenFactory.ts

@@ -0,0 +1,87 @@
+/**
+ * Screen Factory Utilities
+ *
+ * Helper functions for creating stack screen configurations.
+ */
+
+import React from "react";
+import type { StackScreen } from "@umituz/react-native-design-system";
+import type { AdditionalScreen } from "../navigation/types";
+
+/**
+ * Create a basic stack screen configuration
+ */
+export function createStackScreen(
+  name: string,
+  componentOrChildren: React.ComponentType<any> | (() => React.ReactElement),
+  options: { headerShown?: boolean } = {}
+): StackScreen {
+  const isChildrenFunction = typeof componentOrChildren === "function" &&
+    !(componentOrChildren.prototype && componentOrChildren.prototype.isReactComponent);
+
+  if (isChildrenFunction) {
+    return {
+      name,
+      options: { headerShown: false, ...options },
+      children: componentOrChildren as () => React.ReactElement,
+    };
+  }
+  return {
+    name,
+    component: componentOrChildren as any,
+    options: { headerShown: false, ...options },
+  };
+}
+
+/**
+ * Create a screen with props
+ */
+export function createScreenWithProps<P extends Record<string, unknown>>(
+  name: string,
+  component: React.ComponentType<P>,
+  props: P,
+  options: { headerShown?: boolean } = {}
+): StackScreen {
+  return {
+    name,
+    options: { headerShown: false, ...options },
+    children: (() => React.createElement(component, props)) as () => React.ReactElement,
+  };
+}
+
+/**
+ * Convert additional screen to stack screen
+ */
+export function convertAdditionalScreen(screen: AdditionalScreen): StackScreen {
+  const stackScreen: any = { name: screen.name };
+  if (screen.component) stackScreen.component = screen.component;
+  if (screen.children) stackScreen.children = screen.children;
+  if (screen.options) stackScreen.options = screen.options;
+  return stackScreen as StackScreen;
+}
+
+/**
+ * Create conditional screen
+ */
+export function createConditionalScreen(
+  condition: boolean,
+  screenFactory: () => StackScreen
+): StackScreen | null {
+  return condition ? screenFactory() : null;
+}
+
+/**
+ * Combine screens excluding null values
+ */
+export function combineScreens(...screens: (StackScreen | null | StackScreen[])[]): StackScreen[] {
+  const result: StackScreen[] = [];
+  for (const screen of screens) {
+    if (screen === null) continue;
+    if (Array.isArray(screen)) {
+      result.push(...screen);
+    } else {
+      result.push(screen);
+    }
+  }
+  return result;
+}

package/src/presentation/utils/userProfileUtils.ts

@@ -0,0 +1,51 @@
+/**
+ * User Profile Utilities
+ *
+ * Helper functions for creating user profile configurations.
+ */
+
+import type { UserProfileDisplay } from "../navigation/types";
+
+export interface UserProfileConfig {
+  displayName?: string;
+  userId?: string;
+  isAnonymous?: boolean;
+  avatarUrl?: string;
+}
+
+export interface CreateUserProfileParams {
+  profileData?: UserProfileConfig;
+  t: (key: string, params?: Record<string, string | number>) => string;
+  onSignIn?: () => void;
+}
+
+/**
+ * Create user profile display configuration
+ */
+export function createUserProfileDisplay(params: CreateUserProfileParams): UserProfileDisplay {
+  const { profileData, t, onSignIn } = params;
+
+  const isAnonymous = profileData?.isAnonymous ?? true;
+  const anonymousName = t("settings.profile.anonymousName");
+
+  return {
+    displayName: profileData?.displayName || anonymousName,
+    userId: profileData?.userId ?? undefined,
+    isAnonymous,
+    avatarUrl: profileData?.avatarUrl ?? undefined,
+    onPress: isAnonymous ? onSignIn : undefined,
+    accountSettingsRoute: isAnonymous ? undefined : "Account",
+  };
+}
+
+/**
+ * Create benefits list for anonymous users
+ */
+export function createAnonymousBenefits(t: (key: string) => string): string[] {
+  return [
+    t("settings.profile.benefits.saveHistory"),
+    t("settings.profile.benefits.syncDevices"),
+    t("settings.profile.benefits.cloudSync"),
+    t("settings.profile.benefits.secureBackup"),
+  ];
+}