@asksable/site-connector 0.6.6 → 0.6.7

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;AA6MhD;;;;;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,2CAgzGpB"}

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);
@@ -335,7 +384,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 +872,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 +923,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 +940,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             customerEmail,
             customerPhone,
             serviceAddress,
+            serviceAddressIsValid: isServiceAddressValid,
             requireServiceAddress: !isReschedule,
             t,
             locale,
@@ -952,7 +1013,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 }));
@@ -1623,7 +1684,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 +1702,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 +1853,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 +1884,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 +1931,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 +2161,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: {