// Onboarding wizard shell — manages step state, persists answers, renders the right step.
function Onboarding({ prefillData, initialService, initialStep } = {}) {
const [service, setService] = React.useState(() => {
if (initialService) {
try { localStorage.setItem('hp-owner-service', initialService); } catch {}
return initialService;
}
try {
const sp = new URLSearchParams(window.location.search).get('s');
if (sp) { localStorage.setItem('hp-owner-service', sp); return sp; }
return localStorage.getItem('hp-owner-service') || null;
} catch { return null; }
});
const [pickerOpen, setPickerOpen] = React.useState(() => {
if (initialService) return false;
try {
const sp = new URLSearchParams(window.location.search).get('s');
return !sp && !localStorage.getItem('hp-owner-service');
} catch { return true; }
});
const [answers, setAnswers] = React.useState(() => {
let base = {};
try { base = JSON.parse(localStorage.getItem('hp-onboarding-answers') || '{}'); } catch {}
if (prefillData) {
const stepMap = { welcome: 'welcome', certs: 'certs', services: 'services', voice: 'voice' };
for (const [key, patch] of Object.entries(prefillData)) {
const stepId = stepMap[key];
if (!stepId || !patch || typeof patch !== 'object') continue;
const existing = base[stepId] || {};
const safe = Object.fromEntries(Object.entries(patch).filter(([k, v]) => v != null && !existing[k]));
if (Object.keys(safe).length > 0) base[stepId] = { ...existing, ...safe };
}
}
return base;
});
React.useEffect(() => {
try { localStorage.setItem('hp-onboarding-answers', JSON.stringify(answers)); } catch {}
}, [answers]);
const [stepIdx, setStepIdx] = React.useState(() => {
if (initialStep != null) return initialStep;
try { return parseInt(localStorage.getItem('hp-onboarding-step') || '0', 10); } catch { return 0; }
});
React.useEffect(() => {
try { localStorage.setItem('hp-onboarding-step', String(stepIdx)); } catch {}
window.scrollTo({ top: 0, behavior: 'smooth' });
}, [stepIdx]);
const [submitting, setSubmitting] = React.useState(false);
const [submitted, setSubmitted] = React.useState(false);
const partialSavedRef = React.useRef(false);
const _SB_URL = 'https://xbckptknojjqrurjxhlq.supabase.co';
const _SB_HDR = {
'Content-Type': 'application/json',
'apikey': 'sb_publishable_QunIi9f_LeCR0vbbgqR7Gw_N8nQoexd',
'Authorization': 'Bearer sb_publishable_QunIi9f_LeCR0vbbgqR7Gw_N8nQoexd',
};
// Auto-save partial lead to Supabase + email when user advances past welcome step
React.useEffect(() => {
if (stepIdx > 0 && !partialSavedRef.current) {
const w = answers.welcome || {};
if (w.email) {
partialSavedRef.current = true;
const existingId = (() => { try { return localStorage.getItem('hp-operator-id'); } catch { return null; } })();
if (existingId) {
fetch(`${_SB_URL}/rest/v1/operators?id=eq.${existingId}`, {
method: 'PATCH', headers: _SB_HDR,
body: JSON.stringify({ email: w.email, company: w.dba || w.company || null, trade: service || null, status: 'partial' }),
}).catch(() => {});
} else {
fetch(`${_SB_URL}/rest/v1/operators`, {
method: 'POST', headers: { ..._SB_HDR, 'Prefer': 'return=representation' },
body: JSON.stringify({
email: w.email, owner_name: w.ownerName || null,
company: w.dba || w.company || null, trade: service || null,
city: w.city ? `${w.city}${w.state ? ', ' + w.state : ''}` : null,
phone: w.phone || null, plan_tier: 'estimates', status: 'partial',
}),
})
.then(r => r.ok ? r.json() : null)
.then(data => { if (data?.[0]?.id) { try { localStorage.setItem('hp-operator-id', data[0].id); } catch {} } })
.catch(() => {});
}
fetch('/api/send-onboarding', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'partial', service, answers }),
}).catch(() => {});
}
}
}, [stepIdx]);
const handleSubmit = async () => {
setSubmitting(true);
const w = answers.welcome || {};
const existingOpId = (() => { try { return localStorage.getItem('hp-operator-id'); } catch { return null; } })();
const payload = {
email: w.email || null,
owner_name: w.ownerName || null,
company: w.dba || w.company || null,
trade: service || null,
city: w.city ? `${w.city}${w.state ? ', ' + w.state : ''}` : null,
phone: w.phone || null,
plan_tier: 'estimates',
onboarding_answers: answers,
status: 'pending',
};
try {
if (existingOpId) {
await fetch(`${_SB_URL}/rest/v1/operators?id=eq.${existingOpId}`, {
method: 'PATCH', headers: _SB_HDR, body: JSON.stringify(payload),
});
} else {
const res = await fetch(`${_SB_URL}/rest/v1/operators`, {
method: 'POST', headers: { ..._SB_HDR, 'Prefer': 'return=representation' },
body: JSON.stringify(payload),
});
if (res.ok) {
const [op] = await res.json();
if (op?.id) { try { localStorage.setItem('hp-operator-id', op.id); } catch {} }
}
}
} catch {}
fetch('/api/send-onboarding', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'wizard', service, answers }),
}).catch(() => {});
try { localStorage.removeItem('hp-onboarding-answers'); localStorage.removeItem('hp-onboarding-step'); } catch {}
setSubmitting(false);
setSubmitted(true);
};
const STEPS = window.ONBOARDING_STEPS_V2 || ONBOARDING_STEPS;
const config = service ? getOnboardingConfig(service) : null;
const step = STEPS[stepIdx];
const total = STEPS.length;
const handlePick = (name) => {
setService(name);
try { localStorage.setItem('hp-owner-service', name); } catch {}
setPickerOpen(false);
};
const update = (patch) => setAnswers(prev => ({ ...prev, [step.id]: { ...(prev[step.id] || {}), ...patch } }));
const get = (key, fallback) => (answers[step.id] || {})[key] ?? fallback;
// Applies prefill data to multiple steps at once — called from StepWelcome after web scrape
const prefillAll = React.useCallback((patches) => {
setAnswers(prev => {
const next = { ...prev };
for (const [stepId, patch] of Object.entries(patches)) {
// Only fill fields the user hasn't already typed into
const existing = prev[stepId] || {};
const safe = Object.fromEntries(
Object.entries(patch).filter(([k, v]) => v != null && !existing[k])
);
if (Object.keys(safe).length > 0) next[stepId] = { ...existing, ...safe };
}
return next;
});
}, []);
if (submitted) {
const bizName = (answers.welcome || {}).dba || (answers.welcome || {}).company || '';
return (
{bizName ? `${bizName} is` : 'You\'re'} in the queue.
Application received for {service} instant estimates. Someone from our team will reach out within 24 hours to confirm your setup and schedule your install call.
Real human, not a bot. We configure the system specifically for your trade, crew size, and the way you close jobs.
Back to HomePro
);
}
return (
setPickerOpen(false) : null} current={service}/>
setPickerOpen(true)}/>
setStepIdx(i)}/>
setStepIdx(Math.max(0, stepIdx-1))} onNext={() => setStepIdx(Math.min(total-1, stepIdx+1))} onSubmit={handleSubmit} submitting={submitting}/>
);
}
/* ============== NAV ============== */
function OnboardingNav({ config, onSwitch }) {
return (
Install
{config && (
Trade ·
{config.serviceName}
switch
)}
);
}
/* ============== PROGRESS BAR ============== */
function OnboardingProgress({ steps, stepIdx, onJump }) {
return (
{steps.map((s, i) => {
const done = i < stepIdx;
const active = i === stepIdx;
return (
done && onJump(i)} style={{ flex:1, cursor: done ? 'pointer' : 'default', minWidth:0 }}>
{String(i+1).padStart(2,'0')} {s.title}
);
})}
);
}
/* ============== HEADER (per step) ============== */
function OnboardingHeader({ stepIdx, total, step, config }) {
return (
Step {stepIdx+1} of {total}
{config &&
Trade · {config.serviceName} }
{step.heading}
{step.sub}
);
}
/* ============== FOOTER (back/next) ============== */
function OnboardingFooter({ stepIdx, total, onBack, onNext, onSubmit, submitting }) {
const isLast = stepIdx === total - 1;
return (
← Back
{stepIdx + 1} / {total} · {stepIdx > 0 ? 'auto-saved' : 'saved'}
{isLast
? (submitting ? 'Sending…' : <> Submit application )
: <>Continue
);
}
/* Body dispatcher */
function OnboardingStepBody({ stepId, config, get, update, answers, prefillAll }) {
if (!config) return (
Pick your trade to get started.
The whole system — fields, pricing, intake questions — configures around your specific trade.
);
if (stepId === 'welcome') return ;
if (stepId === 'certs') return ;
if (stepId === 'services') return ;
if (stepId === 'equipment') return ;
if (stepId === 'pricing') return ;
if (stepId === 'fields') return ;
if (stepId === 'history') return ;
if (stepId === 'intake') return ;
if (stepId === 'voice') return ;
if (stepId === 'playbook') return ;
if (stepId === 'connect') return ;
if (stepId === 'market') return ;
if (stepId === 'review') return ;
return null;
}
Object.assign(window, { Onboarding });