@asksable/site-connector 0.6.7 → 0.6.9

package/dist/booking-widget.js

@@ -164,6 +164,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const [customerEmail, setCustomerEmail] = useState(() => rescheduleContext?.customerEmail ?? '');
     const [customerPhone, setCustomerPhone] = useState(() => rescheduleContext?.customerPhone ?? '');
     const [serviceAddress, setServiceAddress] = useState('');
+    const [serviceAddressPlace, setServiceAddressPlace] = useState(null);
     const [isServiceAddressValid, setIsServiceAddressValid] = useState(true);
     const [customerNotes, setCustomerNotes] = useState('');
     const [bookingPhotos, setBookingPhotos] = useState([]);
@@ -324,17 +325,44 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const selectedQuoteOverride = selectedService && initialQuoteOverride
         ? getApplicableInitialQuoteOverride(initialSelection, selectedService, initialQuoteOverride)
         : null;
+    const defaultTaxRate = setup?.defaultTaxRate ?? null;
     const displayQuote = selectedService && selectedQuoteOverride
-        ? quoteFromOverride(selectedService, selectedQuoteOverride)
-        : quote;
+        ? quoteFromOverride(selectedService, selectedQuoteOverride, defaultTaxRate)
+        : selectedService
+            ? (quote ??
+                (selectedService.pricingMode === 'calculated'
+                    ? null
+                    : quoteFromService(selectedService, defaultTaxRate)))
+            : null;
     const isDisplayQuoteLoading = isQuoteLoading && !displayQuote;
     const bookingContextRows = useMemo(() => buildBookingContextRows({
         intakeResponses,
         quote: displayQuote,
         locale: intlLocale,
     }), [displayQuote, intakeResponses, intlLocale]);
+    const priceSummaryRows = useMemo(() => buildPriceSummaryRows({
+        service: selectedService,
+        quote: displayQuote,
+        isLoading: isDisplayQuoteLoading,
+        locale: intlLocale,
+        t,
+    }), [displayQuote, intlLocale, isDisplayQuoteLoading, selectedService, t]);
+    const totalPriceSummaryRow = priceSummaryRows.find((row) => row.isTotal) ?? priceSummaryRows.at(-1);
     const selectedServiceRequiresSlot = selectedService?.publicBookingMode !== 'async';
-    const flexibleSchedulingEnabled = allowFlexibleScheduling && selectedServiceRequiresSlot && !isReschedule;
+    const publicBookingPolicy = setup?.publicBookingPolicy ?? null;
+    const autoAssignProvider = publicBookingPolicy?.providerSelection === 'auto';
+    const requiresServiceAddressBeforeSlots = publicBookingPolicy?.requiresServiceAddressBeforeSlots === true &&
+        !isReschedule;
+    const serviceAddressGeo = serviceAddressPlace && isServiceAddressValid
+        ? serviceAddressPlace
+        : null;
+    const serviceAddressCacheKey = serviceAddressGeo
+        ? `${serviceAddressGeo.placeId ?? ''}:${serviceAddressGeo.lat.toFixed(5)}:${serviceAddressGeo.lng.toFixed(5)}`
+        : 'none';
+    const flexibleSchedulingEnabled = allowFlexibleScheduling &&
+        publicBookingPolicy?.allowFlexibleScheduling !== false &&
+        selectedServiceRequiresSlot &&
+        !isReschedule;
     const effectiveSchedulingPreference = flexibleSchedulingEnabled ? schedulingPreference : 'exact';
     const bookingTimezone = resolveBookingTimezone({
         workspaceTimezone: setup?.workspaceTimezone,
@@ -470,6 +498,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         }
         return setup.staff.filter((staffMember) => selectedService.assignedStaffIds.includes(staffMember._id));
     }, [selectedService, setup]);
+    useEffect(() => {
+        if (autoAssignProvider && selectedStaffId !== null) {
+            setSelectedStaffId(null);
+        }
+    }, [autoAssignProvider, selectedStaffId]);
     useEffect(() => {
         // Wait for availableStaff to populate before clearing - otherwise
         // a pre-seeded staffMemberId (e.g. from rescheduleContext) gets
@@ -488,6 +521,13 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setSelectedDate(null);
             return;
         }
+        if (requiresServiceAddressBeforeSlots && !serviceAddressGeo) {
+            setAvailabilityByDate(new Map());
+            setSelectedDate(null);
+            setSelectedSlot(null);
+            setIsAvailabilityLoading(false);
+            return;
+        }
         if (effectiveSchedulingPreference === 'flexible') {
             setAvailabilityByDate(new Map());
             setIsAvailabilityLoading(false);
@@ -522,7 +562,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         // instant (no refetch) and we always know which staff are
         // available on a given date - even when a single provider is
         // selected - so we can disable unavailable rows in the dropdown.
-        const requestKey = getAvailabilityCacheKey(siteSlug, selectedServiceId, calendarMonth);
+        const requestKey = getAvailabilityCacheKey(siteSlug, selectedServiceId, calendarMonth, serviceAddressCacheKey);
         const cachedAvailability = availabilityCacheRef.current.get(requestKey);
         if (cachedAvailability) {
             setAvailabilityByDate(cachedAvailability);
@@ -542,6 +582,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             serviceId: selectedServiceId,
             startDate: monthStart,
             endDate: monthEnd,
+            serviceAddressGeo,
         })
             .then((result) => {
             if (cancelled) {
@@ -589,6 +630,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         selectedServiceId,
         selectedStaffId,
         selectedService,
+        requiresServiceAddressBeforeSlots,
+        serviceAddressCacheKey,
+        serviceAddressGeo,
         setup?.businessHours,
         siteSlug,
         todayDateKey,
@@ -600,17 +644,25 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             return;
         }
         const nextMonth = addMonths(calendarMonth, 1);
+        if (requiresServiceAddressBeforeSlots && !serviceAddressGeo) {
+            return;
+        }
         void prefetchAvailability({
             client,
             siteSlug,
             selectedServiceId,
             calendarMonth: nextMonth,
             cacheRef: availabilityCacheRef,
+            serviceAddressGeo,
+            serviceAddressCacheKey,
         });
     }, [
         calendarMonth,
         client,
         effectiveSchedulingPreference,
+        requiresServiceAddressBeforeSlots,
+        serviceAddressCacheKey,
+        serviceAddressGeo,
         selectedService?.publicBookingMode,
         selectedServiceId,
         selectedStaffId,
@@ -639,6 +691,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         selectedService?.publicBookingMode,
         selectedServiceId,
         selectedStaffId,
+        serviceAddressCacheKey,
     ]);
     useEffect(() => {
         if (previousSelectedServiceIdRef.current === selectedServiceId) {
@@ -856,7 +909,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // slot to advance. Step 3 is the details form - needs contact name,
     // valid email, and any required intake fields filled. Step 4 is
     // the review screen (submit, not advance).
-    const canAdvanceStep1 = Boolean(selectedService);
+    const canAdvanceStep1 = Boolean(selectedService &&
+        (!requiresServiceAddressBeforeSlots || serviceAddressGeo));
     const hasScheduleSelection = !selectedServiceRequiresSlot ||
         (effectiveSchedulingPreference === 'flexible'
             ? Boolean(selectedDate && selectedFlexibleWindow)
@@ -896,15 +950,15 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // label. The row scrolls horizontally when content exceeds the
     // available width, so it works on desktop AND mobile without a
     // breakpoint-specific layout.
-    const providerRow = selectedService && !isEditingService ? (_jsxs("div", { className: "bw-staff-row", role: "listbox", "aria-label": t('chooseProviderAria'), children: [_jsxs("button", { type: "button", role: "option", "aria-selected": selectedStaffId === null, className: `bw-staff-card${selectedStaffId === null ? ' is-active' : ''}`, onClick: () => setSelectedStaffId(null), children: [_jsx("span", { className: "bw-staff-card-avatar", children: _jsx(UserIcon, {}) }), _jsxs("span", { className: "bw-staff-card-info", children: [_jsx("span", { className: "bw-staff-card-name", children: t('providerAny') }), _jsx("span", { className: "bw-staff-card-desc", children: t('providerFirstAvailable') })] })] }), availableStaff.map((staffMember) => {
+    const providerRow = selectedService && !isEditingService && !autoAssignProvider ? (_jsxs("div", { className: "bw-staff-row", role: "listbox", "aria-label": t('chooseProviderAria'), children: [_jsxs("button", { type: "button", role: "option", "aria-selected": selectedStaffId === null, className: `bw-staff-card${selectedStaffId === null ? ' is-active' : ''}`, onClick: () => setSelectedStaffId(null), children: [_jsx("span", { className: "bw-staff-card-avatar", children: _jsx(UserIcon, {}) }), _jsxs("span", { className: "bw-staff-card-info", children: [_jsx("span", { className: "bw-staff-card-name", children: t('providerAny') }), _jsx("span", { className: "bw-staff-card-desc", children: t('providerFirstAvailable') })] })] }), availableStaff.map((staffMember) => {
                 const isActive = selectedStaffId === staffMember._id;
                 const isAvailable = staffIdsAvailableOnSelectedDate === null ||
                     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 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 ? (_jsxs("div", { className: "bw-window-options", children: [selectedDateFlexibleWindows.map((option, index) => {
+    const slotsAreaKey = `${selectedServiceId ?? 'none'}-${selectedStaffId ?? 'any'}-${selectedDate ?? 'none'}-${effectiveSchedulingPreference}-${selectedFlexibleWindowId}-${serviceAddressCacheKey}-${isAvailabilityLoading ? 'loading' : 'ready'}`;
+    const slotsArea = (_jsx("div", { className: "bw-slots-fade", children: !selectedService ? (_jsx("p", { className: "bw-slots-empty", children: t('slotsSelectServicePrompt') })) : requiresServiceAddressBeforeSlots && !serviceAddressGeo ? (_jsx("p", { className: "bw-slots-empty", children: t('slotsEnterAddressPrompt') })) : 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) => {
@@ -1005,6 +1059,51 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         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: 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 resetAddressDependentSelection() {
+        if (holdId) {
+            void client
+                .releasePublicBookingHold({ siteSlug, holdId, sessionToken })
+                .catch(() => undefined);
+        }
+        setAvailabilityByDate(new Map());
+        setSelectedDate(null);
+        setSelectedSlot(null);
+        setHoldId(null);
+        setHoldExpiresAt(null);
+        setHeldStaffId(null);
+        setPendingSlotKey(null);
+        setError(null);
+        if (selectedService?.publicBookingMode !== 'async') {
+            setViewState('slots');
+            setMobileStep((current) => (current > 2 ? 2 : current));
+        }
+    }
+    function handleServiceAddressChange(next) {
+        setServiceAddress(next);
+        if (serviceAddressPlace !== null) {
+            setServiceAddressPlace(null);
+        }
+        if (requiresServiceAddressBeforeSlots) {
+            resetAddressDependentSelection();
+        }
+    }
+    function handleServiceAddressPlaceSelect(place) {
+        setServiceAddressPlace(place);
+        if (requiresServiceAddressBeforeSlots) {
+            resetAddressDependentSelection();
+        }
+    }
+    function renderServiceAddressGate() {
+        if (!selectedService ||
+            !selectedServiceRequiresSlot ||
+            isEditingService ||
+            !requiresServiceAddressBeforeSlots) {
+            return null;
+        }
+        const addressId = 'bw-service-address-gate';
+        const addressErrorId = `${addressId}-error`;
+        return (_jsxs("div", { className: "bw-service-address-section", children: [_jsx("div", { className: "bw-section-divider" }), _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(BookingAddressAutocompleteInput, { id: addressId, value: serviceAddress, onChange: handleServiceAddressChange, onPlaceSelect: handleServiceAddressPlaceSelect, onValidityChange: setIsServiceAddressValid, mapsApiKey: setup?.mapsBrowserKey, "aria-invalid": showServiceAddressError, "aria-describedby": showServiceAddressRequiredError ? addressErrorId : undefined, showInvalid: showServiceAddressSelectionError, invalidMessage: t('contactServiceAddressInvalid'), lookupUnavailableMessage: t('contactServiceAddressLookupUnavailable'), placeholder: t('placeholderServiceAddress') }), showServiceAddressRequiredError ? (_jsx("span", { className: "bw-field-error", id: addressErrorId, children: t('contactServiceAddressRequired') })) : null] })] }));
+    }
     function renderContactFields(idSuffix) {
         const nameId = `bw-name${idSuffix}`;
         const emailId = `bw-email${idSuffix}`;
@@ -1013,7 +1112,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         const emailErrorId = `${emailId}-error`;
         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(BookingAddressAutocompleteInput, { id: addressId, value: serviceAddress, onChange: setServiceAddress, onValidityChange: setIsServiceAddressValid, mapsApiKey: setup?.mapsBrowserKey, "aria-invalid": showServiceAddressError, "aria-describedby": showServiceAddressRequiredError ? addressErrorId : undefined, showInvalid: showServiceAddressSelectionError, invalidMessage: t('contactServiceAddressInvalid'), lookupUnavailableMessage: t('contactServiceAddressLookupUnavailable'), placeholder: t('placeholderServiceAddress') }), showServiceAddressRequiredError ? (_jsx("span", { className: "bw-field-error", id: addressErrorId, children: t('contactServiceAddressRequired') })) : null] })) : null] }));
+        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 && !requiresServiceAddressBeforeSlots ? (_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(BookingAddressAutocompleteInput, { id: addressId, value: serviceAddress, onChange: handleServiceAddressChange, onPlaceSelect: handleServiceAddressPlaceSelect, onValidityChange: setIsServiceAddressValid, mapsApiKey: setup?.mapsBrowserKey, "aria-invalid": showServiceAddressError, "aria-describedby": showServiceAddressRequiredError ? addressErrorId : undefined, showInvalid: showServiceAddressSelectionError, invalidMessage: t('contactServiceAddressInvalid'), lookupUnavailableMessage: t('contactServiceAddressLookupUnavailable'), placeholder: t('placeholderServiceAddress') }), showServiceAddressRequiredError ? (_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 }));
@@ -1096,8 +1195,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         const previousHoldExpiresAt = holdExpiresAt;
         const previousHeldStaffId = heldStaffId;
         setPendingSlotKey(nextSlotKey);
-        const reservationStaffId = selectedStaffId ?? slot.availableStaffIds[0] ?? null;
-        if (!reservationStaffId) {
+        const reservationStaffId = autoAssignProvider
+            ? null
+            : (selectedStaffId ?? slot.availableStaffIds[0] ?? null);
+        if (!reservationStaffId && !autoAssignProvider) {
             setPendingSlotKey(null);
             setError(t('errorNoStaffForSlot'));
             return;
@@ -1117,16 +1218,17 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             const result = await client.reservePublicBookingHold({
                 siteSlug,
                 serviceId: selectedServiceId,
-                staffMemberId: reservationStaffId,
+                staffMemberId: reservationStaffId ?? undefined,
                 startTime: zonedDateTimeToTimestamp(selectedDate, slot.time, bookingTimezone),
                 endTime: zonedDateTimeToTimestamp(selectedDate, slot.endTime, bookingTimezone),
                 sessionToken,
+                serviceAddressGeo,
             });
             setSelectedSlot(slot);
             setPendingSlotKey(null);
             setHoldId(result.holdId);
             setHoldExpiresAt(result.expiresAt);
-            setHeldStaffId(reservationStaffId);
+            setHeldStaffId(result.staffMemberId ?? reservationStaffId);
             setError(null);
             // Auto-advance the desktop right pane to the details/form view
             // once the hold is reserved. Mobile flow keeps the existing
@@ -1253,11 +1355,15 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 siteSlug,
                 serviceId: selectedServiceId,
                 staffMemberId: isFlexibleRequest
-                    ? (selectedStaffId ?? undefined)
+                    ? autoAssignProvider
+                        ? undefined
+                        : (selectedStaffId ?? undefined)
                     : selectedServiceRequiresSlot
-                        ? (heldStaffId ??
-                            selectedStaffId ??
-                            selectedSlot?.availableStaffIds[0])
+                        ? autoAssignProvider
+                            ? (heldStaffId ?? undefined)
+                            : (heldStaffId ??
+                                selectedStaffId ??
+                                selectedSlot?.availableStaffIds[0])
                         : undefined,
                 startTime: newStartTime,
                 endTime: newEndTime,
@@ -1269,12 +1375,13 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 customerPhone: trimmedCustomerPhone,
                 customerNotes: bookingNotes,
                 location: trimmedServiceAddress,
+                serviceAddressGeo,
                 intakeResponses,
                 photos: bookingPhotos.map((photo) => ({
                     filename: photo.filename,
                     data: photo.data,
                 })),
-                quotedTotalCents: displayQuote?.totalCents,
+                quotedTotalCents: selectedQuoteOverride?.totalCents,
                 bookingHoldId: selectedServiceRequiresSlot && !isFlexibleRequest
                     ? holdId
                     : undefined,
@@ -1316,6 +1423,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setCustomerEmail('');
             setCustomerPhone('');
             setServiceAddress('');
+            setServiceAddressPlace(null);
             setCustomerNotes('');
             setBookingPhotos([]);
             setPhotoError(null);
@@ -1396,9 +1504,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                             }, children: [service.image ? (_jsxs("span", { className: `bw-svc-image${isActive ? ' is-checked' : ''}`, children: [_jsx("img", { src: service.image.url, alt: service.image.alt ??
                                                                                                                 pickLocaleField(service, 'name', locale) ??
                                                                                                                 service.name, loading: "lazy" }), isActive ? (_jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })) : null] })) : (_jsx("span", { className: `bw-check${isActive ? ' is-checked' : ''}`, children: isActive ? _jsx(CheckIcon, {}) : null })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: pickLocaleField(service, 'name', locale) ?? service.name }), (pickLocaleField(service, 'description', locale) ?? service.description) ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(service, 'description', locale) ?? service.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(service, undefined, intlLocale) })] })] })] }, service._id));
-                                                                                    })] }, group.key))) }) }) })] })) }), selectedService &&
+                                                                                    })] }, group.key))) }) }) })] })) }), renderServiceAddressGate(), selectedService &&
                                                         selectedServiceRequiresSlot &&
-                                                        !isEditingService ? (_jsxs("div", { className: "bw-provider-section", children: [_jsx("div", { className: "bw-section-divider" }), _jsx("label", { className: "bw-label", children: t('selectProvider') }), providerRow] })) : null] }), _jsxs("div", { className: "bw-step-2", children: [_jsx("p", { className: "bw-step-2-heading", children: t('chooseYourService') }), _jsx("div", { className: "bw-step-2-divider" }), serviceGroups.map((group) => (_jsxs("div", { className: "bw-svc-group", children: [group.categoryName ? (_jsx("div", { className: "bw-svc-category", children: group.categoryName })) : null, group.services.map((service) => {
+                                                        !isEditingService &&
+                                                        !autoAssignProvider ? (_jsxs("div", { className: "bw-provider-section", children: [_jsx("div", { className: "bw-section-divider" }), _jsx("label", { className: "bw-label", children: t('selectProvider') }), providerRow] })) : null] }), _jsxs("div", { className: "bw-step-2", children: [_jsx("p", { className: "bw-step-2-heading", children: t('chooseYourService') }), _jsx("div", { className: "bw-step-2-divider" }), serviceGroups.map((group) => (_jsxs("div", { className: "bw-svc-group", children: [group.categoryName ? (_jsx("div", { className: "bw-svc-category", children: group.categoryName })) : null, group.services.map((service) => {
                                                                 const isActive = selectedServiceId === service._id;
                                                                 return (_jsxs("div", { children: [_jsxs("button", { type: "button", className: "bw-svc-row bw-svc-row--full", onMouseEnter: () => {
                                                                                 void prefetchAvailability({
@@ -1427,24 +1536,32 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                         setMonthOpen(false);
                                                                                     }, children: option.label }, option.value))) })] })) : null] }), _jsxs("div", { className: "bw-cal-navs", children: [_jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
                                                                             if (!sameMonth(calendarMonth, startOfMonth(new Date())) &&
-                                                                                selectedServiceId) {
+                                                                                selectedServiceId &&
+                                                                                (!requiresServiceAddressBeforeSlots ||
+                                                                                    serviceAddressGeo)) {
                                                                                 void prefetchAvailability({
                                                                                     client,
                                                                                     siteSlug,
                                                                                     selectedServiceId,
                                                                                     calendarMonth: addMonths(calendarMonth, -1),
                                                                                     cacheRef: availabilityCacheRef,
+                                                                                    serviceAddressGeo,
+                                                                                    serviceAddressCacheKey,
                                                                                 });
                                                                             }
                                                                         }, onClick: () => setCalendarMonth((current) => addMonths(current, -1)), disabled: sameMonth(calendarMonth, startOfMonth(new Date())), "aria-label": t('prevMonth'), children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
                                                                             if (!sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)) &&
-                                                                                selectedServiceId) {
+                                                                                selectedServiceId &&
+                                                                                (!requiresServiceAddressBeforeSlots ||
+                                                                                    serviceAddressGeo)) {
                                                                                 void prefetchAvailability({
                                                                                     client,
                                                                                     siteSlug,
                                                                                     selectedServiceId,
                                                                                     calendarMonth: addMonths(calendarMonth, 1),
                                                                                     cacheRef: availabilityCacheRef,
+                                                                                    serviceAddressGeo,
+                                                                                    serviceAddressCacheKey,
                                                                                 });
                                                                             }
                                                                         }, 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: [
@@ -1505,7 +1622,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                     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: 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'
+                                                        }) }), !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 && !autoAssignProvider ? (_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')
@@ -1522,18 +1639,16 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                 textDecoration: 'line-through',
                                                                                 opacity: 0.55,
                                                                             }, children: formerStaffName ?? t('providerAny') })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryService') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: pickLocaleField(selectedService, 'name', locale) ??
-                                                                                selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryProvider') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ??
+                                                                                selectedService.name })] }), !autoAssignProvider ? (_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') })] }), !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] })] }), (() => {
+                                                                                t('providerAny') })] })) : null, 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))) })] }));
                                                 })(), 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, !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('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: priceSummaryRows.map((row) => (_jsxs("div", { className: `bw-summary-row${row.isTotal ? ' bw-summary-total' : ''}`, children: [_jsx("span", { children: row.label }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: row.value })] }, row.key))) })] })) : 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: 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')
@@ -1549,11 +1664,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                                         ...summaryValStyle,
                                                                                                         textDecoration: 'line-through',
                                                                                                         opacity: 0.55,
-                                                                                                    }, children: formerStaffName ?? t('providerAny') })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryService') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryProvider') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ??
+                                                                                                    }, 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 })] }), !autoAssignProvider ? (_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-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, error ? (_jsx("div", { className: "bw-error", children: error })) : null, renderSubmitHelp(), payment ? (_jsx(StripePaymentBlock, { payment: payment, appointmentId: paymentAppointmentId, showInlineButton: false, actionTarget: mobilePaymentActionTarget, onSuccess: () => {
+                                                                                                        t('providerAny') })] })) : null, 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) })] }), priceSummaryRows.map((row) => (_jsxs("div", { className: `bw-summary-row${row.isTotal ? ' bw-summary-total' : ''}`, children: [_jsx("span", { children: row.label }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: row.value })] }, row.key)))] })] })) : 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 || isDisplayQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isDisplayQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
@@ -1570,9 +1683,12 @@ 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') })] }), !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'), renderBookingContext(), renderNotesField('bw-notes-d', isReschedule ? t('notesLabelReschedule') : t('notesLabel'), isReschedule
+                                                                    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: totalPriceSummaryRow?.label ??
+                                                                            t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-details-meta-value", children: totalPriceSummaryRow?.value ??
+                                                                            formatServicePrice(selectedService, displayQuote, intlLocale) }), priceSummaryRows.length > 1 ? (_jsx("span", { className: "bw-details-meta-subvalue", children: priceSummaryRows
+                                                                            .filter((row) => !row.isTotal)
+                                                                            .map((row) => `${row.label}: ${row.value}`)
+                                                                            .join(' · ') })) : null] })] }), 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')), renderPhotoField('bw-photos-d'), error ? _jsx("div", { className: "bw-error", children: error }) : null, renderSubmitHelp(), !payment &&
                                                 (forcedState === 'payment-full' ||
@@ -2162,7 +2278,7 @@ function IntakeField({ field, value, onChange, idPrefix, }) {
                 } }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
 }
 const ADDRESS_PREDICTION_DEBOUNCE_MS = 180;
-function BookingAddressAutocompleteInput({ id, value, onChange, onValidityChange, mapsApiKey, placeholder, ariaInvalid, ariaDescribedBy, showInvalid, invalidMessage, lookupUnavailableMessage, }) {
+function BookingAddressAutocompleteInput({ id, value, onChange, onPlaceSelect, onValidityChange, mapsApiKey, placeholder, ariaInvalid, ariaDescribedBy, showInvalid, invalidMessage, lookupUnavailableMessage, }) {
     const inputRef = useRef(null);
     const debounceRef = useRef(null);
     const serviceRef = useRef(null);
@@ -2250,7 +2366,7 @@ function BookingAddressAutocompleteInput({ id, value, onChange, onValidityChange
             return;
         placesService.getDetails({
             placeId: prediction.place_id,
-            fields: ['formatted_address', 'place_id'],
+            fields: ['formatted_address', 'place_id', 'geometry'],
             sessionToken: sessionTokenRef.current ?? undefined,
         }, (place, status) => {
             const places = getLoadedGooglePlacesApi();
@@ -2261,10 +2377,25 @@ function BookingAddressAutocompleteInput({ id, value, onChange, onValidityChange
             const formatted = place?.formatted_address?.trim();
             if (status !== okStatus || !formatted) {
                 setAcceptedValue('');
+                onPlaceSelect?.(null);
                 return;
             }
+            const lat = place?.geometry?.location?.lat();
+            const lng = place?.geometry?.location?.lng();
+            const hasCoordinates = typeof lat === 'number' &&
+                typeof lng === 'number' &&
+                Number.isFinite(lat) &&
+                Number.isFinite(lng);
             setAcceptedValue(formatted);
             onChange(formatted);
+            onPlaceSelect?.(hasCoordinates
+                ? {
+                    formatted,
+                    lat,
+                    lng,
+                    ...(place?.place_id ? { placeId: place.place_id } : {}),
+                }
+                : null);
             closeDropdown();
             inputRef.current?.blur();
         });
@@ -2275,11 +2406,13 @@ function BookingAddressAutocompleteInput({ id, value, onChange, onValidityChange
         const trimmed = next.trim();
         if (!trimmed) {
             setAcceptedValue('');
+            onPlaceSelect?.(null);
             closeDropdown();
             return;
         }
         if (trimmed !== acceptedValue) {
             setAcceptedValue('');
+            onPlaceSelect?.(null);
         }
         if (!placesReady || loadFailed)
             return;
@@ -2378,21 +2511,91 @@ function formatServicePrice(service, quote, locale = 'en-US') {
     }
     return currencyFormatter(service.currency, locale).format(service.priceCents / 100);
 }
-function quoteFromOverride(service, override) {
+function buildPriceSummaryRows({ service, quote, isLoading, locale, t, }) {
+    if (!service)
+        return [];
+    const totalLabel = isLoading
+        ? t('summaryCalculating')
+        : t('summaryEstimatedTotal');
+    const totalValue = formatServicePrice(service, quote, locale);
+    if (!quote || (quote.taxCents ?? 0) <= 0) {
+        return [
+            {
+                key: 'total',
+                label: totalLabel,
+                value: totalValue,
+                isTotal: true,
+            },
+        ];
+    }
+    const formatter = currencyFormatter(quote.currency, locale);
+    const taxLabel = quote.taxRateBps
+        ? `${quote.taxRateName ?? t('summarySalesTax')} (${formatPercentBps(quote.taxRateBps)})`
+        : (quote.taxRateName ?? t('summarySalesTax'));
+    return [
+        {
+            key: 'subtotal',
+            label: t('summarySubtotal'),
+            value: formatter.format(quote.subtotalCents / 100),
+        },
+        {
+            key: 'tax',
+            label: taxLabel,
+            value: formatter.format((quote.taxCents ?? 0) / 100),
+        },
+        {
+            key: 'total',
+            label: totalLabel,
+            value: totalValue,
+            isTotal: true,
+        },
+    ];
+}
+function formatPercentBps(rateBps) {
+    const percent = rateBps / 100;
+    return `${Number.isInteger(percent) ? percent.toFixed(0) : percent.toFixed(2).replace(/0+$/, '').replace(/\.$/, '')}%`;
+}
+function quoteFromOverride(service, override, taxRate) {
+    return buildDisplayQuote({
+        service,
+        subtotalCents: override.totalCents,
+        taxRate,
+        displayLabel: taxRate ? undefined : override.label,
+        rateSnapshot: {
+            quotedTotalCents: override.totalCents,
+            quoteSource: 'host-estimator',
+        },
+    });
+}
+function quoteFromService(service, taxRate) {
+    return buildDisplayQuote({
+        service,
+        subtotalCents: service.priceCents,
+        taxRate,
+    });
+}
+function buildDisplayQuote({ service, subtotalCents, taxRate, displayLabel, rateSnapshot, }) {
+    const taxRateBps = taxRate?.rateBps ?? 0;
+    const taxCents = Math.round((subtotalCents * taxRateBps) / 10_000);
     return {
         currency: service.currency || 'usd',
-        subtotalCents: override.totalCents,
+        subtotalCents,
         discountCents: 0,
         insuranceCents: 0,
         additionalFeesCents: 0,
-        totalCents: override.totalCents,
+        taxCents,
+        taxRateName: taxRate?.name,
+        taxRateBps: taxRate?.rateBps,
+        totalCents: subtotalCents + taxCents,
         rateSnapshot: {
             pricingMode: 'fixed',
             servicePriceCents: service.priceCents,
-            quotedTotalCents: override.totalCents,
-            quoteSource: 'host-estimator',
+            taxCents,
+            taxRateName: taxRate?.name,
+            taxRateBps: taxRate?.rateBps,
+            ...(rateSnapshot ?? {}),
         },
-        displayLabel: override.label,
+        displayLabel,
     };
 }
 function getInitialQuoteOverride(initialSelection) {
@@ -2915,8 +3118,8 @@ function findFirstAvailableDate(availabilityByDate, month) {
         .sort();
     return dates[0] ?? null;
 }
-async function prefetchAvailability({ client, siteSlug, selectedServiceId, calendarMonth, cacheRef, }) {
-    const requestKey = getAvailabilityCacheKey(siteSlug, selectedServiceId, calendarMonth);
+async function prefetchAvailability({ client, siteSlug, selectedServiceId, calendarMonth, cacheRef, serviceAddressGeo, serviceAddressCacheKey = 'none', }) {
+    const requestKey = getAvailabilityCacheKey(siteSlug, selectedServiceId, calendarMonth, serviceAddressCacheKey);
     if (cacheRef.current.has(requestKey)) {
         return;
     }
@@ -2925,6 +3128,7 @@ async function prefetchAvailability({ client, siteSlug, selectedServiceId, calen
         serviceId: selectedServiceId,
         startDate: formatDateKey(calendarMonth),
         endDate: formatDateKey(endOfMonth(calendarMonth)),
+        serviceAddressGeo,
     });
     const nextMap = new Map();
     for (const day of result.dates) {
@@ -2932,8 +3136,8 @@ async function prefetchAvailability({ client, siteSlug, selectedServiceId, calen
     }
     cacheRef.current.set(requestKey, nextMap);
 }
-function getAvailabilityCacheKey(siteSlug, serviceId, month) {
-    return `${siteSlug}:${serviceId}:${optionCurrentValue(month)}`;
+function getAvailabilityCacheKey(siteSlug, serviceId, month, serviceAddressCacheKey = 'none') {
+    return `${siteSlug}:${serviceId}:${optionCurrentValue(month)}:${serviceAddressCacheKey}`;
 }
 function formatHoldCountdown(totalSeconds) {
     const minutes = Math.floor(totalSeconds / 60);