// Desert booking flow — branching: returning vs new client.
// Returning: 1 step → fast-track to Square.
// New: full intake — service, current/desired length, inspiration tags, photo upload, contact.
const { useState, useEffect, useRef, useMemo } = React;
const SERVICE_OPTIONS = [
{ id: 'lived-in', label: 'Lived-In Color', sub: 'Soft, grown-out balayage', icon: '✦' },
{ id: 'blonding', label: 'Soft Blonding', sub: 'Hand-painted highlights', icon: '☼' },
{ id: 'pixie', label: 'Pixie / Cut', sub: 'Short to long, shaped', icon: '✂' },
{ id: 'refresh', label: 'Color Refresh', sub: 'Glaze + tone-up', icon: '⟳' },
{ id: 'correction', label: 'Color Correction', sub: 'Re-do, lift, fix', icon: '◈' },
{ id: 'bridal', label: 'Bridal / Event', sub: 'Up-do or styling', icon: '◉' },
];
const LENGTHS = [
{ id: 'pixie', label: 'Pixie', viz: 18 },
{ id: 'short', label: 'Short / Bob', viz: 36 },
{ id: 'mid', label: 'Shoulder', viz: 60 },
{ id: 'long', label: 'Long', viz: 90 },
{ id: 'verylong', label: 'Very long', viz: 120 },
];
const VIBES = [
'Sun-kissed', 'Bright blonde', 'Honey', 'Caramel', 'Espresso',
'Copper', 'Rooty', 'Money-piece', 'Soft contrast', 'Lived-in',
'Cool tone', 'Warm tone', 'Low maintenance', 'Bold change',
];
const SQUARE_URL = 'https://book.squareup.com/appointments/mdmbjuycc1qgg2/location/LM3X7DAVNJ86M/services';
// ── Booking flow root ──────────────────────────────────────────────────
function BookingFlow({ palette, fonts }) {
const [step, setStep] = useState(0);
const [direction, setDirection] = useState(1);
const [data, setData] = useState({
returning: null,
service: null,
currentLength: null,
desiredLength: null,
vibes: [],
photos: [],
source: null,
sourceDetail: '',
name: '',
phone: '',
note: '',
});
// Branching path. step indices and totalSteps depend on returning value.
// returning === true: [returning] → [returning_handoff]
// returning === false: [returning] → [service] → [length] → [vibe] → [photos] → [source] → [contact] → [done]
const isReturning = data.returning === true;
const totalSteps = isReturning ? 2 : 8;
const [submitting, setSubmitting] = useState(false);
const [submitError, setSubmitError] = useState('');
const update = (k, v) => setData(d => ({ ...d, [k]: v }));
const toggleVibe = (v) => setData(d => ({
...d, vibes: d.vibes.includes(v) ? d.vibes.filter(x => x !== v) : [...d.vibes, v],
}));
const back = () => { setDirection(-1); setStep(s => Math.max(s - 1, 0)); };
const next = async () => {
if (!isReturning && step === 6) {
setSubmitting(true);
setSubmitError('');
try {
const res = await fetch('/api/booking', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
returning: data.returning,
service: data.service,
currentLength: data.currentLength,
desiredLength: data.desiredLength,
vibes: data.vibes,
photos: data.photos.map(p => p.name || 'photo').slice(0, 10),
source: data.source,
sourceDetail: data.sourceDetail,
name: data.name,
phone: data.phone,
email: data.email,
notes: data.note,
}),
});
if (!res.ok) throw new Error(`Submit failed (${res.status})`);
} catch (e) {
setSubmitError(e.message || 'Could not send your request. Please call (833) 352-1692.');
setSubmitting(false);
return;
}
setSubmitting(false);
}
setDirection(1);
setStep(s => s + 1);
};
const canProceed = useMemo(() => {
if (step === 0) return data.returning !== null;
if (isReturning) return true;
if (step === 1) return !!data.service;
if (step === 2) return !!data.currentLength && !!data.desiredLength;
if (step === 3) return data.vibes.length > 0;
if (step === 4) return true; // photos optional
if (step === 5) return !!data.source; // source required (it's a tap-to-pick)
if (step === 6) return data.name.trim().length > 1 && data.phone.trim().length >= 7;
return true;
}, [step, data, isReturning]);
const isLastInputStep = isReturning ? step === 0 : step === 6;
const showFooter = step < totalSteps - 1;
const C = palette;
const FF = fonts;
return (
{ update('returning', v); setTimeout(() => { setDirection(1); setStep(1); }, 380); }} />
{/* Returning fast-track */}
{isReturning && (
)}
{/* New client path */}
{!isReturning && data.returning === false && <>
}
{showFooter && step > 0 && (
)}
);
}
// ── Footer controls ────────────────────────────────────────────────────
function FooterControls({ step, total, canProceed, onBack, onNext, isLast, submitting, submitError, C, FF }) {
return (
{submitError && (
{submitError}
)}
{Array.from({length: total - 1}).map((_, i) => (
))}
✦ Reserve your visit
{String(step + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
);
}
// ── Step shell ─────────────────────────────────────────────────────────
function StepShell({ active, direction, children }) {
const [render, setRender] = useState(active);
useEffect(() => {
if (active) setRender(true);
else { const t = setTimeout(() => setRender(false), 700); return () => clearTimeout(t); }
}, [active]);
if (!render && !active) return null;
return (
{children}
);
}
// ── STEP 0: Returning or new ──────────────────────────────────────────
function ReturningStep({ data, update, C, FF, onPick }) {
const opts = [
{ v: true, title: 'Welcome back', sub: 'I’ll send you straight to the calendar.', emoji: '☼' },
{ v: false, title: 'First time', sub: 'Let’s talk through your hair first.', emoji: '✦' },
];
return (
Have we met
before?
Either way is good — just pointing you in the right direction.
{opts.map((o, i) => {
const selected = data.returning === o.v;
return (
);
})}
);
}
// ── Returning handoff to Square ────────────────────────────────────────
function ReturningHandoff({ C, FF }) {
const [redirecting, setRedirecting] = useState(false);
return (
☼
Welcome back, friend.
Your formula is on file. Pick a day on the calendar and I’ll see you soon.
setRedirecting(true)}
style={{
display: 'inline-flex', alignItems: 'center', gap: 12,
background: C.ink, color: C.cream, textDecoration: 'none',
padding: '20px 36px', borderRadius: 999,
fontFamily: FF.body, fontSize: 14, letterSpacing: '0.06em', fontWeight: 500,
boxShadow: `0 16px 40px -12px ${C.ink}aa`,
animation: 'bookFadeUp .6s cubic-bezier(.2,.7,.3,1) .65s both',
transition: 'transform .25s',
}}
onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
Open Square calendar →
Desert Lounge Salon · 75 N 100 E · Wed & Fri 9–5
);
}
// ── STEP 1 (new): Service ─────────────────────────────────────────────
function ServiceStep({ data, update, C, FF }) {
return (
What brings you
in?
Pick the closest fit — we’ll narrow it down at consult.
{SERVICE_OPTIONS.map((o, i) => {
const selected = data.service === o.id;
return (
);
})}
);
}
// ── STEP 2 (new): Length — current + desired ───────────────────────────
function LengthStep({ data, update, C, FF }) {
return (
Where are we starting,
where do you want to go?
Approximate is fine.
update('currentLength', v)} C={C} FF={FF} />
update('desiredLength', v)} C={C} FF={FF} />
);
}
function LengthRow({ label, value, onPick, C, FF }) {
return (
{label}
{LENGTHS.map((l, i) => {
const selected = value === l.id;
return (
);
})}
);
}
// ── STEP 3 (new): Vibe / inspiration tags ──────────────────────────────
function VibeStep({ data, toggleVibe, C, FF }) {
return (
Pick the words
that feel right.
Tap as many as resonate — three or four is plenty.
{VIBES.map((v, i) => {
const selected = data.vibes.includes(v);
return (
);
})}
Selected
{data.vibes.length === 0 ? nothing yet : data.vibes.join(' · ')}
);
}
// ── STEP 4 (new): Photo upload ─────────────────────────────────────────
function PhotoStep({ data, update, C, FF }) {
const inputRef = useRef(null);
const [drag, setDrag] = useState(false);
const handleFiles = (files) => {
const arr = Array.from(files).slice(0, 8);
const previews = arr.map(f => ({
name: f.name,
url: URL.createObjectURL(f),
}));
update('photos', [...data.photos, ...previews].slice(0, 8));
};
return (
Show me your
inspiration.
Pinterest screenshots, saved Instagrams, anything that’s caught your eye. Optional — you can also send these later.
{ e.preventDefault(); setDrag(true); }}
onDragLeave={() => setDrag(false)}
onDrop={(e) => { e.preventDefault(); setDrag(false); handleFiles(e.dataTransfer.files); }}
onClick={() => inputRef.current?.click()}
style={{
background: drag ? C.sun + '66' : C.cream + '99',
border: `2px dashed ${drag ? C.terra : C.terra + '55'}`,
borderRadius: 24, padding: '40px 20px',
textAlign: 'center', cursor: 'pointer',
transition: 'all .25s',
transform: drag ? 'scale(1.01)' : 'scale(1)',
}}>
📎
Drop reference photos here
or click to browse · up to 8 images
handleFiles(e.target.files)}
/>
{data.photos.length > 0 && (
{data.photos.map((p, i) => (
))}
)}
);
}
// ── STEP 5 (new): Contact ─────────────────────────────────────────────
function ContactStep({ data, update, C, FF }) {
return (
Almost there
—
I’ll be in touch within 24 hours to confirm a time.
update('name', v)} C={C} FF={FF} />
update('phone', v)} C={C} FF={FF} />
update('note', v)} C={C} FF={FF} multiline />
);
}
function FloatField({ label, value, onChange, C, FF, multiline }) {
const [focus, setFocus] = useState(false);
const active = focus || value.length > 0;
const Tag = multiline ? 'textarea' : 'input';
return (
);
}
// ── STEP 5 (new): How did you find me? ────────────────────────────────
const SOURCE_OPTIONS = [
{ id: 'instagram', label: 'Instagram', sub: '@harleeshowalter', glyph: '◐' },
{ id: 'pinterest', label: 'Pinterest', sub: 'Pinned somewhere lovely', glyph: '◓' },
{ id: 'google', label: 'Google search', sub: 'Old-fashioned and reliable', glyph: '◑' },
{ id: 'ai', label: 'An AI assistant', sub: 'ChatGPT, Claude, Gemini…', glyph: '✦' },
{ id: 'referral', label: 'A friend told me', sub: 'Word of mouth — the best.', glyph: '✿' },
{ id: 'walked-by', label: 'I walked by the studio', sub: 'Hi, neighbor.', glyph: '◌' },
{ id: 'other', label: 'Somewhere else', sub: 'Tell me where ↓', glyph: '∗' },
];
const AI_OPTIONS = ['ChatGPT', 'Claude', 'Gemini', 'Perplexity', 'Copilot', 'Other / not sure'];
function SourceStep({ data, update, C, FF }) {
const isAI = data.source === 'ai';
const isOther = data.source === 'other';
return (
Last little thing —
how’d you find me?
Just curious. It helps me know where to spend my afternoons.
{SOURCE_OPTIONS.map((opt, i) => {
const selected = data.source === opt.id;
return (
);
})}
{/* AI follow-up */}
{isAI && (
✦ Which one?
{AI_OPTIONS.map((ai, i) => {
const picked = data.sourceDetail === ai;
return (
);
})}
That’s genuinely fascinating — thank you for telling me.
)}
{/* Other text input */}
{isOther && (
Where?
update('sourceDetail', e.target.value)}
placeholder="A magazine, a podcast, a billboard…"
style={{
width: '100%', padding: '12px 16px',
fontFamily: FF.display, fontStyle: 'italic', fontSize: 17,
background: 'transparent', border: 'none',
borderBottom: `1px solid ${C.terra}55`,
color: C.ink, outline: 'none',
}}
/>
)}
);
}
// ── STEP 7 (new): Done ────────────────────────────────────────────────
function DoneStep({ data, C, FF }) {
const service = SERVICE_OPTIONS.find(s => s.id === data.service);
const cur = LENGTHS.find(l => l.id === data.currentLength);
const goal = LENGTHS.find(l => l.id === data.desiredLength);
return (
You’re in,{' '}
{data.name.split(' ')[0] || 'friend'}.
I’ll text you within 24 hours.
Request №
HS-{Math.floor(Math.random()*9000+1000)}
|
|
{data.vibes.length > 0 &&
|
}
|
|
Desert Lounge Salon · 75 N 100 E · St. George, UT
);
}
function Row({ k, v, C, FF, multiline }) {
return (
{k}
{v}
);
}
window.BookingFlow = BookingFlow;