@asksable/site-connector 0.6.4 → 0.6.6

package/dist/booking-widget.js

@@ -11,29 +11,31 @@ 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 = [
+const FLEXIBLE_WINDOW_TEMPLATES = [
     {
         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 DEFAULT_FLEXIBLE_OPEN_TIME = '09:00';
+const DEFAULT_FLEXIBLE_CLOSE_TIME = '17:00';
+const NOON_MINUTES = 12 * 60;
+const MIN_FLEXIBLE_WINDOW_MINUTES = 30;
+const MAX_BOOKING_PHOTOS = 5;
+const MAX_BOOKING_PHOTO_BASE64_LENGTH = 1_500_000;
+const MAX_BOOKING_PHOTO_EDGE = 1600;
+const BOOKING_PHOTO_JPEG_QUALITY = 0.78;
 const stripePromises = new Map();
 function getStripePromise(publishableKey, connectAccountId) {
     const key = `${publishableKey}:${connectAccountId}`;
@@ -95,7 +97,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     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 [selectedFlexibleWindowId, setSelectedFlexibleWindowId] = useState('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
@@ -113,7 +115,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const [customerName, setCustomerName] = useState(() => rescheduleContext?.customerName ?? '');
     const [customerEmail, setCustomerEmail] = useState(() => rescheduleContext?.customerEmail ?? '');
     const [customerPhone, setCustomerPhone] = useState(() => rescheduleContext?.customerPhone ?? '');
+    const [serviceAddress, setServiceAddress] = useState('');
     const [customerNotes, setCustomerNotes] = useState('');
+    const [bookingPhotos, setBookingPhotos] = useState([]);
+    const [isPreparingPhotos, setIsPreparingPhotos] = useState(false);
+    const [photoError, setPhotoError] = useState(null);
     const [intakeResponses, setIntakeResponses] = useState(() => initialSelection?.intakeResponses ?? {});
     const initialSelectionAppliedRef = useRef(false);
     const previousSelectedServiceIdRef = useRef(selectedServiceId);
@@ -273,16 +279,34 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         ? quoteFromOverride(selectedService, selectedQuoteOverride)
         : quote;
     const isDisplayQuoteLoading = isQuoteLoading && !displayQuote;
+    const bookingContextRows = useMemo(() => buildBookingContextRows({
+        intakeResponses,
+        quote: displayQuote,
+        locale: intlLocale,
+    }), [displayQuote, intakeResponses, intlLocale]);
     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 selectedDateFlexibleWindows = useMemo(() => selectedDate
+        ? getFlexibleWindowOptionsForDate({
+            dateKey: selectedDate,
+            businessHours: setup?.businessHours ?? [],
+        }).filter((option) => isFlexibleWindowSelectable({
+            dateKey: selectedDate,
+            service: selectedService,
+            timezone: bookingTimezone,
+            window: option,
+        }))
+        : [], [bookingTimezone, selectedDate, selectedService, setup?.businessHours]);
+    const selectedFlexibleWindow = selectedDateFlexibleWindows.find((option) => option.id === selectedFlexibleWindowId) ??
+        selectedDateFlexibleWindows[0] ??
+        null;
     const selectedServicePath = selectedServiceRequiresSlot
         ? 'scheduled'
         : 'async';
@@ -290,10 +314,28 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const isIntakeComplete = useMemo(() => !selectedService?.intakeForm ||
         areRequiredIntakeFieldsComplete(selectedService.intakeForm, intakeResponses, selectedServicePath), [intakeResponses, selectedService?.intakeForm, selectedServicePath]);
     const serviceWarning = useMemo(() => getServiceWarning(selectedService, selectedServicePath, locale), [selectedService, selectedServicePath, locale]);
+    useEffect(() => {
+        if (effectiveSchedulingPreference !== 'flexible')
+            return;
+        if (selectedDateFlexibleWindows.length === 0)
+            return;
+        if (selectedDateFlexibleWindows.some((option) => option.id === selectedFlexibleWindowId)) {
+            return;
+        }
+        setSelectedFlexibleWindowId(selectedDateFlexibleWindows[0].id);
+    }, [
+        effectiveSchedulingPreference,
+        selectedDateFlexibleWindows,
+        selectedFlexibleWindowId,
+    ]);
     const selectedServiceRequiresPayment = selectedService?.requiresPayment === true;
     const trimmedCustomerEmail = customerEmail.trim();
+    const trimmedCustomerPhone = customerPhone.trim();
+    const trimmedServiceAddress = serviceAddress.trim();
     const isCustomerEmailValid = trimmedCustomerEmail.length > 0 && isValidEmailAddress(trimmedCustomerEmail);
     const showCustomerEmailError = trimmedCustomerEmail.length > 0 && !isCustomerEmailValid;
+    const showCustomerPhoneError = submitAttempted && !trimmedCustomerPhone;
+    const showServiceAddressError = submitAttempted && !isReschedule && !trimmedServiceAddress;
     // In reschedule mode we pre-select the original service but keep
     // the full list visible - the admin may legitimately need to
     // switch service when rescheduling (e.g. customer asked for a
@@ -395,15 +437,24 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         if (effectiveSchedulingPreference === 'flexible') {
             setAvailabilityByDate(new Map());
             setIsAvailabilityLoading(false);
-            if (selectedDate &&
-                !isFlexibleDateSelectable({
-                    dateKey: selectedDate,
-                    service: selectedService,
-                    businessHours: setup?.businessHours ?? [],
-                    timezone: bookingTimezone,
-                    window: selectedFlexibleWindow,
-                })) {
-                setSelectedDate(null);
+            const firstAvailableDate = findFirstSelectableFlexibleDate({
+                calendarMonth,
+                todayDateKey,
+                service: selectedService,
+                businessHours: setup?.businessHours ?? [],
+                timezone: bookingTimezone,
+            });
+            if (!selectedDate) {
+                setSelectedDate(firstAvailableDate);
+                return;
+            }
+            if (!hasSelectableFlexibleWindowsForDate({
+                dateKey: selectedDate,
+                service: selectedService,
+                businessHours: setup?.businessHours ?? [],
+                timezone: bookingTimezone,
+            })) {
+                setSelectedDate(firstAvailableDate);
             }
             return;
         }
@@ -483,10 +534,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         selectedService?.publicBookingMode,
         selectedServiceId,
         selectedStaffId,
-        selectedFlexibleWindow,
         selectedService,
         setup?.businessHours,
         siteSlug,
+        todayDateKey,
     ]);
     useEffect(() => {
         if (!selectedServiceId ||
@@ -756,7 +807,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         (effectiveSchedulingPreference === 'flexible'
             ? Boolean(selectedDate && selectedFlexibleWindow)
             : Boolean(selectedDate && selectedSlot && holdId));
-    const selectedTimeLabel = selectedDate && effectiveSchedulingPreference === 'flexible'
+    const selectedTimeLabel = selectedDate &&
+        effectiveSchedulingPreference === 'flexible' &&
+        selectedFlexibleWindow
         ? formatFlexibleWindowTimeRange(selectedFlexibleWindow, intlLocale)
         : selectedSlot
             ? `${formatTimeLabel(selectedSlot.time, intlLocale)} – ${formatTimeLabel(selectedSlot.endTime, intlLocale)}`
@@ -765,6 +818,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const canAdvanceStep3 = Boolean(selectedService &&
         customerName.trim() &&
         isCustomerEmailValid &&
+        (isReschedule || (trimmedCustomerPhone && trimmedServiceAddress)) &&
         isIntakeComplete);
     // Slots block is rendered in two locations: inline under the calendar
     // (mobile flow keeps current step-3 behavior) and at the top of the
@@ -793,10 +847,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             })] })) : null;
     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 slotsArea = (_jsx("div", { className: "bw-slots-fade", children: !selectedService ? (_jsx("p", { className: "bw-slots-empty", children: t('slotsSelectServicePrompt') })) : effectiveSchedulingPreference === 'flexible' ? (selectedDate ? (_jsxs("div", { className: "bw-window-options", children: [selectedDateFlexibleWindows.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));
+                }), selectedDateFlexibleWindows.length === 0 ? (_jsx("p", { className: "bw-no-slots", children: t('slotsEmptyForDate') })) : null] })) : (_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 ||
@@ -811,7 +865,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         isIntakeComplete &&
         (selectedService.pricingMode !== 'calculated' || quote) &&
         customerName.trim() &&
-        isCustomerEmailValid) && !isSubmitting;
+        isCustomerEmailValid &&
+        (isReschedule || (trimmedCustomerPhone && trimmedServiceAddress))) && !isSubmitting;
     const submitBlockers = selectedService
         ? getSubmitBlockers({
             selectedService,
@@ -823,6 +878,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             quote,
             customerName,
             customerEmail,
+            customerPhone,
+            serviceAddress,
+            requireServiceAddress: !isReschedule,
             t,
             locale,
         })
@@ -830,9 +888,47 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     function handleNotesInput(event) {
         setCustomerNotes(event.currentTarget.value);
     }
+    async function handlePhotoInput(event) {
+        const files = Array.from(event.currentTarget.files ?? []);
+        event.currentTarget.value = '';
+        if (files.length === 0)
+            return;
+        setPhotoError(null);
+        setIsPreparingPhotos(true);
+        try {
+            const remaining = Math.max(0, MAX_BOOKING_PHOTOS - bookingPhotos.length);
+            const accepted = files.slice(0, remaining);
+            const prepared = [];
+            for (const file of accepted) {
+                prepared.push(await prepareBookingPhoto(file));
+            }
+            setBookingPhotos((current) => [...current, ...prepared].slice(0, MAX_BOOKING_PHOTOS));
+            if (files.length > remaining) {
+                setPhotoError(t('photosLimit', { count: MAX_BOOKING_PHOTOS }));
+            }
+        }
+        catch (nextError) {
+            setPhotoError(nextError instanceof Error ? nextError.message : t('photosFailed'));
+        }
+        finally {
+            setIsPreparingPhotos(false);
+        }
+    }
     function renderNotesField(id, label, placeholder) {
         return (_jsxs("div", { className: "bw-field bw-field--notes", children: [_jsx("label", { htmlFor: id, children: label }), _jsx("textarea", { id: id, rows: 3, maxLength: 500, value: customerNotes, onChange: handleNotesInput, onInput: handleNotesInput, placeholder: placeholder }), _jsxs("span", { className: "bw-char-count", "aria-live": "polite", children: [customerNotes.length, "/500"] })] }));
     }
+    function renderBookingContext() {
+        if (bookingContextRows.length === 0)
+            return null;
+        return (_jsxs("div", { className: "bw-booking-context", children: [_jsx("span", { className: "bw-booking-context-title", children: t('bookingContextTitle') }), _jsx("div", { className: "bw-booking-context-rows", children: bookingContextRows.map((row) => (_jsxs("div", { className: "bw-booking-context-row", children: [_jsx("span", { children: row.label }), _jsx("span", { children: row.value })] }, row.key))) })] }));
+    }
+    function renderPhotoField(id) {
+        if (isReschedule)
+            return null;
+        return (_jsxs("div", { className: "bw-photo-field", children: [_jsxs("div", { className: "bw-photo-head", children: [_jsxs("div", { children: [_jsx("span", { className: "bw-photo-title", children: t('photosLabel') }), _jsx("p", { children: t('photosHelp') })] }), _jsx("label", { className: "bw-photo-button", htmlFor: id, children: isPreparingPhotos ? t('photosPreparing') : t('photosAdd') }), _jsx("input", { id: id, type: "file", accept: "image/*", multiple: true, onChange: (event) => void handlePhotoInput(event), disabled: isPreparingPhotos || bookingPhotos.length >= MAX_BOOKING_PHOTOS })] }), photoError ? _jsx("p", { className: "bw-photo-error", children: photoError }) : null, bookingPhotos.length > 0 ? (_jsx("div", { className: "bw-photo-list", children: bookingPhotos.map((photo) => (_jsxs("div", { className: "bw-photo-item", children: [_jsx("span", { children: photo.filename }), _jsx("button", { type: "button", onClick: () => setBookingPhotos((current) => current.filter((item) => item.id !== photo.id)), "aria-label": t('photosRemoveAria', {
+                                    name: photo.filename,
+                                }), children: t('photosRemove') })] }, photo.id))) })) : null] }));
+    }
     function renderSubmitHelp() {
         if (!selectedService || canSubmit || payment || isSubmitting)
             return null;
@@ -852,8 +948,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         const nameId = `bw-name${idSuffix}`;
         const emailId = `bw-email${idSuffix}`;
         const phoneId = `bw-phone${idSuffix}`;
+        const addressId = `bw-service-address${idSuffix}`;
         const emailErrorId = `${emailId}-error`;
-        return (_jsxs("div", { className: "bw-form-fields", children: [_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: nameId, children: [t('contactFullName'), " ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: nameId, value: customerName, onChange: (event) => setCustomerName(event.target.value), placeholder: t('placeholderFullName') })] }), _jsxs("div", { className: `bw-field${showCustomerEmailError ? ' is-invalid' : ''}`, children: [_jsxs("label", { htmlFor: emailId, children: [t('contactEmail'), " ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: emailId, type: "email", required: true, value: customerEmail, onChange: (event) => setCustomerEmail(event.target.value), "aria-invalid": showCustomerEmailError, "aria-describedby": showCustomerEmailError ? emailErrorId : undefined, placeholder: t('placeholderEmail') }), showCustomerEmailError ? (_jsx("span", { className: "bw-field-error", id: emailErrorId, children: t('contactEmailInvalid') })) : null] }), _jsxs("div", { className: "bw-field", children: [_jsx("label", { htmlFor: phoneId, children: t('contactPhone') }), _jsx("input", { id: phoneId, value: customerPhone, onChange: (event) => setCustomerPhone(event.target.value), placeholder: t('placeholderPhone') })] })] }));
+        const phoneErrorId = `${phoneId}-error`;
+        const addressErrorId = `${addressId}-error`;
+        return (_jsxs("div", { className: "bw-form-fields", children: [_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: nameId, children: [t('contactFullName'), " ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: nameId, value: customerName, onChange: (event) => setCustomerName(event.target.value), placeholder: t('placeholderFullName') })] }), _jsxs("div", { className: `bw-field${showCustomerEmailError ? ' is-invalid' : ''}`, children: [_jsxs("label", { htmlFor: emailId, children: [t('contactEmail'), " ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: emailId, type: "email", required: true, value: customerEmail, onChange: (event) => setCustomerEmail(event.target.value), "aria-invalid": showCustomerEmailError, "aria-describedby": showCustomerEmailError ? emailErrorId : undefined, placeholder: t('placeholderEmail') }), showCustomerEmailError ? (_jsx("span", { className: "bw-field-error", id: emailErrorId, children: t('contactEmailInvalid') })) : null] }), _jsxs("div", { className: `bw-field${showCustomerPhoneError ? ' is-invalid' : ''}`, children: [_jsxs("label", { htmlFor: phoneId, children: [t('contactPhone'), " ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: phoneId, type: "tel", required: true, value: customerPhone, onChange: (event) => setCustomerPhone(event.target.value), "aria-invalid": showCustomerPhoneError, "aria-describedby": showCustomerPhoneError ? phoneErrorId : undefined, placeholder: t('placeholderPhone') }), showCustomerPhoneError ? (_jsx("span", { className: "bw-field-error", id: phoneErrorId, children: t('contactPhoneRequired') })) : null] }), !isReschedule ? (_jsxs("div", { className: `bw-field bw-field--wide${showServiceAddressError ? ' is-invalid' : ''}`, children: [_jsxs("label", { htmlFor: addressId, children: [t('contactServiceAddress'), ' ', _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: addressId, required: true, value: serviceAddress, onChange: (event) => setServiceAddress(event.target.value), "aria-invalid": showServiceAddressError, "aria-describedby": showServiceAddressError ? addressErrorId : undefined, placeholder: t('placeholderServiceAddress') }), showServiceAddressError ? (_jsx("span", { className: "bw-field-error", id: addressErrorId, children: t('contactServiceAddressRequired') })) : null] })) : null] }));
     }
     function renderIntakeFields(idPrefix) {
         return (_jsx(IntakeFormFields, { form: selectedService?.intakeForm, responses: intakeResponses, onChange: (fieldId, value) => setIntakeResponses((prev) => ({ ...prev, [fieldId]: value })), idPrefix: idPrefix, mode: selectedServicePath }));
@@ -1045,16 +1144,21 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             : selectedDate && selectedSlot
                 ? zonedDateTimeToTimestamp(selectedDate, selectedSlot.endTime, bookingTimezone)
                 : newStartTime + selectedService.durationMinutes * 60 * 1000;
+        const bookingBaseNotes = formatBookingNotesForSubmit({
+            contextRows: bookingContextRows,
+            additionalNotes: customerNotes,
+            t,
+        });
         const bookingNotes = isFlexibleRequest
             ? appendFlexibleWindowNote({
-                notes: customerNotes,
+                notes: bookingBaseNotes,
                 dateKey: selectedDate,
                 window: selectedFlexibleWindow,
                 locale: intlLocale,
                 timezone: bookingTimezone,
                 t,
             })
-            : customerNotes.trim() || undefined;
+            : bookingBaseNotes || 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
@@ -1101,9 +1205,14 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 deliveryMethod: selectedService.deliveryMethods[0] ?? 'in-person',
                 customerName: customerName.trim(),
                 customerEmail: customerEmail.trim(),
-                customerPhone: customerPhone.trim() || undefined,
+                customerPhone: trimmedCustomerPhone,
                 customerNotes: bookingNotes,
+                location: trimmedServiceAddress,
                 intakeResponses,
+                photos: bookingPhotos.map((photo) => ({
+                    filename: photo.filename,
+                    data: photo.data,
+                })),
                 quotedTotalCents: displayQuote?.totalCents,
                 bookingHoldId: selectedServiceRequiresSlot && !isFlexibleRequest
                     ? holdId
@@ -1145,7 +1254,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setCustomerName('');
             setCustomerEmail('');
             setCustomerPhone('');
+            setServiceAddress('');
             setCustomerNotes('');
+            setBookingPhotos([]);
+            setPhotoError(null);
             setIntakeResponses({});
             setQuote(null);
             setPayment(null);
@@ -1290,12 +1402,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                             const isExactAvailable = slots.length > 0;
                                                             const isFlexibleAvailable = effectiveSchedulingPreference === 'flexible' &&
                                                                 selectedService != null &&
-                                                                isFlexibleDateSelectable({
+                                                                hasSelectableFlexibleWindowsForDate({
                                                                     dateKey,
                                                                     service: selectedService,
                                                                     businessHours: setup?.businessHours ?? [],
                                                                     timezone: bookingTimezone,
-                                                                    window: selectedFlexibleWindow,
                                                                 });
                                                             const isAvailable = effectiveSchedulingPreference === 'flexible'
                                                                 ? isFlexibleAvailable
@@ -1352,18 +1463,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, 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') })] })] })] }), (() => {
+                                                                                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') })] }), !isReschedule ? (_jsxs("div", { className: "bw-summary-row bw-summary-row--stack", children: [_jsx("span", { children: t('contactServiceAddress') }), _jsx("span", { className: "bw-summary-val", children: serviceAddress.trim() || t('reviewNotProvided') })] })) : null] })] }), (() => {
                                                     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
+                                                })(), bookingContextRows.length > 0 ? (_jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('bookingContextTitle') }), _jsx("div", { className: "bw-summary-rows", children: bookingContextRows.map((row) => (_jsxs("div", { className: "bw-summary-row bw-summary-row--stack", children: [_jsx("span", { children: row.label }), _jsx("span", { className: "bw-summary-val", children: row.value })] }, row.key))) })] })) : null, 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: isDisplayQuoteLoading
+                                                                : t('reviewNotesSection') }), _jsx("p", { className: "bw-summary-notes", children: customerNotes.trim() })] })) : null, !isReschedule && bookingPhotos.length > 0 ? (_jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('photosLabel') }), _jsx("p", { className: "bw-summary-notes", children: t('photosCount', { count: bookingPhotos.length }) })] })) : 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, 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('slotsHeading') }), effectiveSchedulingPreference === 'flexible' ? (_jsx("span", { className: "bw-slots-count", children: selectedDateFlexibleWindows.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', ''), renderBookingContext(), renderNotesField('bw-notes', t('notesLabel'), t('notesPlaceholder')), renderPhotoField('bw-photos'), 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,
@@ -1398,11 +1509,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                             ? t('summaryNewTime')
                                                                             : 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: 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('providerAny') })] }), !isReschedule && serviceAddress.trim() ? (_jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(LocationPinIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: serviceAddress.trim() })] })) : null, _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, 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('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'), renderBookingContext(), 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 &&
+                                                : t('notesPlaceholder')), renderPhotoField('bw-photos-d'), 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'));
@@ -1512,7 +1623,7 @@ function areRequiredIntakeFieldsComplete(form, responses, mode) {
         return isRequiredIntakeFieldComplete(field, responses[field.id], minItems);
     }));
 }
-function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, hasScheduleSelection, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, t, locale = DEFAULT_LOCALE, }) {
+function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, hasScheduleSelection, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, customerPhone, serviceAddress, requireServiceAddress, t, locale = DEFAULT_LOCALE, }) {
     const blockers = [];
     if (selectedServiceRequiresSlot && !hasScheduleSelection) {
         blockers.push(t('blockerDateTime'));
@@ -1525,6 +1636,11 @@ function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, hasSc
     else if (!isValidEmailAddress(customerEmail)) {
         blockers.push(t('blockerContactEmailInvalid'));
     }
+    if (!customerPhone.trim())
+        blockers.push(t('blockerContactPhone'));
+    if (requireServiceAddress && !serviceAddress.trim()) {
+        blockers.push(t('blockerServiceAddress'));
+    }
     if (!isIntakeComplete && selectedService.intakeForm) {
         blockers.push(...getMissingRequiredIntakeLabels(selectedService.intakeForm, intakeResponses, selectedServicePath, t, locale));
     }
@@ -1671,6 +1787,123 @@ function buildIntakeReviewRows(form, responses, servicePath, locale, t) {
     }
     return rows;
 }
+function buildBookingContextRows({ intakeResponses, quote, locale, }) {
+    const rows = [];
+    const usedKeys = new Set();
+    const addKnown = (keys, label, formatter = formatContextValue) => {
+        for (const key of keys) {
+            const value = intakeResponses[key];
+            const formatted = formatter(value);
+            if (formatted) {
+                rows.push({ key, label, value: formatted });
+                usedKeys.add(key);
+                return;
+            }
+        }
+    };
+    addKnown(['vehicle_size', 'vehicleSize', 'vehicle', 'vehicle_type', 'vehicleType'], 'Vehicle', formatVehicleContextValue);
+    addKnown(['pet_hair', 'petHair', 'pet_hair_level'], 'Pet hair');
+    addKnown([
+        'stains',
+        'stain_removal',
+        'stainRemoval',
+        'shampooing',
+        'shampoo_needed',
+        'shampooNeeded',
+        'stains_or_shampooing',
+    ], 'Stains or shampooing');
+    const estimateCents = readCentsValue(intakeResponses.estimate_cents) ??
+        readCentsValue(intakeResponses.estimateCents) ??
+        quote?.totalCents ??
+        null;
+    if (estimateCents !== null) {
+        rows.push({
+            key: 'estimate_cents',
+            label: 'Website estimate',
+            value: currencyFormatter(quote?.currency ?? 'usd', locale).format(estimateCents / 100),
+        });
+        usedKeys.add('estimate_cents');
+        usedKeys.add('estimateCents');
+    }
+    for (const [key, value] of Object.entries(intakeResponses)) {
+        if (usedKeys.has(key))
+            continue;
+        if (key === 'estimate_label' || key === 'estimateLabel')
+            continue;
+        const formatted = formatContextValue(value);
+        if (!formatted)
+            continue;
+        rows.push({
+            key,
+            label: formatContextKey(key),
+            value: formatted,
+        });
+        if (rows.length >= 8)
+            break;
+    }
+    return rows;
+}
+function formatVehicleContextValue(value) {
+    const raw = formatContextValue(value);
+    if (!raw)
+        return null;
+    const normalized = raw.toLowerCase().replace(/[\s_-]+/g, '-');
+    const labels = {
+        car: 'Car or small SUV',
+        small: 'Car or small SUV',
+        sedan: 'Car or small SUV',
+        'small-suv': 'Car or small SUV',
+        large: 'Large or 3-row',
+        '3-row': 'Large or 3-row',
+        'three-row': 'Large or 3-row',
+        suv: 'Large or 3-row',
+        van: 'Large or 3-row',
+        minivan: 'Large or 3-row',
+        truck: 'Large or 3-row',
+    };
+    return labels[normalized] ?? raw;
+}
+function formatContextValue(value) {
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (!trimmed)
+            return null;
+        return titleizeContextValue(trimmed);
+    }
+    if (typeof value === 'number' && Number.isFinite(value))
+        return String(value);
+    if (typeof value === 'boolean')
+        return value ? 'Yes' : 'No';
+    if (Array.isArray(value)) {
+        const parts = value.map(formatContextValue).filter(Boolean);
+        return parts.length ? parts.join(', ') : null;
+    }
+    return null;
+}
+function titleizeContextValue(value) {
+    return value
+        .replace(/[_-]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+function formatContextKey(key) {
+    return titleizeContextValue(key.replace(/([a-z])([A-Z])/g, '$1 $2'));
+}
+function formatBookingNotesForSubmit({ contextRows, additionalNotes, t, }) {
+    const sections = [];
+    if (contextRows.length > 0) {
+        sections.push([
+            `${t('bookingContextTitle')}:`,
+            ...contextRows.map((row) => `${row.label}: ${row.value}`),
+        ].join('\n'));
+    }
+    const trimmed = additionalNotes.trim();
+    if (trimmed) {
+        sections.push(`${t('notesLabel')}:\n${trimmed}`);
+    }
+    return sections.join('\n\n');
+}
 function readFiniteNumber(value, fallback) {
     if (typeof value === 'number' && Number.isFinite(value))
         return value;
@@ -1983,7 +2216,8 @@ function readCentsValue(value) {
 function initialSelectionMatchesService(initialSelection, service) {
     if (!initialSelection)
         return false;
-    if (initialSelection.serviceId && initialSelection.serviceId === service._id) {
+    if (initialSelection.serviceId &&
+        initialSelection.serviceId === service._id) {
         return true;
     }
     if (initialSelection.serviceSlug &&
@@ -2027,6 +2261,70 @@ function readRecord(value) {
 function readString(value) {
     return typeof value === 'string' && value.trim() ? value : null;
 }
+async function prepareBookingPhoto(file) {
+    if (!file.type.startsWith('image/')) {
+        throw new Error('Please choose image files only.');
+    }
+    const dataUrl = await downscaleImageFile(file);
+    const [, base64 = ''] = dataUrl.split(',');
+    if (!base64 || base64.length > MAX_BOOKING_PHOTO_BASE64_LENGTH) {
+        throw new Error('One of the photos is too large. Try a smaller image.');
+    }
+    return {
+        id: `photo_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+        filename: jpegFileName(file.name),
+        data: base64,
+        size: Math.ceil((base64.length * 3) / 4),
+    };
+}
+async function downscaleImageFile(file) {
+    const image = await loadImageSource(file);
+    const scale = Math.min(1, MAX_BOOKING_PHOTO_EDGE / Math.max(image.width, image.height));
+    const width = Math.max(1, Math.round(image.width * scale));
+    const height = Math.max(1, Math.round(image.height * scale));
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d');
+    if (!context) {
+        throw new Error('Unable to prepare that photo.');
+    }
+    context.drawImage(image.source, 0, 0, width, height);
+    image.close?.();
+    return canvas.toDataURL('image/jpeg', BOOKING_PHOTO_JPEG_QUALITY);
+}
+async function loadImageSource(file) {
+    if (typeof createImageBitmap === 'function') {
+        const bitmap = await createImageBitmap(file);
+        return {
+            source: bitmap,
+            width: bitmap.width,
+            height: bitmap.height,
+            close: () => bitmap.close(),
+        };
+    }
+    const url = URL.createObjectURL(file);
+    try {
+        const image = await new Promise((resolve, reject) => {
+            const element = new Image();
+            element.onload = () => resolve(element);
+            element.onerror = () => reject(new Error('Unable to read that photo.'));
+            element.src = url;
+        });
+        return {
+            source: image,
+            width: image.naturalWidth || image.width,
+            height: image.naturalHeight || image.height,
+        };
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+}
+function jpegFileName(name) {
+    const clean = name.trim() || 'booking-photo.jpg';
+    return `${clean.replace(/\.[^.]+$/, '')}.jpg`;
+}
 // BookingWidgetSkeleton was a hand-built first-load ghost that
 // constantly drifted out of sync with the real layout. Boneyard now
 // owns the detailed bones; BookingWidgetPlaceholder is the stable
@@ -2263,11 +2561,35 @@ function zonedDateTimeToTimestamp(dateKey, time, timezone) {
     }
     return guess;
 }
-function isFlexibleDateSelectable({ dateKey, service, businessHours, timezone, window, }) {
+function findFirstSelectableFlexibleDate({ calendarMonth, todayDateKey, service, businessHours, timezone, }) {
+    const end = endOfMonth(calendarMonth);
+    const cursor = startOfMonth(calendarMonth);
+    while (cursor <= end) {
+        const dateKey = formatDateKey(cursor);
+        if (dateKey >= todayDateKey &&
+            hasSelectableFlexibleWindowsForDate({
+                dateKey,
+                service,
+                businessHours,
+                timezone,
+            })) {
+            return dateKey;
+        }
+        cursor.setDate(cursor.getDate() + 1);
+    }
+    return null;
+}
+function hasSelectableFlexibleWindowsForDate({ dateKey, service, businessHours, timezone, }) {
+    return getFlexibleWindowOptionsForDate({ dateKey, businessHours }).some((window) => isFlexibleWindowSelectable({
+        dateKey,
+        service,
+        timezone,
+        window,
+    }));
+}
+function isFlexibleWindowSelectable({ dateKey, service, 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;
@@ -2277,13 +2599,61 @@ function isFlexibleDateSelectable({ dateKey, service, businessHours, timezone, w
     const windowStart = zonedDateTimeToTimestamp(dateKey, window.startTime, timezone);
     return windowStart <= latestAllowedStart;
 }
-function isBusinessOpenOnDate(dateKey, businessHours) {
-    if (businessHours.length === 0)
-        return true;
+function getFlexibleWindowOptionsForDate({ dateKey, businessHours, }) {
+    const range = getBusinessOpenRangeForDate(dateKey, businessHours);
+    if (!range)
+        return [];
+    const allDay = makeFlexibleWindowOption('all-day', range.start, range.end);
+    const morningEnd = Math.min(range.end, NOON_MINUTES);
+    const afternoonStart = Math.max(range.start, NOON_MINUTES);
+    const options = [allDay];
+    if (morningEnd - range.start >= MIN_FLEXIBLE_WINDOW_MINUTES) {
+        options.push(makeFlexibleWindowOption('morning', range.start, morningEnd));
+    }
+    if (range.end - afternoonStart >= MIN_FLEXIBLE_WINDOW_MINUTES) {
+        options.push(makeFlexibleWindowOption('afternoon', afternoonStart, range.end));
+    }
+    return options;
+}
+function makeFlexibleWindowOption(id, startMinutes, endMinutes) {
+    const template = FLEXIBLE_WINDOW_TEMPLATES.find((item) => item.id === id);
+    return {
+        id,
+        startTime: minutesToClockTime(startMinutes),
+        endTime: minutesToClockTime(endMinutes),
+        labelKey: template?.labelKey ?? 'flexWindowAllDay',
+        descriptionKey: template?.descriptionKey ?? 'flexWindowAllDayDesc',
+    };
+}
+function getBusinessOpenRangeForDate(dateKey, businessHours) {
+    if (businessHours.length === 0) {
+        return {
+            start: timeStringToMinutes(DEFAULT_FLEXIBLE_OPEN_TIME),
+            end: timeStringToMinutes(DEFAULT_FLEXIBLE_CLOSE_TIME),
+        };
+    }
     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;
+    if (!entry?.isOpen)
+        return null;
+    const start = timeStringToMinutes(entry.openTime ?? DEFAULT_FLEXIBLE_OPEN_TIME);
+    const end = timeStringToMinutes(entry.closeTime ?? DEFAULT_FLEXIBLE_CLOSE_TIME);
+    return end > start ? { start, end } : null;
+}
+function minutesToClockTime(minutes) {
+    const clamped = Math.max(0, Math.min(23 * 60 + 59, Math.round(minutes)));
+    const hours = Math.floor(clamped / 60);
+    const mins = clamped % 60;
+    return `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
+}
+function timeStringToMinutes(value) {
+    const [hourString, minuteString] = value.split(':');
+    const hour = Number(hourString);
+    const minute = Number(minuteString);
+    if (!Number.isFinite(hour) || !Number.isFinite(minute))
+        return 0;
+    return hour * 60 + minute;
 }
 function startOfMonth(date) {
     return new Date(date.getFullYear(), date.getMonth(), 1);
@@ -2393,6 +2763,9 @@ function WarningIcon() {
 function UserIcon() {
     return iconPath('M20 21a8 8 0 0 0-16 0m8-10a4 4 0 1 0 0-8 4 4 0 0 0 0 8');
 }
+function LocationPinIcon() {
+    return iconPath('M12 21s6-5.2 6-11a6 6 0 1 0-12 0c0 5.8 6 11 6 11Zm0-8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z');
+}
 function GlobeIcon() {
     return iconPath('M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 0c2.5 2.7 4 6.2 4 10s-1.5 7.3-4 10c-2.5-2.7-4-6.2-4-10s1.5-7.3 4-10ZM2 12h20');
 }