@umituz/react-native-settings 4.17.30 → 4.17.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.17.30",
+  "version": "4.17.32",
   "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/faqs/presentation/screens/FAQScreen.tsx

@@ -120,7 +120,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
   }
 
   return (
-    <ScreenLayout edges={['bottom']}>
+    <ScreenLayout edges={['bottom']} scrollable={false}>
       <View style={[styles.container, customStyles?.container]}>
         {renderContent()}
       </View>

package/src/index.ts

@@ -64,6 +64,7 @@ export type {
   SettingsConfig,
   CustomSettingsSection,
   SubscriptionConfig,
+  SubscriptionSettingsItemConfig,
 } from './presentation/screens/types';
 
 // =============================================================================
@@ -87,6 +88,9 @@ export type { StorageClearSettingProps } from './presentation/components/Storage
 export { DevSettingsSection } from './presentation/components/DevSettingsSection';
 export type { DevSettingsProps } from './presentation/components/DevSettingsSection';
 
+export { SubscriptionSettingsItem } from './presentation/screens/components/sections/SubscriptionSettingsItem';
+export type { SubscriptionSettingsItemProps } from './presentation/screens/components/sections/SubscriptionSettingsItem';
+
 // =============================================================================
 // DOMAIN EXPORTS - Consolidated Features
 // =============================================================================

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

@@ -3,53 +3,66 @@ import { AppearanceSection } from "../../../../domains/appearance/presentation/c
 import { LanguageSection } from "@umituz/react-native-localization";
 import { NotificationsSection } from "@umituz/react-native-notifications";
 import { useLocalization } from "@umituz/react-native-localization";
+import { SubscriptionSettingsItem } from "./SubscriptionSettingsItem";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
 
 interface FeatureSettingsSectionProps {
-    normalizedConfig: NormalizedConfig;
-    features: any;
+  normalizedConfig: NormalizedConfig;
+  features: {
+    appearance: boolean;
+    language: boolean;
+    notifications: boolean;
+    subscription: boolean;
+  };
 }
 
 export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
-    normalizedConfig,
-    features,
+  normalizedConfig,
+  features,
 }) => {
-    const { t } = useLocalization();
+  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")}
-                />
-            )}
+  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.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.notifications && (
+        <NotificationsSection
+          config={{
+            ...normalizedConfig.notifications.config,
+            title: t("settings.notifications.title"),
+            description: t("settings.notifications.description"),
+          }}
+        />
+      )}
+
+      {features.subscription && normalizedConfig.subscription.config?.settingsItem && (
+        <SubscriptionSettingsItem
+          config={normalizedConfig.subscription.config.settingsItem}
+          sectionTitle={t("settings.subscription.title")}
+        />
+      )}
+    </>
+  );
 };

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

@@ -0,0 +1,157 @@
+/**
+ * Subscription Settings Item
+ * Settings-style item for subscription/premium status display
+ * Follows same visual pattern as other settings items
+ */
+
+import React from "react";
+import { View, Pressable, StyleSheet } from "react-native";
+import {
+  useResponsiveDesignTokens,
+  AtomicIcon,
+  AtomicText,
+} from "@umituz/react-native-design-system";
+
+export interface SubscriptionSettingsItemConfig {
+  title: string;
+  description?: string;
+  isPremium: boolean;
+  statusLabel: string;
+  icon?: string;
+  onPress?: () => void;
+}
+
+export interface SubscriptionSettingsItemProps {
+  config: SubscriptionSettingsItemConfig;
+  sectionTitle?: string;
+}
+
+export const SubscriptionSettingsItem: React.FC<SubscriptionSettingsItemProps> = ({
+  config,
+  sectionTitle,
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  const colors = tokens.colors;
+
+  const { title, description, isPremium, statusLabel, icon, onPress } = config;
+  const displaySectionTitle = sectionTitle || title;
+
+  if (!title) return null;
+
+  return (
+    <View style={[styles.sectionContainer, { backgroundColor: colors.surface }]}>
+      {!!displaySectionTitle && (
+        <View style={styles.headerContainer}>
+          <AtomicText type="titleMedium" color="primary">
+            {displaySectionTitle}
+          </AtomicText>
+        </View>
+      )}
+      <Pressable
+        style={({ pressed }) => [
+          styles.itemContainer,
+          { backgroundColor: pressed ? `${colors.primary}08` : "transparent" },
+        ]}
+        onPress={onPress}
+      >
+        <View style={styles.content}>
+          <View
+            style={[
+              styles.iconContainer,
+              { backgroundColor: isPremium ? `${colors.primary}15` : `${colors.textTertiary}15` },
+            ]}
+          >
+            <AtomicIcon
+              name={icon || "diamond"}
+              size="lg"
+              color={isPremium ? "primary" : "secondary"}
+            />
+          </View>
+          <View style={styles.textContainer}>
+            <View style={styles.titleRow}>
+              <AtomicText
+                type="bodyLarge"
+                color="primary"
+                numberOfLines={1}
+                style={styles.title}
+              >
+                {title}
+              </AtomicText>
+              <View
+                style={[
+                  styles.statusBadge,
+                  { backgroundColor: isPremium ? colors.success : colors.textTertiary },
+                ]}
+              >
+                <AtomicText type="labelSmall" style={styles.statusText}>
+                  {statusLabel}
+                </AtomicText>
+              </View>
+            </View>
+            {!!description && (
+              <AtomicText type="bodyMedium" color="secondary" numberOfLines={2}>
+                {description}
+              </AtomicText>
+            )}
+          </View>
+          <AtomicIcon name="chevron-forward" size="md" color="secondary" />
+        </View>
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sectionContainer: {
+    marginBottom: 16,
+    borderRadius: 12,
+    overflow: "hidden",
+  },
+  headerContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+  itemContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    minHeight: 72,
+  },
+  content: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 16,
+  },
+  textContainer: {
+    flex: 1,
+    marginRight: 8,
+  },
+  titleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4,
+  },
+  title: {
+    flex: 1,
+  },
+  statusBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+    marginLeft: 8,
+  },
+  statusText: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+  },
+});

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

@@ -110,7 +110,8 @@ export function useFeatureDetection(
       userProfile: userProfile.enabled,
       subscription:
         subscription.enabled &&
-        subscription.config?.sectionConfig !== undefined,
+        (subscription.config?.settingsItem !== undefined ||
+          subscription.config?.sectionConfig !== undefined),
       feedback: feedback.enabled,
       rating: rating.enabled,
       faqs: faqs.enabled,

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

@@ -149,22 +149,29 @@ export interface UserProfileConfig {
   accountSettingsRoute?: string;
 }
 
+/**
+ * Subscription Settings Item Config
+ * Simplified config for settings list item display
+ */
+export interface SubscriptionSettingsItemConfig {
+  title: string;
+  description?: string;
+  isPremium: boolean;
+  statusLabel: string;
+  icon?: string;
+  onPress?: () => void;
+}
+
 /**
  * Subscription Settings Configuration
- * App must provide all data via sectionConfig (no internal fetch)
+ * App must provide all data via props (no internal fetch)
  */
 export interface SubscriptionConfig {
   /** Show subscription section */
   enabled?: FeatureVisibility;
-  /** Custom subscription title */
-  title?: string;
-  /** Custom subscription description */
-  description?: string;
-  /** Custom icon name (Ionicons) */
-  icon?: string;
-  /** Custom section title for grouping */
-  sectionTitle?: string;
-  /** Section configuration (app provides all data) */
+  /** Settings item configuration (for settings list display) */
+  settingsItem?: SubscriptionSettingsItemConfig;
+  /** Detail section configuration (for detail screen) */
   sectionConfig?: {
     statusType: "active" | "expired" | "none";
     isPremium: boolean;

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

@@ -13,6 +13,7 @@ export type {
   DisclaimerConfig,
   UserProfileConfig,
   SubscriptionConfig,
+  SubscriptionSettingsItemConfig,
   FeedbackConfig,
   RatingConfig,
   FAQConfig,