crank/apps/ui/js/wizard-shell.js

(function() {
  var TOTAL_STEPS = 5;
  var CHECK_SVG = '<svg width="10" height="10"><use href="' + (window.APP_BASE || '') + 'icons/general/check.svg#icon"/></svg>';
  var ARROW_SVG = '<svg width="13" height="13"><use href="' + (window.APP_BASE || '') + 'icons/general/arrow-right.svg#icon"/></svg>';

  function tKey(key) {
    return typeof t === 'function' ? t(key) : key;
  }

  function tfKey(key, vars) {
    return typeof tf === 'function' ? tf(key, vars) : key;
  }

  function step3PanelId() {
    if (window.wizardProtocol === 'graphql') return 'step-panel-3-graphql';
    if (window.wizardProtocol === 'grpc') return 'step-panel-3-grpc';
    if (window.wizardProtocol === 'websocket') return 'step-panel-3-websocket';
    if (window.wizardProtocol === 'soap') return 'step-panel-3-soap';
    return 'step-panel-3-rest';
  }

  function stepFile(step) {
    return step === 3 ? 'step3-' + window.wizardProtocol + '.html' : 'step' + step + '.html';
  }

  function loadStep(step, callback) {
    var panelId = step === 3 ? step3PanelId() : 'step-panel-' + step;
    if (document.getElementById(panelId)) {
      if (callback) callback();
      return;
    }
    fetch(stepFile(step))
      .then(function(response) { return response.text(); })
      .then(function(html) {
        var container = document.getElementById('step-panel-container');
        if (container) container.insertAdjacentHTML('beforeend', html);
        if (typeof applyLang === 'function') applyLang();
        if (callback) callback();
      })
      .catch(function() {
        if (callback) callback();
      });
  }

  function doGoToStep(step) {
    document.querySelectorAll('.step-number[data-step]').forEach(function(element) {
      var stepNumber = Number(element.getAttribute('data-step')) || 0;
      element.textContent = tfKey('wizard.step_short', { step: stepNumber });
    });

    document.querySelectorAll('.step-pane').forEach(function(pane) { pane.style.display = 'none'; });
    var panelId = step === 3 ? step3PanelId() : 'step-panel-' + step;
    var pane = document.getElementById(panelId);
    if (pane) pane.style.display = '';

    document.querySelectorAll('.step-item').forEach(function(item, index) {
      var stepNumber = index + 1;
      item.classList.remove('active', 'done', 'pending');
      var indicator = item.querySelector('.step-indicator');
      var status = item.querySelector('.step-status-text');
      if (stepNumber < step) {
        item.classList.add('done');
        if (indicator) indicator.innerHTML = CHECK_SVG;
        if (status) status.textContent = tKey('wizard.status.completed');
      } else if (stepNumber === step) {
        item.classList.add('active');
        if (indicator) indicator.textContent = stepNumber;
        if (status) status.textContent = tKey('wizard.status.in_progress');
      } else {
        item.classList.add('pending');
        if (indicator) indicator.textContent = stepNumber;
        if (status) status.textContent = tKey('wizard.status.not_started');
      }
    });

    var percent = Math.round((step / TOTAL_STEPS) * 100);
    var fill = document.querySelector('.progress-bar-fill');
    if (fill) fill.style.width = percent + '%';
    var percentNode = document.querySelector('.progress-pct');
    if (percentNode) percentNode.textContent = percent + '%';

    var counter = document.querySelector('[data-step-counter]');
    if (counter) counter.innerHTML = tfKey('wizard.step_of', { step: step, total: TOTAL_STEPS });

    var backButton = document.querySelector('.btn-back');
    if (backButton) {
      backButton.disabled = step === 1;
    }

    var continueButton = document.querySelector('.btn-continue');
    if (continueButton) {
      if (step === TOTAL_STEPS) {
        var finalLabel = window.wizardMode === 'edit' ? tKey('wizard.button.save_changes') : tKey('wizard.button.create');
        continueButton.innerHTML = finalLabel + ' ' + ARROW_SVG;
        continueButton.classList.add('is-final-step');
      } else {
        continueButton.innerHTML = tKey('wizard.button.continue') + ' ' + ARROW_SVG;
        continueButton.classList.remove('is-final-step');
      }
    }

    window.currentStep = step;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  function goToStep(step) {
    if (step < 1 || step > TOTAL_STEPS) return;
    loadStep(step, function() { doGoToStep(step); });
  }

  function loadWizardPanels(steps) {
    return steps.reduce(function(chain, step) {
      return chain.then(function() {
        return new Promise(function(resolve) {
          loadStep(step, resolve);
        });
      });
    }, Promise.resolve());
  }

  function bindProtocolCards() {
    document.querySelectorAll('.protocol-card').forEach(function(card) {
      card.addEventListener('click', function() {
        document.querySelectorAll('.protocol-card').forEach(function(item) {
          item.classList.remove('selected');
          item.setAttribute('aria-checked', 'false');
        });
        card.classList.add('selected');
        card.setAttribute('aria-checked', 'true');

        var protocol = card.dataset.protocol
          || (card.classList.contains('rest')
            ? 'rest'
            : card.classList.contains('graphql')
              ? 'graphql'
              : card.classList.contains('grpc')
                ? 'grpc'
                : card.classList.contains('websocket')
                  ? 'websocket'
                  : card.classList.contains('soap')
                    ? 'soap'
                    : 'rest');

        window.wizardProtocol = protocol;
        var step3Name = document.getElementById('sidebar-step-3-name');
        var labels = window.CrankWizardState.step3Labels();
        if (step3Name) step3Name.textContent = labels[protocol] || tKey('wizard.step3.rest.label');

        if (protocol === 'graphql') {
          var pathInput = document.getElementById('endpoint-path');
          if (pathInput && pathInput.value === '/v1/leads') pathInput.value = '/graphql';
        }
      });
      card.addEventListener('keydown', function(event) {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          card.click();
        }
      });
    });
  }

  window.CrankWizardShell = {
    TOTAL_STEPS: TOTAL_STEPS,
    step3PanelId: step3PanelId,
    loadStep: loadStep,
    doGoToStep: doGoToStep,
    goToStep: goToStep,
    loadWizardPanels: loadWizardPanels,
    bindProtocolCards: bindProtocolCards,
  };
}());