@asksable/site-connector 0.6.1 → 0.6.3

package/dist/booking-widget.js

@@ -11,6 +11,29 @@ import './bones/registry.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 FLEXIBLE_WINDOW_OPTIONS = [
+    {
+        id: 'all-day',
+        startTime: '09:00',
+        endTime: '17:00',
+        labelKey: 'flexWindowAllDay',
+        descriptionKey: 'flexWindowAllDayDesc',
+    },
+    {
+        id: 'morning',
+        startTime: '09:00',
+        endTime: '12:00',
+        labelKey: 'flexWindowMorning',
+        descriptionKey: 'flexWindowMorningDesc',
+    },
+    {
+        id: 'afternoon',
+        startTime: '12:00',
+        endTime: '17:00',
+        labelKey: 'flexWindowAfternoon',
+        descriptionKey: 'flexWindowAfternoonDesc',
+    },
+];
 const stripePromises = new Map();
 function getStripePromise(publishableKey, connectAccountId) {
     const key = `${publishableKey}:${connectAccountId}`;
@@ -35,7 +58,7 @@ function findCalculatedServiceMissingIntake(setup) {
 }
 const MOBILE_PROGRESS_STEPS_SCHEDULED = [1, 2, 3, 4];
 const MOBILE_PROGRESS_STEPS_ASYNC = [1, 3, 4];
-export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'create', rescheduleContext, onRescheduleSubmit, initialSelection, successRedirectHref = '/', __devForceState, __devForceSuccess, }) {
+export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'create', rescheduleContext, onRescheduleSubmit, initialSelection, allowFlexibleScheduling = false, defaultSchedulingPreference = 'exact', successRedirectHref = '/', __devForceState, __devForceSuccess, }) {
     const forcedState = __devForceState ?? (__devForceSuccess ? 'success' : null);
     const isReschedule = mode === 'reschedule';
     // Reschedule summary holds longer values (full former-time
@@ -52,7 +75,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         }
         : undefined;
     const client = useSableSiteClient();
-    const { siteSlug } = useSableSiteConfig();
+    const { siteSlug, timezone: configuredTimezone } = useSableSiteConfig();
     const { t, locale } = useTranslation();
     const analytics = useSableSiteAnalytics();
     const intlLocale = localeToIntl(locale);
@@ -71,6 +94,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const [isAvailabilityLoading, setIsAvailabilityLoading] = useState(false);
     const [selectedDate, setSelectedDate] = useState(null);
     const [selectedSlot, setSelectedSlot] = useState(null);
+    const [schedulingPreference, setSchedulingPreference] = useState(() => defaultSchedulingPreference === 'flexible' ? 'flexible' : 'exact');
+    const [selectedFlexibleWindowId, setSelectedFlexibleWindowId] = useState(() => FLEXIBLE_WINDOW_OPTIONS[0]?.id ?? 'all-day');
     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
@@ -119,6 +144,15 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setViewState('details');
         }
     }, [__devForceState]);
+    useEffect(() => {
+        if (!allowFlexibleScheduling) {
+            setSchedulingPreference('exact');
+            return;
+        }
+        if (defaultSchedulingPreference === 'flexible') {
+            setSchedulingPreference('flexible');
+        }
+    }, [allowFlexibleScheduling, defaultSchedulingPreference]);
     const [monthOpen, setMonthOpen] = useState(false);
     const [holdNow, setHoldNow] = useState(() => Date.now());
     const [sessionToken] = useState(() => sessionTokenFromBrowser());
@@ -131,6 +165,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const initialStaffMemberId = initialSelection?.staffMemberId;
     const initialCustomerNotes = initialSelection?.customerNotes;
     const initialIntakeResponses = initialSelection?.intakeResponses;
+    const initialQuoteOverride = useMemo(() => getInitialQuoteOverride(initialSelection), [initialSelection]);
     const availabilityCacheRef = useRef(new Map());
     const holdIdRef = useRef(null);
     // Calendar card lives in the middle column and is the natural
@@ -231,7 +266,23 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     ]);
     const selectedService = useMemo(() => setup?.services.find((service) => service._id === selectedServiceId) ??
         null, [selectedServiceId, setup]);
+    const selectedQuoteOverride = selectedService && initialQuoteOverride
+        ? getApplicableInitialQuoteOverride(initialSelection, selectedService, initialQuoteOverride)
+        : null;
+    const displayQuote = selectedService && selectedQuoteOverride
+        ? quoteFromOverride(selectedService, selectedQuoteOverride)
+        : quote;
+    const isDisplayQuoteLoading = isQuoteLoading && !displayQuote;
     const selectedServiceRequiresSlot = selectedService?.publicBookingMode !== 'async';
+    const flexibleSchedulingEnabled = allowFlexibleScheduling && selectedServiceRequiresSlot && !isReschedule;
+    const effectiveSchedulingPreference = flexibleSchedulingEnabled ? schedulingPreference : 'exact';
+    const selectedFlexibleWindow = FLEXIBLE_WINDOW_OPTIONS.find((option) => option.id === selectedFlexibleWindowId) ?? FLEXIBLE_WINDOW_OPTIONS[0];
+    const bookingTimezone = resolveBookingTimezone({
+        workspaceTimezone: setup?.workspaceTimezone,
+        configuredTimezone,
+        fallbackStaffTimezone: setup?.staff?.[0]?.timezone,
+    });
+    const todayDateKey = dateKeyInTimeZone(Date.now(), bookingTimezone);
     const selectedServicePath = selectedServiceRequiresSlot
         ? 'scheduled'
         : 'async';
@@ -341,6 +392,21 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setSelectedDate(null);
             return;
         }
+        if (effectiveSchedulingPreference === 'flexible') {
+            setAvailabilityByDate(new Map());
+            setIsAvailabilityLoading(false);
+            if (selectedDate &&
+                !isFlexibleDateSelectable({
+                    dateKey: selectedDate,
+                    service: selectedService,
+                    businessHours: setup?.businessHours ?? [],
+                    timezone: bookingTimezone,
+                    window: selectedFlexibleWindow,
+                })) {
+                setSelectedDate(null);
+            }
+            return;
+        }
         let cancelled = false;
         const monthStart = formatDateKey(calendarMonth);
         const monthEnd = formatDateKey(endOfMonth(calendarMonth));
@@ -411,14 +477,21 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     }, [
         calendarMonth,
         client,
+        bookingTimezone,
+        effectiveSchedulingPreference,
         selectedDate,
         selectedService?.publicBookingMode,
         selectedServiceId,
         selectedStaffId,
+        selectedFlexibleWindow,
+        selectedService,
+        setup?.businessHours,
         siteSlug,
     ]);
     useEffect(() => {
-        if (!selectedServiceId || selectedService?.publicBookingMode === 'async') {
+        if (!selectedServiceId ||
+            selectedService?.publicBookingMode === 'async' ||
+            effectiveSchedulingPreference === 'flexible') {
             return;
         }
         const nextMonth = addMonths(calendarMonth, 1);
@@ -432,6 +505,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     }, [
         calendarMonth,
         client,
+        effectiveSchedulingPreference,
         selectedService?.publicBookingMode,
         selectedServiceId,
         selectedStaffId,
@@ -645,6 +719,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // date (regardless of who's currently filtered). Drives the
     // "Unavailable" subtitle + disabled state in the provider dropdown.
     const staffIdsAvailableOnSelectedDate = useMemo(() => {
+        if (effectiveSchedulingPreference === 'flexible')
+            return null;
         if (!selectedDate)
             return null;
         const slots = availabilityByDate.get(selectedDate);
@@ -657,7 +733,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             }
         }
         return set;
-    }, [availabilityByDate, selectedDate]);
+    }, [availabilityByDate, effectiveSchedulingPreference, selectedDate]);
     const selectedDateSlots = selectedDate
         ? (filteredAvailabilityByDate.get(selectedDate) ?? [])
         : [];
@@ -676,7 +752,16 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // valid email, and any required intake fields filled. Step 4 is
     // the review screen (submit, not advance).
     const canAdvanceStep1 = Boolean(selectedService);
-    const canAdvanceStep2 = Boolean(selectedDate && selectedSlot);
+    const hasScheduleSelection = !selectedServiceRequiresSlot ||
+        (effectiveSchedulingPreference === 'flexible'
+            ? Boolean(selectedDate && selectedFlexibleWindow)
+            : Boolean(selectedDate && selectedSlot && holdId));
+    const selectedTimeLabel = selectedDate && effectiveSchedulingPreference === 'flexible'
+        ? formatFlexibleWindowTimeRange(selectedFlexibleWindow, intlLocale)
+        : selectedSlot
+            ? `${formatTimeLabel(selectedSlot.time, intlLocale)} – ${formatTimeLabel(selectedSlot.endTime, intlLocale)}`
+            : null;
+    const canAdvanceStep2 = hasScheduleSelection;
     const canAdvanceStep3 = Boolean(selectedService &&
         customerName.trim() &&
         isCustomerEmailValid &&
@@ -706,8 +791,12 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                     staffIdsAvailableOnSelectedDate.has(staffMember._id);
                 return (_jsxs("button", { type: "button", role: "option", "aria-selected": isActive, "aria-disabled": !isAvailable, disabled: !isAvailable, className: `bw-staff-card${isActive ? ' is-active' : ''}${!isAvailable ? ' is-disabled' : ''}`, onClick: () => setSelectedStaffId(staffMember._id), children: [_jsx("span", { className: "bw-staff-card-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) })) }), _jsxs("span", { className: "bw-staff-card-info", children: [_jsx("span", { className: "bw-staff-card-name", children: staffMember.name }), !isAvailable ? (_jsx("span", { className: "bw-staff-card-desc", children: t('providerUnavailable') })) : null] })] }, staffMember._id));
             })] })) : null;
-    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: t('slotsSelectServicePrompt') })) : isAvailabilityLoading ? (_jsx(AvailabilitySkeleton, {})) : selectedDate ? (selectedDateSlots.length > 0 ? (_jsx("div", { className: "bw-time-slots", children: selectedDateSlots.map((slot, index) => {
+    const schedulingPreferenceControl = flexibleSchedulingEnabled ? (_jsxs("div", { className: "bw-schedule-mode", role: "radiogroup", "aria-label": t('scheduleModeAria'), children: [_jsx("button", { type: "button", role: "radio", "aria-checked": effectiveSchedulingPreference === 'flexible', className: `bw-schedule-mode-btn${effectiveSchedulingPreference === 'flexible' ? ' is-active' : ''}`, onClick: () => handleSchedulingPreferenceChange('flexible'), children: _jsx("span", { children: t('scheduleModeFlexible') }) }), _jsx("button", { type: "button", role: "radio", "aria-checked": effectiveSchedulingPreference === 'exact', className: `bw-schedule-mode-btn${effectiveSchedulingPreference === 'exact' ? ' is-active' : ''}`, onClick: () => handleSchedulingPreferenceChange('exact'), children: _jsx("span", { children: t('scheduleModeExact') }) })] })) : null;
+    const slotsAreaKey = `${selectedServiceId ?? 'none'}-${selectedStaffId ?? 'any'}-${selectedDate ?? 'none'}-${effectiveSchedulingPreference}-${selectedFlexibleWindowId}-${isAvailabilityLoading ? 'loading' : 'ready'}`;
+    const slotsArea = (_jsx("div", { className: "bw-slots-fade", children: !selectedService ? (_jsx("p", { className: "bw-slots-empty", children: t('slotsSelectServicePrompt') })) : effectiveSchedulingPreference === 'flexible' ? (selectedDate ? (_jsx("div", { className: "bw-window-options", children: FLEXIBLE_WINDOW_OPTIONS.map((option, index) => {
+                const isActive = selectedFlexibleWindowId === option.id;
+                return (_jsxs("button", { type: "button", className: `bw-window-option${isActive ? ' is-active' : ''}`, style: { '--bw-slot-i': index }, onClick: () => handleFlexibleWindowSelect(option.id), children: [_jsxs("span", { className: "bw-window-option-main", children: [_jsx("span", { children: t(option.labelKey) }), _jsx("span", { children: formatFlexibleWindowTimeRange(option, intlLocale) })] }), _jsx("span", { className: "bw-window-option-desc", children: t(option.descriptionKey) })] }, option.id));
+            }) })) : (_jsx("p", { className: "bw-no-slots", children: t('flexPickDateFirst') }))) : 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 ||
@@ -718,8 +807,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                         : formatTimeLabel(slot.time, intlLocale) }, slotKey));
             }) })) : (_jsx("p", { className: "bw-no-slots", children: t('slotsEmptyForDate') }))) : null }, slotsAreaKey));
     const canSubmit = Boolean(selectedService &&
-        (!selectedServiceRequiresSlot ||
-            (selectedDate && selectedSlot && holdId)) &&
+        hasScheduleSelection &&
         isIntakeComplete &&
         (selectedService.pricingMode !== 'calculated' || quote) &&
         customerName.trim() &&
@@ -728,9 +816,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         ? getSubmitBlockers({
             selectedService,
             selectedServiceRequiresSlot,
-            selectedDate,
-            selectedSlot,
-            holdId,
+            hasScheduleSelection,
             isIntakeComplete,
             intakeResponses,
             selectedServicePath,
@@ -750,7 +836,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     function renderSubmitHelp() {
         if (!selectedService || canSubmit || payment || isSubmitting)
             return null;
-        if (submitBlockers.length === 0 && !isQuoteLoading)
+        if (submitBlockers.length === 0 && !isDisplayQuoteLoading)
             return null;
         // Only surface the "complete required fields" callout AFTER the
         // user has tried to confirm. The Confirm button stays visually
@@ -760,7 +846,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: isDisplayQuoteLoading ? t('helpCalculating') : t('helpComplete') }), !isDisplayQuoteLoading && 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}`;
@@ -809,6 +895,35 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setMobileStep(3);
         }
     }
+    function handleSchedulingPreferenceChange(next) {
+        if (next === schedulingPreference)
+            return;
+        if (holdId) {
+            void client
+                .releasePublicBookingHold({ siteSlug, holdId, sessionToken })
+                .catch(() => undefined);
+        }
+        setSchedulingPreference(next);
+        setSelectedSlot(null);
+        setHoldId(null);
+        setHoldExpiresAt(null);
+        setHeldStaffId(null);
+        setPendingSlotKey(null);
+        setViewState('slots');
+    }
+    function handleFlexibleWindowSelect(optionId) {
+        if (!selectedDate)
+            return;
+        setSelectedFlexibleWindowId(optionId);
+        setSelectedSlot(null);
+        setHoldId(null);
+        setHoldExpiresAt(null);
+        setHeldStaffId(null);
+        setPendingSlotKey(null);
+        setError(null);
+        setViewState('details');
+        setMobileStep((current) => (current < 3 ? 3 : current));
+    }
     async function handleSlotSelect(slot) {
         if (!selectedServiceId || !selectedDate) {
             return;
@@ -843,8 +958,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 siteSlug,
                 serviceId: selectedServiceId,
                 staffMemberId: reservationStaffId,
-                startTime: Date.parse(`${selectedDate}T${slot.time}:00`),
-                endTime: Date.parse(`${selectedDate}T${slot.endTime}:00`),
+                startTime: zonedDateTimeToTimestamp(selectedDate, slot.time, bookingTimezone),
+                endTime: zonedDateTimeToTimestamp(selectedDate, slot.endTime, bookingTimezone),
                 sessionToken,
             });
             setSelectedSlot(slot);
@@ -899,7 +1014,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         // The disabled state is purely visual (aria-disabled + class). Real
         // submittability gates here so we can surface validation help only
         // after the user actually tries to confirm - never on a fresh form.
-        if (!canSubmit || isQuoteLoading || isSubmitting) {
+        if (!canSubmit || isDisplayQuoteLoading || isSubmitting) {
             setSubmitAttempted(true);
             return;
         }
@@ -909,17 +1024,37 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         if (!selectedServiceId ||
             !selectedService ||
             (selectedServiceRequiresSlot &&
-                (!selectedDate || !selectedSlot || !holdId))) {
+                (effectiveSchedulingPreference === 'flexible'
+                    ? !selectedDate || !selectedFlexibleWindow
+                    : !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;
+        const isFlexibleRequest = selectedServiceRequiresSlot &&
+            effectiveSchedulingPreference === 'flexible' &&
+            selectedDate != null &&
+            selectedFlexibleWindow != null;
+        const newStartTime = isFlexibleRequest
+            ? zonedDateTimeToTimestamp(selectedDate, selectedFlexibleWindow.startTime, bookingTimezone)
+            : selectedDate && selectedSlot
+                ? zonedDateTimeToTimestamp(selectedDate, selectedSlot.time, bookingTimezone)
+                : Date.now();
+        const newEndTime = isFlexibleRequest
+            ? zonedDateTimeToTimestamp(selectedDate, selectedFlexibleWindow.endTime, bookingTimezone)
+            : selectedDate && selectedSlot
+                ? zonedDateTimeToTimestamp(selectedDate, selectedSlot.endTime, bookingTimezone)
+                : newStartTime + selectedService.durationMinutes * 60 * 1000;
+        const bookingNotes = isFlexibleRequest
+            ? appendFlexibleWindowNote({
+                notes: customerNotes,
+                dateKey: selectedDate,
+                window: selectedFlexibleWindow,
+                locale: intlLocale,
+                timezone: bookingTimezone,
+                t,
+            })
+            : customerNotes.trim() || undefined;
         // 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
@@ -952,26 +1087,28 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             const created = await client.createPublicBooking({
                 siteSlug,
                 serviceId: selectedServiceId,
-                staffMemberId: selectedServiceRequiresSlot
-                    ? (heldStaffId ??
-                        selectedStaffId ??
-                        selectedSlot?.availableStaffIds[0])
-                    : undefined,
+                staffMemberId: isFlexibleRequest
+                    ? (selectedStaffId ?? undefined)
+                    : selectedServiceRequiresSlot
+                        ? (heldStaffId ??
+                            selectedStaffId ??
+                            selectedSlot?.availableStaffIds[0])
+                        : undefined,
                 startTime: newStartTime,
                 endTime: newEndTime,
-                timezone: selectedHeldStaff?.timezone ??
-                    availableStaff[0]?.timezone ??
-                    setup?.workspaceTimezone ??
-                    'UTC',
+                isAnytime: isFlexibleRequest ? true : undefined,
+                timezone: bookingTimezone,
                 deliveryMethod: selectedService.deliveryMethods[0] ?? 'in-person',
                 customerName: customerName.trim(),
                 customerEmail: customerEmail.trim(),
                 customerPhone: customerPhone.trim() || undefined,
-                customerNotes: customerNotes.trim() || undefined,
+                customerNotes: bookingNotes,
                 intakeResponses,
-                quotedTotalCents: quote?.totalCents,
-                bookingHoldId: selectedServiceRequiresSlot ? holdId : undefined,
-                bookingSessionToken: selectedServiceRequiresSlot
+                quotedTotalCents: displayQuote?.totalCents,
+                bookingHoldId: selectedServiceRequiresSlot && !isFlexibleRequest
+                    ? holdId
+                    : undefined,
+                bookingSessionToken: selectedServiceRequiresSlot && !isFlexibleRequest
                     ? sessionToken
                     : undefined,
             });
@@ -996,8 +1133,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 service_name: pickLocaleField(selectedService, 'name', locale) ??
                     selectedService.name,
                 booking_mode: selectedService.publicBookingMode ?? 'scheduled',
+                scheduling_preference: isFlexibleRequest ? 'flexible' : 'exact',
                 requires_payment: selectedService.requiresPayment === true,
-                quoted_total_cents: quote?.totalCents ?? null,
+                quoted_total_cents: displayQuote?.totalCents ?? null,
             });
             setSelectedSlot(null);
             setPendingSlotKey(null);
@@ -1062,7 +1200,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                         ? 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) => {
+                                                                                        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, displayQuote, 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({
@@ -1136,7 +1274,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                     cacheRef: availabilityCacheRef,
                                                                                 });
                                                                             }
-                                                                        }, onClick: () => setCalendarMonth((current) => addMonths(current, 1)), disabled: sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)), "aria-label": t('nextMonth'), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx("div", { className: "bw-cal-weekdays", children: [
+                                                                        }, onClick: () => setCalendarMonth((current) => addMonths(current, 1)), disabled: sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)), "aria-label": t('nextMonth'), children: _jsx(ChevronRightIcon, {}) })] })] }), schedulingPreferenceControl, _jsx("div", { className: "bw-cal-weekdays", children: [
                                                             t('weekdaySun'),
                                                             t('weekdayMon'),
                                                             t('weekdayTue'),
@@ -1147,9 +1285,21 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                         ].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 isPast = dateKey < todayDateKey;
                                                             const slots = filteredAvailabilityByDate.get(dateKey) ?? [];
-                                                            const isAvailable = slots.length > 0;
+                                                            const isExactAvailable = slots.length > 0;
+                                                            const isFlexibleAvailable = effectiveSchedulingPreference === 'flexible' &&
+                                                                selectedService != null &&
+                                                                isFlexibleDateSelectable({
+                                                                    dateKey,
+                                                                    service: selectedService,
+                                                                    businessHours: setup?.businessHours ?? [],
+                                                                    timezone: bookingTimezone,
+                                                                    window: selectedFlexibleWindow,
+                                                                });
+                                                            const isAvailable = effectiveSchedulingPreference === 'flexible'
+                                                                ? isFlexibleAvailable
+                                                                : isExactAvailable;
                                                             const isSelected = selectedDate === dateKey;
                                                             const className = [
                                                                 'bw-cal-day',
@@ -1167,15 +1317,25 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                 .filter(Boolean)
                                                                 .join(' ');
                                                             return (_jsx("button", { type: "button", className: className, disabled: !isCurrentMonth || isPast || !isAvailable, onClick: () => {
+                                                                    if (holdId) {
+                                                                        void client
+                                                                            .releasePublicBookingHold({
+                                                                            siteSlug,
+                                                                            holdId,
+                                                                            sessionToken,
+                                                                        })
+                                                                            .catch(() => undefined);
+                                                                    }
                                                                     setSelectedDate(dateKey);
                                                                     setSelectedSlot(null);
+                                                                    setHoldId(null);
+                                                                    setHoldExpiresAt(null);
+                                                                    setHeldStaffId(null);
                                                                     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
+                                                        }) }), !selectedService ? (_jsx("p", { className: "bw-cal-prompt", children: t('calendarSelectServicePrompt') })) : null, _jsxs("div", { className: "bw-timezone", children: [_jsx(GlobeIcon, {}), _jsx("span", { children: bookingTimezone })] })] }), 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: effectiveSchedulingPreference === 'flexible'
+                                                            ? t('flexWindowHeading')
+                                                            : 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,
@@ -1192,16 +1352,18 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                             }, 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') })] })] })] }), (() => {
+                                                                                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, selectedTimeLabel ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryTime') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedTimeLabel })] })) : 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('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: isDisplayQuoteLoading
                                                                     ? 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('summaryEstimatedTotal') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, displayQuote, 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: effectiveSchedulingPreference === 'flexible'
+                                                                                ? t('flexWindowHeading')
+                                                                                : t('slotsHeading') }), effectiveSchedulingPreference === 'flexible' ? (_jsx("span", { className: "bw-slots-count", children: FLEXIBLE_WINDOW_OPTIONS.length })) : 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,
@@ -1217,12 +1379,12 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                                         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('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, selectedTimeLabel ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryTime') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedTimeLabel })] })) : 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: isDisplayQuoteLoading
                                                                                                         ? 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: () => {
+                                                                                                        : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, displayQuote, 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
+                                                                            }, onError: setError })) : (_jsxs("button", { type: "button", className: `bw-confirm-btn${!canSubmit || isDisplayQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isDisplayQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
                                                                                         ? isReschedule
                                                                                             ? t('btnRescheduling')
                                                                                             : t('btnBooking')
@@ -1232,30 +1394,26 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                                 ? 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
+                                                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 && selectedTimeLabel ? (_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 ??
+                                                                            : t('summaryWhen') }), _jsxs("span", { className: "bw-details-meta-value", children: [formatReadableDate(selectedDate, intlLocale), _jsx("br", {}), selectedTimeLabel] })] })] })) : 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('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: bookingTimezone })] }), _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: isDisplayQuoteLoading
                                                                             ? 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('summaryEstimatedTotal') }), _jsx("span", { className: "bw-details-meta-value", children: formatServicePrice(selectedService, displayQuote, 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
+                                                }, onError: setError })) : (_jsxs("button", { type: "button", className: `bw-confirm-btn${!canSubmit || isDisplayQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isDisplayQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
                                                             ? isReschedule
                                                                 ? t('btnRescheduling')
                                                                 : t('btnBooking')
                                                             : forcedState === 'payment-full'
                                                                 ? t('btnPayAndConfirm', {
-                                                                    price: formatPrice(selectedService, intlLocale),
+                                                                    price: formatPrice(selectedService, intlLocale, displayQuote),
                                                                 })
                                                                 : forcedState === 'payment-deposit'
                                                                     ? t('btnPayDepositAndConfirm')
@@ -1279,7 +1437,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                     if (step === 1 && !selectedServiceRequiresSlot)
                                         return 3;
                                     return Math.min(4, step + 1);
-                                }), children: [_jsx("span", { children: t('btnNext') }), _jsx(ArrowRightIcon, {})] })) : payment ? (_jsx("div", { className: "bw-footer-payment-slot", ref: setMobilePaymentActionTarget })) : (_jsxs("button", { type: "button", className: `bw-footer-next${!canSubmit || isQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
+                                }), children: [_jsx("span", { children: t('btnNext') }), _jsx(ArrowRightIcon, {})] })) : payment ? (_jsx("div", { className: "bw-footer-payment-slot", ref: setMobilePaymentActionTarget })) : (_jsxs("button", { type: "button", className: `bw-footer-next${!canSubmit || isDisplayQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isDisplayQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
                                             ? isReschedule
                                                 ? t('btnRescheduling')
                                                 : t('btnBooking')
@@ -1354,10 +1512,9 @@ function areRequiredIntakeFieldsComplete(form, responses, mode) {
         return isRequiredIntakeFieldComplete(field, responses[field.id], minItems);
     }));
 }
-function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, selectedDate, selectedSlot, holdId, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, t, locale = DEFAULT_LOCALE, }) {
+function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, hasScheduleSelection, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, t, locale = DEFAULT_LOCALE, }) {
     const blockers = [];
-    if (selectedServiceRequiresSlot &&
-        (!selectedDate || !selectedSlot || !holdId)) {
+    if (selectedServiceRequiresSlot && !hasScheduleSelection) {
         blockers.push(t('blockerDateTime'));
     }
     if (!customerName.trim())
@@ -1765,20 +1922,86 @@ function StripePaymentForm({ amountCents, currency, appointmentId, showInlineBut
 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, locale = 'en-US') {
+function formatPrice(service, locale = 'en-US', quote) {
     if (!service)
         return '';
-    return formatServicePrice(service, undefined, locale);
+    return formatServicePrice(service, quote, locale);
 }
 function formatServicePrice(service, quote, locale = 'en-US') {
+    if (quote) {
+        if (quote.displayLabel)
+            return quote.displayLabel;
+        return currencyFormatter(quote.currency, locale).format(quote.totalCents / 100);
+    }
     if (service.pricingMode === 'calculated') {
-        if (quote) {
-            return currencyFormatter(quote.currency, locale).format(quote.totalCents / 100);
-        }
         return 'Price calculated after details';
     }
     return currencyFormatter(service.currency, locale).format(service.priceCents / 100);
 }
+function quoteFromOverride(service, override) {
+    return {
+        currency: service.currency || 'usd',
+        subtotalCents: override.totalCents,
+        discountCents: 0,
+        insuranceCents: 0,
+        additionalFeesCents: 0,
+        totalCents: override.totalCents,
+        rateSnapshot: {
+            pricingMode: 'fixed',
+            servicePriceCents: service.priceCents,
+            quotedTotalCents: override.totalCents,
+            quoteSource: 'host-estimator',
+        },
+        displayLabel: override.label,
+    };
+}
+function getInitialQuoteOverride(initialSelection) {
+    if (!initialSelection)
+        return null;
+    const intake = initialSelection.intakeResponses;
+    const totalCents = readCentsValue(initialSelection.quotedTotalCents) ??
+        readCentsValue(intake?.estimate_cents);
+    if (totalCents === null)
+        return null;
+    return {
+        totalCents,
+        label: readString(initialSelection.quotedTotalLabel) ??
+            readString(intake?.estimate_label) ??
+            undefined,
+    };
+}
+function readCentsValue(value) {
+    const cents = typeof value === 'number'
+        ? value
+        : typeof value === 'string'
+            ? Number.parseInt(value, 10)
+            : Number.NaN;
+    return Number.isFinite(cents) && Number.isInteger(cents) && cents >= 0
+        ? cents
+        : null;
+}
+function initialSelectionMatchesService(initialSelection, service) {
+    if (!initialSelection)
+        return false;
+    if (initialSelection.serviceId && initialSelection.serviceId === service._id) {
+        return true;
+    }
+    if (initialSelection.serviceSlug &&
+        initialSelection.serviceSlug === service.slug) {
+        return true;
+    }
+    return false;
+}
+function getApplicableInitialQuoteOverride(initialSelection, service, override) {
+    if (!initialSelectionMatchesService(initialSelection, service))
+        return null;
+    if (override.totalCents < service.priceCents)
+        return null;
+    if (service.requiresPayment && override.totalCents !== service.priceCents) {
+        return null;
+    }
+    return override;
+}
 function getServiceWarning(service, mode, locale = DEFAULT_LOCALE) {
     if (!service || mode !== 'async')
         return null;
@@ -1930,6 +2153,138 @@ function formatTimeLabel(time, locale = 'en-US') {
         minute: '2-digit',
     }).format(date);
 }
+function formatFlexibleWindowTimeRange(window, locale = 'en-US') {
+    return `${formatTimeLabel(window.startTime, locale)} – ${formatTimeLabel(window.endTime, locale)}`;
+}
+function appendFlexibleWindowNote({ notes, dateKey, window, locale, timezone, t, }) {
+    const trimmed = notes.trim();
+    const windowLabel = `${t(window.labelKey)} (${formatFlexibleWindowTimeRange(window, locale)})`;
+    const line = `${t('flexRequestNotePrefix')}: ${formatReadableDate(dateKey, locale)}, ${windowLabel}, ${timezone}`;
+    return trimmed ? `${trimmed}\n\n${line}` : line;
+}
+function resolveBookingTimezone({ workspaceTimezone, configuredTimezone, heldStaffTimezone, selectedStaffTimezone, fallbackStaffTimezone, }) {
+    return normalizeWidgetTimezone(workspaceTimezone ??
+        configuredTimezone ??
+        heldStaffTimezone ??
+        selectedStaffTimezone ??
+        fallbackStaffTimezone ??
+        getBrowserTimezone() ??
+        'UTC');
+}
+function normalizeWidgetTimezone(value) {
+    const candidate = value?.trim();
+    if (!candidate)
+        return 'UTC';
+    try {
+        return new Intl.DateTimeFormat('en-US', {
+            timeZone: candidate,
+        }).resolvedOptions().timeZone;
+    }
+    catch {
+        return 'UTC';
+    }
+}
+function getBrowserTimezone() {
+    if (typeof Intl === 'undefined')
+        return null;
+    return Intl.DateTimeFormat().resolvedOptions().timeZone ?? null;
+}
+const timezoneFormatterCache = new Map();
+function getTimezoneFormatter(timezone) {
+    const normalized = normalizeWidgetTimezone(timezone);
+    const cached = timezoneFormatterCache.get(normalized);
+    if (cached)
+        return cached;
+    const formatter = new Intl.DateTimeFormat('en-CA', {
+        timeZone: normalized,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    });
+    timezoneFormatterCache.set(normalized, formatter);
+    return formatter;
+}
+function parseTimezoneParts(timestamp, timezone) {
+    const parts = getTimezoneFormatter(timezone).formatToParts(new Date(timestamp));
+    const values = {};
+    for (const part of parts) {
+        if (part.type === 'year' ||
+            part.type === 'month' ||
+            part.type === 'day' ||
+            part.type === 'hour' ||
+            part.type === 'minute' ||
+            part.type === 'second') {
+            values[part.type] = Number(part.value);
+        }
+    }
+    return {
+        year: values.year ?? 0,
+        month: values.month ?? 1,
+        day: values.day ?? 1,
+        hour: values.hour ?? 0,
+        minute: values.minute ?? 0,
+        second: values.second ?? 0,
+    };
+}
+function timezonePartsToUtcMs(parts) {
+    return Date.UTC(parts.year, parts.month - 1, parts.day, parts.hour, parts.minute, parts.second);
+}
+function dateKeyInTimeZone(timestamp, timezone) {
+    const parts = parseTimezoneParts(timestamp, timezone);
+    return `${parts.year}-${String(parts.month).padStart(2, '0')}-${String(parts.day).padStart(2, '0')}`;
+}
+function parseDateKeyParts(dateKey) {
+    const [year, month, day] = dateKey.split('-').map(Number);
+    return { year, month, day };
+}
+function zonedDateTimeToTimestamp(dateKey, time, timezone) {
+    const { year, month, day } = parseDateKeyParts(dateKey);
+    const [hour, minute] = time.split(':').map(Number);
+    const target = {
+        year,
+        month,
+        day,
+        hour,
+        minute,
+        second: 0,
+    };
+    let guess = Date.UTC(year, month - 1, day, hour, minute, 0);
+    for (let index = 0; index < 3; index += 1) {
+        const actual = parseTimezoneParts(guess, timezone);
+        const offset = timezonePartsToUtcMs(actual) - guess;
+        const adjusted = timezonePartsToUtcMs(target) - offset;
+        if (adjusted === guess)
+            return adjusted;
+        guess = adjusted;
+    }
+    return guess;
+}
+function isFlexibleDateSelectable({ dateKey, service, businessHours, timezone, window, }) {
+    if (!service)
+        return false;
+    if (!isBusinessOpenOnDate(dateKey, businessHours))
+        return false;
+    const now = Date.now();
+    const windowEnd = zonedDateTimeToTimestamp(dateKey, window.endTime, timezone);
+    const latestAllowedStart = now + (service.maxAdvanceBookingDays ?? 90) * 24 * 60 * 60 * 1000;
+    if (windowEnd < now + (service.minimumNoticeMinutes ?? 0) * 60 * 1000) {
+        return false;
+    }
+    const windowStart = zonedDateTimeToTimestamp(dateKey, window.startTime, timezone);
+    return windowStart <= latestAllowedStart;
+}
+function isBusinessOpenOnDate(dateKey, businessHours) {
+    if (businessHours.length === 0)
+        return true;
+    const { year, month, day } = parseDateKeyParts(dateKey);
+    const dayOfWeek = new Date(Date.UTC(year, month - 1, day)).getUTCDay();
+    const entry = businessHours.find((hours) => hours.day === dayOfWeek);
+    return entry?.isOpen === true;
+}
 function startOfMonth(date) {
     return new Date(date.getFullYear(), date.getMonth(), 1);
 }