@ohhwells/bridge 0.1.28 → 0.1.29-next.21

package/dist/index.cjs

@@ -212,13 +212,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");
@@ -264,10 +257,10 @@ function buildTimezoneLabel(tz) {
     return tz;
   }
 }
-function EmptyState({ inEditor }) {
+function EmptyState({ inEditor, insertAfter }) {
   const handleAddSchedule = () => {
     if (inEditor) {
-      window.parent.postMessage({ type: "ow:scheduling-not-connected" }, "*");
+      window.parent.postMessage({ type: "ow:scheduling-not-connected", insertAfter }, "*");
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-center justify-center gap-6 p-12 bg-[#FAFAF9] border-2 border-dashed border-[#E7E5E4] rounded-[10px] h-[264px] w-full box-border", children: [
@@ -492,18 +485,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,
@@ -576,7 +572,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);
@@ -606,88 +604,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 {
@@ -722,6 +731,7 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
       window.parent.postMessage({ type: "ow:scheduling-not-connected", insertAfter }, "*");
     }
   };
+  if (!inEditor && !loading && !schedule) return null;
   const sectionId = `scheduling-${insertAfter}`;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "section",
@@ -767,7 +777,7 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full flex flex-col items-end gap-3", children: [
             timezoneLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm font-normal text-(--color-accent,#A89B83)", children: timezoneLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full p-0 sm:p-10 box-border", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingSkeleton, {}) : !schedule ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EmptyState, { inEditor }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full p-0 sm:p-10 box-border", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingSkeleton, {}) : !schedule ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EmptyState, { inEditor, insertAfter }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               ScheduleView,
               {
                 schedule,
@@ -4311,7 +4321,10 @@ function isValidUrl(urlString) {
     const hostname = url.hostname;
     if (!hostname || hostname.length === 0) return false;
     if (hostname.includes(" ")) return false;
-    return hostname.includes(".") || hostname === "localhost";
+    if (hostname === "localhost") return true;
+    if (!hostname.includes(".")) return false;
+    if (!/[a-z]/i.test(hostname)) return false;
+    return true;
   } catch {
     return false;
   }
@@ -4322,12 +4335,19 @@ function normalizeUrl(value) {
   return `https://${trimmed}`;
 }
 function validateUrlInput(value, pages, allPages) {
-  if (!value.trim()) return "";
-  const filtered = pages.filter((p) => p.title.toLowerCase().startsWith(value.toLowerCase()));
-  if (filtered.length > 0) return "";
-  const matchingPage = allPages.find((p) => p.title.toLowerCase() === value.toLowerCase());
-  if (matchingPage) return "";
-  if (!isValidUrl(normalizeUrl(value))) {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  const exactPage = allPages.find((p) => p.title.toLowerCase() === trimmed.toLowerCase());
+  if (exactPage) return "";
+  const hasPrefixMatch = pages.some((p) => p.title.toLowerCase().startsWith(trimmed.toLowerCase()));
+  if (hasPrefixMatch) {
+    return "Select a page from the list or enter a valid URL";
+  }
+  const hasScheme = /^https?:\/\//i.test(trimmed);
+  if (!hasScheme && !trimmed.includes(".")) {
+    return "Please enter a valid URL (e.g., https://example.com)";
+  }
+  if (!isValidUrl(normalizeUrl(trimmed))) {
     return "Please enter a valid URL (e.g., https://example.com)";
   }
   return "";
@@ -4870,9 +4890,8 @@ function useLinkModalState({
     setUrlError("");
     const filtered = value.trim() ? availablePages.filter((p) => p.title.toLowerCase().startsWith(value.toLowerCase())) : availablePages;
     setDropdownOpen(filtered.length > 0);
-    if (value.trim() && filtered.length === 0) {
-      const error = validateUrlInput(value, availablePages, pages);
-      if (error) setUrlError(error);
+    if (value.trim()) {
+      setUrlError(validateUrlInput(value, availablePages, pages));
     }
   };
   const handlePageSelect = (page) => {
@@ -5316,9 +5335,14 @@ function initSectionsFromContent(content, removeExisting = false) {
     const inEditor = typeof window !== "undefined" && window.self !== window.top;
     if (inEditor) getSectionsTracker().textContent = raw;
     const pageEntries = getPageSchedulingEntries(raw);
-    mountSchedulingEntries(pageEntries, false);
-    requestAnimationFrame(() => retryMissingSchedulingMounts(pageEntries, false));
-    setTimeout(() => retryMissingSchedulingMounts(pageEntries, false), 250);
+    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 {
   }
 }
@@ -5377,8 +5401,9 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
   const pending = entries.filter((e) => e.type === "scheduling").sort((a, b) => schedulingMountDepth(a.insertAfter) - schedulingMountDepth(b.insertAfter));
   for (let attempt = 0; attempt < pending.length + 1 && pending.length > 0; attempt++) {
     for (let i = pending.length - 1; i >= 0; i--) {
-      const { insertAfter, scheduleId } = pending[i];
-      if (mountSchedulingWidget(insertAfter, notifyOnConnect, scheduleId)) {
+      const entry = pending[i];
+      const shouldNotify = typeof notifyOnConnect === "function" ? notifyOnConnect(entry) : notifyOnConnect;
+      if (mountSchedulingWidget(entry.insertAfter, shouldNotify, entry.scheduleId)) {
         pending.splice(i, 1);
       }
     }
@@ -5856,6 +5881,8 @@ function OhhwellsBridge() {
   });
   const postToParentRef = (0, import_react5.useRef)(postToParent);
   postToParentRef.current = postToParent;
+  const sectionsLoadedRef = (0, import_react5.useRef)(false);
+  const pendingScheduleConfigRequests = (0, import_react5.useRef)([]);
   const [toolbarRect, setToolbarRect] = (0, import_react5.useState)(null);
   const [toggleState, setToggleState] = (0, import_react5.useState)(null);
   const [maxBadge, setMaxBadge] = (0, import_react5.useState)(null);
@@ -5961,6 +5988,29 @@ function OhhwellsBridge() {
   const refreshStateRules = (0, import_react5.useCallback)(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
+  const processConfigRequest = (0, import_react5.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_react5.useCallback)(() => {
     const el = activeElRef.current;
     if (!el) return;
@@ -6037,6 +6087,8 @@ function OhhwellsBridge() {
         applyLinkByKey(key, val);
       }
       initSectionsFromContent(content, true);
+      sectionsLoadedRef.current = true;
+      pendingScheduleConfigRequests.current.splice(0).forEach(processConfigRequest);
       return imageLoads.length > 0 ? Promise.all(imageLoads).then(() => {
       }) : Promise.resolve();
     };
@@ -6733,6 +6785,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" });
     };
@@ -7005,6 +7059,22 @@ function OhhwellsBridge() {
       if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
+  (0, import_react5.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_react5.useEffect)(() => {
     if (!isEditMode) return;
     document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {