@ohhwells/bridge 0.1.22 → 0.1.24

package/README.md

@@ -177,6 +177,64 @@ Add `data-ohw-editable` and `data-ohw-key` to any element the studio owner shoul
 
 ---
 
+## SchedulingWidget (vibe-coder placement)
+
+`SchedulingWidget` lets a template builder embed a scheduling/booking section directly in their template JSX, without going through the "Add Section" flow. The canvas editor treats it exactly like a dynamically-inserted scheduling widget — the studio owner can connect a schedule, switch it, and clear it.
+
+### Basic usage
+
+```tsx
+import { SchedulingWidget } from '@ohhwells/bridge'
+
+export default function ClassesPage() {
+  return (
+    <>
+      <PageHeader ... />
+      <ClassLibrary ... />
+      <SchedulingWidget />
+      <WordmarkBand ... />
+    </>
+  )
+}
+```
+
+No props are required. The widget auto-generates a stable identity via React's `useId()` so the bridge can track which schedule is connected to it across saves.
+
+### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `insertAfter` | `string` | auto | Stable identifier used as the tracker key. Only set this manually if you need two `SchedulingWidget`s on the same page. |
+| `initialScheduleId` | `string \| null` | `undefined` | Set by the bridge internally after hydration. Do not pass this yourself. |
+| `notifyOnConnect` | `boolean` | `false` | Set by the bridge internally. Do not pass this yourself. |
+
+### How it works
+
+1. The widget renders immediately with a loading skeleton.
+2. It sends `ow:request-schedule-config` to the bridge (running in the same window).
+3. The bridge looks up the tracker for a saved `scheduleId` for this widget:
+   - **Found** → responds with `ow:schedule-config { scheduleId }` → widget loads that schedule.
+   - **Not found (first time)** → bridge adopts the widget (adds it to the tracker, notifies the canvas editor), responds with `scheduleId: null` → widget shows empty state with an "Add Schedule" button.
+4. In the canvas editor, the studio owner clicks "Add Schedule" → selects a schedule → the widget updates and the connection is saved.
+5. On the live site, the widget fetches the saved schedule by ID and renders it.
+
+### Multiple widgets on one page
+
+Each `SchedulingWidget` must have a unique `insertAfter` to be tracked independently:
+
+```tsx
+<SchedulingWidget insertAfter="classes-morning" />
+<SchedulingWidget insertAfter="classes-evening" />
+```
+
+If you omit `insertAfter` on both, `useId()` auto-generates different stable IDs for each, so they are tracked separately anyway.
+
+### Empty state on live site
+
+If the studio owner has never connected a schedule to this widget, it renders nothing on the live site (no empty placeholder is shown to visitors).
+
+---
+
 ## Editable states (advanced)
 
 For elements with multiple display states (e.g. a contact form with default/success/error views), wrap each state in a `data-ohw-state-view` and mark the container with `data-ohw-editable-state`:

package/dist/index.cjs

@@ -204,13 +204,6 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var API_URL = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
 var DAY_ABBR = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
-function getApiDomain() {
-  const h = window.location.hostname;
-  for (const base of ["ohhwells.site", "theflowops-staging.com", "theflowops.com"]) {
-    if (h.endsWith(`.${base}`)) return h.slice(0, -(base.length + 1));
-  }
-  return h;
-}
 function classRunsOnDate(cls, date, type) {
   if (type === "FIXED") {
     const d = String(date.getDate()).padStart(2, "0");
@@ -484,18 +477,21 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
       const booked = getBookingsOnDate(cls, selectedDate);
       const available = cls.maxParticipants - booked;
       const isFull = available <= 0;
+      const isPrivate = cls.maxParticipants === 1;
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-4 py-4 sm:items-center sm:gap-[60px] box-border", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col gap-2 shrink-0 sm:contents", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sm:w-[120px] sm:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block", children: formatClassTime(cls) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "span",
-              {
-                className: "inline-flex items-center px-2 py-0.5 rounded-full border text-xs font-medium sm:hidden",
-                style: { borderColor: "#0885FE", color: "#0885FE" },
-                children: "GROUP"
-              }
-            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col gap-2 sm:w-[120px] sm:shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block", children: formatClassTime(cls) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "span",
+                {
+                  className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium w-fit",
+                  style: isPrivate ? { background: "#DDFBE3", color: "#199130", border: "1px solid #199130", fontWeight: 500 } : { background: "#EEEDFF", color: "#5953FF", border: "1px solid #5953FF", fontWeight: 500 },
+                  children: isPrivate ? "PRIVATE" : "GROUP"
+                }
+              )
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sm:hidden flex flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: [
                 available,
@@ -568,7 +564,9 @@ function CalendarFoldIcon() {
     }
   );
 }
-function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAfter }) {
+function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAfter: insertAfterProp }) {
+  const autoId = (0, import_react2.useId)();
+  const insertAfter = insertAfterProp ?? autoId;
   const [schedule, setSchedule] = (0, import_react2.useState)(null);
   const [loading, setLoading] = (0, import_react2.useState)(true);
   const [inEditor, setInEditor] = (0, import_react2.useState)(false);
@@ -598,88 +596,99 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
     if (typeof window === "undefined") return;
     const isInEditor = window.self !== window.top;
     setInEditor(isInEditor);
-    if (isInEditor) {
-      const startEmpty = initialScheduleId === null;
-      if (startEmpty) setLoading(false);
-      let initialized = startEmpty;
-      const timer = !startEmpty ? setTimeout(() => {
-        if (!initialized) {
+    function loadWithId(effectiveId) {
+      if (isInEditor) {
+        const startEmpty = effectiveId === null;
+        if (startEmpty) setLoading(false);
+        let initialized = startEmpty;
+        const timer = !startEmpty ? setTimeout(() => {
+          if (!initialized) {
+            initialized = true;
+            setLoading(false);
+          }
+        }, 5e3) : null;
+        const handler = (e) => {
+          if (e.data?.type === "ow:clear-scheduling-widget") {
+            if (!e.data.insertAfter || e.data.insertAfter !== insertAfter) return;
+            setSchedule(null);
+            setLoading(false);
+            return;
+          }
+          if (e.data?.type === "ow:switch-schedule") {
+            if (!e.data.insertAfter || e.data.insertAfter !== insertAfter) return;
+            switchScheduleIdRef.current = e.data.scheduleId ?? null;
+            initialized = false;
+            setLoading(true);
+            window.parent.postMessage({ type: "ow:request-user-schedules", insertAfter }, "*");
+            return;
+          }
+          if (e.data?.type !== "ow:user-schedules-response") return;
+          if (e.data.insertAfter && e.data.insertAfter !== insertAfter) return;
+          if (initialized && switchScheduleIdRef.current === null) return;
           initialized = true;
+          if (timer) clearTimeout(timer);
+          const schedules = e.data.schedules ?? [];
+          const isSwitching = switchScheduleIdRef.current !== null;
+          const target = isSwitching ? schedules.find((s) => s.id === switchScheduleIdRef.current) ?? schedules[0] ?? null : effectiveId ? schedules.find((s) => s.id === effectiveId) ?? schedules[0] ?? null : schedules[0] ?? null;
+          switchScheduleIdRef.current = null;
+          setSchedule(target);
           setLoading(false);
+          if (notifyOnConnect && target && !isSwitching) {
+            window.parent.postMessage({
+              type: "ow:schedule-connected",
+              schedule: { id: target.id, name: target.name },
+              insertAfter
+            }, "*");
+            window.postMessage({ type: "ow:schedule-linked", scheduleId: target.id, insertAfter }, "*");
+          }
+        };
+        window.addEventListener("message", handler);
+        if (!startEmpty) window.parent.postMessage({ type: "ow:request-user-schedules", insertAfter }, "*");
+        return () => {
+          window.removeEventListener("message", handler);
+          if (timer) clearTimeout(timer);
+        };
+      }
+      if (!effectiveId) {
+        setLoading(false);
+        return;
+      }
+      ;
+      (async () => {
+        try {
+          const res = await fetch(`${API_URL}/api/schedule/id/${effectiveId}`);
+          const data = await res.json();
+          setSchedule(data?.id ? data : null);
+        } catch {
         }
-      }, 5e3) : null;
-      const handler = (e) => {
-        if (e.data?.type === "ow:clear-scheduling-widget") {
-          if (!e.data.insertAfter || e.data.insertAfter !== insertAfter) return;
-          setSchedule(null);
-          setLoading(false);
-          return;
-        }
-        if (e.data?.type === "ow:switch-schedule") {
-          if (!e.data.insertAfter || e.data.insertAfter !== insertAfter) return;
-          switchScheduleIdRef.current = e.data.scheduleId ?? null;
-          initialized = false;
-          setLoading(true);
-          window.parent.postMessage({ type: "ow:request-user-schedules", insertAfter }, "*");
-          return;
-        }
-        if (e.data?.type !== "ow:user-schedules-response") return;
-        if (e.data.insertAfter && e.data.insertAfter !== insertAfter) return;
-        if (initialized && switchScheduleIdRef.current === null) return;
-        initialized = true;
-        if (timer) clearTimeout(timer);
-        const schedules = e.data.schedules ?? [];
-        const isSwitching = switchScheduleIdRef.current !== null;
-        const target = isSwitching ? schedules.find((s) => s.id === switchScheduleIdRef.current) ?? schedules[0] ?? null : initialScheduleId ? schedules.find((s) => s.id === initialScheduleId) ?? schedules[0] ?? null : schedules[0] ?? null;
-        switchScheduleIdRef.current = null;
-        setSchedule(target);
         setLoading(false);
-        if (notifyOnConnect && target && !isSwitching) {
-          window.parent.postMessage({
-            type: "ow:schedule-connected",
-            schedule: { id: target.id, name: target.name },
-            insertAfter
-          }, "*");
-          window.postMessage({ type: "ow:schedule-linked", scheduleId: target.id, insertAfter }, "*");
+      })();
+    }
+    if (initialScheduleId === void 0) {
+      let done = false;
+      let innerCleanup;
+      const timer = setTimeout(() => {
+        if (!done) {
+          done = true;
+          setLoading(false);
         }
+      }, 2e3);
+      const configHandler = (e) => {
+        if (e.data?.type !== "ow:schedule-config" || e.data.insertAfter !== insertAfter || done) return;
+        done = true;
+        clearTimeout(timer);
+        window.removeEventListener("message", configHandler);
+        innerCleanup = loadWithId(e.data.scheduleId ?? null);
       };
-      window.addEventListener("message", handler);
-      if (!startEmpty) window.parent.postMessage({ type: "ow:request-user-schedules", insertAfter }, "*");
+      window.addEventListener("message", configHandler);
+      window.postMessage({ type: "ow:request-schedule-config", insertAfter }, "*");
       return () => {
-        window.removeEventListener("message", handler);
-        if (timer) clearTimeout(timer);
+        window.removeEventListener("message", configHandler);
+        clearTimeout(timer);
+        innerCleanup?.();
       };
     }
-    if (initialScheduleId === null) {
-      setLoading(false);
-      return;
-    }
-    ;
-    (async () => {
-      try {
-        if (initialScheduleId) {
-          const res = await fetch(`${API_URL}/api/schedule/id/${initialScheduleId}`);
-          const data = await res.json();
-          setSchedule(data?.id ? data : null);
-        } else {
-          const domain = getApiDomain();
-          const sitemapRes = await fetch(`${API_URL}/api/schedule/sitemap/${domain}`);
-          const slugs = await sitemapRes.json();
-          if (!Array.isArray(slugs) || !slugs.length) {
-            setLoading(false);
-            return;
-          }
-          const { slug } = [...slugs].sort(
-            (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
-          )[0];
-          const res = await fetch(`${API_URL}/api/schedule/${domain}/${slug}`);
-          const data = await res.json();
-          setSchedule(data?.id ? data : null);
-        }
-      } catch {
-      }
-      setLoading(false);
-    })();
+    return loadWithId(initialScheduleId) ?? void 0;
   }, []);
   const timezoneLabel = schedule?.timezone ? (() => {
     try {
@@ -4379,10 +4388,14 @@ function initSectionsFromContent(content, removeExisting = false) {
     const inEditor = typeof window !== "undefined" && window.self !== window.top;
     if (inEditor) getSectionsTracker().textContent = raw;
     const pageEntries = getPageSchedulingEntries(raw);
+    const preExisting = pageEntries.filter((e) => !isSchedulingWidgetMissing(e));
     const notifyForEntry = inEditor ? (e) => !e.scheduleId : false;
     mountSchedulingEntries(pageEntries, notifyForEntry);
     requestAnimationFrame(() => retryMissingSchedulingMounts(pageEntries, notifyForEntry));
     setTimeout(() => retryMissingSchedulingMounts(pageEntries, notifyForEntry), 250);
+    for (const entry of preExisting) {
+      window.postMessage({ type: "ow:schedule-config", insertAfter: entry.insertAfter, scheduleId: entry.scheduleId ?? null }, "*");
+    }
   } catch {
   }
 }
@@ -4836,6 +4849,8 @@ function OhhwellsBridge() {
   });
   const postToParentRef = (0, import_react3.useRef)(postToParent);
   postToParentRef.current = postToParent;
+  const sectionsLoadedRef = (0, import_react3.useRef)(false);
+  const pendingScheduleConfigRequests = (0, import_react3.useRef)([]);
   const [toolbarRect, setToolbarRect] = (0, import_react3.useState)(null);
   const [toggleState, setToggleState] = (0, import_react3.useState)(null);
   const [maxBadge, setMaxBadge] = (0, import_react3.useState)(null);
@@ -4868,6 +4883,29 @@ function OhhwellsBridge() {
   const refreshStateRules = (0, import_react3.useCallback)(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
+  const processConfigRequest = (0, import_react3.useCallback)((insertAfterVal) => {
+    const tracker = getSectionsTracker();
+    let entries = [];
+    try {
+      entries = JSON.parse(tracker.textContent || "[]");
+    } catch {
+    }
+    const path = window.location.pathname;
+    const entry = entries.find(
+      (e) => e.type === "scheduling" && e.insertAfter === insertAfterVal && (!e.pagePath || e.pagePath === path)
+    );
+    if (entry) {
+      window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: entry.scheduleId ?? null }, "*");
+      return;
+    }
+    const newEntry = { type: "scheduling", insertAfter: insertAfterVal, pagePath: path };
+    entries.push(newEntry);
+    tracker.textContent = JSON.stringify(entries);
+    if (isEditMode) {
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent }] });
+    }
+    window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
+  }, [isEditMode]);
   const deactivate = (0, import_react3.useCallback)(() => {
     const el = activeElRef.current;
     if (!el) return;
@@ -4939,6 +4977,8 @@ function OhhwellsBridge() {
         });
       }
       initSectionsFromContent(content, true);
+      sectionsLoadedRef.current = true;
+      pendingScheduleConfigRequests.current.splice(0).forEach(processConfigRequest);
       return imageLoads.length > 0 ? Promise.all(imageLoads).then(() => {
       }) : Promise.resolve();
     };
@@ -5588,6 +5628,8 @@ function OhhwellsBridge() {
       }
       if (sectionsJson) {
         initSectionsFromContent({ __ohw_sections: sectionsJson }, true);
+        sectionsLoadedRef.current = true;
+        pendingScheduleConfigRequests.current.splice(0).forEach(processConfigRequest);
       }
       postToParentRef.current({ type: "ow:hydrate-done" });
     };
@@ -5851,6 +5893,22 @@ function OhhwellsBridge() {
       if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
+  (0, import_react3.useEffect)(() => {
+    const handler = (e) => {
+      if (e.data?.type !== "ow:request-schedule-config") return;
+      const insertAfterVal = e.data.insertAfter;
+      if (!insertAfterVal) return;
+      if (!sectionsLoadedRef.current) {
+        if (!pendingScheduleConfigRequests.current.includes(insertAfterVal)) {
+          pendingScheduleConfigRequests.current.push(insertAfterVal);
+        }
+        return;
+      }
+      processConfigRequest(insertAfterVal);
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [processConfigRequest]);
   (0, import_react3.useEffect)(() => {
     if (!isEditMode) return;
     document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {