@umituz/react-native-subscription 2.37.94 → 2.37.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.37.94",
+  "version": "2.37.97",
   "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/PaywallContainer.tsx

@@ -30,7 +30,7 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
 
   const purchaseSource = source ?? currentSource ?? "settings";
 
-  const { data: packages = [] } = useSubscriptionPackages();
+  const { data: packages = [], isLoading: isLoadingPackages } = useSubscriptionPackages();
 
   const { handlePurchase: performPurchase, handleRestore: performRestore } = useAuthAwarePurchase({
     source: purchaseSource
@@ -68,6 +68,7 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
       onPurchaseError={onPurchaseError}
       onAuthRequired={onAuthRequired}
       source={purchaseSource}
+      isLoadingPackages={isLoadingPackages}
     />
   );
 };

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

@@ -1,5 +1,6 @@
 import { StyleSheet } from "react-native";
 
+
 export const paywallModalStyles = StyleSheet.create({
     modalContent: { padding: 0, borderWidth: 0, overflow: "hidden" },
     container: { flex: 1 },
@@ -34,6 +35,7 @@ export const paywallModalStyles = StyleSheet.create({
     loading: { alignItems: "center", paddingVertical: 24 },
     loadingText: { marginTop: 8 },
     plans: { marginBottom: 12 },
+    stickyFooter: { paddingHorizontal: 16, paddingTop: 12, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: "rgba(128,128,128,0.2)" },
     cta: { borderRadius: 12, paddingVertical: 14, alignItems: "center", marginBottom: 12 },
     ctaDisabled: { opacity: 0.5 },
     ctaText: { fontWeight: "700" },

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from "react";
 import { View, TouchableOpacity, Linking } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { BaseModal } from "@umituz/react-native-design-system/molecules";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -14,7 +14,7 @@ import { usePaywallActions } from "../hooks/usePaywallActions";
 import { PaywallModalProps } from "./PaywallModal.types";
 
 export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
-  const { visible, onClose, translations, packages = [], features = [], legalUrls = {}, bestValueIdentifier, creditAmounts, creditsLabel, heroImage, onPurchase, onRestore, onPurchaseSuccess, onPurchaseError, onAuthRequired, source } = props;
+  const { visible, onClose, translations, packages = [], features = [], legalUrls = {}, bestValueIdentifier, creditAmounts, creditsLabel, heroImage, onPurchase, onRestore, onPurchaseSuccess, onPurchaseError, onAuthRequired, source, isLoadingPackages } = props;
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const { selectedPlanId, setSelectedPlanId, isProcessing, handlePurchase, handleRestore, resetState } = usePaywallActions({
@@ -32,6 +32,13 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
     if (!visible) resetState();
   }, [visible, resetState]);
 
+  // Auto-select first package when packages load and none is selected
+  useEffect(() => {
+    if (packages.length > 0 && !selectedPlanId) {
+      setSelectedPlanId(packages[0].product.identifier);
+    }
+  }, [packages, selectedPlanId, setSelectedPlanId]);
+
   const handleLegalUrl = useCallback(async (url: string | undefined) => {
     if (!url) return;
     try {
@@ -48,26 +55,41 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
         <TouchableOpacity onPress={onClose} style={[styles.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>
-        <ScreenLayout scrollable={true} edges={["bottom"]} backgroundColor="transparent" contentContainerStyle={styles.scroll}>
+
+        {/* Scrollable content — plan cards scroll, CTA is always pinned below */}
+        <ScreenLayout scrollable={true} edges={[]} backgroundColor="transparent" contentContainerStyle={styles.scroll}>
           {heroImage && <View style={styles.heroContainer}><Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={0} /></View>}
           <View style={styles.header}>
-            <AtomicText type="headlineMedium" style={[styles.title, { color: tokens.colors.textPrimary }]}>{translations.title}</AtomicText>
-            {translations.subtitle && <AtomicText type="bodyMedium" style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>{translations.subtitle}</AtomicText>}
+            <AtomicText type="headlineMedium" adjustsFontSizeToFit numberOfLines={2} minimumFontScale={0.75} style={[styles.title, { color: tokens.colors.textPrimary }]}>{translations.title}</AtomicText>
+            {translations.subtitle && <AtomicText type="bodyMedium" adjustsFontSizeToFit numberOfLines={3} minimumFontScale={0.8} style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>{translations.subtitle}</AtomicText>}
           </View>
           <PaywallFeatures features={features} />
           <View style={styles.plans}>
-            {packages.map((pkg) => {
-              const pid = pkg.product.identifier;
-              return (
-                <PlanCard key={pid} pkg={pkg} isSelected={selectedPlanId === pid} onSelect={() => setSelectedPlanId(pid)} badge={pid === bestValueIdentifier ? translations.bestValueBadgeText : undefined} creditAmount={creditAmounts?.[pid]} creditsLabel={creditsLabel} />
-              );
-            })}
+            {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.map((pkg) => {
+                const pid = pkg.product.identifier;
+                return (
+                  <PlanCard key={pid} pkg={pkg} isSelected={selectedPlanId === pid} onSelect={() => setSelectedPlanId(pid)} badge={pid === bestValueIdentifier ? translations.bestValueBadgeText : undefined} creditAmount={creditAmounts?.[pid]} creditsLabel={creditsLabel} />
+                );
+              })
+            )}
           </View>
-          <TouchableOpacity onPress={handlePurchase} disabled={!selectedPlanId || isProcessing} style={[styles.cta, { backgroundColor: tokens.colors.primary }, (!selectedPlanId || isProcessing) && styles.ctaDisabled]} activeOpacity={0.8}>
+        </ScreenLayout>
+
+        {/* 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} />
-        </ScreenLayout>
+        </View>
       </View>
     </BaseModal>
   );

package/src/domains/paywall/components/PaywallModal.types.ts

@@ -20,4 +20,5 @@ export interface PaywallModalProps {
   onPurchaseError?: (error: Error | string) => void;
   onAuthRequired?: () => void;
   source?: PurchaseSource;
+  isLoadingPackages?: boolean;
 }

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

@@ -28,13 +28,13 @@ export const PlanCard: React.FC<PlanCardProps> = React.memo(
                 {isSelected && <AtomicIcon name="checkmark-circle-outline" customSize={12} customColor={tokens.colors.onPrimary} />}
               </View>
               <View style={styles.textSection}>
-                <AtomicText type="titleSmall" style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}>{title}</AtomicText>
+                <AtomicText type="titleSmall" numberOfLines={2} style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}>{title}</AtomicText>
                 {creditAmount != null && creditAmount > 0 && creditsLabel && (
                   <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>{creditAmount} {creditsLabel}</AtomicText>
                 )}
               </View>
             </View>
-            <AtomicText type="titleMedium" style={{ color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary, fontWeight: "700", fontSize: 18 }}>{price}</AtomicText>
+            <AtomicText type="titleMedium" numberOfLines={1} adjustsFontSizeToFit minimumFontScale={0.8} style={{ color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary, fontWeight: "700", fontSize: 18, flexShrink: 0 }}>{price}</AtomicText>
           </View>
         </View>
       </TouchableOpacity>