@umituz/react-native-subscription 3.1.25 → 3.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "3.1.25",
+  "version": "3.1.26",
   "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.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";
@@ -61,6 +62,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');
@@ -190,11 +192,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 +208,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 +222,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) + 60, // Responsive header spacing
+            paddingBottom: 280 + 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 +239,8 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
           onPurchase={handlePurchase}
           onRestore={handleRestore}
           onLegalClick={handleLegalUrl}
+          isTablet={responsive.isTabletDevice}
+          isSmallDevice={responsive.isSmallDevice}
         />
       </View>
     </View>