noboarding 1.0.2-beta → 1.0.6-beta

package/src/OnboardingFlow.tsx

@@ -1,16 +1,36 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { View, ActivityIndicator, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { API } from './api';
 import { AnalyticsManager } from './analytics';
 import { OnboardingFlowProps, ScreenConfig, ConditionalDestination, ConditionalRoutes } from './types';
 import { resolveDestination } from './variableUtils';
 import { ElementRenderer } from './components/ElementRenderer';
 
-// Generate unique IDs
-const generateUserId = (): string => {
-  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 (): Promise<string> => {
+  try {
+    // Try to get existing user ID from storage
+    const existingUserId = await AsyncStorage.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 AsyncStorage.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 = (): string => {
   return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 };
@@ -54,22 +74,33 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [screens, setScreens] = useState<ScreenConfig[]>([]);
+  const [assets, setAssets] = useState<Array<{ name: string; type: string; data: string }>>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [collectedData, setCollectedData] = useState<Record<string, any>>({});
   const [variables, setVariables] = useState<Record<string, any>>(initialVariables || {});
 
   const apiRef = useRef<API | null>(null);
   const analyticsRef = useRef<AnalyticsManager | null>(null);
-  const userIdRef = useRef<string>(generateUserId());
+  const userIdRef = useRef<string | null>(null);
   const sessionIdRef = useRef<string>(generateSessionId());
+  const flowIdRef = useRef<string | null>(null);
 
   useEffect(() => {
-    // Notify parent of the generated user ID
-    if (onUserIdGenerated) {
-      onUserIdGenerated(userIdRef.current);
-    }
+    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);
+      }
 
-    initializeFlow();
+      // Initialize the flow
+      await initializeFlow();
+    };
+
+    initialize();
 
     return () => {
       // Cleanup: flush remaining analytics
@@ -79,11 +110,28 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
     };
   }, []);
 
+  // Track screen views whenever user navigates to a different screen
+  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 () => {
     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(activeApiKey, baseUrl);
       apiRef.current = api;
@@ -96,13 +144,55 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
       );
       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: assignment.variant_config?.screens?.length > 0,
+            variant_screen_count: assignment.variant_config?.screens?.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 (assignment.variant_config?.screens?.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 => ({
           ...s,
           type: (s.type === ('custom_screen' as any) && s.elements) ? 'noboard_screen' as ScreenConfig['type'] : s.type,
@@ -111,6 +201,12 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
         .filter(s => !s.hidden);
       setScreens(normalizedScreens);
 
+      // Track onboarding start with first screen
+      analytics.track('onboarding_started', {
+        flow_id: flowIdRef.current,
+        screen_id: normalizedScreens[0]?.id,
+      });
+
       setLoading(false);
     } catch (err) {
       console.error('Failed to initialize onboarding flow:', err);
@@ -162,7 +258,10 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
 
     // Track completion
     if (analyticsRef.current) {
-      analyticsRef.current.track('onboarding_completed');
+      analyticsRef.current.track('onboarding_completed', {
+        flow_id: flowIdRef.current,
+        screen_id: screens[currentIndex]?.id,
+      });
       await analyticsRef.current.flush();
     }
 
@@ -173,6 +272,8 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
   const handleSkipAll = async () => {
     if (analyticsRef.current) {
       analyticsRef.current.track('onboarding_abandoned', {
+        flow_id: flowIdRef.current,
+        screen_id: screens[currentIndex]?.id,
         current_screen_index: currentIndex,
       });
       await analyticsRef.current.flush();
@@ -256,6 +357,7 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
           onDismiss={onSkip ? handleSkipAll : handleNext}
           variables={allVariables}
           onSetVariable={handleSetVariable}
+          assets={assets}
         />
       </View>
     );

package/src/analytics.ts

@@ -10,6 +10,8 @@ export class AnalyticsManager {
   private userId: string;
   private sessionId: string;
   private flushTimer: NodeJS.Timeout | null = null;
+  private experimentId: string | null = null;
+  private variantId: string | null = null;
 
   constructor(api: API, userId: string, sessionId: string) {
     this.api = api;
@@ -20,16 +22,36 @@ export class AnalyticsManager {
     this.startFlushTimer();
   }
 
+  /**
+   * Set experiment context — all subsequent events will be tagged
+   */
+  setExperimentContext(experimentId: string, variantId: string): void {
+    this.experimentId = experimentId;
+    this.variantId = variantId;
+  }
+
   /**
    * Track an analytics event
    */
   track(eventName: string, properties?: Record<string, any>): void {
+    const mergedProperties: Record<string, any> = {
+      ...(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: AnalyticsEvent = {
       event: eventName,
       user_id: this.userId,
       session_id: this.sessionId,
       timestamp: Date.now(),
-      properties: properties || {},
+      properties: mergedProperties,
     };
 
     this.events.push(event);

package/src/animationUtils.ts

@@ -0,0 +1,292 @@
+import { Animated, Easing } from 'react-native';
+import type {
+  EntranceAnimation,
+  InteractiveAnimation,
+  TextAnimation,
+  HapticType
+} from './types';
+
+// Lazy load haptics to avoid errors if not installed
+let Haptics: any = null;
+try {
+  Haptics = require('expo-haptics');
+} catch (e) {
+  console.warn('expo-haptics not installed, haptic feedback will be disabled');
+}
+
+// ─── Haptic Feedback Helper ───
+
+export const triggerHaptic = (type: HapticType = '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);
+  }
+};
+
+// ─── Easing Function Mapper ───
+
+export const getEasing = (easingType?: string) => {
+  switch (easingType) {
+    case 'linear':
+      return Easing.linear;
+    case 'ease-in':
+      return Easing.in(Easing.ease);
+    case 'ease-out':
+      return Easing.out(Easing.ease);
+    case 'ease-in-out':
+      return Easing.inOut(Easing.ease);
+    case 'spring':
+      return Easing.elastic(1);
+    default:
+      return Easing.inOut(Easing.ease);
+  }
+};
+
+// ─── Entrance Animations ───
+
+export interface EntranceAnimationValues {
+  opacity: Animated.Value;
+  translateY: Animated.Value;
+  translateX: Animated.Value;
+  scale: Animated.Value;
+}
+
+export const createEntranceAnimationValues = (): EntranceAnimationValues => ({
+  opacity: new Animated.Value(0),
+  translateY: new Animated.Value(0),
+  translateX: new Animated.Value(0),
+  scale: new Animated.Value(1),
+});
+
+export const startEntranceAnimation = (
+  config: EntranceAnimation,
+  values: EntranceAnimationValues,
+  delay: number = 0
+): void => {
+  const duration = config.duration || 400;
+  const totalDelay = (config.delay || 0) + delay;
+  const easing = 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
+  Animated.parallel([
+    Animated.timing(values.opacity, {
+      toValue: 1,
+      duration,
+      delay: totalDelay,
+      easing,
+      useNativeDriver: true,
+    }),
+    Animated.timing(values.translateY, {
+      toValue: 0,
+      duration,
+      delay: totalDelay,
+      easing,
+      useNativeDriver: true,
+    }),
+    Animated.timing(values.translateX, {
+      toValue: 0,
+      duration,
+      delay: totalDelay,
+      easing,
+      useNativeDriver: true,
+    }),
+    Animated.timing(values.scale, {
+      toValue: 1,
+      duration,
+      delay: totalDelay,
+      easing,
+      useNativeDriver: true,
+    }),
+  ]).start();
+};
+
+// ─── Interactive Animations ───
+
+export const startInteractiveAnimation = (
+  config: InteractiveAnimation,
+  animatedValue: Animated.Value
+): void => {
+  const duration = config.duration || 200;
+  const intensity = config.intensity || (config.type === 'scale' ? 0.95 : 10);
+
+  // Trigger haptic if enabled
+  if (config.haptic && config.hapticType) {
+    triggerHaptic(config.hapticType);
+  }
+
+  switch (config.type) {
+    case 'scale':
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: intensity,
+          duration: duration / 2,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: duration / 2,
+          easing: Easing.in(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]).start();
+      break;
+
+    case 'pulse':
+      const pulseSequence = Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1.05,
+          duration: duration,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: duration,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]);
+
+      if (config.repeat) {
+        Animated.loop(pulseSequence).start();
+      } else {
+        pulseSequence.start();
+      }
+      break;
+
+    case 'shake':
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: intensity,
+          duration: duration / 8,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: -intensity,
+          duration: duration / 4,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: intensity,
+          duration: duration / 4,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: -intensity,
+          duration: duration / 4,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: duration / 8,
+          useNativeDriver: true,
+        }),
+      ]).start();
+      break;
+
+    case 'bounce':
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: -20,
+          duration: duration / 3,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 5,
+          duration: duration / 3,
+          easing: Easing.in(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: duration / 3,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]).start();
+      break;
+  }
+};
+
+// ─── Typewriter Text Animation ───
+
+export interface TypewriterState {
+  displayedText: string;
+  currentIndex: number;
+  isComplete: boolean;
+}
+
+export const shouldTriggerHaptic = (
+  index: number,
+  frequency: string
+): boolean => {
+  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;
+  }
+};