@asksable/site-connector 0.1.6 → 0.2.0

package/dist/booking-widget.js

@@ -1,31 +1,102 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { useSableSiteClient, useSableSiteConfig } from './provider.js';
+const stripePromises = new Map();
+function getStripePromise(publishableKey, connectAccountId) {
+    const key = `${publishableKey}:${connectAccountId}`;
+    const cached = stripePromises.get(key);
+    if (cached)
+        return cached;
+    const promise = loadStripe(publishableKey, { stripeAccount: connectAccountId });
+    stripePromises.set(key, promise);
+    return promise;
+}
+function isDevRuntime() {
+    const env = import.meta.env;
+    return env?.DEV === true || env?.MODE === 'development';
+}
+function hasIntakeFormSections(service) {
+    return (service?.intakeForm?.sections?.length ?? 0) > 0;
+}
+function findCalculatedServiceMissingIntake(setup) {
+    return setup.services.find((service) => service.pricingMode === 'calculated' && !hasIntakeFormSections(service));
+}
 const MOBILE_PROGRESS_STEPS = [1, 2, 3, 4];
-export function BookingWidgetPanel({ title, description, mobileHeader, }) {
+export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'create', rescheduleContext, onRescheduleSubmit, successRedirectHref = '/', __devForceState, __devForceSuccess, }) {
+    const forcedState = __devForceState ?? (__devForceSuccess ? 'success' : null);
+    const isReschedule = mode === 'reschedule';
+    // Reschedule summary holds longer values (full former-time
+    // sentence, "Signature Color Refresh") that the widget's default
+    // single-line ellipsis truncates. We override per-row inline so
+    // create mode is unchanged.
+    const summaryValStyle = isReschedule
+        ? {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip',
+            wordBreak: 'normal',
+            overflowWrap: 'anywhere',
+        }
+        : undefined;
     const client = useSableSiteClient();
     const { siteSlug } = useSableSiteConfig();
     const [setup, setSetup] = useState(null);
     const [isSetupLoading, setIsSetupLoading] = useState(true);
-    const [selectedServiceId, setSelectedServiceId] = useState(null);
-    const [selectedStaffId, setSelectedStaffId] = useState(null);
+    // In reschedule mode the service is locked to the original
+    // appointment's service. We seed selection from rescheduleContext
+    // up front so the calendar/slot fetch fires without the user
+    // needing to click anything.
+    const [selectedServiceId, setSelectedServiceId] = useState(() => rescheduleContext?.serviceId ?? null);
+    const [selectedStaffId, setSelectedStaffId] = useState(() => rescheduleContext?.staffMemberId ?? null);
     const [calendarMonth, setCalendarMonth] = useState(() => startOfMonth(new Date()));
     const [availabilityByDate, setAvailabilityByDate] = useState(new Map());
     const [isAvailabilityLoading, setIsAvailabilityLoading] = useState(false);
     const [selectedDate, setSelectedDate] = useState(null);
     const [selectedSlot, setSelectedSlot] = useState(null);
     const [pendingSlotKey, setPendingSlotKey] = useState(null);
+    // Service picker is progressive: full list shows initially, collapses
+    // to a single "selected service" card once a service is picked, then
+    // the provider section reveals below. Click Change on the card flips
+    // back to full list. Reschedule mode skips the collapse since the
+    // service is locked from rescheduleContext at mount.
+    const [isEditingService, setIsEditingService] = useState(false);
     const [holdId, setHoldId] = useState(null);
     const [holdExpiresAt, setHoldExpiresAt] = useState(null);
     const [heldStaffId, setHeldStaffId] = useState(null);
-    const [customerName, setCustomerName] = useState('');
-    const [customerEmail, setCustomerEmail] = useState('');
-    const [customerPhone, setCustomerPhone] = useState('');
+    // Pre-fill contact fields from the original booking when
+    // rescheduling. Editable, since a user might want to fix typos at
+    // the same time, but the reschedule flow doesn't actually overwrite
+    // them — the host's mutation only patches the time fields.
+    const [customerName, setCustomerName] = useState(() => rescheduleContext?.customerName ?? '');
+    const [customerEmail, setCustomerEmail] = useState(() => rescheduleContext?.customerEmail ?? '');
+    const [customerPhone, setCustomerPhone] = useState(() => rescheduleContext?.customerPhone ?? '');
     const [customerNotes, setCustomerNotes] = useState('');
+    const [intakeResponses, setIntakeResponses] = useState({});
+    const [quote, setQuote] = useState(null);
+    const [isQuoteLoading, setIsQuoteLoading] = useState(false);
+    const [payment, setPayment] = useState(null);
+    const [paymentAppointmentId, setPaymentAppointmentId] = useState(null);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(null);
     const [mobileStep, setMobileStep] = useState(1);
+    const [mobilePaymentActionTarget, setMobilePaymentActionTarget] = useState(null);
+    // Two-step desktop flow: 'slots' shows the available-times list,
+    // 'details' shows the customer form + summary + confirm. Picking a
+    // slot auto-advances to details with a crossfade matching Sable's
+    // popup rule (250ms expo ease-out in, 150ms ease-out out). Back
+    // button in details returns to slots and releases the hold.
+    const [viewState, setViewState] = useState('slots');
+    // Dev-only: force viewState to 'details' when previewing a payment
+    // variant, since the payment panel renders inside the details form.
+    useEffect(() => {
+        if (__devForceState === 'payment-full' || __devForceState === 'payment-deposit') {
+            setViewState('details');
+        }
+    }, [__devForceState]);
     const [monthOpen, setMonthOpen] = useState(false);
     const [staffOpen, setStaffOpen] = useState(false);
     const [holdNow, setHoldNow] = useState(() => Date.now());
@@ -33,6 +104,29 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
     const staffMenuRef = useRef(null);
     const availabilityCacheRef = useRef(new Map());
     const holdIdRef = useRef(null);
+    // Calendar card lives in the middle column and is the natural
+    // height anchor of the desktop layout. We measure it on resize and
+    // expose --bw-cal-h on the .bw root so the left (services) and
+    // right (slots) columns can cap their internal scrollers to match,
+    // keeping all three columns the same visual height regardless of
+    // service-list length or slot count.
+    const calCardRef = useRef(null);
+    const widgetRootRef = useRef(null);
+    useEffect(() => {
+        const card = calCardRef.current;
+        const root = widgetRootRef.current;
+        if (!card || !root)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const height = Math.round(entry.contentRect.height);
+            root.style.setProperty('--bw-cal-h', `${height}px`);
+        });
+        observer.observe(card);
+        return () => observer.disconnect();
+    }, [setup]);
     useEffect(() => {
         holdIdRef.current = holdId;
     }, [holdId]);
@@ -45,8 +139,14 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             if (cancelled) {
                 return;
             }
+            const missingIntake = findCalculatedServiceMissingIntake(result);
+            if (missingIntake && isDevRuntime()) {
+                throw new Error(`Calculated service "${missingIntake.name}" is missing intakeForm.sections. Shipping services must provide an intakeForm instead of falling back to the generic contact form.`);
+            }
             setSetup(result);
-            setSelectedServiceId((current) => current || result.services[0]?._id || null);
+            // Don't auto-select a service in create mode — let the user
+            // actively pick one. Reschedule mode pre-seeds via the
+            // useState initializer above so this preserves that.
             setError(null);
         })
             .catch((nextError) => {
@@ -77,6 +177,90 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
         };
     }, [staffOpen]);
     const selectedService = useMemo(() => setup?.services.find((service) => service._id === selectedServiceId) ?? null, [selectedServiceId, setup]);
+    const selectedServiceRequiresSlot = selectedService?.publicBookingMode !== 'async';
+    const selectedServicePath = selectedServiceRequiresSlot ? 'scheduled' : 'async';
+    const selectedServiceHasIntakeForm = hasIntakeFormSections(selectedService);
+    const isIntakeComplete = useMemo(() => !selectedService?.intakeForm ||
+        areRequiredIntakeFieldsComplete(selectedService.intakeForm, intakeResponses, selectedServicePath), [intakeResponses, selectedService?.intakeForm, selectedServicePath]);
+    const serviceWarning = useMemo(() => getServiceWarning(selectedService, selectedServicePath), [selectedService, selectedServicePath]);
+    const selectedServiceRequiresPayment = selectedService?.requiresPayment === true;
+    const trimmedCustomerEmail = customerEmail.trim();
+    const isCustomerEmailValid = trimmedCustomerEmail.length > 0 && isValidEmailAddress(trimmedCustomerEmail);
+    const showCustomerEmailError = trimmedCustomerEmail.length > 0 && !isCustomerEmailValid;
+    // In reschedule mode we pre-select the original service but keep
+    // the full list visible — the admin may legitimately need to
+    // switch service when rescheduling (e.g. customer asked for a
+    // shorter visit alongside the time change).
+    const visibleServices = useMemo(() => {
+        if (!setup)
+            return [];
+        return setup.services;
+    }, [setup]);
+    const serviceGroups = useMemo(() => {
+        if (!setup || visibleServices.length === 0)
+            return [];
+        const categoriesById = new Map((setup.categories ?? []).map((c) => [c._id, c]));
+        const groups = new Map();
+        const uncategorizedKey = '__uncategorized__';
+        for (const service of visibleServices) {
+            const category = service.categoryId != null
+                ? categoriesById.get(service.categoryId) ?? null
+                : null;
+            const key = category?._id ?? uncategorizedKey;
+            const existing = groups.get(key);
+            if (existing) {
+                existing.services.push(service);
+            }
+            else {
+                groups.set(key, {
+                    key,
+                    categoryName: category?.name ?? null,
+                    services: [service],
+                });
+            }
+        }
+        // Order: categories by their configured sortOrder, then any
+        // uncategorized bucket at the end.
+        const orderedCategoryKeys = (setup.categories ?? []).map((c) => c._id);
+        const ordered = [];
+        for (const id of orderedCategoryKeys) {
+            const g = groups.get(id);
+            if (g)
+                ordered.push(g);
+        }
+        const uncategorized = groups.get(uncategorizedKey);
+        if (uncategorized)
+            ordered.push(uncategorized);
+        // If the workspace has no categories at all, return a single
+        // group with no header so the picker still reads as one list.
+        if (ordered.length === 1 && ordered[0].categoryName === null) {
+            return ordered;
+        }
+        return ordered;
+    }, [setup, visibleServices]);
+    // Original service / staff display names (looked up against the
+    // loaded setup), used in the reschedule summary's "Former …" rows.
+    // These render only when the user changes the corresponding field
+    // away from the original — picking only a new time leaves them
+    // hidden, so the summary stays clean for the common case.
+    const formerService = useMemo(() => {
+        if (!isReschedule || !rescheduleContext || !setup)
+            return null;
+        return (setup.services.find((s) => s._id === rescheduleContext.serviceId) ?? null);
+    }, [isReschedule, rescheduleContext, setup]);
+    const formerStaffName = useMemo(() => {
+        if (!isReschedule || !rescheduleContext?.staffMemberId || !setup) {
+            return null;
+        }
+        return (setup.staff.find((s) => s._id === rescheduleContext.staffMemberId)
+            ?.name ?? null);
+    }, [isReschedule, rescheduleContext, setup]);
+    const serviceChanged = isReschedule &&
+        rescheduleContext != null &&
+        selectedServiceId !== rescheduleContext.serviceId;
+    const staffChanged = isReschedule &&
+        rescheduleContext != null &&
+        (selectedStaffId ?? null) !== (rescheduleContext.staffMemberId ?? null);
     const availableStaff = useMemo(() => {
         if (!setup || !selectedService) {
             return [];
@@ -84,13 +268,18 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
         return setup.staff.filter((staffMember) => selectedService.assignedStaffIds.includes(staffMember._id));
     }, [selectedService, setup]);
     useEffect(() => {
+        // Wait for availableStaff to populate before clearing — otherwise
+        // a pre-seeded staffMemberId (e.g. from rescheduleContext) gets
+        // wiped on the first render before the staff list arrives.
+        if (availableStaff.length === 0)
+            return;
         if (selectedStaffId && !availableStaff.some((staffMember) => staffMember._id === selectedStaffId)) {
             setSelectedStaffId(null);
         }
     }, [availableStaff, selectedStaffId]);
     const selectedStaff = useMemo(() => availableStaff.find((staffMember) => staffMember._id === selectedStaffId) ?? null, [availableStaff, selectedStaffId]);
     useEffect(() => {
-        if (!selectedServiceId) {
+        if (!selectedServiceId || selectedService?.publicBookingMode === 'async') {
             setAvailabilityByDate(new Map());
             setSelectedDate(null);
             return;
@@ -154,9 +343,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
         return () => {
             cancelled = true;
         };
-    }, [calendarMonth, client, selectedDate, selectedServiceId, selectedStaffId, siteSlug]);
+    }, [calendarMonth, client, selectedDate, selectedService?.publicBookingMode, selectedServiceId, selectedStaffId, siteSlug]);
     useEffect(() => {
-        if (!selectedServiceId) {
+        if (!selectedServiceId || selectedService?.publicBookingMode === 'async') {
             return;
         }
         const nextMonth = addMonths(calendarMonth, 1);
@@ -168,14 +357,65 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             calendarMonth: nextMonth,
             cacheRef: availabilityCacheRef,
         });
-    }, [calendarMonth, client, selectedServiceId, selectedStaffId, siteSlug]);
+    }, [calendarMonth, client, selectedService?.publicBookingMode, selectedServiceId, selectedStaffId, siteSlug]);
     useEffect(() => {
         setSelectedSlot(null);
         setPendingSlotKey(null);
         setHeldStaffId(null);
         setSuccess(null);
         setError(null);
-    }, [selectedDate, selectedServiceId, selectedStaffId]);
+        setPayment(null);
+        setPaymentAppointmentId(null);
+        if (selectedService?.publicBookingMode === 'async') {
+            setViewState('details');
+            setMobileStep(4);
+        }
+        else {
+            setViewState('slots');
+        }
+    }, [selectedDate, selectedService?.publicBookingMode, selectedServiceId, selectedStaffId]);
+    useEffect(() => {
+        setIntakeResponses({});
+        setQuote(null);
+    }, [selectedServiceId]);
+    useEffect(() => {
+        if (!selectedServiceId ||
+            selectedService?.pricingMode !== 'calculated' ||
+            !isIntakeComplete) {
+            setQuote(null);
+            setIsQuoteLoading(false);
+            return;
+        }
+        let cancelled = false;
+        setIsQuoteLoading(true);
+        const handle = window.setTimeout(() => {
+            void client
+                .quotePublicBooking({
+                siteSlug,
+                serviceId: selectedServiceId,
+                intakeResponses,
+            })
+                .then((nextQuote) => {
+                if (!cancelled) {
+                    setQuote(nextQuote);
+                    setError(null);
+                }
+            })
+                .catch((nextError) => {
+                if (!cancelled) {
+                    setError(nextError instanceof Error ? nextError.message : 'Unable to calculate price.');
+                }
+            })
+                .finally(() => {
+                if (!cancelled)
+                    setIsQuoteLoading(false);
+            });
+        }, 300);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(handle);
+        };
+    }, [client, intakeResponses, isIntakeComplete, selectedService?.pricingMode, selectedServiceId, siteSlug]);
     useEffect(() => {
         return () => {
             if (!holdId) {
@@ -264,11 +504,103 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
     const holdSecondsRemaining = holdExpiresAt !== null ? Math.max(0, Math.floor((holdExpiresAt - holdNow) / 1000)) : null;
     const monthOptions = useMemo(() => getMonthOptions(calendarMonth, 4), [calendarMonth]);
     const calendarDays = useMemo(() => buildCalendarDays(calendarMonth), [calendarMonth]);
-    const canAdvanceStep1 = true;
-    const canAdvanceStep2 = Boolean(selectedService);
+    // Mobile 4-step gates. canAdvanceStepN = "the user can move PAST
+    // step N to step N+1". Step 1 (service) requires a pick. Step 2
+    // (provider) is always passable since "Any provider" is the
+    // default. Step 3 (calendar) requires both date + slot.
+    const canAdvanceStep1 = Boolean(selectedService);
+    const canAdvanceStep2 = true;
     const canAdvanceStep3 = Boolean(selectedDate && selectedSlot);
-    const canSubmit = Boolean(selectedService && selectedDate && selectedSlot && holdId && customerName.trim() && customerEmail.trim()) &&
-        !isSubmitting;
+    // Slots block is rendered in two locations: inline under the calendar
+    // (mobile flow keeps current step-3 behavior) and at the top of the
+    // right column on desktop (calendar | slots | form layout). Both
+    // locations share the same handlers and state, so picking a slot in
+    // either place updates the widget identically. CSS hides the wrong
+    // copy per breakpoint via .bw-slots-mobile / .bw-slots-desktop.
+    // Re-mount the slots wrapper whenever the inputs that affect the
+    // slot list change so the CSS enter animation fires (.bw-slots-fade
+    // + per-slot stagger). React diffs keys per parent, so reusing the
+    // same key on both the mobile and desktop render sites is fine —
+    // each parent independently remounts its child.
+    const slotsAreaKey = `${selectedServiceId ?? 'none'}-${selectedStaffId ?? 'any'}-${selectedDate ?? 'none'}-${isAvailabilityLoading ? 'loading' : 'ready'}`;
+    const slotsArea = (_jsx("div", { className: "bw-slots-fade", children: !selectedService ? (_jsx("p", { className: "bw-slots-empty", children: "Please select a service." })) : isAvailabilityLoading ? (_jsx(AvailabilitySkeleton, {})) : selectedDate ? (selectedDateSlots.length > 0 ? (_jsx("div", { className: "bw-time-slots", children: selectedDateSlots.map((slot, index) => {
+                const slotKey = `${slot.time}-${slot.endTime}`;
+                const isPending = pendingSlotKey === slotKey;
+                const isActive = isPending ||
+                    (selectedSlot?.time === slot.time && selectedSlot?.endTime === slot.endTime);
+                return (_jsx("button", { type: "button", className: `bw-slot${isActive ? ' is-active' : ''}${isPending ? ' is-pending' : ''}`, style: { '--bw-slot-i': index }, onClick: () => void handleSlotSelect(slot), disabled: isSubmitting, children: isPending ? 'Securing...' : formatTimeLabel(slot.time) }, slotKey));
+            }) })) : (_jsx("p", { className: "bw-no-slots", children: "No available times for this date." }))) : null }, slotsAreaKey));
+    const canSubmit = Boolean(selectedService &&
+        (!selectedServiceRequiresSlot || (selectedDate && selectedSlot && holdId)) &&
+        isIntakeComplete &&
+        (selectedService.pricingMode !== 'calculated' || quote) &&
+        customerName.trim() &&
+        isCustomerEmailValid) && !isSubmitting;
+    const submitBlockers = selectedService
+        ? getSubmitBlockers({
+            selectedService,
+            selectedServiceRequiresSlot,
+            selectedDate,
+            selectedSlot,
+            holdId,
+            isIntakeComplete,
+            intakeResponses,
+            selectedServicePath,
+            quote,
+            customerName,
+            customerEmail,
+        })
+        : [];
+    function handleNotesInput(event) {
+        setCustomerNotes(event.currentTarget.value);
+    }
+    function renderNotesField(id, label, placeholder) {
+        return (_jsxs("div", { className: "bw-field bw-field--notes", children: [_jsx("label", { htmlFor: id, children: label }), _jsx("textarea", { id: id, rows: 3, maxLength: 500, value: customerNotes, onChange: handleNotesInput, onInput: handleNotesInput, placeholder: placeholder }), _jsxs("span", { className: "bw-char-count", "aria-live": "polite", children: [customerNotes.length, "/500"] })] }));
+    }
+    function renderSubmitHelp() {
+        if (!selectedService || canSubmit || payment || isSubmitting)
+            return null;
+        if (submitBlockers.length === 0 && !isQuoteLoading)
+            return null;
+        const visibleBlockers = submitBlockers.slice(0, 5);
+        const hiddenCount = submitBlockers.length - visibleBlockers.length;
+        return (_jsxs("div", { className: "bw-submit-help", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "bw-submit-help-title", children: isQuoteLoading ? 'Calculating your price...' : 'Complete required fields to continue:' }), !isQuoteLoading && visibleBlockers.length > 0 ? (_jsxs("ul", { children: [visibleBlockers.map((blocker) => (_jsx("li", { children: blocker }, blocker))), hiddenCount > 0 ? _jsxs("li", { children: [hiddenCount, " more required fields"] }) : null] })) : null] }));
+    }
+    function renderContactFields(idSuffix) {
+        const nameId = `bw-name${idSuffix}`;
+        const emailId = `bw-email${idSuffix}`;
+        const phoneId = `bw-phone${idSuffix}`;
+        const emailErrorId = `${emailId}-error`;
+        return (_jsxs("div", { className: "bw-form-fields", children: [_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: nameId, children: ["Full name ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: nameId, value: customerName, onChange: (event) => setCustomerName(event.target.value), placeholder: "John Doe" })] }), _jsxs("div", { className: `bw-field${showCustomerEmailError ? ' is-invalid' : ''}`, children: [_jsxs("label", { htmlFor: emailId, children: ["Email ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: emailId, type: "email", required: true, value: customerEmail, onChange: (event) => setCustomerEmail(event.target.value), "aria-invalid": showCustomerEmailError, "aria-describedby": showCustomerEmailError ? emailErrorId : undefined, placeholder: "jane@example.com" }), showCustomerEmailError ? (_jsx("span", { className: "bw-field-error", id: emailErrorId, children: "Enter a valid email address." })) : null] }), _jsxs("div", { className: "bw-field", children: [_jsx("label", { htmlFor: phoneId, children: "Phone" }), _jsx("input", { id: phoneId, value: customerPhone, onChange: (event) => setCustomerPhone(event.target.value), placeholder: "+1 (555) 000-0000" })] })] }));
+    }
+    function renderIntakeFields(idPrefix) {
+        return (_jsx(IntakeFormFields, { form: selectedService?.intakeForm, responses: intakeResponses, onChange: (fieldId, value) => setIntakeResponses((prev) => ({ ...prev, [fieldId]: value })), idPrefix: idPrefix, mode: selectedServicePath }));
+    }
+    function renderIntakeAndContact(idPrefix, idSuffix) {
+        const intakeFields = renderIntakeFields(idPrefix);
+        const contactFields = renderContactFields(idSuffix);
+        return selectedServiceHasIntakeForm ? (_jsxs(_Fragment, { children: [intakeFields, contactFields] })) : (_jsxs(_Fragment, { children: [contactFields, intakeFields] }));
+    }
+    function handleServiceSelect(service) {
+        if (holdId) {
+            void client
+                .releasePublicBookingHold({ siteSlug, holdId, sessionToken })
+                .catch(() => undefined);
+        }
+        setSelectedServiceId(service._id);
+        setIsEditingService(false);
+        setPayment(null);
+        setPaymentAppointmentId(null);
+        if (service.publicBookingMode === 'async') {
+            setSelectedDate(null);
+            setSelectedSlot(null);
+            setHoldId(null);
+            setHoldExpiresAt(null);
+            setHeldStaffId(null);
+            setViewState('details');
+            setMobileStep(4);
+        }
+    }
     async function handleSlotSelect(slot) {
         if (!selectedServiceId || !selectedDate) {
             return;
@@ -313,6 +645,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             setHoldExpiresAt(result.expiresAt);
             setHeldStaffId(reservationStaffId);
             setError(null);
+            // Auto-advance the desktop right pane to the details/form view
+            // once the hold is reserved. Mobile flow keeps the existing
+            // step-based navigation; this state change is harmless there
+            // because mobile CSS forces the details pane visible regardless.
+            setViewState('details');
         }
         catch (nextError) {
             setSelectedSlot(previousSlot);
@@ -323,28 +660,96 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             setError(nextError instanceof Error ? nextError.message : 'Unable to reserve that time.');
         }
     }
+    async function handleBackToSlots() {
+        if (holdId) {
+            await client
+                .releasePublicBookingHold({ siteSlug, holdId, sessionToken })
+                .catch(() => undefined);
+        }
+        setSelectedSlot(null);
+        setHoldId(null);
+        setHoldExpiresAt(null);
+        setHeldStaffId(null);
+        setPendingSlotKey(null);
+        setViewState('slots');
+    }
+    function handleBackToServicePicker() {
+        setSelectedServiceId(null);
+        setSelectedDate(null);
+        setSelectedSlot(null);
+        setHoldId(null);
+        setHoldExpiresAt(null);
+        setHeldStaffId(null);
+        setPendingSlotKey(null);
+        setIsEditingService(false);
+        setPayment(null);
+        setPaymentAppointmentId(null);
+        setViewState('slots');
+        setMobileStep(1);
+    }
     async function handleConfirmBooking() {
-        if (!selectedServiceId || !selectedService || !selectedDate || !selectedSlot || !holdId) {
+        if (!selectedServiceId ||
+            !selectedService ||
+            (selectedServiceRequiresSlot && (!selectedDate || !selectedSlot || !holdId))) {
             return;
         }
         setIsSubmitting(true);
         setError(null);
+        const newStartTime = selectedDate && selectedSlot
+            ? Date.parse(`${selectedDate}T${selectedSlot.time}:00`)
+            : Date.now();
+        const newEndTime = selectedDate && selectedSlot
+            ? Date.parse(`${selectedDate}T${selectedSlot.endTime}:00`)
+            : newStartTime + selectedService.durationMinutes * 60 * 1000;
+        // Reschedule mode bypasses the public-create flow entirely.
+        // Service / staff / customer are already attached to the
+        // original appointment, so the host (admin path) or magic-link
+        // signed customer (public path) only needs to dispatch the new
+        // start/end. The hold is released as a courtesy since the slot
+        // is being committed via a different mutation that re-runs the
+        // conflict check itself.
+        if (isReschedule && onRescheduleSubmit) {
+            try {
+                await onRescheduleSubmit({ newStartTime, newEndTime });
+                setSuccess('Reschedule confirmed.');
+                setMobileStep(4);
+            }
+            catch (nextError) {
+                setError(nextError instanceof Error
+                    ? nextError.message
+                    : 'Unable to reschedule. Please try again.');
+            }
+            finally {
+                setIsSubmitting(false);
+            }
+            return;
+        }
         try {
-            await client.createPublicBooking({
+            const created = await client.createPublicBooking({
                 siteSlug,
                 serviceId: selectedServiceId,
-                staffMemberId: heldStaffId ?? selectedStaffId ?? selectedSlot.availableStaffIds[0],
-                startTime: Date.parse(`${selectedDate}T${selectedSlot.time}:00`),
-                endTime: Date.parse(`${selectedDate}T${selectedSlot.endTime}:00`),
-                timezone: selectedHeldStaff?.timezone ?? availableStaff[0]?.timezone ?? 'UTC',
+                staffMemberId: selectedServiceRequiresSlot
+                    ? heldStaffId ?? selectedStaffId ?? selectedSlot?.availableStaffIds[0]
+                    : undefined,
+                startTime: newStartTime,
+                endTime: newEndTime,
+                timezone: selectedHeldStaff?.timezone ?? availableStaff[0]?.timezone ?? setup?.workspaceTimezone ?? 'UTC',
                 deliveryMethod: selectedService.deliveryMethods[0] ?? 'in-person',
                 customerName: customerName.trim(),
                 customerEmail: customerEmail.trim(),
                 customerPhone: customerPhone.trim() || undefined,
                 customerNotes: customerNotes.trim() || undefined,
-                bookingHoldId: holdId,
-                bookingSessionToken: sessionToken,
+                intakeResponses,
+                quotedTotalCents: quote?.totalCents,
+                bookingHoldId: selectedServiceRequiresSlot ? holdId : undefined,
+                bookingSessionToken: selectedServiceRequiresSlot ? sessionToken : undefined,
             });
+            if (created.payment) {
+                setPayment(created.payment);
+                setPaymentAppointmentId(created.appointmentId);
+                setError(null);
+                return;
+            }
             setSuccess('Booking confirmed.');
             setSelectedSlot(null);
             setPendingSlotKey(null);
@@ -355,6 +760,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             setCustomerEmail('');
             setCustomerPhone('');
             setCustomerNotes('');
+            setIntakeResponses({});
+            setQuote(null);
+            setPayment(null);
+            setPaymentAppointmentId(null);
             setMobileStep(4);
         }
         catch (nextError) {
@@ -370,133 +779,534 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
     if (!setup || setup.services.length === 0) {
         return (_jsx("section", { className: "bw", children: _jsx("div", { className: "bw-empty", children: "No bookable services are available yet." }) }));
     }
-    if (success) {
-        return (_jsx("section", { className: "bw", children: _jsxs("div", { className: "bw-done", children: [_jsx("div", { className: "bw-done-icon", children: _jsx(CheckIcon, {}) }), _jsx("h3", { className: "bw-done-title", children: "You're All Set!" }), _jsx("p", { className: "bw-done-text", children: "Your booking request has been submitted. We'll follow up using the email you provided if anything needs confirmation." }), _jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
-                            setSuccess(null);
-                            setSelectedDate(findFirstAvailableDate(availabilityByDate, calendarMonth));
-                        }, children: "Book another visit" })] }) }));
-    }
-    return (_jsxs("section", { className: "bw", children: [mobileHeader ? _jsx("div", { className: "bw-mobile-header", children: mobileHeader }) : null, _jsxs("div", { className: "bw-header", children: [_jsxs("div", { className: "bw-header-row", children: [_jsx("h2", { className: "bw-title bw-title--desktop", children: title || 'Schedule your visit' }), _jsx("h2", { className: "bw-title bw-title--mobile", children: mobileStepTitle(mobileStep) }), _jsx("div", { className: "bw-progress", "aria-hidden": "true", children: MOBILE_PROGRESS_STEPS.map((step) => (_jsx("span", { className: `bw-dot${mobileStep >= step ? ' is-filled' : ''}` }, step))) })] }), description ? _jsx("p", { className: "bw-description", children: description }) : null] }), _jsx("div", { className: "bw-body", "data-mobile-step": mobileStep, children: _jsxs("div", { className: "bw-body-inner", children: [_jsxs("div", { className: "bw-col bw-col--left", children: [_jsxs("div", { className: "bw-step-1", children: [_jsx("label", { className: "bw-label", children: "Select Specialist" }), _jsxs("div", { className: "bw-staff-dropdown", ref: staffMenuRef, children: [_jsxs("button", { type: "button", className: `bw-staff-trigger${selectedStaff ? ' has-value' : ''}`, onClick: () => setStaffOpen((current) => !current), children: [_jsxs("span", { className: "bw-staff-trigger-content", children: [_jsx("span", { className: "bw-staff-avatar", children: selectedStaff ? (_jsx("span", { className: "bw-staff-initials", children: getInitials(selectedStaff.name) })) : (_jsx(UserIcon, {})) }), _jsxs("span", { className: "bw-staff-trigger-info", children: [_jsx("span", { className: "bw-staff-trigger-name", children: selectedStaff ? selectedStaff.name : 'Any available specialist' }), _jsx("span", { className: "bw-staff-trigger-desc", children: selectedStaff ? selectedStaff.timezone : 'First available team member' })] })] }), _jsx("span", { className: "bw-staff-trigger-chevron", children: _jsx(ChevronDownIcon, {}) })] }), staffOpen ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bw-staff-overlay", "aria-label": "Close specialist menu", onClick: () => setStaffOpen(false) }), _jsxs("div", { className: "bw-staff-list", children: [_jsxs("button", { type: "button", className: `bw-staff-option${selectedStaffId === null ? ' is-active' : ''}`, onClick: () => {
-                                                                        setSelectedStaffId(null);
-                                                                        setStaffOpen(false);
-                                                                    }, children: [_jsx("span", { className: "bw-staff-avatar", children: _jsx(UserIcon, {}) }), _jsxs("span", { className: "bw-staff-option-info", children: [_jsx("span", { className: "bw-staff-option-name", children: "Any Available" }), _jsx("span", { className: "bw-staff-option-desc", children: "First available specialist" })] })] }), availableStaff.map((staffMember) => (_jsxs("button", { type: "button", className: `bw-staff-option${selectedStaffId === staffMember._id ? ' is-active' : ''}`, onClick: () => {
-                                                                        setSelectedStaffId(staffMember._id);
-                                                                        setStaffOpen(false);
-                                                                    }, children: [_jsx("span", { className: "bw-staff-avatar", children: _jsx("span", { className: "bw-staff-initials", children: getInitials(staffMember.name) }) }), _jsxs("span", { className: "bw-staff-option-info", children: [_jsx("span", { className: "bw-staff-option-name", children: staffMember.name }), _jsx("span", { className: "bw-staff-option-desc", children: staffMember.timezone })] })] }, staffMember._id)))] })] })) : null] }), _jsxs("div", { className: "bw-service-picker", children: [_jsx("div", { className: "bw-section-divider" }), _jsx("label", { className: "bw-label", children: "Select Service" }), _jsx("div", { className: "bw-svc-scroll is-open", children: _jsx("div", { className: "bw-svc-scroll-wrap", children: _jsx("div", { className: "bw-svc-scroll-inner", children: setup.services.map((service) => {
-                                                                const isActive = selectedServiceId === service._id;
-                                                                return (_jsxs("button", { type: "button", className: "bw-svc-row", onMouseEnter: () => {
+    if (forcedState === 'cancelled') {
+        return (_jsx("section", { className: "bw", children: _jsxs("div", { className: "bw-done", children: [_jsx("div", { className: "bw-done-icon bw-done-icon--muted", children: _jsx(XIcon, {}) }), _jsx("h3", { className: "bw-done-title", children: "Booking cancelled" }), _jsx("p", { className: "bw-done-text", children: "Your appointment has been cancelled. We've let your provider know. You can book a new visit any time." }), _jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
+                            /* dev preview only — host wires the real handler */
+                        }, children: "Book a new visit" })] }) }));
+    }
+    if (success || forcedState === 'success') {
+        return (_jsx("section", { className: "bw", children: _jsxs("div", { className: "bw-done", children: [_jsx("div", { className: "bw-done-icon", children: _jsx(CheckIcon, {}) }), _jsx("h3", { className: "bw-done-title", children: isReschedule ? 'All set.' : "You're All Set!" }), _jsx("p", { className: "bw-done-text", children: isReschedule
+                            ? "Your appointment has been rescheduled. We've sent a confirmation to the email on file and notified your provider."
+                            : "Your booking request has been submitted. We'll follow up using the email you provided if anything needs confirmation." }), isReschedule ? null : (_jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
+                            window.location.assign(successRedirectHref);
+                        }, children: "Back to home" }))] }) }));
+    }
+    return (_jsxs("section", { className: "bw", "data-view-state": viewState, ref: widgetRootRef, children: [mobileHeader ? _jsx("div", { className: "bw-mobile-header", children: mobileHeader }) : null, _jsxs("div", { className: "bw-header", children: [_jsxs("div", { className: "bw-header-row", children: [_jsx("h2", { className: "bw-title bw-title--desktop", children: title ||
+                                    (isReschedule
+                                        ? rescheduleContext?.customerName
+                                            ? `Reschedule ${formatPossessive(rescheduleContext.customerName)} appointment`
+                                            : 'Reschedule appointment'
+                                        : 'Schedule your visit') }), _jsx("h2", { className: "bw-title bw-title--mobile", children: isReschedule
+                                    ? rescheduleContext?.customerName
+                                        ? `Reschedule ${formatPossessive(rescheduleContext.customerName)} appointment`
+                                        : 'Reschedule appointment'
+                                    : mobileStepTitle(mobileStep) }), _jsx("div", { className: "bw-progress", "aria-hidden": "true", children: MOBILE_PROGRESS_STEPS.map((step) => (_jsx("span", { className: `bw-dot${mobileStep >= step ? ' is-filled' : ''}` }, step))) })] }), description ? _jsx("p", { className: "bw-description", children: description }) : null] }), _jsxs("div", { className: "bw-content", children: [_jsx("div", { className: "bw-body", "data-mobile-step": mobileStep, children: _jsxs("div", { className: "bw-body-inner", children: [_jsxs("div", { className: "bw-col bw-col--left", children: [_jsxs("div", { className: "bw-step-1", children: [_jsx("div", { className: "bw-service-picker", children: selectedService && !isEditingService ? (_jsxs("div", { className: "bw-svc-selected", children: [_jsxs("div", { className: "bw-svc-selected-header", children: [_jsx("label", { className: "bw-label", children: "Selected service" }), _jsx("button", { type: "button", className: "bw-svc-change", onClick: () => setIsEditingService(true), children: "Change" })] }), _jsxs("div", { className: "bw-svc-row bw-svc-row--readonly", children: [selectedService.image ? (_jsxs("span", { className: "bw-svc-image is-checked", children: [_jsx("img", { src: selectedService.image.url, alt: selectedService.image.alt ?? selectedService.name, loading: "lazy" }), _jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })] })) : (_jsx("span", { className: "bw-check is-checked", children: _jsx(CheckIcon, {}) })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: selectedService.name }), selectedService.description ? (_jsx("span", { className: "bw-svc-desc", children: selectedService.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(selectedService.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(selectedService) })] })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("label", { className: "bw-label", children: "Select Service" }), _jsx("div", { className: "bw-svc-scroll is-open", children: _jsx("div", { className: "bw-svc-scroll-wrap", children: _jsx("div", { className: "bw-svc-scroll-inner", children: serviceGroups.map((group) => (_jsxs("div", { className: "bw-svc-group", children: [group.categoryName ? (_jsx("div", { className: "bw-svc-category", children: group.categoryName })) : null, group.services.map((service) => {
+                                                                                    const isActive = selectedServiceId === service._id;
+                                                                                    return (_jsxs("button", { type: "button", className: "bw-svc-row", onMouseEnter: () => {
+                                                                                            void prefetchAvailability({
+                                                                                                client,
+                                                                                                siteSlug,
+                                                                                                selectedServiceId: service._id,
+                                                                                                selectedStaffId,
+                                                                                                calendarMonth,
+                                                                                                cacheRef: availabilityCacheRef,
+                                                                                            });
+                                                                                        }, onFocus: () => {
+                                                                                            void prefetchAvailability({
+                                                                                                client,
+                                                                                                siteSlug,
+                                                                                                selectedServiceId: service._id,
+                                                                                                selectedStaffId,
+                                                                                                calendarMonth,
+                                                                                                cacheRef: availabilityCacheRef,
+                                                                                            });
+                                                                                        }, onClick: () => {
+                                                                                            handleServiceSelect(service);
+                                                                                        }, children: [service.image ? (_jsxs("span", { className: `bw-svc-image${isActive ? ' is-checked' : ''}`, children: [_jsx("img", { src: service.image.url, alt: service.image.alt ?? service.name, loading: "lazy" }), isActive ? (_jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })) : null] })) : (_jsx("span", { className: `bw-check${isActive ? ' is-checked' : ''}`, children: isActive ? _jsx(CheckIcon, {}) : null })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: service.name }), service.description ? (_jsx("span", { className: "bw-svc-desc", children: service.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(service) })] })] })] }, service._id));
+                                                                                })] }, group.key))) }) }) })] })) }), selectedService && selectedServiceRequiresSlot && !isEditingService ? (_jsxs("div", { className: "bw-provider-section", children: [_jsx("div", { className: "bw-section-divider" }), _jsx("label", { className: "bw-label", children: "Select a Provider" }), _jsxs("div", { className: "bw-staff-dropdown", ref: staffMenuRef, children: [_jsxs("button", { type: "button", className: `bw-staff-trigger${selectedStaff ? ' has-value' : ''}`, onClick: () => setStaffOpen((current) => !current), children: [_jsxs("span", { className: "bw-staff-trigger-content", children: [_jsx("span", { className: "bw-staff-avatar", children: selectedStaff?.image?.url ? (_jsx("img", { src: selectedStaff.image.url, alt: selectedStaff.image.alt ?? selectedStaff.name, className: "bw-staff-avatar-img" })) : selectedStaff ? (_jsx("span", { className: "bw-staff-initials", children: getInitials(selectedStaff.name) })) : (_jsx(UserIcon, {})) }), _jsxs("span", { className: "bw-staff-trigger-info", children: [_jsx("span", { className: "bw-staff-trigger-name", children: selectedStaff ? selectedStaff.name : 'Any provider' }), selectedStaff ? null : (_jsx("span", { className: "bw-staff-trigger-desc", children: "First available" }))] })] }), _jsx("span", { className: "bw-staff-trigger-chevron", children: _jsx(ChevronDownIcon, {}) })] }), staffOpen ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bw-staff-overlay", "aria-label": "Close provider menu", onClick: () => setStaffOpen(false) }), _jsxs("div", { className: "bw-staff-list", children: [_jsxs("button", { type: "button", className: `bw-staff-option${selectedStaffId === null ? ' is-active' : ''}`, onClick: () => {
+                                                                                        setSelectedStaffId(null);
+                                                                                        setStaffOpen(false);
+                                                                                    }, children: [_jsx("span", { className: "bw-staff-avatar", children: _jsx(UserIcon, {}) }), _jsxs("span", { className: "bw-staff-option-info", children: [_jsx("span", { className: "bw-staff-option-name", children: "Any Available" }), _jsx("span", { className: "bw-staff-option-desc", children: "First available" })] })] }), availableStaff.map((staffMember) => (_jsxs("button", { type: "button", className: `bw-staff-option${selectedStaffId === staffMember._id ? ' is-active' : ''}`, onClick: () => {
+                                                                                        setSelectedStaffId(staffMember._id);
+                                                                                        setStaffOpen(false);
+                                                                                    }, children: [_jsx("span", { className: "bw-staff-avatar", children: staffMember.image?.url ? (_jsx("img", { src: staffMember.image.url, alt: staffMember.image.alt ?? staffMember.name, className: "bw-staff-avatar-img" })) : (_jsx("span", { className: "bw-staff-initials", children: getInitials(staffMember.name) })) }), _jsx("span", { className: "bw-staff-option-info", children: _jsx("span", { className: "bw-staff-option-name", children: staffMember.name }) })] }, staffMember._id)))] })] })) : null] })] })) : null] }), _jsxs("div", { className: "bw-step-2", children: [_jsx("p", { className: "bw-step-2-heading", children: "Choose your service" }), _jsx("div", { className: "bw-step-2-divider" }), serviceGroups.map((group) => (_jsxs("div", { className: "bw-svc-group", children: [group.categoryName ? (_jsx("div", { className: "bw-svc-category", children: group.categoryName })) : null, group.services.map((service) => {
+                                                            const isActive = selectedServiceId === service._id;
+                                                            return (_jsxs("div", { children: [_jsxs("button", { type: "button", className: "bw-svc-row bw-svc-row--full", onMouseEnter: () => {
+                                                                            void prefetchAvailability({
+                                                                                client,
+                                                                                siteSlug,
+                                                                                selectedServiceId: service._id,
+                                                                                selectedStaffId,
+                                                                                calendarMonth,
+                                                                                cacheRef: availabilityCacheRef,
+                                                                            });
+                                                                        }, onFocus: () => {
+                                                                            void prefetchAvailability({
+                                                                                client,
+                                                                                siteSlug,
+                                                                                selectedServiceId: service._id,
+                                                                                selectedStaffId,
+                                                                                calendarMonth,
+                                                                                cacheRef: availabilityCacheRef,
+                                                                            });
+                                                                        }, onClick: () => {
+                                                                            handleServiceSelect(service);
+                                                                        }, children: [service.image ? (_jsxs("span", { className: `bw-svc-image bw-svc-image--lg${isActive ? ' is-checked' : ''}`, children: [_jsx("img", { src: service.image.url, alt: service.image.alt ?? service.name, loading: "lazy" }), isActive ? (_jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })) : null] })) : (_jsx("span", { className: `bw-check bw-check--lg${isActive ? ' is-checked' : ''}`, children: isActive ? _jsx(CheckIcon, {}) : null })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: service.name }), service.description ? (_jsx("span", { className: "bw-svc-desc", children: service.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(service) })] })] })] }), _jsx("div", { className: "bw-row-divider" })] }, service._id));
+                                                        })] }, group.key)))] })] }), _jsx("div", { className: "bw-col bw-col--center", children: _jsxs("div", { className: "bw-cal-card", ref: calCardRef, children: [_jsxs("div", { className: "bw-cal-header", children: [_jsxs("div", { className: "bw-month-dropdown", children: [_jsxs("button", { type: "button", className: "bw-month-btn", onClick: () => setMonthOpen((current) => !current), children: [_jsx("span", { children: formatMonthLabel(calendarMonth) }), _jsx(ChevronDownIcon, {})] }), monthOpen ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bw-month-overlay", "aria-label": "Close month picker", onClick: () => setMonthOpen(false) }), _jsx("div", { className: "bw-month-list", children: monthOptions.map((option) => (_jsx("button", { type: "button", className: `bw-month-option${option.value === optionCurrentValue(calendarMonth) ? ' is-active' : ''}`, onClick: () => {
+                                                                                setCalendarMonth(option.date);
+                                                                                setMonthOpen(false);
+                                                                            }, children: option.label }, option.value))) })] })) : null] }), _jsxs("div", { className: "bw-cal-navs", children: [_jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
+                                                                    if (!sameMonth(calendarMonth, startOfMonth(new Date())) && selectedServiceId) {
                                                                         void prefetchAvailability({
                                                                             client,
                                                                             siteSlug,
-                                                                            selectedServiceId: service._id,
+                                                                            selectedServiceId,
                                                                             selectedStaffId,
-                                                                            calendarMonth,
+                                                                            calendarMonth: addMonths(calendarMonth, -1),
                                                                             cacheRef: availabilityCacheRef,
                                                                         });
-                                                                    }, onFocus: () => {
+                                                                    }
+                                                                }, onClick: () => setCalendarMonth((current) => addMonths(current, -1)), disabled: sameMonth(calendarMonth, startOfMonth(new Date())), "aria-label": "Previous month", children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
+                                                                    if (!sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)) && selectedServiceId) {
                                                                         void prefetchAvailability({
                                                                             client,
                                                                             siteSlug,
-                                                                            selectedServiceId: service._id,
+                                                                            selectedServiceId,
                                                                             selectedStaffId,
-                                                                            calendarMonth,
+                                                                            calendarMonth: addMonths(calendarMonth, 1),
                                                                             cacheRef: availabilityCacheRef,
                                                                         });
-                                                                    }, onClick: () => {
-                                                                        setSelectedServiceId(service._id);
-                                                                        setMobileStep(2);
-                                                                    }, children: [_jsx("span", { className: `bw-check${isActive ? ' is-checked' : ''}`, children: isActive ? _jsx(CheckIcon, {}) : null }), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: service.name }), _jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), service.description ? (_jsx("span", { className: "bw-svc-desc", children: service.description })) : null] }), _jsx("span", { className: "bw-svc-price", children: currencyFormatter(service.currency).format(service.priceCents / 100) })] }, service._id));
-                                                            }) }) }) })] })] }), _jsxs("div", { className: "bw-step-2", children: [_jsx("p", { className: "bw-step-2-heading", children: "Choose your service" }), _jsx("div", { className: "bw-step-2-divider" }), setup.services.map((service) => {
-                                            const isActive = selectedServiceId === service._id;
-                                            return (_jsxs("div", { children: [_jsxs("button", { type: "button", className: "bw-svc-row bw-svc-row--full", onMouseEnter: () => {
-                                                            void prefetchAvailability({
-                                                                client,
-                                                                siteSlug,
-                                                                selectedServiceId: service._id,
-                                                                selectedStaffId,
-                                                                calendarMonth,
-                                                                cacheRef: availabilityCacheRef,
-                                                            });
-                                                        }, onFocus: () => {
-                                                            void prefetchAvailability({
-                                                                client,
-                                                                siteSlug,
-                                                                selectedServiceId: service._id,
-                                                                selectedStaffId,
-                                                                calendarMonth,
-                                                                cacheRef: availabilityCacheRef,
-                                                            });
-                                                        }, onClick: () => setSelectedServiceId(service._id), children: [_jsx("span", { className: `bw-check bw-check--lg${isActive ? ' is-checked' : ''}`, children: isActive ? _jsx(CheckIcon, {}) : null }), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: service.name }), _jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), service.description ? (_jsx("span", { className: "bw-svc-desc", children: service.description })) : null] }), _jsx("span", { className: "bw-svc-price", children: currencyFormatter(service.currency).format(service.priceCents / 100) })] }), _jsx("div", { className: "bw-row-divider" })] }, service._id));
-                                        })] })] }), _jsx("div", { className: "bw-col bw-col--center", children: _jsxs("div", { className: "bw-cal-card", children: [_jsxs("div", { className: "bw-cal-header", children: [_jsxs("div", { className: "bw-month-dropdown", children: [_jsxs("button", { type: "button", className: "bw-month-btn", onClick: () => setMonthOpen((current) => !current), children: [_jsx("span", { children: formatMonthLabel(calendarMonth) }), _jsx(ChevronDownIcon, {})] }), monthOpen ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bw-month-overlay", "aria-label": "Close month picker", onClick: () => setMonthOpen(false) }), _jsx("div", { className: "bw-month-list", children: monthOptions.map((option) => (_jsx("button", { type: "button", className: `bw-month-option${option.value === optionCurrentValue(calendarMonth) ? ' is-active' : ''}`, onClick: () => {
-                                                                        setCalendarMonth(option.date);
-                                                                        setMonthOpen(false);
-                                                                    }, children: option.label }, option.value))) })] })) : null] }), _jsxs("div", { className: "bw-cal-navs", children: [_jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
-                                                            if (!sameMonth(calendarMonth, startOfMonth(new Date())) && selectedServiceId) {
-                                                                void prefetchAvailability({
-                                                                    client,
-                                                                    siteSlug,
-                                                                    selectedServiceId,
-                                                                    selectedStaffId,
-                                                                    calendarMonth: addMonths(calendarMonth, -1),
-                                                                    cacheRef: availabilityCacheRef,
-                                                                });
-                                                            }
-                                                        }, onClick: () => setCalendarMonth((current) => addMonths(current, -1)), disabled: sameMonth(calendarMonth, startOfMonth(new Date())), "aria-label": "Previous month", children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
-                                                            if (!sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)) && selectedServiceId) {
-                                                                void prefetchAvailability({
-                                                                    client,
-                                                                    siteSlug,
-                                                                    selectedServiceId,
-                                                                    selectedStaffId,
-                                                                    calendarMonth: addMonths(calendarMonth, 1),
-                                                                    cacheRef: availabilityCacheRef,
-                                                                });
-                                                            }
-                                                        }, onClick: () => setCalendarMonth((current) => addMonths(current, 1)), disabled: sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx("div", { className: "bw-cal-weekdays", children: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (_jsx("span", { children: day }, day))) }), _jsx("div", { className: "bw-cal-grid", children: calendarDays.map((day) => {
-                                            const dateKey = formatDateKey(day);
-                                            const isCurrentMonth = day.getMonth() === calendarMonth.getMonth();
-                                            const isPast = dateKey < formatDateKey(startOfDay(new Date()));
-                                            const slots = availabilityByDate.get(dateKey) ?? [];
-                                            const isAvailable = slots.length > 0;
-                                            const isSelected = selectedDate === dateKey;
-                                            const className = [
-                                                'bw-cal-day',
-                                                !isCurrentMonth ? 'is-outside' : '',
-                                                isSelected ? 'is-selected' : '',
-                                                isAvailable && !isPast ? 'is-available' : '',
-                                                isPast ? 'is-disabled' : '',
-                                                !isAvailable && isCurrentMonth && !isPast ? 'is-blocked' : '',
-                                                dateKey === formatDateKey(startOfDay(new Date())) ? 'is-today' : '',
-                                            ]
-                                                .filter(Boolean)
-                                                .join(' ');
-                                            return (_jsx("button", { type: "button", className: className, disabled: !isCurrentMonth || isPast || !isAvailable, onClick: () => {
-                                                    setSelectedDate(dateKey);
-                                                    setSelectedSlot(null);
-                                                    setMobileStep((current) => (current < 3 ? 3 : current));
-                                                }, children: day.getDate() }, dateKey));
-                                        }) }), !selectedService ? (_jsx("p", { className: "bw-cal-prompt", children: "Please select a service to see availability." })) : null, selectedService && isAvailabilityLoading ? (_jsx(AvailabilitySkeleton, {})) : null, selectedService && selectedDate && !isAvailabilityLoading ? (selectedDateSlots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "bw-time-divider" }), _jsx("div", { className: "bw-time-slots", children: selectedDateSlots.map((slot) => {
-                                                    const slotKey = `${slot.time}-${slot.endTime}`;
-                                                    const isPending = pendingSlotKey === slotKey;
-                                                    const isActive = isPending ||
-                                                        (selectedSlot?.time === slot.time && selectedSlot?.endTime === slot.endTime);
-                                                    return (_jsx("button", { type: "button", className: `bw-slot${isActive ? ' is-active' : ''}${isPending ? ' is-pending' : ''}`, onClick: () => void handleSlotSelect(slot), disabled: isSubmitting, children: isPending ? 'Securing...' : formatTimeLabel(slot.time) }, slotKey));
-                                                }) })] })) : (_jsx("p", { className: "bw-no-slots", children: "No available times for this date." }))) : null, _jsxs("div", { className: "bw-timezone", children: [_jsx(GlobeIcon, {}), _jsx("span", { children: selectedHeldStaff?.timezone ?? selectedStaff?.timezone ?? 'UTC' })] })] }) }), _jsx("div", { className: "bw-col bw-col--right", children: _jsx("div", { className: "bw-right-scroll", children: _jsx("div", { className: "bw-right-inner", children: _jsxs("div", { className: "bw-form", children: [_jsxs("div", { className: "bw-form-fields", children: [_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: "bw-name", children: ["Full name ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: "bw-name", value: customerName, onChange: (event) => setCustomerName(event.target.value), placeholder: "John Doe" })] }), _jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: "bw-email", children: ["Email ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: "bw-email", type: "email", value: customerEmail, onChange: (event) => setCustomerEmail(event.target.value), placeholder: "jane@example.com" })] }), _jsxs("div", { className: "bw-field", children: [_jsx("label", { htmlFor: "bw-phone", children: "Phone" }), _jsx("input", { id: "bw-phone", value: customerPhone, onChange: (event) => setCustomerPhone(event.target.value), placeholder: "+1 (555) 000-0000" })] })] }), _jsxs("div", { className: "bw-field bw-field--notes", children: [_jsx("label", { htmlFor: "bw-notes", children: "Additional notes" }), _jsx("textarea", { id: "bw-notes", rows: 3, maxLength: 500, value: customerNotes, onChange: (event) => setCustomerNotes(event.target.value), placeholder: "Any preferences or special requests..." }), _jsxs("span", { className: "bw-char-count", children: [customerNotes.length, "/500"] })] }), selectedService ? (_jsxs("div", { className: "bw-summary", children: [_jsx("span", { className: "bw-summary-title", children: "Booking Summary" }), _jsxs("div", { className: "bw-summary-rows", children: [holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: "Reservation hold" }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Service" }), _jsx("span", { className: "bw-summary-val", children: selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Specialist" }), _jsx("span", { className: "bw-summary-val", children: selectedHeldStaff?.name ?? selectedStaff?.name ?? 'Any Available' })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Date" }), _jsx("span", { className: "bw-summary-val", children: formatReadableDate(selectedDate) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Time" }), _jsx("span", { className: "bw-summary-val", children: formatTimeLabel(selectedSlot.time) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Duration" }), _jsx("span", { className: "bw-summary-val", children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: "Estimated total" }), _jsx("span", { className: "bw-summary-val", children: currencyFormatter(selectedService.currency).format(selectedService.priceCents / 100) })] })] })] })) : null, error ? _jsx("div", { className: "bw-error", children: error }) : null, _jsxs("button", { type: "button", className: "bw-confirm-btn", disabled: !canSubmit, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting ? 'Booking...' : 'Confirm Booking' }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] })] }) }) }) })] }) }), _jsxs("div", { className: "bw-footer", children: [mobileStep === 4 && selectedService ? (_jsxs("div", { className: "bw-footer-summary", children: [_jsx("span", { className: "bw-summary-title", children: "Booking Summary" }), _jsxs("div", { className: "bw-summary-rows", children: [holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: "Reservation hold" }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Service" }), _jsx("span", { className: "bw-summary-val", children: selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Specialist" }), _jsx("span", { className: "bw-summary-val", children: selectedHeldStaff?.name ?? selectedStaff?.name ?? 'Any Available' })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Date" }), _jsx("span", { className: "bw-summary-val", children: formatReadableDate(selectedDate) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Time" }), _jsx("span", { className: "bw-summary-val", children: formatTimeLabel(selectedSlot.time) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Duration" }), _jsx("span", { className: "bw-summary-val", children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: "Estimated total" }), _jsx("span", { className: "bw-summary-val", children: currencyFormatter(selectedService.currency).format(selectedService.priceCents / 100) })] })] })] })) : null, _jsxs("div", { className: "bw-footer-btns", children: [mobileStep > 1 ? (_jsx("button", { type: "button", className: "bw-footer-back", onClick: () => setMobileStep((step) => Math.max(1, step - 1)), children: _jsx(ArrowLeftIcon, {}) })) : null, mobileStep < 4 ? (_jsxs("button", { type: "button", className: "bw-footer-next", disabled: (mobileStep === 1 && !canAdvanceStep1) ||
+                                                                    }
+                                                                }, onClick: () => setCalendarMonth((current) => addMonths(current, 1)), disabled: sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx("div", { className: "bw-cal-weekdays", children: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (_jsx("span", { children: day }, day))) }), _jsx("div", { className: "bw-cal-grid", children: calendarDays.map((day) => {
+                                                    const dateKey = formatDateKey(day);
+                                                    const isCurrentMonth = day.getMonth() === calendarMonth.getMonth();
+                                                    const isPast = dateKey < formatDateKey(startOfDay(new Date()));
+                                                    const slots = availabilityByDate.get(dateKey) ?? [];
+                                                    const isAvailable = slots.length > 0;
+                                                    const isSelected = selectedDate === dateKey;
+                                                    const className = [
+                                                        'bw-cal-day',
+                                                        !isCurrentMonth ? 'is-outside' : '',
+                                                        isSelected ? 'is-selected' : '',
+                                                        isAvailable && !isPast ? 'is-available' : '',
+                                                        isPast ? 'is-disabled' : '',
+                                                        !isAvailable && isCurrentMonth && !isPast ? 'is-blocked' : '',
+                                                        dateKey === formatDateKey(startOfDay(new Date())) ? 'is-today' : '',
+                                                    ]
+                                                        .filter(Boolean)
+                                                        .join(' ');
+                                                    return (_jsx("button", { type: "button", className: className, disabled: !isCurrentMonth || isPast || !isAvailable, onClick: () => {
+                                                            setSelectedDate(dateKey);
+                                                            setSelectedSlot(null);
+                                                            setMobileStep((current) => (current < 3 ? 3 : current));
+                                                        }, children: day.getDate() }, dateKey));
+                                                }) }), !selectedService ? (_jsx("p", { className: "bw-cal-prompt", children: "Please select a service to see availability." })) : null, _jsxs("div", { className: "bw-slots-mobile", children: [selectedService && selectedDate && selectedDateSlots.length > 0 ? (_jsx("div", { className: "bw-time-divider" })) : null, slotsArea] }), _jsxs("div", { className: "bw-timezone", children: [_jsx(GlobeIcon, {}), _jsx("span", { children: selectedHeldStaff?.timezone ?? selectedStaff?.timezone ?? setup?.workspaceTimezone ?? setup?.staff?.[0]?.timezone ?? 'UTC' })] })] }) }), _jsx("div", { className: "bw-col bw-col--right", children: _jsx("div", { className: "bw-right-scroll", children: _jsx("div", { className: "bw-right-inner", children: _jsxs("div", { className: "bw-right-stage", children: [_jsx("div", { className: `bw-pane bw-pane--slots${viewState === 'slots' ? ' is-active' : ' is-hidden'}`, "aria-hidden": viewState !== 'slots', children: _jsxs("div", { className: "bw-slots-desktop", children: [_jsxs("div", { className: "bw-slots-heading", children: [_jsx("span", { children: "Available times" }), selectedDateSlots.length > 0 ? (_jsx("span", { className: "bw-slots-count", children: selectedDateSlots.length })) : null] }), slotsArea] }) }), _jsxs("div", { className: `bw-pane bw-pane--details${viewState === 'details' ? ' is-active' : ' is-hidden'}`, "aria-hidden": viewState !== 'details', children: [selectedServiceRequiresSlot ? (_jsxs("button", { type: "button", className: "bw-back-btn", onClick: () => void handleBackToSlots(), children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: "Pick a different time" })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: "Pick a different service" })] })), _jsxs("div", { className: "bw-form", children: [serviceWarning ? _jsx(ServiceWarningCallout, { warning: serviceWarning }) : null, renderIntakeAndContact('bw-intake', ''), renderNotesField('bw-notes', 'Additional notes', 'Any preferences or special requests...'), selectedService ? (_jsxs("div", { className: "bw-summary", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule ? 'Reschedule Summary' : 'Booking Summary' }), _jsxs("div", { className: "bw-summary-rows", children: [holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: "Reservation hold" }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] })) : null, isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former time" }), _jsx("span", { className: "bw-summary-val", style: {
+                                                                                                    ...summaryValStyle,
+                                                                                                    textDecoration: 'line-through',
+                                                                                                    opacity: 0.55,
+                                                                                                }, children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime) })] })) : null, serviceChanged && formerService ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former service" }), _jsx("span", { className: "bw-summary-val", style: {
+                                                                                                    ...summaryValStyle,
+                                                                                                    textDecoration: 'line-through',
+                                                                                                    opacity: 0.55,
+                                                                                                }, children: formerService.name })] })) : null, staffChanged ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former staff" }), _jsx("span", { className: "bw-summary-val", style: {
+                                                                                                    ...summaryValStyle,
+                                                                                                    textDecoration: 'line-through',
+                                                                                                    opacity: 0.55,
+                                                                                                }, children: formerStaffName ?? 'Any Available' })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Service" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Provider" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ?? selectedStaff?.name ?? 'Any Available' })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Date" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Time" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Duration" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: isQuoteLoading ? 'Calculating...' : 'Estimated total' }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote) })] })] })] })) : null, error ? _jsx("div", { className: "bw-error", children: error }) : null, renderSubmitHelp(), payment ? (_jsx(StripePaymentBlock, { payment: payment, appointmentId: paymentAppointmentId, showInlineButton: false, actionTarget: mobilePaymentActionTarget, onSuccess: () => {
+                                                                            setSuccess('Payment received. Your booking is being confirmed.');
+                                                                            setPayment(null);
+                                                                        }, onError: setError })) : (_jsxs("button", { type: "button", className: "bw-confirm-btn", disabled: !canSubmit || isQuoteLoading, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting
+                                                                                    ? isReschedule
+                                                                                        ? 'Rescheduling...'
+                                                                                        : 'Booking...'
+                                                                                    : isReschedule
+                                                                                        ? 'Confirm Reschedule'
+                                                                                        : selectedServiceRequiresPayment
+                                                                                            ? 'Continue to payment'
+                                                                                            : 'Confirm Booking' }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] })] })] }) }) }) })] }) }), _jsxs("div", { className: "bw-details-view", children: [_jsx("div", { className: "bw-details-summary", children: selectedService ? (_jsxs(_Fragment, { children: [selectedServiceRequiresSlot ? (_jsxs("button", { type: "button", className: "bw-back-btn bw-back-btn--details", onClick: () => void handleBackToSlots(), children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: "Pick a different time" })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn bw-back-btn--details", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: "Pick a different service" })] })), _jsx("h3", { className: "bw-details-service", children: selectedService.name }), selectedService.description ? (_jsx("p", { className: "bw-details-desc", children: selectedService.description })) : null, _jsxs("div", { className: "bw-details-meta", children: [isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-details-meta-row bw-details-meta-row--strike", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(CalendarIcon, {}) }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: "Former time" }), _jsx("span", { className: "bw-details-meta-value", children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime) })] })] })) : null, selectedDate && selectedSlot ? (_jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(CalendarIcon, {}) }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: isReschedule ? 'New time' : 'When' }), _jsxs("span", { className: "bw-details-meta-value", children: [formatReadableDate(selectedDate), _jsx("br", {}), formatTimeLabel(selectedSlot.time), " \u2013 ", formatTimeLabel(selectedSlot.endTime)] })] })] })) : null, _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(ClockIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(UserIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: selectedHeldStaff?.name ?? selectedStaff?.name ?? 'Any Available' })] }), _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(GlobeIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: selectedHeldStaff?.timezone ?? selectedStaff?.timezone ?? setup?.workspaceTimezone ?? setup?.staff?.[0]?.timezone ?? 'UTC' })] }), _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", "aria-hidden": "true", children: "$" }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: isQuoteLoading ? 'Calculating...' : 'Estimated total' }), _jsx("span", { className: "bw-details-meta-value", children: formatServicePrice(selectedService, quote) })] })] }), holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-details-meta-row bw-details-meta-row--hold", "aria-live": "polite", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(ClockIcon, {}) }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: "Reservation hold" }), _jsx("span", { className: "bw-details-meta-value bw-details-hold", children: formatHoldCountdown(holdSecondsRemaining) })] })] })) : null] })] })) : null }), _jsx("div", { className: "bw-details-form", children: _jsxs("div", { className: "bw-form bw-form--details", children: [serviceWarning ? _jsx(ServiceWarningCallout, { warning: serviceWarning }) : null, renderIntakeAndContact('bw-intake-d', '-d'), renderNotesField('bw-notes-d', isReschedule ? 'Reason for reschedule' : 'Additional notes', isReschedule
+                                            ? 'Let your provider know why...'
+                                            : 'Any preferences or special requests...'), error ? _jsx("div", { className: "bw-error", children: error }) : null, renderSubmitHelp(), !payment && (forcedState === 'payment-full' || forcedState === 'payment-deposit') ? (_jsx(PaymentPanel, { service: selectedService, mode: forcedState === 'payment-full' ? 'full' : 'deposit' })) : null, payment ? (_jsx(StripePaymentBlock, { payment: payment, appointmentId: paymentAppointmentId, onSuccess: () => {
+                                                setSuccess('Payment received. Your booking is being confirmed.');
+                                                setPayment(null);
+                                            }, onError: setError })) : (_jsxs("button", { type: "button", className: "bw-confirm-btn", disabled: !canSubmit || isQuoteLoading, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting
+                                                        ? isReschedule
+                                                            ? 'Rescheduling...'
+                                                            : 'Booking...'
+                                                        : forcedState === 'payment-full'
+                                                            ? `Pay ${formatPrice(selectedService)} & Confirm`
+                                                            : forcedState === 'payment-deposit'
+                                                                ? `Pay deposit & Confirm`
+                                                                : isReschedule
+                                                                    ? 'Confirm Reschedule'
+                                                                    : selectedServiceRequiresPayment
+                                                                        ? 'Continue to payment'
+                                                                        : 'Confirm Booking' }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] }) })] })] }), _jsxs("div", { className: "bw-footer", children: [mobileStep === 4 && selectedService ? (_jsxs("div", { className: "bw-footer-summary", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule ? 'Reschedule Summary' : 'Booking Summary' }), _jsxs("div", { className: "bw-summary-rows", children: [holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: "Reservation hold" }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] })) : null, isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former time" }), _jsx("span", { className: "bw-summary-val", style: {
+                                                    ...summaryValStyle,
+                                                    textDecoration: 'line-through',
+                                                    opacity: 0.55,
+                                                }, children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime) })] })) : null, serviceChanged && formerService ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former service" }), _jsx("span", { className: "bw-summary-val", style: {
+                                                    ...summaryValStyle,
+                                                    textDecoration: 'line-through',
+                                                    opacity: 0.55,
+                                                }, children: formerService.name })] })) : null, staffChanged ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former staff" }), _jsx("span", { className: "bw-summary-val", style: {
+                                                    ...summaryValStyle,
+                                                    textDecoration: 'line-through',
+                                                    opacity: 0.55,
+                                                }, children: formerStaffName ?? 'Any Available' })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Service" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Provider" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ?? selectedStaff?.name ?? 'Any Available' })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Date" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Time" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Duration" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: isQuoteLoading ? 'Calculating...' : 'Estimated total' }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote) })] })] })] })) : null, _jsxs("div", { className: "bw-footer-btns", children: [mobileStep > 1 ? (_jsx("button", { type: "button", className: "bw-footer-back", onClick: () => {
+                                    if (!selectedServiceRequiresSlot && mobileStep === 4) {
+                                        handleBackToServicePicker();
+                                    }
+                                    else {
+                                        setMobileStep((step) => Math.max(1, step - 1));
+                                    }
+                                }, children: _jsx(ArrowLeftIcon, {}) })) : null, mobileStep < 4 ? (_jsxs("button", { type: "button", className: "bw-footer-next", disabled: (mobileStep === 1 && !canAdvanceStep1) ||
                                     (mobileStep === 2 && !canAdvanceStep2) ||
-                                    (mobileStep === 3 && !canAdvanceStep3), onClick: () => setMobileStep((step) => Math.min(4, step + 1)), children: [_jsx("span", { children: "Next" }), _jsx(ArrowRightIcon, {})] })) : (_jsxs("button", { type: "button", className: "bw-footer-next", disabled: !canSubmit, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting ? 'Booking...' : 'Confirm Booking' }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] })] })] }));
+                                    (mobileStep === 3 && !canAdvanceStep3), onClick: () => setMobileStep((step) => Math.min(4, step + 1)), children: [_jsx("span", { children: "Next" }), _jsx(ArrowRightIcon, {})] })) : payment ? (_jsx("div", { className: "bw-footer-payment-slot", ref: setMobilePaymentActionTarget })) : (_jsxs("button", { type: "button", className: "bw-footer-next", disabled: !canSubmit || isQuoteLoading, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting
+                                            ? isReschedule
+                                                ? 'Rescheduling...'
+                                                : 'Booking...'
+                                            : isReschedule
+                                                ? 'Confirm Reschedule'
+                                                : selectedServiceRequiresPayment
+                                                    ? 'Continue to payment'
+                                                    : 'Confirm Booking' }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] })] })] }));
+}
+/* Payment panel — design proposal for the pay-before-booking flow.
+ * Renders inside the desktop details form (and mobile step-4 form
+ * once wired) when the selected service has paymentMode === 'full'
+ * or 'deposit'. Visuals only today: real implementation will mount
+ * a Stripe PaymentElement inside .bw-pay-card-slot and gate the
+ * Confirm CTA on a successful charge. Deposit mode shows the split
+ * (charged today vs at-visit) so the customer sees what's actually
+ * coming out of their card now.
+ *
+ * TODO(eric): Eric is adding a Stripe widget to the LEFT side of
+ * the details view (alongside the summary, not the form). When you
+ * pick this up:
+ *   1. Move/replace this PaymentPanel into the left summary pane
+ *      (.bw-details-summary) so the Stripe Element sits where the
+ *      customer reads what they're paying for. The right form pane
+ *      stays as-is — name/email/phone/notes only.
+ *   2. Backend gap: getPublicBookingSetup currently strips the
+ *      payment fields. Surface paymentMode, depositCents,
+ *      requiresPayment, and the workspace's Stripe Connect account
+ *      handle (so the PaymentElement can be configured against the
+ *      right tenant) in the public response + the
+ *      PublicBookingSetup type.
+ *   3. Mount Elements provider scoped to the widget; create a
+ *      PaymentIntent on hold success (server-side mutation pinned
+ *      to the bookingHoldId so the amount can't be tampered with).
+ *   4. Gate createPublicAppointment behind paymentIntent.status
+ *      === 'succeeded'. On failure: keep the hold for one retry.
+ *   5. Confirm CTA copy already branches on forcedState — wire the
+ *      same branch on the real `service.requiresPayment` field.
+ *   6. Visual reference: this PaymentPanel + the dev preview pills
+ *      ('Pay full' / 'Pay deposit') in dev/booking-widget-preview
+ *      show the design intent for the summary card layout. Reuse
+ *      the .bw-pay-summary chrome on the left side; the
+ *      .bw-pay-card-slot is what gets replaced by <PaymentElement />.
+ */
+function PaymentPanel({ service, mode, }) {
+    if (!service)
+        return null;
+    const formatter = currencyFormatter(service.currency);
+    const total = service.priceCents / 100;
+    // Deposit defaults to 30% of total when no explicit depositCents
+    // is set on the service. Real flow reads `service.depositCents`.
+    const depositToday = mode === 'full' ? total : Math.round(total * 0.3 * 100) / 100;
+    const dueAtVisit = mode === 'full' ? 0 : Math.round((total - depositToday) * 100) / 100;
+    return (_jsxs("div", { className: "bw-pay", children: [_jsxs("div", { className: "bw-pay-summary", children: [_jsx("div", { className: "bw-pay-summary-header", children: "Summary" }), _jsxs("div", { className: "bw-pay-summary-row", children: [_jsx("span", { children: service.name }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(total) })] }), _jsx("div", { className: "bw-pay-summary-divider" }), _jsxs("div", { className: "bw-pay-summary-row", children: [_jsx("span", { children: "Subtotal" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(total) })] }), _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--muted", children: [_jsx("span", { children: "Tax" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(0) })] }), _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--total", children: [_jsx("span", { children: "Total" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(total) })] }), _jsx("div", { className: "bw-pay-summary-divider" }), _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--strong", children: [_jsx("span", { children: "Charged today" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(depositToday) })] }), mode === 'deposit' ? (_jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--muted", children: [_jsx("span", { children: "Due at visit" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(dueAtVisit) })] })) : null] }), _jsxs("div", { className: "bw-pay-card", children: [_jsx("label", { className: "bw-label", children: "Card details" }), _jsx("div", { className: "bw-pay-card-slot", children: _jsxs("div", { className: "bw-pay-card-stub", children: [_jsxs("div", { className: "bw-pay-card-stub-row", children: [_jsx("span", { className: "bw-pay-card-stub-label", children: "Card number" }), _jsx("span", { className: "bw-pay-card-stub-value", children: "1234 1234 1234 1234" })] }), _jsxs("div", { className: "bw-pay-card-stub-grid", children: [_jsx("div", { className: "bw-pay-card-stub-row", children: _jsx("span", { className: "bw-pay-card-stub-label", children: "MM / YY" }) }), _jsx("div", { className: "bw-pay-card-stub-row", children: _jsx("span", { className: "bw-pay-card-stub-label", children: "CVC" }) }), _jsx("div", { className: "bw-pay-card-stub-row", children: _jsx("span", { className: "bw-pay-card-stub-label", children: "ZIP" }) })] })] }) }), _jsxs("p", { className: "bw-pay-secure", children: [_jsx("span", { "aria-hidden": "true", children: "\uD83D\uDD12" }), " Payments are processed securely by Stripe."] })] })] }));
+}
+function IntakeFormFields({ form, responses, onChange, idPrefix, mode, }) {
+    if (!form || form.sections.length === 0)
+        return null;
+    return (_jsx("div", { className: "bw-intake", children: form.sections
+            .filter((section) => !section.showWhenPath || section.showWhenPath === mode)
+            .map((section) => (_jsxs("div", { className: "bw-intake-section", children: [_jsx("div", { className: "bw-intake-title", children: section.titleEs ?? section.title ?? section.titleEn ?? section.id }), _jsx("div", { className: "bw-form-fields", children: section.fields.map((field) => (_jsx(IntakeField, { field: field, value: responses[field.id], onChange: (value) => onChange(field.id, value), idPrefix: `${idPrefix}-${section.id}` }, field.id))) })] }, section.id))) }));
+}
+function areRequiredIntakeFieldsComplete(form, responses, mode) {
+    return form.sections
+        .filter((section) => !section.showWhenPath || section.showWhenPath === mode)
+        .every((section) => section.fields.every((field) => {
+        const minItems = field.type === 'repeatable-group' && field.id === 'boxes'
+            ? Math.max(1, Math.round(readFiniteNumber(responses.box_count, 1)))
+            : undefined;
+        return isRequiredIntakeFieldComplete(field, responses[field.id], minItems);
+    }));
+}
+function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, selectedDate, selectedSlot, holdId, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, }) {
+    const blockers = [];
+    if (selectedServiceRequiresSlot && (!selectedDate || !selectedSlot || !holdId)) {
+        blockers.push('Date and time');
+    }
+    if (!customerName.trim())
+        blockers.push('Contact: Full name');
+    if (!customerEmail.trim()) {
+        blockers.push('Contact: Email');
+    }
+    else if (!isValidEmailAddress(customerEmail)) {
+        blockers.push('Contact: Enter a valid email address');
+    }
+    if (!isIntakeComplete && selectedService.intakeForm) {
+        blockers.push(...getMissingRequiredIntakeLabels(selectedService.intakeForm, intakeResponses, selectedServicePath));
+    }
+    if (selectedService.pricingMode === 'calculated' &&
+        isIntakeComplete &&
+        !quote) {
+        blockers.push('Calculated price');
+    }
+    return Array.from(new Set(blockers));
+}
+function isValidEmailAddress(value) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+}
+function getMissingRequiredIntakeLabels(form, responses, mode) {
+    const missing = [];
+    for (const section of form.sections) {
+        if (section.showWhenPath && section.showWhenPath !== mode)
+            continue;
+        const sectionLabel = getIntakeSectionLabel(section);
+        for (const field of section.fields) {
+            const minItems = field.type === 'repeatable-group' && field.id === 'boxes'
+                ? Math.max(1, Math.round(readFiniteNumber(responses.box_count, 1)))
+                : undefined;
+            collectMissingIntakeFieldLabels(field, responses[field.id], sectionLabel, missing, minItems);
+        }
+    }
+    return missing;
+}
+function collectMissingIntakeFieldLabels(field, value, sectionLabel, missing, minItems) {
+    if (!field.required)
+        return;
+    if (field.type !== 'repeatable-group') {
+        if (!isRequiredIntakeFieldComplete(field, value)) {
+            missing.push(`${sectionLabel}: ${getIntakeFieldLabel(field)}`);
+        }
+        return;
+    }
+    const fieldLabel = getIntakeFieldLabel(field);
+    const items = Array.isArray(value) ? value : [];
+    const requiredItemCount = Math.max(minItems ?? 1, items.length || 1);
+    if (items.length < requiredItemCount) {
+        missing.push(`${sectionLabel}: ${fieldLabel}`);
+    }
+    for (let index = 0; index < requiredItemCount; index += 1) {
+        const item = items[index];
+        const record = item && typeof item === 'object' && !Array.isArray(item)
+            ? item
+            : {};
+        for (const child of field.fields ?? []) {
+            if (!child.required)
+                continue;
+            if (!isRequiredIntakeFieldComplete(child, record[child.id])) {
+                missing.push(`${sectionLabel}: Caja ${index + 1} ${getIntakeFieldLabel(child)}`);
+            }
+        }
+    }
+}
+function getIntakeSectionLabel(section) {
+    return section.titleEs ?? section.title ?? section.titleEn ?? section.id;
+}
+function getIntakeFieldLabel(field) {
+    return field.labelEs ?? field.label ?? field.labelEn ?? field.id;
+}
+function isRequiredIntakeFieldComplete(field, value, minItems) {
+    if (!field.required)
+        return true;
+    if (field.type === 'checkbox') {
+        return value === true;
+    }
+    if (field.type === 'repeatable-group') {
+        if (!Array.isArray(value) || value.length < (minItems ?? 1))
+            return false;
+        return value.every((item) => {
+            const record = item && typeof item === 'object' && !Array.isArray(item)
+                ? item
+                : {};
+            return (field.fields ?? []).every((child) => isRequiredIntakeFieldComplete(child, record[child.id]));
+        });
+    }
+    if (field.type === 'number') {
+        if (typeof value === 'number')
+            return Number.isFinite(value);
+        if (typeof value === 'string')
+            return value.trim().length > 0 && Number.isFinite(Number(value));
+        return false;
+    }
+    return typeof value === 'string' && value.trim().length > 0;
+}
+function readFiniteNumber(value, fallback) {
+    if (typeof value === 'number' && Number.isFinite(value))
+        return value;
+    if (typeof value === 'string' && value.trim()) {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed))
+            return parsed;
+    }
+    return fallback;
+}
+function IntakeField({ field, value, onChange, idPrefix, }) {
+    const id = `${idPrefix}-${field.id}`;
+    const label = field.labelEs ?? field.label ?? field.labelEn ?? field.id;
+    const stringValue = typeof value === 'string' || typeof value === 'number' ? String(value) : '';
+    if (field.type === 'repeatable-group') {
+        const items = Array.isArray(value) && value.length > 0 ? value : [{}];
+        return (_jsxs("div", { className: "bw-field bw-field--wide bw-repeatable", children: [_jsx("label", { children: label }), items.map((item, index) => {
+                    const record = item && typeof item === 'object' && !Array.isArray(item) ? item : {};
+                    return (_jsxs("div", { className: "bw-repeatable-item", children: [_jsxs("div", { className: "bw-repeatable-head", children: [_jsxs("span", { children: ["Caja ", index + 1] }), items.length > 1 ? (_jsx("button", { type: "button", className: "bw-link-btn", onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: "Quitar" })) : null] }), _jsx("div", { className: "bw-form-fields", children: (field.fields ?? []).map((child) => (_jsx(IntakeField, { field: child, value: record[child.id], idPrefix: `${id}-${index}`, onChange: (nextValue) => {
+                                        const nextItems = [...items];
+                                        nextItems[index] = { ...record, [child.id]: nextValue };
+                                        onChange(nextItems);
+                                    } }, child.id))) })] }, index));
+                }), _jsx("button", { type: "button", className: "bw-secondary-btn", onClick: () => onChange([...items, {}]), children: "Agregar otra caja" })] }));
+    }
+    if (field.type === 'checkbox') {
+        return (_jsxs("div", { className: "bw-field bw-field--wide bw-checkbox-field", children: [_jsxs("label", { htmlFor: id, children: [_jsx("input", { id: id, type: "checkbox", checked: value === true, onChange: (event) => onChange(event.target.checked) }), _jsxs("span", { children: [label, field.required ? ' *' : ''] })] }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
+    }
+    if (field.type === 'select') {
+        return (_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: id, children: [label, field.required ? _jsx("span", { className: "bw-required", children: " *" }) : null] }), _jsxs("select", { id: id, value: stringValue, required: field.required, onChange: (event) => onChange(event.target.value), children: [_jsx("option", { value: "", children: "Selecciona" }), (field.options ?? []).map((option) => (_jsx("option", { value: option.value, children: option.labelEs ?? option.labelEn ?? option.label }, option.value)))] }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
+    }
+    if (field.type === 'textarea') {
+        return (_jsxs("div", { className: "bw-field bw-field--wide", children: [_jsxs("label", { htmlFor: id, children: [label, field.required ? _jsx("span", { className: "bw-required", children: " *" }) : null] }), _jsx("textarea", { id: id, rows: 3, required: field.required, value: stringValue, placeholder: field.placeholder, onChange: (event) => onChange(event.target.value) }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
+    }
+    return (_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: id, children: [label, field.required ? _jsx("span", { className: "bw-required", children: " *" }) : null] }), _jsx("input", { id: id, type: field.type === 'email' ? 'email' : field.type === 'number' ? 'number' : 'text', min: field.min, max: field.max, required: field.required, value: stringValue, placeholder: field.placeholder, onChange: (event) => {
+                    onChange(field.type === 'number'
+                        ? event.target.value === ''
+                            ? ''
+                            : Number(event.target.value)
+                        : event.target.value);
+                } }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
+}
+function StripePaymentBlock({ payment, appointmentId, showInlineButton = true, actionTarget, onSuccess, onError, }) {
+    const stripePromise = useMemo(() => getStripePromise(payment.publishableKey, payment.connectAccountId), [payment.connectAccountId, payment.publishableKey]);
+    return (_jsx(Elements, { stripe: stripePromise, options: {
+            clientSecret: payment.clientSecret,
+        }, children: _jsx(StripePaymentForm, { amountCents: payment.amountCents, currency: payment.currency, appointmentId: appointmentId, showInlineButton: showInlineButton, actionTarget: actionTarget, onSuccess: onSuccess, onError: onError }) }));
+}
+function StripePaymentForm({ amountCents, currency, appointmentId, showInlineButton = true, actionTarget, onSuccess, onError, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [isPaying, setIsPaying] = useState(false);
+    async function handlePay() {
+        if (!stripe || !elements)
+            return;
+        setIsPaying(true);
+        const result = await stripe.confirmPayment({
+            elements,
+            confirmParams: {
+                return_url: `${window.location.origin}${window.location.pathname}?appointment_id=${appointmentId ?? ''}`,
+            },
+            redirect: 'if_required',
+        });
+        setIsPaying(false);
+        if (result.error) {
+            onError(result.error.message ?? 'Payment failed. Please try again.');
+            return;
+        }
+        onSuccess();
+    }
+    const renderPayButton = () => (_jsxs("button", { type: "button", className: "bw-confirm-btn", disabled: !stripe || !elements || isPaying, onClick: () => void handlePay(), children: [_jsx("span", { children: isPaying ? 'Procesando...' : 'Pagar y confirmar' }), !isPaying ? _jsx(ArrowRightIcon, {}) : null] }));
+    return (_jsxs("div", { className: "bw-pay", children: [_jsx("div", { className: "bw-pay-summary", children: _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--strong", children: [_jsx("span", { children: "Total due today" }), _jsx("span", { className: "bw-pay-summary-val", children: currencyFormatter(currency).format(amountCents / 100) })] }) }), _jsxs("div", { className: "bw-pay-card", children: [_jsx("label", { className: "bw-label", children: "Pago seguro" }), _jsx("div", { className: "bw-pay-card-slot", children: _jsx(PaymentElement, {}) })] }), showInlineButton ? renderPayButton() : null, actionTarget ? createPortal(renderPayButton(), actionTarget) : null] }));
+}
+function ServiceWarningCallout({ warning }) {
+    return (_jsxs("div", { className: "bw-service-warning", role: "alert", children: [_jsx("div", { className: "bw-service-warning-icon", "aria-hidden": "true", children: _jsx(WarningIcon, {}) }), _jsxs("div", { className: "bw-service-warning-copy", children: [_jsx("div", { className: "bw-service-warning-title", children: warning.title }), _jsx("p", { children: warning.body }), warning.linkHref && warning.linkLabel ? (_jsx("a", { href: warning.linkHref, className: "bw-service-warning-link", children: warning.linkLabel })) : null] })] }));
+}
+function formatPrice(service) {
+    if (!service)
+        return '';
+    return formatServicePrice(service);
+}
+function formatServicePrice(service, quote) {
+    if (service.pricingMode === 'calculated') {
+        if (quote) {
+            return currencyFormatter(quote.currency).format(quote.totalCents / 100);
+        }
+        return 'Price calculated after details';
+    }
+    return currencyFormatter(service.currency).format(service.priceCents / 100);
+}
+function getServiceWarning(service, mode) {
+    if (!service || mode !== 'async')
+        return null;
+    const warning = readRecord(service.publicCopy?.remoteWarning);
+    if (!warning)
+        return null;
+    const title = readString(warning.titleEs) ?? readString(warning.title);
+    const body = readString(warning.bodyEs) ?? readString(warning.body);
+    if (!title || !body)
+        return null;
+    return {
+        title,
+        body,
+        linkHref: readString(warning.linkHref) ?? undefined,
+        linkLabel: readString(warning.linkLabelEs) ?? readString(warning.linkLabel) ?? undefined,
+    };
+}
+function readRecord(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    return value;
+}
+function readString(value) {
+    return typeof value === 'string' && value.trim() ? value : null;
 }
 function BookingWidgetSkeleton() {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bw-header", children: [_jsx("div", { className: "bw-skel bw-skel--title" }), _jsx("div", { className: "bw-skel bw-skel--text bw-skel--text-lg" })] }), _jsxs("div", { className: "bw-body bw-skel-desktop", children: [_jsxs("div", { className: "bw-col", children: [_jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel-list", children: Array.from({ length: 5 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--card" }, index))) })] }), _jsxs("div", { className: "bw-col", children: [_jsx("div", { className: "bw-skel bw-skel--calendar" }), _jsx("div", { className: "bw-skel-slots", children: _jsx("div", { className: "bw-skel-slots-grid", children: Array.from({ length: 8 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--slot" }, index))) }) })] }), _jsxs("div", { className: "bw-col", children: [_jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel bw-skel--textarea" })] })] }), _jsxs("div", { className: "bw-skel-mobile", children: [_jsx("div", { className: "bw-skel bw-skel--title" }), _jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel bw-skel--card" }), _jsx("div", { className: "bw-skel bw-skel--card" }), _jsx("div", { className: "bw-skel bw-skel--card" })] })] }));
+    // Mirrors the live widget's DOM at first load so the chrome
+    // doesn't reflow when real content arrives. Three-column body on
+    // desktop (services / calendar / slots), single-column on mobile.
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "bw-header", children: _jsx("div", { className: "bw-skel bw-skel--title" }) }), _jsx("div", { className: "bw-content", children: _jsxs("div", { className: "bw-body bw-skel-body", children: [_jsx("div", { className: "bw-col bw-col--left", children: _jsx("div", { className: "bw-step-1", children: _jsxs("div", { className: "bw-service-picker", children: [_jsx("div", { className: "bw-skel bw-skel--label" }), [
+                                            { rows: 1 },
+                                            { rows: 2 },
+                                            { rows: 1 },
+                                        ].map((group, groupIndex) => (_jsxs("div", { className: "bw-skel-svc-group", children: [_jsx("div", { className: "bw-skel bw-skel--svc-category" }), Array.from({ length: group.rows }).map((_, rowIndex) => (_jsxs("div", { className: "bw-skel-svc-row", children: [_jsx("div", { className: "bw-skel bw-skel--svc-image" }), _jsxs("div", { className: "bw-skel-svc-info", children: [_jsx("div", { className: "bw-skel bw-skel--svc-name" }), _jsx("div", { className: "bw-skel bw-skel--svc-desc" }), _jsx("div", { className: "bw-skel bw-skel--svc-meta" })] })] }, rowIndex)))] }, groupIndex)))] }) }) }), _jsx("div", { className: "bw-col bw-col--center", children: _jsxs("div", { className: "bw-cal-card bw-skel-cal-card", children: [_jsxs("div", { className: "bw-skel-cal-header", children: [_jsx("div", { className: "bw-skel bw-skel--cal-month" }), _jsxs("div", { className: "bw-skel-cal-navs", children: [_jsx("div", { className: "bw-skel bw-skel--cal-nav" }), _jsx("div", { className: "bw-skel bw-skel--cal-nav" })] })] }), _jsx("div", { className: "bw-skel-cal-dows", children: Array.from({ length: 7 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--cal-dow" }, index))) }), _jsx("div", { className: "bw-skel-cal-grid", children: Array.from({ length: 42 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--cal-day" }, index))) }), _jsx("div", { className: "bw-skel bw-skel--cal-tz" })] }) }), _jsx("div", { className: "bw-col bw-col--right", children: _jsxs("div", { className: "bw-pane--slots", children: [_jsx("div", { className: "bw-skel bw-skel--slots-heading" }), _jsx("div", { className: "bw-time-slots bw-time-slots--skeleton", children: Array.from({ length: 8 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--slot" }, index))) })] }) })] }) })] }));
 }
 function AvailabilitySkeleton() {
-    return (_jsx("div", { className: "bw-skel-slots", children: _jsx("div", { className: "bw-skel-slots-grid", children: Array.from({ length: 8 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--slot" }, index))) }) }));
+    // Reuses .bw-time-slots so the skeleton inherits the same layout
+    // overrides as the real slots — vertical 1-col on desktop (via the
+    // .bw-slots-desktop scope), 4-col grid on mobile (default). Pill
+    // dimensions match the rendered .bw-slot.
+    return (_jsx("div", { className: "bw-time-slots bw-time-slots--skeleton", children: Array.from({ length: 8 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--slot" }, index))) }));
+}
+/**
+ * Compact "Wed, May 6 · 3:00 PM – 5:00 PM" label used in reschedule
+ * summary's "Former time" row. Uses local timezone of the browser;
+ * the backend stores absolute ms timestamps so this renders correctly
+ * for the host's calendar.
+ */
+function formatFormerSlot(startMs, endMs) {
+    const start = new Date(startMs);
+    const end = new Date(endMs);
+    const dateLabel = start.toLocaleDateString([], {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+    });
+    const timeOpts = {
+        hour: 'numeric',
+        minute: '2-digit',
+    };
+    return `${dateLabel} · ${start.toLocaleTimeString([], timeOpts)} – ${end.toLocaleTimeString([], timeOpts)}`;
+}
+/**
+ * Possessive form of a name. "Eric Lan" → "Eric Lan's", "James" →
+ * "James'". Splits on the full string's last char so single-name
+ * customers (and last-name-only handles, etc.) still resolve cleanly.
+ */
+function formatPossessive(name) {
+    const trimmed = name.trim();
+    if (!trimmed)
+        return trimmed;
+    const last = trimmed[trimmed.length - 1];
+    if (last === 's' || last === 'S')
+        return `${trimmed}'`;
+    return `${trimmed}'s`;
 }
 function mobileStepTitle(step) {
     switch (step) {
         case 1:
-            return 'Schedule your visit';
+            return 'Choose a service';
         case 2:
-            return 'Select your service';
+            return 'Pick a provider';
         case 3:
             return 'Pick a date & time';
         case 4:
@@ -507,7 +1317,8 @@ function mobileStepTitle(step) {
 }
 function formatDuration(minutes) {
     if (minutes >= 60 && minutes % 60 === 0) {
-        return `${minutes / 60} hr`;
+        const hours = minutes / 60;
+        return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
     }
     return `${minutes} min`;
 }
@@ -667,10 +1478,22 @@ function ArrowRightIcon() {
 function CheckIcon() {
     return iconPath('M20 6 9 17l-5-5');
 }
+function XIcon() {
+    return iconPath('M18 6 6 18M6 6l12 12');
+}
+function WarningIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }), _jsx("path", { d: "M12 9v4" }), _jsx("path", { d: "M12 17h.01" })] }));
+}
 function UserIcon() {
     return iconPath('M20 21a8 8 0 0 0-16 0m8-10a4 4 0 1 0 0-8 4 4 0 0 0 0 8');
 }
 function GlobeIcon() {
     return iconPath('M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 0c2.5 2.7 4 6.2 4 10s-1.5 7.3-4 10c-2.5-2.7-4-6.2-4-10s1.5-7.3 4-10ZM2 12h20');
 }
+function CalendarIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })] }));
+}
+function ClockIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 6v6l4 2" })] }));
+}
 //# sourceMappingURL=booking-widget.js.map