@umituz/react-native-subscription 2.2.28 → 2.2.30

package/package.json

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

@@ -94,10 +94,15 @@ export {
 export {
   SubscriptionModal,
   type SubscriptionModalProps,
+  type SubscriptionModalStyles,
 } from "./presentation/components/paywall/SubscriptionModal";
 
 export { SubscriptionModalHeader } from "./presentation/components/paywall/SubscriptionModalHeader";
-export { SubscriptionModalOverlay, type SubscriptionModalVariant } from "./presentation/components/paywall/SubscriptionModalOverlay";
+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";

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

@@ -12,14 +12,17 @@ interface PaywallHeaderProps {
   title: string;
   subtitle?: string;
   onClose: () => void;
+  variant?: "bottom-sheet" | "fullscreen" | "dialog";
 }
 
 export const PaywallHeader: React.FC<PaywallHeaderProps> = React.memo(
-  ({ title, subtitle, onClose }) => {
+  ({ title, subtitle, onClose, variant = "bottom-sheet" }) => {
     const tokens = useAppDesignTokens();
 
+    const containerStyle = variant === "fullscreen" ? styles.containerFullscreen : styles.container;
+
     return (
-      <View style={styles.container}>
+      <View style={containerStyle}>
         <View style={styles.titleContainer}>
           <AtomicText
             type="headlineLarge"
@@ -62,6 +65,14 @@ const styles = StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 16,
   },
+  containerFullscreen: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
+    paddingTop: 48,
+    paddingBottom: 16,
+  },
   titleContainer: {
     flex: 1,
     marginRight: 16,

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

@@ -110,6 +110,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
                 title={displayTitle}
                 subtitle={displaySubtitle}
                 onClose={onClose}
+                variant="fullscreen"
               />
 
               <PaywallTabBar

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

@@ -9,12 +9,22 @@ 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 {
+  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;
@@ -36,9 +46,16 @@ export interface SubscriptionModalProps {
   termsOfServiceText?: string;
   showRestoreButton?: boolean;
   variant?: SubscriptionModalVariant;
-  BackgroundComponent?: React.ComponentType<any>;
+  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,
@@ -61,9 +78,13 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     termsOfServiceText,
     showRestoreButton = true,
     variant = "bottom-sheet",
+    layoutConfig,
+    styleConfig,
   } = props;
 
   const tokens = useAppDesignTokens();
+  const styles_ = { ...DEFAULT_STYLES, ...styleConfig };
+
   const {
     selectedPkg,
     setSelectedPkg,
@@ -76,19 +97,47 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     onClose,
   });
 
+  if (__DEV__) {
+    console.log("[SubscriptionModal] Rendering", {
+      visible,
+      variant,
+      packagesCount: packages.length,
+      featuresCount: features.length,
+      isLoading,
+      layoutConfig,
+      styleConfig: styles_,
+    });
+  }
+
   if (!visible) return null;
 
-  const ContentWrapper = View;
-  const containerStyle = variant === "fullscreen" ? styles.fullscreenContainer : styles.container;
+  const isFullscreen = variant === "fullscreen";
+  const containerPaddingTop = isFullscreen ? styles_.headerTopPadding : 0;
 
   return (
-    <SubscriptionModalOverlay visible={visible} onClose={onClose} variant={variant}>
-      <ContentWrapper style={containerStyle}>
-        <SubscriptionModalHeader title={title} subtitle={subtitle} onClose={onClose} />
+    <SubscriptionModalOverlay
+      visible={visible}
+      onClose={onClose}
+      variant={variant}
+      layoutConfig={layoutConfig}
+    >
+      <View style={[styles.container, { paddingTop: containerPaddingTop }]}>
+        <SubscriptionModalHeader
+          title={title}
+          subtitle={subtitle}
+          onClose={onClose}
+          variant={variant}
+        />
 
         <ScrollView
           style={styles.scrollView}
-          contentContainerStyle={styles.scrollContent}
+          contentContainerStyle={[
+            styles.scrollContent,
+            {
+              paddingHorizontal: styles_.contentHorizontalPadding,
+              paddingBottom: styles_.contentBottomPadding,
+            }
+          ]}
           showsVerticalScrollIndicator={false}
           bounces={false}
         >
@@ -124,7 +173,7 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
           onPurchase={handlePurchase}
           onRestore={handleRestore}
         />
-      </ContentWrapper>
+      </View>
     </SubscriptionModalOverlay>
   );
 });
@@ -136,19 +185,11 @@ const styles = StyleSheet.create({
     flex: 1,
     width: "100%",
   },
-  fullscreenContainer: {
-    flex: 1,
-    width: "100%",
-    paddingTop: 20,
-    paddingBottom: 20,
-  },
   scrollView: {
     flex: 1,
     width: "100%",
   },
   scrollContent: {
-    paddingHorizontal: 24,
-    paddingBottom: 32,
     flexGrow: 1,
   },
   featuresSection: {

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

@@ -11,17 +11,19 @@ interface SubscriptionModalHeaderProps {
     title: string;
     subtitle?: string;
     onClose: () => void;
+    variant?: "bottom-sheet" | "fullscreen" | "dialog";
 }
 
 export const SubscriptionModalHeader: React.FC<SubscriptionModalHeaderProps> = ({
     title,
     subtitle,
     onClose,
+    variant = "bottom-sheet",
 }) => {
     const tokens = useAppDesignTokens();
 
     if (__DEV__) {
-        console.log("[SubscriptionModalHeader] Rendering title:", title);
+        console.log("[SubscriptionModalHeader] Rendering", { title, variant, hasSubtitle: !!subtitle });
     }
 
     return (
@@ -57,7 +59,7 @@ const styles = StyleSheet.create({
     header: {
         alignItems: "center",
         paddingHorizontal: 24,
-        paddingTop: 8,
+        paddingTop: 16,
         paddingBottom: 16,
     },
     closeButton: {

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

@@ -10,7 +10,8 @@ import {
     StyleSheet,
     TouchableOpacity,
     Dimensions,
-    Platform
+    Platform,
+    ViewStyle,
 } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
@@ -18,11 +19,30 @@ 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> = ({
@@ -30,15 +50,42 @@ export const SubscriptionModalOverlay: React.FC<SubscriptionModalOverlayProps> =
     onClose,
     children,
     variant,
+    layoutConfig,
 }) => {
     const tokens = useAppDesignTokens();
+    const config = { ...DEFAULT_LAYOUT, ...layoutConfig };
 
     if (__DEV__) {
-        console.log("[SubscriptionModalOverlay] Rendering variant:", variant);
+        console.log("[SubscriptionModalOverlay] Rendering", {
+            variant,
+            visible,
+            layoutConfig: config,
+        });
     }
 
     const isFullScreen = variant === "fullscreen";
 
+    const getFullscreenContentStyle = (): ViewStyle => ({
+        width: Math.min(SCREEN_WIDTH * (config.widthPercent ?? 0.92), config.maxWidth ?? 480),
+        maxHeight: SCREEN_HEIGHT * (config.maxHeightPercent ?? 0.88),
+        borderRadius: config.borderRadius ?? 32,
+        overflow: "hidden",
+        borderWidth: 1,
+        borderColor: "rgba(255, 255, 255, 0.08)",
+        backgroundColor: tokens.colors.surface,
+        ...Platform.select({
+            ios: {
+                shadowColor: "#000",
+                shadowOffset: { width: 0, height: 16 },
+                shadowOpacity: 0.5,
+                shadowRadius: 32,
+            },
+            android: {
+                elevation: 16,
+            },
+        }),
+    });
+
     if (isFullScreen) {
         return (
             <Modal
@@ -47,13 +94,16 @@ export const SubscriptionModalOverlay: React.FC<SubscriptionModalOverlayProps> =
                 animationType="fade"
                 onRequestClose={onClose}
             >
-                <View style={styles.fullscreenOverlay}>
+                <View style={[styles.fullscreenOverlay, { paddingHorizontal: config.horizontalPadding }]}>
                     <TouchableOpacity
-                        style={styles.fullscreenBackdrop}
+                        style={[
+                            styles.fullscreenBackdrop,
+                            { backgroundColor: `rgba(0, 0, 0, ${config.backdropOpacity ?? 0.85})` }
+                        ]}
                         activeOpacity={1}
                         onPress={onClose}
                     />
-                    <View style={[styles.fullscreenContent, { backgroundColor: tokens.colors.surface }]}>
+                    <View style={getFullscreenContentStyle()}>
                         {children}
                     </View>
                 </View>
@@ -104,30 +154,9 @@ const styles = StyleSheet.create({
         flex: 1,
         justifyContent: "center",
         alignItems: "center",
-        paddingHorizontal: 20,
     },
     fullscreenBackdrop: {
         ...StyleSheet.absoluteFillObject,
-        backgroundColor: "rgba(0, 0, 0, 0.85)",
-    },
-    fullscreenContent: {
-        width: Math.min(SCREEN_WIDTH * 0.92, 480),
-        maxHeight: SCREEN_HEIGHT * 0.88,
-        borderRadius: 32,
-        overflow: "hidden",
-        borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.08)",
-        ...Platform.select({
-            ios: {
-                shadowColor: "#000",
-                shadowOffset: { width: 0, height: 16 },
-                shadowOpacity: 0.5,
-                shadowRadius: 32,
-            },
-            android: {
-                elevation: 16,
-            },
-        }),
     },
     bottomSheet: {
         borderTopLeftRadius: 32,