@ohhwells/bridge 0.1.22 → 0.1.24

package/dist/index.d.cts

@@ -23,10 +23,10 @@ declare function ToggleGroupItem({ className, value, children, ...props }: {
     children: React.ReactNode;
 } & Omit<React.ComponentProps<typeof Toggle>, 'pressed' | 'onPressedChange'>): react_jsx_runtime.JSX.Element;
 
-declare function SchedulingWidget({ notifyOnConnect, initialScheduleId, insertAfter }: {
+declare function SchedulingWidget({ notifyOnConnect, initialScheduleId, insertAfter: insertAfterProp }: {
     notifyOnConnect?: boolean;
     initialScheduleId?: string | null;
-    insertAfter: string;
+    insertAfter?: string;
 }): react_jsx_runtime.JSX.Element | null;
 
 export { OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, toggleVariants };

package/dist/index.d.ts

@@ -23,10 +23,10 @@ declare function ToggleGroupItem({ className, value, children, ...props }: {
     children: React.ReactNode;
 } & Omit<React.ComponentProps<typeof Toggle>, 'pressed' | 'onPressedChange'>): react_jsx_runtime.JSX.Element;
 
-declare function SchedulingWidget({ notifyOnConnect, initialScheduleId, insertAfter }: {
+declare function SchedulingWidget({ notifyOnConnect, initialScheduleId, insertAfter: insertAfterProp }: {
     notifyOnConnect?: boolean;
     initialScheduleId?: string | null;
-    insertAfter: string;
+    insertAfter?: string;
 }): react_jsx_runtime.JSX.Element | null;
 
 export { OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, toggleVariants };

package/dist/index.js

@@ -6,7 +6,7 @@ import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
 
 // src/ui/SchedulingWidget.tsx
-import { useEffect, useMemo, useRef, useState as useState2 } from "react";
+import { useEffect, useId, useMemo, useRef, useState as useState2 } from "react";
 
 // src/ui/EmailCaptureModal.tsx
 import { useState } from "react";
@@ -164,13 +164,6 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "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");
@@ -444,18 +437,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__ */ jsxs2("div", { children: [
         /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 py-4 sm:items-center sm:gap-[60px] box-border", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2 shrink-0 sm:contents", children: [
-            /* @__PURE__ */ jsx2("div", { className: "sm:w-[120px] sm:shrink-0", children: /* @__PURE__ */ jsx2("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block", children: formatClassTime(cls) }) }),
-            /* @__PURE__ */ jsx2(
-              "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__ */ jsxs2("div", { className: "flex flex-col gap-2 sm:w-[120px] sm:shrink-0", children: [
+              /* @__PURE__ */ jsx2("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block", children: formatClassTime(cls) }),
+              /* @__PURE__ */ jsx2(
+                "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__ */ jsx2("div", { className: "sm:hidden flex flex-col gap-px", children: isFull ? /* @__PURE__ */ jsx2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
               /* @__PURE__ */ jsxs2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: [
                 available,
@@ -528,7 +524,9 @@ function CalendarFoldIcon() {
     }
   );
 }
-function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAfter }) {
+function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAfter: insertAfterProp }) {
+  const autoId = useId();
+  const insertAfter = insertAfterProp ?? autoId;
   const [schedule, setSchedule] = useState2(null);
   const [loading, setLoading] = useState2(true);
   const [inEditor, setInEditor] = useState2(false);
@@ -558,88 +556,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 {
@@ -4339,10 +4348,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 {
   }
 }
@@ -4796,6 +4809,8 @@ function OhhwellsBridge() {
   });
   const postToParentRef = useRef2(postToParent);
   postToParentRef.current = postToParent;
+  const sectionsLoadedRef = useRef2(false);
+  const pendingScheduleConfigRequests = useRef2([]);
   const [toolbarRect, setToolbarRect] = useState3(null);
   const [toggleState, setToggleState] = useState3(null);
   const [maxBadge, setMaxBadge] = useState3(null);
@@ -4828,6 +4843,29 @@ function OhhwellsBridge() {
   const refreshStateRules = useCallback(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
+  const processConfigRequest = 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 = useCallback(() => {
     const el = activeElRef.current;
     if (!el) return;
@@ -4899,6 +4937,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();
     };
@@ -5548,6 +5588,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" });
     };
@@ -5811,6 +5853,22 @@ function OhhwellsBridge() {
       if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
+  useEffect2(() => {
+    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]);
   useEffect2(() => {
     if (!isEditMode) return;
     document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {