@umituz/react-native-subscription 2.39.6 → 2.39.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.39.6",
+  "version": "2.39.8",
   "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/PaywallScreen.styles.ts

@@ -41,7 +41,8 @@ export const paywallScreenStyles = StyleSheet.create({
     right: 0,
     paddingHorizontal: 16,
     paddingTop: 12,
-    backgroundColor: "#000",
+    borderTopWidth: 1,
+    borderTopColor: "rgba(255, 255, 255, 0.1)",
   },
   cta: {
     borderRadius: 14,

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

@@ -6,10 +6,11 @@
  */
 
 import React, { useCallback, useEffect } from "react";
-import { View, ScrollView, TouchableOpacity, Linking, StyleSheet } from "react-native";
+import { View, TouchableOpacity, Linking, StyleSheet } from "react-native";
 import { AtomicText, 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 { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { Image } from "expo-image";
 import { PlanCard } from "./PlanCard";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
@@ -77,21 +78,23 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   }, []);
 
   return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      {/* Close button */}
-      <TouchableOpacity
-        onPress={onClose}
-        style={[screenStyles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary, top: Math.max(insets.top, 12) }]}
-        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-      >
-        <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
-      </TouchableOpacity>
+    <View style={[screenStyles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {/* Close button - positioned absolutely at top */}
+      <View style={[screenStyles.headerContainer, { paddingTop: insets.top }]}>
+        <TouchableOpacity
+          onPress={onClose}
+          style={[screenStyles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
+        </TouchableOpacity>
+      </View>
 
       {/* Scrollable content */}
-      <ScrollView
-        style={screenStyles.scrollContainer}
-        contentContainerStyle={screenStyles.scroll}
-        showsVerticalScrollIndicator={false}
+      <ScreenLayout
+        scrollable={true}
+        backgroundColor="transparent"
+        contentContainerStyle={{ ...screenStyles.contentContainer, paddingBottom: 120 }}
       >
         {/* Hero Image */}
         {heroImage && (
@@ -171,28 +174,32 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
             })
           )}
         </View>
-
-        {/* Sticky footer — always visible, never hidden behind scroll content */}
-        <View style={[styles.stickyFooter, { paddingBottom: Math.max(insets.bottom, 16) }]}>
-          <TouchableOpacity
-            onPress={handlePurchase}
-            disabled={isProcessing || isLoadingPackages || !selectedPlanId}
-            style={[styles.cta, { backgroundColor: tokens.colors.primary }, (isProcessing || isLoadingPackages || !selectedPlanId) && styles.ctaDisabled]}
-            activeOpacity={0.75}
-          >
-            <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
-              {isProcessing ? translations.processingText : translations.purchaseButtonText}
-            </AtomicText>
-          </TouchableOpacity>
-          <PaywallFooter
-            translations={translations}
-            legalUrls={legalUrls}
-            isProcessing={isProcessing}
-            onRestore={onRestore ? handleRestore : undefined}
-            onLegalClick={handleLegalUrl}
-          />
-        </View>
-      </ScrollView>
+      </ScreenLayout>
+
+      {/* Fixed footer overlay - always visible at bottom */}
+      <View style={[styles.stickyFooter, { backgroundColor: tokens.colors.backgroundPrimary, paddingBottom: Math.max(insets.bottom, 16) }]}>
+        <TouchableOpacity
+          onPress={handlePurchase}
+          disabled={isProcessing || isLoadingPackages || !selectedPlanId}
+          style={[
+            styles.cta,
+            { backgroundColor: tokens.colors.primary },
+            (isProcessing || isLoadingPackages || !selectedPlanId) && styles.ctaDisabled
+          ]}
+          activeOpacity={0.75}
+        >
+          <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
+            {isProcessing ? translations.processingText : translations.purchaseButtonText}
+          </AtomicText>
+        </TouchableOpacity>
+        <PaywallFooter
+          translations={translations}
+          legalUrls={legalUrls}
+          isProcessing={isProcessing}
+          onRestore={onRestore ? handleRestore : undefined}
+          onLegalClick={handleLegalUrl}
+        />
+      </View>
     </View>
   );
 });
@@ -203,21 +210,24 @@ const screenStyles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  closeBtn: {
+  headerContainer: {
     position: 'absolute',
-    top: 12,
-    right: 12,
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1000,
+    paddingHorizontal: 12,
+    paddingTop: 12,
+  },
+  closeBtn: {
     width: 36,
     height: 36,
     borderRadius: 18,
-    zIndex: 1000,
     justifyContent: 'center',
     alignItems: 'center',
+    alignSelf: 'flex-end',
   },
-  scrollContainer: {
-    flex: 1,
-  },
-  scroll: {
-    paddingBottom: 100,
+  contentContainer: {
+    paddingTop: 60, // Space for close button
   },
 });

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

@@ -139,7 +139,13 @@ export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React
 
 PaywallFeedbackScreen.displayName = "PaywallFeedbackScreen";
 
-const createScreenStyles = (tokens: any, _insets: any) => ({
+const createScreenStyles = (
+    tokens: {
+        colors: { backgroundPrimary: string; border: string };
+        spacing: { xl: number; sm: number; md: number };
+    },
+    _insets: { top: number; bottom: number }
+) => ({
     container: {
         flex: 1,
     },