@umituz/react-native-subscription 2.2.31 → 2.2.33

package/package.json

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

@@ -30,11 +30,11 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
     const tokens = useAppDesignTokens();
 
     if (__DEV__) {
-      console.log("[PaywallLegalFooter] Rendering with props:", {
-        hasPrivacyUrl: !!privacyUrl,
-        hasTermsUrl: !!termsUrl,
-        privacyText,
-        termsText: termsText?.substring(0, 20) + "...",
+      console.log("[PaywallLegalFooter] Rendering links:", {
+        privacy: !!privacyUrl,
+        terms: !!termsUrl,
+        pText: privacyText,
+        tText: termsOfServiceText
       });
     }
 
@@ -62,32 +62,42 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
         </AtomicText>
 
         {hasLinks && (
-          <View style={styles.legalLinksContainer}>
-            {privacyUrl && (
-              <TouchableOpacity onPress={handlePrivacyPress} activeOpacity={0.7}>
-                <AtomicText
-                  type="labelSmall"
-                  style={[styles.linkText, { color: tokens.colors.primary }]}
+          <View style={styles.legalLinksWrapper}>
+            <View style={[styles.legalLinksContainer, { borderColor: tokens.colors.border }]}>
+              {privacyUrl && (
+                <TouchableOpacity
+                  onPress={handlePrivacyPress}
+                  activeOpacity={0.6}
+                  style={styles.linkItem}
                 >
-                  {privacyText}
-                </AtomicText>
-              </TouchableOpacity>
-            )}
-            {privacyUrl && termsUrl && (
-              <AtomicText type="labelSmall" style={[styles.separator, { color: tokens.colors.textTertiary }]}>
-                {" • "}
-              </AtomicText>
-            )}
-            {termsUrl && (
-              <TouchableOpacity onPress={handleTermsPress} activeOpacity={0.7}>
-                <AtomicText
-                  type="labelSmall"
-                  style={[styles.linkText, { color: tokens.colors.primary }]}
+                  <AtomicText
+                    type="labelSmall"
+                    style={[styles.linkText, { color: tokens.colors.textSecondary }]}
+                  >
+                    {privacyText}
+                  </AtomicText>
+                </TouchableOpacity>
+              )}
+
+              {privacyUrl && termsUrl && (
+                <View style={[styles.dot, { backgroundColor: tokens.colors.border }]} />
+              )}
+
+              {termsUrl && (
+                <TouchableOpacity
+                  onPress={handleTermsPress}
+                  activeOpacity={0.6}
+                  style={styles.linkItem}
                 >
-                  {termsOfServiceText}
-                </AtomicText>
-              </TouchableOpacity>
-            )}
+                  <AtomicText
+                    type="labelSmall"
+                    style={[styles.linkText, { color: tokens.colors.textSecondary }]}
+                  >
+                    {termsOfServiceText}
+                  </AtomicText>
+                </TouchableOpacity>
+              )}
+            </View>
           </View>
         )}
       </View>
@@ -101,28 +111,45 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     paddingHorizontal: 24,
-    paddingBottom: 32, // Increased for home indicator safety
+    paddingBottom: 24,
     paddingTop: 8,
     width: "100%",
   },
   termsText: {
     textAlign: "center",
-    fontSize: 11,
-    lineHeight: 16,
-    marginBottom: 10,
+    fontSize: 10,
+    lineHeight: 14,
+    marginBottom: 16,
+    opacity: 0.7,
+  },
+  legalLinksWrapper: {
+    width: "100%",
+    alignItems: "center",
   },
   legalLinksContainer: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    marginTop: 4,
-    flexWrap: "wrap",
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)",
+  },
+  linkItem: {
+    paddingVertical: 2,
   },
   linkText: {
-    textDecorationLine: "underline",
-    fontSize: 12,
+    fontSize: 11,
+    fontWeight: "500",
+    letterSpacing: 0.3,
   },
-  separator: {
-    marginHorizontal: 8,
+  dot: {
+    width: 3,
+    height: 3,
+    borderRadius: 1.5,
+    marginHorizontal: 12,
+    opacity: 0.3,
   },
 });

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,
   },
 });