@behio/storefront-sdk 2.29.0 → 2.31.0

package/dist/react.mjs

@@ -1925,6 +1925,10 @@ var FormsModule = class {
   constructor(client) {
     this.client = client;
   }
+  /** Only active, published placements. Internal delivery/CRM settings never leave the server. */
+  async placements() {
+    return this.client.request("GET", "/forms");
+  }
   /** Public definition of one form (fields + settings). 404 for an unknown or inactive slug. */
   async get(slug) {
     return this.client.request(
@@ -2291,12 +2295,23 @@ var NewsletterModule = class {
       auth: false
     });
   }
+  /**
+   * An address proves nothing, so this changes nothing yet: if the address is on
+   * the list, its owner receives a signed link. The answer is the same either way.
+   */
   async unsubscribe(email) {
+    return this.requestUnsubscribe({ email });
+  }
+  /** Unsubscribes at once with the signed token from a newsletter e-mail. */
+  async unsubscribeWithToken(token) {
+    return this.requestUnsubscribe({ token });
+  }
+  requestUnsubscribe(input) {
     return this.client.request(
       "POST",
       "/newsletter/unsubscribe",
       {
-        body: { email },
+        body: input,
         auth: false
       }
     );
@@ -3860,18 +3875,127 @@ function useAnalyticsEvents() {
   };
 }
 
+// src/form-popup.ts
+function preferenceMemory() {
+  if (typeof window === "undefined") return /* @__PURE__ */ new Map();
+  const browser = window;
+  return browser.__behioFormPreferences ?? (browser.__behioFormPreferences = /* @__PURE__ */ new Map());
+}
+var memoryAdapter = { get: (k) => preferenceMemory().get(k) ?? null, set: (k, v) => {
+  preferenceMemory().set(k, v);
+}, remove: (k) => {
+  preferenceMemory().delete(k);
+} };
+var NEWSLETTER_REQUESTED_EVENT = "behio:newsletter-requested";
+var PREFIX = "behio:forms:";
+var VISIT_MS = 30 * 60 * 1e3;
+function sessionAdapter() {
+  return { get: (key) => {
+    try {
+      return sessionStorage.getItem(key) ?? memoryAdapter.get(key);
+    } catch {
+      return memoryAdapter.get(key);
+    }
+  }, set: (key, value) => {
+    memoryAdapter.set(key, value);
+    try {
+      sessionStorage.setItem(key, value);
+    } catch {
+    }
+  }, remove: (key) => {
+    memoryAdapter.remove(key);
+    try {
+      sessionStorage.removeItem(key);
+    } catch {
+    }
+  } };
+}
+function markNewsletterRequested() {
+  if (typeof window === "undefined") return;
+  memoryAdapter.set(PREFIX + "newsletter", "1");
+  localStorageAdapter.set(PREFIX + "newsletter", "1");
+  if (typeof window !== "undefined") window.dispatchEvent(new Event(NEWSLETTER_REQUESTED_EVENT));
+}
+function newsletterWasRequested() {
+  return memoryAdapter.get(PREFIX + "newsletter") === "1" || localStorageAdapter.get(PREFIX + "newsletter") === "1";
+}
+function matchesFormPath(rule, pathname) {
+  return rule.endsWith("*") ? pathname.startsWith(rule.slice(0, -1)) : pathname === rule;
+}
+function formPopupRouteAllowed(pathname, placement) {
+  if (/^\/(cart|checkout|account|order|newsletter|login|register|forgot-password|reset-password|verify-email|session)(\/|$)/.test(pathname)) return false;
+  return (!placement.includePaths.length || placement.includePaths.some((rule) => matchesFormPath(rule, pathname))) && !placement.excludePaths.some((rule) => matchesFormPath(rule, pathname));
+}
+var FormPopupClock = class {
+  constructor(elapsedMs = 0) {
+    this.since = null;
+    this.elapsedMs = Math.max(0, elapsedMs);
+  }
+  setVisible(visible, now) {
+    if (this.since !== null) this.elapsedMs += Math.max(0, now - this.since);
+    this.since = visible ? now : null;
+  }
+  elapsed(now) {
+    return this.elapsedMs + (this.since === null ? 0 : Math.max(0, now - this.since));
+  }
+};
+var FormPopupPreferences = class {
+  constructor(session = sessionAdapter(), persistent = localStorageAdapter, now = () => Date.now()) {
+    this.session = session;
+    this.persistent = persistent;
+    this.now = now;
+    this.shownInVisit = this.number("shown", this.session) > this.now() || this.number("shown", this.persistent) > this.now();
+  }
+  number(key, storage) {
+    const n = Number(storage.get(PREFIX + key));
+    return Number.isFinite(n) && n >= 0 ? n : 0;
+  }
+  visibleMs() {
+    return this.now() - this.number("activity", this.session) < VISIT_MS ? this.number("visible", this.session) : 0;
+  }
+  saveTime(visible) {
+    if (this.shownInVisit) {
+      const until = String(this.now() + VISIT_MS);
+      this.session.set(PREFIX + "shown", until);
+      this.persistent.set(PREFIX + "shown", until);
+    }
+    this.session.set(PREFIX + "visible", String(visible));
+    this.session.set(PREFIX + "activity", String(this.now()));
+  }
+  suppressed(slug, newsletter = false) {
+    return newsletter && newsletterWasRequested() || this.shownInVisit || this.number("shown", this.session) > this.now() || this.number("shown", this.persistent) > this.now() || this.number("dismissed:" + slug, this.persistent) > this.now() || this.number("dismissed:" + slug, this.session) > this.now();
+  }
+  shown() {
+    this.shownInVisit = true;
+    const until = String(this.now() + VISIT_MS);
+    this.session.set(PREFIX + "shown", until);
+    this.persistent.set(PREFIX + "shown", until);
+  }
+  dismiss(slug, days) {
+    const key = PREFIX + "dismissed:" + slug;
+    const until = String(this.now() + days * 864e5);
+    this.session.set(key, until);
+    this.persistent.set(key, until);
+  }
+};
+
 // src/react/hooks/use-newsletter.ts
 import { useMutation as useMutation11 } from "@tanstack/react-query";
 function useNewsletterSubscribe() {
   const { client } = useBehio();
   return useMutation11({
-    mutationFn: (input) => unwrap(client.newsletter.subscribe(input))
+    mutationFn: (input) => unwrap(client.newsletter.subscribe(input)),
+    onSuccess: (result) => {
+      if (result.success) markNewsletterRequested();
+    }
   });
 }
 function useNewsletterUnsubscribe() {
   const { client } = useBehio();
   return useMutation11({
-    mutationFn: (email) => unwrap(client.newsletter.unsubscribe(email))
+    mutationFn: (input) => unwrap(
+      typeof input === "string" ? client.newsletter.unsubscribe(input) : client.newsletter.unsubscribeWithToken(input.token)
+    )
   });
 }
 function useNewsletterConfirm() {
@@ -4217,7 +4341,10 @@ function useSiteForm(slug, options) {
 function useSiteFormSubmit(slug) {
   const { client } = useBehio();
   const mutation = useMutation15({
-    mutationFn: (input) => unwrap(client.forms.submit(slug, input))
+    mutationFn: (input) => unwrap(client.forms.submit(slug, input)),
+    onSuccess: (result) => {
+      if (typeof result.confirmationRequired === "boolean") markNewsletterRequested();
+    }
   });
   const sdkError = mutation.error instanceof UnwrappedError ? mutation.error.sdkError : null;
   const fieldErrors = useMemo4(() => {
@@ -4250,6 +4377,10 @@ function useSiteFormSubmit(slug) {
     reset: mutation.reset
   };
 }
+function useFormPlacements(options) {
+  const { client } = useBehio();
+  return useQuery33({ queryKey: ["behio", "form-placements"], queryFn: () => unwrap(client.forms.placements()), initialData: options?.initialData, enabled: options?.enabled !== false, staleTime: 3e5 });
+}
 
 // src/react/hooks/use-bookings.ts
 import { useMutation as useMutation16, useQuery as useQuery34, useQueryClient as useQueryClient16 } from "@tanstack/react-query";
@@ -5104,6 +5235,176 @@ async function revokeAnalyticsConsent(client) {
   if (!id) return { data: { success: true }, error: null };
   return client.consent.revoke(id);
 }
+
+// src/react/hooks/use-form-popup.ts
+import { useEffect as useEffect9, useRef as useRef5, useState as useState11 } from "react";
+var MODALS = '[aria-modal="true"], dialog[open], [data-consent-banner]';
+function blocked(own) {
+  return Array.from(document.querySelectorAll(MODALS)).some((element) => element !== own && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden");
+}
+function publicPath(locales) {
+  const path = window.location.pathname;
+  const first = path.split("/")[1];
+  return locales.includes(first) ? path.slice(first.length + 1) || "/" : path;
+}
+function useFormPopup({ forms, locales, pathname }) {
+  const { client } = useBehio();
+  const [active, setActive] = useState11(null);
+  const dialog = useRef5(null);
+  const current = useRef5({ forms, locales });
+  current.current = { forms, locales };
+  const preferences = useRef5(null);
+  const evaluateRef = useRef5(null);
+  const shownForm = useRef5(active);
+  shownForm.current = active;
+  const closed = useRef5(false);
+  const mountedOffer = useRef5(null);
+  const returnFocus = useRef5(null);
+  useEffect9(() => {
+    evaluateRef.current?.();
+  }, [pathname, forms, locales]);
+  useEffect9(() => {
+    const prefs = preferences.current = new FormPopupPreferences();
+    const clock = new FormPopupClock(prefs.visibleMs());
+    clock.setVisible(!document.hidden, performance.now());
+    let timer;
+    let disposed = false, opening = false, shownHere = false;
+    const flush = () => prefs.saveTime(clock.elapsed(performance.now()));
+    const evaluate = async () => {
+      clearTimeout(timer);
+      if (disposed || opening || shownHere || document.hidden) return;
+      const elapsed = clock.elapsed(performance.now());
+      const candidates = current.current.forms.flatMap((form) => (form.presentation?.placements ?? []).filter((placement) => placement.mode === "popup" && placement.enabled).map((placement) => ({ form, placement })));
+      let nextDelay = Infinity;
+      for (const candidate of candidates) {
+        const { form, placement } = candidate;
+        if (!form.revision || prefs.suppressed(form.slug, form.presentation?.purpose === "newsletter")) continue;
+        if (!formPopupRouteAllowed(publicPath(current.current.locales), placement)) continue;
+        const mobile = window.matchMedia("(max-width: 767px)").matches;
+        if (placement.devices !== "all" && placement.devices === "mobile" !== mobile) continue;
+        const remaining = placement.delaySeconds * 1e3 - elapsed;
+        if (remaining > 0) {
+          nextDelay = Math.min(nextDelay, remaining);
+          continue;
+        }
+        if (blocked(dialog.current)) continue;
+        opening = true;
+        try {
+          const fresh = await client.forms.get(form.slug);
+          if (disposed || document.hidden || fresh.error || fresh.data?.revision !== form.revision || blocked(dialog.current) || !formPopupRouteAllowed(publicPath(current.current.locales), placement)) return;
+          const open = async () => {
+            if (disposed || prefs.suppressed(form.slug, form.presentation?.purpose === "newsletter") || blocked(dialog.current)) return false;
+            closed.current = false;
+            returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            return new Promise((resolve) => {
+              mountedOffer.current = resolve;
+              setActive(candidate);
+            });
+          };
+          const opened = navigator.locks ? await navigator.locks.request("behio-form-popup", { ifAvailable: true }, async (lock) => lock ? await open() : false) : await open();
+          if (opened) {
+            shownHere = true;
+            flush();
+          }
+        } catch {
+        } finally {
+          opening = false;
+        }
+        return;
+      }
+      if (Number.isFinite(nextDelay)) timer = setTimeout(() => void evaluate(), Math.max(1, nextDelay));
+    };
+    evaluateRef.current = () => {
+      void evaluate();
+    };
+    const visibility = () => {
+      clock.setVisible(!document.hidden, performance.now());
+      flush();
+      void evaluate();
+    };
+    const changed = () => {
+      if (dialog.current?.open && (blocked(dialog.current) || shownForm.current?.form.presentation?.purpose === "newsletter" && newsletterWasRequested() && !dialog.current.querySelector('[role="status"]'))) setActive(null);
+      void evaluate();
+    };
+    const observer = new MutationObserver(changed);
+    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["open", "aria-modal", "hidden", "style", "class"] });
+    document.addEventListener("visibilitychange", visibility);
+    window.addEventListener("pagehide", flush);
+    window.addEventListener("storage", changed);
+    window.addEventListener("resize", changed);
+    window.addEventListener(NEWSLETTER_REQUESTED_EVENT, changed);
+    void evaluate();
+    return () => {
+      flush();
+      disposed = true;
+      mountedOffer.current?.(false);
+      mountedOffer.current = null;
+      clearTimeout(timer);
+      observer.disconnect();
+      evaluateRef.current = null;
+      document.removeEventListener("visibilitychange", visibility);
+      window.removeEventListener("pagehide", flush);
+      window.removeEventListener("storage", changed);
+      window.removeEventListener("resize", changed);
+      window.removeEventListener(NEWSLETTER_REQUESTED_EVENT, changed);
+    };
+  }, [client]);
+  useEffect9(() => {
+    if (!active || !dialog.current) return;
+    const node = dialog.current, focused = returnFocus.current;
+    const overflow = document.body.style.overflow;
+    if (document.hidden || blocked(node)) {
+      mountedOffer.current?.(false);
+      mountedOffer.current = null;
+      setActive(null);
+      return;
+    }
+    try {
+      node.showModal();
+    } catch {
+      mountedOffer.current?.(false);
+      mountedOffer.current = null;
+      setActive(null);
+      return;
+    }
+    document.body.style.overflow = "hidden";
+    const trapTab = (event) => {
+      if (event.key !== "Tab") return;
+      const controls = Array.from(node.querySelectorAll("a[href],button,input,select,textarea,[tabindex]")).filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && element.getClientRects().length > 0);
+      const first = controls[0], last = controls[controls.length - 1];
+      if (!first || !last) return;
+      if (event.shiftKey && (document.activeElement === first || !node.contains(document.activeElement))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (document.activeElement === last || !node.contains(document.activeElement))) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    node.addEventListener("keydown", trapTab);
+    preferences.current?.shown();
+    mountedOffer.current?.(true);
+    mountedOffer.current = null;
+    trackEcommerceEvent("form_popup_view", { props: { form: active.form.slug, placement: active.placement.key, revision: active.form.revision } });
+    return () => {
+      closed.current = true;
+      node.removeEventListener("keydown", trapTab);
+      if (node.open) node.close();
+      document.body.style.overflow = overflow;
+      if (focused?.isConnected) focused.focus({ preventScroll: true });
+    };
+  }, [active]);
+  useEffect9(() => {
+    if (active && !formPopupRouteAllowed(publicPath(locales), active.placement)) setActive(null);
+  }, [pathname, active, locales]);
+  const dismiss = () => {
+    if (!active || closed.current) return;
+    closed.current = true;
+    preferences.current?.dismiss(active.form.slug, active.placement.dismissDays);
+    setActive(null);
+  };
+  return { active, dialog, dismiss };
+}
 export {
   BehioAnalyticsTracker,
   BehioProvider,
@@ -5157,6 +5458,8 @@ export {
   useFaqGroups,
   useFeatured,
   useFilters,
+  useFormPlacements,
+  useFormPopup,
   useGiftCardBalance,
   useIsInWishlist,
   useLabels,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@behio/storefront-sdk",
-  "version": "2.29.0",
+  "version": "2.31.0",
   "description": "TypeScript SDK for Behio headless e-commerce: core client + React hooks",
   "author": "Behio",
   "license": "MIT",