);
}
// Home size — asked on every path and stored on the lead. It only sets the price
// when the volume answer is the hand-off; otherwise it is for the record.
function HomeSizeBlock({ homeSize, onHomeSizeChange }) {
return (
<>
If you pictured it all stacked in a garage, how much space would it take?
{Q.volume.map((o) => onVolumeChange(o.id)} />
)}
);
}
// The move-in path asks two things, one screen each: the home, then the pile.
// Home size is for the record — it never selects a price.
function StepMovedSize({ homeSize, onHomeSizeChange }) {
return (
<>
First — how big is your new place?
A rough number is fine. This helps us plan the crew and the truck — it doesn't change your price.
Packing materials, furniture you don't want, whatever the previous owner left — all of it together. If you pictured it stacked in a garage, how much space would it take?
You mentioned {heavyText}. Your instant estimate of {priceText} covers
the normal household junk. Heavy/special items are quoted separately from photos so we can get you an
honest, flat number and avoid any driveway surprises.
{!result.needsWalkthrough &&
Send us a few quick photos on the next step and we'll text you one flat quote for everything.
}
:
result.estimate &&
Jobs like this are considered a {result.tier} at ${fmtNum(result.estimate)}. To confirm and get you a guaranteed price, you can lock it in below.
}
{result.needsWalkthrough ?
<>
{result.rangeHigh && <>Projects this size usually land between ${fmtNum(result.rangeLow)}–${fmtNum(result.rangeHigh)}. }
We don't guess on jobs this big, because that's how driveway haggling starts – and we hate that as much as you.
Instead, we do a quick walkthrough and give you one project price with a do‑not‑exceed cap for the whole job. The final bill will not go over that number.
:
result.rangeLow &&
<>
{result.rangeHigh ?
<>Projects this size usually run ${fmtNum(result.rangeLow)}–${fmtNum(result.rangeHigh)}. :
<>Jobs this size start at ${fmtNum(result.rangeLow)}. We set the exact number — and the cap it won't go past — at the walkthrough.}
We don't guess on jobs this size because that's how driveway haggling starts — and we hate that as much as you.
{result.caveat ? result.caveat :
<>Send us a few quick photos and we'll send you one One‑Price that won't change as long as the photos match what we see on site.}
}
{result.needsWalkthrough ?
Get your exact price at a walkthrough
Scheduling a quick walkthrough doesn't obligate you to book. We look at the home, then send one project price with a do‑not‑exceed cap — the final price won't go past it.
A quick, no‑pressure 15–20 minute walkthrough — in person or by video.
You get one project price with a hard do not exceed cap in writing.
No driveway haggling, no "actually it's double," ever.
Drop your details on the next step and we'll text you to line up a 15–20 minute slot that works for you.
:
Lock in your One‑Price Guarantee
One flat price in writing with do not exceed capbefore we schedule.
If the photos match, the price will not change when we arrive.
No driveway haggling, no "actually it's double" — ever.
Lock in your price by
Enter your info on the next screen.
We text you asking for a few photos.
We confirm your price and cap the project cost.
}
{result.needsWalkthrough ?
<>Doesn't obligate you to book — it just gets you a firm price with a hard cap. :
<>Doesn't obligate you to book — we just confirm and cap your project cost.}
{result.needsWalkthrough ?
<>Whether you're home or not right now, we'll send a quick text so you can schedule a walkthrough whenever it's convenient. :
<>Whether you're home or not right now, we'll send a quick text you can reply to with photos whenever it's convenient.}
{needsWalkthrough ? <>Let's set up your walkthrough. : <>Who should we reach out to?}
{needsWalkthrough ?
<>Drop your info and we'll text you a few times that work — pick one and you're set. :
<>Drop your info and we'll text you — just reply with a few photos when it's convenient and you're set.}
{errors.name ?
{errors.name} :
{needsWalkthrough ? "So we know who we're meeting." : "So we know who to text."}
}
onContactChange({ ...contact, phone: formatPhone(e.target.value) })} />
{errors.phone ?
{errors.phone} :
{needsWalkthrough ? "We'll text you here to find a walkthrough time — never sold, never spammed." : "We'll text you here so you can reply with photos — never sold, never spammed."}
}
{errors.zip ?
{errors.zip} :
To make sure you're in our service area.
}
{errors.email &&
{errors.email}
}
{errors.hear ?
{errors.hear} :
Helps us know what's working.
}
{contact.hear === "realtor" &&
So we can thank them for sending you our way.
}
{needsWalkthrough ?
<>We'll text you to find a time that works, then walk the home with you — no pressure, and scheduling doesn't obligate you to book. You'll get one project price with a do‑not‑exceed cap. The final price won't go past it. :
<>We'll text you so you can reply with a few photos, then we'll send back your locked‑in One‑Price quote. If we ever mis‑judge a job from your photos, that's on us — not you. The price stands.}
{Object.keys(errors).length > 0 &&
By providing your mobile number, you agree to receive text messages from Tossit about your quote, scheduling, and your request. Providing a number is optional and is not a condition of purchase. Message frequency varies. Msg & data rates may apply. Reply STOP to opt out, HELP for help.
See our Privacy Policy and Messaging Terms.
);
}
// ---------------------------------------------------------------
// Unique quote reference — stamped once at lock-in.
// Timestamp base (collision-proof over time) + random tail (collision-proof
// within the same instant). Ambiguous characters (0/O, 1/I) omitted so it's
// easy to read back over the phone.
// ---------------------------------------------------------------
function makeQuoteRef() {
const chars = "ABCDEFGHJKMNPQRSTUVWXYZ23456789";
const rand = (n) => Array.from({ length: n }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
const stamp = Date.now().toString(36).toUpperCase().slice(-4);
return `TS-${stamp}-${rand(4)}`;
}
// ---------------------------------------------------------------
// Thank-you screen
// ---------------------------------------------------------------
function ThankYou({ answers, contact, quoteRef }) {
const result = computeResult(answers);
return (
You're all set on our end.
{result.needsWalkthrough ?
<>We just texted {formatPhone(contact.phone) || "your number"} with a few times that work. Reply with the one that
suits you and we'll come take a look — no pressure, no obligation to book. :
<>We just texted {formatPhone(contact.phone) || "your number"}. Reply with a few photos and we'll send back
your flat One‑Price quote.}
Hold onto quote {quoteRef || "—"} — reference it any time you reach out and we'll pull up
everything. {result.needsWalkthrough ?
<>Need a different time? Reply to the text — it's the fastest way to reach a person here. :
<>Need to change something? Reply to the text — it's the fastest way to reach a person here.}
);
}
// ---------------------------------------------------------------
// Wizard shell
// ---------------------------------------------------------------
function Survey() {
const [step, setStep] = React.useState(0);
const didPreviewJump = React.useRef(false);
const [submitted, setSubmitted] = React.useState(false);
const [errors, setErrors] = React.useState({});
// Real, unique quote reference. Null until the customer locks in on the
// capture screen — that's the moment the quote actually posts.
const [quoteRef, setQuoteRef] = React.useState(null);
// Preview shortcut: Quote.html?preview=oneprice (flat price) or ?preview=walkthrough
// jumps straight to the estimate screen with a representative answer set.
// Editing/QA only — never linked from the site.
const PREVIEW = new URLSearchParams(window.location.search).get("preview");
const PREVIEW_ANSWERS = {
oneprice: { reason: "reset", areas: ["garage"], volume: "q2", heavy: [], access: "easy", timing: "soon", homeSize: null, clearout: null, fullness: null },
movedbay: { reason: "moved", areas: [], volume: "q4", heavy: [], access: "easy", timing: "soon", homeSize: "standard", clearout: null, fullness: null },
walkthrough: { reason: "list", areas: [], volume: null, heavy: [], access: "easy", timing: "soon", homeSize: "large", clearout: "p100", fullness: null },
moved: { reason: "moved", areas: [], volume: "q3", heavy: [], access: "easy", timing: "soon", homeSize: "standard", clearout: null, fullness: null }
};
const IS_PREVIEW = !!PREVIEW_ANSWERS[PREVIEW];
const [answers, setAnswers] = React.useState(
PREVIEW_ANSWERS[PREVIEW] || {
reason: null,
areas: [],
volume: null,
heavy: [],
access: null,
timing: null,
homeSize: null,
clearout: null,
fullness: null
});
const [contact, setContact] = React.useState({
name: "", phone: "", email: "", zip: "", hear: ""
});
// Re-render when the live pricing table or question set finishes loading.
usePricingTable();
useQuestions();
// "Just moved in" and "Getting ready to list" run shorter, size-based branches,
// but every flow asks about heavy/specialty items before access.
const STEPS =
answers.reason === "moved" ? ["reason", "movedSize", "movedVolume", "heavy", "access", "estimate", "capture"] :
answers.reason === "list" ? ["reason", "listScope", "heavy", "access", "estimate", "capture"] :
answers.reason === "estate" ? ["reason", "estateScope", "heavy", "access", "estimate", "capture"] :
["reason", "scope", "heavy", "access", "estimate", "capture"];
const TOTAL = STEPS.length;
const current = STEPS[Math.min(step, STEPS.length - 1)] || "reason";
const set = (patch) => setAnswers((a) => ({ ...a, ...patch }));
// Switching paths clears every branch-specific answer. Otherwise a leftover
// home size from an abandoned flow can price a job off questions the customer
// was never shown.
const setReason = (reason) =>
setAnswers((a) => a.reason === reason ? a : {
...a, reason, volume: null, homeSize: null, clearout: null, fullness: null
});
// Fathom conversion events. trackOnce() de-dupes per session, so moving
// back and forth through the estimator never double-counts.
React.useEffect(() => {
if (window.trackOnce) window.trackOnce("estimate_started");
}, []);
React.useEffect(() => {
if (IS_PREVIEW && !didPreviewJump.current) {
const i = STEPS.indexOf("estimate");
if (i < 0) return;
didPreviewJump.current = true;
setStep(i);
}
}, [PREVIEW]);
// Result screen reached — the price range is on screen.
React.useEffect(() => {
if (current === "estimate" && window.trackOnce) window.trackOnce("estimate_completed");
}, [current]);
const goTo = (n) => {
setStep(() => Math.max(0, Math.min(n, TOTAL - 1)));
window.scrollTo({ top: 0, behavior: "auto" });
};
// Final submit — from the lead-capture screen. Only the phone is required.
const submitQuote = () => {
const e = {};
if (!contact.name.trim()) e.name = "Let us know who to text.";
if (contact.phone.trim() && contact.phone.replace(/\D/g, "").length < 10) e.phone = "That doesn't look like a full number.";
if (!contact.zip.trim()) e.zip = "We need your zip to confirm you're in our area.";
if (!contact.email.trim()) e.email = "Add an email for your formal quote.";else
if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(contact.email.trim())) e.email = "That doesn't look like a valid email.";
if (!contact.hear) e.hear = "Pick one so we know what's working.";
setErrors(e);
if (Object.keys(e).length) return;
// Mint a fresh, unique number for THIS submit. Never reused from a saved
// session, never persisted — a returning visitor always gets a new one.
const ref = makeQuoteRef();
setQuoteRef(ref);
if (window.dataLayer) window.dataLayer.push({ event: "quote_submitted", quoteRef: ref, answers, contact });
// → send the lead to the CRM (Supabase). Fire-and-forget.
// One result, one price string — the database, Kit, and the on-screen ticket
// all show the same number. Fixed price -> "495"; range -> "2500–5000".
const r = computeResult(answers);
let priceText = "";
if (r.estimate != null) priceText = String(r.estimate);
else if (r.rangeLow != null && r.rangeHigh != null) priceText = `${r.rangeLow}–${r.rangeHigh}${r.rangeOpen ? "+" : ""}`;
else if (r.rangeLow != null) priceText = `${r.rangeLow}+`;
if (window.sb) {
const row = {
source_page: 'Quote.html',
estimate_no: ref,
name: contact.name,
phone: contact.phone,
email: contact.email || null,
zip: contact.zip || null,
sms_consent: !!contact.phone.trim(),
hear: contact.hear,
source_ref: contact.realtor || null,
reason: answers.reason,
areas: answers.areas && answers.areas.length ? answers.areas : null,
volume: answers.volume,
home_size: answers.homeSize,
clearout: answers.clearout,
fullness: answers.fullness,
heavy: answers.heavy && answers.heavy.length ? answers.heavy : null,
access: answers.access,
timing: answers.timing,
quoted_tier: r.tier || null,
quoted_price: (r.estimate ?? r.rangeLow) ?? null,
quoted_low: r.estimate != null ? r.estimate : r.rangeLow ?? null,
quoted_high: r.estimate != null ? r.estimate : r.rangeHigh ?? null,
quoted_range: priceText,
needs_walkthrough: !!r.needsWalkthrough
};
window.sb.from('leads').insert(row).then(({ error }) => {
if (!error) return;
console.error('lead insert', error);
// If the range columns don't exist yet, Postgres rejects the whole row.
// Never lose a lead over a schema gap — retry with the original columns.
const missingColumn = error.code === 'PGRST204' || /column .* does not exist|Could not find the/i.test(error.message || '');
if (!missingColumn) return;
const { quoted_low, quoted_high, quoted_range, needs_walkthrough, ...core } = row;
console.warn('Retrying lead insert without range columns. Add quoted_low, quoted_high, quoted_range, needs_walkthrough to the leads table.');
window.sb.from('leads').insert(core).then(({ error: e2 }) => { if (e2) console.error('lead insert retry', e2); });
});
}
// → send the subscriber to Kit. Providing a mobile number and submitting the
// form is the opt-in for transactional texts (quote, scheduling, reminders).
{
const price = priceText;
fetch('/api/kit-subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email: contact.email,
first_name: (contact.name || '').trim().split(/\s+/)[0] || undefined,
fields: {
quote_reference: ref,
quote_price: price,
project_type: r.tier || '',
needs_walkthrough: r.needsWalkthrough ? 'yes' : 'no'
}
})
}).catch((err) => console.error('kit subscribe', err));
}
setSubmitted(true);
if (window.trackOnce) window.trackOnce(r.needsWalkthrough ? "lead_submitted_walkthrough" : "lead_submitted");
window.scrollTo({ top: 0, behavior: "auto" });
// Clear this session so a returning visitor starts a brand-new quote.
try { localStorage.removeItem("tossit_quote_v1"); } catch {}
};
// Footer Next drives the four question steps (0-3).
const canContinue =
current === "reason" && !!answers.reason ||
current === "scope" && !!answers.volume ||
current === "heavy" && (answers.heavy || []).length > 0 ||
current === "movedSize" && !!answers.homeSize ||
current === "movedVolume" && !!answers.volume ||
current === "listScope" && !!answers.homeSize && !!answers.clearout ||
current === "estateScope" && !!answers.homeSize && !!answers.fullness ||
current === "access" && !!answers.access && !!answers.timing;
const onNext = () => {
setStep((s) => Math.min(s + 1, TOTAL - 1));
window.scrollTo({ top: 0, behavior: "auto" });
};
const onBack = () => {
if (step === 0) {
window.location.href = "index.html";
return;
}
setStep((s) => Math.max(s - 1, 0));
window.scrollTo({ top: 0, behavior: "auto" });
};
// Persist progress (analytics-friendly, also survives a refresh)
React.useEffect(() => {
if (IS_PREVIEW) return;
try {
const saved = localStorage.getItem("tossit_quote_v1");
if (saved) {
const s = JSON.parse(saved);
if (s.answers) setAnswers((a) => ({ ...a, ...s.answers }));
if (s.contact) setContact((c) => ({ ...c, ...s.contact }));
if (typeof s.step === "number") setStep(s.step);
}
} catch {}
}, []);
React.useEffect(() => {
// A preview visit never touches the visitor's real saved session.
if (IS_PREVIEW) return;
// Once submitted, keep the session cleared so returning visitors start fresh.
if (submitted) { try { localStorage.removeItem("tossit_quote_v1"); } catch {} return; }
// The quote number is never persisted — it belongs to the database.
try {localStorage.setItem("tossit_quote_v1", JSON.stringify({ step, answers, contact }));} catch {}
}, [step, answers, contact, submitted]);
if (submitted) {
return (