@umituz/react-native-subscription 2.2.20 → 2.2.22

package/package.json

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

@@ -96,6 +96,9 @@ export {
   type SubscriptionModalProps,
 } from "./presentation/components/paywall/SubscriptionModal";
 
+export { SubscriptionModalHeader } from "./presentation/components/paywall/SubscriptionModalHeader";
+export { SubscriptionModalOverlay, type SubscriptionModalVariant } from "./presentation/components/paywall/SubscriptionModalOverlay";
+
 export { SubscriptionPlanCard } from "./presentation/components/paywall/SubscriptionPlanCard";
 export { PaywallFeaturesList } from "./presentation/components/paywall/PaywallFeaturesList";
 export { PaywallFeatureItem } from "./presentation/components/paywall/PaywallFeatureItem";

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

@@ -34,7 +34,7 @@ export const PaywallFeatureItem: React.FC<PaywallFeatureItemProps> = React.memo(
         />
         <AtomicText
           type="bodyMedium"
-          style={[styles.featureText, { color: tokens.colors.text }]}
+          style={[styles.featureText, { color: tokens.colors.textPrimary }]}
         >
           {text}
         </AtomicText>

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

@@ -18,6 +18,9 @@ interface PaywallFeaturesListProps {
 
 export const PaywallFeaturesList: React.FC<PaywallFeaturesListProps> = React.memo(
   ({ features, containerStyle, gap = 12 }) => {
+    if (__DEV__) {
+      console.log("[PaywallFeaturesList] Rendering features count:", features.length);
+    }
     return (
       <View style={[styles.container, containerStyle]}>
         {features.map((feature, index) => (

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

@@ -92,25 +92,28 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     paddingHorizontal: 24,
-    paddingBottom: 20,
+    paddingBottom: 32, // Increased for home indicator safety
     paddingTop: 8,
+    width: "100%",
   },
   termsText: {
     textAlign: "center",
     fontSize: 11,
     lineHeight: 16,
-    marginBottom: 8,
+    marginBottom: 10,
   },
   legalLinksContainer: {
     flexDirection: "row",
     alignItems: "center",
+    justifyContent: "center",
     marginTop: 4,
+    flexWrap: "wrap",
   },
   linkText: {
     textDecorationLine: "underline",
     fontSize: 12,
   },
   separator: {
-    marginHorizontal: 4,
+    marginHorizontal: 8,
   },
 });

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

@@ -1,27 +1,20 @@
 /**
  * Subscription Modal Component
- * Orchestrates subscription flow
+ * Orchestrates subscription flow using decomposed components
  */
 
 import React, { useState, useCallback } from "react";
-import {
-  View,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  Dimensions,
-} from "react-native";
+import { View, StyleSheet, ScrollView } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-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 type { PurchasesPackage } from "react-native-purchases";
+
+import { SubscriptionModalHeader } from "./SubscriptionModalHeader";
+import { SubscriptionModalOverlay, SubscriptionModalVariant } from "./SubscriptionModalOverlay";
 import { PaywallFeaturesList } from "./PaywallFeaturesList";
 import { SubscriptionPackageList } from "./SubscriptionPackageList";
 import { SubscriptionFooter } from "./SubscriptionFooter";
 
-const { height: SCREEN_HEIGHT } = Dimensions.get("window");
-
 export interface SubscriptionModalProps {
   visible: boolean;
   onClose: () => void;
@@ -42,12 +35,12 @@ export interface SubscriptionModalProps {
   privacyText?: string;
   termsOfServiceText?: string;
   showRestoreButton?: boolean;
-  variant?: "bottom-sheet" | "fullscreen";
+  variant?: SubscriptionModalVariant;
   BackgroundComponent?: React.ComponentType<any>;
 }
 
-export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
-  ({
+export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((props) => {
+  const {
     visible,
     onClose,
     packages,
@@ -59,8 +52,8 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
     isLoading = false,
     purchaseButtonText = "Subscribe",
     restoreButtonText = "Restore Purchases",
-    loadingText = "Loading packages...",
-    emptyText = "No packages available",
+    loadingText = "Loading...",
+    emptyText = "No packages",
     processingText = "Processing...",
     privacyUrl,
     termsUrl,
@@ -68,215 +61,111 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
     termsOfServiceText,
     showRestoreButton = true,
     variant = "bottom-sheet",
-    BackgroundComponent,
-  }) => {
-    const tokens = useAppDesignTokens();
-    const [selectedPkg, setSelectedPkg] = useState<PurchasesPackage | null>(null);
-    const [isProcessing, setIsProcessing] = useState(false);
-
-    const handlePurchase = useCallback(async () => {
-      if (!selectedPkg || isProcessing) return;
-      setIsProcessing(true);
-      try {
-        const success = await onPurchase(selectedPkg);
-        if (success) onClose();
-      } finally {
-        setIsProcessing(false);
-      }
-    }, [selectedPkg, isProcessing, onPurchase, onClose]);
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const [selectedPkg, setSelectedPkg] = useState<PurchasesPackage | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  if (__DEV__ && visible) {
+    console.log("[SubscriptionModal] Props Info:", {
+      packagesCount: packages.length,
+      featuresCount: features.length,
+      variant,
+      hasPrivacyUrl: !!privacyUrl,
+    });
+  }
 
-    const handleRestore = useCallback(async () => {
-      if (isProcessing) return;
-      setIsProcessing(true);
-      try {
-        const success = await onRestore();
-        if (success) onClose();
-      } finally {
-        setIsProcessing(false);
-      }
-    }, [isProcessing, onRestore, onClose]);
+  const handlePurchase = useCallback(async () => {
+    if (!selectedPkg || isProcessing) return;
+    setIsProcessing(true);
+    try {
+      if (await onPurchase(selectedPkg)) onClose();
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [selectedPkg, isProcessing, onPurchase, onClose]);
+
+  const handleRestore = useCallback(async () => {
+    if (isProcessing) return;
+    setIsProcessing(true);
+    try {
+      if (await onRestore()) onClose();
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [isProcessing, onRestore, onClose]);
 
-    if (!visible) return null;
+  if (!visible) return null;
 
-    const isFullScreen = variant === "fullscreen";
+  const ContentWrapper = variant === "fullscreen" ? SafeAreaView : View;
+  const wrapperProps = variant === "fullscreen" ? { edges: ["top", "bottom"] as const } : {};
 
-    // Fullscreen variant uses SafeAreaView, bottom-sheet uses regular View
-    const ContentWrapper = isFullScreen ? SafeAreaView : View;
-    const wrapperProps = isFullScreen ? { edges: ["top", "bottom"] as const } : {};
+  return (
+    <SubscriptionModalOverlay visible={visible} onClose={onClose} variant={variant}>
+      <ContentWrapper {...wrapperProps} style={styles.container}>
+        <SubscriptionModalHeader title={title} subtitle={subtitle} onClose={onClose} />
 
-    // Scrollable content (packages + features)
-    const ScrollContent = (
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-        bounces={false}
-      >
-        <SubscriptionPackageList
-          packages={packages}
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+          bounces={false}
+        >
+          <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}
-          onSelect={setSelectedPkg}
-          loadingText={loadingText}
-          emptyText={emptyText}
+          restoreButtonText={restoreButtonText}
+          showRestoreButton={showRestoreButton}
+          privacyUrl={privacyUrl}
+          termsUrl={termsUrl}
+          privacyText={privacyText}
+          termsOfServiceText={termsOfServiceText}
+          onPurchase={handlePurchase}
+          onRestore={handleRestore}
         />
-        {features.length > 0 && (
-          <View style={[styles.featuresSection, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-            <PaywallFeaturesList features={features} gap={12} />
-          </View>
-        )}
-      </ScrollView>
-    );
-
-    // Footer with buttons and legal links
-    const Footer = (
-      <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}
-      />
-    );
-
-    // Header with title and close button
-    const Header = (
-      <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>
-    );
-
-    // FULLSCREEN VARIANT
-    if (isFullScreen) {
-      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}>
-            <ContentWrapper {...wrapperProps} style={styles.fullscreenContainer}>
-              {Header}
-              {ScrollContent}
-              {Footer}
-            </ContentWrapper>
-          </Wrapper>
-        </Modal>
-      );
-    }
-
-    // BOTTOM-SHEET VARIANT
-    return (
-      <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
-        <View style={styles.overlay}>
-          <TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={onClose} />
-          <View style={[styles.bottomSheetContainer, { backgroundColor: tokens.colors.surface }]}>
-            {Header}
-            {ScrollContent}
-            {Footer}
-          </View>
-        </View>
-      </Modal>
-    );
-  }
-);
+      </ContentWrapper>
+    </SubscriptionModalOverlay>
+  );
+});
 
 SubscriptionModal.displayName = "SubscriptionModal";
 
 const styles = StyleSheet.create({
-  // Overlay and backdrop for bottom-sheet
-  overlay: {
+  container: {
     flex: 1,
-    justifyContent: "flex-end",
   },
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-  },
-
-  // Bottom-sheet container - KEY FIX: explicit max height calculation
-  bottomSheetContainer: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    maxHeight: SCREEN_HEIGHT * 0.85,
-    paddingTop: 16,
-    paddingBottom: 24,
-  },
-
-  // Fullscreen container
-  fullscreenContainer: {
-    flex: 1,
-    paddingTop: 16,
-  },
-
-  // Header
-  header: {
-    alignItems: "center",
-    paddingHorizontal: 24,
-    paddingBottom: 16,
-  },
-  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 - expands to fill available space, shrinks if needed
   scrollView: {
     flex: 1,
-    minHeight: 100,
   },
   scrollContent: {
     paddingHorizontal: 24,
-    paddingBottom: 16,
+    paddingBottom: 24,
     flexGrow: 1,
   },
-
-  // Features section
   featuresSection: {
-    borderRadius: 16,
-    padding: 16,
-    marginTop: 16,
+    borderRadius: 20,
+    padding: 20,
+    marginTop: 8,
   },
 });

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

@@ -0,0 +1,82 @@
+/**
+ * Subscription Modal Header Component
+ */
+
+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";
+
+interface SubscriptionModalHeaderProps {
+    title: string;
+    subtitle?: string;
+    onClose: () => void;
+}
+
+export const SubscriptionModalHeader: React.FC<SubscriptionModalHeaderProps> = ({
+    title,
+    subtitle,
+    onClose,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    if (__DEV__) {
+        console.log("[SubscriptionModalHeader] Rendering title:", title);
+    }
+
+    return (
+        <View style={styles.header}>
+            <TouchableOpacity
+                style={styles.closeButton}
+                onPress={onClose}
+                testID="subscription-modal-close-button"
+            >
+                <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>
+    );
+};
+
+const styles = StyleSheet.create({
+    header: {
+        alignItems: "center",
+        paddingHorizontal: 24,
+        paddingTop: 8,
+        paddingBottom: 16,
+    },
+    closeButton: {
+        position: "absolute",
+        top: 8,
+        right: 16,
+        padding: 8,
+        zIndex: 1,
+    },
+    closeIcon: {
+        fontSize: 28,
+        fontWeight: "300",
+    },
+    title: {
+        marginBottom: 8,
+        textAlign: "center",
+    },
+    subtitle: {
+        textAlign: "center",
+        paddingHorizontal: 20,
+    },
+});

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

@@ -0,0 +1,122 @@
+/**
+ * Subscription Modal Overlay Component
+ * Handles the Modal wrapper and backdrop logic for different variants
+ */
+
+import React from "react";
+import {
+    View,
+    Modal,
+    StyleSheet,
+    TouchableOpacity,
+    Dimensions,
+    Platform
+} from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get("window");
+
+export type SubscriptionModalVariant = "bottom-sheet" | "fullscreen" | "dialog";
+
+interface SubscriptionModalOverlayProps {
+    visible: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    variant: SubscriptionModalVariant;
+}
+
+export const SubscriptionModalOverlay: React.FC<SubscriptionModalOverlayProps> = ({
+    visible,
+    onClose,
+    children,
+    variant,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    if (__DEV__) {
+        console.log("[SubscriptionModalOverlay] Rendering variant:", variant);
+    }
+
+    const isFullScreen = variant === "fullscreen";
+
+    if (isFullScreen) {
+        return (
+            <Modal
+                visible={visible}
+                transparent={false}
+                animationType="slide"
+                onRequestClose={onClose}
+            >
+                <View style={[styles.fullscreen, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+                    {children}
+                </View>
+            </Modal>
+        );
+    }
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="fade"
+            onRequestClose={onClose}
+        >
+            <View style={styles.overlay}>
+                <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", // Bottom-sheet default
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+    },
+    fullscreen: {
+        flex: 1,
+    },
+    bottomSheet: {
+        borderTopLeftRadius: 32,
+        borderTopRightRadius: 32,
+        maxHeight: SCREEN_HEIGHT * 0.9,
+        minHeight: 400,
+        width: "100%",
+    },
+    dialog: {
+        alignSelf: "center",
+        marginBottom: "auto",
+        marginTop: "auto",
+        width: Math.min(SCREEN_WIDTH * 0.9, 450),
+        maxHeight: SCREEN_HEIGHT * 0.8,
+        borderRadius: 24,
+        overflow: "hidden",
+        ...Platform.select({
+            ios: {
+                shadowColor: "#000",
+                shadowOffset: { width: 0, height: 10 },
+                shadowOpacity: 0.3,
+                shadowRadius: 20,
+            },
+            android: {
+                elevation: 10,
+            },
+        }),
+    },
+});