@umituz/react-native-subscription 3.1.24 → 3.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "3.1.24",
+  "version": "3.1.25",
   "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;
@@ -27,54 +26,129 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
   const tokens = useAppDesignTokens();
 
   return (
-    <View style={styles.footer}>
-      {/* Purchase Button */}
+    <View style={footerStyles.container}>
+      {/* Purchase Button - Large and prominent */}
       {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 },
+            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 }]}>
               {purchaseButtonText || translations.purchaseButtonText}
             </AtomicText>
           )}
         </TouchableOpacity>
       )}
 
-      {/* Restore Button */}
+      {/* Restore Link - Minimal */}
       {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}
+        >
+          <AtomicText style={[footerStyles.restoreText, { color: tokens.colors.textSecondary }]}>
+            {translations.restoreButtonText}
           </AtomicText>
         </TouchableOpacity>
       )}
 
-      {/* Legal Links */}
-      <View style={styles.legalRow}>
+      {/* Legal Links - Minimal */}
+      <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%',
+    height: 56,
+    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: {
+    fontSize: 17,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+  },
+  restoreButton: {
+    alignItems: 'center',
+    paddingVertical: 4,
+  },
+  restoreText: {
+    fontSize: 13,
+    fontWeight: '500',
+    textDecorationLine: 'underline',
+  },
+  legalContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    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.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

@@ -220,22 +220,24 @@ 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) + 50,
+            paddingBottom: 280 // Increased for footer
           }
         ]}
         showsVerticalScrollIndicator={false}
       />
 
-      {/* Fixed Footer */}
-      <PaywallFooter
-        translations={translations}
-        legalUrls={legalUrls}
-        isProcessing={isProcessing}
-        onPurchase={handlePurchase}
-        onRestore={handleRestore}
-        onLegalClick={handleLegalUrl}
-      />
+      {/* Fixed Footer - Improved positioning */}
+      <View style={[styles.footerContainer, { paddingBottom: insets.bottom + 20 }]}>
+        <PaywallFooter
+          translations={translations}
+          legalUrls={legalUrls}
+          isProcessing={isProcessing}
+          onPurchase={handlePurchase}
+          onRestore={handleRestore}
+          onLegalClick={handleLegalUrl}
+        />
+      </View>
     </View>
   );
 });