@umituz/react-native-subscription 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Subscription management and paywall UI for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -108,6 +108,16 @@ export {
   type SubscriptionStatusType,
 } from "./presentation/components/details/PremiumStatusBadge";
 
+// =============================================================================
+// PRESENTATION LAYER - Settings Section Component
+// =============================================================================
+
+export {
+  SubscriptionSection,
+  type SubscriptionSectionProps,
+  type SubscriptionSectionConfig,
+} from "./presentation/components/sections/SubscriptionSection";
+
 // =============================================================================
 // UTILS - Date & Price
 // =============================================================================

package/src/presentation/components/sections/SubscriptionSection.tsx

@@ -0,0 +1,65 @@
+/**
+ * Subscription Section for Settings Screen
+ * Generic component that renders subscription/premium details
+ * App passes all data via config props (credits, translations, handlers)
+ */
+
+import React from "react";
+import { View } from "react-native";
+import type { StyleProp, ViewStyle } from "react-native";
+import {
+  PremiumDetailsCard,
+  type CreditInfo,
+  type PremiumDetailsTranslations,
+} from "../details/PremiumDetailsCard";
+import type { SubscriptionStatusType } from "../details/PremiumStatusBadge";
+
+export interface SubscriptionSectionConfig {
+  /** Subscription status type */
+  statusType: SubscriptionStatusType;
+  /** Whether user has premium */
+  isPremium: boolean;
+  /** Formatted expiration date string */
+  expirationDate?: string | null;
+  /** Formatted purchase date string */
+  purchaseDate?: string | null;
+  /** Whether subscription is lifetime */
+  isLifetime?: boolean;
+  /** Days remaining until expiration */
+  daysRemaining?: number | null;
+  /** Credit info array (app-specific, passed from app) */
+  credits?: CreditInfo[];
+  /** All translations (app must provide these) */
+  translations: PremiumDetailsTranslations;
+  /** Handler for manage subscription button */
+  onManageSubscription?: () => void;
+  /** Handler for upgrade button */
+  onUpgrade?: () => void;
+}
+
+export interface SubscriptionSectionProps {
+  config: SubscriptionSectionConfig;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export const SubscriptionSection: React.FC<SubscriptionSectionProps> = ({
+  config,
+  containerStyle,
+}) => {
+  return (
+    <View style={containerStyle}>
+      <PremiumDetailsCard
+        statusType={config.statusType}
+        isPremium={config.isPremium}
+        expirationDate={config.expirationDate}
+        purchaseDate={config.purchaseDate}
+        isLifetime={config.isLifetime}
+        daysRemaining={config.daysRemaining}
+        credits={config.credits}
+        translations={config.translations}
+        onManageSubscription={config.onManageSubscription}
+        onUpgrade={config.onUpgrade}
+      />
+    </View>
+  );
+};