Loading times…

'; // Sticky footer: confirm the highlighted time, or submit the quote without one. // Confirm stays disabled until a slot is chosen, so picking + sending are two // deliberate steps (no accidental submit on the first tap). var foot = document.createElement('div'); foot.className = 'booking-modal__foot'; var confirmBtn = document.createElement('button'); confirmBtn.type = 'button'; confirmBtn.className = 'booking-submit'; confirmBtn.textContent = 'Confirm time'; confirmBtn.disabled = true; var skipBtn = document.createElement('button'); skipBtn.type = 'button'; skipBtn.className = 'booking-change'; skipBtn.textContent = 'Submit without a time'; foot.appendChild(confirmBtn); foot.appendChild(skipBtn); modal.appendChild(head); modal.appendChild(bodyEl); modal.appendChild(foot); scrim.appendChild(modal); // Mount inside the theme wrapper, NOT document.body: the .booking-scrim/.booking-modal // CSS is scoped under .tpl-studio/.tpl-civic and uses theme tokens (--c-page-bg etc.), // so a body-level mount renders the modal unstyled (no fixed backdrop → invisible). // The scrim is position:fixed so it's still viewport-anchored wherever it sits. var mountRoot = document.querySelector('.tpl-studio, .tpl-civic') || document.body; mountRoot.appendChild(scrim); var done = false; var selectedIso = ''; // the chosen slot, '' until the visitor taps one var selectedBtn = null; // the highlighted slot button var slotTz = null; // tz from availability, for the human-readable label var prevFocus = document.activeElement; // restore focus to the trigger on close var prevOverflow = document.documentElement.style.overflow; // restore page scroll on close document.documentElement.style.overflow = 'hidden'; // lock background scroll while modal is open // Esc closes; Tab is trapped inside the dialog so keyboard focus can't escape to the // page behind the scrim (matches the lightbox's modal contract). function onKey(e){ if (e.key === 'Escape') { if (!done) skip(); return; } if (e.key === 'Tab') { var f = modal.querySelectorAll('button:not([disabled])'); if (!f.length) return; var first = f[0], last = f[f.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } } function teardown(){ document.removeEventListener('keydown', onKey); // remove on EVERY close path (no leak) document.documentElement.style.overflow = prevOverflow; // unlock background scroll if (scrim.parentNode) scrim.parentNode.removeChild(scrim); form.removeAttribute('data-booking-open'); // release the re-entrancy guard if (prevFocus && prevFocus.focus) { try { prevFocus.focus(); } catch (e) {} } // return focus to the trigger } // Hold the modal open while the POST is in flight and say so. Tearing it down first // read as "the dialog just closed and nothing happened" on a slow connection. function pending(btn, label){ if (confirmBtn) { confirmBtn.disabled = true; } if (skipBtn) { skipBtn.disabled = true; } if (btn) { btn.textContent = label; } scrim.setAttribute('data-booking-sending', ''); } // Skip → submit the quote with no time. function skip(){ if (done) return; done = true; pending(skipBtn, 'Sending...'); submitLead(form, data, null, teardown); } // Confirm → attach the chosen slot, submit, and echo the chosen time in the confirm. function confirmPick(){ if (done || !selectedIso) return; done = true; pending(confirmBtn, 'Sending...'); data.slot = selectedIso; var zone = fmtZone(slotTz); submitLead(form, data, fmtDay(selectedIso, slotTz) + ' at ' + fmtTime(selectedIso, slotTz) + (zone ? ' ' + zone : ''), teardown); } // Tap a slot to select it (tap again to deselect); enables Confirm. function choose(btn, iso){ if (selectedBtn) { selectedBtn.classList.remove('is-selected'); selectedBtn.setAttribute('aria-pressed', 'false'); } if (selectedBtn === btn) { selectedBtn = null; selectedIso = ''; confirmBtn.disabled = true; return; } selectedBtn = btn; selectedIso = iso; btn.classList.add('is-selected'); btn.setAttribute('aria-pressed', 'true'); confirmBtn.disabled = false; } close.addEventListener('click', skip); skipBtn.addEventListener('click', skip); confirmBtn.addEventListener('click', confirmPick); scrim.addEventListener('click', function(e){ if (e.target === scrim) skip(); }); document.addEventListener('keydown', onKey); // Move focus into the dialog so keyboard + screen-reader users land on it. try { close.focus(); } catch (e) {} fetch('/api/booking/availability?days=14' + (PREVIEW && PREVIEW_SLUG ? '&slug=' + encodeURIComponent(PREVIEW_SLUG) : '')) .then(function(r){ return r.ok ? r.json() : null; }) .then(function(json){ if (done) return; var slots = (json && json.slots) || []; if (!slots.length) { skip(); return; } // nothing bookable → just submit the quote var tz = (json && json.tz) || null; slotTz = tz; bodyEl.innerHTML = ''; var intro = document.createElement('p'); intro.className = 'booking-note'; var introZone = fmtZone(tz); intro.textContent = 'Pick a time that works, then hit Confirm. Totally optional.' + (introZone ? ' Times are in ' + introZone + '.' : ''); bodyEl.appendChild(intro); var groups = {}; var order = []; for (var i = 0; i < slots.length; i++){ var iso = slots[i].startIso; var day = fmtDay(iso, tz); if (!groups[day]) { groups[day] = []; order.push(day); } groups[day].push(iso); } for (var d = 0; d < order.length; d++){ var label = order[d]; var wrap = document.createElement('div'); wrap.className = 'booking-day'; var lab = document.createElement('span'); lab.className = 'booking-day__label'; lab.textContent = label; var times = document.createElement('div'); times.className = 'booking-day__times'; var isos = groups[label]; for (var t = 0; t < isos.length; t++){ (function(iso){ var b = document.createElement('button'); b.type = 'button'; b.className = 'booking-slot'; b.setAttribute('aria-pressed', 'false'); b.textContent = fmtTime(iso, tz); b.addEventListener('click', function(){ choose(b, iso); }); times.appendChild(b); })(isos[t]); } wrap.appendChild(lab); wrap.appendChild(times); bodyEl.appendChild(wrap); } }) .catch(function(){ skip(); }); } function bind(form){ if (form.getAttribute('data-lead-bound') !== null) return; form.setAttribute('data-lead-bound', ''); form.addEventListener('submit', function(e){ e.preventDefault(); // In the editor's edit mode the iframe must NOT navigate or fetch: it would // tear down the postMessage edit bridge to the admin shell. Mirror the // lightbox's [data-mode="edit"] bail; the live site and the editor's // preview mode have no such ancestor, so they submit. if (form.closest('[data-mode="edit"]')) return; // preventDefault above skips the browser's native constraint check, so run it // here: this enforces required name/phone, the phone pattern, and the required // consent box on the JS path (otherwise malformed data or an unticked consent // box slips straight through to the server). if (typeof form.reportValidity === 'function' && !form.reportValidity()) return; var data = collect(form); // Booking on → the preferred-time overlay is the last step; off → POST now. if (form.getAttribute('data-booking-enabled') !== null) { openSlotStep(form, data); return; } submitLead(form, data); }); } var forms = document.querySelectorAll('[data-lead-form]'); for (var i = 0; i < forms.length; i++){ bind(forms[i]); } })();

Get in touch