@umituz/react-native-subscription 2.2.31 → 2.2.32

package/package.json

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

@@ -108,6 +108,11 @@ export { SubscriptionPlanCard } from "./presentation/components/paywall/Subscrip
 export { PaywallFeaturesList } from "./presentation/components/paywall/PaywallFeaturesList";
 export { PaywallFeatureItem } from "./presentation/components/paywall/PaywallFeatureItem";
 export { PaywallLegalFooter } from "./presentation/components/paywall/PaywallLegalFooter";
+export {
+  PaywallModal,
+  type PaywallModalProps,
+  type PaywallModalStyles,
+} from "./presentation/components/paywall/PaywallModal";
 
 // =============================================================================
 // PRESENTATION LAYER - Premium Details Components

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

@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect } from "react";
-import { View, Modal, StyleSheet, TouchableOpacity } from "react-native";
+import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { PurchasesPackage } from "react-native-purchases";
@@ -13,10 +13,34 @@ 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";
 
-interface PaywallModalProps {
+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;
   initialTab?: PaywallTabType;
@@ -36,32 +60,40 @@ interface PaywallModalProps {
   privacyText?: string;
   termsOfServiceText?: string;
   restoreButtonText?: string;
+  layoutConfig?: ModalLayoutConfig;
+  styleConfig?: PaywallModalStyles;
 }
 
 export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
-  ({
-    visible,
-    onClose,
-    initialTab = "credits",
-    creditsPackages,
-    subscriptionPackages,
-    currentCredits,
-    requiredCredits,
-    onCreditsPurchase,
-    onSubscriptionPurchase,
-    onRestore,
-    subscriptionFeatures = [],
-    isLoading = false,
-    title,
-    subtitle,
-    privacyUrl,
-    termsUrl,
-    privacyText,
-    termsOfServiceText,
-    restoreButtonText,
-  }) => {
+  (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,
@@ -96,16 +128,29 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
         animationType="fade"
         onRequestClose={onClose}
       >
-        <View style={styles.overlay}>
+        <View style={[styles.overlay, { paddingHorizontal: config.horizontalPadding }]}>
           <TouchableOpacity
-            style={styles.backdrop}
+            style={[
+              styles.backdrop,
+              { backgroundColor: `rgba(0, 0, 0, ${config.backdropOpacity ?? 0.85})` }
+            ]}
             activeOpacity={1}
             onPress={onClose}
           />
           <View
-            style={[styles.content, { backgroundColor: tokens.colors.surface }]}
+            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}>
+            <View style={[styles.contentInner, { paddingTop: styles_.headerTopPadding }]}>
               <PaywallHeader
                 title={displayTitle}
                 subtitle={displaySubtitle}
@@ -120,34 +165,36 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
                 subscriptionLabel={t("paywall.tabs.subscription", { defaultValue: "Subscription" })}
               />
 
-              {activeTab === "credits" ? (
-                <CreditsTabContent
-                  packages={creditsPackages}
-                  selectedPackageId={selectedCreditsPackageId}
-                  onSelectPackage={handleCreditsPackageSelect}
-                  onPurchase={handleCreditsPurchase}
-                  currentCredits={currentCredits}
-                  requiredCredits={requiredCredits}
-                  isLoading={isLoading}
-                  purchaseButtonText={t("paywall.purchase", { defaultValue: "Purchase" })}
-                />
-              ) : (
-                <SubscriptionTabContent
-                  packages={subscriptionPackages}
-                  selectedPackage={selectedSubscriptionPkg}
-                  onSelectPackage={handleSubscriptionPackageSelect}
-                  onPurchase={handleSubscriptionPurchase}
-                  features={subscriptionFeatures}
-                  isLoading={isLoading}
-                  purchaseButtonText={t("paywall.subscribe", { defaultValue: "Subscribe" })}
-                  onRestore={onRestore}
-                  privacyUrl={privacyUrl}
-                  termsUrl={termsUrl}
-                  privacyText={privacyText}
-                  termsOfServiceText={termsOfServiceText}
-                  restoreButtonText={restoreButtonText}
-                />
-              )}
+              <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", { defaultValue: "Purchase" })}
+                  />
+                ) : (
+                  <SubscriptionTabContent
+                    packages={subscriptionPackages}
+                    selectedPackage={selectedSubscriptionPkg}
+                    onSelectPackage={handleSubscriptionPackageSelect}
+                    onPurchase={handleSubscriptionPurchase}
+                    features={subscriptionFeatures}
+                    isLoading={isLoading}
+                    purchaseButtonText={t("paywall.subscribe", { defaultValue: "Subscribe" })}
+                    onRestore={onRestore}
+                    privacyUrl={privacyUrl}
+                    termsUrl={termsUrl}
+                    privacyText={privacyText}
+                    termsOfServiceText={termsOfServiceText}
+                    restoreButtonText={restoreButtonText}
+                  />
+                )}
+              </View>
             </View>
           </View>
         </View>
@@ -163,24 +210,17 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    paddingHorizontal: 20,
   },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.85)",
   },
   content: {
-    borderRadius: 32,
-    maxHeight: "88%",
-    width: "92%",
-    maxWidth: 480,
     overflow: "hidden",
     borderWidth: 1,
     borderColor: "rgba(255, 255, 255, 0.08)",
   },
   contentInner: {
     flex: 1,
-    paddingTop: 20,
     paddingBottom: 20,
   },
 });