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

package/dist/components/ConfettiComponent.js

@@ -0,0 +1,172 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfettiComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Color presets for confetti
+const COLOR_PRESETS = {
+    celebration: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8'],
+    rainbow: ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3'],
+    metallic: ['#FFD700', '#C0C0C0', '#DAA520', '#B8860B', '#E8E8E8'],
+    pastel: ['#FFB3BA', '#BAFFC9', '#BAE1FF', '#FFFFBA', '#FFDFBA'],
+    brand: ['#6366F1', '#8B5CF6', '#A855F7', '#D946EF'],
+};
+const ConfettiComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const props = component.properties;
+    const pieceCount = (_a = props.pieceCount) !== null && _a !== void 0 ? _a : 150;
+    const trigger = (_b = props.trigger) !== null && _b !== void 0 ? _b : 'onLoad';
+    const duration = (_c = props.duration) !== null && _c !== void 0 ? _c : 3000;
+    const recycle = (_d = props.recycle) !== null && _d !== void 0 ? _d : false;
+    const shape = (_e = props.shape) !== null && _e !== void 0 ? _e : 'mix';
+    const gravity = (_f = props.gravity) !== null && _f !== void 0 ? _f : 1;
+    const colorPreset = (_g = props.colorPreset) !== null && _g !== void 0 ? _g : 'celebration';
+    const customColors = props.customColors;
+    const [pieces, setPieces] = (0, react_1.useState)([]);
+    const recycleTimerRef = (0, react_1.useRef)(null);
+    const { width, height } = react_native_1.Dimensions.get('window');
+    // Get colors based on preset or custom
+    const getColors = (0, react_1.useCallback)(() => {
+        if (colorPreset === 'custom' && customColors) {
+            return customColors.split(',').map((c) => c.trim()).filter((c) => c.startsWith('#'));
+        }
+        return COLOR_PRESETS[colorPreset] || COLOR_PRESETS.celebration;
+    }, [colorPreset, customColors]);
+    const createPieces = (0, react_1.useCallback)(() => {
+        const colors = getColors();
+        return Array.from({ length: pieceCount }, (_, i) => ({
+            id: i,
+            x: new react_native_1.Animated.Value(Math.random() * width),
+            y: new react_native_1.Animated.Value(-50 - Math.random() * 100),
+            rotation: new react_native_1.Animated.Value(0),
+            color: colors[Math.floor(Math.random() * colors.length)],
+            size: 8 + Math.random() * 8,
+            shape: shape === 'mix'
+                ? (Math.random() > 0.5 ? 'square' : 'circle')
+                : shape,
+        }));
+    }, [pieceCount, width, shape, getColors]);
+    const fireConfetti = (0, react_1.useCallback)(() => {
+        const newPieces = createPieces();
+        setPieces(newPieces);
+        newPieces.forEach((piece) => {
+            const fallDuration = (duration / gravity) * (0.8 + Math.random() * 0.4);
+            const drift = (Math.random() - 0.5) * 200;
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(piece.y, {
+                    toValue: height + 50,
+                    duration: fallDuration,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(piece.x, {
+                    toValue: piece.x._value + drift,
+                    duration: fallDuration,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(piece.rotation, {
+                    toValue: 360 * (2 + Math.random() * 3),
+                    duration: fallDuration,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        });
+        if (recycle) {
+            recycleTimerRef.current = setTimeout(fireConfetti, duration);
+        }
+    }, [createPieces, duration, gravity, height, recycle]);
+    // Subscribe to manual trigger state changes
+    (0, react_1.useEffect)(() => {
+        if (!stateManager || trigger !== 'manual')
+            return;
+        const stateKey = `element:${component.id}.fire`;
+        const unsubscribe = stateManager.subscribe(stateKey, (value) => {
+            if (value === true) {
+                fireConfetti();
+                // Reset the state after firing
+                setTimeout(() => {
+                    stateManager.setState(stateKey, false);
+                }, 50);
+            }
+        });
+        return () => {
+            unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+        };
+    }, [stateManager, trigger, component.id, fireConfetti]);
+    (0, react_1.useEffect)(() => {
+        if (trigger === 'onLoad') {
+            const timer = setTimeout(fireConfetti, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [trigger, fireConfetti]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (recycleTimerRef.current) {
+                clearTimeout(recycleTimerRef.current);
+            }
+        };
+    }, []);
+    return (<react_native_1.View style={styles.container} pointerEvents="none">
+      {pieces.map((piece) => (<react_native_1.Animated.View key={piece.id} style={[
+                styles.piece,
+                {
+                    width: piece.size,
+                    height: piece.size,
+                    backgroundColor: piece.color,
+                    borderRadius: piece.shape === 'circle' ? piece.size / 2 : 0,
+                    transform: [
+                        { translateX: piece.x },
+                        { translateY: piece.y },
+                        {
+                            rotate: piece.rotation.interpolate({
+                                inputRange: [0, 360],
+                                outputRange: ['0deg', '360deg'],
+                            }),
+                        },
+                    ],
+                },
+            ]}/>))}
+    </react_native_1.View>);
+};
+exports.ConfettiComponent = ConfettiComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        overflow: 'hidden',
+    },
+    piece: {
+        position: 'absolute',
+    },
+});

package/dist/components/CountdownComponent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Countdown Component - Native React Native implementation
+ * Supports variant (boxed/text/digital/flip), styling, and state manager integration
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+interface CountdownComponentProps {
+    component: PaywallComponent;
+    configuration: PaywallConfiguration;
+    style?: ViewStyle;
+    onComplete?: () => void;
+    onStateChange?: (key: string, value: any) => void;
+}
+export declare const CountdownComponent: React.FC<CountdownComponentProps>;
+export default CountdownComponent;

package/dist/components/CountdownComponent.js

@@ -0,0 +1,414 @@
+"use strict";
+/**
+ * Countdown Component - Native React Native implementation
+ * Supports variant (boxed/text/digital/flip), styling, and state manager integration
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountdownComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const CountdownComponent = ({ component, configuration, style, onComplete, onStateChange, }) => {
+    const properties = component.properties || {};
+    // MARK: - Parse Properties
+    const endTimeStr = properties.endTime || '';
+    const durationSeconds = properties.duration || 0;
+    const format = properties.format || 'digital';
+    // Determine variant from explicit value or map from format
+    const variant = (0, react_1.useMemo)(() => {
+        if (properties.variant)
+            return properties.variant;
+        switch (format) {
+            case 'digital':
+            case 'digital_full':
+            case 'compact':
+                return 'boxed';
+            case 'short':
+            case 'long':
+                return 'text';
+            default:
+                return 'boxed';
+        }
+    }, [properties.variant, format]);
+    const showDays = properties.showDays !== false;
+    const showHours = properties.showHours !== false;
+    const showMinutes = properties.showMinutes !== false;
+    const showSeconds = properties.showSeconds !== false;
+    const showLabels = properties.showLabels === true;
+    const separator = properties.separator || ':';
+    const labelStyle = properties.labelStyle || 'short';
+    // MARK: - Styling Properties
+    const fontSize = properties.fontSize || 32;
+    const textColor = properties.textColor || undefined; // Fixed: use textColor not color
+    const backgroundColor = properties.backgroundColor || '#F3F4F6';
+    const separatorColor = properties.separatorColor || textColor;
+    const hasExplicitSeparatorColor = !!properties.separatorColor;
+    const unitColor = properties.unitColor || '#9CA3AF';
+    const fontWeight = properties.fontWeight || 'bold';
+    const fontFamily = properties.fontFamily || 'monospace';
+    const padding = properties.padding || 12;
+    const gap = properties.gap || 8;
+    const borderRadius = properties.borderRadius || 8;
+    const expiredText = properties.expiredText || '00:00:00';
+    // MARK: - Calculate Target Time
+    const targetTime = (0, react_1.useMemo)(() => {
+        const trimmedEndTime = endTimeStr.trim();
+        if (trimmedEndTime) {
+            // Handle relative time (+7d, +1h, +30m, +60s)
+            if (trimmedEndTime.startsWith('+')) {
+                const valueStr = trimmedEndTime.slice(1, -1);
+                const unit = trimmedEndTime.slice(-1);
+                const value = parseInt(valueStr, 10) || 0;
+                let multiplier = 1000; // default seconds
+                switch (unit) {
+                    case 'd':
+                        multiplier = 86400000;
+                        break;
+                    case 'h':
+                        multiplier = 3600000;
+                        break;
+                    case 'm':
+                        multiplier = 60000;
+                        break;
+                    case 's':
+                        multiplier = 1000;
+                        break;
+                }
+                return Date.now() + (value * multiplier);
+            }
+            // Handle ISO date string
+            const parsed = Date.parse(trimmedEndTime);
+            if (!isNaN(parsed)) {
+                return parsed;
+            }
+        }
+        // Use duration if specified
+        if (durationSeconds > 0) {
+            return Date.now() + (durationSeconds * 1000);
+        }
+        // Default 1 hour
+        return Date.now() + 3600000;
+    }, [endTimeStr, durationSeconds]);
+    // State for remaining time
+    const [timeRemaining, setTimeRemaining] = (0, react_1.useState)(() => calculateTimeRemaining(targetTime));
+    // Calculate time remaining
+    function calculateTimeRemaining(target) {
+        const now = Date.now();
+        const diff = Math.max(0, target - now);
+        const totalSeconds = Math.floor(diff / 1000);
+        return {
+            days: Math.floor(totalSeconds / 86400),
+            hours: Math.floor((totalSeconds % 86400) / 3600),
+            minutes: Math.floor((totalSeconds % 3600) / 60),
+            seconds: totalSeconds % 60,
+            totalSeconds,
+            isExpired: diff <= 0,
+        };
+    }
+    // Timer effect
+    (0, react_1.useEffect)(() => {
+        const interval = setInterval(() => {
+            const remaining = calculateTimeRemaining(targetTime);
+            setTimeRemaining(remaining);
+            // Publish state changes
+            onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(`element:${component.id}.remainingSeconds`, remaining.totalSeconds);
+            onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(`element:${component.id}.isExpired`, remaining.isExpired);
+            if (remaining.isExpired) {
+                clearInterval(interval);
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+            }
+        }, 1000);
+        // Publish initial state
+        onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(`element:${component.id}.remainingSeconds`, timeRemaining.totalSeconds);
+        onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(`element:${component.id}.isExpired`, timeRemaining.isExpired);
+        return () => clearInterval(interval);
+    }, [targetTime, onComplete, onStateChange, component.id]);
+    // MARK: - Label Formatting
+    const getLabelForUnit = (0, react_1.useCallback)((unit) => {
+        switch (labelStyle) {
+            case 'full':
+                switch (unit) {
+                    case 'days': return 'Days';
+                    case 'hours': return 'Hours';
+                    case 'minutes': return 'Minutes';
+                    case 'seconds': return 'Seconds';
+                    default: return unit;
+                }
+            case 'none':
+                return '';
+            default: // 'short'
+                switch (unit) {
+                    case 'days': return 'D';
+                    case 'hours': return 'H';
+                    case 'minutes': return 'M';
+                    case 'seconds': return 'S';
+                    default: return unit.charAt(0).toUpperCase();
+                }
+        }
+    }, [labelStyle]);
+    // Format the display string for digital variant
+    const formattedTime = (0, react_1.useMemo)(() => {
+        const { days, hours, minutes, seconds, totalSeconds, isExpired } = timeRemaining;
+        if (isExpired)
+            return expiredText;
+        const pad = (n) => n.toString().padStart(2, '0');
+        switch (format) {
+            case 'digital_full':
+                return `${pad(days)}${separator}${pad(hours)}${separator}${pad(minutes)}${separator}${pad(seconds)}`;
+            case 'digital':
+                if (days > 0) {
+                    return `${pad(days)}${separator}${pad(hours)}${separator}${pad(minutes)}${separator}${pad(seconds)}`;
+                }
+                return `${pad(hours)}${separator}${pad(minutes)}${separator}${pad(seconds)}`;
+            case 'short': {
+                const parts = [];
+                if (showDays && days > 0)
+                    parts.push(`${days}d`);
+                if (showHours)
+                    parts.push(`${hours}h`);
+                if (showMinutes)
+                    parts.push(`${minutes}m`);
+                if (showSeconds)
+                    parts.push(`${seconds}s`);
+                return parts.join(' ');
+            }
+            case 'long': {
+                const parts = [];
+                if (showDays && days > 0)
+                    parts.push(`${days} days`);
+                if (showHours)
+                    parts.push(`${hours} hours`);
+                if (showMinutes)
+                    parts.push(`${minutes} minutes`);
+                if (showSeconds)
+                    parts.push(`${seconds} seconds`);
+                return parts.join(', ');
+            }
+            case 'compact':
+                return `${days}:${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+            case 'days_only':
+                return `${days}`;
+            case 'hours_only':
+                return `${days * 24 + hours}`;
+            case 'minutes_only':
+                return `${(days * 24 + hours) * 60 + minutes}`;
+            case 'seconds_only':
+                return `${totalSeconds}`;
+            default:
+                return `${pad(hours)}${separator}${pad(minutes)}${separator}${pad(seconds)}`;
+        }
+    }, [timeRemaining, format, separator, showDays, showHours, showMinutes, showSeconds, expiredText]);
+    // MARK: - Font Weight Helper
+    const getFontWeight = (0, react_1.useCallback)(() => {
+        switch (fontWeight) {
+            case '100':
+            case 'thin': return '100';
+            case '200':
+            case 'extraLight': return '200';
+            case '300':
+            case 'light': return '300';
+            case '400':
+            case 'normal':
+            case 'regular': return '400';
+            case '500':
+            case 'medium': return '500';
+            case '600':
+            case 'semibold': return '600';
+            case '700':
+            case 'bold': return '700';
+            case '800':
+            case 'extraBold': return '800';
+            case '900':
+            case 'black': return '900';
+            default: return 'bold';
+        }
+    }, [fontWeight]);
+    // MARK: - Render Helpers
+    const renderTimeUnitBox = (value, label) => (<react_native_1.View style={styles.unitContainer}>
+      <react_native_1.View style={[
+            styles.unitBox,
+            {
+                backgroundColor,
+                borderRadius,
+                paddingHorizontal: padding,
+                paddingVertical: padding * 0.67,
+            }
+        ]}>
+        <react_native_1.Text style={[
+            styles.unitValue,
+            {
+                fontSize,
+                fontWeight: getFontWeight(),
+                fontFamily,
+                ...(textColor && { color: textColor }),
+            }
+        ]}>
+          {value.toString().padStart(2, '0')}
+        </react_native_1.Text>
+      </react_native_1.View>
+      {showLabels && label && (<react_native_1.Text style={[styles.unitLabel, { color: unitColor, fontSize: fontSize * 0.3 }]}>
+          {label}
+        </react_native_1.Text>)}
+    </react_native_1.View>);
+    const renderSeparator = () => (<react_native_1.Text style={[
+            styles.separator,
+            {
+                fontSize,
+                fontWeight: getFontWeight(),
+                fontFamily,
+                color: separatorColor || textColor,
+                ...(!hasExplicitSeparatorColor && { opacity: 0.6 }),
+            }
+        ]}>
+      {separator}
+    </react_native_1.Text>);
+    const renderTimeUnitText = (value, label) => (<react_native_1.View style={styles.textUnit}>
+      <react_native_1.Text style={[
+            styles.textValue,
+            {
+                fontSize,
+                fontWeight: getFontWeight(),
+                fontFamily,
+                ...(textColor && { color: textColor }),
+            }
+        ]}>
+        {value}
+      </react_native_1.Text>
+      <react_native_1.Text style={[styles.textLabel, { color: unitColor, fontSize: fontSize * 0.5 }]}>
+        {' '}{label}
+      </react_native_1.Text>
+    </react_native_1.View>);
+    // MARK: - Variant Renderers
+    const renderBoxedVariant = () => {
+        const { days, hours, minutes, seconds } = timeRemaining;
+        return (<react_native_1.View style={[styles.boxedContainer, { gap }, style]}>
+        {showDays && days > 0 && (<>
+            {renderTimeUnitBox(days, getLabelForUnit('days'))}
+            {renderSeparator()}
+          </>)}
+        {showHours && (<>
+            {renderTimeUnitBox(hours, getLabelForUnit('hours'))}
+            {renderSeparator()}
+          </>)}
+        {showMinutes && (<>
+            {renderTimeUnitBox(minutes, getLabelForUnit('minutes'))}
+            {showSeconds && renderSeparator()}
+          </>)}
+        {showSeconds && renderTimeUnitBox(seconds, getLabelForUnit('seconds'))}
+      </react_native_1.View>);
+    };
+    const renderTextVariant = () => {
+        const { days, hours, minutes, seconds } = timeRemaining;
+        return (<react_native_1.View style={[styles.textContainer, { gap: gap * 2 }, style]}>
+        {showDays && days > 0 && renderTimeUnitText(days, getLabelForUnit('days'))}
+        {showHours && renderTimeUnitText(hours, getLabelForUnit('hours'))}
+        {showMinutes && renderTimeUnitText(minutes, getLabelForUnit('minutes'))}
+        {showSeconds && renderTimeUnitText(seconds, getLabelForUnit('seconds'))}
+      </react_native_1.View>);
+    };
+    const renderDigitalVariant = () => (<react_native_1.View style={[styles.container, style]}>
+      <react_native_1.Text style={[
+            styles.digitalText,
+            {
+                fontSize,
+                fontWeight: getFontWeight(),
+                fontFamily,
+                ...(textColor && { color: textColor }),
+            }
+        ]}>
+        {formattedTime}
+      </react_native_1.Text>
+    </react_native_1.View>);
+    // MARK: - Main Render
+    switch (variant) {
+        case 'boxed':
+            return renderBoxedVariant();
+        case 'text':
+            return renderTextVariant();
+        case 'flip':
+            // Flip uses boxed layout (full flip animation would need more work)
+            return renderBoxedVariant();
+        default:
+            return renderDigitalVariant();
+    }
+};
+exports.CountdownComponent = CountdownComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    boxedContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    textContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    unitContainer: {
+        alignItems: 'center',
+    },
+    unitBox: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    unitValue: {
+        textAlign: 'center',
+    },
+    unitLabel: {
+        marginTop: 4,
+        textAlign: 'center',
+    },
+    separator: {
+        marginHorizontal: 2,
+    },
+    textUnit: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+    },
+    textValue: {
+        textAlign: 'center',
+    },
+    textLabel: {
+        marginBottom: 2,
+    },
+    digitalText: {
+        textAlign: 'center',
+    },
+});
+exports.default = exports.CountdownComponent;

package/dist/components/DelayedXComponent.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+interface DelayedXComponentProps {
+    component: PaywallComponent;
+    configuration?: PaywallConfiguration;
+    renderChild?: (child: PaywallComponent) => JSX.Element;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    onButtonPress?: (componentId: string, action: string) => void;
+}
+export declare const DelayedXComponent: React.FC<DelayedXComponentProps>;
+export {};