@umituz/react-native-subscription 2.39.5 → 2.39.7

package/package.json

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

@@ -35,13 +35,10 @@ export const paywallScreenStyles = StyleSheet.create({
     marginTop: 12,
   },
   stickyFooter: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    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";
@@ -76,148 +77,145 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     }
   }, []);
 
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      {/* Close button */}
+  // Close button for header
+  const closeButton = (
+    <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>
+  );
+
+  // Sticky footer with CTA and restore/legal links
+  const footerContent = (
+    <View style={[styles.stickyFooter, { paddingBottom: insets.bottom || 16 }]}>
       <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 }}
+        onPress={handlePurchase}
+        disabled={isProcessing || isLoadingPackages || !selectedPlanId}
+        style={[
+          styles.cta,
+          { backgroundColor: tokens.colors.primary },
+          (isProcessing || isLoadingPackages || !selectedPlanId) && styles.ctaDisabled
+        ]}
+        activeOpacity={0.75}
       >
-        <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
+        <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>
+  );
 
-      {/* Scrollable content */}
-      <ScrollView
-        style={screenStyles.scrollContainer}
-        contentContainerStyle={screenStyles.scroll}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* Hero Image */}
-        {heroImage && (
-          <View style={styles.heroContainer}>
-            <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={0} />
-          </View>
-        )}
-
-        {/* Header */}
-        <View style={styles.header}>
+  return (
+    <ScreenLayout
+      scrollable={true}
+      backgroundColor={tokens.colors.backgroundPrimary}
+      header={closeButton}
+      footer={footerContent}
+      contentContainerStyle={screenStyles.contentContainer}
+    >
+      {/* Hero Image */}
+      {heroImage && (
+        <View style={styles.heroContainer}>
+          <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={0} />
+        </View>
+      )}
+
+      {/* Header */}
+      <View style={styles.header}>
+        <AtomicText
+          type="headlineMedium"
+          adjustsFontSizeToFit
+          numberOfLines={2}
+          minimumFontScale={0.75}
+          style={[styles.title, { color: tokens.colors.textPrimary }]}
+        >
+          {translations.title}
+        </AtomicText>
+        {translations.subtitle && (
           <AtomicText
-            type="headlineMedium"
+            type="bodyMedium"
             adjustsFontSizeToFit
-            numberOfLines={2}
-            minimumFontScale={0.75}
-            style={[styles.title, { color: tokens.colors.textPrimary }]}
+            numberOfLines={3}
+            minimumFontScale={0.8}
+            style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
           >
-            {translations.title}
+            {translations.subtitle}
           </AtomicText>
-          {translations.subtitle && (
-            <AtomicText
-              type="bodyMedium"
-              adjustsFontSizeToFit
-              numberOfLines={3}
-              minimumFontScale={0.8}
-              style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
-            >
-              {translations.subtitle}
-            </AtomicText>
-          )}
-        </View>
+        )}
+      </View>
+
+      {/* Features */}
+      <PaywallFeatures features={features} />
 
-        {/* Features */}
-        <PaywallFeatures features={features} />
-
-        {/* Plans */}
-        <View style={styles.plans}>
-          {isLoadingPackages ? (
-            <View style={styles.loading}>
-              <AtomicSpinner size="md" />
-              {translations.processingText && (
-                <AtomicText
-                  type="bodySmall"
-                  style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
-                >
-                  {translations.processingText}
-                </AtomicText>
-              )}
-            </View>
-          ) : packages.length === 0 ? (
-            <View style={styles.loading}>
+      {/* Plans */}
+      <View style={styles.plans}>
+        {isLoadingPackages ? (
+          <View style={styles.loading}>
+            <AtomicSpinner size="md" />
+            {translations.processingText && (
               <AtomicText
-                type="bodyMedium"
-                style={{ color: tokens.colors.textSecondary, textAlign: "center" }}
+                type="bodySmall"
+                style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
               >
-                {translations.emptyText ?? "No packages available"}
+                {translations.processingText}
               </AtomicText>
-            </View>
-          ) : (
-            packages.map((pkg) => {
-              const pid = pkg.product.identifier;
-              const isSelected = selectedPlanId === pid;
-              const isBestValue = bestValueIdentifier === pid;
-              const credits = creditAmounts?.[pid];
-
-              return (
-                <PlanCard
-                  key={pid}
-                  pkg={pkg}
-                  isSelected={isSelected}
-                  badge={isBestValue ? translations.bestValueBadgeText : undefined}
-                  creditAmount={credits}
-                  creditsLabel={creditsLabel}
-                  onSelect={() => setSelectedPlanId(pid)}
-                />
-              );
-            })
-          )}
-        </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}
+            )}
+          </View>
+        ) : packages.length === 0 ? (
+          <View style={styles.loading}>
+            <AtomicText
+              type="bodyMedium"
+              style={{ color: tokens.colors.textSecondary, textAlign: "center" }}
+            >
+              {translations.emptyText ?? "No packages available"}
             </AtomicText>
-          </TouchableOpacity>
-          <PaywallFooter
-            translations={translations}
-            legalUrls={legalUrls}
-            isProcessing={isProcessing}
-            onRestore={onRestore ? handleRestore : undefined}
-            onLegalClick={handleLegalUrl}
-          />
-        </View>
-      </ScrollView>
-    </View>
+          </View>
+        ) : (
+          packages.map((pkg) => {
+            const pid = pkg.product.identifier;
+            const isSelected = selectedPlanId === pid;
+            const isBestValue = bestValueIdentifier === pid;
+            const credits = creditAmounts?.[pid];
+
+            return (
+              <PlanCard
+                key={pid}
+                pkg={pkg}
+                isSelected={isSelected}
+                badge={isBestValue ? translations.bestValueBadgeText : undefined}
+                creditAmount={credits}
+                creditsLabel={creditsLabel}
+                onSelect={() => setSelectedPlanId(pid)}
+              />
+            );
+          })
+        )}
+      </View>
+    </ScreenLayout>
   );
 });
 
 PaywallScreen.displayName = "PaywallScreen";
 
 const screenStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   closeBtn: {
-    position: 'absolute',
-    top: 12,
-    right: 12,
     width: 36,
     height: 36,
     borderRadius: 18,
-    zIndex: 1000,
     justifyContent: 'center',
     alignItems: 'center',
   },
-  scrollContainer: {
-    flex: 1,
-  },
-  scroll: {
-    paddingBottom: 100,
+  contentContainer: {
+    paddingBottom: 16,
   },
 });

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

@@ -21,7 +21,7 @@ export const FeedbackOption: React.FC<FeedbackOptionProps> = React.memo(({
 
   const containerStyle = {
     marginBottom: tokens.spacing.sm,
-    backgroundColor: tokens.colors.surfaceVariant,
+    backgroundColor: tokens.colors.surfaceSecondary,
     borderRadius: tokens.borderRadius.md,
     overflow: "hidden" as const,
   };

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

@@ -7,7 +7,7 @@
  */
 
 import React, { useMemo, useCallback } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { View, ScrollView, TouchableOpacity } from "react-native";
 import { AtomicText, AtomicIcon } 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";
@@ -114,7 +114,7 @@ export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React
                     style={[
                         screenStyles.submitButton,
                         {
-                            backgroundColor: canSubmit ? tokens.colors.primary : tokens.colors.surfaceVariant,
+                            backgroundColor: canSubmit ? tokens.colors.primary : tokens.colors.surfaceSecondary,
                             opacity: canSubmit ? 1 : 0.6,
                         }
                     ]}
@@ -139,7 +139,7 @@ export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React
 
 PaywallFeedbackScreen.displayName = "PaywallFeedbackScreen";
 
-const createScreenStyles = (tokens: any, insets: any) => ({
+const createScreenStyles = (tokens: any, _insets: any) => ({
     container: {
         flex: 1,
     },

package/src/domains/subscription/presentation/screens/SubscriptionDetailScreen.tsx

@@ -39,7 +39,7 @@ export const SubscriptionDetailScreen: React.FC<SubscriptionDetailScreenProps> =
               onPress={config.onClose}
               style={({ pressed }) => ({
                 width: 44, height: 44, justifyContent: "center", alignItems: "center",
-                backgroundColor: pressed ? tokens.colors.surfaceVariant : tokens.colors.surface,
+                backgroundColor: pressed ? tokens.colors.surfaceSecondary : tokens.colors.surface,
                 borderRadius: tokens.radius.full,
               })}
             >