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

package/src/components/VerticalProductsComponent.tsx

@@ -0,0 +1,357 @@
+/**
+ * Vertical Products Component for React Native
+ * Pure Child Model: renders children via renderChild with overlay extraction,
+ * child sanitization, and selection state propagation.
+ * Matches Android ProductsComponent.kt and iOS ProductsRenderer.swift architecture.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  ViewStyle,
+  Text,
+  AccessibilityInfo,
+} from 'react-native';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+import { PaywallStateManager } from '../PaywallStateManager';
+
+export interface VerticalProductsComponentProps {
+  component: PaywallComponent;
+  configuration: PaywallConfiguration;
+  renderChild: (child: PaywallComponent) => React.ReactNode;
+  stateManager?: any;
+  onAction?: (componentId: string, action: string) => void;
+}
+
+// ============= OVERLAY EXTRACTION =============
+
+interface OverlayExtraction {
+  badge: PaywallComponent | null;
+  checkmark: PaywallComponent | null;
+  radioIndicator: PaywallComponent | null;
+  remainingChildren: PaywallComponent[];
+}
+
+function getRole(child: PaywallComponent): string | undefined {
+  return (child as any).role || child.properties?.role;
+}
+
+function extractOverlays(children: PaywallComponent[] | undefined): OverlayExtraction {
+  if (!children?.length) {
+    return { badge: null, checkmark: null, radioIndicator: null, remainingChildren: [] };
+  }
+
+  const badge = children.find(c => getRole(c) === 'badge') || null;
+  const checkmark = children.find(c => getRole(c) === 'checkmark') || null;
+  const radioIndicator = children.find(c => getRole(c) === 'radio-indicator') || null;
+
+  const remaining = children.filter(c => c !== badge && c !== checkmark && c !== radioIndicator);
+
+  return { badge, checkmark, radioIndicator, remainingChildren: remaining };
+}
+
+// ============= CHILD SANITIZATION =============
+
+function sanitizeProductChild(child: PaywallComponent): PaywallComponent {
+  const sanitized = { ...child };
+  
+  // Strip card-level appearance (wrapper handles it)
+  if (sanitized.appearance) {
+    const { fill, backgroundColor, cornerRadius, borderColor, borderWidth, shadow, ...rest } = sanitized.appearance as any;
+    sanitized.appearance = rest;
+  }
+
+  // Strip selected appearance (wrapper handles selection styling)
+  (sanitized as any).selectedAppearance = undefined;
+
+  // Strip layout padding (wrapper applies card padding)
+  if (sanitized.layout) {
+    const { padding, ...restLayout } = sanitized.layout as any;
+    sanitized.layout = restLayout;
+  }
+
+  return sanitized;
+}
+
+// ============= SELECTION STATE PROPAGATION =============
+
+function applySelectionState(component: PaywallComponent, isSelected: boolean, isHybridMode: boolean): PaywallComponent {
+  if (!isHybridMode) return component;
+
+  const role = getRole(component);
+
+  // Handle radio-indicator composite
+  if (role === 'radio-indicator' && component.type === 'stack' && component.children) {
+    return {
+      ...component,
+      children: component.children.map(iconChild => {
+        const iconRole = getRole(iconChild);
+        if (iconRole === 'selected-icon') return { ...iconChild, visible: isSelected };
+        if (iconRole === 'unselected-icon') return { ...iconChild, visible: !isSelected };
+        return applySelectionState(iconChild, isSelected, isHybridMode);
+      }),
+    };
+  }
+
+  // Handle checkmark visibility
+  if (role === 'checkmark') {
+    return { ...component, visible: isSelected };
+  }
+
+  // Recurse into children
+  if (component.children?.length) {
+    return {
+      ...component,
+      children: component.children.map(c => applySelectionState(c, isSelected, isHybridMode)),
+    };
+  }
+
+  return component;
+}
+
+// ============= HYBRID MODE DETECTION =============
+
+function hasHybridChildren(children: PaywallComponent[]): boolean {
+  return children.some(child => {
+    if (getRole(child)) return true;
+    return hasChildWithRole(child);
+  });
+}
+
+function hasChildWithRole(component: PaywallComponent): boolean {
+  if (!component.children) return false;
+  for (const child of component.children) {
+    if (getRole(child)) return true;
+    if (hasChildWithRole(child)) return true;
+  }
+  return false;
+}
+
+// ============= HELPERS =============
+
+function resolveNumber(val: any, fallback: number): number {
+  if (typeof val === 'number') return val;
+  if (val && typeof val === 'object' && 'value' in val) return val.value;
+  return fallback;
+}
+
+function resolveColor(appearance: any, key: string, fallback: string): string {
+  if (!appearance) return fallback;
+  const val = appearance[key];
+  if (!val) return fallback;
+  if (typeof val === 'string') return val;
+  if (val.resolvedColor) return val.resolvedColor;
+  if (val.color) return typeof val.color === 'string' ? val.color : fallback;
+  if (val.hex) return val.hex;
+  return fallback;
+}
+
+function resolveFillColor(appearance: any, fallback: string): string {
+  if (!appearance) return fallback;
+  if (appearance.fill) return resolveColor(appearance, 'fill', fallback);
+  if (appearance.backgroundColor) return resolveColor(appearance, 'backgroundColor', fallback);
+  return fallback;
+}
+
+// ============= MAIN COMPONENT =============
+
+export const VerticalProductsComponent: React.FC<VerticalProductsComponentProps> = ({
+  component,
+  configuration,
+  renderChild,
+  stateManager,
+  onAction,
+}) => {
+  const properties = component.properties || {};
+  const allChildren = component.children || [];
+
+  // Package binding
+  const bindToPackages = properties.bindToPackages !== false;
+  const packageIdentifiers: string[] = properties.packageIdentifiers || [];
+
+  // Resolve bound packages
+  const boundPackages = bindToPackages
+    ? (packageIdentifiers.length > 0
+        ? packageIdentifiers
+            .map(id => (configuration.packages || []).find(p => (p as any).identifier === id || (p as any).productId === id))
+            .filter(Boolean)
+        : configuration.packages || [])
+    : [];
+
+  // Children resolution: bind mode with packages available -> limit; else show all visible
+  const children = (bindToPackages && boundPackages.length > 0)
+    ? allChildren.slice(0, boundPackages.length)
+    : allChildren.filter(c => c.visible !== false);
+
+  const gap = resolveNumber(properties.gap, 12);
+  const defaultSelectedIndex = resolveNumber(properties.defaultSelectedIndex, 0);
+  const showRadio = properties.showRadio !== false;
+  const showBadge = !!properties.showBadge;
+  const badgeProductIndex = resolveNumber(properties.badgeProductIndex, 0);
+
+  const isHybridMode = hasHybridChildren(children);
+
+  // State
+  const stateKey = `element:${component.id}.selectedIndex`;
+  const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex);
+
+  useEffect(() => {
+    if (!stateManager) return;
+    const existing = stateManager.getState?.(stateKey);
+    if (existing !== undefined && existing !== null) {
+      setSelectedIndex(Number(existing));
+    } else {
+      stateManager.setState?.(stateKey, defaultSelectedIndex);
+    }
+    // Return the unsubscribe. This was dropped on the floor while nothing supplied a
+    // stateManager and every call no-opped; now that one is provided, an uncleaned
+    // subscription leaks a listener holding a stale setSelectedIndex on each remount.
+    return stateManager.subscribe?.(stateKey, (value: any) => {
+      setSelectedIndex(Number(value) || 0);
+    });
+  }, [component.id, stateManager]);
+
+  // Publish the live selection PAYWALL-WIDE so Dynamic Values can react to it
+  // (`products.selectedIndex == 1` templates) and so `selectedProduct.*` resolves for
+  // the user's actual choice. The per-element key above is scoped to this component.
+  // With multiple products components, last write wins — same contract as Android
+  // ProductsComponent and iOS ProductsRenderer.updateSelectionState.
+  useEffect(() => {
+    stateManager?.setState?.(PaywallStateManager.SELECTED_INDEX_KEY, selectedIndex);
+  }, [selectedIndex, stateManager]);
+
+  const handleSelect = useCallback((index: number) => {
+    setSelectedIndex(index);
+    stateManager?.setState?.(stateKey, index);
+    onAction?.(component.id, `select_package:${index},${children[index]?.id}`);
+    
+    AccessibilityInfo.announceForAccessibility(`Selected product ${index + 1}`);
+  }, [stateKey, stateManager, onAction, component.id, children]);
+
+  // Render single product card (3-layer structure)
+  const renderProductCard = (child: PaywallComponent, index: number) => {
+    const isSelected = index === selectedIndex;
+    const childAppearance = child.appearance as any;
+    const childSelectedAppearance = (child as any).selectedAppearance as any;
+    const childLayout = child.layout as any;
+
+    // Default state styling from child.appearance
+    const cardBg = resolveFillColor(childAppearance, 'transparent');
+    const cardCornerRadius = resolveNumber(childAppearance?.cornerRadius, 12);
+    const cardBorderColor = resolveColor(childAppearance, 'borderColor', 'rgba(128,128,128,0.2)');
+    const cardBorderWidth = resolveNumber(childAppearance?.borderWidth, 0);
+
+    // Selected state styling from child.selectedAppearance
+    const selectedBg = resolveFillColor(childSelectedAppearance, 'rgba(59,130,246,0.1)');
+    const selectedBorderColor = resolveColor(childSelectedAppearance, 'borderColor', '#3B82F6');
+    const selectedBorderWidth = resolveNumber(childSelectedAppearance?.borderWidth, 2);
+
+    const bgColor = isSelected ? selectedBg : cardBg;
+    const borderColor = isSelected ? selectedBorderColor : cardBorderColor;
+    const borderWidth = isSelected ? selectedBorderWidth : cardBorderWidth;
+
+    // Padding from child.layout.padding
+    const padding = childLayout?.padding;
+    const paddingTop = resolveNumber(padding?.top, 14);
+    const paddingRight = resolveNumber(padding?.right, 16);
+    const paddingBottom = resolveNumber(padding?.bottom, 14);
+    const paddingLeft = resolveNumber(padding?.left, 16);
+
+    // Extract overlays
+    const extraction = extractOverlays(child.children);
+
+    // Sanitize child
+    const childWithRemaining = { ...child, children: extraction.remainingChildren };
+    const sanitized = sanitizeProductChild(childWithRemaining);
+    const transformed = applySelectionState(sanitized, isSelected, isHybridMode);
+
+    return (
+      <TouchableOpacity
+        key={child.id || `product-${index}`}
+        activeOpacity={0.8}
+        onPress={() => handleSelect(index)}
+        accessibilityRole="radio"
+        accessibilityState={{ selected: isSelected }}
+        accessibilityLabel={`Product ${index + 1}, ${isSelected ? 'selected' : 'not selected'}`}
+        style={{ marginBottom: index < children.length - 1 ? gap : 0 }}
+      >
+        {/* 3-Layer Structure */}
+        <View style={{ position: 'relative' }}>
+          {/* Layer 1: Background */}
+          <View
+            style={{
+              ...StyleSheet.absoluteFillObject,
+              backgroundColor: bgColor,
+              borderRadius: cardCornerRadius,
+              borderColor: borderColor,
+              borderWidth: borderWidth,
+            }}
+          />
+
+          {/* Layer 2: Content with padding */}
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingTop,
+              paddingRight,
+              paddingBottom,
+              paddingLeft,
+            }}
+          >
+            {/* Radio indicator */}
+            {showRadio && (
+              isHybridMode && extraction.radioIndicator ? (
+                <View style={{ marginRight: 12 }}>
+                  {renderChild(applySelectionState(extraction.radioIndicator, isSelected, true))}
+                </View>
+              ) : !isHybridMode ? (
+                <View style={{ marginRight: 12 }}>
+                  <View
+                    style={{
+                      width: 22,
+                      height: 22,
+                      borderRadius: 11,
+                      borderWidth: 2,
+                      borderColor: isSelected ? '#3B82F6' : 'rgba(128,128,128,0.4)',
+                      backgroundColor: isSelected ? '#3B82F6' : 'transparent',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                    }}
+                  >
+                    {isSelected && (
+                      <Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold' }}>✓</Text>
+                    )}
+                  </View>
+                </View>
+              ) : null
+            )}
+
+            {/* Render sanitized child content */}
+            <View style={{ flex: 1 }}>
+              {renderChild(transformed)}
+            </View>
+          </View>
+
+          {/* Layer 3: Badge overlay */}
+          {extraction.badge && showBadge && index === badgeProductIndex && (
+            <View style={{ position: 'absolute', top: -10, right: 12, zIndex: 10 }}>
+              {renderChild(extraction.badge)}
+            </View>
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View accessibilityRole="radiogroup" accessibilityLabel="Select a product">
+      {children.map((child, index) => renderProductCard(child, index))}
+    </View>
+  );
+};
+
+export default VerticalProductsComponent;

package/src/dynamicValues.ts

@@ -0,0 +1,180 @@
+/**
+ * Dynamic Values System for React Native SDK
+ * Supports nested condition groups with AND/OR logic
+ */
+
+import { getNestedValue, isEqual, toNumber, stringify } from './valueUtils';
+export interface DynamicCondition {
+  id: string;
+  type: 'variable';
+  variableName?: string;
+  operator: 'equals' | 'not_equals' | 'greater_than' | 'less_than' | 'greater_than_or_equal' | 'less_than_or_equal' | 'contains' | 'exists';
+  value: any;
+}
+
+export interface ConditionGroup {
+  id: string;
+  logic: 'AND' | 'OR';
+  conditions: DynamicCondition[];
+  groups: ConditionGroup[];  // Recursive nested groups
+}
+
+export interface DynamicValueEntry {
+  id: string;
+  rootGroup: ConditionGroup;  // Required - nested condition groups
+  value: any;
+}
+
+
+export interface DynamicValue {
+  _isDynamic: true;
+  default: any;
+  values: DynamicValueEntry[];
+}
+
+export function isDynamicValue(value: any): value is DynamicValue {
+  return typeof value === 'object' && value !== null && value._isDynamic === true;
+}
+
+export function evaluateDynamicValue(dynamicValue: any, variables: Record<string, any>): any {
+  if (!isDynamicValue(dynamicValue)) return dynamicValue;
+  
+  try {
+    const entries = dynamicValue.values || [];
+    for (const entry of entries) {
+      if (evaluateConditionGroup(entry.rootGroup, variables)) {
+        return entry.value;
+      }
+    }
+    return dynamicValue.default;
+  } catch (error) {
+    console.warn('[DynamicValue] Evaluation failed, using default:', error);
+    return dynamicValue.default;
+  }
+}
+
+export function evaluateConditionGroup(group: ConditionGroup, variables: Record<string, any>): boolean {
+  // `?? []` — a group commonly omits `conditions` or `groups` when empty (the conformance corpus and
+  // DB-stored dynamic values both do). `.map` on the missing array throws, the throw is swallowed by
+  // evaluateDynamicValue's try/catch, and the value silently collapses to its default. The web copy had
+  // this guard; it was never propagated here.
+  const conditionResults = (group.conditions ?? []).map(c => evaluateSingleCondition(c, variables));
+  const groupResults = (group.groups ?? []).map(g => evaluateConditionGroup(g, variables));
+  const allResults = [...conditionResults, ...groupResults];
+
+  // Empty group evaluates to true
+  if (allResults.length === 0) return true;
+
+  return group.logic === 'AND'
+    ? allResults.every(Boolean)
+    : allResults.some(Boolean);
+}
+
+function evaluateSingleCondition(condition: DynamicCondition, variables: Record<string, any>): boolean {
+  if (!condition.variableName) return false;
+  const varValue = getNestedValue(variables, condition.variableName);
+
+  switch (condition.operator) {
+    case 'equals': return isEqual(varValue, condition.value);
+    case 'not_equals': return !isEqual(varValue, condition.value);
+    // toNumber (not Number()): non-numeric → 0, matching native `toDouble`. `Number()` yields NaN, which
+    // makes every ordering comparison silently false and disagrees with the device.
+    case 'greater_than': return toNumber(varValue) > toNumber(condition.value);
+    case 'less_than': return toNumber(varValue) < toNumber(condition.value);
+    case 'greater_than_or_equal': return toNumber(varValue) >= toNumber(condition.value);
+    case 'less_than_or_equal': return toNumber(varValue) <= toNumber(condition.value);
+    case 'contains':
+      if (varValue == null) return false;
+      return stringify(varValue).toLowerCase().includes(stringify(condition.value).toLowerCase());
+    case 'exists': return varValue != null && stringify(varValue) !== '';
+    default: return false;
+  }
+}
+
+export function processComponentProperties(properties: Record<string, any>, variables: Record<string, any>): Record<string, any> {
+  const safeProps = (properties && typeof properties === 'object') ? properties : {};
+  const processed: Record<string, any> = {};
+  for (const [key, value] of Object.entries(safeProps)) {
+    if (isDynamicValue(value)) {
+      processed[key] = evaluateDynamicValue(value, variables);
+    } else if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      processed[key] = processComponentProperties(value as Record<string, any>, variables);
+    } else {
+      processed[key] = value;
+    }
+  }
+  return processed;
+}
+
+export function processFullComponent<T extends Record<string, any>>(
+  component: T,
+  variables: Record<string, any>
+): T {
+  const result = { ...component };
+  
+  const nestedKeys = ['properties', 'appearance', 'size', 'containerLayout', 'layout', 'border', 'shadow', 'selectedAppearance', 'selectedProperties', 'selectedLayout', 'selectedSize', 'activeAppearance', 'completedAppearance', 'tapBehavior'];
+  for (const key of nestedKeys) {
+    if (component[key] && typeof component[key] === 'object') {
+      (result as any)[key] = processComponentProperties(component[key], variables);
+    }
+  }
+  
+  if (isDynamicValue(component.visible)) {
+    (result as any).visible = evaluateDynamicValue(component.visible, variables);
+  }
+
+  // Recursive children processing
+  if (Array.isArray(component.children)) {
+    (result as any).children = component.children.map(
+      (child: any) => processFullComponent(child, variables)
+    );
+  }
+  
+  return result;
+}
+
+// Factory functions
+export function createConditionGroup(logic: 'AND' | 'OR' = 'AND'): ConditionGroup {
+  return {
+    id: generateId(),
+    logic,
+    conditions: [],
+    groups: [],
+  };
+}
+
+export function createDynamicValue(defaultValue: any, values: DynamicValueEntry[] = []): DynamicValue {
+  return { _isDynamic: true, default: defaultValue, values };
+}
+
+export function createCondition(
+  variableName: string,
+  operator: DynamicCondition['operator'],
+  value: any
+): DynamicCondition {
+  return {
+    id: generateId(),
+    type: 'variable',
+    variableName,
+    operator,
+    value,
+  };
+}
+
+export function createSimpleValueEntry(variableName: string, operator: DynamicCondition['operator'], value: any, returnValue: any): DynamicValueEntry {
+  const condition = createCondition(variableName, operator, value);
+  const group: ConditionGroup = {
+    ...createConditionGroup('AND'),
+    conditions: [condition],
+  };
+  return {
+    id: generateId(),
+    rootGroup: group,
+    value: returnValue,
+  };
+}
+
+
+function generateId(): string {
+  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+}