noboarding 1.0.2-beta → 1.0.6-beta

package/lib/OnboardingFlow.js

@@ -32,18 +32,39 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OnboardingFlow = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
 const api_1 = require("./api");
 const analytics_1 = require("./analytics");
 const variableUtils_1 = require("./variableUtils");
 const ElementRenderer_1 = require("./components/ElementRenderer");
-// Generate unique IDs
-const generateUserId = () => {
-    return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+const USER_ID_STORAGE_KEY = '@noboarding_user_id';
+// Get or create persistent user ID
+const getPersistentUserId = async () => {
+    try {
+        // Try to get existing user ID from storage
+        const existingUserId = await async_storage_1.default.getItem(USER_ID_STORAGE_KEY);
+        if (existingUserId) {
+            return existingUserId;
+        }
+        // Generate new user ID if none exists
+        const newUserId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        await async_storage_1.default.setItem(USER_ID_STORAGE_KEY, newUserId);
+        return newUserId;
+    }
+    catch (error) {
+        console.error('Failed to get/set user ID from storage:', error);
+        // Fallback to generating a non-persistent ID
+        return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
 };
+// Generate session ID (always new per session)
 const generateSessionId = () => {
     return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 };
@@ -75,19 +96,28 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
     const [screens, setScreens] = (0, react_1.useState)([]);
+    const [assets, setAssets] = (0, react_1.useState)([]);
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
     const [collectedData, setCollectedData] = (0, react_1.useState)({});
     const [variables, setVariables] = (0, react_1.useState)(initialVariables || {});
     const apiRef = (0, react_1.useRef)(null);
     const analyticsRef = (0, react_1.useRef)(null);
-    const userIdRef = (0, react_1.useRef)(generateUserId());
+    const userIdRef = (0, react_1.useRef)(null);
     const sessionIdRef = (0, react_1.useRef)(generateSessionId());
+    const flowIdRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        // Notify parent of the generated user ID
-        if (onUserIdGenerated) {
-            onUserIdGenerated(userIdRef.current);
-        }
-        initializeFlow();
+        const initialize = async () => {
+            // Get or create persistent user ID
+            const userId = await getPersistentUserId();
+            userIdRef.current = userId;
+            // Notify parent of the user ID
+            if (onUserIdGenerated) {
+                onUserIdGenerated(userId);
+            }
+            // Initialize the flow
+            await initializeFlow();
+        };
+        initialize();
         return () => {
             // Cleanup: flush remaining analytics
             if (analyticsRef.current) {
@@ -95,26 +125,81 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             }
         };
     }, []);
+    // Track screen views whenever user navigates to a different screen
+    (0, react_1.useEffect)(() => {
+        if (screens.length > 0 && analyticsRef.current && currentIndex > 0) {
+            const currentScreen = screens[currentIndex];
+            analyticsRef.current.track('screen_viewed', {
+                flow_id: flowIdRef.current,
+                screen_id: currentScreen.id,
+                screen_index: currentIndex,
+            });
+        }
+    }, [currentIndex, screens]);
     const initializeFlow = async () => {
+        var _a, _b, _c, _d, _e, _f, _g;
         try {
             setLoading(true);
             setError(null);
+            // Ensure user ID is set
+            if (!userIdRef.current) {
+                throw new Error('User ID not initialized');
+            }
             // Initialize API client with detected API key
             const api = new api_1.API(activeApiKey, baseUrl);
             apiRef.current = api;
             // Initialize analytics
             const analytics = new analytics_1.AnalyticsManager(api, userIdRef.current, sessionIdRef.current);
             analyticsRef.current = analytics;
-            // Track onboarding start
-            analytics.track('onboarding_started');
             // Fetch configuration
             const configResponse = await api.getConfig();
+            // Store flow_id for analytics
+            flowIdRef.current = configResponse.config_id;
+            // Store assets from config
+            if (configResponse.config.assets) {
+                setAssets(configResponse.config.assets);
+            }
+            // Handle A/B test experiment assignment
+            let screensToUse = configResponse.config.screens;
+            if (configResponse.experiments && configResponse.experiments.length > 0) {
+                // Assign user to the first active experiment
+                const experiment = configResponse.experiments[0];
+                try {
+                    const assignment = await api.assignVariant(experiment.id, userIdRef.current);
+                    console.log('🧪 A/B Test Assignment:', {
+                        experiment_id: experiment.id,
+                        experiment_name: experiment.name,
+                        variant_id: assignment.variant_id,
+                        has_variant_screens: ((_b = (_a = assignment.variant_config) === null || _a === void 0 ? void 0 : _a.screens) === null || _b === void 0 ? void 0 : _b.length) > 0,
+                        variant_screen_count: ((_d = (_c = assignment.variant_config) === null || _c === void 0 ? void 0 : _c.screens) === null || _d === void 0 ? void 0 : _d.length) || 0,
+                        cached: assignment.cached,
+                    });
+                    // Set experiment context so all events get tagged
+                    analytics.setExperimentContext(experiment.id, assignment.variant_id);
+                    // Use variant screens if available
+                    if (((_f = (_e = assignment.variant_config) === null || _e === void 0 ? void 0 : _e.screens) === null || _f === void 0 ? void 0 : _f.length) > 0) {
+                        screensToUse = assignment.variant_config.screens;
+                        console.log('📱 Using variant screens:', assignment.variant_config.screens.length, 'screens');
+                    }
+                    else {
+                        console.log('📱 Using base flow screens (variant has no screens defined)');
+                    }
+                }
+                catch (err) {
+                    console.warn('Failed to assign experiment variant, using default flow:', err);
+                }
+            }
             // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
-            const normalizedScreens = configResponse.config.screens
+            const normalizedScreens = screensToUse
                 .map(s => (Object.assign(Object.assign({}, s), { type: (s.type === 'custom_screen' && s.elements) ? 'noboard_screen' : s.type })))
                 // Filter out hidden screens (dashboard show/hide feature)
                 .filter(s => !s.hidden);
             setScreens(normalizedScreens);
+            // Track onboarding start with first screen
+            analytics.track('onboarding_started', {
+                flow_id: flowIdRef.current,
+                screen_id: (_g = normalizedScreens[0]) === null || _g === void 0 ? void 0 : _g.id,
+            });
             setLoading(false);
         }
         catch (err) {
@@ -155,18 +240,25 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
         setVariables(prev => (Object.assign(Object.assign({}, prev), { [name]: value })));
     }, []);
     const handleComplete = async (lastScreenData) => {
+        var _a;
         const finalData = Object.assign(Object.assign(Object.assign({}, collectedData), (lastScreenData || {})), { _variables: variables });
         // Track completion
         if (analyticsRef.current) {
-            analyticsRef.current.track('onboarding_completed');
+            analyticsRef.current.track('onboarding_completed', {
+                flow_id: flowIdRef.current,
+                screen_id: (_a = screens[currentIndex]) === null || _a === void 0 ? void 0 : _a.id,
+            });
             await analyticsRef.current.flush();
         }
         // Call developer's completion callback with collected data
         onComplete(finalData);
     };
     const handleSkipAll = async () => {
+        var _a;
         if (analyticsRef.current) {
             analyticsRef.current.track('onboarding_abandoned', {
+                flow_id: flowIdRef.current,
+                screen_id: (_a = screens[currentIndex]) === null || _a === void 0 ? void 0 : _a.id,
                 current_screen_index: currentIndex,
             });
             await analyticsRef.current.flush();
@@ -227,7 +319,7 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             }
         };
         return (<react_native_1.View style={styles.container}>
-        <ElementRenderer_1.ElementRenderer elements={currentScreen.elements} analytics={analyticsRef.current} screenId={currentScreen.id} onNavigate={handleElementNavigate} onDismiss={onSkip ? handleSkipAll : handleNext} variables={allVariables} onSetVariable={handleSetVariable}/>
+        <ElementRenderer_1.ElementRenderer elements={currentScreen.elements} analytics={analyticsRef.current} screenId={currentScreen.id} onNavigate={handleElementNavigate} onDismiss={onSkip ? handleSkipAll : handleNext} variables={allVariables} onSetVariable={handleSetVariable} assets={assets}/>
       </react_native_1.View>);
     }
     // Handle custom_screen type — developer-registered React Native components

package/lib/analytics.d.ts

@@ -5,7 +5,13 @@ export declare class AnalyticsManager {
     private userId;
     private sessionId;
     private flushTimer;
+    private experimentId;
+    private variantId;
     constructor(api: API, userId: string, sessionId: string);
+    /**
+     * Set experiment context — all subsequent events will be tagged
+     */
+    setExperimentContext(experimentId: string, variantId: string): void;
     /**
      * Track an analytics event
      */

package/lib/analytics.js

@@ -7,22 +7,39 @@ class AnalyticsManager {
     constructor(api, userId, sessionId) {
         this.events = [];
         this.flushTimer = null;
+        this.experimentId = null;
+        this.variantId = null;
         this.api = api;
         this.userId = userId;
         this.sessionId = sessionId;
         // Start auto-flush timer
         this.startFlushTimer();
     }
+    /**
+     * Set experiment context — all subsequent events will be tagged
+     */
+    setExperimentContext(experimentId, variantId) {
+        this.experimentId = experimentId;
+        this.variantId = variantId;
+    }
     /**
      * Track an analytics event
      */
     track(eventName, properties) {
+        const mergedProperties = Object.assign({}, (properties || {}));
+        // Auto-inject experiment context if set
+        if (this.experimentId) {
+            mergedProperties.experiment_id = this.experimentId;
+        }
+        if (this.variantId) {
+            mergedProperties.variant_id = this.variantId;
+        }
         const event = {
             event: eventName,
             user_id: this.userId,
             session_id: this.sessionId,
             timestamp: Date.now(),
-            properties: properties || {},
+            properties: mergedProperties,
         };
         this.events.push(event);
         // Auto-flush if batch size reached

package/lib/animationUtils.d.ts

@@ -0,0 +1,19 @@
+import { Animated } from 'react-native';
+import type { EntranceAnimation, InteractiveAnimation, HapticType } from './types';
+export declare const triggerHaptic: (type?: HapticType) => void;
+export declare const getEasing: (easingType?: string) => import("react-native").EasingFunction;
+export interface EntranceAnimationValues {
+    opacity: Animated.Value;
+    translateY: Animated.Value;
+    translateX: Animated.Value;
+    scale: Animated.Value;
+}
+export declare const createEntranceAnimationValues: () => EntranceAnimationValues;
+export declare const startEntranceAnimation: (config: EntranceAnimation, values: EntranceAnimationValues, delay?: number) => void;
+export declare const startInteractiveAnimation: (config: InteractiveAnimation, animatedValue: Animated.Value) => void;
+export interface TypewriterState {
+    displayedText: string;
+    currentIndex: number;
+    isComplete: boolean;
+}
+export declare const shouldTriggerHaptic: (index: number, frequency: string) => boolean;

package/lib/animationUtils.js

@@ -0,0 +1,252 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldTriggerHaptic = exports.startInteractiveAnimation = exports.startEntranceAnimation = exports.createEntranceAnimationValues = exports.getEasing = exports.triggerHaptic = void 0;
+const react_native_1 = require("react-native");
+// Lazy load haptics to avoid errors if not installed
+let Haptics = null;
+try {
+    Haptics = require('expo-haptics');
+}
+catch (e) {
+    console.warn('expo-haptics not installed, haptic feedback will be disabled');
+}
+// ─── Haptic Feedback Helper ───
+const triggerHaptic = (type = 'light') => {
+    if (!Haptics) {
+        // Silently skip if expo-haptics not available
+        return;
+    }
+    try {
+        switch (type) {
+            case 'light':
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                break;
+            case 'medium':
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+                break;
+            case 'heavy':
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+                break;
+            case 'success':
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+                break;
+            case 'warning':
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+                break;
+            case 'error':
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+                break;
+        }
+    }
+    catch (error) {
+        console.warn('Haptic feedback failed:', error);
+    }
+};
+exports.triggerHaptic = triggerHaptic;
+// ─── Easing Function Mapper ───
+const getEasing = (easingType) => {
+    switch (easingType) {
+        case 'linear':
+            return react_native_1.Easing.linear;
+        case 'ease-in':
+            return react_native_1.Easing.in(react_native_1.Easing.ease);
+        case 'ease-out':
+            return react_native_1.Easing.out(react_native_1.Easing.ease);
+        case 'ease-in-out':
+            return react_native_1.Easing.inOut(react_native_1.Easing.ease);
+        case 'spring':
+            return react_native_1.Easing.elastic(1);
+        default:
+            return react_native_1.Easing.inOut(react_native_1.Easing.ease);
+    }
+};
+exports.getEasing = getEasing;
+const createEntranceAnimationValues = () => ({
+    opacity: new react_native_1.Animated.Value(0),
+    translateY: new react_native_1.Animated.Value(0),
+    translateX: new react_native_1.Animated.Value(0),
+    scale: new react_native_1.Animated.Value(1),
+});
+exports.createEntranceAnimationValues = createEntranceAnimationValues;
+const startEntranceAnimation = (config, values, delay = 0) => {
+    const duration = config.duration || 400;
+    const totalDelay = (config.delay || 0) + delay;
+    const easing = (0, exports.getEasing)(config.easing);
+    // Set initial values based on animation type
+    switch (config.type) {
+        case 'fadeIn':
+            values.opacity.setValue(0);
+            break;
+        case 'slideUp':
+            values.opacity.setValue(0);
+            values.translateY.setValue(30);
+            break;
+        case 'slideDown':
+            values.opacity.setValue(0);
+            values.translateY.setValue(-30);
+            break;
+        case 'slideLeft':
+            values.opacity.setValue(0);
+            values.translateX.setValue(30);
+            break;
+        case 'slideRight':
+            values.opacity.setValue(0);
+            values.translateX.setValue(-30);
+            break;
+        case 'scaleIn':
+            values.opacity.setValue(0);
+            values.scale.setValue(0.8);
+            break;
+        case 'none':
+            values.opacity.setValue(1);
+            return;
+    }
+    // Animate to final values
+    react_native_1.Animated.parallel([
+        react_native_1.Animated.timing(values.opacity, {
+            toValue: 1,
+            duration,
+            delay: totalDelay,
+            easing,
+            useNativeDriver: true,
+        }),
+        react_native_1.Animated.timing(values.translateY, {
+            toValue: 0,
+            duration,
+            delay: totalDelay,
+            easing,
+            useNativeDriver: true,
+        }),
+        react_native_1.Animated.timing(values.translateX, {
+            toValue: 0,
+            duration,
+            delay: totalDelay,
+            easing,
+            useNativeDriver: true,
+        }),
+        react_native_1.Animated.timing(values.scale, {
+            toValue: 1,
+            duration,
+            delay: totalDelay,
+            easing,
+            useNativeDriver: true,
+        }),
+    ]).start();
+};
+exports.startEntranceAnimation = startEntranceAnimation;
+// ─── Interactive Animations ───
+const startInteractiveAnimation = (config, animatedValue) => {
+    const duration = config.duration || 200;
+    const intensity = config.intensity || (config.type === 'scale' ? 0.95 : 10);
+    // Trigger haptic if enabled
+    if (config.haptic && config.hapticType) {
+        (0, exports.triggerHaptic)(config.hapticType);
+    }
+    switch (config.type) {
+        case 'scale':
+            react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: intensity,
+                    duration: duration / 2,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 1,
+                    duration: duration / 2,
+                    easing: react_native_1.Easing.in(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            break;
+        case 'pulse':
+            const pulseSequence = react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 1.05,
+                    duration: duration,
+                    easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 1,
+                    duration: duration,
+                    easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]);
+            if (config.repeat) {
+                react_native_1.Animated.loop(pulseSequence).start();
+            }
+            else {
+                pulseSequence.start();
+            }
+            break;
+        case 'shake':
+            react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: intensity,
+                    duration: duration / 8,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: -intensity,
+                    duration: duration / 4,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: intensity,
+                    duration: duration / 4,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: -intensity,
+                    duration: duration / 4,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 0,
+                    duration: duration / 8,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            break;
+        case 'bounce':
+            react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: -20,
+                    duration: duration / 3,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 5,
+                    duration: duration / 3,
+                    easing: react_native_1.Easing.in(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 0,
+                    duration: duration / 3,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            break;
+    }
+};
+exports.startInteractiveAnimation = startInteractiveAnimation;
+const shouldTriggerHaptic = (index, frequency) => {
+    switch (frequency) {
+        case 'every':
+            return true;
+        case 'every-2':
+            return index % 2 === 0;
+        case 'every-3':
+            return index % 3 === 0;
+        case 'every-5':
+            return index % 5 === 0;
+        default:
+            return false;
+    }
+};
+exports.shouldTriggerHaptic = shouldTriggerHaptic;

package/lib/components/ElementRenderer.d.ts

@@ -8,6 +8,11 @@ interface ElementRendererProps {
     onDismiss?: () => void;
     variables?: Record<string, any>;
     onSetVariable?: (name: string, value: any) => void;
+    assets?: Array<{
+        name: string;
+        type: string;
+        data: string;
+    }>;
 }
 export declare const ElementRenderer: React.FC<ElementRendererProps>;
 export {};