@umituz/react-native-subscription 2.2.7 → 2.2.10

package/package.json

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { AtomicButton, AtomicText } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { PaywallLegalFooter } from "./PaywallLegalFooter";
+
+interface SubscriptionFooterProps {
+    isProcessing: boolean;
+    isLoading: boolean;
+    processingText: string;
+    purchaseButtonText: string;
+    hasPackages: boolean;
+    selectedPkg: any; // Using any to avoid circular deps if needed, but preferably strict
+    restoreButtonText: string;
+    showRestoreButton: boolean;
+    privacyUrl?: string;
+    termsUrl?: string;
+    privacyText?: string;
+    termsOfServiceText?: string;
+    onPurchase: () => void;
+    onRestore: () => void;
+}
+
+export const SubscriptionFooter: React.FC<SubscriptionFooterProps> = React.memo(
+    ({
+        isProcessing,
+        isLoading,
+        processingText,
+        purchaseButtonText,
+        hasPackages,
+        selectedPkg,
+        restoreButtonText,
+        showRestoreButton,
+        privacyUrl,
+        termsUrl,
+        privacyText,
+        termsOfServiceText,
+        onPurchase,
+        onRestore,
+    }) => {
+        const tokens = useAppDesignTokens();
+
+        return (
+            <View style={styles.container}>
+                <View style={styles.actions}>
+                    {hasPackages && (
+                        <AtomicButton
+                            title={isProcessing ? processingText : purchaseButtonText}
+                            onPress={onPurchase}
+                            disabled={!selectedPkg || isProcessing || isLoading}
+                        />
+                    )}
+                    {showRestoreButton && (
+                        <TouchableOpacity
+                            style={styles.restoreButton}
+                            onPress={onRestore}
+                            disabled={isProcessing || isLoading}
+                        >
+                            <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+                                {restoreButtonText}
+                            </AtomicText>
+                        </TouchableOpacity>
+                    )}
+                </View>
+
+                <PaywallLegalFooter
+                    privacyUrl={privacyUrl}
+                    termsUrl={termsUrl}
+                    privacyText={privacyText}
+                    termsOfServiceText={termsOfServiceText}
+                />
+            </View>
+        );
+    }
+);
+
+SubscriptionFooter.displayName = "SubscriptionFooter";
+
+const styles = StyleSheet.create({
+    container: {},
+    actions: {
+        paddingHorizontal: 24,
+        paddingVertical: 16,
+        gap: 12
+    },
+    restoreButton: {
+        alignItems: "center",
+        paddingVertical: 8
+    },
+});

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

@@ -1,6 +1,6 @@
 /**
  * Subscription Modal Component
- * Modal for displaying subscription packages
+ * Orchestrates subscription flow
  */
 
 import React, { useState, useCallback } from "react";
@@ -10,15 +10,14 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
-  ActivityIndicator,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import type { PurchasesPackage } from "react-native-purchases";
-import { AtomicText, AtomicButton } from "@umituz/react-native-design-system-atoms";
+import { AtomicText } from "@umituz/react-native-design-system-atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
-import { SubscriptionPlanCard } from "./SubscriptionPlanCard";
 import { PaywallFeaturesList } from "./PaywallFeaturesList";
-import { PaywallLegalFooter } from "./PaywallLegalFooter";
+import { SubscriptionPackageList } from "./SubscriptionPackageList";
+import { SubscriptionFooter } from "./SubscriptionFooter";
 
 export interface SubscriptionModalProps {
   visible: boolean;
@@ -40,6 +39,8 @@ export interface SubscriptionModalProps {
   privacyText?: string;
   termsOfServiceText?: string;
   showRestoreButton?: boolean;
+  variant?: "bottom-sheet" | "fullscreen";
+  BackgroundComponent?: React.ComponentType<any>;
 }
 
 export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
@@ -63,6 +64,8 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
     privacyText,
     termsOfServiceText,
     showRestoreButton = true,
+    variant = "bottom-sheet",
+    BackgroundComponent,
   }) => {
     const tokens = useAppDesignTokens();
     const [selectedPkg, setSelectedPkg] = useState<PurchasesPackage | null>(null);
@@ -92,106 +95,92 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
 
     if (!visible) return null;
 
-    const hasPackages = packages.length > 0;
-    const showLoading = isLoading && !hasPackages;
+    const isFullScreen = variant === "fullscreen";
+
+    const Content = (
+      <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 }]}>
+              ×
+            </AtomicText>
+          </TouchableOpacity>
+          <AtomicText
+            type="headlineMedium"
+            style={[styles.title, { color: tokens.colors.textPrimary }]}
+          >
+            {title}
+          </AtomicText>
+          {subtitle && (
+            <AtomicText
+              type="bodyMedium"
+              style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
+            >
+              {subtitle}
+            </AtomicText>
+          )}
+        </View>
+
+        <ScrollView
+          style={isFullScreen ? styles.scrollViewFullScreen : styles.scrollViewBottomSheet}
+          contentContainerStyle={styles.scrollContent}
+        >
+          <SubscriptionPackageList
+            packages={packages}
+            isLoading={isLoading}
+            selectedPkg={selectedPkg}
+            onSelect={setSelectedPkg}
+            loadingText={loadingText}
+            emptyText={emptyText}
+          />
+          {features.length > 0 && (
+            <View style={[styles.featuresSection, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+              <PaywallFeaturesList features={features} gap={12} />
+            </View>
+          )}
+        </ScrollView>
+
+        <SubscriptionFooter
+          isProcessing={isProcessing}
+          isLoading={isLoading}
+          processingText={processingText}
+          purchaseButtonText={purchaseButtonText}
+          hasPackages={packages.length > 0}
+          selectedPkg={selectedPkg}
+          restoreButtonText={restoreButtonText}
+          showRestoreButton={showRestoreButton}
+          privacyUrl={privacyUrl}
+          termsUrl={termsUrl}
+          privacyText={privacyText}
+          termsOfServiceText={termsOfServiceText}
+          onPurchase={handlePurchase}
+          onRestore={handleRestore}
+        />
+      </SafeAreaView>
+    );
+
+    if (variant === "fullscreen") {
+      const Wrapper = BackgroundComponent || View;
+      const wrapperStyle = !BackgroundComponent ? { flex: 1, backgroundColor: tokens.colors.backgroundPrimary } : { flex: 1 };
+
+      return (
+        <Modal visible={visible} transparent={false} animationType="slide" onRequestClose={onClose}>
+          <Wrapper style={wrapperStyle}>
+            {Content}
+          </Wrapper>
+        </Modal>
+      );
+    }
 
     return (
       <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
         <View style={styles.overlay}>
           <TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={onClose} />
-          <View style={[styles.content, { backgroundColor: tokens.colors.surface }]}>
-            <SafeAreaView edges={["bottom"]} style={styles.safeArea}>
-              <View style={styles.header}>
-                <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-                  <AtomicText style={[styles.closeIcon, { color: tokens.colors.textSecondary }]}>
-                    ×
-                  </AtomicText>
-                </TouchableOpacity>
-                <AtomicText
-                  type="headlineMedium"
-                  style={[styles.title, { color: tokens.colors.textPrimary }]}
-                >
-                  {title}
-                </AtomicText>
-                {subtitle ? (
-                  <AtomicText
-                    type="bodyMedium"
-                    style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
-                  >
-                    {subtitle}
-                  </AtomicText>
-                ) : null}
-              </View>
-
-              <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent}>
-                {showLoading ? (
-                  <View style={styles.centerContent}>
-                    <ActivityIndicator size="large" color={tokens.colors.primary} />
-                    <AtomicText
-                      type="bodyMedium"
-                      style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
-                    >
-                      {loadingText}
-                    </AtomicText>
-                  </View>
-                ) : !hasPackages ? (
-                  <View style={styles.centerContent}>
-                    <AtomicText
-                      type="bodyMedium"
-                      style={[styles.emptyText, { color: tokens.colors.textSecondary }]}
-                    >
-                      {emptyText}
-                    </AtomicText>
-                  </View>
-                ) : (
-                  <View style={styles.packagesContainer}>
-                    {packages.map((pkg, index) => (
-                      <SubscriptionPlanCard
-                        key={pkg.product.identifier}
-                        package={pkg}
-                        isSelected={selectedPkg?.product.identifier === pkg.product.identifier}
-                        onSelect={() => setSelectedPkg(pkg)}
-                        isBestValue={index === 0}
-                      />
-                    ))}
-                  </View>
-                )}
-
-                {features.length > 0 && (
-                  <View style={[styles.featuresSection, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-                    <PaywallFeaturesList features={features} gap={12} />
-                  </View>
-                )}
-              </ScrollView>
-
-              <View style={styles.footer}>
-                {hasPackages && (
-                  <AtomicButton
-                    title={isProcessing ? processingText : purchaseButtonText}
-                    onPress={handlePurchase}
-                    disabled={!selectedPkg || isProcessing || isLoading}
-                  />
-                )}
-                {showRestoreButton && (
-                  <TouchableOpacity
-                    style={styles.restoreButton}
-                    onPress={handleRestore}
-                    disabled={isProcessing || isLoading}
-                  >
-                    <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
-                      {restoreButtonText}
-                    </AtomicText>
-                  </TouchableOpacity>
-                )}
-              </View>
-
-              <PaywallLegalFooter
-                privacyUrl={privacyUrl}
-                termsUrl={termsUrl}
-                privacyText={privacyText}
-                termsOfServiceText={termsOfServiceText}
-              />
-            </SafeAreaView>
+          <View style={[styles.bottomSheetContent, { backgroundColor: tokens.colors.surface }]}>
+            {Content}
           </View>
         </View>
       </Modal>
@@ -204,20 +193,20 @@ SubscriptionModal.displayName = "SubscriptionModal";
 const styles = StyleSheet.create({
   overlay: { flex: 1, justifyContent: "flex-end" },
   backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: "rgba(0, 0, 0, 0.5)" },
-  content: { borderTopLeftRadius: 24, borderTopRightRadius: 24, maxHeight: "90%" },
-  safeArea: { paddingTop: 16 },
+  bottomSheetContent: { borderTopLeftRadius: 24, borderTopRightRadius: 24, maxHeight: "90%" },
+
+  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: { maxHeight: 400 },
+
+  scrollViewFullScreen: { flex: 1 },
+  scrollViewBottomSheet: { maxHeight: 400 },
+
   scrollContent: { paddingHorizontal: 24, paddingBottom: 16 },
-  centerContent: { alignItems: "center", paddingVertical: 40 },
-  loadingText: { marginTop: 16 },
-  emptyText: { textAlign: "center" },
-  packagesContainer: { gap: 12, marginBottom: 20 },
-  featuresSection: { borderRadius: 16, padding: 16 },
-  footer: { paddingHorizontal: 24, paddingVertical: 16, gap: 12 },
-  restoreButton: { alignItems: "center", paddingVertical: 8 },
+  featuresSection: { borderRadius: 16, padding: 16, marginTop: 20 },
 });

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { View, StyleSheet, ActivityIndicator } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import type { PurchasesPackage } from "react-native-purchases";
+import { SubscriptionPlanCard } from "./SubscriptionPlanCard";
+
+interface SubscriptionPackageListProps {
+    isLoading: boolean;
+    packages: PurchasesPackage[];
+    selectedPkg: PurchasesPackage | null;
+    loadingText: string;
+    emptyText: string;
+    onSelect: (pkg: PurchasesPackage) => void;
+}
+
+export const SubscriptionPackageList: React.FC<SubscriptionPackageListProps> = React.memo(
+    ({
+        isLoading,
+        packages,
+        selectedPkg,
+        loadingText,
+        emptyText,
+        onSelect,
+    }) => {
+        const tokens = useAppDesignTokens();
+        const hasPackages = packages.length > 0;
+        const showLoading = isLoading && !hasPackages;
+
+        if (showLoading) {
+            return (
+                <View style={styles.centerContent}>
+                    <ActivityIndicator size="large" color={tokens.colors.primary} />
+                    <AtomicText
+                        type="bodyMedium"
+                        style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
+                    >
+                        {loadingText}
+                    </AtomicText>
+                </View>
+            );
+        }
+
+        if (!hasPackages) {
+            return (
+                <View style={styles.centerContent}>
+                    <AtomicText
+                        type="bodyMedium"
+                        style={[styles.emptyText, { color: tokens.colors.textSecondary }]}
+                    >
+                        {emptyText}
+                    </AtomicText>
+                </View>
+            );
+        }
+
+        return (
+            <View style={styles.packagesContainer}>
+                {packages.map((pkg, index) => (
+                    <SubscriptionPlanCard
+                        key={pkg.product.identifier}
+                        package={pkg}
+                        isSelected={selectedPkg?.product.identifier === pkg.product.identifier}
+                        onSelect={() => onSelect(pkg)}
+                        isBestValue={index === 0}
+                    />
+                ))}
+            </View>
+        );
+    }
+);
+
+SubscriptionPackageList.displayName = "SubscriptionPackageList";
+
+const styles = StyleSheet.create({
+    centerContent: {
+        alignItems: "center",
+        paddingVertical: 40
+    },
+    loadingText: {
+        marginTop: 16
+    },
+    emptyText: {
+        textAlign: "center"
+    },
+    packagesContainer: {
+        gap: 12,
+        marginBottom: 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,
+    };
+};