@umituz/react-native-subscription 2.10.8 → 2.10.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.10.8",
+  "version": "2.10.10",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -37,6 +37,7 @@
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-sentry": "latest",
     "expo-constants": ">=16.0.0",
+    "expo-linear-gradient": ">=14.0.0",
     "firebase": ">=10.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
@@ -51,6 +52,7 @@
     "@umituz/react-native-sentry": "latest",
     "@tanstack/react-query": "^5.0.0",
     "expo-constants": "~16.0.0",
+    "expo-linear-gradient": "~15.0.0",
     "firebase": "^10.0.0",
     "react-native-purchases": "^7.0.0",
     "@types/react": "~19.1.10",

package/src/presentation/components/paywall/BestValueBadge.tsx

@@ -1,11 +1,8 @@
-/**
- * Best Value Badge Component
- * Single Responsibility: Display a "Best Value" badge for subscription packages
- */
-
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+// @ts-ignore
+import { LinearGradient } from "expo-linear-gradient";
 
 interface BestValueBadgeProps {
   text: string;
@@ -19,16 +16,19 @@ export const BestValueBadge: React.FC<BestValueBadgeProps> = React.memo(
     if (!visible) return null;
 
     return (
-      <View
-        style={[styles.badge, { backgroundColor: tokens.colors.primary }]}
+      <LinearGradient
+        colors={[tokens.colors.secondary, tokens.colors.primary]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={styles.badge}
       >
         <AtomicText
           type="labelSmall"
-          style={{ color: tokens.colors.onPrimary, fontWeight: "700" }}
+          style={{ color: tokens.colors.onPrimary, fontWeight: "800", textTransform: "uppercase", fontSize: 10 }}
         >
           {text}
         </AtomicText>
-      </View>
+      </LinearGradient>
     );
   }
 );

package/src/presentation/components/paywall/PaywallLegalFooter.tsx

@@ -14,6 +14,10 @@ interface PaywallLegalFooterProps {
   termsUrl?: string;
   privacyText?: string;
   termsOfServiceText?: string;
+  showRestoreButton?: boolean;
+  restoreButtonText?: string;
+  onRestore?: () => void;
+  isProcessing?: boolean;
 }
 
 const DEFAULT_TERMS =
@@ -26,18 +30,13 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
     termsUrl,
     privacyText = "Privacy Policy",
     termsOfServiceText = "Terms of Service",
+    showRestoreButton = false,
+    restoreButtonText = "Restore Purchases",
+    onRestore,
+    isProcessing = false,
   }) => {
     const tokens = useAppDesignTokens();
 
-    if (__DEV__) {
-      console.log("[PaywallLegalFooter] Rendering links:", {
-        privacy: !!privacyUrl,
-        terms: !!termsUrl,
-        pText: privacyText,
-        tText: termsOfServiceText
-      });
-    }
-
     const handlePrivacyPress = () => {
       if (privacyUrl) {
         Linking.openURL(privacyUrl).catch(console.error);
@@ -50,7 +49,7 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
       }
     };
 
-    const hasLinks = privacyUrl || termsUrl;
+    const hasLinks = privacyUrl || termsUrl || showRestoreButton;
 
     return (
       <View style={styles.container}>
@@ -63,24 +62,69 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
 
         {hasLinks && (
           <View style={styles.legalLinksWrapper}>
-            <View style={[styles.legalLinksContainer, { borderColor: tokens.colors.border }]}>
-              {privacyUrl && (
-                <TouchableOpacity
-                  onPress={handlePrivacyPress}
-                  activeOpacity={0.6}
-                  style={styles.linkItem}
-                >
-                  <AtomicText
-                    type="labelSmall"
-                    style={[styles.linkText, { color: tokens.colors.textSecondary }]}
+            <View
+              style={[
+                styles.legalLinksContainer,
+                { borderColor: tokens.colors.border },
+              ]}
+            >
+              {showRestoreButton && (
+                <>
+                  <TouchableOpacity
+                    onPress={onRestore}
+                    activeOpacity={0.6}
+                    style={styles.linkItem}
+                    disabled={isProcessing}
                   >
-                    {privacyText}
-                  </AtomicText>
-                </TouchableOpacity>
+                    <AtomicText
+                      type="labelSmall"
+                      style={[
+                        styles.linkText,
+                        {
+                          color: tokens.colors.textSecondary,
+                        },
+                      ]}
+                    >
+                      {restoreButtonText}
+                    </AtomicText>
+                  </TouchableOpacity>
+                  {(privacyUrl || termsUrl) && (
+                    <View
+                      style={[
+                        styles.dot,
+                        { backgroundColor: tokens.colors.border },
+                      ]}
+                    />
+                  )}
+                </>
               )}
 
-              {privacyUrl && termsUrl && (
-                <View style={[styles.dot, { backgroundColor: tokens.colors.border }]} />
+              {privacyUrl && (
+                <>
+                  <TouchableOpacity
+                    onPress={handlePrivacyPress}
+                    activeOpacity={0.6}
+                    style={styles.linkItem}
+                  >
+                    <AtomicText
+                      type="labelSmall"
+                      style={[
+                        styles.linkText,
+                        { color: tokens.colors.textSecondary },
+                      ]}
+                    >
+                      {privacyText}
+                    </AtomicText>
+                  </TouchableOpacity>
+                  {termsUrl && (
+                    <View
+                      style={[
+                        styles.dot,
+                        { backgroundColor: tokens.colors.border },
+                      ]}
+                    />
+                  )}
+                </>
               )}
 
               {termsUrl && (
@@ -91,7 +135,10 @@ export const PaywallLegalFooter: React.FC<PaywallLegalFooterProps> = React.memo(
                 >
                   <AtomicText
                     type="labelSmall"
-                    style={[styles.linkText, { color: tokens.colors.textSecondary }]}
+                    style={[
+                      styles.linkText,
+                      { color: tokens.colors.textSecondary },
+                    ]}
                   >
                     {termsOfServiceText}
                   </AtomicText>

package/src/presentation/components/paywall/SubscriptionFooter.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { AtomicButton, AtomicText } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { PaywallLegalFooter } from "./PaywallLegalFooter";
 
@@ -21,6 +21,9 @@ interface SubscriptionFooterProps {
     onRestore: () => void;
 }
 
+// @ts-ignore
+import { LinearGradient } from "expo-linear-gradient";
+
 export const SubscriptionFooter: React.FC<SubscriptionFooterProps> = React.memo(
     ({
         isProcessing,
@@ -40,25 +43,38 @@ export const SubscriptionFooter: React.FC<SubscriptionFooterProps> = React.memo(
     }) => {
         const tokens = useAppDesignTokens();
 
+        const isDisabled = !selectedPkg || isProcessing || isLoading;
+
         return (
             <View style={styles.container}>
                 <View style={styles.actions}>
                     {hasPackages && (
-                        <AtomicButton
-                            title={isProcessing ? processingText : purchaseButtonText}
-                            onPress={onPurchase}
-                            disabled={!selectedPkg || isProcessing || isLoading}
-                        />
-                    )}
-                    {showRestoreButton && (
                         <TouchableOpacity
-                            style={styles.restoreButton}
-                            onPress={onRestore}
-                            disabled={isProcessing || isLoading}
+                            onPress={onPurchase}
+                            disabled={isDisabled}
+                            activeOpacity={0.8}
                         >
-                            <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
-                                {restoreButtonText}
-                            </AtomicText>
+                            <LinearGradient
+                                colors={
+                                    isDisabled
+                                        ? [tokens.colors.border, tokens.colors.borderLight]
+                                        : [tokens.colors.primary, tokens.colors.secondary]
+                                }
+                                start={{ x: 0, y: 0 }}
+                                end={{ x: 1, y: 0 }}
+                                style={[styles.gradientButton, isDisabled && { opacity: 0.6 }]}
+                            >
+                                <AtomicText
+                                    type="titleSmall"
+                                    style={{
+                                        color: tokens.colors.onPrimary,
+                                        fontWeight: "800",
+                                        fontSize: 16,
+                                    }}
+                                >
+                                    {isProcessing ? processingText : purchaseButtonText}
+                                </AtomicText>
+                            </LinearGradient>
                         </TouchableOpacity>
                     )}
                 </View>
@@ -68,6 +84,10 @@ export const SubscriptionFooter: React.FC<SubscriptionFooterProps> = React.memo(
                     termsUrl={termsUrl}
                     privacyText={privacyText}
                     termsOfServiceText={termsOfServiceText}
+                    showRestoreButton={showRestoreButton}
+                    restoreButtonText={restoreButtonText}
+                    onRestore={onRestore}
+                    isProcessing={isProcessing || isLoading}
                 />
             </View>
         );
@@ -81,10 +101,21 @@ const styles = StyleSheet.create({
     actions: {
         paddingHorizontal: 24,
         paddingVertical: 16,
-        gap: 12
+        gap: 12,
+    },
+    gradientButton: {
+        paddingVertical: 16,
+        borderRadius: 16,
+        alignItems: "center",
+        justifyContent: "center",
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.2,
+        shadowRadius: 8,
+        elevation: 4,
     },
     restoreButton: {
         alignItems: "center",
-        paddingVertical: 8
+        paddingVertical: 8,
     },
 });

package/src/presentation/components/paywall/SubscriptionPlanCard.tsx

@@ -12,6 +12,9 @@ import { formatPrice } from "../../../utils/priceUtils";
 import { useLocalization } from "@umituz/react-native-localization";
 import { BestValueBadge } from "./BestValueBadge";
 
+// @ts-ignore
+import { LinearGradient } from "expo-linear-gradient";
+
 interface SubscriptionPlanCardProps {
   package: PurchasesPackage;
   isSelected: boolean;
@@ -47,6 +50,15 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
 
     const title = pkg.product.title || t(`paywall.period.${periodLabel}`);
 
+    const CardComponent = isSelected ? LinearGradient : View;
+    const cardProps = isSelected
+      ? {
+        colors: [tokens.colors.primary + "20", tokens.colors.surface],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 1 },
+      }
+      : {};
+
     return (
       <TouchableOpacity
         onPress={onSelect}
@@ -54,82 +66,84 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
         style={[
           styles.container,
           {
-            backgroundColor: isSelected
-              ? tokens.colors.primaryLight
-              : tokens.colors.surface,
             borderColor: isSelected
               ? tokens.colors.primary
-              : tokens.colors.border,
+              : tokens.colors.borderLight,
             borderWidth: isSelected ? 2 : 1,
+            backgroundColor: isSelected ? undefined : tokens.colors.surface,
           },
         ]}
       >
-        <BestValueBadge
-          text={t("paywall.bestValue")}
-          visible={isBestValue}
-        />
+        <CardComponent {...(cardProps as any)} style={styles.gradientWrapper}>
+          <BestValueBadge text={t("paywall.bestValue")} visible={isBestValue} />
 
-        <View style={styles.content}>
-          <View style={styles.leftSection}>
-            <View
-              style={[
-                styles.radio,
-                {
-                  borderColor: isSelected
-                    ? tokens.colors.primary
-                    : tokens.colors.border,
-                },
-              ]}
-            >
-              {isSelected && (
-                <View
-                  style={[
-                    styles.radioInner,
-                    { backgroundColor: tokens.colors.primary },
-                  ]}
-                />
-              )}
-            </View>
-            <View style={styles.textContainer}>
-              <AtomicText
-                type="titleMedium"
-                style={[styles.title, { color: tokens.colors.textPrimary }]}
+          <View style={styles.content}>
+            <View style={styles.leftSection}>
+              <View
+                style={[
+                  styles.radio,
+                  {
+                    borderColor: isSelected
+                      ? tokens.colors.primary
+                      : tokens.colors.border,
+                  },
+                ]}
               >
-                {title}
-              </AtomicText>
-              {isYearly && (
+                {isSelected && (
+                  <View
+                    style={[
+                      styles.radioInner,
+                      { backgroundColor: tokens.colors.primary },
+                    ]}
+                  />
+                )}
+              </View>
+              <View style={styles.textContainer}>
                 <AtomicText
-                  type="bodySmall"
-                  style={{ color: tokens.colors.textSecondary }}
+                  type="titleSmall"
+                  style={[styles.title, { color: tokens.colors.textPrimary }]}
                 >
-                  {price}
+                  {title}
                 </AtomicText>
-              )}
+                {isYearly && (
+                  <AtomicText
+                    type="bodySmall"
+                    style={{ color: tokens.colors.textSecondary, fontSize: 11 }}
+                  >
+                    {price}
+                  </AtomicText>
+                )}
+              </View>
             </View>
-          </View>
 
-          <View style={styles.rightSection}>
-            <AtomicText
-              type="titleMedium"
-              style={[styles.price, { color: tokens.colors.textPrimary }]}
-            >
-              {isYearly && monthlyEquivalent
-                ? `${monthlyEquivalent}/mo`
-                : price}
-            </AtomicText>
+            <View style={styles.rightSection}>
+              <AtomicText
+                type="titleMedium"
+                style={[styles.price, { color: tokens.colors.textPrimary }]}
+              >
+                {isYearly && monthlyEquivalent
+                  ? `${monthlyEquivalent}/mo`
+                  : price}
+              </AtomicText>
+            </View>
           </View>
-        </View>
+        </CardComponent>
       </TouchableOpacity>
     );
   });
 
+
 SubscriptionPlanCard.displayName = "SubscriptionPlanCard";
 
 const styles = StyleSheet.create({
   container: {
     borderRadius: 16,
-    padding: 18,
     position: "relative",
+    overflow: "hidden", // Important for gradient borders/corners
+  },
+  gradientWrapper: {
+    flex: 1,
+    padding: 18,
   },
   content: {
     flexDirection: "row",

package/src/revenuecat/infrastructure/managers/SubscriptionManager.ts

@@ -91,10 +91,6 @@ class SubscriptionManagerImpl {
       if (existingPromise) return existingPromise;
     }
 
-    if (this.initCache.shouldReinitialize(effectiveUserId) && this.serviceInstance) {
-      await this.serviceInstance.reset();
-    }
-
     const promise = this.performInitialization(effectiveUserId);
     this.initCache.setPromise(promise, effectiveUserId);
 
@@ -107,7 +103,7 @@ class SubscriptionManagerImpl {
 
   isInitializedForUser(userId: string): boolean {
     return this.serviceInstance?.isInitialized() === true &&
-           this.initCache.getCurrentUserId() === userId;
+      this.initCache.getCurrentUserId() === userId;
   }
 
   async getPackages(): Promise<PurchasesPackage[]> {

package/src/revenuecat/infrastructure/services/RevenueCatInitializer.ts

@@ -11,7 +11,6 @@ import { resolveApiKey } from "../utils/ApiKeyResolver";
 import {
   trackPackageError,
   addPackageBreadcrumb,
-  trackPackageWarning,
 } from "@umituz/react-native-sentry";
 
 export interface InitializerDeps {
@@ -23,6 +22,9 @@ export interface InitializerDeps {
   setCurrentUserId: (userId: string) => void;
 }
 
+// Track if Purchases.configure has been called globally
+let isPurchasesConfigured = false;
+
 export async function initializeSDK(
   deps: InitializerDeps,
   userId: string,
@@ -31,71 +33,66 @@ export async function initializeSDK(
   addPackageBreadcrumb("subscription", "SDK initialization started", {
     userId,
     hasApiKey: !!apiKey,
+    isAlreadyConfigured: isPurchasesConfigured,
   });
 
   if (__DEV__) {
-    console.log("[RevenueCat] initializeSDK() called with userId:", userId);
+    console.log("[RevenueCat] initializeSDK() called with userId:", userId, "isPurchasesConfigured:", isPurchasesConfigured);
   }
 
-  // Check if already initialized with same userId - skip re-configuration
-  if (deps.isInitialized()) {
-    const currentUserId = deps.getCurrentUserId();
-    if (currentUserId === userId) {
-      addPackageBreadcrumb("subscription", "Already initialized, fetching current state", {
-        userId,
-      });
+  // Case 1: Already initialized with the same user ID
+  if (deps.isInitialized() && deps.getCurrentUserId() === userId) {
+    if (__DEV__) {
+      console.log("[RevenueCat] Already initialized with same userId, skipping configure");
+    }
 
-      if (__DEV__) {
-        console.log("[RevenueCat] Already initialized with same userId, skipping configure");
-      }
-      // Just fetch current state without re-configuring
-      try {
-        const [customerInfo, offerings] = await Promise.all([
-          Purchases.getCustomerInfo(),
-          Purchases.getOfferings(),
-        ]);
-        const entitlementId = deps.config.entitlementIdentifier;
-        const hasPremium = !!customerInfo.entitlements.active[entitlementId];
-        return { success: true, offering: offerings.current, hasPremium };
-      } catch (error) {
-        trackPackageError(
-          error instanceof Error ? error : new Error(String(error)),
-          {
-            packageName: "subscription",
-            operation: "get_current_state",
-            userId,
-          }
-        );
-
-        if (__DEV__) {
-          console.log("[RevenueCat] Failed to get current state:", error);
+    try {
+      const [customerInfo, offerings] = await Promise.all([
+        Purchases.getCustomerInfo(),
+        Purchases.getOfferings(),
+      ]);
+      const entitlementId = deps.config.entitlementIdentifier;
+      const hasPremium = !!customerInfo.entitlements.active[entitlementId];
+      return { success: true, offering: offerings.current, hasPremium };
+    } catch (error) {
+      trackPackageError(
+        error instanceof Error ? error : new Error(String(error)),
+        {
+          packageName: "subscription",
+          operation: "get_current_state",
+          userId,
         }
-        return { success: false, offering: null, hasPremium: false };
-      }
-    } else {
-      addPackageBreadcrumb("subscription", "User changed, logging out previous user", {
-        previousUserId: currentUserId,
-        newUserId: userId,
-      });
-
-      if (__DEV__) {
-        console.log("[RevenueCat] Different userId, will re-configure");
-      }
-      // Different userId - need to logout first
-      try {
-        await Purchases.logOut();
-      } catch (error) {
-        trackPackageWarning("subscription", "Logout failed during user change", {
-          error: error instanceof Error ? error.message : String(error),
-          previousUserId: currentUserId,
-          newUserId: userId,
-        });
-      }
+      );
+      return { success: false, offering: null, hasPremium: false };
     }
   }
 
+  // Case 2: Already configured but different user or re-initializing
+  if (isPurchasesConfigured) {
+    if (__DEV__) {
+      console.log("[RevenueCat] SDK already configured, using logIn for userId:", userId);
+    }
+
+    try {
+      const { customerInfo } = await Purchases.logIn(userId);
+
+      deps.setInitialized(true);
+      deps.setCurrentUserId(userId);
 
+      const offerings = await Purchases.getOfferings();
+      const entitlementId = deps.config.entitlementIdentifier;
+      const hasPremium = !!customerInfo.entitlements.active[entitlementId];
+
+      return { success: true, offering: offerings.current, hasPremium };
+    } catch (error) {
+      if (__DEV__) console.warn("[RevenueCat] logIn failed:", error);
+      // If logIn fails, we don't necessarily want to re-configure if it's already configured
+      // But we can return failure
+      return { success: false, offering: null, hasPremium: false };
+    }
+  }
 
+  // Case 3: First time configuration
   const key = apiKey || resolveApiKey(deps.config);
   if (!key) {
     const error = new Error("No RevenueCat API key available");
@@ -104,38 +101,25 @@ export async function initializeSDK(
       operation: "sdk_init_no_key",
       userId,
     });
-
-    if (__DEV__) {
-      console.log("[RevenueCat] No API key available");
-    }
     return { success: false, offering: null, hasPremium: false };
   }
 
   try {
     if (deps.isUsingTestStore()) {
-      addPackageBreadcrumb("subscription", "Using test store configuration", {
-        userId,
-      });
-
       if (__DEV__) {
         console.log("[RevenueCat] Using Test Store key");
       }
     }
 
-    addPackageBreadcrumb("subscription", "Configuring SDK", { userId });
-
     if (__DEV__) {
       console.log("[RevenueCat] Calling Purchases.configure()...");
     }
 
     await Purchases.configure({ apiKey: key, appUserID: userId });
+    isPurchasesConfigured = true;
     deps.setInitialized(true);
     deps.setCurrentUserId(userId);
 
-    addPackageBreadcrumb("subscription", "SDK configured successfully", {
-      userId,
-    });
-
     if (__DEV__) {
       console.log("[RevenueCat] SDK configured successfully");
     }