@umituz/react-native-subscription 3.1.25 → 3.1.27

package/package.json

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

@@ -12,6 +12,8 @@ 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(({
@@ -22,12 +24,33 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
   onRestore,
   onLegalClick,
   purchaseButtonText,
+  isTablet = false,
+  isSmallDevice = false,
 }) => {
   const tokens = useAppDesignTokens();
 
+  // 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]);
+
+  const fontSize = React.useMemo(() => {
+    if (isTablet) return 19;
+    if (isSmallDevice) return 16;
+    return 17;
+  }, [isTablet, isSmallDevice]);
+
+  const paddingVertical = React.useMemo(() => {
+    if (isTablet) return 20;
+    if (isSmallDevice) return 12;
+    return 16;
+  }, [isTablet, isSmallDevice]);
+
   return (
     <View style={footerStyles.container}>
-      {/* Purchase Button - Large and prominent */}
+      {/* Purchase Button - Device-responsive */}
       {onPurchase && (
         <TouchableOpacity
           onPress={onPurchase}
@@ -35,7 +58,11 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
           activeOpacity={0.8}
           style={[
             footerStyles.purchaseButton,
-            { backgroundColor: tokens.colors.primary },
+            {
+              backgroundColor: tokens.colors.primary,
+              height: buttonHeight,
+              paddingVertical: paddingVertical,
+            },
             isProcessing && footerStyles.buttonDisabled,
           ]}
         >
@@ -44,20 +71,20 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
               <AtomicSpinner size="sm" />
             </View>
           ) : (
-            <AtomicText style={[footerStyles.purchaseButtonText, { color: tokens.colors.textPrimary }]}>
+            <AtomicText style={[footerStyles.purchaseButtonText, { color: tokens.colors.textPrimary, fontSize }]}>
               {purchaseButtonText || translations.purchaseButtonText}
             </AtomicText>
           )}
         </TouchableOpacity>
       )}
 
-      {/* Restore Link - Minimal */}
+      {/* Restore Link - Device-spaced */}
       {onRestore && (
         <TouchableOpacity
           onPress={onRestore}
           disabled={isProcessing}
           activeOpacity={0.6}
-          style={footerStyles.restoreButton}
+          style={[footerStyles.restoreButton, { marginTop: isTablet ? 16 : 8 }]}
         >
           <AtomicText style={[footerStyles.restoreText, { color: tokens.colors.textSecondary }]}>
             {translations.restoreButtonText}
@@ -65,7 +92,7 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
         </TouchableOpacity>
       )}
 
-      {/* Legal Links - Minimal */}
+      {/* Legal Links - Responsive spacing */}
       <View style={footerStyles.legalContainer}>
         {legalUrls.termsUrl && (
           <TouchableOpacity
@@ -105,7 +132,6 @@ const footerStyles = StyleSheet.create({
   },
   purchaseButton: {
     width: '100%',
-    height: 56,
     borderRadius: 16,
     justifyContent: 'center',
     alignItems: 'center',
@@ -123,16 +149,13 @@ const footerStyles = StyleSheet.create({
     alignItems: 'center',
   },
   purchaseButtonText: {
-    fontSize: 17,
     fontWeight: '700',
     letterSpacing: 0.5,
   },
   restoreButton: {
     alignItems: 'center',
-    paddingVertical: 4,
   },
   restoreText: {
-    fontSize: 13,
     fontWeight: '500',
     textDecorationLine: 'underline',
   },
@@ -143,11 +166,9 @@ const footerStyles = StyleSheet.create({
     flexWrap: 'wrap',
   },
   legalText: {
-    fontSize: 11,
     lineHeight: 16,
   },
   legalSeparator: {
-    fontSize: 11,
     color: 'rgba(255, 255, 255, 0.4)',
     marginHorizontal: 4,
   },

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

@@ -7,15 +7,16 @@ 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 { 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 +27,6 @@ interface PaywallRenderItemProps {
 
 export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
   item,
-  tokens,
   translations,
   heroImage,
   selectedPlanId,
@@ -35,6 +35,8 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
   creditsLabel,
   onSelectPlan,
 }) => {
+  const tokens = useAppDesignTokens();
+
   if (!translations) return null;
 
   switch (item.type) {
@@ -73,7 +75,7 @@ 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 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>

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

@@ -18,6 +18,7 @@ import { useNavigation } from "@react-navigation/native";
 import { AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
 import { PaywallFooter } from "./PaywallFooter";
 import { usePaywallActions } from "../hooks/usePaywallActions";
@@ -29,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();
 
@@ -61,6 +66,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
 
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
+  const responsive = useResponsive();
 
   const handleClose = useCallback(() => {
     if (__DEV__) console.log('[PaywallScreen] 🔙 Closing paywall');
@@ -146,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}
@@ -156,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) => {
@@ -190,11 +195,11 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
       <StatusBar barStyle="light-content" />
 
-      {/* Absolute Close Button */}
+      {/* Absolute Close Button - Responsive positioning */}
       <View style={{
         position: 'absolute',
         top: Math.max(insets.top, 16),
-        right: 0,
+        right: 16,
         zIndex: 10,
       }}>
         <TouchableOpacity
@@ -206,7 +211,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         </TouchableOpacity>
       </View>
 
-      {/* Main Content */}
+      {/* Main Content - Responsive spacing */}
       <FlatList
         data={flatData}
         renderItem={renderItem}
@@ -220,15 +225,16 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         contentContainerStyle={[
           styles.listContent,
           {
-            paddingTop: Math.max(insets.top, 20) + 50,
-            paddingBottom: 280 // Increased for footer
+            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
           }
         ]}
         showsVerticalScrollIndicator={false}
       />
 
-      {/* Fixed Footer - Improved positioning */}
-      <View style={[styles.footerContainer, { paddingBottom: insets.bottom + 20 }]}>
+      {/* Fixed Footer - Responsive positioning */}
+      <View style={[styles.footerContainer, { paddingBottom: insets.bottom + responsive.verticalPadding }]}>
         <PaywallFooter
           translations={translations}
           legalUrls={legalUrls}
@@ -236,6 +242,8 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
           onPurchase={handlePurchase}
           onRestore={handleRestore}
           onLegalClick={handleLegalUrl}
+          isTablet={responsive.isTabletDevice}
+          isSmallDevice={responsive.isSmallDevice}
         />
       </View>
     </View>