@umituz/react-native-subscription 2.12.50 → 2.12.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.12.50",
+  "version": "2.12.52",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -109,6 +109,18 @@ export {
   type SubscriptionSectionConfig,
 } from "./presentation/components/sections/SubscriptionSection";
 
+// =============================================================================
+// PRESENTATION LAYER - Subscription Settings Config Hook
+// =============================================================================
+
+export {
+  useSubscriptionSettingsConfig,
+  type SubscriptionSettingsConfig,
+  type SubscriptionSettingsItemConfig,
+  type SubscriptionSettingsTranslations,
+  type UseSubscriptionSettingsConfigParams,
+} from "./presentation/hooks/useSubscriptionSettingsConfig";
+
 // =============================================================================
 // PRESENTATION LAYER - Subscription Detail Screen
 // =============================================================================

package/src/presentation/hooks/useSubscriptionSettingsConfig.ts

@@ -0,0 +1,173 @@
+/**
+ * useSubscriptionSettingsConfig Hook
+ * Returns ready-to-use config for settings screens
+ * Package-driven: all logic handled internally
+ */
+
+import { useMemo, useCallback } from "react";
+import { Linking } from "react-native";
+import { useCredits } from "./useCredits";
+import { useCustomerInfo } from "../../revenuecat/presentation/hooks/useCustomerInfo";
+import { usePaywallVisibility } from "./usePaywallVisibility";
+import {
+  convertPurchasedAt,
+  formatDateForLocale,
+  calculateDaysRemaining,
+} from "../utils/subscriptionDateUtils";
+import type {
+  SubscriptionSettingsConfig,
+  SubscriptionStatusType,
+  UseSubscriptionSettingsConfigParams,
+} from "../types/SubscriptionSettingsTypes";
+
+// Re-export types for convenience
+export type {
+  SubscriptionSettingsConfig,
+  SubscriptionSettingsItemConfig,
+  SubscriptionSettingsTranslations,
+  UseSubscriptionSettingsConfigParams,
+} from "../types/SubscriptionSettingsTypes";
+
+/**
+ * Hook that returns ready-to-use subscription config for settings
+ * All business logic handled internally
+ */
+export const useSubscriptionSettingsConfig = (
+  params: UseSubscriptionSettingsConfigParams
+): SubscriptionSettingsConfig => {
+  const {
+    userId,
+    isAnonymous = false,
+    currentLanguage = "en",
+    translations,
+    getCreditLimit,
+  } = params;
+
+  // Internal hooks
+  const { credits } = useCredits({ userId, enabled: !!userId });
+  const { customerInfo } = useCustomerInfo();
+  const { openPaywall } = usePaywallVisibility();
+
+  // Premium status from credits
+  const isPremium = credits !== null;
+
+  // RevenueCat entitlement info
+  const premiumEntitlement = customerInfo?.entitlements.active["premium"];
+  const expiresAtIso = premiumEntitlement?.expirationDate || null;
+  const willRenew = premiumEntitlement?.willRenew || false;
+  const purchasedAtIso = convertPurchasedAt(credits?.purchasedAt);
+
+  // Formatted dates
+  const formattedExpirationDate = useMemo(
+    () => formatDateForLocale(expiresAtIso, currentLanguage),
+    [expiresAtIso, currentLanguage]
+  );
+
+  const formattedPurchaseDate = useMemo(
+    () => formatDateForLocale(purchasedAtIso, currentLanguage),
+    [purchasedAtIso, currentLanguage]
+  );
+
+  // Days remaining calculation
+  const daysRemaining = useMemo(
+    () => calculateDaysRemaining(expiresAtIso),
+    [expiresAtIso]
+  );
+
+  // Subscription press handler
+  const handleSubscriptionPress = useCallback(() => {
+    if (isPremium) {
+      Linking.openURL("https://apps.apple.com/account/subscriptions");
+    } else {
+      openPaywall();
+    }
+  }, [isPremium, openPaywall]);
+
+  // Status type
+  const statusType: SubscriptionStatusType = isPremium ? "active" : "none";
+
+  // Credits array
+  const creditsArray = useMemo(() => {
+    if (!credits) return [];
+    const total = getCreditLimit
+      ? getCreditLimit(credits.imageCredits)
+      : credits.imageCredits;
+    return [
+      {
+        id: "image",
+        label: translations.imageCreditsLabel || "Image Credits",
+        current: credits.imageCredits,
+        total,
+      },
+    ];
+  }, [credits, getCreditLimit, translations.imageCreditsLabel]);
+
+  // Build config
+  const config = useMemo(
+    (): SubscriptionSettingsConfig => ({
+      enabled: true,
+      settingsItem: {
+        title: translations.title,
+        description: translations.description,
+        isPremium,
+        statusLabel: isPremium
+          ? translations.statusActive
+          : translations.statusFree,
+        icon: "diamond",
+        onPress: handleSubscriptionPress,
+      },
+      sectionConfig: {
+        statusType,
+        isPremium,
+        expirationDate: formattedExpirationDate,
+        purchaseDate: formattedPurchaseDate,
+        isLifetime: isPremium && !expiresAtIso,
+        daysRemaining,
+        willRenew,
+        credits: creditsArray,
+        translations: {
+          title: translations.title,
+          statusLabel: translations.statusLabel,
+          statusActive: translations.statusActive,
+          statusExpired: translations.statusExpired,
+          statusFree: translations.statusFree,
+          statusCanceled: translations.statusCanceled,
+          expiresLabel: translations.expiresLabel,
+          purchasedLabel: translations.purchasedLabel,
+          lifetimeLabel: translations.lifetimeLabel,
+          creditsTitle: translations.creditsTitle,
+          remainingLabel: translations.remainingLabel,
+          manageButton: translations.manageButton,
+          upgradeButton: translations.upgradeButton,
+        },
+        onManageSubscription: handleSubscriptionPress,
+        onUpgrade: openPaywall,
+      },
+    }),
+    [
+      translations,
+      isPremium,
+      statusType,
+      formattedExpirationDate,
+      formattedPurchaseDate,
+      expiresAtIso,
+      daysRemaining,
+      willRenew,
+      creditsArray,
+      handleSubscriptionPress,
+      openPaywall,
+    ]
+  );
+
+  if (__DEV__) {
+    console.log("[useSubscriptionSettingsConfig]", {
+      enabled: config.enabled,
+      isPremium,
+      isAnonymous,
+      hasCredits: !!credits,
+      userId: userId || "ANONYMOUS",
+    });
+  }
+
+  return config;
+};

package/src/presentation/screens/SubscriptionDetailScreen.tsx

@@ -5,8 +5,8 @@
  */
 
 import React from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { StyleSheet } from "react-native";
+import { useAppDesignTokens, ScreenLayout } from "@umituz/react-native-design-system";
 import { SubscriptionHeader } from "./components/SubscriptionHeader";
 import { CreditsList } from "./components/CreditsList";
 import { SubscriptionActions } from "./components/SubscriptionActions";
@@ -39,6 +39,7 @@ export interface SubscriptionDetailConfig {
     purchaseDate?: string | null;
     isLifetime?: boolean;
     daysRemaining?: number | null;
+    willRenew?: boolean;
     credits?: CreditInfo[];
     translations: SubscriptionDetailTranslations;
     onManageSubscription?: () => void;
@@ -60,57 +61,55 @@ export const SubscriptionDetailScreen: React.FC<
     const showCredits = config.credits && config.credits.length > 0;
 
     return (
-        <View style={{ flex: 1 }}>
-            <ScrollView
-                style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-                contentContainerStyle={styles.content}
-            >
-                <SubscriptionHeader
-                    statusType={config.statusType}
-                    isPremium={config.isPremium}
-                    isLifetime={config.isLifetime}
-                    expirationDate={config.expirationDate}
-                    purchaseDate={config.purchaseDate}
-                    daysRemaining={config.daysRemaining}
-                    translations={config.translations}
-                />
-
-                {showCredits && (
-                    <CreditsList
-                        credits={config.credits!}
-                        title={
-                            config.translations.usageTitle || config.translations.creditsTitle
-                        }
-                        description={config.translations.creditsResetInfo}
-                        remainingLabel={config.translations.remainingLabel}
+        <ScreenLayout
+            scrollable={true}
+            edges={['bottom']}
+            backgroundColor={tokens.colors.backgroundPrimary}
+            contentContainerStyle={styles.content}
+            footer={
+                config.devTools ? (
+                    <DevTestSection
+                        actions={config.devTools.actions}
+                        title={config.devTools.title}
                     />
-                )}
+                ) : undefined
+            }
+        >
+            <SubscriptionHeader
+                statusType={config.statusType}
+                isPremium={config.isPremium}
+                isLifetime={config.isLifetime}
+                expirationDate={config.expirationDate}
+                purchaseDate={config.purchaseDate}
+                daysRemaining={config.daysRemaining}
+                translations={config.translations}
+            />
 
-                <SubscriptionActions
-                    isPremium={config.isPremium}
-                    manageButtonLabel={config.translations.manageButton}
-                    upgradeButtonLabel={config.translations.upgradeButton}
-                    onManage={config.onManageSubscription}
-                    onUpgrade={config.onUpgrade}
-                />
-            </ScrollView>
-
-            {config.devTools && (
-                <DevTestSection
-                    actions={config.devTools.actions}
-                    title={config.devTools.title}
+            {showCredits && (
+                <CreditsList
+                    credits={config.credits!}
+                    title={
+                        config.translations.usageTitle || config.translations.creditsTitle
+                    }
+                    description={config.translations.creditsResetInfo}
+                    remainingLabel={config.translations.remainingLabel}
                 />
             )}
-        </View>
+
+            <SubscriptionActions
+                isPremium={config.isPremium}
+                manageButtonLabel={config.translations.manageButton}
+                upgradeButtonLabel={config.translations.upgradeButton}
+                onManage={config.onManageSubscription}
+                onUpgrade={config.onUpgrade}
+            />
+        </ScreenLayout>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        padding: 16,
-        gap: 16,
-    },
+  content: {
+    padding: 16,
+    gap: 16,
+  },
 });

package/src/presentation/types/SubscriptionSettingsTypes.ts

@@ -0,0 +1,67 @@
+/**
+ * Subscription Settings Types
+ * Type definitions for subscription settings configuration
+ */
+
+import type { SubscriptionDetailConfig } from "../screens/SubscriptionDetailScreen";
+
+/** Status type for subscription state */
+export type SubscriptionStatusType = "none" | "active" | "expired";
+
+/** Configuration for settings list item */
+export interface SubscriptionSettingsItemConfig {
+  title: string;
+  description?: string;
+  isPremium: boolean;
+  statusLabel: string;
+  icon?: string;
+  onPress?: () => void;
+}
+
+/** Complete subscription settings configuration */
+export interface SubscriptionSettingsConfig {
+  /** Whether subscription section should be shown */
+  enabled: boolean;
+  /** Config for settings list item */
+  settingsItem: SubscriptionSettingsItemConfig;
+  /** Config for detail screen */
+  sectionConfig: SubscriptionDetailConfig;
+}
+
+/** Translation strings for subscription settings */
+export interface SubscriptionSettingsTranslations {
+  /** Settings item title */
+  title: string;
+  /** Settings item description */
+  description: string;
+  /** Status labels */
+  statusActive: string;
+  statusFree: string;
+  statusExpired: string;
+  statusCanceled: string;
+  /** Detail screen translations */
+  statusLabel: string;
+  expiresLabel: string;
+  purchasedLabel: string;
+  lifetimeLabel: string;
+  creditsTitle: string;
+  remainingLabel: string;
+  manageButton: string;
+  upgradeButton: string;
+  /** Credit label (e.g., "Image Credits") */
+  imageCreditsLabel?: string;
+}
+
+/** Parameters for useSubscriptionSettingsConfig hook */
+export interface UseSubscriptionSettingsConfigParams {
+  /** User ID (required for credits lookup) */
+  userId?: string;
+  /** Whether user is anonymous */
+  isAnonymous?: boolean;
+  /** Current language for date formatting */
+  currentLanguage?: string;
+  /** Translation strings */
+  translations: SubscriptionSettingsTranslations;
+  /** Credit limit calculator */
+  getCreditLimit?: (currentCredits: number) => number;
+}

package/src/presentation/utils/subscriptionDateUtils.ts

@@ -0,0 +1,60 @@
+/**
+ * Subscription Date Utilities
+ * Date formatting and calculation utilities for subscription
+ */
+
+/**
+ * Converts Firestore timestamp or Date to ISO string
+ */
+export const convertPurchasedAt = (purchasedAt: unknown): string | null => {
+  if (!purchasedAt) return null;
+
+  if (
+    typeof purchasedAt === "object" &&
+    purchasedAt !== null &&
+    "toDate" in purchasedAt
+  ) {
+    return (purchasedAt as { toDate: () => Date }).toDate().toISOString();
+  }
+
+  if (purchasedAt instanceof Date) {
+    return purchasedAt.toISOString();
+  }
+
+  return null;
+};
+
+/**
+ * Formats a date string for display
+ */
+export const formatDateForLocale = (
+  dateStr: string | null,
+  locale: string
+): string | null => {
+  if (!dateStr) return null;
+
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    }).format(new Date(dateStr));
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Calculates days remaining until expiration
+ */
+export const calculateDaysRemaining = (
+  expiresAtIso: string | null
+): number | null => {
+  if (!expiresAtIso) return null;
+
+  const end = new Date(expiresAtIso);
+  const now = new Date();
+  const diff = end.getTime() - now.getTime();
+
+  return Math.max(0, Math.ceil(diff / (1000 * 60 * 60 * 24)));
+};