'; msgs.appendChild(d); msgs.appendChild(typing); msgs.scrollTop = msgs.scrollHeight; } function esc(s) { return s.replace(/&/g, '&').replace(//g, '>'); } // Render a row of clickable pill buttons under the most recent bot bubble. // Tapping one fires it as the user's reply via the existing chat flow. // After any pill in the row is tapped, the whole row disables (no double-tap). function addQuickReplies(options) { if (!Array.isArray(options) || !options.length) return; // Disable any older quick-reply rows so only the latest is interactive document.querySelectorAll('#chatMsgs .lp-qr-wrap').forEach(w => { w.querySelectorAll('button').forEach(b => b.disabled = true); }); const msgs = document.getElementById('chatMsgs'); const typing = document.getElementById('typing'); const wrap = document.createElement('div'); wrap.className = 'lp-qr-wrap'; options.forEach(opt => { const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'lp-qr-btn'; btn.textContent = opt; btn.onclick = function () { // Disable all buttons in this row immediately wrap.querySelectorAll('button').forEach(b => b.disabled = true); const inp = document.getElementById('chatInp'); if (inp) { inp.value = opt; window.lpSend(); } }; wrap.appendChild(btn); }); msgs.insertBefore(wrap, typing); msgs.scrollTop = msgs.scrollHeight; } window.lpGrow = function (el) { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 120) + 'px'; }; async function callEstimate(userText) { const typing = document.getElementById('typing'); typing.classList.add('show'); document.getElementById('chatMsgs').scrollTop = 1e9; if (userText) history.push({ role: 'user', content: userText }); try { const res = await fetch(ESTIMATE_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: history, formData: fd, clientId, jobId, attribution }) }); const data = await res.json(); typing.classList.remove('show'); if (data.reply) { history.push({ role: 'assistant', content: data.reply }); addBubble(data.reply, 'bot'); } if (Array.isArray(data.quickReplies) && data.quickReplies.length) addQuickReplies(data.quickReplies); if (data.clientId) clientId = data.clientId; if (data.jobId) jobId = data.jobId; saveState(); } catch (err) { typing.classList.remove('show'); addBubble("Sorry, something went wrong. Reach us directly at (267) 912-8285 📱", 'bot'); console.error(err); } } window.lpSend = async function () { if (sending) return; const inp = document.getElementById('chatInp'); const btn = document.getElementById('sendBtn'); const text = inp.value.trim(); if (!text) return; sending = true; btn.disabled = true; inp.value = ''; window.lpGrow(inp); addBubble(text, 'usr'); await callEstimate(text); sending = false; btn.disabled = false; inp.focus(); }; window.lpKey = function (e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); window.lpSend(); } }; // ── Restart button (two-tap confirm) ───────────────────────────────────── // Airtable data already collected stays in Airtable — this only clears the // local widget so the customer can start a new chat. let restartArmed = false; let restartTimer = null; window.lpRestartTap = function () { const btn = document.getElementById('lpRestartBtn'); const text = document.getElementById('lpRestartText'); if (restartArmed) { if (restartTimer) clearTimeout(restartTimer); doRestart(); return; } restartArmed = true; btn && btn.classList.add('armed'); if (text) text.style.display = ''; restartTimer = setTimeout(() => { restartArmed = false; btn && btn.classList.remove('armed'); if (text) text.style.display = 'none'; }, 3000); }; function doRestart() { restartArmed = false; const btn = document.getElementById('lpRestartBtn'); const text = document.getElementById('lpRestartText'); btn && btn.classList.remove('armed'); if (text) text.style.display = 'none'; clearState(); fd.services = []; fd.condition = ''; fd.firstName = ''; fd.phone = ''; fd.address = ''; fd.notes = ''; history.length = 0; clientId = null; jobId = null; sending = false; pendingFirstResponse = null; currentStep = 1; currentPhase = 'form'; document.querySelectorAll('#lpWrap .lp-pick.sel').forEach(el => el.classList.remove('sel')); const n = document.getElementById('iName'); const p = document.getElementById('iPhone'); const a = document.getElementById('iAddr'); const nt = document.getElementById('iNotes'); if (n) n.value = ''; if (p) p.value = ''; if (a) a.value = ''; if (nt) nt.value = ''; ['e1','e2'].forEach(hideErr); const formEl = document.getElementById('lpForm'); const transEl = document.getElementById('lpTransition'); const chatEl = document.getElementById('lpChat'); const heroEl = document.getElementById('lpHero'); formEl.style.display = 'none'; formEl.classList.remove('hide'); transEl.classList.remove('active'); transEl.style.display = ''; ['tl1','tl2','tl3'].forEach(id => document.getElementById(id)?.classList.remove('show')); chatEl.classList.remove('active'); // Bring the hero back so the user lands on the marketing screen, not a blank form if (heroEl) { heroEl.classList.add('active'); heroEl.style.display = ''; } lpCloseModal(); const msgs = document.getElementById('chatMsgs'); const typing = document.getElementById('typing'); if (msgs && typing) { Array.from(msgs.children).forEach(c => { if (c !== typing) msgs.removeChild(c); }); typing.classList.remove('show'); } const chatInp = document.getElementById('chatInp'); if (chatInp) { chatInp.value = ''; window.lpGrow(chatInp); } currentPhase = 'hero'; setStep(1); } // ── Hero CTA: open the form modal on top of the hero ───────────────────── // Hero stays visible underneath. Modal closes on X / backdrop click / ESC, // or auto-closes on submit before the transition + chat phase takes over. window.lpStartFromHero = function () { const modal = document.getElementById('lpModalRoot'); const form = document.getElementById('lpForm'); if (!modal || !form) return; form.style.display = ''; modal.classList.add('active'); // Lock background scroll so the modal feels like a popup document.body.style.overflow = 'hidden'; if (currentPhase !== 'chat' && currentPhase !== 'transition') currentPhase = 'form'; setStep(currentStep || 1); saveState(); // Focus the first empty contact field for fast typing setTimeout(() => { const firstEmpty = ['iName','iPhone','iEmail','iAddr'] .map(id => document.getElementById(id)) .find(el => el && !el.value); if (firstEmpty) firstEmpty.focus(); }, 250); }; window.lpCloseModal = function () { const modal = document.getElementById('lpModalRoot'); if (!modal) return; modal.classList.remove('active'); document.body.style.overflow = ''; }; // Click outside the form card → close modal (function bindModalDismiss() { const modal = document.getElementById('lpModalRoot'); if (modal) { modal.addEventListener('click', function (e) { if (e.target === modal) lpCloseModal(); }); } document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && modal && modal.classList.contains('active')) lpCloseModal(); }); })(); // ── Restore state on load if we have a recent session ──────────────────── function restoreFromSaved() { const saved = loadState(); try { console.log('[lpWidget] restoreFromSaved →', saved ? { step: saved.currentStep, phase: saved.currentPhase, hasName: !!saved.fd?.firstName } : 'no saved state'); } catch {} if (!saved) return; // no saved state → leave hero visible (default) Object.assign(fd, saved.fd || {}); currentStep = saved.currentStep || 1; if (currentStep > 2) currentStep = 2; // clamp — form is now 2 steps currentPhase = saved.currentPhase || 'form'; if (Array.isArray(saved.history)) { history.length = 0; history.push.apply(history, saved.history); } clientId = saved.clientId || null; jobId = saved.jobId || null; // Re-tick service cards (now on step 2) document.querySelectorAll('#lpS2 .lp-pick').forEach(btn => { if ((fd.services || []).indexOf(btn.dataset.val) > -1) btn.classList.add('sel'); }); // Re-fill contact inputs (step 1) and the optional notes textarea (step 2) const nameEl = document.getElementById('iName'); const phoneEl = document.getElementById('iPhone'); const emailEl = document.getElementById('iEmail'); const addrEl = document.getElementById('iAddr'); const notesEl = document.getElementById('iNotes'); if (nameEl) nameEl.value = fd.firstName || ''; if (phoneEl) phoneEl.value = fd.phone || ''; if (emailEl) emailEl.value = fd.email || ''; if (addrEl) addrEl.value = fd.address || ''; if (notesEl) notesEl.value = fd.notes || ''; if (currentPhase === 'chat') { // User finished the form earlier — drop the hero, show chat directly. const heroEl = document.getElementById('lpHero'); if (heroEl) { heroEl.classList.remove('active'); heroEl.style.display = 'none'; } document.getElementById('lpForm').style.display = 'none'; document.getElementById('lpTransition').style.display = 'none'; document.getElementById('lpChat').classList.add('active'); const msgs = document.getElementById('chatMsgs'); const typing = document.getElementById('typing'); history.forEach(m => { const d = document.createElement('div'); d.className = 'msg ' + (m.role === 'user' ? 'usr' : 'bot'); d.innerHTML = ''; msgs.insertBefore(d, typing); }); msgs.scrollTop = msgs.scrollHeight; } else if (currentPhase === 'transition') { // User hit submit, page reloaded before chat opened — jump straight to chat. currentPhase = 'chat'; const heroEl = document.getElementById('lpHero'); if (heroEl) { heroEl.classList.remove('active'); heroEl.style.display = 'none'; } document.getElementById('lpForm').style.display = 'none'; document.getElementById('lpChat').classList.add('active'); document.getElementById('typing').classList.add('show'); callEstimate(''); } else { // Mid-form on a fresh page load: hero stays visible, modal is closed. // User clicks the CTA again to resume — fields are already pre-filled // from the assignments above. setStep just preps the right tab. setStep(currentStep); } } // Manual reset (useful for debugging: call lpReset() in console) window.lpReset = function () { clearState(); location.reload(); }; restoreFromSaved(); })();