@asksable/site-connector 0.6.6 → 0.6.8

package/dist/booking-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-widget.d.ts","sourceRoot":"","sources":["../src/booking-widget.tsx"],"names":[],"mappings":"AAaA,OAAO,qBAAqB,CAAA;AAc5B,OAAO,KAAK,EAKV,SAAS,EACV,MAAM,OAAO,CAAA;AAcd,KAAK,oBAAoB,GAAG,OAAO,GAAG,UAAU,CAAA;AAsGhD;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB;;qBAEiB;IACjB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB;qCACiC;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB;;sBAEkB;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;yCACqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;oEACgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACzC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAA;IAC9B,iBAAiB,CAAC,EAAE,wBAAwB,CAAA;IAC5C;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC1B,YAAY,EAAE,MAAM,CAAA;QACpB,UAAU,EAAE,MAAM,CAAA;KACnB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,uBAAuB,CAAA;IAC1C;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,oBAAoB,CAAA;IAClD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,iBAAiB,CAAA;IAC9E,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,IAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,uBAA+B,EAC/B,2BAAqC,EACrC,mBAAyB,EACzB,eAAe,EACf,iBAAiB,GAClB,EAAE,kBAAkB,2CA2xGpB"}
+{"version":3,"file":"booking-widget.d.ts","sourceRoot":"","sources":["../src/booking-widget.tsx"],"names":[],"mappings":"AAaA,OAAO,qBAAqB,CAAA;AAc5B,OAAO,KAAK,EAKV,SAAS,EACV,MAAM,OAAO,CAAA;AAcd,KAAK,oBAAoB,GAAG,OAAO,GAAG,UAAU,CAAA;AA+MhD;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB;;qBAEiB;IACjB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB;qCACiC;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB;;sBAEkB;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;yCACqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;oEACgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACzC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAA;IAC9B,iBAAiB,CAAC,EAAE,wBAAwB,CAAA;IAC5C;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC1B,YAAY,EAAE,MAAM,CAAA;QACpB,UAAU,EAAE,MAAM,CAAA;KACnB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,uBAAuB,CAAA;IAC1C;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,oBAAoB,CAAA;IAClD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,iBAAiB,CAAA;IAC9E,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,IAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,uBAA+B,EAC/B,2BAAqC,EACrC,mBAAyB,EACzB,eAAe,EACf,iBAAiB,GAClB,EAAE,kBAAkB,2CAq0GpB"}

package/dist/booking-widget.js

@@ -37,6 +37,7 @@ 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();
+const googlePlacesPromises = new Map();
 function getStripePromise(publishableKey, connectAccountId) {
     const key = `${publishableKey}:${connectAccountId}`;
     const cached = stripePromises.get(key);
@@ -48,6 +49,53 @@ function getStripePromise(publishableKey, connectAccountId) {
     stripePromises.set(key, promise);
     return promise;
 }
+function getLoadedGooglePlacesApi() {
+    if (typeof window === 'undefined')
+        return null;
+    return (window.google?.maps?.places ?? null);
+}
+function loadGooglePlacesApi(apiKey) {
+    const key = apiKey.trim();
+    if (!key) {
+        return Promise.reject(new Error('Missing Google Maps browser key.'));
+    }
+    const loaded = getLoadedGooglePlacesApi();
+    if (loaded)
+        return Promise.resolve(loaded);
+    const cached = googlePlacesPromises.get(key);
+    if (cached)
+        return cached;
+    const promise = new Promise((resolve, reject) => {
+        if (typeof document === 'undefined') {
+            reject(new Error('Google Maps can only load in the browser.'));
+            return;
+        }
+        const script = document.createElement('script');
+        const params = new URLSearchParams({
+            key,
+            libraries: 'places',
+            v: 'weekly',
+        });
+        script.src = `https://maps.googleapis.com/maps/api/js?${params.toString()}`;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => {
+            const next = getLoadedGooglePlacesApi();
+            if (next) {
+                resolve(next);
+            }
+            else {
+                reject(new Error('Google Places failed to initialize.'));
+            }
+        };
+        script.onerror = () => {
+            reject(new Error('Google Places failed to load.'));
+        };
+        document.head.appendChild(script);
+    });
+    googlePlacesPromises.set(key, promise);
+    return promise;
+}
 function isDevRuntime() {
     const env = import.meta.env;
     return env?.DEV === true || env?.MODE === 'development';
@@ -116,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 [isServiceAddressValid, setIsServiceAddressValid] = useState(true);
     const [customerNotes, setCustomerNotes] = useState('');
     const [bookingPhotos, setBookingPhotos] = useState([]);
     const [isPreparingPhotos, setIsPreparingPhotos] = useState(false);
@@ -275,15 +324,29 @@ 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 effectiveSchedulingPreference = flexibleSchedulingEnabled ? schedulingPreference : 'exact';
@@ -335,7 +398,12 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const isCustomerEmailValid = trimmedCustomerEmail.length > 0 && isValidEmailAddress(trimmedCustomerEmail);
     const showCustomerEmailError = trimmedCustomerEmail.length > 0 && !isCustomerEmailValid;
     const showCustomerPhoneError = submitAttempted && !trimmedCustomerPhone;
-    const showServiceAddressError = submitAttempted && !isReschedule && !trimmedServiceAddress;
+    const showServiceAddressRequiredError = submitAttempted && !isReschedule && !trimmedServiceAddress;
+    const showServiceAddressSelectionError = submitAttempted &&
+        !isReschedule &&
+        trimmedServiceAddress.length > 0 &&
+        !isServiceAddressValid;
+    const showServiceAddressError = showServiceAddressRequiredError || showServiceAddressSelectionError;
     // 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
@@ -818,7 +886,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const canAdvanceStep3 = Boolean(selectedService &&
         customerName.trim() &&
         isCustomerEmailValid &&
-        (isReschedule || (trimmedCustomerPhone && trimmedServiceAddress)) &&
+        (isReschedule ||
+            (trimmedCustomerPhone &&
+                trimmedServiceAddress &&
+                isServiceAddressValid)) &&
         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
@@ -866,7 +937,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         (selectedService.pricingMode !== 'calculated' || quote) &&
         customerName.trim() &&
         isCustomerEmailValid &&
-        (isReschedule || (trimmedCustomerPhone && trimmedServiceAddress))) && !isSubmitting;
+        (isReschedule ||
+            (trimmedCustomerPhone &&
+                trimmedServiceAddress &&
+                isServiceAddressValid))) && !isSubmitting;
     const submitBlockers = selectedService
         ? getSubmitBlockers({
             selectedService,
@@ -880,6 +954,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             customerEmail,
             customerPhone,
             serviceAddress,
+            serviceAddressIsValid: isServiceAddressValid,
             requireServiceAddress: !isReschedule,
             t,
             locale,
@@ -952,7 +1027,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("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] }));
+        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] }));
     }
     function renderIntakeFields(idPrefix) {
         return (_jsx(IntakeFormFields, { form: selectedService?.intakeForm, responses: intakeResponses, onChange: (fieldId, value) => setIntakeResponses((prev) => ({ ...prev, [fieldId]: value })), idPrefix: idPrefix, mode: selectedServicePath }));
@@ -1213,7 +1288,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                     filename: photo.filename,
                     data: photo.data,
                 })),
-                quotedTotalCents: displayQuote?.totalCents,
+                quotedTotalCents: selectedQuoteOverride?.totalCents,
                 bookingHoldId: selectedServiceRequiresSlot && !isFlexibleRequest
                     ? holdId
                     : undefined,
@@ -1470,9 +1545,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                     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')
@@ -1490,9 +1563,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                                                                                                         opacity: 0.55,
                                                                                                     }, children: formerStaffName ?? t('providerAny') })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryService') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryProvider') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ??
                                                                                                         selectedStaff?.name ??
-                                                                                                        t('providerAny') })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDate') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate, intlLocale) })] })) : null, 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') })] }), 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
@@ -1509,9 +1580,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' ||
@@ -1623,7 +1697,7 @@ function areRequiredIntakeFieldsComplete(form, responses, mode) {
         return isRequiredIntakeFieldComplete(field, responses[field.id], minItems);
     }));
 }
-function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, hasScheduleSelection, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, customerPhone, serviceAddress, requireServiceAddress, t, locale = DEFAULT_LOCALE, }) {
+function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, hasScheduleSelection, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, customerPhone, serviceAddress, serviceAddressIsValid, requireServiceAddress, t, locale = DEFAULT_LOCALE, }) {
     const blockers = [];
     if (selectedServiceRequiresSlot && !hasScheduleSelection) {
         blockers.push(t('blockerDateTime'));
@@ -1641,6 +1715,9 @@ function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, hasSc
     if (requireServiceAddress && !serviceAddress.trim()) {
         blockers.push(t('blockerServiceAddress'));
     }
+    else if (requireServiceAddress && !serviceAddressIsValid) {
+        blockers.push(t('blockerServiceAddressInvalid'));
+    }
     if (!isIntakeComplete && selectedService.intakeForm) {
         blockers.push(...getMissingRequiredIntakeLabels(selectedService.intakeForm, intakeResponses, selectedServicePath, t, locale));
     }
@@ -1789,14 +1866,12 @@ function buildIntakeReviewRows(form, responses, servicePath, locale, t) {
 }
 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;
             }
         }
@@ -1822,24 +1897,6 @@ function buildBookingContextRows({ intakeResponses, quote, locale, }) {
             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;
 }
@@ -1887,9 +1944,6 @@ function titleizeContextValue(value) {
         .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) {
@@ -2120,6 +2174,172 @@ function IntakeField({ field, value, onChange, idPrefix, }) {
                         : event.target.value);
                 } }), 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, }) {
+    const inputRef = useRef(null);
+    const debounceRef = useRef(null);
+    const serviceRef = useRef(null);
+    const placesServiceRef = useRef(null);
+    const sessionTokenRef = useRef(null);
+    const focusedRef = useRef(false);
+    const [acceptedValue, setAcceptedValue] = useState('');
+    const [predictions, setPredictions] = useState([]);
+    const [highlightIndex, setHighlightIndex] = useState(-1);
+    const [open, setOpen] = useState(false);
+    const [loadFailed, setLoadFailed] = useState(false);
+    const [placesReady, setPlacesReady] = useState(false);
+    const apiKey = mapsApiKey?.trim() || null;
+    const mapsConfigured = Boolean(apiKey);
+    const needsGoogleSelection = mapsConfigured;
+    const trimmedValue = value.trim();
+    const isGoogleValid = !needsGoogleSelection ||
+        trimmedValue.length === 0 ||
+        acceptedValue === trimmedValue;
+    useEffect(() => {
+        onValidityChange(isGoogleValid);
+    }, [isGoogleValid, onValidityChange]);
+    useEffect(() => () => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+    }, []);
+    useEffect(() => {
+        if (!apiKey) {
+            setPlacesReady(false);
+            setLoadFailed(false);
+            return;
+        }
+        let cancelled = false;
+        void loadGooglePlacesApi(apiKey)
+            .then((places) => {
+            if (cancelled)
+                return;
+            serviceRef.current = new places.AutocompleteService();
+            placesServiceRef.current = new places.PlacesService(document.createElement('div'));
+            sessionTokenRef.current = new places.AutocompleteSessionToken();
+            setLoadFailed(false);
+            setPlacesReady(true);
+        })
+            .catch(() => {
+            if (cancelled)
+                return;
+            setLoadFailed(true);
+            setPlacesReady(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [apiKey]);
+    function closeDropdown() {
+        setOpen(false);
+        setHighlightIndex(-1);
+        setPredictions([]);
+    }
+    function fetchPredictions(input) {
+        const service = serviceRef.current;
+        if (!service || input.trim().length === 0) {
+            closeDropdown();
+            return;
+        }
+        service.getPlacePredictions({
+            input,
+            sessionToken: sessionTokenRef.current ?? undefined,
+            types: ['address'],
+        }, (results, status) => {
+            if (!focusedRef.current)
+                return;
+            const okStatus = getLoadedGooglePlacesApi()?.PlacesServiceStatus.OK;
+            if (status !== okStatus || !results || results.length === 0) {
+                closeDropdown();
+                return;
+            }
+            setPredictions(results);
+            setHighlightIndex(-1);
+            setOpen(true);
+        });
+    }
+    function selectPrediction(prediction) {
+        const placesService = placesServiceRef.current;
+        if (!placesService)
+            return;
+        placesService.getDetails({
+            placeId: prediction.place_id,
+            fields: ['formatted_address', 'place_id'],
+            sessionToken: sessionTokenRef.current ?? undefined,
+        }, (place, status) => {
+            const places = getLoadedGooglePlacesApi();
+            sessionTokenRef.current = places
+                ? new places.AutocompleteSessionToken()
+                : null;
+            const okStatus = getLoadedGooglePlacesApi()?.PlacesServiceStatus.OK;
+            const formatted = place?.formatted_address?.trim();
+            if (status !== okStatus || !formatted) {
+                setAcceptedValue('');
+                return;
+            }
+            setAcceptedValue(formatted);
+            onChange(formatted);
+            closeDropdown();
+            inputRef.current?.blur();
+        });
+    }
+    function handleAddressChange(event) {
+        const next = event.target.value;
+        onChange(next);
+        const trimmed = next.trim();
+        if (!trimmed) {
+            setAcceptedValue('');
+            closeDropdown();
+            return;
+        }
+        if (trimmed !== acceptedValue) {
+            setAcceptedValue('');
+        }
+        if (!placesReady || loadFailed)
+            return;
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => fetchPredictions(trimmed), ADDRESS_PREDICTION_DEBOUNCE_MS);
+    }
+    function handleAddressKeyDown(event) {
+        if (!open || predictions.length === 0)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setHighlightIndex((current) => current < predictions.length - 1 ? current + 1 : 0);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setHighlightIndex((current) => current > 0 ? current - 1 : predictions.length - 1);
+        }
+        else if (event.key === 'Enter') {
+            if (highlightIndex >= 0 && highlightIndex < predictions.length) {
+                event.preventDefault();
+                selectPrediction(predictions[highlightIndex]);
+            }
+        }
+        else if (event.key === 'Escape') {
+            closeDropdown();
+        }
+    }
+    const listboxId = `${id}-matches`;
+    const shouldShowInvalid = showInvalid && trimmedValue.length > 0;
+    return (_jsxs("div", { className: "bw-address-autocomplete", children: [_jsx("input", { ref: inputRef, id: id, required: true, value: value, onChange: handleAddressChange, onKeyDown: handleAddressKeyDown, onFocus: () => {
+                    focusedRef.current = true;
+                    if (predictions.length > 0)
+                        setOpen(true);
+                }, onBlur: () => {
+                    focusedRef.current = false;
+                    setOpen(false);
+                }, role: mapsConfigured ? 'combobox' : undefined, "aria-expanded": mapsConfigured ? open : undefined, "aria-controls": mapsConfigured ? listboxId : undefined, "aria-autocomplete": mapsConfigured ? 'list' : undefined, "aria-invalid": ariaInvalid || shouldShowInvalid || undefined, "aria-describedby": shouldShowInvalid ? `${id}-google-error` : ariaDescribedBy, placeholder: placeholder, autoComplete: "off" }), mapsConfigured ? (_jsx("span", { className: "bw-address-icon", "aria-hidden": "true", children: isGoogleValid && trimmedValue ? _jsx(CheckIcon, {}) : _jsx(LocationPinIcon, {}) })) : null, open && predictions.length > 0 ? (_jsx("div", { id: listboxId, role: "listbox", "aria-label": "Address matches", className: "bw-address-menu", children: predictions.map((prediction, index) => {
+                    const main = prediction.structured_formatting?.main_text ??
+                        prediction.description;
+                    const secondary = prediction.structured_formatting?.secondary_text ?? '';
+                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": index === highlightIndex, className: `bw-address-option${index === highlightIndex ? ' is-focused' : ''}`, onMouseDown: (event) => {
+                            event.preventDefault();
+                            selectPrediction(prediction);
+                        }, onMouseEnter: () => setHighlightIndex(index), children: [_jsx("span", { className: "bw-address-option-icon", "aria-hidden": "true", children: _jsx(LocationPinIcon, {}) }), _jsxs("span", { className: "bw-address-option-copy", children: [_jsx("span", { className: "bw-address-option-main", children: main }), secondary ? (_jsx("span", { className: "bw-address-option-secondary", children: secondary })) : null] })] }, prediction.place_id));
+                }) })) : null, shouldShowInvalid ? (_jsx("span", { className: "bw-field-error", id: `${id}-google-error`, children: loadFailed ? lookupUnavailableMessage : invalidMessage })) : null] }));
+}
 function StripePaymentBlock({ payment, appointmentId, showInlineButton = true, actionTarget, onSuccess, onError, }) {
     const stripePromise = useMemo(() => getStripePromise(payment.publishableKey, payment.connectAccountId), [payment.connectAccountId, payment.publishableKey]);
     return (_jsx(Elements, { stripe: stripePromise, options: {
@@ -2171,21 +2391,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) {