@umituz/react-native-subscription 2.26.17 → 2.26.18

package/package.json

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

@@ -1,19 +1,39 @@
 /**
  * PaywallContainer Component
  * Uses centralized pending purchase state - no local auth handling
+ * Apple Guideline 3.1.2 compliant trial display
  */
 
-import React, { useMemo } from "react";
+import React, { useMemo, useEffect } from "react";
 import { usePaywallVisibility } from "../../../presentation/hooks/usePaywallVisibility";
 import { useSubscriptionPackages } from "../../../revenuecat/presentation/hooks/useSubscriptionPackages";
+import { useRevenueCatTrialEligibility } from "../../../revenuecat/presentation/hooks/useRevenueCatTrialEligibility";
 import { filterPackagesByMode } from "../../../utils/packageFilter";
 import { createCreditAmountsFromPackages } from "../../../utils/creditMapper";
-import { PaywallModal } from "./PaywallModal";
+import { PaywallModal, type TrialEligibilityInfo } from "./PaywallModal";
 import { usePaywallActions } from "../hooks/usePaywallActions";
 import type { PaywallContainerProps } from "./PaywallContainer.types";
 
 export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
-  const { userId, translations, mode = "subscription", legalUrls, features, heroImage, bestValueIdentifier, creditsLabel, creditAmounts, packageFilterConfig, source, onPurchaseSuccess, onPurchaseError, onAuthRequired, visible, onClose } = props;
+  const {
+    userId,
+    translations,
+    mode = "subscription",
+    legalUrls,
+    features,
+    heroImage,
+    bestValueIdentifier,
+    creditsLabel,
+    creditAmounts,
+    packageFilterConfig,
+    source,
+    onPurchaseSuccess,
+    onPurchaseError,
+    onAuthRequired,
+    visible,
+    onClose,
+    trialConfig,
+  } = props;
 
   const { showPaywall, closePaywall, currentSource } = usePaywallVisibility();
   const isVisible = visible ?? showPaywall;
@@ -22,6 +42,7 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
   const purchaseSource = source ?? currentSource ?? "settings";
 
   const { data: allPackages = [], isLoading } = useSubscriptionPackages(userId ?? undefined);
+  const { eligibilityMap, checkEligibility } = useRevenueCatTrialEligibility();
   const { handlePurchase, handleRestore } = usePaywallActions({
     userId: userId ?? undefined,
     source: purchaseSource,
@@ -31,6 +52,35 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
     onClose: handleClose,
   });
 
+  // Check trial eligibility only if trialConfig is enabled
+  useEffect(() => {
+    if (!trialConfig?.enabled) return;
+    if (allPackages.length === 0) return;
+
+    // If specific product IDs are provided, check only those
+    // Otherwise, check all packages
+    const productIds = trialConfig.eligibleProductIds?.length
+      ? [...trialConfig.eligibleProductIds]
+      : allPackages.map((pkg) => pkg.product.identifier);
+
+    checkEligibility(productIds);
+  }, [allPackages, checkEligibility, trialConfig?.enabled, trialConfig?.eligibleProductIds]);
+
+  // Convert eligibility map to format expected by PaywallModal
+  // Only process if trial is enabled
+  const trialEligibility = useMemo((): Record<string, TrialEligibilityInfo> => {
+    if (!trialConfig?.enabled) return {};
+
+    const result: Record<string, TrialEligibilityInfo> = {};
+    for (const [productId, info] of Object.entries(eligibilityMap)) {
+      result[productId] = {
+        eligible: info.eligible,
+        durationDays: trialConfig.durationDays ?? info.trialDurationDays ?? 7,
+      };
+    }
+    return result;
+  }, [eligibilityMap, trialConfig?.enabled, trialConfig?.durationDays]);
+
   const { filteredPackages, computedCreditAmounts } = useMemo(() => ({
     filteredPackages: filterPackagesByMode(allPackages, mode, packageFilterConfig),
     computedCreditAmounts: mode !== "subscription" && !creditAmounts ? createCreditAmountsFromPackages(allPackages) : creditAmounts
@@ -53,6 +103,8 @@ export const PaywallContainer: React.FC<PaywallContainerProps> = (props) => {
       creditAmounts={computedCreditAmounts}
       onPurchase={handlePurchase}
       onRestore={handleRestore}
+      trialEligibility={trialEligibility}
+      trialSubtitleText={trialConfig?.enabled ? trialConfig.trialText : undefined}
     />
   );
 };

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

@@ -8,6 +8,21 @@ import type { PaywallMode, PaywallTranslations, PaywallLegalUrls, SubscriptionFe
 import type { PackageFilterConfig } from "../../../utils/packageFilter";
 import type { PurchaseSource } from "../../../domain/entities/Credits";
 
+/**
+ * Trial display configuration
+ * Controls how free trial info is displayed (Apple-compliant)
+ */
+export interface TrialConfig {
+  /** Enable trial display (default: false) */
+  readonly enabled: boolean;
+  /** Product IDs that have trial offers (if empty, checks all via RevenueCat) */
+  readonly eligibleProductIds?: readonly string[];
+  /** Trial duration in days (default: 7) */
+  readonly durationDays?: number;
+  /** Text to show for trial (e.g., "7 days free, then billed") */
+  readonly trialText?: string;
+}
+
 export interface PaywallContainerProps {
   /** User ID for subscription management */
   readonly userId: string | null;
@@ -43,5 +58,7 @@ export interface PaywallContainerProps {
   readonly visible?: boolean;
   /** Callback when paywall is closed */
   readonly onClose?: () => void;
+  /** Trial display configuration (Apple-compliant) */
+  readonly trialConfig?: TrialConfig;
 }
 

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

@@ -40,10 +40,12 @@ export interface PaywallModalProps {
   onRestore?: () => Promise<void | boolean>;
   /** Trial eligibility map per product ID */
   trialEligibility?: Record<string, TrialEligibilityInfo>;
+  /** Trial subtitle text for PlanCard (e.g., "7 days free, then billed") */
+  trialSubtitleText?: string;
 }
 
 export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
-  const { visible, onClose, translations, packages = [], features = [], isLoading = false, legalUrls = {}, bestValueIdentifier, creditAmounts, creditsLabel, heroImage, onPurchase, onRestore, trialEligibility = {} } = props;
+  const { visible, onClose, translations, packages = [], features = [], isLoading = false, legalUrls = {}, bestValueIdentifier, creditAmounts, creditsLabel, heroImage, onPurchase, onRestore, trialEligibility = {}, trialSubtitleText } = props;
   const tokens = useAppDesignTokens();
   const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
   const [isLocalProcessing, setIsLocalProcessing] = useState(false);
@@ -124,9 +126,10 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
 
           <View style={styles.header}>
             <AtomicText type="headlineMedium" style={[styles.title, { color: tokens.colors.textPrimary }]}>{translations.title}</AtomicText>
-            {(translations.trialSubtitle || translations.subtitle) && (
+            {/* Apple compliance: Don't promote trial in header, show regular subtitle only */}
+            {translations.subtitle && (
               <AtomicText type="bodyMedium" style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
-                {translations.trialSubtitle ?? translations.subtitle}
+                {translations.subtitle}
               </AtomicText>
             )}
           </View>
@@ -152,8 +155,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
                     creditAmount={creditAmounts?.[productId]}
                     creditsLabel={creditsLabel}
                     hasFreeTrial={hasFreeTrial}
-                    trialDurationDays={eligibility?.durationDays}
-                    trialBadgeText={hasFreeTrial ? translations.trialBadgeText : undefined}
+                    trialSubtitleText={hasFreeTrial ? trialSubtitleText : undefined}
                   />
                 );
               })}

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

@@ -1,6 +1,11 @@
 /**
  * Plan Card
- * Subscription plan selection card
+ * Subscription plan selection card (Apple-compliant)
+ *
+ * Apple Guideline 3.1.2 Compliance:
+ * - Price is the most prominent element
+ * - Trial info is displayed in subordinate position and size
+ * - No toggle for enabling/disabling trial
  */
 
 import React from "react";
@@ -14,26 +19,22 @@ interface PlanCardProps {
     pkg: PurchasesPackage;
     isSelected: boolean;
     onSelect: () => void;
+    /** Badge text (e.g., "Best Value") - NOT for trial */
     badge?: string;
     creditAmount?: number;
     creditsLabel?: string;
-    /** Whether this plan has a free trial */
+    /** Whether this plan has a free trial (Apple-compliant display) */
     hasFreeTrial?: boolean;
-    /** Trial duration in days */
-    trialDurationDays?: number;
-    /** Trial badge text (e.g., "7 days free") */
-    trialBadgeText?: string;
+    /** Trial subtitle text (e.g., "7 days free, then billed") - shown as small gray text */
+    trialSubtitleText?: string;
 }
 
 export const PlanCard: React.FC<PlanCardProps> = React.memo(
-    ({ pkg, isSelected, onSelect, badge, creditAmount, creditsLabel, hasFreeTrial, trialBadgeText }) => {
+    ({ pkg, isSelected, onSelect, badge, creditAmount, creditsLabel, hasFreeTrial, trialSubtitleText }) => {
         const tokens = useAppDesignTokens();
         const title = pkg.product.title;
         const price = formatPrice(pkg.product.price, pkg.product.currencyCode);
 
-        // Determine which badge to show (trial badge takes priority if eligible)
-        const displayBadge = hasFreeTrial && trialBadgeText ? trialBadgeText : badge;
-
         return (
             <TouchableOpacity onPress={onSelect} activeOpacity={0.7} style={styles.touchable}>
                 <View
@@ -46,13 +47,10 @@ export const PlanCard: React.FC<PlanCardProps> = React.memo(
                         },
                     ]}
                 >
-                    {displayBadge && (
+                    {/* Badge for "Best Value" etc. - NOT for trial (Apple compliance) */}
+                    {badge && (
                         <View style={styles.badgeContainer}>
-                            <AtomicBadge
-                                text={displayBadge}
-                                variant={hasFreeTrial ? "success" : "primary"}
-                                size="sm"
-                            />
+                            <AtomicBadge text={badge} variant="primary" size="sm" />
                         </View>
                     )}
 
@@ -76,17 +74,38 @@ export const PlanCard: React.FC<PlanCardProps> = React.memo(
                                 <AtomicText type="titleSmall" style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}>
                                     {title}
                                 </AtomicText>
+
+                                {/* Credits info */}
                                 {creditAmount && creditsLabel && (
                                     <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
                                         {creditAmount} {creditsLabel}
                                     </AtomicText>
                                 )}
+
+                                {/* Trial info - Apple-compliant: small, gray, subordinate */}
+                                {hasFreeTrial && trialSubtitleText && (
+                                    <AtomicText
+                                        type="bodySmall"
+                                        style={{
+                                            color: tokens.colors.textTertiary ?? tokens.colors.textSecondary,
+                                            fontSize: 11,
+                                            marginTop: 2,
+                                        }}
+                                    >
+                                        {trialSubtitleText}
+                                    </AtomicText>
+                                )}
                             </View>
                         </View>
 
+                        {/* Price - MOST PROMINENT (Apple compliance) */}
                         <AtomicText
                             type="titleMedium"
-                            style={{ color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary, fontWeight: "700" }}
+                            style={{
+                                color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary,
+                                fontWeight: "700",
+                                fontSize: 18,
+                            }}
                         >
                             {price}
                         </AtomicText>

package/src/domains/paywall/components/index.ts

@@ -3,7 +3,7 @@
  */
 
 export { PaywallContainer } from "./PaywallContainer";
-export type { PaywallContainerProps } from "./PaywallContainer.types";
+export type { PaywallContainerProps, TrialConfig } from "./PaywallContainer.types";
 
 export { PaywallModal } from "./PaywallModal";
 export type { PaywallModalProps } from "./PaywallModal";

package/src/domains/paywall/entities/types.ts

@@ -41,10 +41,6 @@ export interface PaywallTranslations {
     privacyText?: string;
     termsOfServiceText?: string;
     bestValueBadgeText?: string;
-    /** Trial-related translations */
-    trialBadgeText?: string;
-    /** Trial subtitle (e.g., "Try free for 7 days, then $X/year") */
-    trialSubtitle?: string;
 }
 
 export interface PaywallLegalUrls {

package/src/domains/paywall/hooks/usePaywallTranslations.ts

@@ -13,10 +13,6 @@ interface PaywallTranslationKeys {
   processingText: string;
   privacyText: string;
   termsOfServiceText: string;
-  /** Trial badge text key */
-  trialBadgeText?: string;
-  /** Trial subtitle key */
-  trialSubtitle?: string;
 }
 
 interface UsePaywallTranslationsParams {
@@ -42,8 +38,6 @@ const DEFAULT_KEYS: PaywallTranslationKeys = {
   processingText: "paywall.processing",
   privacyText: "auth.privacyPolicy",
   termsOfServiceText: "auth.termsOfService",
-  trialBadgeText: "paywall.trial.badge",
-  trialSubtitle: "paywall.trial.subtitle",
 };
 
 export const usePaywallTranslations = ({
@@ -68,8 +62,6 @@ export const usePaywallTranslations = ({
       processingText: t(mergedKeys.processingText),
       privacyText: t(mergedKeys.privacyText),
       termsOfServiceText: t(mergedKeys.termsOfServiceText),
-      trialBadgeText: mergedKeys.trialBadgeText ? t(mergedKeys.trialBadgeText) : undefined,
-      trialSubtitle: mergedKeys.trialSubtitle ? t(mergedKeys.trialSubtitle) : undefined,
     }),
     [t, mergedKeys],
   );

package/src/global.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Global type declarations for React Native environment
+ */
+
+/** React Native development flag */
+declare const __DEV__: boolean;
+
+/** Extend NodeJS namespace for React Native compatibility */
+declare namespace NodeJS {
+  interface Global {
+    __DEV__: boolean;
+  }
+}

package/src/revenuecat/domain/types/RevenueCatTypes.ts

@@ -56,14 +56,21 @@ export function getPremiumEntitlement(
   };
 }
 
+/**
+ * Type guard for RevenueCat purchase error
+ */
+function isRevenueCatPurchaseError(error: unknown): error is RevenueCatPurchaseErrorInfo {
+  return error instanceof Error && "userCancelled" in error;
+}
+
 /**
  * Check if error is a user cancellation
  */
 export function isUserCancelledError(error: unknown): boolean {
-  if (!error || typeof error !== "object") {
+  if (!isRevenueCatPurchaseError(error)) {
     return false;
   }
-  return (error as RevenueCatPurchaseErrorInfo).userCancelled === true;
+  return error.userCancelled === true;
 }
 
 /**
@@ -76,34 +83,3 @@ export function getErrorMessage(error: unknown, fallback: string): string {
   return fallback;
 }
 
-/**
- * Trial Eligibility Types
- * For RevenueCat introductory offer (free trial) support
- */
-
-/** Trial info for a subscription product */
-export interface TrialInfo {
-  /** Whether user is eligible for trial */
-  eligible: boolean;
-  /** Trial duration in days */
-  durationDays: number;
-  /** Product identifier */
-  productId: string;
-}
-
-/** Configuration for trial display */
-export interface TrialDisplayConfig {
-  /** Product IDs that have trial offers */
-  trialProductIds: string[];
-  /** Default trial duration in days */
-  defaultTrialDays: number;
-  /** Whether to show trial badge */
-  showTrialBadge: boolean;
-}
-
-/** Default trial configuration */
-export const DEFAULT_TRIAL_CONFIG: TrialDisplayConfig = {
-  trialProductIds: [],
-  defaultTrialDays: 7,
-  showTrialBadge: true,
-};