@asksable/site-connector 0.3.1 → 0.4.0

package/dist/booking-widget.js

@@ -1,22 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+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 { Elements, PaymentElement, useElements, useStripe, } from '@stripe/react-stripe-js';
 import { Skeleton } from 'boneyard-js/react';
 // Side-effect: registers all named bones with the boneyard runtime.
 // Regenerate by running `npx boneyard-js build` against a host site
 // that mounts <BookingWidgetPanel /> in its loaded state.
 import './bones/registry.js';
-import { useSableSiteClient, useSableSiteConfig, useTranslation } from './provider.js';
-import { DEFAULT_LOCALE, localeToIntl, pickLocaleField } from './translations.js';
+import { BookingWidgetPlaceholder } from './booking-widget-placeholder.js';
+import { useSableSiteAnalytics, useSableSiteClient, useSableSiteConfig, useTranslation, } from './provider.js';
+import { DEFAULT_LOCALE, localeToIntl, pickLocaleField, } from './translations.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 });
+    const promise = loadStripe(publishableKey, {
+        stripeAccount: connectAccountId,
+    });
     stripePromises.set(key, promise);
     return promise;
 }
@@ -51,6 +54,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const client = useSableSiteClient();
     const { siteSlug } = useSableSiteConfig();
     const { t, locale } = useTranslation();
+    const analytics = useSableSiteAnalytics();
     const intlLocale = localeToIntl(locale);
     const [setup, setSetup] = useState(null);
     const [isSetupLoading, setIsSetupLoading] = useState(true);
@@ -103,7 +107,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // 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') {
+        analytics.capture('sable_booking_widget_viewed', { mode });
+    }, [analytics, mode]);
+    useEffect(() => {
+        if (__devForceState === 'payment-full' ||
+            __devForceState === 'payment-deposit') {
             setViewState('details');
         }
     }, [__devForceState]);
@@ -176,7 +184,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         })
             .catch((nextError) => {
             if (!cancelled) {
-                setError(nextError instanceof Error ? nextError.message : 'Unable to load booking setup.');
+                setError(nextError instanceof Error
+                    ? nextError.message
+                    : 'Unable to load booking setup.');
             }
         })
             .finally(() => {
@@ -188,9 +198,12 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             cancelled = true;
         };
     }, [client, siteSlug]);
-    const selectedService = useMemo(() => setup?.services.find((service) => service._id === selectedServiceId) ?? null, [selectedServiceId, setup]);
+    const selectedService = useMemo(() => setup?.services.find((service) => service._id === selectedServiceId) ??
+        null, [selectedServiceId, setup]);
     const selectedServiceRequiresSlot = selectedService?.publicBookingMode !== 'async';
-    const selectedServicePath = selectedServiceRequiresSlot ? 'scheduled' : 'async';
+    const selectedServicePath = selectedServiceRequiresSlot
+        ? 'scheduled'
+        : 'async';
     const selectedServiceHasIntakeForm = hasIntakeFormSections(selectedService);
     const isIntakeComplete = useMemo(() => !selectedService?.intakeForm ||
         areRequiredIntakeFieldsComplete(selectedService.intakeForm, intakeResponses, selectedServicePath), [intakeResponses, selectedService?.intakeForm, selectedServicePath]);
@@ -216,7 +229,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         const uncategorizedKey = '__uncategorized__';
         for (const service of visibleServices) {
             const category = service.categoryId != null
-                ? categoriesById.get(service.categoryId) ?? null
+                ? (categoriesById.get(service.categoryId) ?? null)
                 : null;
             const key = category?._id ?? uncategorizedKey;
             const existing = groups.get(key);
@@ -285,7 +298,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         // wiped on the first render before the staff list arrives.
         if (availableStaff.length === 0)
             return;
-        if (selectedStaffId && !availableStaff.some((staffMember) => staffMember._id === selectedStaffId)) {
+        if (selectedStaffId &&
+            !availableStaff.some((staffMember) => staffMember._id === selectedStaffId)) {
             setSelectedStaffId(null);
         }
     }, [availableStaff, selectedStaffId]);
@@ -350,7 +364,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             if (!cancelled) {
                 setAvailabilityByDate(new Map());
                 setSelectedDate(null);
-                setError(nextError instanceof Error ? nextError.message : t('calendarLoadError'));
+                setError(nextError instanceof Error
+                    ? nextError.message
+                    : t('calendarLoadError'));
             }
         })
             .finally(() => {
@@ -361,7 +377,15 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         return () => {
             cancelled = true;
         };
-    }, [calendarMonth, client, selectedDate, selectedService?.publicBookingMode, selectedServiceId, selectedStaffId, siteSlug]);
+    }, [
+        calendarMonth,
+        client,
+        selectedDate,
+        selectedService?.publicBookingMode,
+        selectedServiceId,
+        selectedStaffId,
+        siteSlug,
+    ]);
     useEffect(() => {
         if (!selectedServiceId || selectedService?.publicBookingMode === 'async') {
             return;
@@ -374,7 +398,14 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             calendarMonth: nextMonth,
             cacheRef: availabilityCacheRef,
         });
-    }, [calendarMonth, client, selectedService?.publicBookingMode, selectedServiceId, selectedStaffId, siteSlug]);
+    }, [
+        calendarMonth,
+        client,
+        selectedService?.publicBookingMode,
+        selectedServiceId,
+        selectedStaffId,
+        siteSlug,
+    ]);
     useEffect(() => {
         setSelectedSlot(null);
         setPendingSlotKey(null);
@@ -393,7 +424,12 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         else {
             setViewState('slots');
         }
-    }, [selectedDate, selectedService?.publicBookingMode, selectedServiceId, selectedStaffId]);
+    }, [
+        selectedDate,
+        selectedService?.publicBookingMode,
+        selectedServiceId,
+        selectedStaffId,
+    ]);
     useEffect(() => {
         setIntakeResponses({});
         setQuote(null);
@@ -423,7 +459,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             })
                 .catch((nextError) => {
                 if (!cancelled) {
-                    setError(nextError instanceof Error ? nextError.message : 'Unable to calculate price.');
+                    setError(nextError instanceof Error
+                        ? nextError.message
+                        : 'Unable to calculate price.');
                 }
             })
                 .finally(() => {
@@ -435,7 +473,14 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             cancelled = true;
             window.clearTimeout(handle);
         };
-    }, [client, intakeResponses, isIntakeComplete, selectedService?.pricingMode, selectedServiceId, siteSlug]);
+    }, [
+        client,
+        intakeResponses,
+        isIntakeComplete,
+        selectedService?.pricingMode,
+        selectedServiceId,
+        siteSlug,
+    ]);
     useEffect(() => {
         return () => {
             if (!holdId) {
@@ -575,9 +620,15 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         }
         return set;
     }, [availabilityByDate, selectedDate]);
-    const selectedDateSlots = selectedDate ? filteredAvailabilityByDate.get(selectedDate) ?? [] : [];
-    const selectedHeldStaff = availableStaff.find((staffMember) => staffMember._id === heldStaffId) ?? selectedStaff ?? null;
-    const holdSecondsRemaining = holdExpiresAt !== null ? Math.max(0, Math.floor((holdExpiresAt - holdNow) / 1000)) : null;
+    const selectedDateSlots = selectedDate
+        ? (filteredAvailabilityByDate.get(selectedDate) ?? [])
+        : [];
+    const selectedHeldStaff = availableStaff.find((staffMember) => staffMember._id === heldStaffId) ??
+        selectedStaff ??
+        null;
+    const holdSecondsRemaining = holdExpiresAt !== null
+        ? Math.max(0, Math.floor((holdExpiresAt - holdNow) / 1000))
+        : null;
     const monthOptions = useMemo(() => getMonthOptions(calendarMonth, 4, intlLocale), [calendarMonth, intlLocale]);
     const calendarDays = useMemo(() => buildCalendarDays(calendarMonth), [calendarMonth]);
     // Mobile 4-step gates. canAdvanceStepN = "the user can move PAST
@@ -622,11 +673,15 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 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 ? t('slotSecuring') : formatTimeLabel(slot.time, intlLocale) }, slotKey));
+                    (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
+                        ? t('slotSecuring')
+                        : formatTimeLabel(slot.time, intlLocale) }, slotKey));
             }) })) : (_jsx("p", { className: "bw-no-slots", children: t('slotsEmptyForDate') }))) : null }, slotsAreaKey));
     const canSubmit = Boolean(selectedService &&
-        (!selectedServiceRequiresSlot || (selectedDate && selectedSlot && holdId)) &&
+        (!selectedServiceRequiresSlot ||
+            (selectedDate && selectedSlot && holdId)) &&
         isIntakeComplete &&
         (selectedService.pricingMode !== 'calculated' || quote) &&
         customerName.trim() &&
@@ -667,7 +722,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             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 ? t('helpCalculating') : t('helpComplete') }), !isQuoteLoading && visibleBlockers.length > 0 ? (_jsxs("ul", { children: [visibleBlockers.map((blocker) => (_jsx("li", { children: blocker }, blocker))), hiddenCount > 0 ? _jsx("li", { children: t('helpMoreFields', { count: hiddenCount }) }) : null] })) : null] }));
+        return (_jsxs("div", { className: "bw-submit-help", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "bw-submit-help-title", children: isQuoteLoading ? t('helpCalculating') : t('helpComplete') }), !isQuoteLoading && visibleBlockers.length > 0 ? (_jsxs("ul", { children: [visibleBlockers.map((blocker) => (_jsx("li", { children: blocker }, blocker))), hiddenCount > 0 ? (_jsx("li", { children: t('helpMoreFields', { count: hiddenCount }) })) : null] })) : null] }));
     }
     function renderContactFields(idSuffix) {
         const nameId = `bw-name${idSuffix}`;
@@ -688,6 +743,12 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         return (_jsxs(_Fragment, { children: [contactFields, intakeFields] }));
     }
     function handleServiceSelect(service) {
+        analytics.capture('sable_booking_service_selected', {
+            service_id: service._id,
+            service_name: pickLocaleField(service, 'name', locale) ?? service.name,
+            booking_mode: service.publicBookingMode ?? 'scheduled',
+            requires_payment: service.requiresPayment === true,
+        });
         if (holdId) {
             void client
                 .releasePublicBookingHold({ siteSlug, holdId, sessionToken })
@@ -809,7 +870,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     async function handleConfirmBooking() {
         if (!selectedServiceId ||
             !selectedService ||
-            (selectedServiceRequiresSlot && (!selectedDate || !selectedSlot || !holdId))) {
+            (selectedServiceRequiresSlot &&
+                (!selectedDate || !selectedSlot || !holdId))) {
             return;
         }
         setIsSubmitting(true);
@@ -831,6 +893,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             try {
                 await onRescheduleSubmit({ newStartTime, newEndTime });
                 setSuccess(t('successRescheduleConfirmed'));
+                analytics.capture('sable_booking_rescheduled', {
+                    service_id: selectedServiceId,
+                    service_name: pickLocaleField(selectedService, 'name', locale) ??
+                        selectedService.name,
+                });
                 setMobileStep(4);
             }
             catch (nextError) {
@@ -848,11 +915,16 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 siteSlug,
                 serviceId: selectedServiceId,
                 staffMemberId: selectedServiceRequiresSlot
-                    ? heldStaffId ?? selectedStaffId ?? selectedSlot?.availableStaffIds[0]
+                    ? (heldStaffId ??
+                        selectedStaffId ??
+                        selectedSlot?.availableStaffIds[0])
                     : undefined,
                 startTime: newStartTime,
                 endTime: newEndTime,
-                timezone: selectedHeldStaff?.timezone ?? availableStaff[0]?.timezone ?? setup?.workspaceTimezone ?? 'UTC',
+                timezone: selectedHeldStaff?.timezone ??
+                    availableStaff[0]?.timezone ??
+                    setup?.workspaceTimezone ??
+                    'UTC',
                 deliveryMethod: selectedService.deliveryMethods[0] ?? 'in-person',
                 customerName: customerName.trim(),
                 customerEmail: customerEmail.trim(),
@@ -861,15 +933,34 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 intakeResponses,
                 quotedTotalCents: quote?.totalCents,
                 bookingHoldId: selectedServiceRequiresSlot ? holdId : undefined,
-                bookingSessionToken: selectedServiceRequiresSlot ? sessionToken : undefined,
+                bookingSessionToken: selectedServiceRequiresSlot
+                    ? sessionToken
+                    : undefined,
             });
             if (created.payment) {
+                analytics.capture('sable_booking_payment_started', {
+                    appointment_id: created.appointmentId,
+                    service_id: selectedServiceId,
+                    service_name: pickLocaleField(selectedService, 'name', locale) ??
+                        selectedService.name,
+                    amount_cents: created.payment.amountCents,
+                    currency: created.payment.currency,
+                });
                 setPayment(created.payment);
                 setPaymentAppointmentId(created.appointmentId);
                 setError(null);
                 return;
             }
             setSuccess(t('successBookingConfirmed'));
+            analytics.capture('sable_booking_created', {
+                appointment_id: created.appointmentId,
+                service_id: selectedServiceId,
+                service_name: pickLocaleField(selectedService, 'name', locale) ??
+                    selectedService.name,
+                booking_mode: selectedService.publicBookingMode ?? 'scheduled',
+                requires_payment: selectedService.requiresPayment === true,
+                quoted_total_cents: quote?.totalCents ?? null,
+            });
             setSelectedSlot(null);
             setPendingSlotKey(null);
             setHoldId(null);
@@ -886,7 +977,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setMobileStep(4);
         }
         catch (nextError) {
-            setError(nextError instanceof Error ? nextError.message : t('errorConfirmFailed'));
+            setError(nextError instanceof Error
+                ? nextError.message
+                : t('errorConfirmFailed'));
         }
         finally {
             setIsSubmitting(false);
@@ -894,9 +987,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     }
     if (isSetupLoading) {
         // Boneyard renders the bones JSON captured for "booking-widget"
-        // (see ./bones/booking-widget.bones.json). Children are an empty
-        // sentinel section since the bones own the layout during load.
-        return (_jsx(Skeleton, { name: "booking-widget", loading: true, children: _jsx("section", { className: "bw" }) }));
+        // (see ./bones/booking-widget.bones.json). The CSS placeholder is
+        // still rendered underneath so SSR and no-bones fallbacks reserve
+        // the full widget height instead of letting the footer jump upward.
+        return (_jsx(Skeleton, { name: "booking-widget", loading: true, fallback: _jsx(BookingWidgetPlaceholder, {}), children: _jsx(BookingWidgetPlaceholder, {}) }));
     }
     if (!setup || setup.services.length === 0) {
         return (_jsx("section", { className: "bw", children: _jsx("div", { className: "bw-empty", children: t('errorNoServices') }) }));
@@ -907,22 +1001,30 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                         }, children: t('cancelledCta') })] }) }));
     }
     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 ? t('successTitleReschedule') : t('successTitleCreate') }), _jsx("p", { className: "bw-done-text", children: isReschedule ? t('successBodyReschedule') : t('successBodyCreate') }), isReschedule ? null : (_jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
+        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
+                            ? t('successTitleReschedule')
+                            : t('successTitleCreate') }), _jsx("p", { className: "bw-done-text", children: isReschedule ? t('successBodyReschedule') : t('successBodyCreate') }), isReschedule ? null : (_jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
                             window.location.assign(successRedirectHref);
                         }, children: t('successCtaBackHome') }))] }) }));
     }
-    return (_jsx(Skeleton, { name: "booking-widget", loading: false, children: _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 ||
+    return (_jsx(Skeleton, { name: "booking-widget", loading: false, children: _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
-                                                ? t('rescheduleTitleNamed', { name: rescheduleContext.customerName })
+                                                ? t('rescheduleTitleNamed', {
+                                                    name: rescheduleContext.customerName,
+                                                })
                                                 : t('rescheduleTitle')
                                             : t('pageTitle')) }), _jsx("h2", { className: "bw-title bw-title--mobile", children: isReschedule
                                         ? rescheduleContext?.customerName
-                                            ? t('rescheduleTitleNamed', { name: rescheduleContext.customerName })
+                                            ? t('rescheduleTitleNamed', {
+                                                name: rescheduleContext.customerName,
+                                            })
                                             : t('rescheduleTitle')
                                         : mobileStepTitle(mobileStep, t) }), mobileStep > 1 ? (_jsx("div", { className: "bw-progress", "aria-hidden": "true", children: (selectedServiceRequiresSlot
                                         ? MOBILE_PROGRESS_STEPS_SCHEDULED
-                                        : MOBILE_PROGRESS_STEPS_ASYNC).map((step) => (_jsx("span", { className: `bw-dot${mobileStep >= step ? ' is-filled' : ''}` }, step))) })) : null] }), 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: t('selectedService') }), _jsx("button", { type: "button", className: "bw-svc-change", onClick: () => setIsEditingService(true), children: t('btnChange') })] }), _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 ?? pickLocaleField(selectedService, 'name', locale) ?? 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: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name }), pickLocaleField(selectedService, 'description', locale) ?? selectedService.description ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(selectedService, 'description', locale) ?? 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, undefined, intlLocale) })] })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("label", { className: "bw-label", children: t('selectService') }), _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) => {
+                                        : MOBILE_PROGRESS_STEPS_ASYNC).map((step) => (_jsx("span", { className: `bw-dot${mobileStep >= step ? ' is-filled' : ''}` }, step))) })) : null] }), 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: t('selectedService') }), _jsx("button", { type: "button", className: "bw-svc-change", onClick: () => setIsEditingService(true), children: t('btnChange') })] }), _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 ??
+                                                                                        pickLocaleField(selectedService, 'name', locale) ??
+                                                                                        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: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name }), (pickLocaleField(selectedService, 'description', locale) ?? selectedService.description) ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(selectedService, 'description', locale) ?? 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, undefined, intlLocale) })] })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("label", { className: "bw-label", children: t('selectService') }), _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({
@@ -942,8 +1044,12 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                                 });
                                                                                             }, 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 ?? pickLocaleField(service, 'name', locale) ?? 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: pickLocaleField(service, 'name', locale) ?? service.name }), pickLocaleField(service, 'description', locale) ?? service.description ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(service, 'description', locale) ?? 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, undefined, intlLocale) })] })] })] }, 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: t('selectProvider') }), providerRow] })) : null] }), _jsxs("div", { className: "bw-step-2", children: [_jsx("p", { className: "bw-step-2-heading", children: t('chooseYourService') }), _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) => {
+                                                                                            }, children: [service.image ? (_jsxs("span", { className: `bw-svc-image${isActive ? ' is-checked' : ''}`, children: [_jsx("img", { src: service.image.url, alt: service.image.alt ??
+                                                                                                                pickLocaleField(service, 'name', locale) ??
+                                                                                                                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: pickLocaleField(service, 'name', locale) ?? service.name }), (pickLocaleField(service, 'description', locale) ?? service.description) ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(service, 'description', locale) ?? 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, undefined, intlLocale) })] })] })] }, 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: t('selectProvider') }), providerRow] })) : null] }), _jsxs("div", { className: "bw-step-2", children: [_jsx("p", { className: "bw-step-2-heading", children: t('chooseYourService') }), _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({
@@ -963,12 +1069,16 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                 });
                                                                             }, 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 ?? pickLocaleField(service, 'name', locale) ?? 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: pickLocaleField(service, 'name', locale) ?? service.name }), pickLocaleField(service, 'description', locale) ?? service.description ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(service, 'description', locale) ?? 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, undefined, intlLocale) })] })] })] }), _jsx("div", { className: "bw-row-divider" })] }, service._id));
+                                                                            }, 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 ??
+                                                                                                pickLocaleField(service, 'name', locale) ??
+                                                                                                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: pickLocaleField(service, 'name', locale) ??
+                                                                                                service.name }), (pickLocaleField(service, 'description', locale) ?? service.description) ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(service, 'description', locale) ?? 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, undefined, intlLocale) })] })] })] }), _jsx("div", { className: "bw-row-divider" })] }, service._id));
                                                             })] }, group.key)))] })] }), _jsxs("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, intlLocale) }), _jsx(ChevronDownIcon, {})] }), monthOpen ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bw-month-overlay", "aria-label": t('closeMonthPicker'), 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) {
+                                                                            if (!sameMonth(calendarMonth, startOfMonth(new Date())) &&
+                                                                                selectedServiceId) {
                                                                                 void prefetchAvailability({
                                                                                     client,
                                                                                     siteSlug,
@@ -978,7 +1088,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                 });
                                                                             }
                                                                         }, onClick: () => setCalendarMonth((current) => addMonths(current, -1)), disabled: sameMonth(calendarMonth, startOfMonth(new Date())), "aria-label": t('prevMonth'), children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
-                                                                            if (!sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)) && selectedServiceId) {
+                                                                            if (!sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)) &&
+                                                                                selectedServiceId) {
                                                                                 void prefetchAvailability({
                                                                                     client,
                                                                                     siteSlug,
@@ -1008,22 +1119,53 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                 isSelected ? 'is-selected' : '',
                                                                 isAvailable && !isPast ? 'is-available' : '',
                                                                 isPast ? 'is-disabled' : '',
-                                                                !isAvailable && isCurrentMonth && !isPast ? 'is-blocked' : '',
-                                                                dateKey === formatDateKey(startOfDay(new Date())) ? 'is-today' : '',
+                                                                !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 < 2 ? 2 : current));
+                                                                    setMobileStep((current) => current < 2 ? 2 : current);
                                                                 }, children: day.getDate() }, dateKey));
-                                                        }) }), !selectedService ? (_jsx("p", { className: "bw-cal-prompt", children: t('calendarSelectServicePrompt') })) : null, _jsxs("div", { className: "bw-timezone", children: [_jsx(GlobeIcon, {}), _jsx("span", { children: selectedHeldStaff?.timezone ?? selectedStaff?.timezone ?? setup?.workspaceTimezone ?? setup?.staff?.[0]?.timezone ?? 'UTC' })] })] }), selectedService && !isEditingService ? (_jsxs("div", { className: "bw-mobile-card bw-provider-section--mobile", children: [_jsx("label", { className: "bw-label", children: t('selectProvider') }), providerRow] })) : null, selectedService && selectedDate ? (_jsxs("div", { className: "bw-mobile-card bw-slots-mobile", children: [_jsx("label", { className: "bw-label", children: t('selectTimePrompt') }), slotsArea] })) : null] }), _jsx("div", { className: "bw-col bw-col--review", "aria-hidden": mobileStep !== 4, children: selectedService ? (_jsxs("div", { className: "bw-summary bw-summary--review", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule ? t('summaryTitleReschedule') : t('summaryTitleCreate') }), holdSecondsRemaining !== null ? (_jsx("div", { className: "bw-summary-rows", children: _jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: t('summaryReservationHold') }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] }) })) : null, _jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('reviewBookingDetails') }), _jsxs("div", { className: "bw-summary-rows", children: [isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerTime') }), _jsx("span", { className: "bw-summary-val", style: { ...summaryValStyle, textDecoration: 'line-through', opacity: 0.55 }, children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime, intlLocale) })] })) : null, serviceChanged && formerService ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerService') }), _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: t('summaryFormerStaff') }), _jsx("span", { className: "bw-summary-val", style: { ...summaryValStyle, textDecoration: 'line-through', opacity: 0.55 }, children: formerStaffName ?? t('providerAny') })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryService') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryProvider') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ?? selectedStaff?.name ?? t('providerAny') })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDate') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate, intlLocale) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryTime') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time, intlLocale) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDuration') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatDuration(selectedService.durationMinutes) })] })] })] }), _jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('reviewYourDetails') }), _jsxs("div", { className: "bw-summary-rows", children: [_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('contactFullName') }), _jsx("span", { className: "bw-summary-val", children: customerName.trim() || t('reviewNotProvided') })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('contactEmail') }), _jsx("span", { className: "bw-summary-val", children: customerEmail.trim() || t('reviewNotProvided') })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('contactPhone') }), _jsx("span", { className: "bw-summary-val", children: customerPhone.trim() || t('reviewNotProvided') })] })] })] }), (() => {
+                                                        }) }), !selectedService ? (_jsx("p", { className: "bw-cal-prompt", children: t('calendarSelectServicePrompt') })) : null, _jsxs("div", { className: "bw-timezone", children: [_jsx(GlobeIcon, {}), _jsx("span", { children: selectedHeldStaff?.timezone ??
+                                                                    selectedStaff?.timezone ??
+                                                                    setup?.workspaceTimezone ??
+                                                                    setup?.staff?.[0]?.timezone ??
+                                                                    'UTC' })] })] }), selectedService && !isEditingService ? (_jsxs("div", { className: "bw-mobile-card bw-provider-section--mobile", children: [_jsx("label", { className: "bw-label", children: t('selectProvider') }), providerRow] })) : null, selectedService && selectedDate ? (_jsxs("div", { className: "bw-mobile-card bw-slots-mobile", children: [_jsx("label", { className: "bw-label", children: t('selectTimePrompt') }), slotsArea] })) : null] }), _jsx("div", { className: "bw-col bw-col--review", "aria-hidden": mobileStep !== 4, children: selectedService ? (_jsxs("div", { className: "bw-summary bw-summary--review", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule
+                                                        ? t('summaryTitleReschedule')
+                                                        : t('summaryTitleCreate') }), holdSecondsRemaining !== null ? (_jsx("div", { className: "bw-summary-rows", children: _jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: t('summaryReservationHold') }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] }) })) : null, _jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('reviewBookingDetails') }), _jsxs("div", { className: "bw-summary-rows", children: [isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerTime') }), _jsx("span", { className: "bw-summary-val", style: {
+                                                                                ...summaryValStyle,
+                                                                                textDecoration: 'line-through',
+                                                                                opacity: 0.55,
+                                                                            }, children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime, intlLocale) })] })) : null, serviceChanged && formerService ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerService') }), _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: t('summaryFormerStaff') }), _jsx("span", { className: "bw-summary-val", style: {
+                                                                                ...summaryValStyle,
+                                                                                textDecoration: 'line-through',
+                                                                                opacity: 0.55,
+                                                                            }, children: formerStaffName ?? t('providerAny') })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryService') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: pickLocaleField(selectedService, 'name', locale) ??
+                                                                                selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryProvider') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ??
+                                                                                selectedStaff?.name ??
+                                                                                t('providerAny') })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDate') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate, intlLocale) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryTime') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time, intlLocale) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDuration') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatDuration(selectedService.durationMinutes) })] })] })] }), _jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('reviewYourDetails') }), _jsxs("div", { className: "bw-summary-rows", children: [_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('contactFullName') }), _jsx("span", { className: "bw-summary-val", children: customerName.trim() || t('reviewNotProvided') })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('contactEmail') }), _jsx("span", { className: "bw-summary-val", children: customerEmail.trim() || t('reviewNotProvided') })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('contactPhone') }), _jsx("span", { className: "bw-summary-val", children: customerPhone.trim() || t('reviewNotProvided') })] })] })] }), (() => {
                                                     const intakeRows = buildIntakeReviewRows(selectedService.intakeForm, intakeResponses, selectedServicePath, locale, t);
                                                     if (intakeRows.length === 0)
                                                         return null;
                                                     return (_jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('reviewAdditionalInfo') }), _jsx("div", { className: "bw-summary-rows", children: intakeRows.map((row) => (_jsxs("div", { className: `bw-summary-row${row.multiline ? ' bw-summary-row--stack' : ''}`, children: [_jsx("span", { children: row.label }), _jsx("span", { className: "bw-summary-val", children: row.value })] }, row.key))) })] }));
-                                                })(), customerNotes.trim() ? (_jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: isReschedule ? t('notesLabelReschedule') : t('reviewNotesSection') }), _jsx("p", { className: "bw-summary-notes", children: customerNotes.trim() })] })) : null, _jsx("div", { className: "bw-summary-rows bw-summary-rows--total", children: _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: isQuoteLoading ? t('summaryCalculating') : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote, intlLocale) })] }) })] })) : null }), _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: [_jsxs("div", { className: `bw-pane bw-pane--slots${viewState === 'slots' ? ' is-active' : ' is-hidden'}`, "aria-hidden": viewState !== 'slots', children: [_jsxs("div", { className: "bw-slots-heading bw-slots-heading--sticky", children: [_jsx("span", { children: t('slotsHeading') }), selectedDateSlots.length > 0 ? (_jsx("span", { className: "bw-slots-count", children: selectedDateSlots.length })) : null] }), _jsx("div", { className: "bw-slots-desktop", children: 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: t('backToDifferentTime') })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: t('backToDifferentService') })] })), _jsxs("div", { className: "bw-form", children: [serviceWarning ? _jsx(ServiceWarningCallout, { warning: serviceWarning }) : null, renderIntakeAndContact('bw-intake', ''), renderNotesField('bw-notes', t('notesLabel'), t('notesPlaceholder')), selectedService ? (_jsxs("div", { className: "bw-summary", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule ? t('summaryTitleReschedule') : t('summaryTitleCreate') }), _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: t('summaryReservationHold') }), _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: t('summaryFormerTime') }), _jsx("span", { className: "bw-summary-val", style: {
+                                                })(), customerNotes.trim() ? (_jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: isReschedule
+                                                                ? t('notesLabelReschedule')
+                                                                : t('reviewNotesSection') }), _jsx("p", { className: "bw-summary-notes", children: customerNotes.trim() })] })) : null, _jsx("div", { className: "bw-summary-rows bw-summary-rows--total", children: _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: isQuoteLoading
+                                                                    ? t('summaryCalculating')
+                                                                    : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote, intlLocale) })] }) })] })) : null }), _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: [_jsxs("div", { className: `bw-pane bw-pane--slots${viewState === 'slots' ? ' is-active' : ' is-hidden'}`, "aria-hidden": viewState !== 'slots', children: [_jsxs("div", { className: "bw-slots-heading bw-slots-heading--sticky", children: [_jsx("span", { children: t('slotsHeading') }), selectedDateSlots.length > 0 ? (_jsx("span", { className: "bw-slots-count", children: selectedDateSlots.length })) : null] }), _jsx("div", { className: "bw-slots-desktop", children: 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: t('backToDifferentTime') })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: t('backToDifferentService') })] })), _jsxs("div", { className: "bw-form", children: [serviceWarning ? (_jsx(ServiceWarningCallout, { warning: serviceWarning })) : null, renderIntakeAndContact('bw-intake', ''), renderNotesField('bw-notes', t('notesLabel'), t('notesPlaceholder')), selectedService ? (_jsxs("div", { className: "bw-summary", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule
+                                                                                        ? t('summaryTitleReschedule')
+                                                                                        : t('summaryTitleCreate') }), _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: t('summaryReservationHold') }), _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: t('summaryFormerTime') }), _jsx("span", { className: "bw-summary-val", style: {
                                                                                                         ...summaryValStyle,
                                                                                                         textDecoration: 'line-through',
                                                                                                         opacity: 0.55,
@@ -1035,7 +1177,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                                         ...summaryValStyle,
                                                                                                         textDecoration: 'line-through',
                                                                                                         opacity: 0.55,
-                                                                                                    }, children: formerStaffName ?? t('providerAny') })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryService') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryProvider') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ?? selectedStaff?.name ?? t('providerAny') })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDate') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate, intlLocale) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryTime') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time, intlLocale) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDuration') }), _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 ? t('summaryCalculating') : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote, intlLocale) })] })] })] })) : null, error ? _jsx("div", { className: "bw-error", children: error }) : null, renderSubmitHelp(), payment ? (_jsx(StripePaymentBlock, { payment: payment, appointmentId: paymentAppointmentId, showInlineButton: false, actionTarget: mobilePaymentActionTarget, onSuccess: () => {
+                                                                                                    }, children: formerStaffName ?? t('providerAny') })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryService') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryProvider') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ??
+                                                                                                        selectedStaff?.name ??
+                                                                                                        t('providerAny') })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDate') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate, intlLocale) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryTime') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time, intlLocale) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDuration') }), _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
+                                                                                                        ? t('summaryCalculating')
+                                                                                                        : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote, intlLocale) })] })] })] })) : null, error ? (_jsx("div", { className: "bw-error", children: error })) : null, renderSubmitHelp(), payment ? (_jsx(StripePaymentBlock, { payment: payment, appointmentId: paymentAppointmentId, showInlineButton: false, actionTarget: mobilePaymentActionTarget, onSuccess: () => {
                                                                                 setSuccess(t('successPaymentReceived'));
                                                                                 setPayment(null);
                                                                             }, onError: setError })) : (_jsxs("button", { type: "button", className: `bw-confirm-btn${!canSubmit || isQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
@@ -1046,7 +1192,23 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                             ? t('btnConfirmReschedule')
                                                                                             : selectedServiceRequiresPayment
                                                                                                 ? t('btnContinueToPayment')
-                                                                                                : t('btnConfirmBooking') }), !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: t('backToDifferentTime') })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn bw-back-btn--details", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: t('backToDifferentService') })] })), _jsx("h3", { className: "bw-details-service", children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name }), pickLocaleField(selectedService, 'description', locale) ?? selectedService.description ? (_jsx("p", { className: "bw-details-desc", children: pickLocaleField(selectedService, 'description', locale) ?? 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: t('summaryFormerTime') }), _jsx("span", { className: "bw-details-meta-value", children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime, intlLocale) })] })] })) : 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 ? t('summaryNewTime') : t('summaryWhen') }), _jsxs("span", { className: "bw-details-meta-value", children: [formatReadableDate(selectedDate, intlLocale), _jsx("br", {}), formatTimeLabel(selectedSlot.time, intlLocale), " \u2013 ", formatTimeLabel(selectedSlot.endTime, intlLocale)] })] })] })) : 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 ?? t('providerAny') })] }), _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 ? t('summaryCalculating') : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-details-meta-value", children: formatServicePrice(selectedService, quote, intlLocale) })] })] }), 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: t('summaryReservationHold') }), _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 ? t('notesLabelReschedule') : t('notesLabel'), isReschedule ? t('notesPlaceholderReschedule') : t('notesPlaceholder')), 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: () => {
+                                                                                                : t('btnConfirmBooking') }), !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: t('backToDifferentTime') })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn bw-back-btn--details", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: t('backToDifferentService') })] })), _jsx("h3", { className: "bw-details-service", children: pickLocaleField(selectedService, 'name', locale) ??
+                                                    selectedService.name }), (pickLocaleField(selectedService, 'description', locale) ??
+                                                selectedService.description) ? (_jsx("p", { className: "bw-details-desc", children: pickLocaleField(selectedService, 'description', locale) ?? 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: t('summaryFormerTime') }), _jsx("span", { className: "bw-details-meta-value", children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime, intlLocale) })] })] })) : 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
+                                                                            ? t('summaryNewTime')
+                                                                            : t('summaryWhen') }), _jsxs("span", { className: "bw-details-meta-value", children: [formatReadableDate(selectedDate, intlLocale), _jsx("br", {}), formatTimeLabel(selectedSlot.time, intlLocale), " \u2013", ' ', formatTimeLabel(selectedSlot.endTime, intlLocale)] })] })] })) : 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 ??
+                                                                    t('providerAny') })] }), _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
+                                                                            ? t('summaryCalculating')
+                                                                            : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-details-meta-value", children: formatServicePrice(selectedService, quote, intlLocale) })] })] }), 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: t('summaryReservationHold') }), _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 ? t('notesLabelReschedule') : t('notesLabel'), isReschedule
+                                                ? t('notesPlaceholderReschedule')
+                                                : t('notesPlaceholder')), 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(t('successPaymentReceived'));
                                                     setPayment(null);
                                                 }, onError: setError })) : (_jsxs("button", { type: "button", className: `bw-confirm-btn${!canSubmit || isQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
@@ -1054,7 +1216,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                 ? t('btnRescheduling')
                                                                 : t('btnBooking')
                                                             : forcedState === 'payment-full'
-                                                                ? t('btnPayAndConfirm', { price: formatPrice(selectedService, intlLocale) })
+                                                                ? t('btnPayAndConfirm', {
+                                                                    price: formatPrice(selectedService, intlLocale),
+                                                                })
                                                                 : forcedState === 'payment-deposit'
                                                                     ? t('btnPayDepositAndConfirm')
                                                                     : isReschedule
@@ -1154,7 +1318,8 @@ function areRequiredIntakeFieldsComplete(form, responses, mode) {
 }
 function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, selectedDate, selectedSlot, holdId, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, t, locale = DEFAULT_LOCALE, }) {
     const blockers = [];
-    if (selectedServiceRequiresSlot && (!selectedDate || !selectedSlot || !holdId)) {
+    if (selectedServiceRequiresSlot &&
+        (!selectedDate || !selectedSlot || !holdId)) {
         blockers.push(t('blockerDateTime'));
     }
     if (!customerName.trim())
@@ -1282,7 +1447,9 @@ function buildIntakeReviewRows(form, responses, servicePath, locale, t) {
             continue;
         for (const field of section.fields) {
             if (field.type === 'repeatable-group') {
-                const items = Array.isArray(responses[field.id]) ? responses[field.id] : [];
+                const items = Array.isArray(responses[field.id])
+                    ? responses[field.id]
+                    : [];
                 items.forEach((item, index) => {
                     const record = item && typeof item === 'object' && !Array.isArray(item)
                         ? item
@@ -1487,7 +1654,9 @@ function IntakeField({ field, value, onChange, idPrefix, }) {
     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 : {};
+                    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: [_jsx("span", { children: t('repeatItemLabel', { index: index + 1 }) }), items.length > 1 ? (_jsx("button", { type: "button", className: "bw-link-btn", onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: t('repeatRemove') })) : 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 };
@@ -1511,7 +1680,11 @@ function IntakeField({ field, value, onChange, idPrefix, }) {
     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) => {
+    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 === ''
                             ? ''
@@ -1594,10 +1767,9 @@ function readString(value) {
     return typeof value === 'string' && value.trim() ? value : null;
 }
 // BookingWidgetSkeleton was a hand-built first-load ghost that
-// constantly drifted out of sync with the real layout. Replaced by
-// boneyard-js: BookingWidgetPanel wraps its main render in
-// <Skeleton name="booking-widget"> and `./bones/registry` ships
-// pre-captured bones JSON regenerated via `npx boneyard-js build`.
+// constantly drifted out of sync with the real layout. Boneyard now
+// owns the detailed bones; BookingWidgetPlaceholder is the stable
+// SSR/no-bones space holder and Suspense fallback for host sites.
 function AvailabilitySkeleton() {
     // Reuses .bw-time-slots so the skeleton inherits the same layout
     // overrides as the real slots — vertical 1-col on desktop (via the
@@ -1743,7 +1915,8 @@ function buildCalendarDays(month) {
     });
 }
 function sameMonth(left, right) {
-    return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+    return (left.getFullYear() === right.getFullYear() &&
+        left.getMonth() === right.getMonth());
 }
 function getMonthOptions(currentMonth, total, locale = 'en-US') {
     const start = startOfMonth(new Date());
@@ -1762,7 +1935,8 @@ function optionCurrentValue(date) {
 }
 function isDateInMonth(dateKey, month) {
     const date = new Date(`${dateKey}T00:00:00`);
-    return date.getMonth() === month.getMonth() && date.getFullYear() === month.getFullYear();
+    return (date.getMonth() === month.getMonth() &&
+        date.getFullYear() === month.getFullYear());
 }
 function findFirstAvailableDate(availabilityByDate, month) {
     const dates = [...availabilityByDate.entries()]