Onboarding Friction

📋 ONBOARDING ASSISTANCE - Account Setup

User is on step 1 (Account Setup) and may need help.

User Information:
- Email: {{user_email}}
- Time on step: {{time_on_step}} seconds
- Fields completed: {{completed_fields}}

Common issues at this step:
- Unsure what company name to use
- Password requirements confusion
- Already have an account but forgot

Help them complete their account setup. Be encouraging and patient.
If they already have an account, help them find the password reset.

🔧 ONBOARDING ASSISTANCE - Integration Setup

User is stuck setting up an integration.

Integration Details:
- Type: {{integration_type}}
- Error (if any): {{error_message}}
- Time on step: {{time_on_step}} seconds

Common issues:
- Can't find API key
- Permissions not set correctly
- Firewall blocking connection

Provide step-by-step guidance for the {{integration_type}} integration.
If there's an error, explain what it means and how to fix it.

class OnboardingTracker {
  constructor() {
    this.stepStartTime = Date.now();
    this.currentStep = this.getCurrentStep();
    this.triggered = {};
    this.thresholds = {
      'account-setup': 60,      // 60 seconds
      'profile': 45,
      'team-invite': 90,
      'integration': 120,       // 2 minutes - more complex
      'first-project': 90
    };
  }

  getCurrentStep() {
    // Detect from URL or DOM
    return document.querySelector('[data-onboarding-step]')?.dataset.onboardingStep;
  }

  startTracking() {
    this.checkInterval = setInterval(() => this.checkForFriction(), 5000);
  }

  stopTracking() {
    clearInterval(this.checkInterval);
  }

  checkForFriction() {
    const step = this.getCurrentStep();
    const timeOnStep = (Date.now() - this.stepStartTime) / 1000;
    const threshold = this.thresholds[step] || 60;

    if (timeOnStep > threshold && !this.triggered[step]) {
      this.triggerHelp(step, timeOnStep);
      this.triggered[step] = true;
    }
  }

  triggerHelp(step, timeOnStep) {
    const eventName = `onboarding_${step.replace('-', '_')}_stuck`;

    boostgpt.trigger(eventName, {
      user_email: getUserEmail(),
      time_on_step: Math.round(timeOnStep),
      completed_fields: getCompletedFields(),
      step_name: step,
      error_message: getVisibleError()
    }, {
      type: 'toast',
      position: 'bottom-right',
      title: 'Setup Assistant',
      message: this.getMessageForStep(step)
    });
  }

  getMessageForStep(step) {
    const messages = {
      'account-setup': 'Need help setting up your account?',
      'profile': 'Having trouble with your profile?',
      'team-invite': 'Want help inviting your team?',
      'integration': 'Stuck on the integration? I can walk you through it!',
      'first-project': 'Need help creating your first project?'
    };
    return messages[step] || 'Need any help?';
  }

  onStepChange(newStep) {
    this.currentStep = newStep;
    this.stepStartTime = Date.now();
  }
}

// Initialize
const tracker = new OnboardingTracker();
tracker.startTracking();

// Update on navigation
window.addEventListener('popstate', () => {
  tracker.onStepChange(tracker.getCurrentStep());
});

// Trigger when user submits form with errors multiple times
let errorCount = 0;

document.querySelector('form').addEventListener('submit', function(e) {
  const errors = document.querySelectorAll('.error-message:visible');
  if (errors.length > 0) {
    errorCount++;
    if (errorCount >= 2) {
      boostgpt.trigger('onboarding_form_errors', {
        step: getCurrentStep(),
        errors: Array.from(errors).map(e => e.textContent).join(', '),
        attempt_count: errorCount
      }, {
        type: 'toast',
        message: 'Having trouble with the form? I can help clarify what\'s needed.'
      });
    }
  }
});

// Trigger when integration test fails
async function testIntegration() {
  try {
    const result = await api.testConnection();
    // Success
  } catch (error) {
    boostgpt.trigger('integration_test_failed', {
      integration: selectedIntegration,
      error_code: error.code,
      error_message: error.message
    }, {
      type: 'toast',
      messages: [
        'Hmm, the connection test failed.',
        `Error: ${error.message}`,
        'Want me to help troubleshoot?'
      ],
      buttonColor: '#DC2626'
    });
  }
}