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

package/src/components/HapticFeedbackComponent.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useRef } from 'react';
+import { View } from 'react-native';
+import { PaywallComponent } from '../types';
+import { triggerHaptic, HapticType } from '../utils/hapticFeedback';
+
+interface HapticFeedbackComponentProps {
+  component: PaywallComponent;
+  isPreviewMode?: boolean;
+}
+
+const HAPTIC_STYLES: ReadonlySet<string> = new Set([
+  'light', 'medium', 'heavy', 'success', 'warning', 'error',
+]);
+
+/**
+ * HapticFeedbackComponent — invisible behavior component.
+ *
+ * Fires a single device haptic on mount, reusing the shared `triggerHaptic`
+ * util (the same one the haptic tap-action uses). Skipped in the builder
+ * preview. The style comes from `properties.hapticStyle` (the six canonical
+ * HapticType values), falling back to `medium`. Renders nothing visible.
+ */
+export const HapticFeedbackComponent: React.FC<HapticFeedbackComponentProps> = ({
+  component,
+  isPreviewMode = false,
+}) => {
+  const hasFiredRef = useRef(false);
+
+  useEffect(() => {
+    if (isPreviewMode || hasFiredRef.current) return;
+    hasFiredRef.current = true;
+    const props = (component.properties as Record<string, unknown>) || {};
+    const raw = typeof props.hapticStyle === 'string' ? props.hapticStyle : 'medium';
+    const style = (HAPTIC_STYLES.has(raw) ? raw : 'medium') as HapticType;
+    triggerHaptic(style);
+  }, [component.id, isPreviewMode]);
+
+  return <View style={{ width: 0, height: 0 }} />;
+};

package/src/components/HorizontalProductsComponent.tsx

@@ -0,0 +1,329 @@
+/**
+ * Horizontal Products Component for React Native
+ * Pure Child Model: renders children via renderChild with horizontal FlatList layout,
+ * overlay extraction, child sanitization, and selection state propagation.
+ * Matches Android ProductsComponent.kt and iOS ProductsRenderer.swift architecture.
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  FlatList,
+  StyleSheet,
+  Text,
+  AccessibilityInfo,
+} from 'react-native';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+import { PaywallStateManager } from '../PaywallStateManager';
+
+export interface HorizontalProductsComponentProps {
+  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 };
+  
+  if (sanitized.appearance) {
+    const { fill, backgroundColor, cornerRadius, borderColor, borderWidth, shadow, ...rest } = sanitized.appearance as any;
+    sanitized.appearance = rest;
+  }
+
+  (sanitized as any).selectedAppearance = undefined;
+
+  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);
+
+  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);
+      }),
+    };
+  }
+
+  if (role === 'checkmark') {
+    return { ...component, visible: isSelected };
+  }
+
+  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 HorizontalProductsComponent: React.FC<HorizontalProductsComponentProps> = ({
+  component,
+  configuration,
+  renderChild,
+  stateManager,
+  onAction,
+}) => {
+  const properties = component.properties || {};
+  const allChildren = component.children || [];
+  const flatListRef = useRef<FlatList>(null);
+
+  // Package binding
+  const bindToPackages = properties.bindToPackages !== false;
+  const packageIdentifiers: string[] = properties.packageIdentifiers || [];
+
+  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 || [])
+    : [];
+
+  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 cardWidth = resolveNumber(properties.cardWidth, 160);
+  const cardHeight = resolveNumber(properties.cardHeight, 200);
+  const showBadge = !!properties.showBadge;
+  const badgeProductIndex = resolveNumber(properties.badgeProductIndex, 0);
+  const enableSnapScrolling = properties.enableSnapScrolling !== false;
+
+  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]);
+
+  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;
+
+    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);
+
+    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 borderColorVal = isSelected ? selectedBorderColor : cardBorderColor;
+    const borderWidthVal = 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);
+
+    const extraction = extractOverlays(child.children);
+    const childWithRemaining = { ...child, children: extraction.remainingChildren };
+    const sanitized = sanitizeProductChild(childWithRemaining);
+    const transformed = applySelectionState(sanitized, isSelected, isHybridMode);
+
+    return (
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={() => handleSelect(index)}
+        accessibilityRole="radio"
+        accessibilityState={{ selected: isSelected }}
+        accessibilityLabel={`Product ${index + 1}, ${isSelected ? 'selected' : 'not selected'}`}
+        style={{ marginRight: index < children.length - 1 ? gap : 0 }}
+      >
+        <View style={{ width: cardWidth, height: cardHeight, position: 'relative' }}>
+          {/* Layer 1: Background */}
+          <View
+            style={{
+              ...StyleSheet.absoluteFillObject,
+              backgroundColor: bgColor,
+              borderRadius: cardCornerRadius,
+              borderColor: borderColorVal,
+              borderWidth: borderWidthVal,
+            }}
+          />
+
+          {/* Layer 2: Content */}
+          <View
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+              paddingTop,
+              paddingRight,
+              paddingBottom,
+              paddingLeft,
+            }}
+          >
+            {renderChild(transformed)}
+          </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">
+      <FlatList
+        ref={flatListRef}
+        data={children}
+        renderItem={({ item, index }) => renderProductCard(item, index)}
+        keyExtractor={(item, index) => item.id || `product-${index}`}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        snapToInterval={enableSnapScrolling ? cardWidth + gap : undefined}
+        snapToAlignment="start"
+        decelerationRate={enableSnapScrolling ? 'fast' : 'normal'}
+        contentContainerStyle={{ paddingTop: 12 }}
+        getItemLayout={(_, index) => ({
+          length: cardWidth + gap,
+          offset: (cardWidth + gap) * index,
+          index,
+        })}
+      />
+    </View>
+  );
+};
+
+export default HorizontalProductsComponent;

package/src/components/MultiChoiceGridComponent.tsx

@@ -0,0 +1,265 @@
+/**
+ * Multi Choice Grid Component for React Native
+ * Checkbox style grid selection (multiple selection)
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  DimensionValue,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { PaywallComponent } from '../types';
+
+interface MultiChoiceGridProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+const SIZE_MAP = { sm: 16, md: 20, lg: 24 };
+
+// Check icon paths
+const CHECK_PATHS = {
+  check: 'M20 6L9 17L4 12',
+  cross: 'M18 6L6 18M6 6L18 18',
+  circle: 'M12 12m-8 0a8 8 0 1 0 16 0a8 8 0 1 0 -16 0',
+};
+
+export const MultiChoiceGridComponent: React.FC<MultiChoiceGridProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties || {};
+  
+  // Parse options
+  const optionsStr = (props as any).options || 'Option 1,Option 2,Option 3,Option 4';
+  const options = optionsStr.split(',').map((o: string) => o.trim()).filter(Boolean);
+  const descriptionsStr = (props as any).optionDescriptions || '';
+  const descriptions = descriptionsStr.split(',').map((d: string) => d.trim());
+  
+  // Grid settings
+  const columns = (props as any).columns || 2;
+  const gap = parseFloat((props as any).gap?.value || (props as any).gap) || 12;
+  const minItemHeight = parseFloat((props as any).minItemHeight?.value || (props as any).minItemHeight) || 80;
+  
+  // Selection settings
+  const defaultIndicesStr = (props as any).defaultSelectedIndices || '';
+  const defaultIndices = defaultIndicesStr
+    .split(',')
+    .map((s: string) => parseInt(s.trim(), 10))
+    .filter((n: number) => !isNaN(n));
+  const minSelections = (props as any).minSelections || 0;
+  const maxSelections = (props as any).maxSelections || 0;
+  const disabled = (props as any).disabled ?? false;
+  
+  // State
+  const [selectedIndices, setSelectedIndices] = useState<number[]>(defaultIndices);
+  
+  // State manager integration
+  useEffect(() => {
+    if (!stateManager) return;
+    
+    const stateId = `element:${component.id}.selectedIndices`;
+    stateManager.registerState?.(stateId, selectedIndices);
+    
+    return stateManager.subscribeToState?.(stateId, (value: number[]) => {
+      if (JSON.stringify(value) !== JSON.stringify(selectedIndices)) {
+        setSelectedIndices(value);
+      }
+    });
+  }, [component.id, selectedIndices, stateManager]);
+  
+  const handleSelect = (index: number) => {
+    if (disabled) return;
+    
+    let newIndices: number[];
+    
+    if (selectedIndices.includes(index)) {
+      if (minSelections > 0 && selectedIndices.length <= minSelections) {
+        return;
+      }
+      newIndices = selectedIndices.filter(i => i !== index);
+    } else {
+      if (maxSelections > 0 && selectedIndices.length >= maxSelections) {
+        return;
+      }
+      newIndices = [...selectedIndices, index].sort((a, b) => a - b);
+    }
+    
+    setSelectedIndices(newIndices);
+    
+    stateManager?.updateState?.(`element:${component.id}.selectedIndices`, newIndices);
+    stateManager?.updateState?.(`element:${component.id}.selectedValues`, newIndices.map(i => options[i]));
+  };
+  
+  // Styling
+  const showIndicator = (props as any).showIndicator ?? true;
+  const indicatorPosition = (props as any).indicatorPosition || 'top-right';
+  const checkIcon = (props as any).checkIcon || 'check';
+  const indicatorSize = SIZE_MAP[(props as any).indicatorSize as keyof typeof SIZE_MAP] || SIZE_MAP.md;
+  const indicatorColor = (props as any).indicatorColor || '#ffffff';
+  const indicatorBackground = (props as any).indicatorBackground || '#007AFF';
+  const indicatorBorderColor = (props as any).indicatorBorderColor || '#d1d5db';
+  
+  const cardBorderRadius = parseFloat((props as any).cardBorderRadius?.value || (props as any).cardBorderRadius) || 12;
+  const cardBorderColor = (props as any).cardBorderColor || '#e5e7eb';
+  const selectedBorderColor = (props as any).selectedBorderColor || '#007AFF';
+  
+  const labelFontSize = parseFloat((props as any).labelFontSize?.value || (props as any).labelFontSize) || 16;
+  const labelFontWeight = String((props as any).labelFontWeight || '500') as TextStyle['fontWeight'];
+  const labelColor = (props as any).labelColor || '#1f2937';
+  const selectedLabelColor = (props as any).selectedLabelColor || '#007AFF';
+  const descriptionFontSize = parseFloat((props as any).descriptionFontSize?.value || (props as any).descriptionFontSize) || 12;
+  const descriptionColor = (props as any).descriptionColor || '#6b7280';
+  
+  // Background color helper
+  const getBackgroundColor = (fill: any): string => {
+    if (!fill) return '#ffffff';
+    if (typeof fill === 'string') return fill;
+    if (fill.type === 'color') return fill.color || '#ffffff';
+    if (fill.resolvedColor) return fill.resolvedColor;
+    return '#ffffff';
+  };
+  
+  const cardBackground = getBackgroundColor((props as any).cardBackground);
+  const selectedCardBackground = getBackgroundColor((props as any).selectedCardBackground);
+  
+  // Indicator position style
+  const getIndicatorPositionStyle = (): ViewStyle => {
+    const base: ViewStyle = { position: 'absolute' };
+    switch (indicatorPosition) {
+      case 'top-left': return { ...base, top: 8, left: 8 };
+      case 'top-right': return { ...base, top: 8, right: 8 };
+      case 'bottom-left': return { ...base, bottom: 8, left: 8 };
+      case 'bottom-right': return { ...base, bottom: 8, right: 8 };
+      default: return { ...base, top: 8, right: 8 };
+    }
+  };
+  
+  // Calculate item width based on columns
+  const itemWidth: DimensionValue = `${(100 - (columns - 1) * 2) / columns}%`;
+
+  return (
+    <View style={[styles.container, { opacity: disabled ? 0.6 : 1 }]}>
+      <View style={[styles.grid, { gap }]}>
+        {options.map((option: string, index: number) => {
+          const isSelected = selectedIndices.includes(index);
+          const description = descriptions[index] || '';
+          
+          return (
+            <TouchableOpacity
+              key={index}
+              onPress={() => handleSelect(index)}
+              disabled={disabled}
+              activeOpacity={0.7}
+              style={[
+                styles.card,
+                {
+                  width: itemWidth,
+                  minHeight: minItemHeight,
+                  backgroundColor: isSelected ? selectedCardBackground : cardBackground,
+                  borderColor: isSelected ? selectedBorderColor : cardBorderColor,
+                  borderRadius: cardBorderRadius,
+                },
+              ]}
+            >
+              {/* Checkbox Indicator */}
+              {showIndicator && (
+                <View
+                  style={[
+                    getIndicatorPositionStyle(),
+                    {
+                      width: indicatorSize,
+                      height: indicatorSize,
+                      borderRadius: 4,
+                      borderWidth: 2,
+                      borderColor: isSelected ? indicatorBackground : indicatorBorderColor,
+                      backgroundColor: isSelected ? indicatorBackground : 'transparent',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    },
+                  ]}
+                >
+                  {isSelected && (
+                    <Svg
+                      width={indicatorSize * 0.7}
+                      height={indicatorSize * 0.7}
+                      viewBox="0 0 24 24"
+                      fill="none"
+                    >
+                      <Path
+                        d={CHECK_PATHS[checkIcon as keyof typeof CHECK_PATHS] || CHECK_PATHS.check}
+                        stroke={indicatorColor}
+                        strokeWidth={3}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </Svg>
+                  )}
+                </View>
+              )}
+              
+              {/* Label */}
+              <Text
+                style={[
+                  styles.label,
+                  {
+                    fontSize: labelFontSize,
+                    fontWeight: labelFontWeight,
+                    color: isSelected ? selectedLabelColor : labelColor,
+                  },
+                ]}
+              >
+                {option}
+              </Text>
+              
+              {/* Description */}
+              {description ? (
+                <Text
+                  style={[
+                    styles.description,
+                    {
+                      fontSize: descriptionFontSize,
+                      color: descriptionColor,
+                    },
+                  ]}
+                >
+                  {description}
+                </Text>
+              ) : null}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  card: {
+    position: 'relative',
+    borderWidth: 2,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  label: {
+    marginTop: 4,
+  },
+  description: {
+    marginTop: 4,
+  },
+});