@umituz/react-native-subscription 2.2.8 → 2.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.2.8",
+  "version": "2.2.11",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -58,4 +58,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/presentation/components/paywall/CreditsPackageCard.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system-atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
-import type { CreditsPackage } from "../../domain/entities/CreditsPackage";
+import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
 
 interface CreditsPackageCardProps {
   package: CreditsPackage;

package/src/presentation/components/paywall/CreditsTabContent.tsx

@@ -10,7 +10,7 @@ import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
 import { CreditsPackageCard } from "./CreditsPackageCard";
 import { PaywallLegalFooter } from "./PaywallLegalFooter";
-import type { CreditsPackage } from "../../domain/entities/CreditsPackage";
+import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
 
 interface CreditsTabContentProps {
   packages: CreditsPackage[];
@@ -42,7 +42,7 @@ export const CreditsTabContent: React.FC<CreditsTabContentProps> = React.memo(
     const { t } = useLocalization();
 
     const needsCredits = requiredCredits && requiredCredits > currentCredits;
-    
+
     const displayPurchaseButtonText = purchaseButtonText ||
       t("paywall.purchase", { defaultValue: "Purchase" });
     const displayProcessingText = processingText ||

package/src/presentation/components/paywall/PaywallModal.tsx

@@ -9,13 +9,13 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { PurchasesPackage } from "react-native-purchases";
-import { usePaywall } from "../hooks/usePaywall";
+import { usePaywall } from "../../hooks/usePaywall";
 import { PaywallHeader } from "./PaywallHeader";
 import { PaywallTabBar } from "./PaywallTabBar";
 import { CreditsTabContent } from "./CreditsTabContent";
 import { SubscriptionTabContent } from "./SubscriptionTabContent";
-import type { PaywallTabType } from "../../domain/entities/PaywallTab";
-import type { CreditsPackage } from "../../domain/entities/CreditsPackage";
+import type { PaywallTabType } from "../../../domain/entities/paywall/PaywallTab";
+import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
 
 interface PaywallModalProps {
   visible: boolean;
@@ -27,10 +27,16 @@ interface PaywallModalProps {
   requiredCredits?: number;
   onCreditsPurchase: (packageId: string) => Promise<void>;
   onSubscriptionPurchase: (pkg: PurchasesPackage) => Promise<void>;
+  onRestore?: () => Promise<void>;
   subscriptionFeatures?: Array<{ icon: string; text: string }>;
   isLoading?: boolean;
   title?: string;
   subtitle?: string;
+  privacyUrl?: string;
+  termsUrl?: string;
+  privacyText?: string;
+  termsOfServiceText?: string;
+  restoreButtonText?: string;
 }
 
 export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
@@ -44,10 +50,16 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
     requiredCredits,
     onCreditsPurchase,
     onSubscriptionPurchase,
+    onRestore,
     subscriptionFeatures = [],
     isLoading = false,
     title,
     subtitle,
+    privacyUrl,
+    termsUrl,
+    privacyText,
+    termsOfServiceText,
+    restoreButtonText,
   }) => {
     const tokens = useAppDesignTokens();
     const { t } = useLocalization();
@@ -101,12 +113,12 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
                 onClose={onClose}
               />
 
-<PaywallTabBar
-            activeTab={activeTab}
-            onTabChange={handleTabChange}
-            creditsLabel={t("paywall.tabs.credits", { defaultValue: "Credits" })}
-            subscriptionLabel={t("paywall.tabs.subscription", { defaultValue: "Subscription" })}
-          />
+              <PaywallTabBar
+                activeTab={activeTab}
+                onTabChange={handleTabChange}
+                creditsLabel={t("paywall.tabs.credits", { defaultValue: "Credits" })}
+                subscriptionLabel={t("paywall.tabs.subscription", { defaultValue: "Subscription" })}
+              />
 
               {activeTab === "credits" ? (
                 <CreditsTabContent
@@ -128,6 +140,12 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
                   features={subscriptionFeatures}
                   isLoading={isLoading}
                   purchaseButtonText={t("paywall.subscribe", { defaultValue: "Subscribe" })}
+                  onRestore={onRestore}
+                  privacyUrl={privacyUrl}
+                  termsUrl={termsUrl}
+                  privacyText={privacyText}
+                  termsOfServiceText={termsOfServiceText}
+                  restoreButtonText={restoreButtonText}
                 />
               )}
             </SafeAreaView>

package/src/presentation/components/paywall/PaywallTabBar.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system-atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
-import type { PaywallTabType } from "../../domain/entities/PaywallTab";
+import type { PaywallTabType } from "../../../domain/entities/paywall/PaywallTab";
 
 interface PaywallTabBarProps {
   activeTab: PaywallTabType;

package/src/presentation/components/paywall/SubscriptionModal.tsx

@@ -95,8 +95,13 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
 
     if (!visible) return null;
 
+    const isFullScreen = variant === "fullscreen";
+
     const Content = (
-      <SafeAreaView edges={["top", "bottom"]} style={styles.safeArea}>
+      <SafeAreaView
+        edges={["top", "bottom"]}
+        style={isFullScreen ? styles.safeAreaFullScreen : styles.safeAreaBottomSheet}
+      >
         <View style={styles.header}>
           <TouchableOpacity style={styles.closeButton} onPress={onClose}>
             <AtomicText style={[styles.closeIcon, { color: tokens.colors.textSecondary }]}>
@@ -119,7 +124,10 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
           )}
         </View>
 
-        <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent}>
+        <ScrollView
+          style={isFullScreen ? styles.scrollViewFullScreen : styles.scrollViewBottomSheet}
+          contentContainerStyle={styles.scrollContent}
+        >
           <SubscriptionPackageList
             packages={packages}
             isLoading={isLoading}
@@ -186,13 +194,19 @@ const styles = StyleSheet.create({
   overlay: { flex: 1, justifyContent: "flex-end" },
   backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: "rgba(0, 0, 0, 0.5)" },
   bottomSheetContent: { borderTopLeftRadius: 24, borderTopRightRadius: 24, maxHeight: "90%" },
-  safeArea: { flex: 1, paddingTop: 16 },
+
+  safeAreaFullScreen: { flex: 1, paddingTop: 16 },
+  safeAreaBottomSheet: { paddingTop: 16 },
+
   header: { alignItems: "center", paddingHorizontal: 24, paddingBottom: 20 },
   closeButton: { position: "absolute", top: 0, right: 16, padding: 8, zIndex: 1 },
   closeIcon: { fontSize: 28, fontWeight: "300" },
   title: { marginBottom: 8, textAlign: "center" },
   subtitle: { textAlign: "center" },
-  scrollView: { flex: 1 },
+
+  scrollViewFullScreen: { flex: 1 },
+  scrollViewBottomSheet: { maxHeight: 400 },
+
   scrollContent: { paddingHorizontal: 24, paddingBottom: 16 },
   featuresSection: { borderRadius: 16, padding: 16, marginTop: 20 },
 });

package/src/presentation/components/paywall/SubscriptionPlanCard.tsx

@@ -8,7 +8,7 @@ import { View, TouchableOpacity, StyleSheet } from "react-native";
 import type { PurchasesPackage } from "react-native-purchases";
 import { AtomicText } from "@umituz/react-native-design-system-atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
-import { formatPrice } from "@umituz/react-native-subscription";
+import { formatPrice } from "../../../utils/priceUtils";
 import { useLocalization } from "@umituz/react-native-localization";
 
 interface SubscriptionPlanCardProps {

package/src/presentation/components/paywall/SubscriptionTabContent.tsx

@@ -5,23 +5,28 @@
 
 import React, { useMemo } from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
-import { AtomicButton } from "@umituz/react-native-design-system-atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { PurchasesPackage } from "react-native-purchases";
-import { SubscriptionPlanCard } from "./SubscriptionPlanCard";
 import { PaywallFeaturesList } from "./PaywallFeaturesList";
-import { PaywallLegalFooter } from "./PaywallLegalFooter";
+import { SubscriptionPackageList } from "./SubscriptionPackageList";
+import { SubscriptionFooter } from "./SubscriptionFooter";
 
 interface SubscriptionTabContentProps {
   packages: PurchasesPackage[];
   selectedPackage: PurchasesPackage | null;
   onSelectPackage: (pkg: PurchasesPackage) => void;
   onPurchase: () => void;
+  onRestore?: () => void;
   features?: Array<{ icon: string; text: string }>;
   isLoading?: boolean;
   purchaseButtonText?: string;
   processingText?: string;
+  restoreButtonText?: string;
+  privacyUrl?: string;
+  termsUrl?: string;
+  privacyText?: string;
+  termsOfServiceText?: string;
 }
 
 const isYearlyPackage = (pkg: PurchasesPackage): boolean => {
@@ -46,26 +51,27 @@ export const SubscriptionTabContent: React.FC<SubscriptionTabContentProps> =
       selectedPackage,
       onSelectPackage,
       onPurchase,
+      onRestore,
       features = [],
       isLoading = false,
       purchaseButtonText,
       processingText,
+      restoreButtonText = "Restore Purchases",
+      privacyUrl,
+      termsUrl,
+      privacyText,
+      termsOfServiceText,
     }) => {
       const tokens = useAppDesignTokens();
       const { t } = useLocalization();
 
-      const displayPurchaseButtonText = purchaseButtonText ||
-        t("paywall.subscribe", { defaultValue: "Subscribe" });
-      const displayProcessingText = processingText ||
-        t("paywall.processing", { defaultValue: "Processing..." });
+      const displayPurchaseButtonText =
+        purchaseButtonText || t("paywall.subscribe", { defaultValue: "Subscribe" });
+      const displayProcessingText =
+        processingText || t("paywall.processing", { defaultValue: "Processing..." });
 
       const sortedPackages = useMemo(() => sortPackages(packages), [packages]);
 
-      const firstYearlyIndex = useMemo(
-        () => sortedPackages.findIndex(isYearlyPackage),
-        [sortedPackages],
-      );
-
       return (
         <View style={styles.container}>
           <ScrollView
@@ -73,20 +79,14 @@ export const SubscriptionTabContent: React.FC<SubscriptionTabContentProps> =
             contentContainerStyle={styles.scrollContent}
             showsVerticalScrollIndicator={false}
           >
-            <View style={styles.plansContainer}>
-              {sortedPackages.map((pkg, index) => (
-                <SubscriptionPlanCard
-                  key={pkg.product.identifier}
-                  package={pkg}
-                  isSelected={
-                    selectedPackage?.product.identifier ===
-                    pkg.product.identifier
-                  }
-                  onSelect={() => onSelectPackage(pkg)}
-                  isBestValue={index === firstYearlyIndex}
-                />
-              ))}
-            </View>
+            <SubscriptionPackageList
+              packages={sortedPackages}
+              isLoading={isLoading}
+              selectedPkg={selectedPackage}
+              onSelect={onSelectPackage}
+              loadingText={t("paywall.loading", { defaultValue: "Loading..." })}
+              emptyText={t("paywall.empty", { defaultValue: "No packages" })}
+            />
 
             {features.length > 0 && (
               <View
@@ -100,18 +100,25 @@ export const SubscriptionTabContent: React.FC<SubscriptionTabContentProps> =
             )}
           </ScrollView>
 
-          <View style={styles.footer}>
-            <AtomicButton
-              title={isLoading ? displayProcessingText : displayPurchaseButtonText}
-              onPress={onPurchase}
-              disabled={!selectedPackage || isLoading}
-            />
-          </View>
-
-          <PaywallLegalFooter />
+          <SubscriptionFooter
+            isProcessing={false} // Tab content usually delegated processing to external state, currently no isProcessing prop passed. Assuming false or controlled by isLoading.
+            isLoading={isLoading}
+            processingText={displayProcessingText}
+            purchaseButtonText={displayPurchaseButtonText}
+            hasPackages={packages.length > 0}
+            selectedPkg={selectedPackage}
+            restoreButtonText={restoreButtonText}
+            showRestoreButton={!!onRestore}
+            onPurchase={onPurchase}
+            onRestore={onRestore || (() => { })}
+            privacyUrl={privacyUrl}
+            termsUrl={termsUrl}
+            privacyText={privacyText}
+            termsOfServiceText={termsOfServiceText}
+          />
         </View>
       );
-    },
+    }
   );
 
 SubscriptionTabContent.displayName = "SubscriptionTabContent";
@@ -127,16 +134,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     paddingBottom: 16,
   },
-  plansContainer: {
-    gap: 12,
-    marginBottom: 20,
-  },
   featuresSection: {
     borderRadius: 16,
     padding: 16,
-  },
-  footer: {
-    padding: 24,
-    paddingTop: 16,
+    marginTop: 20,
   },
 });

package/src/presentation/hooks/usePaywall.ts

@@ -0,0 +1,54 @@
+import { useState, useCallback } from "react";
+import type { PurchasesPackage } from "react-native-purchases";
+import type { PaywallTabType } from "../../domain/entities/paywall/PaywallTab";
+
+interface UsePaywallProps {
+    initialTab?: PaywallTabType;
+    onCreditsPurchase: (packageId: string) => Promise<void>;
+    onSubscriptionPurchase: (pkg: PurchasesPackage) => Promise<void>;
+}
+
+export const usePaywall = ({
+    initialTab = "credits",
+    onCreditsPurchase,
+    onSubscriptionPurchase,
+}: UsePaywallProps) => {
+    const [activeTab, setActiveTab] = useState<PaywallTabType>(initialTab);
+    const [selectedCreditsPackageId, setSelectedCreditsPackageId] = useState<string | null>(null);
+    const [selectedSubscriptionPkg, setSelectedSubscriptionPkg] = useState<PurchasesPackage | null>(null);
+
+    const handleTabChange = useCallback((tab: PaywallTabType) => {
+        setActiveTab(tab);
+    }, []);
+
+    const handleCreditsPackageSelect = useCallback((packageId: string) => {
+        setSelectedCreditsPackageId(packageId);
+    }, []);
+
+    const handleSubscriptionPackageSelect = useCallback((pkg: PurchasesPackage) => {
+        setSelectedSubscriptionPkg(pkg);
+    }, []);
+
+    const handleCreditsPurchase = useCallback(async () => {
+        if (selectedCreditsPackageId) {
+            await onCreditsPurchase(selectedCreditsPackageId);
+        }
+    }, [selectedCreditsPackageId, onCreditsPurchase]);
+
+    const handleSubscriptionPurchase = useCallback(async () => {
+        if (selectedSubscriptionPkg) {
+            await onSubscriptionPurchase(selectedSubscriptionPkg);
+        }
+    }, [selectedSubscriptionPkg, onSubscriptionPurchase]);
+
+    return {
+        activeTab,
+        selectedCreditsPackageId,
+        selectedSubscriptionPkg,
+        handleTabChange,
+        handleCreditsPackageSelect,
+        handleSubscriptionPackageSelect,
+        handleCreditsPurchase,
+        handleSubscriptionPurchase,
+    };
+};