@asteby/storefront-react 0.3.0 → 0.5.0

package/dist/promotions.cjs

@@ -0,0 +1,573 @@
+'use strict';
+
+var react = require('react');
+var storefront = require('@asteby/storefront');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/promos/promo-popup.tsx
+function useModalDialog({ open, onClose, initialFocus }) {
+  const ref = react.useRef(null);
+  const opener = react.useRef(null);
+  const onCloseRef = react.useRef(onClose);
+  onCloseRef.current = onClose;
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el || !open) return;
+    opener.current = typeof document !== "undefined" ? document.activeElement : null;
+    const hasModal = typeof el.showModal === "function";
+    if (!el.open) {
+      if (hasModal) {
+        try {
+          el.showModal();
+        } catch {
+          el.setAttribute("open", "");
+        }
+      } else el.setAttribute("open", "");
+    }
+    const target = initialFocus?.current ?? el.querySelector("[data-sf-autofocus]") ?? el;
+    if (!target.hasAttribute("tabindex") && target === el) el.setAttribute("tabindex", "-1");
+    target.focus({ preventScroll: true });
+    const onCancel = (e) => {
+      e.preventDefault();
+      onCloseRef.current("esc");
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCloseRef.current("esc");
+      }
+    };
+    el.addEventListener("cancel", onCancel);
+    if (!hasModal) el.addEventListener("keydown", onKey);
+    return () => {
+      el.removeEventListener("cancel", onCancel);
+      el.removeEventListener("keydown", onKey);
+      if (el.open) {
+        if (typeof el.close === "function") {
+          try {
+            el.close();
+          } catch {
+            el.removeAttribute("open");
+          }
+        } else el.removeAttribute("open");
+      }
+      const back = opener.current;
+      if (back instanceof HTMLElement && back.isConnected) back.focus({ preventScroll: true });
+    };
+  }, [open]);
+  const onBackdropClick = react.useCallback((e) => {
+    if (e.target === e.currentTarget) onCloseRef.current("backdrop");
+  }, []);
+  return { ref, onBackdropClick };
+}
+function prefersReducedMotion() {
+  try {
+    return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+var StorefrontContext = react.createContext(null);
+function useOptionalStorefront() {
+  return react.useContext(StorefrontContext);
+}
+
+// src/locale.ts
+function useResolvedLocale(locale) {
+  const sf = useOptionalStorefront();
+  return locale ?? sf?.locale ?? "es-MX";
+}
+
+// src/promos/promo-logic.ts
+var DEFAULT_PROMO_EXCLUDED_PATHS = [
+  "/carrito*",
+  "/cart*",
+  "/pagar*",
+  "/checkout*",
+  "/gracias*",
+  "/cuenta*",
+  "/account*",
+  "/login*",
+  "/iniciar-sesion*",
+  "/registro*",
+  "/terminos*",
+  "/privacidad*",
+  "/legal*",
+  "/preview*",
+  "/editor*"
+];
+function stripMarketPrefix(pathname) {
+  return pathname.replace(/^\/[a-z]{2}(?:-[a-z]{2})?(?=\/|$)/i, "") || "/";
+}
+function matches(path, pattern) {
+  if (pattern instanceof RegExp) return pattern.test(path);
+  const p = pattern.toLowerCase();
+  if (p.endsWith("*")) {
+    const prefix = p.slice(0, -1);
+    return path === prefix.replace(/\/$/, "") || path.startsWith(prefix);
+  }
+  return path === p || path === p.replace(/\/$/, "");
+}
+function isExcludedPath(pathname, patterns = DEFAULT_PROMO_EXCLUDED_PATHS) {
+  const path = (pathname || "/").split(/[?#]/)[0].toLowerCase().replace(/\/+$/, "") || "/";
+  const bare = stripMarketPrefix(path);
+  return patterns.some((p) => matches(path, p) || matches(bare, p));
+}
+var CRAWLER = /bot|crawl|spider|slurp|bingpreview|facebookexternalhit|embedly|quora link|outbrain|pinterest|vkshare|w3c_validator|lighthouse|headless|prerender|google-structured-data|gtmetrix|pingdom/i;
+function isCrawler(userAgent, webdriver) {
+  return webdriver === true || CRAWLER.test(userAgent ?? "");
+}
+var PROMO_COOKIE = "sf_promo";
+function memorySeenStore() {
+  const data = /* @__PURE__ */ new Map();
+  return { data, get: (n) => data.get(n) ?? null, set: (n, v) => void data.set(n, v) };
+}
+function browserSeenStore() {
+  const fallback = memorySeenStore();
+  return {
+    get(name) {
+      try {
+        const fromSession = sessionStorage.getItem(name);
+        if (fromSession) return fromSession;
+      } catch {
+      }
+      try {
+        const m = document.cookie.split("; ").find((c) => c.startsWith(`${name}=`));
+        if (m) return decodeURIComponent(m.slice(name.length + 1));
+      } catch {
+      }
+      return fallback.get(name);
+    },
+    set(name, value, { days, session }) {
+      fallback.set(name, value, {});
+      if (session) {
+        try {
+          sessionStorage.setItem(name, value);
+        } catch {
+        }
+        return;
+      }
+      try {
+        const maxAge = Math.round((days ?? 7) * 86400);
+        document.cookie = `${name}=${encodeURIComponent(value)}; Max-Age=${maxAge}; Path=/; SameSite=Lax${location.protocol === "https:" ? "; Secure" : ""}`;
+      } catch {
+      }
+    }
+  };
+}
+function serializeSeen(r) {
+  return `${r.id}:${r.version}:${r.at}`;
+}
+function parseSeen(raw) {
+  if (!raw) return null;
+  const m = /^(.+):(\d+):(\d+)$/.exec(raw);
+  if (!m) return null;
+  return { id: m[1], version: Number(m[2]), at: Number(m[3]) };
+}
+function frequencyAllows({ id, version, frequency, days = 7, seen, now }) {
+  if (!seen || seen.id !== id || seen.version !== version) return true;
+  if (frequency === "days") return now - seen.at >= days * 864e5;
+  return false;
+}
+function withinWindow({ starts_at, ends_at }, now) {
+  const s = starts_at ? Date.parse(starts_at) : NaN;
+  const e = ends_at ? Date.parse(ends_at) : NaN;
+  if (Number.isFinite(s) && now < s) return false;
+  if (Number.isFinite(e) && now > e) return false;
+  return true;
+}
+var DEFAULT_PROMO_TRIGGER = { delayMs: 5e3, pageviews: 2, scrollPercent: 40 };
+function resolveTrigger(t) {
+  return { ...DEFAULT_PROMO_TRIGGER, ...t ?? {} };
+}
+function scrollDepthPercent(scrollY, viewportHeight, docHeight) {
+  const scrollable = docHeight - viewportHeight;
+  if (!(scrollable > 0)) return 0;
+  return Math.min(100, Math.max(0, scrollY / scrollable * 100));
+}
+function safeInternalPath(href) {
+  if (!href || !href.startsWith("/") || href.startsWith("//") || /[\\\u0000-\u001f]/.test(href)) return null;
+  return href;
+}
+var PAGEVIEW_KEY = "sf_promo_pv";
+function PromoPopup(props) {
+  const { announcement, messages, onEvent, className } = props;
+  const locale = useResolvedLocale(props.locale);
+  const [open, setOpen] = react.useState(false);
+  const shown = react.useRef(null);
+  const titleId = react.useId();
+  const m = react.useMemo(() => storefront.promotionMessages(locale, messages), [locale, messages]);
+  const storeRef = react.useRef(props.store ?? null);
+  const live = react.useRef(props);
+  live.current = props;
+  const pathname = props.pathname ?? (typeof window !== "undefined" ? window.location.pathname : "/");
+  const excluded = isExcludedPath(pathname, props.excludePaths);
+  const annKey = announcement ? `${announcement.id}:${announcement.version}` : null;
+  const views = react.useRef(0);
+  const lastCounted = react.useRef(null);
+  react.useEffect(() => {
+    if (lastCounted.current === pathname) return;
+    lastCounted.current = pathname;
+    try {
+      views.current = Number(sessionStorage.getItem(PAGEVIEW_KEY) ?? "0") + 1;
+      sessionStorage.setItem(PAGEVIEW_KEY, String(views.current));
+    } catch {
+      views.current += 1;
+    }
+  }, [pathname]);
+  react.useEffect(() => {
+    const announcement2 = live.current.announcement;
+    if (!announcement2 || excluded) {
+      setOpen(false);
+      return;
+    }
+    const now = () => live.current.now ? live.current.now() : Date.now();
+    const ua = live.current.userAgent ?? (typeof navigator !== "undefined" ? navigator.userAgent : "");
+    const driver = live.current.webdriver ?? (typeof navigator !== "undefined" ? navigator.webdriver : false);
+    if (isCrawler(ua, driver)) return;
+    if (!withinWindow(announcement2, now())) return;
+    const frequency = live.current.frequency ?? announcement2.frequency ?? "days";
+    const store = storeRef.current ??= typeof window !== "undefined" ? browserSeenStore() : memorySeenStore();
+    const cookieName = PROMO_COOKIE;
+    const allowed = () => frequencyAllows({
+      id: announcement2.id,
+      version: announcement2.version,
+      frequency,
+      days: live.current.frequencyDays ?? announcement2.frequency_days ?? 7,
+      seen: parseSeen(store.get(cookieName)),
+      now: now()
+    });
+    if (!allowed()) return;
+    if (shown.current === annKey) return;
+    const trigger = resolveTrigger({ ...announcement2.trigger ? {
+      ...announcement2.trigger.delay_ms !== void 0 ? { delayMs: announcement2.trigger.delay_ms } : {},
+      ...announcement2.trigger.pageviews !== void 0 ? { pageviews: announcement2.trigger.pageviews } : {},
+      ...announcement2.trigger.scroll_percent !== void 0 ? { scrollPercent: announcement2.trigger.scroll_percent } : {}
+    } : {}, ...live.current.trigger ?? {} });
+    let done = false;
+    const cleanups = [];
+    const fire = (via) => {
+      if (done || !allowed()) return;
+      done = true;
+      cleanups.forEach((c) => c());
+      shown.current = annKey;
+      store.set(cookieName, serializeSeen({ id: announcement2.id, version: announcement2.version, at: now() }), frequency === "session" ? { session: true } : { days: frequency === "campaign" ? 365 : live.current.frequencyDays ?? announcement2.frequency_days ?? 7 });
+      setOpen(true);
+      live.current.onEvent?.({ type: "view", id: announcement2.id, version: announcement2.version, via });
+    };
+    if (trigger.pageviews !== false && views.current >= trigger.pageviews) {
+      const t = setTimeout(() => fire("pageviews"), 0);
+      cleanups.push(() => clearTimeout(t));
+    }
+    if (trigger.delayMs !== false) {
+      const t = setTimeout(() => fire("delay"), trigger.delayMs);
+      cleanups.push(() => clearTimeout(t));
+    }
+    if (trigger.scrollPercent !== false && typeof window !== "undefined") {
+      const target = trigger.scrollPercent;
+      const onScroll = () => {
+        const depth = scrollDepthPercent(window.scrollY, window.innerHeight, document.documentElement.scrollHeight);
+        if (depth >= target) fire("scroll");
+      };
+      window.addEventListener("scroll", onScroll, { passive: true });
+      cleanups.push(() => window.removeEventListener("scroll", onScroll));
+    }
+    return () => {
+      done = true;
+      cleanups.forEach((c) => c());
+    };
+  }, [annKey, excluded]);
+  const close = (how) => {
+    setOpen(false);
+    if (announcement && how !== "action") onEvent?.({ type: "close", id: announcement.id, how });
+  };
+  const { ref, onBackdropClick } = useModalDialog({ open, onClose: close });
+  if (!announcement || !open || excluded) return null;
+  const cta = safeInternalPath(announcement.cta_url);
+  const ctaLabel = announcement.cta_label;
+  const limited = !!announcement.ends_at;
+  let validUntil = null;
+  if (announcement.ends_at) {
+    try {
+      validUntil = storefront.formatAvailabilityMessage(m["popup.valid_until"], {
+        date: new Intl.DateTimeFormat(locale, { dateStyle: "long" }).format(new Date(announcement.ends_at))
+      });
+    } catch {
+      validUntil = null;
+    }
+  }
+  const onCta = () => {
+    onEvent?.({ type: "cta", id: announcement.id });
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref, className, "aria-labelledby": titleId, "data-sf-promo-popup": true, onClick: onBackdropClick, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-sf-promo-body": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => close("x"),
+        "aria-label": m["popup.close"],
+        "data-sf-promo-close": true,
+        style: { minWidth: 44, minHeight: 44 },
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xD7" })
+      }
+    ),
+    limited && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-promo-eyebrow": true, children: m["popup.limited_time"] }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, tabIndex: -1, "data-sf-autofocus": true, children: announcement.headline }),
+    announcement.subheadline && /* @__PURE__ */ jsxRuntime.jsx("p", { children: announcement.subheadline }),
+    announcement.image && /* @__PURE__ */ jsxRuntime.jsx("img", { src: announcement.image.url, alt: announcement.image.alt, loading: "lazy", decoding: "async" }),
+    (announcement.tiers.length > 0 || announcement.free_shipping_threshold) && /* @__PURE__ */ jsxRuntime.jsxs("ul", { "data-sf-promo-tiers": true, children: [
+      announcement.tiers.map((t) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: storefront.formatAvailabilityMessage(m["popup.discount_tier"], {
+        reward: storefront.rewardLabel(t.reward, locale, messages),
+        threshold: storefront.formatMoney(t.threshold, locale, { withoutTrailingZeros: true })
+      }) }, `${t.threshold.amount}-${storefront.rewardLabel(t.reward, locale, messages)}`)),
+      announcement.free_shipping_threshold && /* @__PURE__ */ jsxRuntime.jsx("li", { children: Number.parseFloat(announcement.free_shipping_threshold.amount) === 0 ? m["popup.free_shipping_always"] : storefront.formatAvailabilityMessage(m["popup.free_shipping_min"], {
+        threshold: storefront.formatMoney(announcement.free_shipping_threshold, locale, { withoutTrailingZeros: true })
+      }) })
+    ] }),
+    cta && ctaLabel && (props.renderCta ? props.renderCta({ href: cta, label: ctaLabel, onClick: onCta }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: cta, onClick: onCta, "data-sf-promo-cta": true, style: { minHeight: 44, display: "inline-flex", alignItems: "center" }, children: ctaLabel })),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { "data-sf-promo-legal": true, children: [
+      announcement.legal_text,
+      validUntil && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        " ",
+        validUntil,
+        "."
+      ] })
+    ] })
+  ] }) });
+}
+function PromoProgressBar({ text, percent, label, showBar = true, milestones, state, kind, className }) {
+  const id = react.useId();
+  const [reduced, setReduced] = react.useState(false);
+  react.useEffect(() => setReduced(prefersReducedMotion()), []);
+  const fill = { width: `${percent}%`, transition: reduced ? "none" : "width 600ms ease" };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-sf-promo-bar": kind, "data-state": state, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-t`, "aria-live": "polite", "data-sf-promo-bar-text": true, children: text }),
+    showBar && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "progressbar", "aria-label": label, "aria-describedby": `${id}-t`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, "aria-valuetext": text, "data-sf-promo-track": true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: fill, "data-sf-promo-fill": true }) }),
+    showBar && milestones && milestones.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { "data-sf-promo-milestones": true, children: milestones.map((t) => /* @__PURE__ */ jsxRuntime.jsxs("li", { "data-reached": t.reached, style: { left: `${t.position}%` }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.label }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.threshold }),
+      t.reached && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-sf-sr-only": true, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: " \u2713" })
+    ] }, t.id)) })
+  ] });
+}
+function CartProgressBars({ promotions, locale: localeProp, messages, showMilestones = true, className }) {
+  const locale = useResolvedLocale(localeProp);
+  const view = react.useMemo(() => storefront.promoProgressView(promotions, locale, messages), [promotions, locale, messages]);
+  const m = storefront.promotionMessages(locale, messages);
+  if (!view.discount && !view.shipping) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-sf-promo-bars": true, children: [
+    view.discount && /* @__PURE__ */ jsxRuntime.jsx(
+      PromoProgressBar,
+      {
+        kind: "discount",
+        state: view.discount.state,
+        text: view.discount.text,
+        percent: view.discount.percent,
+        label: m["bar.discount"],
+        ...showMilestones ? { milestones: view.discount.tiers } : {}
+      }
+    ),
+    view.shipping && /* @__PURE__ */ jsxRuntime.jsx(PromoProgressBar, { kind: "shipping", state: view.shipping.state, text: view.shipping.text, percent: view.shipping.percent, label: m["bar.shipping"], showBar: view.shipping.showBar })
+  ] });
+}
+function CrossSellModal(props) {
+  const { open, promotions, recommendations, totalSaved, onAdd, onContinue, onSkip, messages, renderImage, className } = props;
+  const locale = useResolvedLocale(props.locale);
+  const m = storefront.promotionMessages(locale, messages);
+  const titleId = react.useId();
+  const descId = react.useId();
+  const view = react.useMemo(() => storefront.promoProgressView(promotions, locale, messages).discount, [promotions, locale, messages]);
+  const { ref, onBackdropClick } = useModalDialog({ open, onClose: (r) => onSkip(r === "esc" ? "esc" : r === "x" ? "x" : "backdrop") });
+  const nextTier = promotions?.next_tier ?? null;
+  const max = !!promotions && !nextTier && !!promotions.applied;
+  if (!open) return null;
+  const f = storefront.formatAvailabilityMessage;
+  return /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref, className, "aria-labelledby": titleId, "aria-describedby": descId, onClick: onBackdropClick, "data-sf-crosssell": true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-sf-crosssell-body": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onSkip("x"), "aria-label": m["popup.close"], "data-sf-crosssell-close": true, style: { minWidth: 44, minHeight: 44 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xD7" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-crosssell-eyebrow": true, children: m["upsell.subtitle"] }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, tabIndex: -1, "data-sf-autofocus": true, children: m["upsell.title"] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { id: descId, "data-sf-crosssell-level": true, "aria-live": "polite", children: [
+      nextTier ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-crosssell-next": true, children: m["upsell.next_level"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: f(m["upsell.you_miss"], { remaining: storefront.formatMoney(nextTier.remaining, locale, { withoutTrailingZeros: true }) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: f(m["upsell.unlocks_reward"], { reward: storefront.rewardLabel(nextTier.reward, locale, messages) }) })
+      ] }) : max && promotions?.applied ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-crosssell-best": true, children: f(m["upsell.best"], { reward: storefront.rewardLabel(promotions.applied.reward, locale, messages) }) }) : null,
+      promotions?.applied && nextTier && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-crosssell-unlocked": true, children: f(m["upsell.unlocked"], { reward: storefront.rewardLabel(promotions.applied.reward, locale, messages) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("dl", { "data-sf-crosssell-summary": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: m["upsell.total_saved"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { children: storefront.formatMoney(totalSaved, locale, { withoutTrailingZeros: true }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: m["upsell.current_benefit"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { children: storefront.rewardLabel(promotions?.applied?.reward ?? { kind: "percent", percent: "0" }, locale, messages) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: m["upsell.status"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { children: promotions?.applied ? m["upsell.status_active"] : m["upsell.status_pending"] })
+      ] })
+    ] }),
+    view && /* @__PURE__ */ jsxRuntime.jsx(PromoProgressBar, { kind: "discount", state: view.state, text: view.text, percent: view.percent, label: m["bar.discount"], milestones: view.tiers }),
+    nextTier && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-crosssell-next-reward": true, children: f(m["upsell.next_reward"], {
+      reward: storefront.rewardLabel(nextTier.reward, locale, messages),
+      threshold: storefront.formatMoney(nextTier.threshold, locale, { withoutTrailingZeros: true })
+    }) }),
+    !max && recommendations.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": m["upsell.suggestions"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: m["upsell.suggestions"] }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { "data-sf-crosssell-cards": true, children: recommendations.map((rec) => /* @__PURE__ */ jsxRuntime.jsx(RecommendationCard, { rec, onAdd, locale, messages, ...renderImage ? { renderImage } : {} }, rec.product.id)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-crosssell-footer": true, children: m["upsell.footer"] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-sf-crosssell-actions": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onSkip("skip"), style: { minHeight: 44 }, "data-sf-crosssell-skip": true, children: m["upsell.skip"] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: onContinue, style: { minHeight: 44 }, "data-sf-crosssell-continue": true, children: [
+        m["upsell.continue"],
+        " \u2192"
+      ] })
+    ] })
+  ] }) });
+}
+function RecommendationCard({
+  rec,
+  onAdd,
+  locale,
+  messages,
+  renderImage
+}) {
+  const m = storefront.promotionMessages(locale, messages);
+  const selectId = react.useId();
+  const [variantId, setVariantId] = react.useState(rec.variants.some((v) => v.id === rec.default_variant_id) ? rec.default_variant_id : rec.variants[0]?.id ?? "");
+  const [busy, setBusy] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const inFlight = react.useRef(false);
+  const variant = rec.variants.find((v) => v.id === variantId) ?? rec.variants[0];
+  const image = rec.product.featured_image;
+  if (variant && variant.id !== variantId) setVariantId(variant.id);
+  if (!variant) return null;
+  async function add() {
+    if (inFlight.current || !variant) return;
+    inFlight.current = true;
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await onAdd({ productId: rec.product.id, variantId: variant.id, recommendation: rec });
+      if (r && (r.ok === false || r.error)) setError(r.error === "sold_out" ? m["upsell.sold_out"] : m["upsell.error"]);
+    } catch {
+      setError(m["upsell.error"]);
+    } finally {
+      inFlight.current = false;
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { "data-sf-crosssell-card": true, children: [
+    renderImage ? renderImage(rec) : image ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.url, alt: image.alt ?? rec.product.title, width: 160, loading: "lazy", decoding: "async" }) : null,
+    rec.unlocks && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-crosssell-unlocks": true, children: storefront.formatAvailabilityMessage(m["upsell.unlocks_badge"], { reward: storefront.rewardLabel(rec.unlocks.reward, locale, messages) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-crosssell-name": true, children: rec.product.title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-crosssell-price": true, children: storefront.formatMoney(variant.price, locale, { withoutTrailingZeros: true }) }),
+    rec.variants.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: selectId, children: m["upsell.flavor"] }),
+      /* @__PURE__ */ jsxRuntime.jsx("select", { id: selectId, value: variant.id, onChange: (e) => setVariantId(e.target.value), style: { minHeight: 44 }, children: rec.variants.map((v) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: v.id, children: v.title }, v.id)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void add(), "aria-busy": busy, "aria-disabled": busy, style: { minHeight: 44 }, "data-sf-crosssell-add": true, children: busy ? m["upsell.adding"] : m["upsell.add"] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", "data-sf-crosssell-error": true, children: error })
+  ] });
+}
+function OrderNote({ value, onSave, debounceMs = 800, form, locale: localeProp, messages, className, maxLength = storefront.NOTE_MAX_LENGTH }) {
+  const locale = useResolvedLocale(localeProp);
+  const m = storefront.promotionMessages(locale, messages);
+  const id = react.useId();
+  const [text, setText] = react.useState(value ?? "");
+  const [status, setStatus] = react.useState("idle");
+  const [hydrated, setHydrated] = react.useState(false);
+  const saved = react.useRef(storefront.normalizeNote(value));
+  const timer = react.useRef(null);
+  const seq = react.useRef(0);
+  const latest = react.useRef({ text, onSave });
+  latest.current = { text, onSave };
+  react.useEffect(() => setHydrated(true), []);
+  react.useEffect(() => {
+    if (status === "dirty" || status === "saving") return;
+    const incoming = value ?? "";
+    if (storefront.normalizeNote(incoming) !== storefront.normalizeNote(latest.current.text)) setText(incoming);
+    saved.current = storefront.normalizeNote(value);
+  }, [value]);
+  react.useEffect(() => () => void (timer.current && clearTimeout(timer.current)), []);
+  async function flush() {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    const next = storefront.normalizeNote(latest.current.text);
+    if (next === saved.current) {
+      setStatus((s) => s === "dirty" ? "idle" : s);
+      return;
+    }
+    const mine = ++seq.current;
+    setStatus("saving");
+    try {
+      await latest.current.onSave(next);
+      if (mine !== seq.current) return;
+      saved.current = next;
+      setStatus("saved");
+    } catch {
+      if (mine === seq.current) setStatus("error");
+    }
+  }
+  function onChange(v) {
+    setText(v.slice(0, maxLength));
+    setStatus("dirty");
+    if (debounceMs !== false) {
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => void flush(), debounceMs);
+    }
+  }
+  const statusText = status === "saving" ? m["note.saving"] : status === "saved" ? m["note.saved"] : status === "error" ? m["note.error"] : "";
+  const field = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, children: m["note.label"] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        id,
+        name: "note",
+        value: text,
+        maxLength,
+        placeholder: m["note.placeholder"],
+        onChange: (e) => onChange(e.target.value),
+        onBlur: () => void flush(),
+        "aria-describedby": `${id}-s`,
+        rows: 3
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-c`, "data-sf-note-counter": true, children: storefront.formatAvailabilityMessage(m["note.counter"], { n: text.length, max: maxLength }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-s`, role: status === "error" ? "alert" : "status", "aria-live": "polite", "data-sf-note-status": status, children: statusText })
+  ] });
+  if (!form) return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-sf-order-note": true, children: field });
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { method: form.method ?? "post", ...form.action ? { action: form.action } : {}, className, "data-sf-order-note": true, onSubmit: (e) => hydrated && e.preventDefault(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: form.intentName ?? "intent", value: form.intent ?? "note" }),
+    field,
+    !hydrated && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", children: m["note.save"] })
+  ] });
+}
+
+exports.CartProgressBars = CartProgressBars;
+exports.CrossSellModal = CrossSellModal;
+exports.DEFAULT_PROMO_EXCLUDED_PATHS = DEFAULT_PROMO_EXCLUDED_PATHS;
+exports.DEFAULT_PROMO_TRIGGER = DEFAULT_PROMO_TRIGGER;
+exports.OrderNote = OrderNote;
+exports.PROMO_COOKIE = PROMO_COOKIE;
+exports.PromoPopup = PromoPopup;
+exports.PromoProgressBar = PromoProgressBar;
+exports.browserSeenStore = browserSeenStore;
+exports.frequencyAllows = frequencyAllows;
+exports.isCrawler = isCrawler;
+exports.isExcludedPath = isExcludedPath;
+exports.memorySeenStore = memorySeenStore;
+exports.parseSeen = parseSeen;
+exports.resolveTrigger = resolveTrigger;
+exports.safeInternalPath = safeInternalPath;
+exports.scrollDepthPercent = scrollDepthPercent;
+exports.serializeSeen = serializeSeen;
+exports.stripMarketPrefix = stripMarketPrefix;
+exports.withinWindow = withinWindow;
+//# sourceMappingURL=promotions.cjs.map
+//# sourceMappingURL=promotions.cjs.map