@umituz/react-native-subscription 3.1.24 → 3.1.26

package/package.json

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

@@ -1,9 +1,8 @@
 import React from "react";
-import { View, TouchableOpacity } from "react-native";
+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 type { PaywallTranslations, PaywallLegalUrls } from "../entities/types";
-import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
 
 interface PaywallFooterProps {
   translations: PaywallTranslations;
@@ -13,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(({
@@ -23,58 +24,152 @@ 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={styles.footer}>
-      {/* Purchase Button */}
+    <View style={footerStyles.container}>
+      {/* Purchase Button - Device-responsive */}
       {onPurchase && (
         <TouchableOpacity
           onPress={onPurchase}
           disabled={isProcessing}
+          activeOpacity={0.8}
           style={[
-            styles.purchaseButton,
-            isProcessing && styles.ctaDisabled,
-            { backgroundColor: tokens.colors.primary }
+            footerStyles.purchaseButton,
+            {
+              backgroundColor: tokens.colors.primary,
+              height: buttonHeight,
+              paddingVertical: paddingVertical,
+            },
+            isProcessing && footerStyles.buttonDisabled,
           ]}
         >
           {isProcessing ? (
-            <AtomicSpinner size="sm" />
+            <View style={footerStyles.loadingContainer}>
+              <AtomicSpinner size="sm" />
+            </View>
           ) : (
-            <AtomicText style={[styles.purchaseButtonText, { color: tokens.colors.textPrimary, fontWeight: '700', fontSize: 16 }]}>
+            <AtomicText style={[footerStyles.purchaseButtonText, { color: tokens.colors.textPrimary, fontSize }]}>
               {purchaseButtonText || translations.purchaseButtonText}
             </AtomicText>
           )}
         </TouchableOpacity>
       )}
 
-      {/* Restore Button */}
+      {/* Restore Link - Device-spaced */}
       {onRestore && (
-        <TouchableOpacity onPress={onRestore} disabled={isProcessing} style={[styles.restoreButton, isProcessing && styles.ctaDisabled]}>
-          <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
-            {isProcessing ? translations.processingText : translations.restoreButtonText}
+        <TouchableOpacity
+          onPress={onRestore}
+          disabled={isProcessing}
+          activeOpacity={0.6}
+          style={[footerStyles.restoreButton, { marginTop: isTablet ? 16 : 8 }]}
+        >
+          <AtomicText style={[footerStyles.restoreText, { color: tokens.colors.textSecondary }]}>
+            {translations.restoreButtonText}
           </AtomicText>
         </TouchableOpacity>
       )}
 
-      {/* Legal Links */}
-      <View style={styles.legalRow}>
+      {/* Legal Links - Responsive spacing */}
+      <View style={footerStyles.legalContainer}>
         {legalUrls.termsUrl && (
-          <TouchableOpacity onPress={() => onLegalClick(legalUrls.termsUrl)}>
-            <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
+          <TouchableOpacity
+            onPress={() => onLegalClick(legalUrls.termsUrl)}
+            activeOpacity={0.6}
+          >
+            <AtomicText style={[footerStyles.legalText, { color: tokens.colors.textTertiary }]}>
               {translations.termsOfServiceText}
             </AtomicText>
           </TouchableOpacity>
         )}
         {legalUrls.privacyUrl && (
-          <TouchableOpacity onPress={() => onLegalClick(legalUrls.privacyUrl)}>
-            <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
-              {translations.privacyText}
-            </AtomicText>
-          </TouchableOpacity>
+          <>
+            <AtomicText style={footerStyles.legalSeparator}> • </AtomicText>
+            <TouchableOpacity
+              onPress={() => onLegalClick(legalUrls.privacyUrl)}
+              activeOpacity={0.6}
+            >
+              <AtomicText style={[footerStyles.legalText, { color: tokens.colors.textTertiary }]}>
+                {translations.privacyText}
+              </AtomicText>
+            </TouchableOpacity>
+          </>
         )}
       </View>
     </View>
   );
 });
+
+// Modern footer styles
+const footerStyles = StyleSheet.create({
+  container: {
+    width: '100%',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    gap: 12,
+  },
+  purchaseButton: {
+    width: '100%',
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  loadingContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  purchaseButtonText: {
+    fontWeight: '700',
+    letterSpacing: 0.5,
+  },
+  restoreButton: {
+    alignItems: 'center',
+  },
+  restoreText: {
+    fontWeight: '500',
+    textDecorationLine: 'underline',
+  },
+  legalContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  legalText: {
+    lineHeight: 16,
+  },
+  legalSeparator: {
+    color: 'rgba(255, 255, 255, 0.4)',
+    marginHorizontal: 4,
+  },
+});

package/src/domains/paywall/components/PaywallScreen.styles.ts

@@ -121,46 +121,31 @@ export const paywallScreenStyles = StyleSheet.create({
     letterSpacing: 0.5,
   },
 
-  // Footer Links
-  footer: {
+  // Footer container with modern design
+  footerContainer: {
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
-    paddingHorizontal: 24,
-    paddingTop: 20,
-    paddingBottom: 40,
-    borderTopWidth: 1,
-    borderTopColor: "rgba(255, 255, 255, 0.08)",
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    borderTopWidth: 0.5,
+    borderTopColor: "rgba(255, 255, 255, 0.1)",
     ...Platform.select({
       ios: {
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        backdropFilter: "blur(20px)",
         shadowColor: "#000",
-        shadowOffset: { width: 0, height: -4 },
-        shadowOpacity: 0.1,
-        shadowRadius: 12,
+        shadowOffset: { width: 0, height: -8 },
+        shadowOpacity: 0.3,
+        shadowRadius: 20,
       },
       android: {
-        elevation: 8,
+        backgroundColor: "#000000",
+        elevation: 12,
       },
     }),
   },
-  purchaseButton: {
-    borderRadius: 18,
-    height: 60,
-    justifyContent: "center",
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 6,
-    marginBottom: 16,
-  },
-  purchaseButtonText: {
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    fontSize: 16,
-  },
   restoreButton: {
     paddingVertical: 4,
   },
@@ -194,6 +179,7 @@ export const paywallScreenStyles = StyleSheet.create({
   // List
   listContent: {
     paddingBottom: 40,
+    paddingHorizontal: 20, // Add horizontal padding
   },
   loadingContainer: {
     flex: 1,

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,22 +222,27 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         contentContainerStyle={[
           styles.listContent,
           {
-            paddingTop: Math.max(insets.top, 20) + 40,
-            paddingBottom: 220
+            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 */}
-      <PaywallFooter
-        translations={translations}
-        legalUrls={legalUrls}
-        isProcessing={isProcessing}
-        onPurchase={handlePurchase}
-        onRestore={handleRestore}
-        onLegalClick={handleLegalUrl}
-      />
+      {/* Fixed Footer - Responsive positioning */}
+      <View style={[styles.footerContainer, { paddingBottom: insets.bottom + responsive.verticalPadding }]}>
+        <PaywallFooter
+          translations={translations}
+          legalUrls={legalUrls}
+          isProcessing={isProcessing}
+          onPurchase={handlePurchase}
+          onRestore={handleRestore}
+          onLegalClick={handleLegalUrl}
+          isTablet={responsive.isTabletDevice}
+          isSmallDevice={responsive.isSmallDevice}
+        />
+      </View>
     </View>
   );
 });