@billdog.io/react-native 1.0.0-beta.2

package/src/PaywallView.tsx

@@ -0,0 +1,328 @@
+/**
+ * PaywallView - Main React Native component for rendering paywalls
+ * 
+ * Credentials and API base URL are resolved from BillDogConfiguration.
+ * Pass an `apiKey` prop only for backward compatibility.
+ */
+
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { ScrollView, View, StyleSheet, ActivityIndicator, Dimensions } from 'react-native';
+import { PaywallConfiguration, ThemeConfig, PaywallComponent } from './types';
+import { ComponentRenderer } from './ComponentRenderer';
+import { paywallStateManager } from './PaywallStateManager';
+import { usePaywall } from './hooks/usePaywall';
+import { detectDeviceCategory } from './utils/deviceDetection';
+import { ThemeColorResolver } from './LayoutEngine';
+import { LocalizationResolver } from './LocalizationResolver';
+
+interface PaywallViewProps {
+  /**
+   * Paywall identifier to fetch from API
+   */
+  paywallIdentifier?: string;
+
+  /**
+   * Direct configuration (skips API fetch)
+   */
+  configuration?: PaywallConfiguration;
+
+  /**
+   * @deprecated Use BillDogConfiguration.configure({ apiKey }) instead
+   */
+  apiKey?: string;
+
+  /**
+   * Called when user interacts with buttons
+   */
+  onButtonPress?: (componentId: string, action: string) => void;
+
+  /**
+   * Called when paywall is dismissed
+   */
+  onDismiss?: () => void;
+
+  /**
+   * Loading component (optional)
+   */
+  LoadingComponent?: React.ComponentType;
+
+  /**
+   * Error component (optional)
+   */
+  ErrorComponent?: React.ComponentType<{ error: Error }>;
+}
+
+export const PaywallView: React.FC<PaywallViewProps> = ({
+  paywallIdentifier,
+  configuration: providedConfiguration,
+  apiKey,
+  onButtonPress,
+  onDismiss,
+  LoadingComponent,
+  ErrorComponent,
+}) => {
+  const [deviceCategory, setDeviceCategory] = useState(detectDeviceCategory());
+
+  // ── ELEMENT STATE ────────────────────────────────────────────────────────────
+  // Components have always called a `stateManager` prop (updateState /
+  // subscribeToState / getState / setState) but nothing ever supplied one, and every
+  // call site optional-chains — so the whole cross-component state protocol was a
+  // silent no-op. Supplying the shared manager here activates it for the tree.
+  //
+  // Reset DURING FIRST RENDER, not in an effect: React runs child effects BEFORE
+  // parent effects, so clearing on mount would wipe the subscriptions the children
+  // just registered and leave every component permanently deaf. (Inverted from the
+  // native SDKs, where the parent clears first and children subscribe after.) The ref
+  // guard keeps it once-per-presentation and StrictMode-safe.
+  const stateResetRef = useRef(false);
+  if (!stateResetRef.current) {
+    paywallStateManager.clearAll();
+    stateResetRef.current = true;
+  }
+  useEffect(() => () => paywallStateManager.clearAll(), []);
+
+  // Fetch paywall if identifier is provided
+  const { configuration, loading, error, refetch } = usePaywall({
+    paywallIdentifier,
+    apiKey,
+    skipFetch: !!providedConfiguration,
+  });
+
+  // Listen for orientation changes
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', () => {
+      const newCategory = detectDeviceCategory();
+      if (newCategory !== deviceCategory) {
+        setDeviceCategory(newCategory);
+        if (!providedConfiguration) {
+          refetch();
+        }
+      }
+    });
+
+    return () => subscription?.remove();
+  }, [deviceCategory, providedConfiguration]);
+
+  // Use provided configuration or fetched configuration
+  const activeConfiguration = providedConfiguration || configuration;
+
+  /**
+   * Unwrap nested configuration structure
+   */
+  const unwrappedConfig = useMemo(() => {
+    if (!activeConfiguration) return null;
+    const config = activeConfiguration as any;
+    
+    if (config.configuration && typeof config.configuration === 'object') {
+      const deviceConfig = config.configuration[deviceCategory] || 
+                           config.configuration['phone_portrait'] ||
+                           Object.values(config.configuration)[0];
+      if (deviceConfig && typeof deviceConfig === 'object') {
+        return {
+          ...deviceConfig,
+          wallConfigTheme: config.wallConfig?.themeConfig,
+        };
+      }
+    }
+    
+    if (config[deviceCategory]?.theme || config[deviceCategory]?.components) {
+      return config[deviceCategory];
+    }
+    
+    return config;
+  }, [activeConfiguration, deviceCategory]);
+
+  /**
+   * Comprehensive theme resolution
+   */
+  const resolvedTheme = useMemo((): ThemeConfig | undefined => {
+    if (!unwrappedConfig) return undefined;
+    
+    const config = unwrappedConfig as any;
+    
+    if (config.theme?.resolvedColors) {
+      return {
+        ...config.theme,
+        themingMode: config.theme.themingMode || 'full',
+      };
+    }
+    
+    if (config.wallConfigTheme?.resolvedColors) {
+      return config.wallConfigTheme;
+    }
+    
+    if (config.structured?.themes) {
+      const structuredTheme = config.structured.themes[deviceCategory] || 
+                              config.structured.themes['phone_portrait'];
+      if (structuredTheme?.resolvedColors) {
+        return structuredTheme;
+      }
+    }
+    
+    if (config.theme?.colors) {
+      return {
+        primaryColor: config.theme.colors.primary,
+        secondaryColor: config.theme.colors.secondary,
+        backgroundColor: config.theme.colors.background,
+        textColor: config.theme.colors.foreground || config.theme.colors.text,
+        cardColor: config.theme.colors.card,
+        mutedColor: config.theme.colors.muted,
+        borderColor: config.theme.colors.border,
+        accentColor: config.theme.colors.accent,
+        resolvedColors: config.theme.colors,
+        themingMode: config.theme.themingMode || 'full',
+      };
+    }
+    
+    return config.theme;
+  }, [unwrappedConfig, deviceCategory]);
+
+  // Initialize ThemeColorResolver with resolved theme colors
+  useEffect(() => {
+    if (resolvedTheme) {
+      const themeForResolver: Record<string, string> = {};
+      
+      if (resolvedTheme.primaryColor) themeForResolver.primaryColor = resolvedTheme.primaryColor;
+      if (resolvedTheme.secondaryColor) themeForResolver.secondaryColor = resolvedTheme.secondaryColor;
+      if (resolvedTheme.backgroundColor) themeForResolver.backgroundColor = resolvedTheme.backgroundColor;
+      if (resolvedTheme.textColor) themeForResolver.textColor = resolvedTheme.textColor;
+      if (resolvedTheme.cardColor) themeForResolver.cardColor = resolvedTheme.cardColor;
+      if (resolvedTheme.mutedColor) themeForResolver.mutedColor = resolvedTheme.mutedColor;
+      if (resolvedTheme.borderColor) themeForResolver.borderColor = resolvedTheme.borderColor;
+      if (resolvedTheme.accentColor) themeForResolver.accentColor = resolvedTheme.accentColor;
+      
+      if (resolvedTheme.resolvedColors) {
+        Object.entries(resolvedTheme.resolvedColors).forEach(([key, value]) => {
+          if (typeof value === 'string') {
+            themeForResolver[key] = value;
+          }
+        });
+      }
+      
+      ThemeColorResolver.setTheme(themeForResolver);
+      console.log('[PaywallView] Theme initialized:', themeForResolver);
+    } else {
+      ThemeColorResolver.setTheme(null);
+    }
+  }, [resolvedTheme]);
+
+  if (loading && !activeConfiguration) {
+    if (LoadingComponent) {
+      return <LoadingComponent />;
+    }
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#007AFF" />
+      </View>
+    );
+  }
+
+  if (error && !activeConfiguration) {
+    if (ErrorComponent) {
+      return <ErrorComponent error={error} />;
+    }
+    return <View style={styles.centered} />;
+  }
+
+  if (!activeConfiguration) {
+    return null;
+  }
+
+  const backgroundColor = resolvedTheme?.backgroundColor ||
+                          resolvedTheme?.resolvedColors?.background ||
+                          '#FFFFFF';
+
+  // Layout direction — RTL when the dashboard set an explicit
+  // `theme.direction: 'rtl'` override, or when the effective locale's
+  // language is right-to-left. Mirrors Android `PaywallScreen.kt:431-458`.
+  // Applied as a Yoga `direction` style so flex layout mirrors for the
+  // whole component tree (row reverses, start/end flip).
+  const layoutDirection: 'ltr' | 'rtl' = (() => {
+    const explicit = (unwrappedConfig as any)?.theme?.direction
+      ?? (resolvedTheme as any)?.direction;
+    if (explicit === 'rtl') return 'rtl';
+    if (explicit === 'ltr') return 'ltr';
+    const baseLocale = (activeConfiguration as any)?.baseLocale as string | undefined;
+    const effectiveLocale = LocalizationResolver.getEffectiveLocale();
+    // A non-base effective locale wins; otherwise fall back to baseLocale.
+    const localeForDirection =
+      effectiveLocale && effectiveLocale !== baseLocale
+        ? effectiveLocale
+        : (baseLocale || effectiveLocale);
+    return LocalizationResolver.isRtlLocale(localeForDirection) ? 'rtl' : 'ltr';
+  })();
+
+  const components: PaywallComponent[] = unwrappedConfig?.components || activeConfiguration?.components || [];
+
+  const absoluteComponents = components.filter((c: PaywallComponent) => c.absolutePosition);
+  const relativeComponents = components.filter((c: PaywallComponent) => !c.absolutePosition);
+
+  const screenLayout = unwrappedConfig?.theme?.screenLayout;
+  const contentPadding = screenLayout?.padding || { top: 16, right: 16, bottom: 16, left: 16 };
+
+  return (
+    <View style={[styles.container, { backgroundColor, direction: layoutDirection }]}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={[
+          styles.content,
+          {
+            paddingTop: contentPadding.top,
+            paddingRight: contentPadding.right,
+            paddingBottom: contentPadding.bottom,
+            paddingLeft: contentPadding.left,
+            gap: screenLayout?.gap || 16,
+          }
+        ]}
+      >
+        {relativeComponents.map((component) => (
+          <ComponentRenderer
+            key={component.id}
+            stateManager={paywallStateManager}
+            component={component}
+            configuration={activeConfiguration}
+            theme={resolvedTheme}
+            onButtonPress={onButtonPress}
+          />
+        ))}
+      </ScrollView>
+      
+      {absoluteComponents.length > 0 && (
+        <View style={styles.absoluteContainer} pointerEvents="box-none">
+          {absoluteComponents.map((component) => (
+            <ComponentRenderer
+              key={component.id}
+              stateManager={paywallStateManager}
+              component={component}
+              configuration={activeConfiguration}
+              theme={resolvedTheme}
+              onButtonPress={onButtonPress}
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    flexGrow: 1,
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  absoluteContainer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 10,
+  },
+});

package/src/ProductVariableProvider.ts

@@ -0,0 +1,282 @@
+/**
+ * Product Variable Provider for BillDog React Native SDK
+ *
+ * Generates variable maps from packages for use in VariableResolver.
+ * Enables {{product.price}}, {{product.period}}, {{selectedProduct.*}}, etc.
+ *
+ * Port of Android's ProductVariableProvider.kt with 1:1 variable key parity.
+ */
+
+export interface PackageInput {
+  identifier: string;
+  packageType?: string;
+  productId?: string;
+  price?: string;
+  rawPrice?: number;
+  currencyCode?: string;
+  title?: string;
+  description?: string;
+  subscriptionPeriod?: { value: number; unit: string } | null;
+  freeTrialPeriod?: { value: number; unit: string } | null;
+  introductoryPrice?: { price: number; priceString: string; period?: { value: number; unit: string } } | null;
+  isSubscription?: boolean;
+  [key: string]: any;
+}
+
+export interface TrialEligibilityInput {
+  isEligible: boolean;
+  hasUsedTrial?: boolean;
+  [key: string]: any;
+}
+
+export class ProductVariableProvider {
+  private packages: PackageInput[];
+  private trialEligibility?: Record<string, TrialEligibilityInput>;
+
+  constructor(
+    packages: PackageInput[],
+    trialEligibility?: Record<string, TrialEligibilityInput>
+  ) {
+    this.packages = packages;
+    this.trialEligibility = trialEligibility;
+  }
+
+  /** Generate variable map for a specific product index */
+  getVariablesForProduct(index: number): Record<string, any> {
+    const pkg = this.packages[index];
+    if (!pkg) return {};
+    return this.getVariablesForPackage(pkg);
+  }
+
+  /** Generate variable map for a specific package (40+ keys) */
+  getVariablesForPackage(pkg: PackageInput): Record<string, any> {
+    const eligibility = this.trialEligibility?.[pkg.productId ?? pkg.identifier];
+    const vars: Record<string, any> = {};
+
+    // Basic
+    vars['product.identifier'] = pkg.identifier;
+    vars['product.packageType'] = pkg.packageType ?? 'custom';
+
+    const hasProduct = pkg.price !== undefined || pkg.rawPrice !== undefined;
+
+    if (hasProduct) {
+      vars['product.price'] = pkg.price ?? '';
+      vars['product.rawPrice'] = pkg.rawPrice ?? 0;
+      vars['product.currencyCode'] = pkg.currencyCode ?? 'USD';
+      vars['product.currencySymbol'] = getCurrencySymbol(pkg.currencyCode ?? 'USD');
+      vars['product.title'] = pkg.title ?? '';
+      vars['product.description'] = pkg.description ?? '';
+
+      // Period
+      const period = pkg.subscriptionPeriod;
+      if (period) {
+        vars['product.period'] = toDisplayString(period);
+        vars['product.periodShort'] = toShortString(period);
+        vars['product.periodDays'] = totalDays(period);
+        vars['product.periodUnit'] = period.unit;
+        vars['product.periodValue'] = period.value;
+      }
+
+      // Calculated prices
+      const raw = pkg.rawPrice ?? 0;
+      const days = period ? totalDays(period) : 0;
+      const daily = days > 0 ? raw / days : raw;
+      const weekly = days > 0 ? (raw / days) * 7 : raw;
+      const monthly = days > 0 ? raw / (days / 30) : raw;
+      const yearly = days > 0 ? (raw / days) * 365 : raw;
+      const cc = pkg.currencyCode ?? 'USD';
+
+      vars['product.dailyPrice'] = formatPrice(daily, cc);
+      vars['product.weeklyPrice'] = formatPrice(weekly, cc);
+      vars['product.monthlyPrice'] = formatPrice(monthly, cc);
+      vars['product.yearlyPrice'] = formatPrice(yearly, cc);
+      vars['product.rawDailyPrice'] = daily;
+      vars['product.rawWeeklyPrice'] = weekly;
+      vars['product.rawMonthlyPrice'] = monthly;
+      vars['product.rawYearlyPrice'] = yearly;
+
+      // Trial
+      const trial = pkg.freeTrialPeriod;
+      vars['product.hasFreeTrial'] = trial != null;
+      if (trial) {
+        vars['product.trialPeriod'] = toDisplayString(trial);
+        vars['product.trialPeriodDays'] = totalDays(trial);
+        vars['product.trialPeriodText'] = formatTrialPeriod(trial);
+      } else {
+        vars['product.trialPeriod'] = '';
+        vars['product.trialPeriodDays'] = 0;
+        vars['product.trialPeriodText'] = '';
+      }
+
+      vars['product.isTrialEligible'] = eligibility?.isEligible ?? (trial != null);
+
+      // Intro offer
+      const intro = pkg.introductoryPrice;
+      vars['product.hasIntroOffer'] = intro != null;
+      if (intro) {
+        vars['product.introPrice'] = intro.priceString;
+        vars['product.introPriceRaw'] = intro.price;
+        vars['product.introPeriod'] = intro.period ? toDisplayString(intro.period) : '';
+      } else {
+        vars['product.introPrice'] = '';
+        vars['product.introPriceRaw'] = 0;
+        vars['product.introPeriod'] = '';
+      }
+
+      // User eligibility
+      const isEligibleForIntro = eligibility?.isEligible ?? (trial != null || intro != null);
+      const hasUsedTrial = eligibility?.hasUsedTrial ?? false;
+      vars['user.isEligibleForIntro'] = isEligibleForIntro;
+      vars['user.hasUsedTrial'] = hasUsedTrial;
+      vars['user.isEligibleForPromo'] = false;
+
+      // Offer summary
+      const hasAnyOffer = trial != null || intro != null;
+      vars['offer.hasAnyOffer'] = hasAnyOffer;
+      vars['offer.type'] = trial ? 'free_trial' : intro ? 'intro' : 'none';
+
+      vars['product.isSubscription'] = pkg.isSubscription ?? (period != null);
+    } else {
+      // Fallback values
+      vars['product.price'] = '';
+      vars['product.rawPrice'] = 0;
+      vars['product.currencyCode'] = 'USD';
+      vars['product.currencySymbol'] = '$';
+      vars['product.title'] = '';
+      vars['product.description'] = '';
+      vars['product.period'] = '';
+      vars['product.periodShort'] = '';
+      vars['product.periodDays'] = 0;
+      vars['product.hasFreeTrial'] = false;
+      vars['product.isTrialEligible'] = false;
+      vars['product.hasIntroOffer'] = false;
+      vars['product.isSubscription'] = false;
+    }
+
+    return vars;
+  }
+
+  /** Generate variables for selected product with "selectedProduct." prefix */
+  getSelectedProductVariables(selectedIndex: number): Record<string, any> {
+    const productVars = this.getVariablesForProduct(selectedIndex);
+    const result: Record<string, any> = {};
+    for (const [key, value] of Object.entries(productVars)) {
+      result[key.replace('product.', 'selectedProduct.')] = value;
+    }
+    return result;
+  }
+
+  /** Generate all product variables with index prefix (products.0.*, products.1.*, etc.) */
+  getAllProductVariables(): Record<string, any> {
+    const vars: Record<string, any> = {};
+    this.packages.forEach((pkg, index) => {
+      const pkgVars = this.getVariablesForPackage(pkg);
+      for (const [key, value] of Object.entries(pkgVars)) {
+        const productKey = key.startsWith('product.') ? key.slice(8) : key;
+        vars[`products.${index}.${productKey}`] = value;
+      }
+    });
+    return vars;
+  }
+
+  /** Generate convenience aliases (primary, secondary, monthly, annual, etc.) */
+  getConvenienceVariables(): Record<string, any> {
+    const vars: Record<string, any> = {};
+
+    // Primary = first package
+    if (this.packages[0]) {
+      for (const [key, value] of Object.entries(this.getVariablesForPackage(this.packages[0]))) {
+        const k = key.startsWith('product.') ? key.slice(8) : key;
+        vars[`primary.${k}`] = value;
+      }
+    }
+
+    // Secondary = second package
+    if (this.packages[1]) {
+      for (const [key, value] of Object.entries(this.getVariablesForPackage(this.packages[1]))) {
+        const k = key.startsWith('product.') ? key.slice(8) : key;
+        vars[`secondary.${k}`] = value;
+      }
+    }
+
+    // Named packages by type
+    for (const pkg of this.packages) {
+      const typeKey = pkg.packageType ?? 'custom';
+      for (const [key, value] of Object.entries(this.getVariablesForPackage(pkg))) {
+        const k = key.startsWith('product.') ? key.slice(8) : key;
+        vars[`${typeKey}.${k}`] = value;
+      }
+    }
+
+    return vars;
+  }
+
+  /** Create provider from an offering */
+  static fromOffering(
+    offering: { packages: PackageInput[] },
+    trialEligibility?: Record<string, TrialEligibilityInput>
+  ): ProductVariableProvider {
+    return new ProductVariableProvider(offering.packages, trialEligibility);
+  }
+}
+
+// Helpers
+
+function getCurrencySymbol(currencyCode: string): string {
+  try {
+    return (0).toLocaleString(undefined, {
+      style: 'currency', currency: currencyCode, minimumFractionDigits: 0, maximumFractionDigits: 0,
+    }).replace(/\d/g, '').trim() || '$';
+  } catch {
+    return '$';
+  }
+}
+
+function formatPrice(price: number, currencyCode: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency: currencyCode }).format(price);
+  } catch {
+    return `$${price.toFixed(2)}`;
+  }
+}
+
+function totalDays(period: { value: number; unit: string }): number {
+  switch (period.unit) {
+    case 'day': return period.value;
+    case 'week': return period.value * 7;
+    case 'month': return period.value * 30;
+    case 'year': return period.value * 365;
+    default: return period.value;
+  }
+}
+
+function toDisplayString(period: { value: number; unit: string }): string {
+  const u = period.unit;
+  const v = period.value;
+  const unitStr = v === 1
+    ? (u === 'day' ? 'day' : u === 'week' ? 'week' : u === 'month' ? 'month' : 'year')
+    : (u === 'day' ? 'days' : u === 'week' ? 'weeks' : u === 'month' ? 'months' : 'years');
+  return `${v} ${unitStr}`;
+}
+
+function toShortString(period: { value: number; unit: string }): string {
+  switch (period.unit) {
+    case 'day': return '/day';
+    case 'week': return '/wk';
+    case 'month': return '/mo';
+    case 'year': return '/yr';
+    default: return `/${period.unit}`;
+  }
+}
+
+function formatTrialPeriod(period: { value: number; unit: string }): string {
+  const days = totalDays(period);
+  if (days === 1) return '1-day free trial';
+  if (days === 7) return '7-day free trial';
+  if (days === 14) return '2-week free trial';
+  if (days === 30 || days === 31) return '1-month free trial';
+  if (days < 7) return `${days}-day free trial`;
+  if (days % 7 === 0) return `${days / 7}-week free trial`;
+  if (days % 30 === 0) return `${days / 30}-month free trial`;
+  return `${days}-day free trial`;
+}