← back to Butlr

public/js/wizard.js

29 lines

// Wizard helpers — toggle "selected" state on business radio click,
// auto-blank custom-name fields when a preset is picked.
(function(){
  // Business picker radios — visual feedback + auto-clear custom inputs
  document.querySelectorAll('.business-pick-card').forEach(label => {
    label.addEventListener('click', () => {
      document.querySelectorAll('.business-pick-card.selected').forEach(el => el.classList.remove('selected'));
      label.classList.add('selected');
    });
  });

  // Category picker (step 1)
  document.querySelectorAll('.category-pick-card').forEach(label => {
    label.addEventListener('click', () => {
      document.querySelectorAll('.category-pick-card.selected').forEach(el => el.classList.remove('selected'));
      label.classList.add('selected');
    });
  });

  // Phone formatting on blur
  document.querySelectorAll('input[type=tel]').forEach(el => {
    el.addEventListener('blur', () => {
      const d = el.value.replace(/\D/g, '');
      if (d.length === 10) el.value = `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`;
      else if (d.length === 11 && d[0] === '1') el.value = `+1 (${d.slice(1,4)}) ${d.slice(4,7)}-${d.slice(7)}`;
    });
  });
})();