@umituz/react-native-subscription 3.1.26 → 3.1.28

package/package.json

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

@@ -7,15 +7,17 @@ import React from "react";
 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";
+import type { PaywallTranslations } from "../entities/types";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
 
 interface PaywallRenderItemProps {
   item: PaywallListItem;
-  tokens: any;
-  translations: any;
+  translations: PaywallTranslations;
   heroImage?: ImageSourcePropType;
   selectedPlanId?: string;
   bestValueIdentifier?: string;
@@ -26,7 +28,6 @@ interface PaywallRenderItemProps {
 
 export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
   item,
-  tokens,
   translations,
   heroImage,
   selectedPlanId,
@@ -35,16 +36,42 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
   creditsLabel,
   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;
 
   switch (item.type) {
     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>
           )}
 
@@ -64,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>
@@ -73,9 +100,13 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
 
     case 'FEATURE':
       return (
-        <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginHorizontal: 24, marginBottom: 16 }]}>
-          <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}
@@ -85,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.styles.ts

@@ -61,6 +61,8 @@ export const paywallScreenStyles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 14,
+    marginHorizontal: 24,
+    marginBottom: 16,
   },
   featureIcon: {
     width: 30,

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

@@ -30,6 +30,10 @@ import {
 import { hasItems } from "../../../shared/utils/arrayUtils";
 import { PaywallRenderItem } from "./PaywallScreen.renderItem";
 
+// Paywall layout constants
+const PAYWALL_HEADER_HEIGHT = 60; // Close button + spacing
+const PAYWALL_FOOTER_HEIGHT_BASE = 280; // Base footer height
+
 export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) => {
   const navigation = useNavigation();
 
@@ -148,7 +152,6 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     return (
       <PaywallRenderItem
         item={item}
-        tokens={tokens}
         translations={translations}
         heroImage={heroImage}
         selectedPlanId={selectedPlanId ?? undefined}
@@ -158,7 +161,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         onSelectPlan={setSelectedPlanId}
       />
     );
-  }, [tokens, translations, heroImage, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
+  }, [translations, heroImage, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
 
   // Performance Optimization: getItemLayout for FlatList
   const getItemLayout = useCallback((_data: ArrayLike<PaywallListItem> | null | undefined, index: number) => {
@@ -222,8 +225,8 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         contentContainerStyle={[
           styles.listContent,
           {
-            paddingTop: Math.max(insets.top, 20) + 60, // Responsive header spacing
-            paddingBottom: 280 + responsive.verticalPadding, // Dynamic footer spacing
+            paddingTop: Math.max(insets.top, 20) + PAYWALL_HEADER_HEIGHT, // Responsive header spacing
+            paddingBottom: PAYWALL_FOOTER_HEIGHT_BASE + responsive.verticalPadding, // Dynamic footer spacing
             paddingHorizontal: responsive.horizontalPadding, // Device-based horizontal padding
           }
         ]}
@@ -239,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>