@ohhwells/bridge 0.1.28 → 0.1.29-next.21

package/dist/index.d.cts

@@ -83,10 +83,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;
-}): react_jsx_runtime.JSX.Element;
+    insertAfter?: string;
+}): react_jsx_runtime.JSX.Element | null;
 
 export { LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, buildTarget, filterAvailablePages, getEditModeInitialState, isValidUrl, parseTarget, toggleVariants, validateUrlInput };

package/dist/index.d.ts

@@ -83,10 +83,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;
-}): react_jsx_runtime.JSX.Element;
+    insertAfter?: string;
+}): react_jsx_runtime.JSX.Element | null;
 
 export { LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, Toggle, ToggleGroup, ToggleGroupItem, buildTarget, filterAvailablePages, getEditModeInitialState, isValidUrl, parseTarget, toggleVariants, validateUrlInput };

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");
@@ -216,10 +209,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__ */ jsxs2("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: [
@@ -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 {
@@ -674,6 +683,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__ */ jsxs2(
     "section",
@@ -719,7 +729,7 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "w-full flex flex-col items-end gap-3", children: [
             timezoneLabel && /* @__PURE__ */ jsx2("span", { className: "font-body text-sm font-normal text-(--color-accent,#A89B83)", children: timezoneLabel }),
-            /* @__PURE__ */ jsx2("div", { className: "w-full p-0 sm:p-10 box-border", children: loading ? /* @__PURE__ */ jsx2(LoadingSkeleton, {}) : !schedule ? /* @__PURE__ */ jsx2(EmptyState, { inEditor }) : /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx2("div", { className: "w-full p-0 sm:p-10 box-border", children: loading ? /* @__PURE__ */ jsx2(LoadingSkeleton, {}) : !schedule ? /* @__PURE__ */ jsx2(EmptyState, { inEditor, insertAfter }) : /* @__PURE__ */ jsx2(
               ScheduleView,
               {
                 schedule,
@@ -4263,7 +4273,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;
   }
@@ -4274,12 +4287,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 "";
@@ -4582,7 +4602,7 @@ function SectionPickerList({ sections, onSelect }) {
 }
 
 // src/ui/link-modal/UrlOrPageInput.tsx
-import { useId, useRef as useRef2, useState as useState3 } from "react";
+import { useId as useId2, useRef as useRef2, useState as useState3 } from "react";
 
 // src/ui/input.tsx
 import * as React4 from "react";
@@ -4677,7 +4697,7 @@ function UrlOrPageInput({
   readOnly = false,
   urlError
 }) {
-  const inputId = useId();
+  const inputId = useId2();
   const inputRef = useRef2(null);
   const [isFocused, setIsFocused] = useState3(false);
   const openDropdown = () => {
@@ -4822,9 +4842,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) => {
@@ -5268,9 +5287,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 {
   }
 }
@@ -5329,8 +5353,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);
       }
     }
@@ -5808,6 +5833,8 @@ function OhhwellsBridge() {
   });
   const postToParentRef = useRef3(postToParent);
   postToParentRef.current = postToParent;
+  const sectionsLoadedRef = useRef3(false);
+  const pendingScheduleConfigRequests = useRef3([]);
   const [toolbarRect, setToolbarRect] = useState5(null);
   const [toggleState, setToggleState] = useState5(null);
   const [maxBadge, setMaxBadge] = useState5(null);
@@ -5913,6 +5940,29 @@ function OhhwellsBridge() {
   const refreshStateRules = useCallback2(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
+  const processConfigRequest = useCallback2((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 = useCallback2(() => {
     const el = activeElRef.current;
     if (!el) return;
@@ -5989,6 +6039,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();
     };
@@ -6685,6 +6737,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" });
     };
@@ -6957,6 +7011,22 @@ function OhhwellsBridge() {
       if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
+  useEffect3(() => {
+    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]);
   useEffect3(() => {
     if (!isEditMode) return;
     document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {