@uptrademedia/site-kit 1.0.25 → 1.0.26

package/dist/index.d.mts

@@ -704,8 +704,10 @@ interface BookingResult {
     };
 }
 interface BookingWidgetProps {
-    /** Organization slug (e.g., 'heinrich-law') */
-    orgSlug: string;
+    /** Organization slug – required for public (unauthenticated) mode, optional with apiKey */
+    orgSlug?: string;
+    /** API key – when provided, uses authenticated /sync/widget/* endpoints (no orgSlug needed) */
+    apiKey?: string;
     /** API base URL - defaults to https://api.uptrademedia.com */
     apiUrl?: string;
     /** Specific booking type slug to show (optional - shows all if not provided) */
@@ -741,44 +743,72 @@ interface SyncWidgetConfig {
     timezone: string;
 }
 
-declare function BookingWidget({ orgSlug, apiUrl, bookingTypeSlug, timezone: propTimezone, className, daysToShow, onBookingComplete, onError, hideTypeSelector, styles, }: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidget({ orgSlug, apiKey: propApiKey, apiUrl: propApiUrl, bookingTypeSlug, timezone: propTimezone, className, daysToShow, onBookingComplete, onError, hideTypeSelector, styles, }: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Sync API Functions - Client-side API calls for booking widget
+ *
+ * Two modes:
+ *   1. API-key flow (preferred): Uses x-api-key header → /sync/widget/* endpoints.
+ *      Project is resolved server-side from the key. No orgSlug needed.
+ *   2. Public/orgSlug flow (legacy): Uses /sync/public/:org/* endpoints. No auth.
  */
 
 /**
- * Fetch public booking types for an organization
+ * Fetch booking types.
+ * - With apiKey → GET /sync/widget/types
+ * - With orgSlug → GET /sync/public/:org/types
  */
-declare function fetchBookingTypes(orgSlug: string, apiUrl?: string): Promise<BookingType[]>;
+declare function fetchBookingTypes(orgSlug?: string, apiUrl?: string, apiKey?: string): Promise<BookingType[]>;
 /**
  * Fetch booking type details
  */
-declare function fetchBookingTypeDetails(orgSlug: string, typeSlug: string, apiUrl?: string): Promise<BookingType>;
+declare function fetchBookingTypeDetails(typeSlug: string, orgSlug?: string, apiUrl?: string, apiKey?: string): Promise<BookingType>;
 /**
  * Fetch available time slots for a specific date
  */
-declare function fetchAvailability(orgSlug: string, typeSlug: string, date: string, // YYYY-MM-DD format
-apiUrl?: string, timezone?: string, hostId?: string): Promise<TimeSlot[]>;
+declare function fetchAvailability(typeSlug: string, date: string, // YYYY-MM-DD format
+orgSlug?: string, apiUrl?: string, apiKey?: string, timezone?: string, hostId?: string): Promise<TimeSlot[]>;
 /**
  * Hold a time slot temporarily (5-10 minutes)
  */
-declare function createSlotHold(bookingTypeId: string, startTime: string, hostId: string | undefined, guestTimezone: string, apiUrl?: string): Promise<SlotHold>;
+declare function createSlotHold(holdData: {
+    bookingType: string;
+    slotStart: string;
+    slotEnd: string;
+    hostId: string;
+    sessionId: string;
+    guestEmail?: string;
+}, apiUrl?: string, apiKey?: string): Promise<SlotHold>;
 /**
  * Release a slot hold
  */
-declare function releaseSlotHold(holdId: string, apiUrl?: string): Promise<void>;
+declare function releaseSlotHold(holdId: string, apiUrl?: string, apiKey?: string): Promise<void>;
 /**
  * Create a booking
  */
-declare function createBooking(bookingTypeId: string, startTime: string, guest: GuestInfo, timezone: string, hostId?: string, holdId?: string, apiUrl?: string): Promise<BookingResult>;
+declare function createBooking(bookingData: {
+    bookingType: string;
+    scheduledAt: string;
+    hostId: string;
+    name: string;
+    email: string;
+    phone?: string;
+    company?: string;
+    message?: string;
+    source: string;
+    timezone?: string;
+    holdId?: string;
+    sessionId?: string;
+    sourceUrl?: string;
+}, apiUrl?: string, apiKey?: string): Promise<BookingResult>;
 /**
  * Get available dates for a month (helper for calendar view)
  * Returns dates that have at least one available slot
  */
-declare function fetchAvailableDates(orgSlug: string, typeSlug: string, startDate: string, // YYYY-MM-DD
+declare function fetchAvailableDates(typeSlug: string, startDate: string, // YYYY-MM-DD
 endDate: string, // YYYY-MM-DD
-apiUrl?: string, timezone?: string): Promise<string[]>;
+orgSlug?: string, apiUrl?: string, apiKey?: string, timezone?: string): Promise<string[]>;
 /**
  * Detect user's timezone
  */

package/dist/index.d.ts

@@ -704,8 +704,10 @@ interface BookingResult {
     };
 }
 interface BookingWidgetProps {
-    /** Organization slug (e.g., 'heinrich-law') */
-    orgSlug: string;
+    /** Organization slug – required for public (unauthenticated) mode, optional with apiKey */
+    orgSlug?: string;
+    /** API key – when provided, uses authenticated /sync/widget/* endpoints (no orgSlug needed) */
+    apiKey?: string;
     /** API base URL - defaults to https://api.uptrademedia.com */
     apiUrl?: string;
     /** Specific booking type slug to show (optional - shows all if not provided) */
@@ -741,44 +743,72 @@ interface SyncWidgetConfig {
     timezone: string;
 }
 
-declare function BookingWidget({ orgSlug, apiUrl, bookingTypeSlug, timezone: propTimezone, className, daysToShow, onBookingComplete, onError, hideTypeSelector, styles, }: BookingWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BookingWidget({ orgSlug, apiKey: propApiKey, apiUrl: propApiUrl, bookingTypeSlug, timezone: propTimezone, className, daysToShow, onBookingComplete, onError, hideTypeSelector, styles, }: BookingWidgetProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Sync API Functions - Client-side API calls for booking widget
+ *
+ * Two modes:
+ *   1. API-key flow (preferred): Uses x-api-key header → /sync/widget/* endpoints.
+ *      Project is resolved server-side from the key. No orgSlug needed.
+ *   2. Public/orgSlug flow (legacy): Uses /sync/public/:org/* endpoints. No auth.
  */
 
 /**
- * Fetch public booking types for an organization
+ * Fetch booking types.
+ * - With apiKey → GET /sync/widget/types
+ * - With orgSlug → GET /sync/public/:org/types
  */
-declare function fetchBookingTypes(orgSlug: string, apiUrl?: string): Promise<BookingType[]>;
+declare function fetchBookingTypes(orgSlug?: string, apiUrl?: string, apiKey?: string): Promise<BookingType[]>;
 /**
  * Fetch booking type details
  */
-declare function fetchBookingTypeDetails(orgSlug: string, typeSlug: string, apiUrl?: string): Promise<BookingType>;
+declare function fetchBookingTypeDetails(typeSlug: string, orgSlug?: string, apiUrl?: string, apiKey?: string): Promise<BookingType>;
 /**
  * Fetch available time slots for a specific date
  */
-declare function fetchAvailability(orgSlug: string, typeSlug: string, date: string, // YYYY-MM-DD format
-apiUrl?: string, timezone?: string, hostId?: string): Promise<TimeSlot[]>;
+declare function fetchAvailability(typeSlug: string, date: string, // YYYY-MM-DD format
+orgSlug?: string, apiUrl?: string, apiKey?: string, timezone?: string, hostId?: string): Promise<TimeSlot[]>;
 /**
  * Hold a time slot temporarily (5-10 minutes)
  */
-declare function createSlotHold(bookingTypeId: string, startTime: string, hostId: string | undefined, guestTimezone: string, apiUrl?: string): Promise<SlotHold>;
+declare function createSlotHold(holdData: {
+    bookingType: string;
+    slotStart: string;
+    slotEnd: string;
+    hostId: string;
+    sessionId: string;
+    guestEmail?: string;
+}, apiUrl?: string, apiKey?: string): Promise<SlotHold>;
 /**
  * Release a slot hold
  */
-declare function releaseSlotHold(holdId: string, apiUrl?: string): Promise<void>;
+declare function releaseSlotHold(holdId: string, apiUrl?: string, apiKey?: string): Promise<void>;
 /**
  * Create a booking
  */
-declare function createBooking(bookingTypeId: string, startTime: string, guest: GuestInfo, timezone: string, hostId?: string, holdId?: string, apiUrl?: string): Promise<BookingResult>;
+declare function createBooking(bookingData: {
+    bookingType: string;
+    scheduledAt: string;
+    hostId: string;
+    name: string;
+    email: string;
+    phone?: string;
+    company?: string;
+    message?: string;
+    source: string;
+    timezone?: string;
+    holdId?: string;
+    sessionId?: string;
+    sourceUrl?: string;
+}, apiUrl?: string, apiKey?: string): Promise<BookingResult>;
 /**
  * Get available dates for a month (helper for calendar view)
  * Returns dates that have at least one available slot
  */
-declare function fetchAvailableDates(orgSlug: string, typeSlug: string, startDate: string, // YYYY-MM-DD
+declare function fetchAvailableDates(typeSlug: string, startDate: string, // YYYY-MM-DD
 endDate: string, // YYYY-MM-DD
-apiUrl?: string, timezone?: string): Promise<string[]>;
+orgSlug?: string, apiUrl?: string, apiKey?: string, timezone?: string): Promise<string[]>;
 /**
  * Detect user's timezone
  */

package/dist/index.js

@@ -1821,70 +1821,89 @@ ${moduleConfigs.join("\n")}
 
 // src/sync/api.ts
 var DEFAULT_API_URL = "https://api.uptrademedia.com";
-async function fetchBookingTypes(orgSlug, apiUrl = DEFAULT_API_URL) {
-  const response = await fetch(`${apiUrl}/sync/public/${orgSlug}/types`);
+function getApiConfig3() {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || DEFAULT_API_URL : DEFAULT_API_URL;
+  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+  return { apiUrl, apiKey };
+}
+function buildHeaders(apiKey, isPost = false) {
+  const headers = {};
+  if (isPost) headers["Content-Type"] = "application/json";
+  if (apiKey) headers["x-api-key"] = apiKey;
+  return headers;
+}
+async function fetchBookingTypes(orgSlug, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/types` : `${url}/sync/public/${orgSlug}/types`;
+  const response = await fetch(endpoint, { headers: buildHeaders(key) });
   if (!response.ok) {
     throw new Error(`Failed to fetch booking types: ${response.statusText}`);
   }
   const data = await response.json();
   return data.types || [];
 }
-async function fetchBookingTypeDetails(orgSlug, typeSlug, apiUrl = DEFAULT_API_URL) {
-  const response = await fetch(`${apiUrl}/sync/public/${orgSlug}/types/${typeSlug}`);
+async function fetchBookingTypeDetails(typeSlug, orgSlug, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/types/${typeSlug}` : `${url}/sync/public/${orgSlug}/types/${typeSlug}`;
+  const response = await fetch(endpoint, { headers: buildHeaders(key) });
   if (!response.ok) {
     throw new Error(`Failed to fetch booking type: ${response.statusText}`);
   }
   return response.json();
 }
-async function fetchAvailability(orgSlug, typeSlug, date, apiUrl = DEFAULT_API_URL, timezone, hostId) {
+async function fetchAvailability(typeSlug, date, orgSlug, apiUrl, apiKey, timezone, hostId) {
+  const cfg = getApiConfig3();
+  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);
-  const response = await fetch(
-    `${apiUrl}/sync/public/${orgSlug}/availability/${typeSlug}?${params}`
-  );
+  const endpoint = key ? `${url}/sync/widget/availability/${typeSlug}?${params}` : `${url}/sync/public/${orgSlug}/availability/${typeSlug}?${params}`;
+  const response = await fetch(endpoint, { headers: buildHeaders(key) });
   if (!response.ok) {
     throw new Error(`Failed to fetch availability: ${response.statusText}`);
   }
   const data = await response.json();
   return data.slots || [];
 }
-async function createSlotHold(bookingTypeId, startTime, hostId, guestTimezone, apiUrl = DEFAULT_API_URL) {
-  const response = await fetch(`${apiUrl}/sync/public/hold`, {
+async function createSlotHold(holdData, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/hold` : `${url}/sync/public/hold`;
+  const response = await fetch(endpoint, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      booking_type_id: bookingTypeId,
-      start_time: startTime,
-      host_id: hostId,
-      guest_timezone: guestTimezone
-    })
+    headers: buildHeaders(key, true),
+    body: JSON.stringify(holdData)
   });
   if (!response.ok) {
     throw new Error(`Failed to hold slot: ${response.statusText}`);
   }
   return response.json();
 }
-async function releaseSlotHold(holdId, apiUrl = DEFAULT_API_URL) {
-  await fetch(`${apiUrl}/sync/public/hold/${holdId}`, {
-    method: "DELETE"
+async function releaseSlotHold(holdId, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/hold/${holdId}` : `${url}/sync/public/hold/${holdId}`;
+  await fetch(endpoint, {
+    method: "DELETE",
+    headers: buildHeaders(key)
   });
 }
-async function createBooking(bookingTypeId, startTime, guest, timezone, hostId, holdId, apiUrl = DEFAULT_API_URL) {
-  const response = await fetch(`${apiUrl}/sync/public/booking`, {
+async function createBooking(bookingData, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/booking` : `${url}/sync/public/booking`;
+  const response = await fetch(endpoint, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      booking_type_id: bookingTypeId,
-      start_time: startTime,
-      guest_name: guest.name,
-      guest_email: guest.email,
-      guest_phone: guest.phone,
-      guest_notes: guest.notes,
-      timezone,
-      host_id: hostId,
-      hold_id: holdId
-    })
+    headers: buildHeaders(key, true),
+    body: JSON.stringify(bookingData)
   });
   if (!response.ok) {
     const errorData = await response.json().catch(() => ({}));
@@ -1892,7 +1911,7 @@ async function createBooking(bookingTypeId, startTime, guest, timezone, hostId,
   }
   return response.json();
 }
-async function fetchAvailableDates(orgSlug, typeSlug, startDate, endDate, apiUrl = DEFAULT_API_URL, timezone) {
+async function fetchAvailableDates(typeSlug, startDate, endDate, orgSlug, apiUrl, apiKey, timezone) {
   const availableDates = [];
   const start = new Date(startDate);
   const end = new Date(endDate);
@@ -1900,7 +1919,7 @@ async function fetchAvailableDates(orgSlug, typeSlug, startDate, endDate, apiUrl
   while (current <= end) {
     const dateStr = current.toISOString().split("T")[0];
     try {
-      const slots = await fetchAvailability(orgSlug, typeSlug, dateStr, apiUrl, timezone);
+      const slots = await fetchAvailability(typeSlug, dateStr, orgSlug, apiUrl, apiKey, timezone);
       if (slots.some((s) => s.available)) {
         availableDates.push(dateStr);
       }
@@ -2023,7 +2042,8 @@ function SpinnerIcon() {
 }
 function BookingWidget({
   orgSlug,
-  apiUrl = DEFAULT_API_URL2,
+  apiKey: propApiKey,
+  apiUrl: propApiUrl,
   bookingTypeSlug,
   timezone: propTimezone,
   className = "",
@@ -2033,6 +2053,8 @@ function BookingWidget({
   hideTypeSelector = false,
   styles: styles2 = {}
 }) {
+  const apiKey = propApiKey || (typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0);
+  const apiUrl = propApiUrl || (typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ : void 0) || DEFAULT_API_URL2;
   const [step, setStep] = React3.useState(bookingTypeSlug ? "datetime" : "type");
   const [loading, setLoading] = React3.useState(false);
   const [slotsLoading, setSlotsLoading] = React3.useState(false);
@@ -2072,7 +2094,7 @@ function BookingWidget({
   React3.useEffect(() => {
     if (bookingTypeSlug) {
       setLoading(true);
-      fetchBookingTypeDetails(orgSlug, bookingTypeSlug, apiUrl).then((type) => {
+      fetchBookingTypeDetails(bookingTypeSlug, orgSlug, apiUrl, apiKey).then((type) => {
         setSelectedType(type);
         setStep("datetime");
       }).catch((err) => {
@@ -2081,12 +2103,12 @@ function BookingWidget({
       }).finally(() => setLoading(false));
     } else {
       setLoading(true);
-      fetchBookingTypes(orgSlug, apiUrl).then((types) => setBookingTypes(types.filter((t) => t.is_active))).catch((err) => {
+      fetchBookingTypes(orgSlug, apiUrl, apiKey).then((types) => setBookingTypes(types.filter((t) => t.is_active))).catch((err) => {
         setError(err.message);
         onError?.(err);
       }).finally(() => setLoading(false));
     }
-  }, [orgSlug, bookingTypeSlug, apiUrl, onError]);
+  }, [orgSlug, apiKey, bookingTypeSlug, apiUrl, onError]);
   React3.useEffect(() => {
     if (!selectedDate || !selectedType) return;
     const dateStr = selectedDate.toISOString().split("T")[0];
@@ -2094,22 +2116,32 @@ function BookingWidget({
     setSlots([]);
     setSelectedSlot(null);
     setConfirmedSlot(false);
-    fetchAvailability(orgSlug, selectedType.slug, dateStr, apiUrl, timezone).then((s) => setSlots(s.filter((slot) => slot.available))).catch((err) => {
+    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, apiUrl, timezone, onError]);
+  }, [selectedDate, selectedType, orgSlug, apiKey, apiUrl, timezone, onError]);
   const handleSlotSelect = React3.useCallback((slot) => {
     setSelectedSlot(slot);
     setConfirmedSlot(false);
   }, []);
   const handleSlotConfirm = React3.useCallback(async () => {
     if (!selectedType || !selectedSlot) return;
-    if (hold) await releaseSlotHold(hold.holdId, apiUrl).catch(() => {
+    if (hold) await releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
     });
     setLoading(true);
     try {
-      const newHold = await createSlotHold(selectedType.id, selectedSlot.start, selectedSlot.hostId, timezone, apiUrl);
+      const newHold = await createSlotHold(
+        {
+          bookingType: selectedType.slug,
+          slotStart: selectedSlot.start,
+          slotEnd: selectedSlot.end,
+          hostId: selectedSlot.hostId || "",
+          sessionId: `bw-${Date.now()}`
+        },
+        apiUrl,
+        apiKey
+      );
       setHold(newHold);
       setConfirmedSlot(true);
       setStep("form");
@@ -2119,14 +2151,31 @@ function BookingWidget({
     } finally {
       setLoading(false);
     }
-  }, [selectedType, selectedSlot, hold, timezone, apiUrl, onError]);
+  }, [selectedType, selectedSlot, hold, timezone, apiUrl, apiKey, onError]);
   const handleBookingSubmit = React3.useCallback(async (e) => {
     e.preventDefault();
     if (!selectedType || !selectedSlot) return;
     setSubmitting(true);
     setError(null);
     try {
-      const result = await createBooking(selectedType.id, selectedSlot.start, guestInfo, timezone, selectedSlot.hostId, hold?.holdId, apiUrl);
+      const result = await createBooking(
+        {
+          bookingType: selectedType.slug,
+          scheduledAt: selectedSlot.start,
+          hostId: selectedSlot.hostId || "",
+          name: guestInfo.name,
+          email: guestInfo.email,
+          phone: guestInfo.phone,
+          message: guestInfo.notes,
+          source: "main-site",
+          timezone,
+          holdId: hold?.holdId,
+          sessionId: `bw-${Date.now()}`,
+          sourceUrl: typeof window !== "undefined" ? window.location.href : void 0
+        },
+        apiUrl,
+        apiKey
+      );
       setBookingResult(result);
       setStep("success");
       onBookingComplete?.(result);
@@ -2136,13 +2185,13 @@ function BookingWidget({
     } finally {
       setSubmitting(false);
     }
-  }, [selectedType, selectedSlot, guestInfo, timezone, hold, apiUrl, onBookingComplete, onError]);
+  }, [selectedType, selectedSlot, guestInfo, timezone, hold, apiUrl, apiKey, onBookingComplete, onError]);
   React3.useEffect(() => {
     return () => {
-      if (hold) releaseSlotHold(hold.holdId, apiUrl).catch(() => {
+      if (hold) releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
       });
     };
-  }, [hold, apiUrl]);
+  }, [hold, apiUrl, apiKey]);
   const canGoPrev = viewMonth.getFullYear() > today.getFullYear() || viewMonth.getMonth() > today.getMonth();
   const canGoNext = viewMonth < maxDate;
   const goMonth = (dir) => {