@umituz/react-native-subscription 2.14.54 → 2.14.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.54",
+  "version": "2.14.55",
   "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/domains/paywall/components/PaywallContainer.tsx

@@ -0,0 +1,105 @@
+/**
+ * PaywallContainer Component
+ * Package-driven paywall that encapsulates all logic
+ * Main app only needs to add this ONE component
+ */
+
+import React, { useCallback } from "react";
+import type { PurchasesPackage } from "react-native-purchases";
+import { usePaywallVisibility } from "../../../presentation/hooks/usePaywallVisibility";
+import { useSubscriptionPackages } from "../../../revenuecat/presentation/hooks/useSubscriptionPackages";
+import { usePurchasePackage } from "../../../revenuecat/presentation/hooks/usePurchasePackage";
+import { useRestorePurchase } from "../../../revenuecat/presentation/hooks/useRestorePurchase";
+import { PaywallModal } from "./PaywallModal";
+import type { PaywallContainerProps } from "./PaywallContainer.types";
+
+declare const __DEV__: boolean;
+
+export const PaywallContainer: React.FC<PaywallContainerProps> = ({
+  userId,
+  translations,
+  mode = "subscription",
+  legalUrls,
+  features,
+  heroImage,
+  bestValueIdentifier,
+  creditsLabel,
+  onPurchaseSuccess,
+  onPurchaseError,
+}) => {
+  const { showPaywall, closePaywall } = usePaywallVisibility();
+  const { data: packages = [], isLoading } = useSubscriptionPackages(userId ?? undefined);
+  const { mutateAsync: purchasePackage } = usePurchasePackage(userId ?? undefined);
+  const { mutateAsync: restorePurchases } = useRestorePurchase(userId ?? undefined);
+
+  const handlePurchase = useCallback(
+    async (pkg: PurchasesPackage) => {
+      try {
+        if (__DEV__) {
+          console.log("[PaywallContainer] Purchase started:", pkg.identifier);
+        }
+        const result = await purchasePackage(pkg);
+        if (result.success) {
+          if (__DEV__) {
+            console.log("[PaywallContainer] Purchase successful");
+          }
+          onPurchaseSuccess?.();
+          closePaywall();
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        if (__DEV__) {
+          console.error("[PaywallContainer] Purchase failed:", message);
+        }
+        onPurchaseError?.(message);
+      }
+    },
+    [purchasePackage, closePaywall, onPurchaseSuccess, onPurchaseError],
+  );
+
+  const handleRestore = useCallback(async () => {
+    try {
+      if (__DEV__) {
+        console.log("[PaywallContainer] Restore started");
+      }
+      const result = await restorePurchases();
+      if (result.success) {
+        if (__DEV__) {
+          console.log("[PaywallContainer] Restore successful");
+        }
+        onPurchaseSuccess?.();
+        closePaywall();
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      if (__DEV__) {
+        console.error("[PaywallContainer] Restore failed:", message);
+      }
+      onPurchaseError?.(message);
+    }
+  }, [restorePurchases, closePaywall, onPurchaseSuccess, onPurchaseError]);
+
+  if (!showPaywall) {
+    return null;
+  }
+
+  return (
+    <PaywallModal
+      visible={showPaywall}
+      onClose={closePaywall}
+      mode={mode}
+      translations={translations}
+      subscriptionPackages={packages}
+      isLoading={isLoading}
+      legalUrls={legalUrls}
+      features={features ? [...features] : undefined}
+      heroImage={heroImage}
+      bestValueIdentifier={bestValueIdentifier}
+      creditsLabel={creditsLabel}
+      onSubscriptionPurchase={handlePurchase}
+      onRestore={handleRestore}
+    />
+  );
+};
+
+PaywallContainer.displayName = "PaywallContainer";

package/src/domains/paywall/components/PaywallContainer.types.ts

@@ -0,0 +1,30 @@
+/**
+ * PaywallContainer Types
+ * Minimal props for package-driven paywall rendering
+ */
+
+import type { PaywallMode, PaywallTranslations, PaywallLegalUrls, SubscriptionFeature } from "../entities";
+import type { ImageSourcePropType } from "react-native";
+
+export interface PaywallContainerProps {
+  /** User ID for subscription management */
+  readonly userId: string | null;
+  /** Paywall translations - no defaults, must be provided */
+  readonly translations: PaywallTranslations;
+  /** Paywall mode - subscription, credits, or hybrid */
+  readonly mode?: PaywallMode;
+  /** Legal URLs for privacy and terms */
+  readonly legalUrls?: PaywallLegalUrls;
+  /** Feature list to display */
+  readonly features?: readonly SubscriptionFeature[];
+  /** Hero image for paywall header */
+  readonly heroImage?: ImageSourcePropType;
+  /** Best value package identifier for badge */
+  readonly bestValueIdentifier?: string;
+  /** Credits label text */
+  readonly creditsLabel?: string;
+  /** Callback when purchase succeeds */
+  readonly onPurchaseSuccess?: () => void;
+  /** Callback when purchase fails */
+  readonly onPurchaseError?: (error: string) => void;
+}

package/src/domains/paywall/components/index.ts

@@ -2,6 +2,9 @@
  * Paywall Components Index
  */
 
+export { PaywallContainer } from "./PaywallContainer";
+export type { PaywallContainerProps } from "./PaywallContainer.types";
+
 export { PaywallModal } from "./PaywallModal";
 export type { PaywallModalProps } from "./PaywallModal";
 

package/src/index.ts

@@ -80,6 +80,8 @@ export {
 // =============================================================================
 
 export {
+  PaywallContainer,
+  type PaywallContainerProps,
   PaywallModal,
   type PaywallModalProps,
   PaywallHeader,