@umituz/react-native-subscription 2.37.130 → 2.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.37.130",
+  "version": "2.38.1",
   "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/PaywallScreen.tsx

@@ -0,0 +1,214 @@
+/**
+ * Paywall Screen Component
+ *
+ * Full-screen paywall (not modal). Use when you want the paywall
+ * to be a standalone screen instead of a modal overlay.
+ */
+
+import React, { useCallback, useEffect } from "react";
+import { View, ScrollView, TouchableOpacity, Linking, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
+import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { Image } from "expo-image";
+import { PlanCard } from "./PlanCard";
+import { paywallModalStyles as styles } from "./PaywallModal.styles";
+import { PaywallFeatures } from "./PaywallFeatures";
+import { PaywallFooter } from "./PaywallFooter";
+import { usePaywallActions } from "../hooks/usePaywallActions";
+import { PaywallScreenProps } from "./PaywallScreen.types";
+
+export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) => {
+  const {
+    onClose,
+    translations,
+    packages = [],
+    features = [],
+    legalUrls = {},
+    bestValueIdentifier,
+    creditAmounts,
+    creditsLabel,
+    heroImage,
+    onPurchase,
+    onRestore,
+    onPurchaseSuccess,
+    onPurchaseError,
+    onAuthRequired,
+    source,
+    isLoadingPackages
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  if (__DEV__) {
+    console.log("[PaywallScreen] Render:", {
+      packagesCount: packages.length,
+      isLoadingPackages,
+      source,
+    });
+  }
+
+  const { selectedPlanId, setSelectedPlanId, isProcessing, handlePurchase, handleRestore } = usePaywallActions({
+    packages,
+    onPurchase,
+    onRestore,
+    source,
+    onPurchaseSuccess,
+    onPurchaseError,
+    onAuthRequired,
+    onClose
+  });
+
+  // Auto-select first package when packages load and none is selected
+  useEffect(() => {
+    if (packages.length > 0 && !selectedPlanId) {
+      setSelectedPlanId(packages[0].product.identifier);
+    }
+  }, [packages, selectedPlanId, setSelectedPlanId]);
+
+  const handleLegalUrl = useCallback(async (url: string | undefined) => {
+    if (!url) return;
+    try {
+      if (await Linking.canOpenURL(url)) await Linking.openURL(url);
+    } catch (error) {
+      console.error('[PaywallScreen] Failed to open URL:', error instanceof Error ? error.message : String(error));
+    }
+  }, []);
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {/* Close button */}
+      <TouchableOpacity
+        onPress={onClose}
+        style={[screenStyles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary, top: Math.max(insets.top, 12) }]}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+      >
+        <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
+      </TouchableOpacity>
+
+      {/* Scrollable content */}
+      <ScrollView
+        style={screenStyles.scrollContainer}
+        contentContainerStyle={screenStyles.scroll}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Hero Image */}
+        {heroImage && (
+          <View style={styles.heroContainer}>
+            <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={0} />
+          </View>
+        )}
+
+        {/* Header */}
+        <View style={styles.header}>
+          <AtomicText
+            type="headlineMedium"
+            adjustsFontSizeToFit
+            numberOfLines={2}
+            minimumFontScale={0.75}
+            style={[styles.title, { color: tokens.colors.textPrimary }]}
+          >
+            {translations.title}
+          </AtomicText>
+          {translations.subtitle && (
+            <AtomicText
+              type="bodyMedium"
+              adjustsFontSizeToFit
+              numberOfLines={3}
+              minimumFontScale={0.8}
+              style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
+            >
+              {translations.subtitle}
+            </AtomicText>
+          )}
+        </View>
+
+        {/* Features */}
+        <PaywallFeatures features={features} />
+
+        {/* Plans */}
+        <View style={styles.plans}>
+          {isLoadingPackages ? (
+            <View style={styles.loading}>
+              <AtomicSpinner size="md" />
+              {translations.processingText && (
+                <AtomicText
+                  type="bodySmall"
+                  style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
+                >
+                  {translations.processingText}
+                </AtomicText>
+              )}
+            </View>
+          ) : packages.length === 0 ? (
+            <View style={styles.loading}>
+              <AtomicText
+                type="bodyMedium"
+                style={{ color: tokens.colors.textSecondary, textAlign: "center" }}
+              >
+                {translations.emptyText ?? "No packages available"}
+              </AtomicText>
+            </View>
+          ) : (
+            packages.map((pkg) => {
+              const pid = pkg.product.identifier;
+              const isSelected = selectedPlanId === pid;
+              const isBestValue = bestValueIdentifier === pid;
+              const credits = creditAmounts?.[pid];
+
+              return (
+                <PlanCard
+                  key={pid}
+                  package={pkg}
+                  selected={isSelected}
+                  isBestValue={isBestValue}
+                  credits={credits}
+                  creditsLabel={creditsLabel}
+                  onPress={() => setSelectedPlanId(pid)}
+                />
+              );
+            })
+          )}
+        </View>
+
+        {/* Footer - CTA and Legal */}
+        <PaywallFooter
+          selectedPlanId={selectedPlanId}
+          packages={packages}
+          isProcessing={isProcessing}
+          onPurchase={handlePurchase}
+          onRestore={handleRestore}
+          legalUrls={legalUrls}
+          translations={translations}
+          onLegalUrl={handleLegalUrl}
+        />
+      </ScrollView>
+    </View>
+  );
+});
+
+PaywallScreen.displayName = "PaywallScreen";
+
+const screenStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  closeBtn: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    zIndex: 1000,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  scrollContainer: {
+    flex: 1,
+  },
+  scroll: {
+    paddingBottom: 100,
+  },
+});

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

@@ -0,0 +1,23 @@
+import type { ImageSourcePropType } from "react-native";
+import type { PurchasesPackage } from "react-native-purchases";
+import type { SubscriptionFeature, PaywallTranslations, PaywallLegalUrls } from "../entities/types";
+import type { PurchaseSource } from "../../subscription/core/SubscriptionConstants";
+
+export interface PaywallScreenProps {
+  onClose: () => void;
+  translations: PaywallTranslations;
+  packages?: PurchasesPackage[];
+  features?: SubscriptionFeature[];
+  legalUrls?: PaywallLegalUrls;
+  bestValueIdentifier?: string;
+  creditAmounts?: Record<string, number>;
+  creditsLabel?: string;
+  heroImage?: ImageSourcePropType;
+  onPurchase?: (pkg: PurchasesPackage) => Promise<void | boolean>;
+  onRestore?: () => Promise<void | boolean>;
+  onPurchaseSuccess?: () => void;
+  onPurchaseError?: (error: Error | string) => void;
+  onAuthRequired?: () => void;
+  source?: PurchaseSource;
+  isLoadingPackages?: boolean;
+}

package/src/index.ts

@@ -61,6 +61,8 @@ export type {
   UpgradePromptConfig,
 } from "./domains/subscription/presentation/screens/SubscriptionDetailScreen.types";
 export * from "./domains/paywall/components/PaywallContainer";
+export { PaywallScreen } from "./domains/paywall/components/PaywallScreen";
+export type { PaywallScreenProps } from "./domains/paywall/components/PaywallScreen.types";
 
 export type {
   CreditType,