@umituz/react-native-settings 4.20.16 → 4.20.18

package/package.json

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

package/src/domains/appearance/presentation/components/ThemeModeSection.tsx

@@ -15,7 +15,8 @@ export interface ThemeOptionConfig {
   title: string;
   subtitle?: string;
   description?: string;
-  features: string[];
+  features?: string[];
+  featuresTitle?: string;
 }
 
 export interface ThemeModeSectionProps {
@@ -58,9 +59,10 @@ export const ThemeModeSection: React.FC<ThemeModeSectionProps> = ({
         key={theme.mode}
         mode={theme.mode}
         title={theme.title}
-        subtitle={theme.subtitle || ""}
-        description={theme.description || ""}
+        subtitle={theme.subtitle}
+        description={theme.description}
         features={theme.features}
+        featuresTitle={theme.featuresTitle}
         isSelected={themeMode === theme.mode}
         onSelect={() => handleThemeSelect(theme.mode)}
       />

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -64,41 +64,23 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   const themeSectionMemo = useMemo(() => {
     if (!showThemeSection) return null;
 
-    const defaultLightMode: ThemeOptionConfig = {
-      mode: "light",
-      title: "Light Mode",
-      subtitle: "Bright and clean",
-      description: "Perfect for daytime use with vibrant colors.",
-      features: ["Bright colors", "High contrast", "Easy on eyes during day"],
-    };
-
-    const defaultDarkMode: ThemeOptionConfig = {
-      mode: "dark",
-      title: "Dark Mode",
-      subtitle: "Easy on eyes",
-      description: "Ideal for low-light environments.",
-      features: ["Reduced eye strain", "Better battery life", "Comfortable at night"],
-    };
-
     const themes: ThemeOptionConfig[] = [
-      texts?.lightMode
-        ? {
-            mode: "light",
-            title: texts.lightMode.title,
-            subtitle: texts.lightMode.subtitle,
-            description: texts.lightMode.description,
-            features: texts.lightMode.features,
-          }
-        : defaultLightMode,
-      texts?.darkMode
-        ? {
-            mode: "dark",
-            title: texts.darkMode.title,
-            subtitle: texts.darkMode.subtitle,
-            description: texts.darkMode.description,
-            features: texts.darkMode.features,
-          }
-        : defaultDarkMode,
+      {
+        mode: "light",
+        title: texts?.lightMode?.title ?? "settings.themeMode.light.title",
+        subtitle: texts?.lightMode?.subtitle,
+        description: texts?.lightMode?.description,
+        features: texts?.lightMode?.features,
+        featuresTitle: texts?.featuresSectionTitle,
+      },
+      {
+        mode: "dark",
+        title: texts?.darkMode?.title ?? "settings.themeMode.dark.title",
+        subtitle: texts?.darkMode?.subtitle,
+        description: texts?.darkMode?.description,
+        features: texts?.darkMode?.features,
+        featuresTitle: texts?.featuresSectionTitle,
+      },
     ];
 
     return (
@@ -106,7 +88,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
         tokens={tokens}
         themeMode={themeMode}
         onThemeSelect={handleThemeSelect}
-        title={texts?.themeSectionTitle ?? "Theme Mode"}
+        title={texts?.themeSectionTitle}
         description={texts?.themeSectionDescription}
         themes={themes}
       />
@@ -120,6 +102,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
     texts?.themeSectionDescription,
     texts?.lightMode,
     texts?.darkMode,
+    texts?.featuresSectionTitle,
   ]);
 
   const colorsSectionMemo = useMemo(() => {

package/src/domains/appearance/types/index.ts

@@ -44,6 +44,7 @@ export interface AppearanceTexts {
   subtitle?: string;
   themeSectionTitle?: string;
   themeSectionDescription?: string;
+  featuresSectionTitle?: string;
   colorsSectionTitle?: string;
   colorsSectionDescription?: string;
   previewSectionTitle?: string;

package/src/domains/feedback/presentation/components/SupportSection.tsx

@@ -15,6 +15,7 @@ export interface FeedbackConfig {
     description?: string;
     initialType?: FeedbackType;
     onSubmit?: (data: { type: any; rating: number; description: string; title: string }) => Promise<void>;
+    onPress?: () => void;
 }
 
 export interface RatingConfig {

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

@@ -1,10 +1,7 @@
 import React from "react";
-import {
-  ListItem,
-  AtomicBadge,
-} from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
-import { SettingsSection } from "../../../components/SettingsSection";
+import type { IconName } from "@umituz/react-native-design-system";
+import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { SubscriptionConfig } from "../../types";
 
 interface SubscriptionSettingsSectionProps {
@@ -19,13 +16,12 @@ export const SubscriptionSettingsSection: React.FC<SubscriptionSettingsSectionPr
   if (!config) return null;
 
   return (
-    <SettingsSection title={config.sectionTitle || t("settings.sections.subscription")}>
-      <ListItem
-        title={config.title || t("settings.subscription.title")}
-        subtitle={config.description || t("settings.subscription.description")}
-        leftIcon={config.icon || "star"}
-        onPress={config.onPress}
-      />
-    </SettingsSection>
+    <SettingsItemCard
+      title={config.title || t("settings.subscription.title")}
+      description={config.description || t("settings.subscription.description")}
+      icon={(config.icon || "star") as IconName}
+      onPress={config.onPress || (() => {})}
+      sectionTitle={config.sectionTitle || t("settings.sections.subscription")}
+    />
   );
 };