@umituz/react-native-settings 4.17.26 → 4.17.30

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

@@ -1,66 +1,23 @@
-/**
- * Settings Content Component
- * Renders all settings sections and custom content
- */
-
 import React, { useMemo } 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 { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
-import { ProfileSection } from "@umituz/react-native-auth";
 import { SettingsSection } from "../../components/SettingsSection";
 import { DevSettingsSection, DevSettingsProps } from "../../components/DevSettingsSection";
-import { NotificationsSection } from "@umituz/react-native-notifications";
-import { AboutSection } from "../../../domains/about/presentation/components/AboutSection";
-import { LegalSection } from "../../../domains/legal/presentation/components/LegalSection";
-import { AppearanceSection } from "../../../domains/appearance/presentation/components/AppearanceSection";
-import { LanguageSection } from "@umituz/react-native-localization";
-import { SupportSection } from "../../../domains/feedback/presentation/components/SupportSection";
-import { SettingItem } from "../../components/SettingItem";
+import { DisclaimerSetting } from "../../../domains/disclaimer";
+import { ProfileSectionLoader } from "./sections/ProfileSectionLoader";
+import { FeatureSettingsSection } from "./sections/FeatureSettingsSection";
+import { IdentitySettingsSection } from "./sections/IdentitySettingsSection";
+import { SupportSettingsSection } from "./sections/SupportSettingsSection";
+import { CustomSettingsList } from "./sections/CustomSettingsList";
 import type { NormalizedConfig } from "../utils/normalizeConfig";
 import type { CustomSettingsSection } from "../types";
 
-// Optional FAQ component
-let FAQSection: React.ComponentType<any> | null = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const module = require("@umituz/react-native-faqs");
-  if (module?.FAQSection) {
-    FAQSection = module.FAQSection;
-  }
-} catch {
-  // Package not available
-}
-
-// Optional disclaimer component
-let DisclaimerSetting: React.ComponentType<any> | null = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const module = require("@umituz/react-native-disclaimer");
-  if (module?.DisclaimerSetting) {
-    DisclaimerSetting = module.DisclaimerSetting;
-  }
-} catch {
-  // Package not available
-}
-
-// Optional subscription component
-let SubscriptionSection: React.ComponentType<any> | null = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const module = require("@umituz/react-native-subscription");
-  if (module?.SubscriptionSection) {
-    SubscriptionSection = module.SubscriptionSection;
-  }
-} catch {
-  // Package not available
-}
-
 interface SettingsContentProps {
   normalizedConfig: NormalizedConfig;
-  config?: any; // Original config for emptyStateText
+  config?: any;
   features: {
     appearance: boolean;
     language: boolean;
@@ -75,22 +32,12 @@ interface SettingsContentProps {
     faqs: boolean;
   };
   showUserProfile?: boolean;
-  userProfile?: {
-    displayName?: string;
-    userId?: string;
-    isAnonymous?: boolean;
-    avatarUrl?: string;
-    accountSettingsRoute?: string;
-    onPress?: () => void;
-    anonymousDisplayName?: string;
-    avatarServiceUrl?: string;
-  };
+  userProfile?: any;
   showFooter?: boolean;
   footerText?: string;
   appVersion?: string;
   customSections?: CustomSettingsSection[];
   showCloseButton?: boolean;
-  /** Dev settings (only shown in __DEV__ mode) */
   devSettings?: DevSettingsProps;
 }
 
@@ -126,11 +73,6 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
     [features, customSections.length]
   );
 
-  const sortedSections = useMemo(() => {
-    return Array.from(customSections)
-      .sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
-  }, [customSections]);
-
   return (
     <ScrollView
       style={styles.scrollView}
@@ -139,191 +81,32 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         {
           paddingTop: showCloseButton ? tokens.spacing.md : insets.top + tokens.spacing.md,
           paddingBottom: tokens.spacing.xxxl + tokens.spacing.xl,
-          paddingHorizontal: 0,
+          paddingHorizontal: tokens.spacing.md,
         },
       ]}
       showsVerticalScrollIndicator={false}
     >
-      {showUserProfile && (
-        <View style={styles.profileContainer}>
-          <ProfileSection
-            profile={{
-              displayName: userProfile?.displayName || t("settings.profile.anonymousName"),
-              userId: userProfile?.userId,
-              isAnonymous: userProfile?.isAnonymous ?? true,
-              avatarUrl: userProfile?.avatarUrl,
-              accountSettingsRoute: userProfile?.accountSettingsRoute,
-            }}
-            onPress={userProfile?.onPress}
-            onSignIn={userProfile?.onPress}
-            signInText={t("auth.signIn")}
-            anonymousText={t("settings.profile.anonymousName")}
-          />
-        </View>
-      )}
-
-      {features.subscription &&
-        SubscriptionSection &&
-        normalizedConfig.subscription.config?.sectionConfig && (
-          <SubscriptionSection
-            config={normalizedConfig.subscription.config.sectionConfig}
-          />
-        )}
-
-      {features.appearance && (
-        <AppearanceSection
-          config={{
-            ...normalizedConfig.appearance.config,
-            title: t("settings.appearance.title"),
-            description: t("settings.appearance.description"),
-          }}
-          sectionTitle={t("settings.appearance.title")}
-        />
-      )}
-
-      {features.language && (
-        <LanguageSection
-          config={{
-            ...normalizedConfig.language.config,
-            title: t("settings.languageSelection.title"),
-            description:
-              normalizedConfig.language.config?.description ||
-              t("settings.languageSelection.description"),
-          }}
-        />
-      )}
-
-      {features.notifications && (
-        <NotificationsSection
-          config={{
-            ...normalizedConfig.notifications.config,
-            title: t("settings.notifications.title"),
-            description: t("settings.notifications.description"),
-          }}
-        />
-      )}
-
-      {features.about && (
-        <AboutSection
-          config={{
-            ...normalizedConfig.about.config,
-            title: t("settings.about.title"),
-            description: t("settings.about.description"),
-          }}
-          sectionTitle={t("settings.about.title")}
-        />
-      )}
+      {showUserProfile && <ProfileSectionLoader userProfile={userProfile} />}
 
-      {features.legal && (
-        <LegalSection
-          config={{
-            ...normalizedConfig.legal.config,
-            title: t("settings.legal.title"),
-            description: t("settings.legal.description"),
-          }}
-          sectionTitle={t("settings.legal.title")}
-        />
-      )}
+      <FeatureSettingsSection normalizedConfig={normalizedConfig} features={features} />
 
-      {(features.feedback || features.rating || features.faqs) && (
-        <SettingsSection title={t("settings.support.title")}>
-          {(features.feedback || features.rating) && (
-            <SupportSection
-              renderSection={(props: any) => <>{props.children}</>}
-              renderItem={(props: any) => <SettingItem {...props} />}
-              feedbackConfig={{
-                enabled: features.feedback,
-                config: {
-                  ...normalizedConfig.feedback.config,
-                  title: normalizedConfig.feedback.config?.title || t("settings.feedback.title"),
-                  description: normalizedConfig.feedback.config?.description || t("settings.feedback.description"),
-                }
-              }}
-              ratingConfig={{
-                enabled: features.rating,
-                config: {
-                  ...normalizedConfig.rating.config,
-                  title: normalizedConfig.rating.config?.title || t("settings.rating.title"),
-                  description: normalizedConfig.rating.config?.description || t("settings.rating.description"),
-                }
-              }}
-              feedbackModalTexts={{
-                title: t("settings.feedback.modal.title"),
-                ratingLabel: t("settings.feedback.modal.ratingLabel"),
-                descriptionPlaceholder: t("settings.feedback.modal.descriptionPlaceholder"),
-                submitButton: t("settings.feedback.modal.submitButton"),
-                submittingButton: t("settings.feedback.modal.submittingButton"),
-                feedbackTypes: [
-                  { type: 'general', label: t("settings.feedback.types.general") },
-                  { type: 'bug_report', label: t("settings.feedback.types.bugReport") },
-                  { type: 'feature_request', label: t("settings.feedback.types.featureRequest") },
-                  { type: 'improvement', label: t("settings.feedback.types.improvement") },
-                  { type: 'other', label: t("settings.feedback.types.other") },
-                ],
-                defaultTitle: (type) => {
-                  const titles = {
-                    general: t("settings.feedback.types.general"),
-                    bug_report: t("settings.feedback.types.bugReport"),
-                    feature_request: t("settings.feedback.types.featureRequest"),
-                    improvement: t("settings.feedback.types.improvement"),
-                    other: t("settings.feedback.types.other"),
-                  };
-                  return titles[type] || type;
-                },
-              }}
-            />
-          )}
+      <IdentitySettingsSection normalizedConfig={normalizedConfig} features={features} />
 
+      <SupportSettingsSection normalizedConfig={normalizedConfig} features={features} />
 
-          {features.faqs && FAQSection && (
-            <FAQSection
-              renderSection={(props: any) => <>{props.children}</>}
-              renderItem={(props: any) => <SettingItem {...props} />}
-              config={{
-                enabled: features.faqs,
-                ...normalizedConfig.faqs.config,
-                title: normalizedConfig.faqs.config?.title || t("settings.faqs.title") || "FAQs",
-                description: normalizedConfig.faqs.config?.description || t("settings.faqs.description") || "FAQs",
-              }}
-            />
-          )}
-        </SettingsSection>
-      )}
-
-      {features.disclaimer && DisclaimerSetting && (
-        <DisclaimerSetting />
-      )}
+      {features.disclaimer && <DisclaimerSetting />}
 
-      {customSections && customSections.length > 0 && (
-        <>
-          {sortedSections.map((section, index) => (
-            <SettingsSection
-              key={section.id || `custom-${index}`}
-              title={section.title}
-            >
-              {section.content}
-            </SettingsSection>
-          ))}
-        </>
-      )}
+      <CustomSettingsList customSections={customSections} />
 
       {!hasAnyFeatures && (
         <View style={styles.emptyContainer}>
-          <SettingsSection
-            title={config?.emptyStateText || t("settings.noOptionsAvailable") || "No settings available"}
-          >
+          <SettingsSection title={config?.emptyStateText || t("settings.noOptionsAvailable")}>
             <View />
           </SettingsSection>
         </View>
       )}
 
-      {devSettings && (
-        <DevSettingsSection
-          enabled={devSettings.enabled}
-          onAfterClear={devSettings.onAfterClear}
-          texts={devSettings.texts}
-        />
-      )}
+      {devSettings && <DevSettingsSection {...devSettings} />}
 
       {showFooter && (
         <SettingsFooter
@@ -337,17 +120,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
 };
 
 const styles = StyleSheet.create({
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    flexGrow: 1,
-  },
-  profileContainer: {
-    marginBottom: 32,
-    paddingHorizontal: 0,
-  },
-  emptyContainer: {
-    paddingVertical: 24,
-  },
+  scrollView: { flex: 1 },
+  scrollContent: { flexGrow: 1 },
+  emptyContainer: { paddingVertical: 24 },
 });

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

@@ -0,0 +1,31 @@
+import React, { useMemo } from "react";
+import { SettingsSection } from "../../../components/SettingsSection";
+import type { CustomSettingsSection } from "../../types";
+
+interface CustomSettingsListProps {
+    customSections?: CustomSettingsSection[];
+}
+
+export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
+    customSections = [],
+}) => {
+    const sortedSections = useMemo(() => {
+        return Array.from(customSections)
+            .sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+    }, [customSections]);
+
+    if (!sortedSections.length) return null;
+
+    return (
+        <>
+            {sortedSections.map((section, index) => (
+                <SettingsSection
+                    key={section.id || `custom-${index}`}
+                    title={section.title}
+                >
+                    {section.content}
+                </SettingsSection>
+            ))}
+        </>
+    );
+};

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { AppearanceSection } from "../../../../domains/appearance/presentation/components/AppearanceSection";
+import { LanguageSection } from "@umituz/react-native-localization";
+import { NotificationsSection } from "@umituz/react-native-notifications";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { NormalizedConfig } from "../../utils/normalizeConfig";
+
+interface FeatureSettingsSectionProps {
+    normalizedConfig: NormalizedConfig;
+    features: any;
+}
+
+export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
+    normalizedConfig,
+    features,
+}) => {
+    const { t } = useLocalization();
+
+    return (
+        <>
+            {features.appearance && (
+                <AppearanceSection
+                    config={{
+                        ...normalizedConfig.appearance.config,
+                        title: t("settings.appearance.title"),
+                        description: t("settings.appearance.description"),
+                    }}
+                    sectionTitle={t("settings.appearance.title")}
+                />
+            )}
+
+            {features.language && (
+                <LanguageSection
+                    config={{
+                        ...normalizedConfig.language.config,
+                        title: t("settings.languageSelection.title"),
+                        description:
+                            normalizedConfig.language.config?.description ||
+                            t("settings.languageSelection.description"),
+                    }}
+                />
+            )}
+
+            {features.notifications && (
+                <NotificationsSection
+                    config={{
+                        ...normalizedConfig.notifications.config,
+                        title: t("settings.notifications.title"),
+                        description: t("settings.notifications.description"),
+                    }}
+                />
+            )}
+        </>
+    );
+};

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { AboutSection } from "../../../../domains/about/presentation/components/AboutSection";
+import { LegalSection } from "../../../../domains/legal/presentation/components/LegalSection";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { NormalizedConfig } from "../../utils/normalizeConfig";
+
+interface IdentitySettingsSectionProps {
+    normalizedConfig: NormalizedConfig;
+    features: any;
+}
+
+export const IdentitySettingsSection: React.FC<IdentitySettingsSectionProps> = ({
+    normalizedConfig,
+    features,
+}) => {
+    const { t } = useLocalization();
+
+    return (
+        <>
+            {features.about && (
+                <AboutSection
+                    config={{
+                        ...normalizedConfig.about.config,
+                        title: t("settings.about.title"),
+                        description: t("settings.about.description"),
+                    }}
+                    sectionTitle={t("settings.about.title")}
+                />
+            )}
+
+            {features.legal && (
+                <LegalSection
+                    config={{
+                        ...normalizedConfig.legal.config,
+                        title: t("settings.legal.title"),
+                        description: t("settings.legal.description"),
+                    }}
+                    sectionTitle={t("settings.legal.title")}
+                />
+            )}
+        </>
+    );
+};

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { ProfileSection } from "@umituz/react-native-auth";
+import { useLocalization } from "@umituz/react-native-localization";
+
+export interface ProfileSectionLoaderProps {
+    userProfile?: {
+        displayName?: string;
+        userId?: string;
+        isAnonymous?: boolean;
+        avatarUrl?: string;
+        accountSettingsRoute?: string;
+        onPress?: () => void;
+    };
+}
+
+
+export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = ({ userProfile }) => {
+    const { t } = useLocalization();
+
+    if (!userProfile) return null;
+
+    return (
+        <View style={styles.profileContainer}>
+            <ProfileSection
+                profile={{
+                    displayName: userProfile.displayName || "",
+                    userId: userProfile.userId,
+                    isAnonymous: userProfile.isAnonymous ?? true,
+                    avatarUrl: userProfile.avatarUrl,
+                    accountSettingsRoute: userProfile.accountSettingsRoute,
+                }}
+                onPress={userProfile.onPress}
+                onSignIn={userProfile.onPress}
+                signInText={t("auth.signIn")}
+                anonymousText={t("settings.profile.anonymousName")}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    profileContainer: {
+        marginBottom: 32,
+        paddingHorizontal: 0,
+    },
+});

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

@@ -0,0 +1,84 @@
+import React from "react";
+import { useLocalization } from "@umituz/react-native-localization";
+import { SupportSection } from "../../../../domains/feedback/presentation/components/SupportSection";
+import { FAQSection } from "../../../../domains/faqs/presentation/components/FAQSection";
+import { SettingsSection } from "../../../components/SettingsSection";
+import { SettingItem } from "../../../components/SettingItem";
+
+interface SupportSettingsSectionProps {
+    features: any;
+    normalizedConfig: any;
+}
+
+export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
+    features,
+    normalizedConfig,
+}) => {
+    const { t } = useLocalization();
+
+    if (!(features.feedback || features.rating || features.faqs)) return null;
+
+    return (
+        <SettingsSection title={t("settings.support.title")}>
+            {(features.feedback || features.rating) && (
+                <SupportSection
+                    renderSection={(props: any) => <>{props.children}</>}
+                    renderItem={(props: any) => <SettingItem {...props} />}
+                    feedbackConfig={{
+                        enabled: features.feedback,
+                        config: {
+                            ...normalizedConfig.feedback.config,
+                            title: normalizedConfig.feedback.config?.title || t("settings.feedback.title"),
+                            description: normalizedConfig.feedback.config?.description || t("settings.feedback.description"),
+                        }
+                    }}
+                    ratingConfig={{
+                        enabled: features.rating,
+                        config: {
+                            ...normalizedConfig.rating.config,
+                            title: normalizedConfig.rating.config?.title || t("settings.rating.title"),
+                            description: normalizedConfig.rating.config?.description || t("settings.rating.description"),
+                        }
+                    }}
+                    feedbackModalTexts={{
+                        title: t("settings.feedback.modal.title"),
+                        ratingLabel: t("settings.feedback.modal.ratingLabel"),
+                        descriptionPlaceholder: t("settings.feedback.modal.descriptionPlaceholder"),
+                        submitButton: t("settings.feedback.modal.submitButton"),
+                        submittingButton: t("settings.feedback.modal.submittingButton"),
+                        feedbackTypes: [
+                            { type: 'general', label: t("settings.feedback.types.general") },
+                            { type: 'bug_report', label: t("settings.feedback.types.bugReport") },
+                            { type: 'feature_request', label: t("settings.feedback.types.featureRequest") },
+                            { type: 'improvement', label: t("settings.feedback.types.improvement") },
+                            { type: 'other', label: t("settings.feedback.types.other") },
+                        ],
+                        defaultTitle: (type) => {
+                            const titles: Record<string, string> = {
+                                general: t("settings.feedback.types.general"),
+                                bug_report: t("settings.feedback.types.bugReport"),
+                                feature_request: t("settings.feedback.types.featureRequest"),
+                                improvement: t("settings.feedback.types.improvement"),
+                                other: t("settings.feedback.types.other"),
+                            };
+                            return titles[type] || type;
+                        },
+                    }}
+                />
+            )}
+
+            {features.faqs && (
+                <FAQSection
+                    renderSection={(props: any) => <>{props.children}</>}
+                    renderItem={(props: any) => <SettingItem {...props} />}
+                    config={{
+                        enabled: features.faqs,
+                        ...normalizedConfig.faqs.config,
+                        title: normalizedConfig.faqs.config?.title || t("settings.faqs.title"),
+                        description: normalizedConfig.faqs.config?.description || t("settings.faqs.description"),
+                    }}
+                />
+            )}
+        </SettingsSection>
+    );
+};

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

@@ -6,20 +6,6 @@
 import { useMemo } from "react";
 import type { NormalizedConfig } from "../utils/normalizeConfig";
 
-// Optional notification service
-let notificationService: {
-  hasPermissions?: () => Promise<boolean>;
-  requestPermissions?: () => Promise<void>;
-} | null = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const module = require("@umituz/react-native-notifications");
-  if (module?.notificationService && typeof module.notificationService === 'object') {
-    notificationService = module.notificationService;
-  }
-} catch {
-  // Package not available
-}
 
 /**
  * Check if navigation screen exists
@@ -75,8 +61,7 @@ export function useFeatureDetection(
       faqs,
     } = normalizedConfig;
 
-    const notificationServiceAvailable =
-      options?.notificationServiceAvailable ?? notificationService !== null;
+    const notificationServiceAvailable = !!options?.notificationServiceAvailable;
 
     return {
       appearance:

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

@@ -248,3 +248,21 @@ export interface RatingConfig {
   /** Custom handler for rating action (e.g. open store review) */
   onRate?: () => void;
 }
+
+/**
+ * Cloud Sync Settings Configuration
+ */
+export interface CloudSyncConfig {
+  /** Enable cloud sync feature */
+  enabled?: FeatureVisibility;
+  /** Custom title for the sync section */
+  title?: string;
+  /** Custom description for the sync toggle */
+  description?: string;
+  /** Custom icon name (Ionicons) */
+  icon?: string;
+  /** Custom section title for grouping */
+  sectionTitle?: string;
+  /** Firestore collection name */
+  collectionName?: string;
+}

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

@@ -16,6 +16,7 @@ import type {
   FeedbackConfig,
   RatingConfig,
   FAQConfig,
+  CloudSyncConfig,
 } from "./FeatureConfig";
 
 /**
@@ -115,6 +116,12 @@ export interface SettingsConfig {
    */
   faqs?: FeatureVisibility | FAQConfig;
 
+  /**
+   * Cloud sync settings configuration
+   * @default false
+   */
+  cloudSync?: FeatureVisibility | CloudSyncConfig;
+
   /**
    * Custom empty state text when no settings are available
    */