dashcaddy/dashcaddy-api/assets/onboarding.js

/**
 * DashCaddy User Onboarding System
 * Main entry point for the tooltip-based onboarding experience
 * 
 * This file initializes the onboarding system and coordinates between
 * the various components (TourManager, ProgressTracker, ThemeAdapter, etc.)
 */

(function() {
  'use strict';

  let progressTracker;
  let themeAdapter;
  let tourManager;
  let dnsTemplateSelector;
  let errorHandler;

  /**
   * Initialize the onboarding system
   */
  async function initializeOnboarding() {
    try {
      console.log('[Onboarding] Initializing system...');

      // Initialize Error Handler first
      errorHandler = new ErrorHandler();
      console.log('[Onboarding] Error Handler initialized');

      // Initialize Progress Tracker
      progressTracker = new ProgressTracker('dashcaddy_onboarding');
      console.log('[Onboarding] Progress Tracker initialized');

      // Initialize Theme Adapter
      themeAdapter = new ThemeAdapter();
      console.log('[Onboarding] Theme Adapter initialized');

      // Initialize DNS Template Selector
      dnsTemplateSelector = new DnsTemplateSelector(progressTracker);
      console.log('[Onboarding] DNS Template Selector initialized');

      // Initialize Tour Manager
      tourManager = new TourManager(progressTracker, themeAdapter, dnsTemplateSelector);
      console.log('[Onboarding] Tour Manager initialized');

      // Check if tour should auto-start
      if (tourManager.shouldAutoStart()) {
        console.log('[Onboarding] Auto-starting tour for first-time user');
        // Wait a bit for page to fully load
        setTimeout(() => {
          tourManager.startTour();
        }, 1000);
      } else {
        const tourCompleted = progressTracker.isTourCompleted();
        const currentStep = progressTracker.getCurrentStep();
        console.log(`[Onboarding] Tour not auto-starting (completed: ${tourCompleted}, step: ${currentStep})`);
        
        // If tour is in progress, offer to resume
        if (!tourCompleted && currentStep > 0) {
          console.log('[Onboarding] Tour in progress, can be resumed manually');
        }
      }

      // Add restart tour button to tools row
      addRestartTourButton();

      // Expose to global scope for manual triggering
      window.DashCaddyOnboarding = {
        startTour: () => tourManager.startTour(),
        restartTour: () => tourManager.restartTour(),
        showTooltip: (id) => tourManager.showTooltip(id),
        showWhatsNew: () => tourManager.showWhatsNew(),
        resetProgress: () => progressTracker.resetProgress(),
        getErrors: () => errorHandler.getErrors(),
        getErrorStats: () => errorHandler.getStatistics()
      };

      console.log('[Onboarding] System initialized successfully');
    } catch (error) {
      console.error('[Onboarding] Initialization error:', error);
      
      // Use error handler if available
      if (errorHandler) {
        errorHandler.logError('Initialization', error);
      }
      
      // Graceful degradation - don't break the dashboard
      console.warn('[Onboarding] System failed to initialize, dashboard will continue without onboarding');
    }
  }

  /**
   * Add restart tour button to tools row
   */
  function addRestartTourButton() {
    const toolsRow = document.querySelector('.tools');
    if (!toolsRow) return;

    const clickHandler = () => {
      if (tourManager) {
        console.log('[Onboarding] Starting tour via button click');
        tourManager.restartTour();
      } else {
        console.error('[Onboarding] Tour manager not initialized');
        alert('Tour is not available. Check browser console for errors.\n\nPossible issues:\n- Driver.js library failed to load\n- JavaScript errors during initialization');
      }
    };

    // If button already exists in the HTML, just attach the handler
    const existing = document.getElementById('restart-tour-btn');
    if (existing) {
      existing.onclick = clickHandler;
      return;
    }

    const button = document.createElement('button');
    button.id = 'restart-tour-btn';
    button.textContent = 'Help Tour';
    button.title = 'Restart the onboarding tour';
    button.onclick = clickHandler;
    toolsRow.appendChild(button);
  }

  /**
   * Check if Driver.js is loaded
   */
  function checkDriverLoaded() {
    // Driver.js v1.x IIFE: window.driver.js.driver is the factory function
    const driverFactory = window.driver?.js?.driver || window.driver?.driver || window.driver;
    if (typeof driverFactory !== 'function') {
      console.warn('[Onboarding] Driver.js not loaded yet, will retry... window.driver:', window.driver);
      return false;
    }
    return true;
  }

  /**
   * Wait for Driver.js to load, then initialize
   */
  function waitForDriver() {
    let retries = 0;
    const maxRetries = 10;

    function attemptInit() {
      if (checkDriverLoaded()) {
        initializeOnboarding();
      } else {
        retries++;
        if (retries < maxRetries) {
          // Retry after a short delay
          setTimeout(attemptInit, 500);
        } else {
          // Max retries reached, show fallback
          console.error('[Onboarding] Driver.js failed to load after multiple attempts');
          if (errorHandler) {
            errorHandler.handleDriverLoadFailure();
          } else {
            // Create temporary error handler for fallback
            const tempHandler = new ErrorHandler();
            tempHandler.handleDriverLoadFailure();
          }
        }
      }
    }

    attemptInit();
  }

  // Start initialization when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', waitForDriver);
  } else {
    waitForDriver();
  }

  console.log('[Onboarding] System loaded');

})();