// Main app — drives one question per page through QUESTIONS list. const { useState, useEffect, useRef, useMemo } = React; function App() { const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS); const [idx, setIdx] = useState(0); const [data, setData] = useState({}); const [submitted, setSubmitted] = useState(false); const [transitioning, setTransitioning] = useState(false); const [direction, setDirection] = useState(1); // Refs so goNext (called from setTimeout in question components) // always reads the *current* data/idx, not a stale closure. const dataRef = useRef(data); const idxRef = useRef(idx); useEffect(() => { dataRef.current = data; idxRef.current = idx; }); useEffect(() => { window.__autoAdvance = t.autoAdvance; }, [t.autoAdvance]); useEffect(() => { document.body.dataset.density = t.density; }, [t.density]); useEffect(() => { document.body.dataset.theme = t.theme || "institutional"; }, [t.theme]); const set = (k, v) => setData((d) => ({ ...d, [k]: v })); const q = QUESTIONS[idx]; const QComponent = window[q.component]; const canContinue = q.validate(data); const isLast = idx === QUESTIONS.length - 1; // Hide external-link distractions (testimonials carousel, social links) // until the user has captured their contact info — otherwise they may // click off to Google/Trustpilot/Instagram before completing the form. const contactCaptured = !!(data.firstName && data.email && data.phone); const showOffPage = contactCaptured || submitted; const animateTo = (i) => { setTransitioning(true); setTimeout(() => { setIdx(i); setTransitioning(false); }, 220); }; // Stable goNext — reads live state via refs so deferred calls // (auto-advance setTimeouts) don't see a stale closure. const goNext = React.useCallback(() => { const i = idxRef.current; const d = dataRef.current; const qq = QUESTIONS[i]; if (!qq.validate(d) && !qq.optional) return; if (i === QUESTIONS.length - 1) { setSubmitted(true); return; } setDirection(1); setTransitioning(true); setTimeout(() => { setIdx(i + 1); setTransitioning(false); }, 220); }, []); const goBack = () => { if (idx === 0) return; setDirection(-1); animateTo(idx - 1); }; // Global Enter handler — supports keyboard-driven Typeform feel. useEffect(() => { const onKey = (e) => { if (e.key === "Enter" && e.target.tagName !== "TEXTAREA") { // Skip if focus is on an inline segmented or a button (they handle their own activation). if (e.target.tagName === "BUTTON") return; // Inputs that already wire onEnter via component prop will fire goNext via that path; // we still want fall-through for select / checkbox. if (e.target.tagName === "INPUT" || e.target.tagName === "SELECT") { // For text inputs, the component-level onEnter handles it. Avoid double-fire. if (e.target.type === "text" || e.target.type === "tel" || e.target.type === "email" || e.target.type === "number") return; } goNext(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [idx, data, canContinue]); // Brand-panel chips const brandAnswers = useMemo(() => { const out = {}; const map = { paying: "Still paying", behind: "Behind", sued: "Sued / COJ", stacked: "Considering stack", }; if (data.situation) out.situation = map[data.situation] || data.situation; if (data.advanceCount) out.advanceCount = data.advanceCount; if (data.balance) out.balance = data.balance; if (data.payment) out.payment = data.payment; if (data.frequency && data.frequency.length) out.frequency = data.frequency; if (data.firstName) out.firstName = `${data.firstName} ${data.lastName || ""}`.trim(); if (data.businessName) out.businessName = data.businessName; if (data.state) out.state = data.state; return out; }, [data]); return ( <>
{!submitted ? ( <>
{q.optional && !canContinue ? ( ) : null}
) : ( )}
setTweak("theme", v)} /> setTweak("density", v)} /> setTweak("autoAdvance", v)} /> setTweak("showTestimonial", v)} /> { if (submitted) { setSubmitted(false); setIdx(0); setData({}); } else { setSubmitted(true); } }} secondary /> ); } // ── Progress bar — section-grouped continuous bar ──────────────────────── function ProgressBar({ questions, current }) { const sections = []; questions.forEach((q, i) => { const last = sections[sections.length - 1]; if (last && last.name === q.section) last.count += 1; else sections.push({ name: q.section, count: 1, start: i }); }); const cur = questions[current]; const sectionIdx = sections.findIndex((s) => s.name === cur.section); const inSectionPos = current - sections[sectionIdx].start; const inSectionTotal = sections[sectionIdx].count; return (
{String(current + 1).padStart(2, "0")} / {String(questions.length).padStart(2, "0")} {cur.section} · {inSectionPos + 1} of {inSectionTotal}
{sections.map((s, si) => (
{Array.from({ length: s.count }).map((_, j) => { const qi = s.start + j; const state = qi < current ? "done" : qi === current ? "active" : "todo"; return
; })}
))}
); } // ── Direction (theme) styles ───────────────────────────────────────────── function DirectionStyles() { return (