@umituz/react-native-settings 4.21.18 → 4.21.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.21.18",
+  "version": "4.21.19",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/screens/SettingsScreen.tsx

@@ -51,6 +51,8 @@ export interface SettingsScreenProps {
   };
   /** Dev settings (only shown in __DEV__ mode) */
   devSettings?: DevSettingsProps;
+  /** Gamification configuration */
+  gamificationConfig?: import("../../domains/gamification").GamificationSettingsConfig;
   /** Show header (default: true) */
   showHeader?: boolean;
 }
@@ -68,6 +70,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   onClose,
   featureOptions,
   devSettings,
+  gamificationConfig,
 }) => {
   const navigation = useNavigation();
   const tokens = useAppDesignTokens();
@@ -94,6 +97,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           customSections={customSections}
           showCloseButton={showCloseButton}
           devSettings={devSettings}
+          gamificationConfig={gamificationConfig}
         />
       </SettingsErrorBoundary>
     </ScreenLayout>

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

@@ -0,0 +1,48 @@
+import React from "react";
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from "@react-navigation/native";
+import { SettingsItemCard } from "../../components/SettingsItemCard";
+import type { IconName } from "@umituz/react-native-design-system";
+import { useGamification } from "../../../domains/gamification";
+
+export interface GamificationSettingsItemProps {
+  config: any;
+  gamificationConfig?: any;
+  t: (key: string) => string;
+}
+
+export const GamificationSettingsItem: React.FC<GamificationSettingsItemProps> = ({ 
+  config, 
+  gamificationConfig, 
+  t 
+}) => {
+  const navigation = useNavigation();
+  const { level } = useGamification(gamificationConfig);
+  
+  const handlePress = () => {
+    if (config.route) {
+      navigation.navigate(config.route as never);
+    } else {
+      navigation.navigate("Gamification" as never);
+    }
+  };
+  
+  const icon = (config.icon || "trophy-outline") as IconName;
+  const title = config.title || t("settings.gamification.title");
+  
+  // Dynamic description showing current level and points
+  const description = config.description || 
+    t("settings.gamification.description")
+      .replace("{level}", level.currentLevel.toString())
+      .replace("{points}", level.currentPoints.toString());
+
+  return (
+    <SettingsItemCard
+      title={title}
+      description={description}
+      icon={icon}
+      onPress={handlePress}
+      sectionTitle={config.sectionTitle}
+    />
+  );
+};

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

@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
-import { useNavigation } from "@react-navigation/native";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
 import { SettingsSection } from "../../components/SettingsSection";
@@ -10,49 +9,14 @@ import { ProfileSectionLoader } from "./sections/ProfileSectionLoader";
 import { FeatureSettingsSection } from "./sections/FeatureSettingsSection";
 import { IdentitySettingsSection } from "./sections/IdentitySettingsSection";
 import { SupportSettingsSection } from "./sections/SupportSettingsSection";
-import { SettingsItemCard } from "../../components/SettingsItemCard";
-import type { IconName } from "@umituz/react-native-design-system";
 import { CustomSettingsList } from "./sections/CustomSettingsList";
 import type { NormalizedConfig } from "../utils/normalizeConfig";
-import type { CustomSettingsSection, WalletConfig } from "../types";
-
-const WalletSettingsItem: React.FC<{ config: WalletConfig; t: (key: string) => string }> = ({ config, t }) => {
-  const navigation = useNavigation();
-  const handlePress = () => {
-    if (config.route) {
-      navigation.navigate(config.route as never);
-    }
-  };
-  return (
-    <SettingsItemCard
-      title={config.title || t("wallet.title")}
-      description={config.description || t("wallet.description")}
-      icon={(config.icon || "wallet") as IconName}
-      onPress={handlePress}
-      sectionTitle={config.sectionTitle}
-    />
-  );
-};
+import type { CustomSettingsSection } from "../types";
 
-const SubscriptionSettingsItem: React.FC<{ config: any; t: (key: string) => string }> = ({ config, t }) => {
-  const navigation = useNavigation();
-  const handlePress = () => {
-    if (config.route) {
-      navigation.navigate(config.route as never);
-    } else if (config.onPress) {
-      config.onPress();
-    }
-  };
-  return (
-    <SettingsItemCard
-      title={config.title || t("settings.subscription.title")}
-      description={config.description || t("settings.subscription.description")}
-      icon={(config.icon || "star") as IconName}
-      onPress={handlePress}
-      sectionTitle={config.sectionTitle}
-    />
-  );
-};
+// Extracted Item Components
+import { SubscriptionSettingsItem } from "./SubscriptionSettingsItem";
+import { WalletSettingsItem } from "./WalletSettingsItem";
+import { GamificationSettingsItem } from "./GamificationSettingsItem";
 
 interface SettingsContentProps {
   normalizedConfig: NormalizedConfig;
@@ -70,6 +34,7 @@ interface SettingsContentProps {
     faqs: boolean;
     subscription: boolean;
     wallet: boolean;
+    gamification: boolean;
   };
   showUserProfile?: boolean;
   userProfile?: any;
@@ -79,6 +44,7 @@ interface SettingsContentProps {
   customSections?: CustomSettingsSection[];
   showCloseButton?: boolean;
   devSettings?: DevSettingsProps;
+  gamificationConfig?: import("../../../domains/gamification").GamificationSettingsConfig;
 }
 
 export const SettingsContent: React.FC<SettingsContentProps> = ({
@@ -93,6 +59,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   customSections = [],
   showCloseButton = false,
   devSettings,
+  gamificationConfig,
 }) => {
   const { t } = useLocalization();
 
@@ -108,6 +75,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
     features.faqs ||
     features.subscription ||
     features.wallet ||
+    features.gamification ||
     customSections.length > 0,
     [features, customSections.length]
   );
@@ -129,6 +97,14 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         />
       )}
 
+      {features.gamification && (
+        <GamificationSettingsItem
+          config={normalizedConfig.gamification.config || {}}
+          gamificationConfig={gamificationConfig}
+          t={t}
+        />
+      )}
+
       <FeatureSettingsSection normalizedConfig={normalizedConfig} features={features} />
 
       <IdentitySettingsSection normalizedConfig={normalizedConfig} features={features} />

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

@@ -0,0 +1,30 @@
+import React from "react";
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from "@react-navigation/native";
+import { SettingsItemCard } from "../../components/SettingsItemCard";
+import type { IconName } from "@umituz/react-native-design-system";
+
+export interface SubscriptionSettingsItemProps {
+  config: any;
+  t: (key: string) => string;
+}
+
+export const SubscriptionSettingsItem: React.FC<SubscriptionSettingsItemProps> = ({ config, t }) => {
+  const navigation = useNavigation();
+  const handlePress = () => {
+    if (config.route) {
+      navigation.navigate(config.route as never);
+    } else if (config.onPress) {
+      config.onPress();
+    }
+  };
+  return (
+    <SettingsItemCard
+      title={config.title || t("settings.subscription.title")}
+      description={config.description || t("settings.subscription.description")}
+      icon={(config.icon || "star") as IconName}
+      onPress={handlePress}
+      sectionTitle={config.sectionTitle}
+    />
+  );
+};

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

@@ -0,0 +1,28 @@
+import React from "react";
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from "@react-navigation/native";
+import { SettingsItemCard } from "../../components/SettingsItemCard";
+import type { IconName } from "@umituz/react-native-design-system";
+
+export interface WalletSettingsItemProps {
+  config: any;
+  t: (key: string) => string;
+}
+
+export const WalletSettingsItem: React.FC<WalletSettingsItemProps> = ({ config, t }) => {
+  const navigation = useNavigation();
+  const handlePress = () => {
+    if (config.route) {
+      navigation.navigate(config.route as never);
+    }
+  };
+  return (
+    <SettingsItemCard
+      title={config.title || t("wallet.title")}
+      description={config.description || t("wallet.description")}
+      icon={(config.icon || "wallet") as IconName}
+      onPress={handlePress}
+      sectionTitle={config.sectionTitle}
+    />
+  );
+};

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

@@ -60,6 +60,7 @@ export function useFeatureDetection(
       faqs,
       subscription,
       wallet,
+      gamification,
     } = normalizedConfig;
 
     const notificationServiceAvailable = !!options?.notificationServiceAvailable;
@@ -114,6 +115,7 @@ export function useFeatureDetection(
       faqs: faqs.enabled,
       subscription: subscription.enabled,
       wallet: wallet.enabled,
+      gamification: gamification.enabled,
     };
   }, [normalizedConfig, navigation, options]);
 }

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

@@ -20,6 +20,7 @@ import type {
   CloudSyncConfig,
   SubscriptionConfig,
   WalletConfig,
+  GamificationConfig,
 } from "./UserFeatureConfig";
 
 /**
@@ -130,6 +131,12 @@ export interface SettingsConfig {
    */
   wallet?: FeatureVisibility | WalletConfig;
 
+  /**
+   * Gamification settings configuration
+   * @default false
+   */
+  gamification?: FeatureVisibility | GamificationConfig;
+
   /**
    * Custom empty state text when no settings are available
    */

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

@@ -139,3 +139,24 @@ export interface WalletConfig {
   /** Current balance to display */
   balance?: number;
 }
+
+/**
+ * Gamification Settings Configuration
+ */
+export interface GamificationConfig {
+  /** Show gamification section */
+  enabled?: FeatureVisibility;
+  /** Custom title for the gamification section */
+  title?: string;
+  /** Custom label for the gamification item */
+  description?: string;
+  /** Custom icon name (Ionicons) */
+  icon?: string;
+  /** Custom section title for grouping */
+  sectionTitle?: string;
+  /** Navigation route for gamification screen */
+  route?: string;
+  /** Achievements to display */
+  achievementsCount?: number;
+}
+

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

@@ -17,6 +17,7 @@ import type {
   FAQConfig,
   SubscriptionConfig,
   WalletConfig,
+  GamificationConfig,
   SettingsConfig,
 } from "../types";
 
@@ -69,6 +70,10 @@ export interface NormalizedConfig {
     enabled: boolean;
     config?: WalletConfig;
   };
+  gamification: {
+    enabled: boolean;
+    config?: GamificationConfig;
+  };
 }
 
 /**
@@ -115,5 +120,6 @@ export function normalizeSettingsConfig(
     faqs: normalizeConfigValue(config?.faqs, false),
     subscription: normalizeConfigValue(config?.subscription, false),
     wallet: normalizeConfigValue(config?.wallet, false),
+    gamification: normalizeConfigValue(config?.gamification, false),
   };
 }