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

package/src/types.ts

@@ -0,0 +1,680 @@
+/**
+ * Type definitions matching the web PaywallComponent structure
+ */
+
+export type ComponentType =
+  | 'text'
+  | 'image'
+  | 'button'
+  | 'stack'
+  | 'feature-list'
+  | 'price'
+  | 'badge'
+  | 'divider'
+  | 'spacer'
+  | 'icon'
+  | 'video'
+  | 'carousel'
+  | 'tabs'
+  | 'footer'
+  | 'social-proof'
+  | 'progress-loader'
+  | 'chart-curve'
+  | 'single-choice-grid'
+  | 'multi-choice-grid'
+  // Interactive / composite components rendered by ComponentRenderer
+  | 'checkbox'
+  | 'toggle'
+  | 'segmented-picker'
+  | 'countdown'
+  | 'accordion'
+  | 'accordion-header'
+  | 'slider'
+  | 'navigation'
+  | 'confetti'
+  | 'delayed-x'
+  | 'haptic-feedback'
+  | 'shape'
+  | 'webp'
+  | 'gif'
+  | 'lottie'
+  | 'drawer-modal'
+  | 'timeline'
+  | 'text-input'
+  | 'star-rating-input'
+  | 'nps-scale'
+  | 'oauth-button'
+  | 'progress-stepper'
+  | 'share-code'
+  | 'share-buttons'
+  | 'vertical-products'
+  | 'horizontal-products'
+  | 'accolade-cps'
+  | 'sticker-composite';
+
+/** Carousel transition animation types */
+export type CarouselTransition = 'scroll' | 'fade' | 'slide' | 'push' | 'none';
+
+export type NotificationChannel = 'push' | 'email' | 'sms' | 'live_activity';
+
+export type LayoutType = 'fill' | 'fixed' | 'hug' | 'fit';
+
+/** Size value as exported by web builder */
+export interface SizeValue {
+  type: 'fill' | 'fixed' | 'fit' | 'hug';
+  value?: number;
+}
+
+export interface Size {
+  width: SizeValue | number | string;
+  height: SizeValue | number | string;
+}
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface Layout {
+  width?: LayoutType;
+  height?: LayoutType;
+  padding?: { top?: number; right?: number; bottom?: number; left?: number };
+  margin?: { top?: number; right?: number; bottom?: number; left?: number };
+}
+
+/** Gradient stop definition */
+export interface GradientStop {
+  color: string;
+  position: number;
+  resolvedColor?: string;
+}
+
+/** Gradient configuration */
+export interface GradientConfig {
+  type: 'linear' | 'radial';
+  angle?: number;
+  stops: GradientStop[];
+}
+
+/** Image fill configuration */
+export interface ImageFillConfig {
+  url: string;
+  fit?: 'fill' | 'fit' | 'stretch' | 'tile';
+  position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+
+/** Fill value from web builder (source of truth) */
+export type FillValue = string | {
+  type: 'color' | 'gradient' | 'image';
+  color?: string;
+  /** Pre-resolved hex color from the web exporter */
+  resolvedColor?: string;
+  opacity?: number;
+  gradient?: GradientConfig;
+  image?: ImageFillConfig;
+};
+
+/** Background color object (SDK-compatible format from web exporter) */
+export interface BackgroundColorObject {
+  type: 'color' | 'gradient' | 'image';
+  color?: string;
+  resolvedColor?: string;
+  opacity?: number;
+  gradient?: GradientConfig;
+}
+
+/** Background color can be a string or complex object from web builder */
+export type BackgroundColorValue = string | {
+  type: 'color' | 'gradient' | 'image';
+  color?: string;
+  opacity?: number;
+  resolvedColor?: string;
+  gradient?: {
+    type: 'linear' | 'radial';
+    angle?: number;
+    stops: Array<{ color: string; position: number; resolvedColor?: string }>;
+  };
+  imageUrl?: string;
+};
+
+export interface Appearance {
+  /** Original fill value from web builder (source of truth) */
+  fill?: FillValue;
+  
+  /** Pre-resolved background color string for SDK compatibility */
+  backgroundColor?: BackgroundColorValue;
+  
+  /** Structured background color object for gradients */
+  backgroundColorObj?: BackgroundColorObject;
+  
+  borderColor?: string | { type: string; color?: string; resolvedColor?: string };
+  /** Pre-resolved hex border color from the web exporter */
+  borderColorResolved?: string;
+  borderWidth?: number;
+  borderRadius?: number; // Legacy field
+  cornerRadius?: number; // Web builder field (preferred)
+  opacity?: number;
+  shape?: 'rectangle' | 'pill' | 'circle';
+  
+  // Phase 4: New JSON-first properties
+  transform?: Transform;
+  border?: Border;
+  shadow?: Shadow;
+  
+  // Legacy border sides (backward compat)
+  borderBottom?: LegacyBorderSide;
+  borderTop?: LegacyBorderSide;
+  borderLeft?: LegacyBorderSide;
+  borderRight?: LegacyBorderSide;
+}
+
+/**
+ * Get effective background color from appearance
+ * Priority: fill.color → backgroundColorObj.resolvedColor → backgroundColor
+ */
+export function getEffectiveBackgroundColor(appearance: Appearance): string | undefined {
+  // Check fill first
+  if (appearance.fill) {
+    if (typeof appearance.fill === 'string') {
+      return appearance.fill;
+    }
+    if (appearance.fill.color) {
+      return appearance.fill.color;
+    }
+    if (appearance.fill.gradient?.stops?.[0]?.color) {
+      return appearance.fill.gradient.stops[0].color;
+    }
+  }
+  
+  // Check backgroundColorObj
+  if (appearance.backgroundColorObj?.resolvedColor) {
+    return appearance.backgroundColorObj.resolvedColor;
+  }
+  
+  // Fallback to backgroundColor
+  if (appearance.backgroundColor) {
+    if (typeof appearance.backgroundColor === 'string') {
+      return appearance.backgroundColor;
+    }
+    return appearance.backgroundColor.resolvedColor ?? appearance.backgroundColor.color;
+  }
+  
+  return undefined;
+}
+
+/**
+ * Check if appearance has a gradient background
+ */
+export function hasGradientBackground(appearance: Appearance): boolean {
+  if (appearance.fill && typeof appearance.fill === 'object' && appearance.fill.type === 'gradient') {
+    return true;
+  }
+  if (appearance.backgroundColorObj?.type === 'gradient') {
+    return true;
+  }
+  if (appearance.backgroundColor && typeof appearance.backgroundColor === 'object' && appearance.backgroundColor.type === 'gradient') {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Get gradient config from appearance
+ */
+export function getGradientConfig(appearance: Appearance): GradientConfig | undefined {
+  if (appearance.fill && typeof appearance.fill === 'object' && appearance.fill.gradient) {
+    return appearance.fill.gradient;
+  }
+  if (appearance.backgroundColorObj?.gradient) {
+    return appearance.backgroundColorObj.gradient;
+  }
+  if (appearance.backgroundColor && typeof appearance.backgroundColor === 'object' && appearance.backgroundColor.gradient) {
+    return appearance.backgroundColor.gradient;
+  }
+  return undefined;
+}
+
+// MARK: - Phase 4 JSON-First Model Types
+
+/** Text color object for structured text styling */
+export interface TextColorObject {
+  type: 'color' | 'gradient';
+  color?: string;
+  resolvedColor?: string;
+  gradient?: GradientConfig;
+}
+
+/** Typography configuration for text components */
+export interface Typography {
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: number;
+  fontStyle?: 'normal' | 'italic';
+  lineHeight?: number;
+  letterSpacing?: number;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  textDecoration?: 'none' | 'underline' | 'line-through';
+  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+  color?: string;
+  resolvedColor?: string;
+  textColorObj?: TextColorObject;
+}
+
+/** Transform configuration for component transformations */
+export interface Transform {
+  rotation?: number;
+  rotationX?: number;
+  rotationY?: number;
+  scaleX?: number;
+  scaleY?: number;
+  translateX?: number;
+  translateY?: number;
+  skewX?: number;
+  skewY?: number;
+  anchorX?: number;
+  anchorY?: number;
+}
+
+/** Border side configuration */
+export interface BorderSide {
+  width?: number;
+  color?: string;
+  resolvedColor?: string;
+  style?: 'solid' | 'dashed' | 'dotted' | 'none';
+}
+
+/** Border radius configuration */
+export interface BorderRadius {
+  topLeft?: number;
+  topRight?: number;
+  bottomLeft?: number;
+  bottomRight?: number;
+  uniform?: number;
+}
+
+/** Border configuration */
+export interface Border {
+  width?: number;
+  color?: string;
+  resolvedColor?: string;
+  style?: 'solid' | 'dashed' | 'dotted' | 'none';
+  top?: BorderSide;
+  right?: BorderSide;
+  bottom?: BorderSide;
+  left?: BorderSide;
+  radius?: BorderRadius;
+}
+
+/** Shadow configuration */
+export interface Shadow {
+  offsetX?: number;
+  offsetY?: number;
+  /** Legacy/web-builder aliases for offsetX/offsetY */
+  x?: number;
+  y?: number;
+  blur?: number;
+  spread?: number;
+  color?: string;
+  resolvedColor?: string;
+  opacity?: number;
+  inset?: boolean;
+}
+
+/** Legacy border side for appearance (backward compat) */
+export interface LegacyBorderSide {
+  color?: string;
+  width?: number;
+}
+
+/** Border configuration from web builder (root-level on component) */
+export interface BorderConfig {
+  color?: string;
+  /** Pre-resolved hex border color from the web exporter */
+  resolvedColor?: string;
+  width?: number;
+  style?: 'solid' | 'dashed' | 'dotted';
+  radius?: BorderRadius;
+}
+
+// Helper functions for Phase 4 types
+
+/** Get effective typography color */
+export function getEffectiveTypographyColor(typography: Typography): string | undefined {
+  return typography.resolvedColor ?? typography.textColorObj?.resolvedColor ?? typography.color;
+}
+
+/** Check if transform has any transformation applied */
+export function hasTransform(transform: Transform): boolean {
+  return transform.rotation != null ||
+    transform.rotationX != null ||
+    transform.rotationY != null ||
+    transform.scaleX != null ||
+    transform.scaleY != null ||
+    transform.translateX != null ||
+    transform.translateY != null ||
+    transform.skewX != null ||
+    transform.skewY != null;
+}
+
+/** Get effective border color */
+export function getEffectiveBorderColor(border: Border): string | undefined {
+  return border.resolvedColor ?? border.color;
+}
+
+/** Get effective shadow color */
+export function getEffectiveShadowColor(shadow: Shadow): string | undefined {
+  return shadow.resolvedColor ?? shadow.color;
+}
+
+export interface ContainerLayout {
+  type?: 'row' | 'column' | 'grid' | 'wrap' | 'absolute';
+  axis?: 'horizontal' | 'vertical' | 'layered';
+  gap?: { value: number; unit: string } | number;
+  horizontalAlignment?: 'start' | 'center' | 'end' | 'stretch' | 'space-between';
+  verticalAlignment?: 'start' | 'center' | 'end' | 'stretch';
+  distribution?: string;
+  overflow?: string;
+  columns?: number;
+  rows?: number;
+}
+
+export interface PaywallComponent {
+  id: string;
+  type: ComponentType;
+  name: string;
+  
+  // Component hierarchy (Phase 1)
+  componentLevel?: 'primitive' | 'composite' | 'custom';
+  isSnippet?: boolean;
+  shareStatus?: 'private' | 'public';
+  createdBy?: string;
+  snippetCategory?: string;
+  
+  // Standard positioning
+  position: Position;
+  size: Size;
+  layout: Layout;
+  appearance: Appearance;
+  properties: Record<string, any>;
+  children?: PaywallComponent[];
+  visible?: boolean;
+  locked?: boolean;
+  
+  // Root-level border (web builder format - migrated to appearance)
+  border?: BorderConfig;
+  
+  // Free positioning support
+  absolutePosition?: {
+    x: number;
+    y: number;
+  };
+  
+  // Z-index for layering
+  zIndex?: number;
+  
+  // Composite type preservation (for stack-based composites)
+  compositeType?: string;
+  
+  // Container layout for stack rendering
+  containerLayout?: ContainerLayout;
+  
+  // Role identifier
+  role?: string;
+  
+  // ============= DUAL PROPERTIES SYSTEM =============
+  // Selected state properties for selectable components (product cards, segments, tabs, etc.)
+  // When a component is in "selected" state, SDK uses these over default properties
+  
+  /** Selected state properties - mirrors the `properties` map structure */
+  selectedProperties?: Record<string, any>;
+  
+  /** Selected state appearance - full appearance for selected state */
+  selectedAppearance?: Appearance;
+  
+  /** Selected state layout - padding/margin for selected state */
+  selectedLayout?: Layout;
+  
+  /** Selected state size - width/height for selected state */
+  selectedSize?: Size;
+  
+  /** Selected state container layout - axis/gap/alignment for selected state */
+  selectedContainerLayout?: ContainerLayout;
+}
+
+export interface Product {
+  id: string;
+  product_identifier: string;
+  display_name: string;
+  description?: string;
+  type: string;
+  platform: string;
+  price_usd?: number;
+  currency?: string;
+  intro_price_usd?: number;
+  intro_duration?: number;
+  intro_period?: string;
+  intro_cycles?: number;
+}
+
+export interface OfferingPackage {
+  id: string;
+  package_identifier: string;
+  package_type?: string;
+  position: number;
+  metadata?: Record<string, any>;
+  product_id?: string;
+  product?: Product;
+}
+
+export type DisplayStyle = 
+  | 'full_screen'
+  | 'sheet'
+  | 'push_navigation'
+  | 'no_transition'
+  | 'side_drawer'
+  | 'overlay_popup';
+
+export type AccessControl = 'restricted' | 'unrestricted';
+
+// Screen-level layout settings (part of theme)
+export interface ScreenLayout {
+  alignment: 'start' | 'center' | 'end';
+  gap: number;
+  padding: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+  safeAreaInsets?: boolean;
+}
+
+export interface ControllerMapping {
+  upButton?: string;
+  downButton?: string;
+  selectButton?: string;
+  dismissButton?: string;
+}
+
+export interface MobileDisplayConfig {
+  displayStyle: DisplayStyle;
+  allowScrolling: boolean;
+  gameControllerEnabled: boolean;
+  controllerMapping?: ControllerMapping;
+  interceptBackButton: boolean;
+  accessControl: AccessControl;
+  requirements?: {
+    minIosVersion?: string;
+    minAndroidVersion?: string;
+    requiredFeatures?: string[];
+  };
+}
+
+export interface EmailPayload {
+  to: string;
+  subject: string;
+  html_body: string;
+  text_body?: string;
+  from?: string;
+  reply_to?: string;
+  notification_id?: string;
+}
+
+export interface SMSPayload {
+  to: string;
+  body: string;
+  from?: string;
+  notification_id?: string;
+}
+
+export interface LiveActivityPayload {
+  activity_token: string;
+  event: 'start' | 'update' | 'end';
+  content_state: Record<string, any>;
+  stale_date?: Date;
+  dismissal_date?: Date;
+  notification_id?: string;
+}
+
+/**
+ * Canonical theme colors — 26 fields matching paywall-renderer ThemeColors.
+ * All values are pre-resolved hex strings from the exporter.
+ */
+export interface ThemeColors {
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  accent: string;
+  accentForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+  input: string;
+  ring: string;
+  popover: string;
+  popoverForeground: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+  info: string;
+  infoForeground: string;
+}
+
+/** Theme configuration with resolved colors */
+export interface ThemeConfig {
+  /** Canonical typed colors (preferred) */
+  colors?: Partial<ThemeColors>;
+  /** Legacy color fields — mapped to canonical names by normalizeThemeColors() */
+  primaryColor?: string;
+  secondaryColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  cardColor?: string;
+  mutedColor?: string;
+  borderColor?: string;
+  accentColor?: string;
+  themingMode?: 'full' | 'component-priority' | 'disabled';
+  resolvedColors?: Record<string, string>;
+  fonts?: Record<string, any>;
+  screenLayout?: ScreenLayout;
+}
+
+/** Default dark theme colors */
+const DARK_DEFAULTS: ThemeColors = {
+  primary: '#3B82F6', primaryForeground: '#FFFFFF',
+  secondary: '#22C55E', secondaryForeground: '#FFFFFF',
+  background: '#141421', foreground: '#FAFAFA',
+  card: '#1E1E35', cardForeground: '#FAFAFA',
+  muted: '#1E1E35', mutedForeground: '#8B8BA3',
+  border: '#2A2A45',
+  accent: '#8B5CF6', accentForeground: '#FFFFFF',
+  destructive: '#EF4444', destructiveForeground: '#FFFFFF',
+  input: '#2A2A45', ring: '#3B82F6',
+  popover: '#1E1E35', popoverForeground: '#FAFAFA',
+  success: '#22C55E', successForeground: '#FFFFFF',
+  warning: '#F59E0B', warningForeground: '#FFFFFF',
+  info: '#3B82F6', infoForeground: '#FFFFFF',
+};
+
+/**
+ * Normalize any theme config (legacy or canonical) into the 26-field ThemeColors.
+ * Maps legacy field names (primaryColor, backgroundColor, etc.) to canonical names.
+ */
+export function normalizeThemeColors(config: ThemeConfig | undefined): ThemeColors {
+  if (!config) return { ...DARK_DEFAULTS };
+  
+  const colors = config.colors ?? {};
+  const resolved = config.resolvedColors ?? {};
+  
+  return {
+    primary: colors.primary ?? resolved['primary'] ?? config.primaryColor ?? DARK_DEFAULTS.primary,
+    primaryForeground: colors.primaryForeground ?? resolved['primary-foreground'] ?? DARK_DEFAULTS.primaryForeground,
+    secondary: colors.secondary ?? resolved['secondary'] ?? config.secondaryColor ?? DARK_DEFAULTS.secondary,
+    secondaryForeground: colors.secondaryForeground ?? resolved['secondary-foreground'] ?? DARK_DEFAULTS.secondaryForeground,
+    background: colors.background ?? resolved['background'] ?? config.backgroundColor ?? DARK_DEFAULTS.background,
+    foreground: colors.foreground ?? resolved['foreground'] ?? config.textColor ?? DARK_DEFAULTS.foreground,
+    card: colors.card ?? resolved['card'] ?? config.cardColor ?? DARK_DEFAULTS.card,
+    cardForeground: colors.cardForeground ?? resolved['card-foreground'] ?? DARK_DEFAULTS.cardForeground,
+    muted: colors.muted ?? resolved['muted'] ?? config.mutedColor ?? DARK_DEFAULTS.muted,
+    mutedForeground: colors.mutedForeground ?? resolved['muted-foreground'] ?? DARK_DEFAULTS.mutedForeground,
+    border: colors.border ?? resolved['border'] ?? config.borderColor ?? DARK_DEFAULTS.border,
+    accent: colors.accent ?? resolved['accent'] ?? config.accentColor ?? DARK_DEFAULTS.accent,
+    accentForeground: colors.accentForeground ?? resolved['accent-foreground'] ?? DARK_DEFAULTS.accentForeground,
+    destructive: colors.destructive ?? resolved['destructive'] ?? DARK_DEFAULTS.destructive,
+    destructiveForeground: colors.destructiveForeground ?? resolved['destructive-foreground'] ?? DARK_DEFAULTS.destructiveForeground,
+    input: colors.input ?? resolved['input'] ?? DARK_DEFAULTS.input,
+    ring: colors.ring ?? resolved['ring'] ?? DARK_DEFAULTS.ring,
+    popover: colors.popover ?? resolved['popover'] ?? DARK_DEFAULTS.popover,
+    popoverForeground: colors.popoverForeground ?? resolved['popover-foreground'] ?? DARK_DEFAULTS.popoverForeground,
+    success: colors.success ?? resolved['success'] ?? DARK_DEFAULTS.success,
+    successForeground: colors.successForeground ?? resolved['success-foreground'] ?? DARK_DEFAULTS.successForeground,
+    warning: colors.warning ?? resolved['warning'] ?? DARK_DEFAULTS.warning,
+    warningForeground: colors.warningForeground ?? resolved['warning-foreground'] ?? DARK_DEFAULTS.warningForeground,
+    info: colors.info ?? resolved['info'] ?? DARK_DEFAULTS.info,
+    infoForeground: colors.infoForeground ?? resolved['info-foreground'] ?? DARK_DEFAULTS.infoForeground,
+  };
+}
+
+export type OfferDisplayMode = 'automatic' | 'always' | 'never';
+
+export interface AppStoreIntegration {
+  showIntroPrice: OfferDisplayMode;
+  showFreeTrial: OfferDisplayMode;
+  autoSelectBestOffer?: boolean;
+  promoOfferIdentifier?: string;
+}
+
+export interface PaywallConfiguration {
+  components: PaywallComponent[];
+  theme?: ThemeConfig;
+  variables?: Record<string, string>;
+  localizations?: Record<string, Record<string, string>>;
+  /** Per-variable locale overrides: { variableName: { locale: value } } */
+  variableLocalizations?: Record<string, Record<string, string>>;
+  offeringId?: string;
+  
+  /** Base locale for translations (source language), defaults to 'en' */
+  baseLocale?: string;
+  
+  // Mobile display settings
+  mobileDisplay?: MobileDisplayConfig;
+  
+  // App Store Integration
+  appStoreIntegration?: AppStoreIntegration;
+
+  /**
+   * Resolved store packages/products bound to this paywall, when available.
+   * Shape is store-dependent (StoreKit/Play) and accessed structurally by
+   * product components, so it is typed loosely here.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  packages?: any[];
+}