@umituz/react-native-subscription 3.1.21 → 3.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "3.1.21",
+  "version": "3.1.23",
   "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,6 +1,6 @@
 import React from "react";
 import { View, TouchableOpacity } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
+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";
@@ -9,21 +9,47 @@ interface PaywallFooterProps {
   translations: PaywallTranslations;
   legalUrls: PaywallLegalUrls;
   isProcessing: boolean;
+  onPurchase?: () => void | Promise<void>;
   onRestore?: () => Promise<void | boolean>;
   onLegalClick: (url: string | undefined) => void;
+  purchaseButtonText?: string;
 }
 
 export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
   translations,
   legalUrls,
   isProcessing,
+  onPurchase,
   onRestore,
   onLegalClick,
+  purchaseButtonText,
 }) => {
   const tokens = useAppDesignTokens();
-  
+
   return (
     <View style={styles.footer}>
+      {/* Purchase Button */}
+      {onPurchase && (
+        <TouchableOpacity
+          onPress={onPurchase}
+          disabled={isProcessing}
+          style={[
+            styles.purchaseButton,
+            isProcessing && styles.ctaDisabled,
+            { backgroundColor: tokens.colors.primary }
+          ]}
+        >
+          {isProcessing ? (
+            <AtomicSpinner size="sm" />
+          ) : (
+            <AtomicText type="body" style={[styles.purchaseButtonText, { color: tokens.colors.textPrimary }]}>
+              {purchaseButtonText || translations.purchaseButtonText}
+            </AtomicText>
+          )}
+        </TouchableOpacity>
+      )}
+
+      {/* Restore Button */}
       {onRestore && (
         <TouchableOpacity onPress={onRestore} disabled={isProcessing} style={[styles.restoreButton, isProcessing && styles.ctaDisabled]}>
           <AtomicText type="bodySmall" style={[styles.footerLink, { color: tokens.colors.textSecondary }]}>
@@ -31,6 +57,8 @@ export const PaywallFooter: React.FC<PaywallFooterProps> = React.memo(({
           </AtomicText>
         </TouchableOpacity>
       )}
+
+      {/* Legal Links */}
       <View style={styles.legalRow}>
         {legalUrls.termsUrl && (
           <TouchableOpacity onPress={() => onLegalClick(legalUrls.termsUrl)}>

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

@@ -123,9 +123,43 @@ export const paywallScreenStyles = StyleSheet.create({
 
   // Footer Links
   footer: {
-    marginTop: 16,
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 24,
+    paddingTop: 20,
+    paddingBottom: 40,
+    borderTopWidth: 1,
+    borderTopColor: "rgba(255, 255, 255, 0.08)",
+    ...Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+  purchaseButton: {
+    borderRadius: 18,
+    height: 60,
+    justifyContent: "center",
     alignItems: "center",
-    gap: 12,
+    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,

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

@@ -75,6 +75,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     selectedPlanId,
     setSelectedPlanId,
     isProcessing,
+    handlePurchase,
     handleRestore,
     resetState
   } = usePaywallActions({
@@ -231,6 +232,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         translations={translations}
         legalUrls={legalUrls}
         isProcessing={isProcessing}
+        onPurchase={handlePurchase}
         onRestore={handleRestore}
         onLegalClick={handleLegalUrl}
       />

package/src/domains/subscription/presentation/components/feedback/PaywallFeedbackScreen.tsx

@@ -9,6 +9,7 @@
 import React, { useMemo } from "react";
 import { View, ScrollView } from "react-native";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { usePaywallFeedback } from "../../../../../presentation/hooks/feedback/usePaywallFeedback";
 import type { PaywallFeedbackScreenProps, PaywallFeedbackTranslations } from "./PaywallFeedbackScreen.types";
 import {
@@ -27,6 +28,7 @@ export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React
   onSubmit,
 }) => {
   const insets = useSafeAreaInsets();
+  const tokens = useAppDesignTokens();
 
   const {
     selectedReason,
@@ -41,13 +43,13 @@ export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React
   const screenStyles = useMemo(() => createScreenStyles(), []);
 
   return (
-    <View style={[screenStyles.container, { backgroundColor: 'white', opacity: 1 }]}>
+    <View style={[screenStyles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
       {/* Close button */}
       <FeedbackCloseButton
         onPress={handleSkip}
         topInset={insets.top}
-        backgroundColor="rgba(0,0,0,0.05)"
-        iconColor="#000"
+        backgroundColor={tokens.colors.surfaceSecondary}
+        iconColor={tokens.colors.textPrimary}
       />
 
       {/* Scrollable content */}
@@ -60,8 +62,8 @@ export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React
         <FeedbackHeader
           title={translations.title}
           subtitle={translations.subtitle}
-          titleColor="#000"
-          subtitleColor="#666"
+          titleColor={tokens.colors.textPrimary}
+          subtitleColor={tokens.colors.textSecondary}
           style={screenStyles.header}
         />
 
@@ -81,8 +83,8 @@ export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React
       <FeedbackSubmitButton
         title={translations.submit}
         canSubmit={canSubmit}
-        backgroundColor="#007AFF"
-        textColor="#FFF"
+        backgroundColor={tokens.colors.primary}
+        textColor={tokens.colors.textPrimary}
         onPress={handleSubmit}
         bottomInset={insets.bottom}
       />