@sonordev/site-kit 5.3.2 → 5.5.0

package/dist/{chunk-HVFXFPUJ.mjs → chunk-XQYC4KMH.mjs}

@@ -1,8 +1,83 @@
 'use client';
-import { sonorFetch } from './chunk-ZKR5AJV5.mjs';
-import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { sonorFetch } from './chunk-OFSA7LUH.mjs';
+import { useState, useRef, useMemo, useCallback, useEffect, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+function MeetingFormatStep({ options, busy, format, address, onFormatChange, onAddressChange, onContinue, onBack }) {
+  const id = useId();
+  const choices = [
+    { value: "virtual", label: "Virtual", description: "Meet online with a Google Meet link." },
+    { value: "office", label: "Come to us", description: "Meet in person at our office." },
+    { value: "client_location", label: "We come to you", description: `We can meet at your location within about ${options.travel_radius_miles} miles of our office.` }
+  ];
+  return /* @__PURE__ */ jsxs("form", { onSubmit: (e) => {
+    e.preventDefault();
+    if (format) onContinue(format, format === "client_location" ? address : void 0);
+  }, className: "bw-step sk-meeting-step", children: [
+    onBack && /* @__PURE__ */ jsx("button", { type: "button", className: "bw-back sk-meeting-change", onClick: onBack, disabled: busy, children: "\u2190 Change service" }),
+    /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "How would you like to meet?" }),
+    /* @__PURE__ */ jsxs("fieldset", { disabled: busy, className: "sk-meeting-choices", children: [
+      /* @__PURE__ */ jsx("legend", { className: "sk-meeting-legend", children: "Meeting format" }),
+      choices.map((choice) => /* @__PURE__ */ jsxs("label", { className: `sk-meeting-choice ${format === choice.value ? "sk-meeting-selected" : ""}`, children: [
+        /* @__PURE__ */ jsx("input", { type: "radio", name: `${id}-format`, value: choice.value, checked: format === choice.value, onChange: () => onFormatChange(choice.value), required: true }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("strong", { children: choice.label }),
+          /* @__PURE__ */ jsx("span", { children: choice.description })
+        ] })
+      ] }, choice.value))
+    ] }),
+    format === "office" && /* @__PURE__ */ jsxs("div", { className: "sk-meeting-address", children: [
+      /* @__PURE__ */ jsx("p", { children: options.office_address }),
+      /* @__PURE__ */ jsx("p", { children: options.office_instructions }),
+      /* @__PURE__ */ jsx("a", { href: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(options.office_address)}`, target: "_blank", rel: "noopener noreferrer", children: "Get directions" })
+    ] }),
+    format === "client_location" && /* @__PURE__ */ jsxs("fieldset", { disabled: busy, className: "bw-form sk-meeting-fields", children: [
+      /* @__PURE__ */ jsx("legend", { children: "Your meeting address" }),
+      [
+        ["street", "Street address", "street-address"],
+        ["unit", "Suite or unit (optional)", "address-line2"],
+        ["city", "City", "address-level2"],
+        ["region", "State or region", "address-level1"],
+        ["postalCode", "Postal code", "postal-code"],
+        ["country", "Country", "country-name"]
+      ].map(([key, label, autocomplete]) => /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `${id}-${key}`, children: label }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${id}-${key}`,
+            value: address[key],
+            required: key !== "unit",
+            maxLength: 200,
+            autoComplete: autocomplete,
+            onChange: (e) => onAddressChange({ ...address, [key]: e.target.value })
+          }
+        )
+      ] }, key)),
+      /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `${id}-notes`, children: "Parking or access notes (optional)" }),
+        /* @__PURE__ */ jsx("textarea", { id: `${id}-notes`, value: address.notes, maxLength: 2e3, onChange: (e) => onAddressChange({ ...address, notes: e.target.value }) })
+      ] }),
+      options.travel_review_required && /* @__PURE__ */ jsx("p", { children: "We\u2019ll reserve your requested time and confirm after checking travel arrangements." })
+    ] }),
+    /* @__PURE__ */ jsx("button", { className: "bw-submit", type: "submit", disabled: !format || busy, children: busy ? "Checking meeting details\u2026" : "Choose a time" }),
+    /* @__PURE__ */ jsx("style", { children: `
+      .sk-meeting-choices { border: 0; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
+      .sk-meeting-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+      .sk-meeting-choice { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--sk-border); border-radius: var(--sk-radius); cursor: pointer; background: var(--sk-surface); }
+      .sk-meeting-choice input { margin-top: 4px; accent-color: var(--sk-primary); }
+      .sk-meeting-choice strong { display: block; color: var(--sk-text-primary); }
+      .sk-meeting-choice span span { display: block; margin-top: 4px; font-size: 14px; color: var(--sk-text-secondary); }
+      .sk-meeting-selected { border-color: var(--sk-primary); background: var(--sk-primary-light); }
+      .sk-meeting-address { padding: 16px; background: var(--sk-surface); border-radius: var(--sk-radius); margin-bottom: 16px; white-space: pre-wrap; }
+      .sk-meeting-address a { display: inline-block; margin-top: 8px; color: var(--sk-primary); }
+      .sk-meeting-fields { border: 0; padding: 0; margin-bottom: 20px; }
+      .sk-meeting-fields legend { margin-bottom: 12px; font-weight: 600; }
+      .sk-meeting-step .bw-submit { width: 100%; }
+    ` })
+  ] });
+}
+
 // src/sync/api.ts
 var DEFAULT_API_URL = "https://api.sonor.io";
 function getApiConfig() {
@@ -42,13 +117,14 @@ async function fetchBookingTypeDetails(typeSlug, orgSlug, apiUrl, apiKey) {
   }
   return response.json();
 }
-async function fetchAvailability(typeSlug, date, orgSlug, apiUrl, apiKey, timezone, hostId) {
+async function fetchAvailability(typeSlug, date, orgSlug, apiUrl, apiKey, timezone, hostId, meetingToken) {
   const cfg = getApiConfig();
   const url = apiUrl || cfg.apiUrl;
   const key = apiKey || cfg.apiKey;
   const params = new URLSearchParams({ date });
   if (timezone) params.append("timezone", timezone);
   if (hostId) params.append("hostId", hostId);
+  if (meetingToken) params.append("meetingToken", meetingToken);
   const endpoint = key ? `${url}/sync/widget/availability/${typeSlug}?${params}` : `${url}/sync/public/${orgSlug}/availability/${typeSlug}?${params}`;
   const response = await sonorFetch(endpoint, { headers: buildHeaders() }, { apiKey: key, retries: 0 });
   if (!response.ok) {
@@ -68,6 +144,11 @@ async function fetchAvailability(typeSlug, date, orgSlug, apiUrl, apiKey, timezo
     available: slot.available !== false
   }));
 }
+async function bookingRequestError(response, fallback) {
+  const body = await response.json().catch(() => ({}));
+  const message = Array.isArray(body.message) ? body.message.join(". ") : body.message;
+  return new Error(typeof message === "string" && message.trim() ? message : fallback);
+}
 async function createSlotHold(holdData, apiUrl, apiKey) {
   const cfg = getApiConfig();
   const url = apiUrl || cfg.apiUrl;
@@ -79,7 +160,7 @@ async function createSlotHold(holdData, apiUrl, apiKey) {
     body: JSON.stringify(holdData)
   }, { apiKey: key, retries: 0 });
   if (!response.ok) {
-    throw new Error(`Failed to hold slot: ${response.statusText}`);
+    throw await bookingRequestError(response, "We couldn\u2019t reserve that time. Please choose another time.");
   }
   return response.json();
 }
@@ -104,12 +185,11 @@ async function createBooking(bookingData, apiUrl, apiKey) {
     body: JSON.stringify(bookingData)
   }, { apiKey: key, retries: 0 });
   if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.message || `Failed to create booking: ${response.statusText}`);
+    throw await bookingRequestError(response, "We couldn\u2019t complete your booking. Please try again.");
   }
   return response.json();
 }
-async function fetchAvailableDates(typeSlug, startDate, endDate, orgSlug, apiUrl, apiKey, timezone) {
+async function fetchAvailableDates(typeSlug, startDate, endDate, orgSlug, apiUrl, apiKey, timezone, meetingToken) {
   const availableDates = [];
   const start = new Date(startDate);
   const end = new Date(endDate);
@@ -117,7 +197,7 @@ async function fetchAvailableDates(typeSlug, startDate, endDate, orgSlug, apiUrl
   while (current <= end) {
     const dateStr = current.toISOString().split("T")[0];
     try {
-      const slots = await fetchAvailability(typeSlug, dateStr, orgSlug, apiUrl, apiKey, timezone);
+      const slots = await fetchAvailability(typeSlug, dateStr, orgSlug, apiUrl, apiKey, timezone, void 0, meetingToken);
       if (slots.some((s) => s.available)) {
         availableDates.push(dateStr);
       }
@@ -164,6 +244,33 @@ function formatDuration(minutes) {
   }
   return `${hours}h ${mins}m`;
 }
+async function prepareMeeting(bookingType, format, address, orgSlug, apiUrl, apiKey) {
+  const cfg = getApiConfig();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/meeting` : `${url}/sync/public/${orgSlug}/meeting`;
+  const response = await sonorFetch(endpoint, {
+    method: "POST",
+    headers: buildHeaders(true),
+    body: JSON.stringify({ bookingType, format, address })
+  }, { apiKey: key, retries: 0 });
+  if (!response.ok) {
+    throw await bookingRequestError(response, "We couldn\u2019t check your meeting details. Please try again.");
+  }
+  return response.json();
+}
+
+// src/sync/booking-flow.ts
+function expiredBookingContext(meeting, hold, now = Date.now()) {
+  if (hold) return Date.parse(hold.expiresAt) <= now ? "hold" : null;
+  return meeting && Date.parse(meeting.expiresAt) <= now ? "meeting" : null;
+}
+function bookingRecoveryFromError(error) {
+  const message = error instanceof Error ? error.message : "";
+  if (/meeting details expired|choose how you.d like to meet first/i.test(message)) return "meeting";
+  if (/time reservation expired|invalid slot hold|meeting details changed/i.test(message)) return "hold";
+  return null;
+}
 var DEFAULT_API_URL2 = "https://api.sonor.io";
 var DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTHS = [
@@ -275,6 +382,17 @@ function BookingWidget({
   const [guestInfo, setGuestInfo] = useState({ name: "", email: "" });
   const [bookingResult, setBookingResult] = useState(null);
   const [submitting, setSubmitting] = useState(false);
+  const [meeting, setMeeting] = useState(null);
+  const [meetingFormat, setMeetingFormat] = useState(null);
+  const [meetingAddress, setMeetingAddress] = useState({ street: "", city: "", region: "", postalCode: "", country: "United States", unit: "", notes: "" });
+  const [recovery, setRecovery] = useState(null);
+  const [sessionId] = useState(() => `bw-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+  const requestRef = useRef(0);
+  const busyRef = useRef(false);
+  const bookingInFlightRef = useRef(false);
+  const holdRef = useRef(null);
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
   const [autoProbing, setAutoProbing] = useState(false);
   const probeRef = useRef(0);
   const prefetchedRef = useRef(null);
@@ -299,26 +417,79 @@ function BookingWidget({
     d.setDate(d.getDate() + daysToShow);
     return d;
   }, [today, daysToShow]);
+  const setActiveHold = useCallback((value) => {
+    holdRef.current = value;
+    setHold(value);
+  }, []);
+  const resetScheduling = useCallback((nextStep, clearMeeting = false) => {
+    ++requestRef.current;
+    const previous = holdRef.current;
+    setActiveHold(null);
+    if (previous) releaseSlotHold(previous.holdId, apiUrl, apiKey).catch(() => {
+    });
+    setSelectedDate(null);
+    setSelectedSlot(null);
+    setConfirmedSlot(false);
+    setSlots([]);
+    setSlotsLoading(false);
+    prefetchedRef.current = null;
+    if (clearMeeting) setMeeting(null);
+    setRecovery(null);
+    setError(null);
+    setStep(nextStep);
+  }, [apiUrl, apiKey, setActiveHold]);
+  const reportRequestError = useCallback((err) => {
+    setRecovery(bookingRecoveryFromError(err));
+    setError(err.message);
+    onErrorRef.current?.(err);
+  }, []);
+  useEffect(() => () => {
+    ++requestRef.current;
+    if (holdRef.current && !bookingInFlightRef.current) {
+      releaseSlotHold(holdRef.current.holdId, apiUrl, apiKey).catch(() => {
+      });
+    }
+    holdRef.current = null;
+  }, [apiUrl, apiKey]);
   useEffect(() => {
+    let cancelled = false;
+    ++requestRef.current;
+    busyRef.current = false;
+    bookingInFlightRef.current = false;
+    resetScheduling(bookingTypeSlug ? "datetime" : "type", true);
+    setSelectedType(null);
+    setMeetingFormat(null);
+    setBookingResult(null);
+    setSubmitting(false);
     if (bookingTypeSlug) {
       setLoading(true);
       fetchBookingTypeDetails(bookingTypeSlug, orgSlug, apiUrl, apiKey).then((type) => {
-        setSelectedType(type);
-        setStep("datetime");
+        if (!cancelled) {
+          setSelectedType(type);
+          setStep(type.meeting_options ? "format" : "datetime");
+        }
       }).catch((err) => {
-        setError(err.message);
-        onError?.(err);
-      }).finally(() => setLoading(false));
+        if (!cancelled) reportRequestError(err);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
     } else {
       setLoading(true);
-      fetchBookingTypes(orgSlug, apiUrl, apiKey).then((types) => setBookingTypes(types.filter((t) => t.is_active))).catch((err) => {
-        setError(err.message);
-        onError?.(err);
-      }).finally(() => setLoading(false));
+      fetchBookingTypes(orgSlug, apiUrl, apiKey).then((types) => {
+        if (!cancelled) setBookingTypes(types.filter((t) => t.is_active));
+      }).catch((err) => {
+        if (!cancelled) reportRequestError(err);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
     }
-  }, [orgSlug, apiKey, bookingTypeSlug, apiUrl, onError]);
+    return () => {
+      cancelled = true;
+      ++requestRef.current;
+    };
+  }, [orgSlug, apiKey, bookingTypeSlug, apiUrl, resetScheduling, reportRequestError]);
   useEffect(() => {
-    if (!selectedDate || !selectedType) return;
+    if (!selectedDate || !selectedType || selectedType.meeting_options && !meeting) return;
     const dateStr = toLocalDateStr(selectedDate);
     setSelectedSlot(null);
     setConfirmedSlot(false);
@@ -329,15 +500,22 @@ function BookingWidget({
       setSlotsLoading(false);
       return;
     }
+    let cancelled = false;
     setSlotsLoading(true);
     setSlots([]);
-    fetchAvailability(selectedType.slug, dateStr, orgSlug, apiUrl, apiKey, timezone).then((s) => setSlots(s.filter((slot) => slot.available))).catch((err) => {
-      setError(err.message);
-      onError?.(err);
-    }).finally(() => setSlotsLoading(false));
-  }, [selectedDate, selectedType, orgSlug, apiKey, apiUrl, timezone, onError]);
+    fetchAvailability(selectedType.slug, dateStr, orgSlug, apiUrl, apiKey, timezone, void 0, meeting?.meetingToken).then((s) => {
+      if (!cancelled) setSlots(s.filter((slot) => slot.available));
+    }).catch((err) => {
+      if (!cancelled) reportRequestError(err);
+    }).finally(() => {
+      if (!cancelled) setSlotsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedDate, selectedType, orgSlug, apiKey, apiUrl, timezone, reportRequestError, meeting]);
   useEffect(() => {
-    if (!autoSelectFirstDay || !selectedType || selectedDate) return;
+    if (!autoSelectFirstDay || !selectedType || selectedDate || step !== "datetime" || recovery || selectedType.meeting_options && !meeting) return;
     const probeId = ++probeRef.current;
     let cancelled = false;
     const PROBE_DAYS = 14;
@@ -350,7 +528,7 @@ function BookingWidget({
           d.setDate(d.getDate() + i);
           if (d > maxDate) break;
           const dateStr = toLocalDateStr(d);
-          const s = await fetchAvailability(selectedType.slug, dateStr, orgSlug, apiUrl, apiKey, timezone);
+          const s = await fetchAvailability(selectedType.slug, dateStr, orgSlug, apiUrl, apiKey, timezone, void 0, meeting?.meetingToken);
           if (cancelled || probeRef.current !== probeId) return;
           const open = s.filter((slot) => slot.available);
           if (open.length > 0) {
@@ -360,7 +538,8 @@ function BookingWidget({
             return;
           }
         }
-      } catch {
+      } catch (err) {
+        if (!cancelled && bookingRecoveryFromError(err)) reportRequestError(err);
       } finally {
         if (!cancelled && probeRef.current === probeId) setAutoProbing(false);
       }
@@ -369,46 +548,92 @@ function BookingWidget({
       cancelled = true;
       setAutoProbing(false);
     };
-  }, [autoSelectFirstDay, selectedType, selectedDate, orgSlug, apiKey, apiUrl, timezone, today, maxDate]);
+  }, [autoSelectFirstDay, selectedType, selectedDate, orgSlug, apiKey, apiUrl, timezone, today, maxDate, step, meeting, recovery, reportRequestError]);
+  useEffect(() => {
+    if (step !== "datetime" && step !== "form" || loading || submitting) return;
+    const expiry = hold?.expiresAt || meeting?.expiresAt;
+    if (!expiry || !Number.isFinite(Date.parse(expiry))) return;
+    const checkExpiry = () => {
+      const expired = expiredBookingContext(meeting, hold);
+      if (!busyRef.current && expired) setRecovery(expired);
+    };
+    const timer = setTimeout(checkExpiry, Math.max(0, Date.parse(expiry) - Date.now()));
+    window.addEventListener("focus", checkExpiry);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("focus", checkExpiry);
+    };
+  }, [meeting, hold, step, loading, submitting]);
   const handleSlotSelect = useCallback((slot) => {
+    if (busyRef.current) return;
     setSelectedSlot(slot);
     setConfirmedSlot(false);
   }, []);
   const handleSlotConfirm = useCallback(async () => {
-    if (!selectedType || !selectedSlot) return;
-    if (hold) await releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
-    });
+    if (!selectedType || !selectedSlot || busyRef.current || recovery) return;
+    const expired = expiredBookingContext(meeting, null);
+    if (expired) {
+      setRecovery(expired);
+      return;
+    }
+    const requestId = ++requestRef.current;
+    busyRef.current = true;
     setLoading(true);
+    setError(null);
     try {
+      const previous = holdRef.current;
+      setActiveHold(null);
+      if (previous) await releaseSlotHold(previous.holdId, apiUrl, apiKey).catch(() => {
+      });
+      if (requestId !== requestRef.current) return;
       const newHold = await createSlotHold(
         {
+          meetingToken: meeting?.meetingToken,
+          org: apiKey ? void 0 : orgSlug,
           bookingType: selectedType.slug,
           slotStart: selectedSlot.start,
           slotEnd: selectedSlot.end,
           hostId: selectedSlot.hostId || "",
-          sessionId: `bw-${Date.now()}`
+          sessionId
         },
         apiUrl,
         apiKey
       );
-      setHold(newHold);
+      if (requestId !== requestRef.current) {
+        await releaseSlotHold(newHold.holdId, apiUrl, apiKey).catch(() => {
+        });
+        return;
+      }
+      setActiveHold(newHold);
       setConfirmedSlot(true);
       setStep("form");
     } catch (err) {
-      setError(err.message);
-      onError?.(err);
+      if (requestId === requestRef.current) reportRequestError(err);
     } finally {
-      setLoading(false);
+      if (requestId === requestRef.current) {
+        busyRef.current = false;
+        setLoading(false);
+      }
     }
-  }, [selectedType, selectedSlot, hold, timezone, apiUrl, apiKey, onError]);
+  }, [selectedType, selectedSlot, apiUrl, apiKey, meeting, sessionId, orgSlug, recovery, setActiveHold, reportRequestError]);
   const handleBookingSubmit = useCallback(async (e) => {
     e.preventDefault();
-    if (!selectedType || !selectedSlot) return;
+    if (!selectedType || !selectedSlot || busyRef.current || recovery) return;
+    const expired = expiredBookingContext(meeting, hold);
+    if (expired) {
+      setRecovery(expired);
+      return;
+    }
+    const requestId = ++requestRef.current;
+    busyRef.current = true;
+    bookingInFlightRef.current = true;
     setSubmitting(true);
     setError(null);
     try {
       const result = await createBooking(
         {
+          meetingToken: meeting?.meetingToken,
+          org: apiKey ? void 0 : orgSlug,
           bookingType: selectedType.slug,
           scheduledAt: selectedSlot.start,
           hostId: selectedSlot.hostId || "",
@@ -419,31 +644,82 @@ function BookingWidget({
           source: "main-site",
           timezone,
           holdId: hold?.holdId,
-          sessionId: `bw-${Date.now()}`,
+          sessionId,
           sourceUrl: typeof window !== "undefined" ? window.location.href : void 0
         },
         apiUrl,
         apiKey
       );
+      if (requestId !== requestRef.current) return;
+      setActiveHold(null);
       setBookingResult(result);
       setStep("success");
       onBookingComplete?.(result);
     } catch (err) {
-      setError(err.message);
-      onError?.(err);
+      if (requestId === requestRef.current) reportRequestError(err);
+      else if (hold) releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
+      });
     } finally {
-      setSubmitting(false);
+      if (requestId === requestRef.current) {
+        busyRef.current = false;
+        bookingInFlightRef.current = false;
+        setSubmitting(false);
+      }
     }
-  }, [selectedType, selectedSlot, guestInfo, timezone, hold, apiUrl, apiKey, onBookingComplete, onError]);
-  useEffect(() => {
-    return () => {
-      if (hold) releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
-      });
-    };
-  }, [hold, apiUrl, apiKey]);
+  }, [selectedType, selectedSlot, guestInfo, timezone, hold, apiUrl, apiKey, onBookingComplete, meeting, sessionId, orgSlug, recovery, setActiveHold, reportRequestError]);
+  const chooseFormat = async (format, address) => {
+    if (!selectedType || busyRef.current) return;
+    const requestId = ++requestRef.current;
+    busyRef.current = true;
+    setLoading(true);
+    setError(null);
+    try {
+      const prepared = await prepareMeeting(selectedType.slug, format, address, orgSlug, apiUrl, apiKey);
+      if (requestId !== requestRef.current) return;
+      setMeeting(prepared);
+      setRecovery(null);
+      setSelectedDate(null);
+      setSelectedSlot(null);
+      prefetchedRef.current = null;
+      setStep("datetime");
+    } catch (err) {
+      if (requestId === requestRef.current) reportRequestError(err);
+    } finally {
+      if (requestId === requestRef.current) {
+        busyRef.current = false;
+        setLoading(false);
+      }
+    }
+  };
+  const changeFormat = () => {
+    if (!busyRef.current) resetScheduling("format", true);
+  };
+  const changeService = () => {
+    if (busyRef.current) return;
+    resetScheduling("type", true);
+    setSelectedType(null);
+    setMeetingFormat(null);
+  };
+  const recoverReservation = () => {
+    if (busyRef.current) return;
+    const needsMeeting = recovery === "meeting" || expiredBookingContext(meeting, null) === "meeting";
+    resetScheduling(needsMeeting ? "format" : "datetime", needsMeeting);
+  };
+  const displayType = selectedType ? {
+    ...selectedType,
+    ...meeting ? { location_type: meeting.location_type, location_details: meeting.location_details, location_instructions: meeting.location_instructions } : {},
+    ...bookingResult ? {
+      location_type: bookingResult.booking.location_type || selectedType.location_type,
+      location_details: bookingResult.booking.location_details,
+      location_instructions: bookingResult.booking.location_instructions,
+      video_link: bookingResult.booking.video_link
+    } : {}
+  } : null;
+  const isPending = bookingResult?.booking.status === "pending";
   const canGoPrev = viewMonth.getFullYear() > today.getFullYear() || viewMonth.getMonth() > today.getMonth();
   const canGoNext = viewMonth < maxDate;
   const goMonth = (dir) => {
+    if (busyRef.current) return;
     setViewMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + dir, 1));
   };
   const groupedSlots = useMemo(() => {
@@ -478,10 +754,17 @@ function BookingWidget({
     "--sk-input-focus-ring": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 12%, ${styles.backgroundColor || "white"})` : "#e8f1ff"
   };
   return /* @__PURE__ */ jsxs("div", { className: `bw-root ${className}`, style: cssVars, children: [
-    error && /* @__PURE__ */ jsxs("div", { className: "bw-error", role: "alert", children: [
+    error && !recovery && /* @__PURE__ */ jsxs("div", { className: "bw-error", role: "alert", children: [
       /* @__PURE__ */ jsx("span", { children: error }),
       /* @__PURE__ */ jsx("button", { onClick: () => setError(null), "aria-label": "Dismiss error", children: "\xD7" })
     ] }),
+    recovery && /* @__PURE__ */ jsxs("div", { className: "sk-booking-recovery", role: "alert", children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        recovery === "meeting" ? "Your meeting details need to be checked again." : "Your time reservation expired. Choose a time to continue.",
+        " Your entered details are saved."
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "bw-submit", onClick: recoverReservation, disabled: loading || submitting, children: recovery === "meeting" ? "Review meeting details" : "Choose another time" })
+    ] }),
     step === "type" && !hideTypeSelector && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
       /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "Select a Service" }),
       loading ? /* @__PURE__ */ jsxs("div", { className: "bw-loading", children: [
@@ -492,8 +775,10 @@ function BookingWidget({
         {
           className: "bw-type-card",
           onClick: () => {
-            setSelectedType(type);
-            setStep("datetime");
+            if (!busyRef.current) {
+              resetScheduling(type.meeting_options ? "format" : "datetime", true);
+              setSelectedType(type);
+            }
           },
           children: [
             /* @__PURE__ */ jsx("span", { className: "bw-type-name", children: type.name }),
@@ -510,12 +795,23 @@ function BookingWidget({
         type.id
       )) })
     ] }),
+    step === "format" && selectedType?.meeting_options && /* @__PURE__ */ jsx(
+      MeetingFormatStep,
+      {
+        options: selectedType.meeting_options,
+        busy: loading,
+        format: meetingFormat,
+        address: meetingAddress,
+        onFormatChange: setMeetingFormat,
+        onAddressChange: setMeetingAddress,
+        onContinue: chooseFormat,
+        onBack: !bookingTypeSlug && !hideTypeSelector ? changeService : void 0
+      }
+    ),
+    selectedType?.meeting_options && (step === "datetime" || step === "form") && /* @__PURE__ */ jsx("button", { type: "button", className: "bw-back sk-meeting-change", onClick: changeFormat, disabled: loading || submitting, children: "\u2190 Change meeting format" }),
     step === "datetime" && selectedType && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
       /* @__PURE__ */ jsxs("div", { className: "bw-info-header", children: [
-        !bookingTypeSlug && /* @__PURE__ */ jsx("button", { className: "bw-back", onClick: () => {
-          setSelectedType(null);
-          setStep("type");
-        }, children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
+        !bookingTypeSlug && !hideTypeSelector && /* @__PURE__ */ jsx("button", { className: "bw-back", onClick: changeService, disabled: loading, "aria-label": "Change service", children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: selectedType.name }),
           /* @__PURE__ */ jsxs("div", { className: "bw-meta-row", children: [
@@ -529,34 +825,36 @@ function BookingWidget({
               " ",
               shortTz
             ] }),
-            /* @__PURE__ */ jsx(LocationBadge, { type: selectedType })
+            /* @__PURE__ */ jsx(LocationBadge, { type: displayType })
           ] })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "bw-datetime-layout", children: [
         /* @__PURE__ */ jsxs("div", { className: "bw-calendar", children: [
           /* @__PURE__ */ jsxs("div", { className: "bw-cal-header", children: [
-            /* @__PURE__ */ jsx("button", { className: "bw-cal-nav", onClick: () => goMonth(-1), disabled: !canGoPrev, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
+            /* @__PURE__ */ jsx("button", { className: "bw-cal-nav", onClick: () => goMonth(-1), disabled: !canGoPrev || loading || !!recovery, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
             /* @__PURE__ */ jsxs("span", { className: "bw-cal-title", children: [
               MONTHS[viewMonth.getMonth()],
               " ",
               viewMonth.getFullYear()
             ] }),
-            /* @__PURE__ */ jsx("button", { className: "bw-cal-nav", onClick: () => goMonth(1), disabled: !canGoNext, "aria-label": "Next month", children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+            /* @__PURE__ */ jsx("button", { className: "bw-cal-nav", onClick: () => goMonth(1), disabled: !canGoNext || loading || !!recovery, "aria-label": "Next month", children: /* @__PURE__ */ jsx(ChevronRight, {}) })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "bw-cal-weekdays", children: DAYS.map((d) => /* @__PURE__ */ jsx("span", { className: "bw-cal-wd", children: d }, d)) }),
           /* @__PURE__ */ jsx("div", { className: "bw-cal-grid", children: days.map((date, i) => {
             if (!date) return /* @__PURE__ */ jsx("span", { className: "bw-cal-empty" }, `e-${i}`);
             const past = isBeforeDay(date, today);
             const future = date > maxDate;
-            const disabled = past || future;
+            const disabled = past || future || loading || !!recovery;
             const sel = selectedDate && isSameDay(date, selectedDate);
             const isToday = isSameDay(date, today);
             return /* @__PURE__ */ jsx(
               "button",
               {
                 className: `bw-cal-day${sel ? " selected" : ""}${isToday ? " today" : ""}${disabled ? " disabled" : ""}`,
-                onClick: () => !disabled && setSelectedDate(date),
+                onClick: () => {
+                  if (!disabled && !busyRef.current) setSelectedDate(date);
+                },
                 disabled,
                 "aria-label": date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }),
                 "aria-pressed": sel || void 0,
@@ -579,15 +877,15 @@ function BookingWidget({
           /* @__PURE__ */ jsx("p", { className: "bw-times-date", children: selectedDate.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" }) }),
           groupedSlots.morning.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bw-time-group", children: [
             /* @__PURE__ */ jsx("span", { className: "bw-time-label", children: "Morning" }),
-            groupedSlots.morning.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading }, slot.start))
+            groupedSlots.morning.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading: loading || !!recovery }, slot.start))
           ] }),
           groupedSlots.afternoon.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bw-time-group", children: [
             /* @__PURE__ */ jsx("span", { className: "bw-time-label", children: "Afternoon" }),
-            groupedSlots.afternoon.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading }, slot.start))
+            groupedSlots.afternoon.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading: loading || !!recovery }, slot.start))
           ] }),
           groupedSlots.evening.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bw-time-group", children: [
             /* @__PURE__ */ jsx("span", { className: "bw-time-label", children: "Evening" }),
-            groupedSlots.evening.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading }, slot.start))
+            groupedSlots.evening.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading: loading || !!recovery }, slot.start))
           ] }),
           (groupedSlots.afternoon.length > 0 || groupedSlots.evening.length > 0) && /* @__PURE__ */ jsx("p", { className: "bw-times-scroll-hint", children: "Scroll for more times" })
         ] }) })
@@ -595,7 +893,7 @@ function BookingWidget({
     ] }),
     step === "form" && selectedType && selectedSlot && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
       /* @__PURE__ */ jsxs("div", { className: "bw-info-header", children: [
-        /* @__PURE__ */ jsx("button", { className: "bw-back", onClick: () => setStep("datetime"), children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
+        /* @__PURE__ */ jsx("button", { className: "bw-back", onClick: recoverReservation, disabled: submitting, "aria-label": "Choose another time", children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "Your Details" }),
           /* @__PURE__ */ jsxs("div", { className: "bw-meta-row", children: [
@@ -609,14 +907,16 @@ function BookingWidget({
               " \xB7 ",
               formatTime(selectedSlot.start, timezone)
             ] }),
-            /* @__PURE__ */ jsx(LocationBadge, { type: selectedType })
+            /* @__PURE__ */ jsx(LocationBadge, { type: displayType })
           ] })
         ] })
       ] }),
-      hold && /* @__PURE__ */ jsxs("div", { className: "bw-hold-notice", children: [
+      hold && !recovery && /* @__PURE__ */ jsxs("div", { className: "bw-hold-notice", children: [
         /* @__PURE__ */ jsx(SpinnerIcon, {}),
         " Slot held for you. Complete your details to confirm."
       ] }),
+      /* @__PURE__ */ jsx(LocationRow, { type: displayType, meetingFormat: meeting?.format }),
+      meeting?.requires_review && /* @__PURE__ */ jsx("p", { children: "We\u2019ll confirm your visit after reviewing travel arrangements." }),
       /* @__PURE__ */ jsxs("form", { onSubmit: handleBookingSubmit, className: "bw-form", children: [
         /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
           /* @__PURE__ */ jsxs("label", { htmlFor: "bw-name", children: [
@@ -629,6 +929,7 @@ function BookingWidget({
               id: "bw-name",
               type: "text",
               required: true,
+              readOnly: submitting,
               value: guestInfo.name,
               onChange: (e) => setGuestInfo((p) => ({ ...p, name: e.target.value })),
               placeholder: "Jane Smith",
@@ -647,6 +948,7 @@ function BookingWidget({
               id: "bw-email",
               type: "email",
               required: true,
+              readOnly: submitting,
               value: guestInfo.email,
               onChange: (e) => setGuestInfo((p) => ({ ...p, email: e.target.value })),
               placeholder: "jane@example.com",
@@ -655,10 +957,15 @@ function BookingWidget({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: "bw-phone", children: "Phone" }),
+          /* @__PURE__ */ jsxs("label", { htmlFor: "bw-phone", children: [
+            "Phone ",
+            meeting?.format === "client_location" && /* @__PURE__ */ jsx("span", { className: "bw-req", children: "*" })
+          ] }),
           /* @__PURE__ */ jsx(
             "input",
             {
+              required: meeting?.format === "client_location",
+              readOnly: submitting,
               id: "bw-phone",
               type: "tel",
               value: guestInfo.phone || "",
@@ -674,6 +981,7 @@ function BookingWidget({
             "textarea",
             {
               id: "bw-notes",
+              readOnly: submitting,
               value: guestInfo.notes || "",
               onChange: (e) => setGuestInfo((p) => ({ ...p, notes: e.target.value })),
               placeholder: "Anything you'd like us to know...",
@@ -681,15 +989,15 @@ function BookingWidget({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("button", { type: "submit", className: "bw-submit", disabled: submitting || !guestInfo.name || !guestInfo.email, children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { type: "submit", className: "bw-submit", disabled: submitting || !!recovery || !guestInfo.name || !guestInfo.email, children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(SpinnerIcon, {}),
           " Confirming..."
-        ] }) : "Confirm Booking" })
+        ] }) : meeting?.requires_review ? "Request meeting" : "Confirm booking" })
       ] })
     ] }),
     step === "success" && bookingResult && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in bw-success", children: [
       /* @__PURE__ */ jsx("div", { className: "bw-success-icon", children: /* @__PURE__ */ jsx(CheckCircleIcon, {}) }),
-      /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "You\u2019re Booked!" }),
+      /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: isPending ? "Meeting request received" : "You\u2019re booked!" }),
       /* @__PURE__ */ jsxs("div", { className: "bw-details-card", children: [
         /* @__PURE__ */ jsxs("div", { className: "bw-detail-row", children: [
           /* @__PURE__ */ jsx("span", { className: "bw-detail-label", children: "When" }),
@@ -710,26 +1018,28 @@ function BookingWidget({
           /* @__PURE__ */ jsx("span", { className: "bw-detail-label", children: "With" }),
           /* @__PURE__ */ jsx("span", { className: "bw-detail-value", children: bookingResult.booking.hostName })
         ] }),
-        /* @__PURE__ */ jsx(LocationRow, { type: selectedType })
+        /* @__PURE__ */ jsx(LocationRow, { type: displayType, meetingFormat: meeting?.format })
       ] }),
       /* @__PURE__ */ jsxs("p", { className: "bw-email-notice", children: [
-        "We\u2019ve emailed your confirmation to ",
+        isPending ? "We\u2019ll send your confirmation to " : "Your meeting details will arrive at ",
         /* @__PURE__ */ jsx("strong", { children: guestInfo.email }),
-        " with everything you need."
+        "."
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "bw-cal-links-label", children: "Add to your calendar" }),
-      /* @__PURE__ */ jsxs("div", { className: "bw-cal-links", children: [
-        /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.google, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
-          /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
-          " Google"
-        ] }),
-        /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.outlook, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
-          /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
-          " Outlook"
-        ] }),
-        /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.ics, download: true, className: "bw-cal-link", children: [
-          /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
-          " iCal"
+      !isPending && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "bw-cal-links-label", children: "Add to your calendar" }),
+        /* @__PURE__ */ jsxs("div", { className: "bw-cal-links", children: [
+          /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.google, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
+            /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+            " Google"
+          ] }),
+          /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.outlook, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
+            /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+            " Outlook"
+          ] }),
+          /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.ics, download: true, className: "bw-cal-link", children: [
+            /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+            " iCal"
+          ] })
         ] })
       ] }),
       (bookingResult.rescheduleUrl || bookingResult.cancelUrl) && /* @__PURE__ */ jsxs("p", { className: "bw-manage-links", children: [
@@ -768,7 +1078,7 @@ function getLocationDisplay(type) {
       return { kind: "custom", label: details || "See details" };
     case "virtual":
     default:
-      return { kind: "virtual", label: "Video call" };
+      return { kind: "virtual", label: "Video call", detail: type.video_link };
   }
 }
 function LocationBadge({ type }) {
@@ -780,7 +1090,7 @@ function LocationBadge({ type }) {
     loc.label
   ] });
 }
-function LocationRow({ type }) {
+function LocationRow({ type, meetingFormat }) {
   const loc = getLocationDisplay(type);
   if (!loc) return null;
   return /* @__PURE__ */ jsxs("div", { className: "bw-detail-row", children: [
@@ -789,9 +1099,13 @@ function LocationRow({ type }) {
       loc.label,
       loc.detail ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("br", {}),
-        loc.detail
+        loc.kind === "virtual" ? /* @__PURE__ */ jsx("a", { href: loc.detail, target: "_blank", rel: "noopener noreferrer", children: "Join Google Meet" }) : loc.detail
       ] }) : null,
-      loc.mapUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      type?.location_instructions && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx("span", { style: { whiteSpace: "pre-wrap" }, children: type.location_instructions })
+      ] }),
+      loc.mapUrl && meetingFormat !== "client_location" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("br", {}),
         /* @__PURE__ */ jsx("a", { href: loc.mapUrl, target: "_blank", rel: "noopener noreferrer", className: "bw-where-link", children: "Get directions \u2192" })
       ] }) : null,
@@ -871,6 +1185,10 @@ var WIDGET_CSS = `
   padding: 10px 14px; border-radius: var(--sk-radius); margin-bottom: 16px; font-size: 0.875rem;
 }
 .bw-error button { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0; }
+.sk-booking-recovery { padding: 16px; margin-bottom: 16px; border: 1px solid var(--sk-border); border-radius: var(--sk-radius); background: var(--sk-surface); color: var(--sk-text-primary); }
+.sk-booking-recovery p { margin: 0 0 12px; font-size: 0.875rem; }
+.sk-booking-recovery .bw-submit { width: auto; }
+.bw-back:disabled { cursor: wait; opacity: 0.55; }
 
 /* \u2500\u2500 Headings \u2500\u2500 */
 .bw-heading { font-size: 1.125rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
@@ -892,6 +1210,7 @@ var WIDGET_CSS = `
   background: var(--sk-bg); cursor: pointer; color: var(--sk-text-secondary); flex-shrink: 0; margin-top: 1px;
   transition: all 0.15s;
 }
+.bw-back.sk-meeting-change { width: auto; height: auto; min-height: 36px; padding: 8px 12px; border-radius: var(--sk-radius); margin-bottom: 12px; font-size: 0.8125rem; }
 .bw-back:hover { background: var(--sk-surface); border-color: var(--sk-border); }
 
 /* \u2500\u2500 Loading \u2500\u2500 */
@@ -1086,6 +1405,6 @@ var WIDGET_CSS = `
 .bw-manage-links a { color: var(--sk-primary, #14B8A6); text-decoration: none; font-weight: 500; }
 `;
 
-export { BookingWidget, createBooking, createSlotHold, detectTimezone, fetchAvailability, fetchAvailableDates, fetchBookingTypeDetails, fetchBookingTypes, formatDate, formatDuration, formatTime, releaseSlotHold };
-//# sourceMappingURL=chunk-HVFXFPUJ.mjs.map
-//# sourceMappingURL=chunk-HVFXFPUJ.mjs.map
+export { BookingWidget, createBooking, createSlotHold, detectTimezone, fetchAvailability, fetchAvailableDates, fetchBookingTypeDetails, fetchBookingTypes, formatDate, formatDuration, formatTime, prepareMeeting, releaseSlotHold };
+//# sourceMappingURL=chunk-XQYC4KMH.mjs.map
+//# sourceMappingURL=chunk-XQYC4KMH.mjs.map