@umituz/react-native-subscription 2.3.4 → 2.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "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

@@ -66,15 +66,9 @@ export {
 export {
   SubscriptionModal,
   type SubscriptionModalProps,
-  type SubscriptionModalStyles,
 } from "./presentation/components/paywall/SubscriptionModal";
 
 export { SubscriptionModalHeader } from "./presentation/components/paywall/SubscriptionModalHeader";
-export {
-  SubscriptionModalOverlay,
-  type SubscriptionModalVariant,
-  type ModalLayoutConfig,
-} from "./presentation/components/paywall/SubscriptionModalOverlay";
 
 export { SubscriptionPlanCard } from "./presentation/components/paywall/SubscriptionPlanCard";
 export { PaywallFeaturesList } from "./presentation/components/paywall/PaywallFeaturesList";
@@ -83,7 +77,6 @@ export { PaywallLegalFooter } from "./presentation/components/paywall/PaywallLeg
 export {
   PaywallModal,
   type PaywallModalProps,
-  type PaywallModalStyles,
 } from "./presentation/components/paywall/PaywallModal";
 
 // =============================================================================

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

@@ -1,11 +1,11 @@
 /**
  * Paywall Modal Component
- * Single Responsibility: Display paywall with Credits and Subscription tabs
+ * Displays paywall with Credits and Subscription tabs
  */
 
 import React, { useEffect } from "react";
-import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens, BaseModal, useResponsive } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { PurchasesPackage } from "react-native-purchases";
 import { usePaywall } from "../../hooks/usePaywall";
@@ -13,33 +13,15 @@ import { PaywallHeader } from "./PaywallHeader";
 import { PaywallTabBar } from "./PaywallTabBar";
 import { CreditsTabContent } from "./CreditsTabContent";
 import { SubscriptionTabContent } from "./SubscriptionTabContent";
-import { ModalLayoutConfig } from "./SubscriptionModalOverlay";
 import type { PaywallTabType } from "../../../domain/entities/paywall/PaywallTab";
 import type { CreditsPackage } from "../../../domain/entities/paywall/CreditsPackage";
 
-const { height: SCREEN_HEIGHT } = Dimensions.get("window");
-
 export interface PaywallModalStyles {
   headerTopPadding?: number;
   contentHorizontalPadding?: number;
   contentBottomPadding?: number;
 }
 
-const DEFAULT_LAYOUT: ModalLayoutConfig = {
-  maxWidth: 480,
-  maxHeightPercent: 0.88,
-  widthPercent: 0.92,
-  borderRadius: 32,
-  backdropOpacity: 0.85,
-  horizontalPadding: 20,
-};
-
-const DEFAULT_STYLES: PaywallModalStyles = {
-  headerTopPadding: 48,
-  contentHorizontalPadding: 24,
-  contentBottomPadding: 32,
-};
-
 export interface PaywallModalProps {
   visible: boolean;
   onClose: () => void;
@@ -60,167 +42,125 @@ export interface PaywallModalProps {
   privacyText?: string;
   termsOfServiceText?: string;
   restoreButtonText?: string;
-  layoutConfig?: ModalLayoutConfig;
-  styleConfig?: PaywallModalStyles;
 }
 
-export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
-  (props) => {
-    const {
-      visible,
-      onClose,
-      initialTab = "credits",
-      creditsPackages,
-      subscriptionPackages,
-      currentCredits,
-      requiredCredits,
-      onCreditsPurchase,
-      onSubscriptionPurchase,
-      onRestore,
-      subscriptionFeatures = [],
-      isLoading = false,
-      title,
-      subtitle,
-      privacyUrl,
-      termsUrl,
-      privacyText,
-      termsOfServiceText,
-      restoreButtonText,
-      layoutConfig,
-      styleConfig,
-    } = props;
-
-    const tokens = useAppDesignTokens();
-    const { t } = useLocalization();
-    const config = { ...DEFAULT_LAYOUT, ...layoutConfig };
-    const styles_ = { ...DEFAULT_STYLES, ...styleConfig };
-
-    const {
-      activeTab,
-      selectedCreditsPackageId,
-      selectedSubscriptionPkg,
-      handleTabChange,
-      handleCreditsPackageSelect,
-      handleSubscriptionPackageSelect,
-      handleCreditsPurchase,
-      handleSubscriptionPurchase,
-    } = usePaywall({
-      initialTab,
-      onCreditsPurchase,
-      onSubscriptionPurchase,
-    });
-
-    const displayTitle = title || t("paywall.title");
-    const displaySubtitle = subtitle || t("paywall.subtitle");
-
-    useEffect(() => {
-      if (__DEV__) {
-        console.log("[PaywallModal] Visibility changed:", visible);
-      }
-    }, [visible]);
-
-    if (!visible) return null;
-
-    return (
-      <Modal
-        visible={visible}
-        transparent
-        animationType="fade"
-        onRequestClose={onClose}
-      >
-        <View style={[styles.overlay, { paddingHorizontal: config.horizontalPadding }]}>
-          <TouchableOpacity
-            style={[
-              styles.backdrop,
-              { backgroundColor: `rgba(0, 0, 0, ${config.backdropOpacity ?? 0.85})` }
-            ]}
-            activeOpacity={1}
-            onPress={onClose}
-          />
-          <View
-            style={[
-              styles.content,
-              {
-                backgroundColor: tokens.colors.surface,
-                borderRadius: config.borderRadius ?? 32,
-                maxHeight: SCREEN_HEIGHT * (config.maxHeightPercent ?? 0.88),
-                height: SCREEN_HEIGHT * (config.maxHeightPercent ?? 0.88), // Explicit height to prevent collapse
-                width: `${(config.widthPercent ?? 0.92) * 100}%`,
-                maxWidth: config.maxWidth ?? 480,
-              }
-            ]}
-          >
-            <View style={[styles.contentInner, { paddingTop: styles_.headerTopPadding }]}>
-              <PaywallHeader
-                title={displayTitle}
-                subtitle={displaySubtitle}
-                onClose={onClose}
-                variant="fullscreen"
-              />
-
-              <PaywallTabBar
-                activeTab={activeTab}
-                onTabChange={handleTabChange}
-                creditsLabel={t("paywall.tabs.credits")}
-                subscriptionLabel={t("paywall.tabs.subscription")}
-              />
-
-              <View style={{ flex: 1 }}>
-                {activeTab === "credits" ? (
-                  <CreditsTabContent
-                    packages={creditsPackages}
-                    selectedPackageId={selectedCreditsPackageId}
-                    onSelectPackage={handleCreditsPackageSelect}
-                    onPurchase={handleCreditsPurchase}
-                    currentCredits={currentCredits}
-                    requiredCredits={requiredCredits}
-                    isLoading={isLoading}
-                    purchaseButtonText={t("paywall.purchase")}
-                  />
-                ) : (
-                  <SubscriptionTabContent
-                    packages={subscriptionPackages}
-                    selectedPackage={selectedSubscriptionPkg}
-                    onSelectPackage={handleSubscriptionPackageSelect}
-                    onPurchase={handleSubscriptionPurchase}
-                    features={subscriptionFeatures}
-                    isLoading={isLoading}
-                    purchaseButtonText={t("paywall.subscribe")}
-                    onRestore={onRestore}
-                    privacyUrl={privacyUrl}
-                    termsUrl={termsUrl}
-                    privacyText={privacyText}
-                    termsOfServiceText={termsOfServiceText}
-                    restoreButtonText={restoreButtonText}
-                  />
-                )}
-              </View>
-            </View>
-          </View>
+export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
+  const {
+    visible,
+    onClose,
+    initialTab = "credits",
+    creditsPackages,
+    subscriptionPackages,
+    currentCredits,
+    requiredCredits,
+    onCreditsPurchase,
+    onSubscriptionPurchase,
+    onRestore,
+    subscriptionFeatures = [],
+    isLoading = false,
+    title,
+    subtitle,
+    privacyUrl,
+    termsUrl,
+    privacyText,
+    termsOfServiceText,
+    restoreButtonText,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+  const { modalLayout } = useResponsive();
+
+  const {
+    activeTab,
+    selectedCreditsPackageId,
+    selectedSubscriptionPkg,
+    handleTabChange,
+    handleCreditsPackageSelect,
+    handleSubscriptionPackageSelect,
+    handleCreditsPurchase,
+    handleSubscriptionPurchase,
+  } = usePaywall({
+    initialTab,
+    onCreditsPurchase,
+    onSubscriptionPurchase,
+  });
+
+  const displayTitle = title || t("paywall.title");
+  const displaySubtitle = subtitle || t("paywall.subtitle");
+
+  useEffect(() => {
+    if (__DEV__) {
+      console.log("[PaywallModal] State:", {
+        visible,
+        activeTab,
+        modalLayout,
+        creditsPackagesCount: creditsPackages?.length ?? 0,
+        subscriptionPackagesCount: subscriptionPackages?.length ?? 0,
+      });
+    }
+  }, [visible, activeTab, modalLayout, creditsPackages?.length, subscriptionPackages?.length]);
+
+  return (
+    <BaseModal visible={visible} onClose={onClose}>
+      <View style={styles.container}>
+        <PaywallHeader
+          title={displayTitle}
+          subtitle={displaySubtitle}
+          onClose={onClose}
+          variant="fullscreen"
+        />
+
+        <PaywallTabBar
+          activeTab={activeTab}
+          onTabChange={handleTabChange}
+          creditsLabel={t("paywall.tabs.credits")}
+          subscriptionLabel={t("paywall.tabs.subscription")}
+        />
+
+        <View style={styles.tabContent}>
+          {activeTab === "credits" ? (
+            <CreditsTabContent
+              packages={creditsPackages}
+              selectedPackageId={selectedCreditsPackageId}
+              onSelectPackage={handleCreditsPackageSelect}
+              onPurchase={handleCreditsPurchase}
+              currentCredits={currentCredits}
+              requiredCredits={requiredCredits}
+              isLoading={isLoading}
+              purchaseButtonText={t("paywall.purchase")}
+            />
+          ) : (
+            <SubscriptionTabContent
+              packages={subscriptionPackages}
+              selectedPackage={selectedSubscriptionPkg}
+              onSelectPackage={handleSubscriptionPackageSelect}
+              onPurchase={handleSubscriptionPurchase}
+              features={subscriptionFeatures}
+              isLoading={isLoading}
+              purchaseButtonText={t("paywall.subscribe")}
+              onRestore={onRestore}
+              privacyUrl={privacyUrl}
+              termsUrl={termsUrl}
+              privacyText={privacyText}
+              termsOfServiceText={termsOfServiceText}
+              restoreButtonText={restoreButtonText}
+            />
+          )}
         </View>
-      </Modal>
-    );
-  },
-);
+      </View>
+    </BaseModal>
+  );
+});
 
 PaywallModal.displayName = "PaywallModal";
 
 const styles = StyleSheet.create({
-  overlay: {
+  container: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  content: {
-    overflow: "hidden",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)",
+    width: "100%",
   },
-  contentInner: {
+  tabContent: {
     flex: 1,
-    paddingBottom: 20,
   },
 });

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

@@ -1,30 +1,19 @@
 /**
  * Subscription Modal Component
- * Orchestrates subscription flow using decomposed components
+ * Fullscreen subscription flow using BaseModal from design system
  */
 
 import React from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, BaseModal, useResponsive } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 
 import { SubscriptionModalHeader } from "./SubscriptionModalHeader";
-import {
-  SubscriptionModalOverlay,
-  SubscriptionModalVariant,
-  ModalLayoutConfig,
-} from "./SubscriptionModalOverlay";
 import { PaywallFeaturesList } from "./PaywallFeaturesList";
 import { SubscriptionPackageList } from "./SubscriptionPackageList";
 import { SubscriptionFooter } from "./SubscriptionFooter";
 import { useSubscriptionModal } from "../../hooks/useSubscriptionModal";
 
-export interface SubscriptionModalStyles {
-  headerTopPadding?: number;
-  contentHorizontalPadding?: number;
-  contentBottomPadding?: number;
-}
-
 export interface SubscriptionModalProps {
   visible: boolean;
   onClose: () => void;
@@ -45,17 +34,8 @@ export interface SubscriptionModalProps {
   privacyText?: string;
   termsOfServiceText?: string;
   showRestoreButton?: boolean;
-  variant?: SubscriptionModalVariant;
-  layoutConfig?: ModalLayoutConfig;
-  styleConfig?: SubscriptionModalStyles;
 }
 
-const DEFAULT_STYLES: SubscriptionModalStyles = {
-  headerTopPadding: 48,
-  contentHorizontalPadding: 24,
-  contentBottomPadding: 32,
-};
-
 export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((props) => {
   const {
     visible,
@@ -77,13 +57,10 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     privacyText,
     termsOfServiceText,
     showRestoreButton = true,
-    variant = "bottom-sheet",
-    layoutConfig,
-    styleConfig,
   } = props;
 
   const tokens = useAppDesignTokens();
-  const styles_ = { ...DEFAULT_STYLES, ...styleConfig };
+  const { modalLayout } = useResponsive();
 
   const {
     selectedPkg,
@@ -97,55 +74,32 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     onClose,
   });
 
-  // Debug logging in development
   if (__DEV__) {
     console.log("[SubscriptionModal] State:", {
       visible,
-      variant,
       isLoading,
       packagesCount: packages?.length ?? 0,
-      packagesData: packages?.map(p => ({
-        id: p?.identifier,
-        price: p?.product?.priceString,
-        title: p?.product?.title,
-      })),
-      featuresCount: features?.length ?? 0,
-      title,
-      subtitle: subtitle?.substring(0, 50),
-      hasTokens: !!tokens,
+      modalLayout,
       selectedPkg: selectedPkg?.identifier ?? null,
       isProcessing,
     });
   }
 
-  if (!visible) return null;
-
-  const isFullscreen = variant === "fullscreen";
-  const containerPaddingTop = isFullscreen ? styles_.headerTopPadding : 0;
-
   return (
-    <SubscriptionModalOverlay
-      visible={visible}
-      onClose={onClose}
-      variant={variant}
-      layoutConfig={layoutConfig}
-    >
-      <View style={[styles.container, { paddingTop: containerPaddingTop }]}>
+    <BaseModal visible={visible} onClose={onClose}>
+      <View style={styles.container}>
         <SubscriptionModalHeader
           title={title}
           subtitle={subtitle}
           onClose={onClose}
-          variant={variant}
+          variant="fullscreen"
         />
 
         <ScrollView
           style={styles.scrollView}
           contentContainerStyle={[
             styles.scrollContent,
-            {
-              paddingHorizontal: styles_.contentHorizontalPadding,
-              paddingBottom: styles_.contentBottomPadding,
-            }
+            { paddingHorizontal: modalLayout.horizontalPadding }
           ]}
           showsVerticalScrollIndicator={false}
           bounces={false}
@@ -160,7 +114,15 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
           />
 
           {features.length > 0 && (
-            <View style={[styles.featuresSection, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+            <View
+              style={[
+                styles.featuresSection,
+                {
+                  backgroundColor: tokens.colors.surfaceSecondary,
+                  borderColor: tokens.colors.border
+                }
+              ]}
+            >
               <PaywallFeaturesList features={features} gap={12} />
             </View>
           )}
@@ -183,7 +145,7 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
           onRestore={handleRestore}
         />
       </View>
-    </SubscriptionModalOverlay>
+    </BaseModal>
   );
 });
 
@@ -196,16 +158,15 @@ const styles = StyleSheet.create({
   },
   scrollView: {
     flex: 1,
-    width: "100%",
   },
   scrollContent: {
     flexGrow: 1,
+    paddingBottom: 32,
   },
   featuresSection: {
     borderRadius: 24,
     padding: 24,
     marginTop: 12,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)",
   },
 });

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

@@ -1,179 +0,0 @@
-/**
- * Subscription Modal Overlay Component
- * Handles the Modal wrapper and backdrop logic for different variants
- */
-
-import React from "react";
-import {
-    View,
-    Modal,
-    StyleSheet,
-    TouchableOpacity,
-    Dimensions,
-    ViewStyle,
-} from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-
-const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get("window");
-
-export type SubscriptionModalVariant = "bottom-sheet" | "fullscreen" | "dialog";
-
-export interface ModalLayoutConfig {
-    maxWidth?: number;
-    maxHeightPercent?: number;
-    widthPercent?: number;
-    borderRadius?: number;
-    backdropOpacity?: number;
-    horizontalPadding?: number;
-}
-
-const DEFAULT_LAYOUT: ModalLayoutConfig = {
-    maxWidth: 480,
-    maxHeightPercent: 0.88,
-    widthPercent: 0.92,
-    borderRadius: 32,
-    backdropOpacity: 0.85,
-    horizontalPadding: 20,
-};
-
-interface SubscriptionModalOverlayProps {
-    visible: boolean;
-    onClose: () => void;
-    children: React.ReactNode;
-    variant: SubscriptionModalVariant;
-    layoutConfig?: ModalLayoutConfig;
-}
-
-export const SubscriptionModalOverlay: React.FC<SubscriptionModalOverlayProps> = ({
-    visible,
-    onClose,
-    children,
-    variant,
-    layoutConfig,
-}) => {
-    const tokens = useAppDesignTokens();
-    const config = { ...DEFAULT_LAYOUT, ...layoutConfig };
-
-    // Debug logging in development
-    if (__DEV__) {
-        console.log("[SubscriptionModalOverlay] State:", {
-            visible,
-            variant,
-            config,
-            screenWidth: SCREEN_WIDTH,
-            screenHeight: SCREEN_HEIGHT,
-            backgroundColor: tokens?.colors?.backgroundPrimary ?? "NO_TOKEN",
-            hasChildren: !!children,
-        });
-    }
-
-    const isFullScreen = variant === "fullscreen";
-
-    const getFullscreenContentStyle = (): ViewStyle => {
-        const width = Math.min(SCREEN_WIDTH * (config.widthPercent ?? 0.92), config.maxWidth ?? 480);
-        const height = SCREEN_HEIGHT * (config.maxHeightPercent ?? 0.88);
-
-        if (__DEV__) {
-            console.log("[SubscriptionModalOverlay] Content dimensions:", { width, height });
-        }
-
-        return {
-            width,
-            height, // Changed from maxHeight to height - this is critical!
-            borderRadius: config.borderRadius ?? 32,
-            overflow: "hidden",
-            borderWidth: 2,
-            borderColor: "rgba(255, 255, 255, 0.15)",
-            backgroundColor: tokens.colors.backgroundPrimary,
-        };
-    };
-
-    if (isFullScreen) {
-        return (
-            <Modal
-                visible={visible}
-                transparent
-                animationType="fade"
-                onRequestClose={onClose}
-            >
-                <View style={[styles.fullscreenOverlay, { paddingHorizontal: config.horizontalPadding }]}>
-                    <TouchableOpacity
-                        style={[
-                            styles.fullscreenBackdrop,
-                            { backgroundColor: `rgba(0, 0, 0, ${config.backdropOpacity ?? 0.85})` }
-                        ]}
-                        activeOpacity={1}
-                        onPress={onClose}
-                    />
-                    <View style={getFullscreenContentStyle()}>
-                        {children}
-                    </View>
-                </View>
-            </Modal>
-        );
-    }
-
-    return (
-        <Modal
-            visible={visible}
-            transparent
-            animationType="fade"
-            onRequestClose={onClose}
-        >
-            <View style={[styles.overlay, variant === "dialog" && styles.overlayCentered]}>
-                <TouchableOpacity
-                    style={styles.backdrop}
-                    activeOpacity={1}
-                    onPress={onClose}
-                />
-                <View
-                    style={[
-                        variant === "bottom-sheet" ? styles.bottomSheet : styles.dialog,
-                        { backgroundColor: tokens.colors.surface }
-                    ]}
-                >
-                    {children}
-                </View>
-            </View>
-        </Modal>
-    );
-};
-
-const styles = StyleSheet.create({
-    overlay: {
-        flex: 1,
-        justifyContent: "flex-end",
-    },
-    overlayCentered: {
-        justifyContent: "center",
-        paddingHorizontal: 20,
-    },
-    backdrop: {
-        ...StyleSheet.absoluteFillObject,
-        backgroundColor: "rgba(0, 0, 0, 0.6)",
-    },
-    fullscreenOverlay: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    fullscreenBackdrop: {
-        ...StyleSheet.absoluteFillObject,
-    },
-    bottomSheet: {
-        borderTopLeftRadius: 32,
-        borderTopRightRadius: 32,
-        maxHeight: SCREEN_HEIGHT * 0.9,
-        minHeight: 400,
-        width: "100%",
-    },
-    dialog: {
-        alignSelf: "center",
-        width: Math.min(SCREEN_WIDTH * 0.94, 500),
-        maxHeight: SCREEN_HEIGHT * 0.85,
-        borderRadius: 32,
-        overflow: "hidden",
-        borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.1)",
-    },
-});