@umituz/react-native-subscription 3.1.27 → 3.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "3.1.27",
+  "version": "3.1.28",
   "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/domains/paywall/components/PaywallFooter.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import type { PaywallTranslations, PaywallLegalUrls } from "../entities/types";
 
 interface PaywallFooterProps {
@@ -12,8 +13,6 @@ interface PaywallFooterProps {
   onRestore?: () => Promise<void | boolean>;
   onLegalClick: (url: string | undefined) => void;
   purchaseButtonText?: string;
-  isTablet?: boolean;
-  isSmallDevice?: boolean;
 }
 
 export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
@@ -24,33 +23,45 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
   onRestore,
   onLegalClick,
   purchaseButtonText,
-  isTablet = false,
-  isSmallDevice = false,
 }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
 
-  // Device-based sizing
-  const buttonHeight = React.useMemo(() => {
-    if (isTablet) return 64; // Larger button on tablet
-    if (isSmallDevice) return 52; // Slightly smaller on small phones
-    return 56; // Standard size
-  }, [isTablet, isSmallDevice]);
+  // Base values that will be scaled by spacingMultiplier
+  const BASE_BUTTON_HEIGHT = 56;
+  const BASE_FONT_SIZE = 17;
+  const BASE_PADDING_VERTICAL = 16;
+  const BASE_SPACING = 12;
 
-  const fontSize = React.useMemo(() => {
-    if (isTablet) return 19;
-    if (isSmallDevice) return 16;
-    return 17;
-  }, [isTablet, isSmallDevice]);
+  // Responsive values using spacingMultiplier
+  const buttonHeight = React.useMemo(
+    () => Math.round(BASE_BUTTON_HEIGHT * responsive.spacingMultiplier),
+    [responsive, BASE_BUTTON_HEIGHT]
+  );
+
+  const fontSize = React.useMemo(
+    () => responsive.getFontSize(BASE_FONT_SIZE),
+    [responsive, BASE_FONT_SIZE]
+  );
+
+  const paddingVertical = React.useMemo(
+    () => Math.round(BASE_PADDING_VERTICAL * responsive.spacingMultiplier),
+    [responsive, BASE_PADDING_VERTICAL]
+  );
+
+  const spacing = React.useMemo(
+    () => Math.round(BASE_SPACING * responsive.spacingMultiplier),
+    [responsive, BASE_SPACING]
+  );
 
-  const paddingVertical = React.useMemo(() => {
-    if (isTablet) return 20;
-    if (isSmallDevice) return 12;
-    return 16;
-  }, [isTablet, isSmallDevice]);
+  const paddingHorizontal = React.useMemo(
+    () => responsive.horizontalPadding,
+    [responsive]
+  );
 
   return (
-    <View style={footerStyles.container}>
-      {/* Purchase Button - Device-responsive */}
+    <View style={[footerStyles.container, { paddingHorizontal, paddingVertical: spacing, gap: spacing }]}>
+      {/* Purchase Button - Responsive sizing */}
       {onPurchase && (
         <TouchableOpacity
           onPress={onPurchase}
@@ -78,13 +89,13 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
         </TouchableOpacity>
       )}
 
-      {/* Restore Link - Device-spaced */}
+      {/* Restore Link - Responsive spacing */}
       {onRestore && (
         <TouchableOpacity
           onPress={onRestore}
           disabled={isProcessing}
           activeOpacity={0.6}
-          style={[footerStyles.restoreButton, { marginTop: isTablet ? 16 : 8 }]}
+          style={[footerStyles.restoreButton, { marginTop: spacing / 2 }]}
         >
           <AtomicText style={[footerStyles.restoreText, { color: tokens.colors.textSecondary }]}>
             {translations.restoreButtonText}
@@ -126,9 +137,6 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
 const footerStyles = StyleSheet.create({
   container: {
     width: '100%',
-    paddingHorizontal: 20,
-    paddingVertical: 16,
-    gap: 12,
   },
   purchaseButton: {
     width: '100%',

package/src/domains/paywall/components/PaywallScreen.renderItem.tsx

@@ -8,6 +8,7 @@ import { View } from "react-native";
 import type { ImageSourcePropType } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { Image } from "expo-image";
 import { PlanCard } from "./PlanCard";
 import type { PaywallListItem } from "../utils/paywallLayoutUtils";
@@ -36,6 +37,25 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
   onSelectPlan,
 }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
+
+  // Responsive spacing
+  const spacing = React.useMemo(
+    () => Math.round(16 * responsive.spacingMultiplier),
+    [responsive]
+  );
+
+  // Responsive feature icon size
+  const featureIconSize = React.useMemo(
+    () => responsive.getIconSize(30),
+    [responsive]
+  );
+
+  // Responsive hero image size
+  const heroImageSize = React.useMemo(
+    () => responsive.getIconSize(120),
+    [responsive]
+  );
 
   if (!translations) return null;
 
@@ -43,10 +63,15 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
     case 'HEADER':
       return (
         <View key="header">
-          {/* Hero Image */}
+          {/* Hero Image - Responsive sizing */}
           {heroImage && (
             <View style={styles.heroContainer}>
-              <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={200} />
+              <Image
+                source={heroImage}
+                style={[styles.heroImage, { width: heroImageSize, height: heroImageSize, borderRadius: heroImageSize * 0.25 }]}
+                contentFit="cover"
+                transition={200}
+              />
             </View>
           )}
 
@@ -66,7 +91,7 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
 
     case 'FEATURE_HEADER':
       return (
-        <View key="feat-header" style={styles.sectionHeader}>
+        <View key="feat-header" style={[styles.sectionHeader, { marginTop: spacing * 1.5 }]}>
           <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
             {translations.featuresTitle || "WHAT'S INCLUDED"}
           </AtomicText>
@@ -75,9 +100,13 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
 
     case 'FEATURE':
       return (
-        <View key={`feat-${item.feature.text}`} style={styles.featureRow}>
-          <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primary }]}>
-            <AtomicIcon name={item.feature.icon} customSize={16} customColor={tokens.colors.onPrimary} />
+        <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginBottom: spacing }]}>
+          <View style={[styles.featureIcon, { width: featureIconSize, height: featureIconSize, backgroundColor: tokens.colors.primary }]}>
+            <AtomicIcon
+              name={item.feature.icon}
+              customSize={responsive.getFontSize(16)}
+              customColor={tokens.colors.onPrimary}
+            />
           </View>
           <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
             {item.feature.text}
@@ -87,7 +116,7 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
 
     case 'PLAN_HEADER':
       return (
-        <View key="plan-header" style={styles.sectionHeader}>
+        <View key="plan-header" style={[styles.sectionHeader, { marginTop: spacing * 1.5 }]}>
           <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
             {translations.plansTitle || "CHOOSE YOUR PLAN"}
           </AtomicText>

package/src/domains/paywall/components/PaywallScreen.tsx

@@ -242,8 +242,6 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
           onPurchase={handlePurchase}
           onRestore={handleRestore}
           onLegalClick={handleLegalUrl}
-          isTablet={responsive.isTabletDevice}
-          isSmallDevice={responsive.isSmallDevice}
         />
       </View>
     </View>