// appointments.jsx — the Halcyon Pilates appointment booking widget. // Two-screen flow: // Step 1 — Lines-style service list with a location card on top. // Step 2 — On-page booking with three numbered milestone cards // (instructor → date → time) plus an optional add-ons section. // Date auto-selects the soonest opening for the current // instructor on entry, and re-jumps if the user picks an // instructor whose schedule doesn't cover the active date. // Step 3 — Page-level success confirmation. const { useState: useStateAPT, useMemo: useMemoAPT, useEffect: useEffectAPT, useRef: useRefAPT } = React; const APT_BREAKPOINT = 760; function useAPTMobile() { const [m, setM] = useStateAPT(typeof window !== 'undefined' ? window.innerWidth < APT_BREAKPOINT : false); useEffectAPT(() => { const onResize = () => setM(window.innerWidth < APT_BREAKPOINT); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); return m; } const APT_TODAY = new Date(2026, 4, 20); // Wed May 20, 2026 function addDaysAPT(d, n) { const x = new Date(d); x.setDate(x.getDate() + n); return x; } function sameDayAPT(a, b) { return a.toDateString() === b.toDateString(); } function fmtMoney(n) { return `$${n.toFixed(2)}`; } function fmtDuration(min) { if (min < 60) return `${min} min`; const h = Math.floor(min / 60), r = min % 60; return r ? `${h}h ${r}m` : `${h} hr`; } const APT_WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const APT_WEEKDAYS_LONG = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const APT_MONTHS_LONG = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; // ── Catalog ────────────────────────────────────────────────────── const APT_LOCATION = { shortName: 'Allendale', fullName: 'Halcyon Pilates — Allendale', address: '142 W Allendale Ave, Allendale, NJ 07401', details: 'Free street parking. Entrance on the west side of the building — look for the sage awning. Hours: Mon–Fri 6am–9pm, Sat 8am–4pm, Sun 9am–2pm.', }; const APT_ADD_ONS = { stickySocks: { name: 'Sticky socks', price: 8, duration: 0, description: 'Grippy socks to wear on the reformer or mat. Yours to keep after the session — bring them back next time.', thumbnail: 'https://images.unsplash.com/photo-1586350977771-2a1dba9b6a52?auto=format&fit=crop&w=240&h=240&q=80', }, bottledWater: { name: 'Bottled water', price: 3, duration: 0, description: 'A chilled glass bottle waiting in your room. Pairs well with not running out of breath.', thumbnail: 'https://images.unsplash.com/photo-1523362628745-0c100150b504?auto=format&fit=crop&w=240&h=240&q=80', }, }; const APT_ALL_ADD_ON_IDS = Object.keys(APT_ADD_ONS); const APT_SERVICES = [ { id: 'normatec', category: 'Recovery', name: 'Normatec Boots', duration: 30, price: 45, description: 'Sequential compression boots that flush the legs, knees, and hips. Settle in with a podcast — the system runs through five zones across the session.', thumbnail: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=480&h=320&q=80', addOns: APT_ALL_ADD_ON_IDS, }, { id: 'sauna', category: 'Recovery', name: 'Infrared Sauna', duration: 30, price: 35, description: 'A single-person infrared cabin at 140°F. Recommended after lifting or a long run. Towels, water, and cold rinse included.', thumbnail: 'https://images.unsplash.com/photo-1554504318-1bbb8d4e0470?auto=format&fit=crop&w=480&h=320&q=80', addOns: APT_ALL_ADD_ON_IDS, }, { id: 'cold-plunge', category: 'Recovery', name: 'Cold Plunge', duration: 15, price: 25, description: 'A guided plunge in a 50°F tub. Three rounds with breathwork between — built for nervous-system reset, not endurance.', thumbnail: 'https://images.unsplash.com/photo-1530210124550-912dc1381cb8?auto=format&fit=crop&w=480&h=320&q=80', addOns: APT_ALL_ADD_ON_IDS, }, { id: 'red-light', category: 'Recovery', name: 'Red Light Therapy', duration: 20, price: 30, description: 'Full-body panel session combining red and near-infrared wavelengths. Quiet, warm, and easy to layer onto another service.', thumbnail: 'https://images.unsplash.com/photo-1540206395-68808572332f?auto=format&fit=crop&w=480&h=320&q=80', addOns: APT_ALL_ADD_ON_IDS, }, { id: 'swedish-45', category: 'Massage', name: 'Swedish Massage', duration: 45, price: 95, description: 'A flowing, full-body relaxation massage. Medium pressure throughout, with extra attention on the neck, shoulders, and lower back.', thumbnail: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=480&h=320&q=80', addOns: APT_ALL_ADD_ON_IDS, }, { id: 'deep-tissue-45', category: 'Massage', name: 'Deep Tissue Massage', duration: 45, price: 110, description: 'Targeted, firm pressure on chronically tight areas. Best when you can name the two or three spots that need work going in.', thumbnail: 'https://images.unsplash.com/photo-1519823551278-64ac92734fb1?auto=format&fit=crop&w=480&h=320&q=80', addOns: APT_ALL_ADD_ON_IDS, }, { id: 'swedish-60', category: 'Massage', name: 'Swedish Massage', duration: 60, price: 120, description: 'The long version of our most-booked service. The extra fifteen minutes goes to a slower opening sequence and a deeper close.', thumbnail: 'https://images.unsplash.com/photo-1600334129128-685c5582fd35?auto=format&fit=crop&w=480&h=320&q=80', addOns: APT_ALL_ADD_ON_IDS, }, ]; const APT_GENERIC_PROVIDERS = [ { id: 'any', name: 'First Available', generic: true, bio: 'We\'ll match you with the earliest instructor who has the slot you pick.' }, { id: 'anyF', name: 'Any Female Instructor', generic: true, gender: 'F', bio: 'No preference on the individual — we\'ll book the soonest female instructor available.' }, { id: 'anyM', name: 'Any Male Instructor', generic: true, gender: 'M', bio: 'No preference on the individual — we\'ll book the soonest male instructor available.' }, ]; const APT_PROVIDERS = [ { id: 'marisol', name: 'Marisol Pena', gender: 'F', photo: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&h=200&q=80', bio: 'STOTT-certified instructor with 12 years teaching reformer + mat across NYC studios. Marisol\'s cueing meets you where your body is that day.' }, { id: 'lena', name: 'Lena Ortiz', gender: 'F', photo: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200&h=200&q=80', bio: 'Halcyon founder. A decade of classical pilates and dance training before opening the studio in 2019. Specializes in privates and pre/post-natal work.' }, { id: 'yasmin', name: 'Yasmin Castillo',gender: 'F', photo: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=200&h=200&q=80', bio: 'Athletic reformer programming and post-rehab work, with a background in physical therapy. Bring a towel.' }, { id: 'anika', name: 'Anika Rao', gender: 'F', photo: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=200&h=200&q=80', bio: 'A contemplative, breath-led practice honed through 500-hour yoga training. Anika\'s slow privates are a favorite end to the day.' }, { id: 'dylan', name: 'Dylan Greene', gender: 'M', photo: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&h=200&q=80', bio: 'Sports-oriented reformer work, strong on programming for runners and lifters. Twelve years of teaching experience.' }, { id: 'peter', name: 'Peter Lim', gender: 'M', photo: 'https://images.unsplash.com/photo-1463453091185-61582044d556?auto=format&fit=crop&w=200&h=200&q=80', bio: 'Classical pilates lineage with extra training in clinical bodywork. Gentle but precise — great for first-timers.' }, ]; // ── Availability sim ───────────────────────────────────────────── function aptHash(s) { let h = 0; for (let i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) | 0; } return Math.abs(h); } const APT_ALL_SLOTS = { morning: ['9:00 AM', '9:30 AM', '10:00 AM', '10:15 AM', '10:30 AM', '11:00 AM', '11:30 AM', '11:45 AM'], afternoon: ['12:30 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:15 PM', '2:30 PM', '2:45 PM', '3:00 PM', '4:00 PM'], evening: ['5:30 PM', '6:00 PM', '6:30 PM', '7:00 PM'], }; function slotsForProviderDay(providerId, date) { const dow = date.getDay(); const all = [...APT_ALL_SLOTS.morning, ...APT_ALL_SLOTS.afternoon, ...APT_ALL_SLOTS.evening]; const out = { morning: [], afternoon: [], evening: [] }; const seed = aptHash(`${providerId}|${date.toDateString()}`); const baseRate = (seed % 100) / 100; const dowMult = dow === 0 ? 0.15 : (dow === 6 ? 0.45 : 0.75); const isGeneric = providerId.startsWith('any'); const targetRate = isGeneric ? Math.min(0.95, baseRate * 1.6) : baseRate * dowMult; all.forEach((slot) => { const h = aptHash(`${providerId}|${date.toDateString()}|${slot}`); const want = (h % 1000) / 1000; if (want < targetRate) { if (APT_ALL_SLOTS.morning.includes(slot)) out.morning.push(slot); else if (APT_ALL_SLOTS.afternoon.includes(slot)) out.afternoon.push(slot); else out.evening.push(slot); } }); return out; } function totalSlotsCount(s) { return s.morning.length + s.afternoon.length + s.evening.length; } // `findFirstAvailableDate` includes today as a candidate (unlike // `findNextAvailableDate`, which always advances) — used for the auto-pick // that fires when entering step 2 so we don't skip past today's openings. function findFirstAvailableDate(providerId, fromDate) { if (totalSlotsCount(slotsForProviderDay(providerId, fromDate)) > 0) return fromDate; return findNextAvailableDate(providerId, fromDate); } function findNextAvailableDate(providerId, fromDate) { for (let i = 1; i <= 30; i++) { const d = addDaysAPT(fromDate, i); if (totalSlotsCount(slotsForProviderDay(providerId, d)) > 0) return d; } return null; } // ──────────────────────────────────────────────────────────────── // Root // ──────────────────────────────────────────────────────────────── function AppointmentApp({ brandId = 'halcyon' }) { const baseBrand = window.BRANDS[brandId]; const mobile = useAPTMobile(); const tweaksEnabled = typeof window !== 'undefined' && window.APT_TWEAKS_ENABLED; const defaults = (typeof window !== 'undefined' && window.APT_TWEAK_DEFAULTS) || {}; const [t, setTweak] = (tweaksEnabled ? window.useTweaks(defaults) : [defaults, () => {}]); const brand = tweaksEnabled ? { ...baseBrand, accent: t.accent ?? baseBrand.accent, accentDeep: t.accent ?? baseBrand.accentDeep, accentSoft: baseBrand.accentSoft, surface: t.panel ?? baseBrand.surface, border: t.lineColor ?? baseBrand.border, ink: t.headline ?? baseBrand.ink, inkSoft: t.details ?? baseBrand.inkSoft, panelInk: t.panelInk ?? t.headline ?? baseBrand.ink, panelInkSoft: t.panelInkSoft ?? t.details ?? baseBrand.inkSoft, displayFont: t.font ?? baseBrand.displayFont, bodyFont: t.font ?? baseBrand.bodyFont, displayWeight: t.weight ?? baseBrand.displayWeight, _radius: t.radius, _thumbRadius: t.thumbnailRadius, _fun: !!t.fun, _buttonTextColor: t.buttonTextColor, } : { ...baseBrand, panelInk: baseBrand.ink, panelInkSoft: baseBrand.inkSoft, }; const appBg = tweaksEnabled ? (t.background ?? '#FFFFFF') : '#FFFFFF'; const [step, setStep] = useStateAPT(1); const [serviceId, setServiceId] = useStateAPT(null); const [addOnIds, setAddOnIds] = useStateAPT([]); const [providerId, setProviderId] = useStateAPT('any'); const [date, setDate] = useStateAPT(null); const [time, setTime] = useStateAPT(null); const service = useMemoAPT( () => APT_SERVICES.find(s => s.id === serviceId) || null, [serviceId], ); const provider = useMemoAPT(() => { return APT_GENERIC_PROVIDERS.find(p => p.id === providerId) || APT_PROVIDERS.find(p => p.id === providerId) || APT_GENERIC_PROVIDERS[0]; }, [providerId]); const openService = (id) => { setServiceId(id); setAddOnIds([]); setProviderId('any'); // Auto-select the soonest available date for the default instructor so // the user can immediately see times instead of an empty placeholder. setDate(findFirstAvailableDate('any', APT_TODAY)); setTime(null); setStep(2); }; const goBackToList = () => { setStep(1); setServiceId(null); setAddOnIds([]); setProviderId('any'); setDate(null); setTime(null); }; const onBook = () => setStep(3); const subtotal = useMemoAPT(() => { let sum = service ? service.price : 0; addOnIds.forEach(id => { sum += (APT_ADD_ONS[id]?.price ?? 0); }); return sum; }, [service, addOnIds]); // Changing the instructor invalidates the chosen time. If the active date // is fully booked for the new instructor, auto-jump to the next opening so // the user never lands on an empty Times section. const onPickProvider = (id) => { setProviderId(id); setTime(null); if (date && totalSlotsCount(slotsForProviderDay(id, date)) === 0) { setDate(findFirstAvailableDate(id, APT_TODAY)); } }; const onPickDate = (d) => { setDate(d); setTime(null); }; const canBook = !!(date && time); return (
{step === 1 && ( )} {step === 2 && service && ( )} {step === 3 && service && ( )}
{step === 2 && ( )} {tweaksEnabled && }
); } // ──────────────────────────────────────────────────────────────── // BrandBar // ──────────────────────────────────────────────────────────────── function BrandBar({ brand, mobile, hideMyAccount }) { return (
H
Halcyon Pilates
); } // ──────────────────────────────────────────────────────────────── // STEP 1 — Location card on top, then lines-style service list. // ──────────────────────────────────────────────────────────────── function Step1Services({ brand, mobile, services, onSelect, hidePrices, hideThumbnail, hideLocation, hideMyAccount, collapseCategories }) { // Group services by category in insertion order. Services without an // explicit category fall back to a single "Services" bucket so we don't // need to special-case the un-categorized renderer. const groups = useMemoAPT(() => { const map = new Map(); services.forEach((s) => { const cat = s.category || 'Services'; if (!map.has(cat)) map.set(cat, []); map.get(cat).push(s); }); return Array.from(map.entries()); }, [services]); // Categories with a single bucket and no explicit category get the // collapsible header suppressed — there's nothing to organize. const showCategoryHeaders = groups.length > 1 || (services[0] && services[0].category); const [collapsed, setCollapsed] = useStateAPT(() => { const init = {}; if (collapseCategories) groups.forEach(([name]) => { init[name] = true; }); return init; }); // Reset whenever the tweak toggles, so the panel acts as a "collapse all" / // "expand all" affordance rather than just a first-render default. useEffectAPT(() => { const init = {}; groups.forEach(([name]) => { init[name] = !!collapseCategories; }); setCollapsed(init); // eslint-disable-next-line react-hooks/exhaustive-deps }, [collapseCategories]); const toggle = (name) => setCollapsed(prev => ({ ...prev, [name]: !prev[name] })); return (

Book a session

{!hideMyAccount && ( )}
{groups.map(([catName, items], gi) => ( toggle(catName)} onSelect={onSelect} hidePrices={hidePrices} hideThumbnail={hideThumbnail} hideLocation={hideLocation} /> ))}
); } // CategorySection — typographic group header + collapsible body. The header // uses the same uppercase, accent-tinted treatment as the row-accordion // labels, so it reads as part of the lines aesthetic rather than a separate // component family. A thin border under the header doubles as the top border // of the first row, avoiding a double divider. function CategorySection({ brand, mobile, name, items, showHeader, isFirstGroup, collapsed, onToggle, onSelect, hidePrices, hideThumbnail, hideLocation, }) { if (!showHeader) { return (
{items.map((s, i) => ( onSelect(s.id)} isFirst={i === 0} hidePrices={hidePrices} hideThumbnail={hideThumbnail} hideLocation={hideLocation} /> ))}
); } return (
{!collapsed && (
{items.map((s, i) => ( onSelect(s.id)} isFirst={i === 0} hidePrices={hidePrices} hideThumbnail={hideThumbnail} hideLocation={hideLocation} /> ))}
)}
); } // ServiceRow — lines-style row with two independent accordions: // (a) "About this session" triggered by the thumbnail or title (click again // to close); (b) "Location" triggered by the underlined location link // in the secondary text. Only one accordion is open at a time, mirroring // the Class Schedule Widget's instructor/location pattern. function ServiceRow({ brand, mobile, service, onSelect, isFirst, hidePrices, hideThumbnail, hideLocation }) { // null | 'service' | 'location' const [expanded, setExpanded] = useStateAPT(null); const toggle = (key) => setExpanded(prev => (prev === key ? null : key)); const radius = brand._radius != null ? brand._radius : 8; const thumbRadius = brand._thumbRadius != null ? brand._thumbRadius : 999; const indentPx = hideThumbnail ? 0 : (mobile ? 68 : 80); return (
{!hideThumbnail && ( )}
{fmtDuration(service.duration)} {!hidePrices && ( <> · {fmtMoney(service.price)} )}
{expanded === 'service' && service.description && ( {service.description} )} {expanded === 'location' && (
{APT_LOCATION.fullName}
{APT_LOCATION.address}
{APT_LOCATION.details}
 )}
); } // Shared row-accordion shell — same surface treatment, uppercase tracked // label, inline animation, so service-description and location accordions // look like siblings. function AccordionPanel({ brand, mobile, indentPx, label, children }) { const radius = brand._radius != null ? brand._radius : 8; return (
{label}
{children}
); } function Caret({ open, brand }) { return ( ); } function SelectButton({ brand, onClick }) { const textColor = brand._buttonTextColor || '#fff'; return ( ); } // ──────────────────────────────────────────────────────────────── // STEP 2 — Three numbered cards (instructor / date / time) plus // an optional add-ons section. // ──────────────────────────────────────────────────────────────── function Step2Booking({ brand, mobile, service, providerId, setProviderId, date, setDate, time, setTime, addOnIds, setAddOnIds, onBack, showAvatars, showGenerics, hidePrices, hideAddOnDetails, hideThumbnail, }) { const radius = brand._radius != null ? brand._radius : 12; const thumbRadius = brand._thumbRadius != null ? brand._thumbRadius : 999; // Anchor the strip on whichever week contains the active date, so the // auto-picked next-available day is in view on first render even when it // sits days from now. const initialAnchor = date ? addDaysAPT(date, -((date.getDay() - APT_TODAY.getDay() + 7) % 7)) : APT_TODAY; const [stripAnchor, setStripAnchor] = useStateAPT(initialAnchor); const stripDates = useMemoAPT( () => Array.from({ length: 7 }, (_, i) => addDaysAPT(stripAnchor, i)), [stripAnchor], ); const dayHasSlots = (d) => totalSlotsCount(slotsForProviderDay(providerId, d)) > 0; const slots = useMemoAPT(() => date ? slotsForProviderDay(providerId, date) : null, [providerId, date]); const fullyBooked = date && slots && totalSlotsCount(slots) === 0; const nextAvail = fullyBooked ? findNextAvailableDate(providerId, date) : null; // Keep the strip anchor in sync when the user picks a date outside the // visible week (e.g. via the "next available" jump button). useEffectAPT(() => { if (!date) return; const inView = stripDates.some(d => sameDayAPT(d, date)); if (!inView) { setStripAnchor(addDaysAPT(date, -((date.getDay() - stripAnchor.getDay() + 7) % 7))); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [date]); return (
{/* Service summary */}
{service.thumbnail && !hideThumbnail && ( )}
{service.name}
{fmtDuration(service.duration)}{!hidePrices ? ` · From ${fmtMoney(service.price)}` : ''}
setStripAnchor(addDaysAPT(stripAnchor, -7))} onNext={() => setStripAnchor(addDaysAPT(stripAnchor, 7))} dayHasSlots={dayHasSlots} /> {!date ? (
Pick a date first to see times.
) : fullyBooked ? ( { if (nextAvail) { setDate(nextAvail); } }} /> ) : (
{['morning', 'afternoon', 'evening'].map(part => ( ))}
)} {service.addOns && service.addOns.length > 0 && ( setAddOnIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])} hidePrices={hidePrices} hideDetails={hideAddOnDetails} /> )}
); } function NumberedStep({ brand, mobile, number, title, children }) { const radius = brand._radius != null ? brand._radius : 12; return (
{number}

{title}

{children}
); } // ── OptionalExtras — each add-on is its own row with a toggle + name + // price + a Details accordion that reveals the description. The accordion // (and its chevron) can be hidden via the `hideDetails` tweak. function OptionalExtras({ brand, mobile, addOns, selected, onToggle, hidePrices, hideDetails }) { return (
Optional extras
Add a little something to your session.
{addOns.map(id => { const ao = APT_ADD_ONS[id]; if (!ao) return null; return ( onToggle(id)} hidePrices={hidePrices} hideDetails={hideDetails} /> ); })}
); } function AddOnRow({ brand, mobile, ao, isOn, onToggle, hidePrices, hideDetails }) { const [expanded, setExpanded] = useStateAPT(false); const radius = brand._radius != null ? brand._radius : 8; return (
{!hideDetails && ( )}
{expanded && !hideDetails && (
{ao.description}
)}
); } // ── Compact date strip function DateStripCompact({ brand, mobile, dates, activeDate, onSelect, onPrev, onNext, dayHasSlots }) { return (
{dates.map(d => { const isActive = activeDate && sameDayAPT(d, activeDate); const isToday = sameDayAPT(d, APT_TODAY); const isPast = d < APT_TODAY && !isToday; const hasSlots = !isPast && dayHasSlots(d); return ( ); })}
); } function stripArrowBtn(brand) { return { flex: '0 0 auto', width: 30, height: 30, borderRadius: 999, background: 'transparent', color: brand.inkSoft, border: 0, cursor: 'pointer', display: 'grid', placeItems: 'center', }; } function FullyBookedNotice({ brand, nextDate, onJump }) { const radius = brand._radius != null ? brand._radius : 10; return (
Fully booked for this day
Try another day above, or jump to the next opening.
{nextDate && ( )}
); } function TimeGroup({ brand, label, slots, selected, onSelect }) { if (slots.length === 0) return null; return (
{label}
{slots.map(s => { const isOn = selected === s; return ( ); })}
); } function InstructorChips({ brand, providers, activeId, onSelect, showAvatars }) { return (
{providers.map(p => { const isOn = activeId === p.id; return ( ); })}
); } function Avatar({ brand, provider, showAvatar, size }) { const thumbRadius = brand._thumbRadius != null ? brand._thumbRadius : 999; if (provider.generic) { return (
); } if (showAvatar && provider.photo) { return ( {provider.name} ); } return (
{(provider.name || '?').slice(0, 1).toUpperCase()}
); } // ──────────────────────────────────────────────────────────────── // Sticky footer // ──────────────────────────────────────────────────────────────── function StickyFooter({ brand, mobile, subtotal, canBook, onBook, hidePrices }) { return (
{!hidePrices ? ( <>
Subtotal
{fmtMoney(subtotal)}
) : }
Book appointment
); } // ──────────────────────────────────────────────────────────────── // STEP 3 — Success // ──────────────────────────────────────────────────────────────── function Step3Success({ brand, mobile, service, provider, date, time, addOnIds, subtotal, onDone, hidePrices }) { return (

You're booked.

A confirmation is on its way to your inbox. Plan to arrive a few minutes early to settle in.
{service.name} – {fmtDuration(service.duration)}
{date && time && (
{APT_WEEKDAYS_SHORT[date.getDay()]}, {APT_MONTHS_LONG[date.getMonth()]} {date.getDate()}, {date.getFullYear()} at {time}
)} {provider &&
with {provider.name}
} {!hidePrices && addOnIds.length > 0 && (
+ {addOnIds.map(id => APT_ADD_ONS[id]?.name).filter(Boolean).join(' · ')}
)} {!hidePrices && (
Total {fmtMoney(subtotal)}
)}
Book another
); } // ──────────────────────────────────────────────────────────────── // PrimaryButton — confetti pop wired to brand._fun. // ──────────────────────────────────────────────────────────────── function PrimaryButton({ brand, onClick, disabled, confetti, children }) { const fun = !!brand._fun; const textColor = brand._buttonTextColor || '#fff'; const [bursts, setBursts] = useStateAPT([]); const seqRef = useRefAPT(0); const fireBurst = () => { const id = ++seqRef.current; const palette = [brand.accent, '#FFC857', '#FF6B6B', '#4ECDC4', '#A06CD5', '#FFD166', '#06D6A0', '#EF476F']; const N = 22; const particles = Array.from({ length: N }, (_, i) => { const t = i / (N - 1); const angle = (-Math.PI * 1.1) + t * Math.PI * 1.2 + (Math.random() - 0.5) * 0.25; const dist = 70 + Math.random() * 70; return { id: i, color: palette[(i + Math.floor(Math.random() * palette.length)) % palette.length], dx: Math.cos(angle) * dist, dy: Math.sin(angle) * dist, rot: (Math.random() * 720 - 360) | 0, size: 5 + Math.random() * 6, round: Math.random() > 0.55, delay: (Math.random() * 60) | 0, duration: 700 + (Math.random() * 250) | 0, }; }); setBursts(prev => [...prev, { id, particles }]); window.setTimeout(() => setBursts(prev => prev.filter(b => b.id !== id)), 1100); }; const handleClick = () => { if (disabled) return; if (fun && confetti) { fireBurst(); window.setTimeout(() => onClick && onClick(), 600); } else { onClick && onClick(); } }; return ( {bursts.length > 0 && ( )} ); } // ──────────────────────────────────────────────────────────────── // Tweaks panel // ──────────────────────────────────────────────────────────────── function AppointmentTweaks({ t, setTweak }) { const { TweaksPanel: Panel, TweakSection: Section, TweakColor: Color, TweakSlider: Slider, TweakSelect: Select, TweakToggle: Toggle, TweakButton: Button, } = window; const resetAll = () => { const defaults = (typeof window !== 'undefined' && window.APT_TWEAK_DEFAULTS) || {}; Object.keys(defaults).forEach(k => setTweak(k, defaults[k])); }; useEffectAPT(() => { if (!Panel) return; const id = window.setTimeout(() => window.postMessage({ type: '__activate_edit_mode' }, '*'), 0); return () => window.clearTimeout(id); }, [Panel]); if (!Panel) return null; const FONTS = [ "'Poppins', system-ui, sans-serif", "'Inter', system-ui, sans-serif", "'Sora', system-ui, sans-serif", "'Open Sans', system-ui, sans-serif", "'DM Sans', system-ui, sans-serif", "'Manrope', system-ui, sans-serif", "'Bebas Neue', sans-serif", "'Playfair Display', serif", ]; const fontLabel = (f) => f.replace(/['"]/g, '').split(',')[0]; return (
setTweak('accent', v)} /> setTweak('background', v)} /> setTweak('panel', v)} /> setTweak('lineColor', v)} />
setTweak('headline', v)} /> setTweak('details', v)} />
setTweak('panelInk', v)} /> setTweak('panelInkSoft', v)} />
setTweak('buttonTextColor', v)} />