@loczer/storefront-sdk 0.181.0 → 0.182.0

package/dist/components/StorefrontPopupMessages/index.js

@@ -1,172 +1,194 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { useState as S, useEffect as $ } from "react";
-import { ResponsiveDialog as R, ResponsiveDialogContent as E, ResponsiveDialogHeader as D, ResponsiveDialogTitle as I, ResponsiveDialogDescription as P, ResponsiveDialogFooter as O } from "../../chunks/ui/dist/ResponsiveDialog-CYvYFO09.js";
-import { useParams as j, useLocation as z } from "@rpcbase/router";
-import { cn as x } from "@rpcbase/ui";
-import { X as H, Info as L } from "lucide-react";
-import { useTranslation as A } from "react-i18next";
-import { buildStorefrontImageUrl as U } from "../../lib/storefrontImage.js";
-import { isAutomationRuntime as C } from "../../lib/isAutomationRuntime.js";
-import { getLocalizedValue as T, getLocalizedEntry as F } from "../../localization.js";
-import { Button as V } from "../../ui/button.js";
-const Z = "loczer-storefront-popup-message-dismissed", k = (e, s) => `${Z}:${e || "storefront"}:${s}`, M = (e) => {
-  if (typeof window > "u") return null;
-  try {
-    return e ? window.sessionStorage : window.localStorage;
-  } catch {
-    return null;
-  }
-}, B = ({
-  dismissedMessageKeys: e,
-  message: s,
-  storeSlug: n
-}) => {
-  const l = k(n, s.id);
-  if (e.has(l)) return !0;
-  const r = M(s.showOnEachVisit);
-  if (!r) return !1;
-  try {
-    return r.getItem(l) === "1";
-  } catch {
-    return !1;
-  }
-}, X = (e) => {
-  const s = M(e.showOnEachVisit);
-  if (s)
-    try {
-      s.setItem(e.storageKey, "1");
-    } catch {
-    }
-}, q = (e) => {
-  const s = String(e.getFullYear()).padStart(4, "0"), n = String(e.getMonth() + 1).padStart(2, "0"), l = String(e.getDate()).padStart(2, "0");
-  return `${s}-${n}-${l}`;
-}, G = (e) => {
-  const s = /* @__PURE__ */ new Date(), n = e?.trim();
-  if (n)
-    try {
-      const l = new Intl.DateTimeFormat("en", {
-        day: "2-digit",
-        month: "2-digit",
-        timeZone: n,
-        year: "numeric"
-      }).formatToParts(s), r = l.find((i) => i.type === "year")?.value, c = l.find((i) => i.type === "month")?.value, d = l.find((i) => i.type === "day")?.value;
-      if (r && c && d)
-        return `${r}-${c}-${d}`;
-    } catch {
-    }
-  return q(s);
-}, Y = (e, s) => !(!e.enabled || e.startDate && e.startDate > s || e.endDate && e.endDate < s), J = ({
-  fallbackTitle: e,
-  fallbackLanguage: s,
-  language: n,
-  message: l,
-  storeSlug: r
-}) => {
-  const c = T(l.title, n, s).trim(), d = T(l.subtitle, n, s).trim(), i = F(l.message, n, s), u = i?.html?.trim() ?? "", p = i?.text?.trim() ?? "", h = l.imageIds.map((g) => U(g, r)).filter((g) => g.length > 0);
-  return !c && !d && !u && h.length === 0 ? null : {
-    id: l.id,
-    title: c || e,
-    subtitle: d,
-    messageHtml: u,
-    messageText: p,
-    imageUrls: h,
-    showOnEachVisit: l.showOnEachVisit,
-    storageKey: k(r, l.id)
-  };
-}, Q = "absolute right-5 top-5 z-10 flex h-9 w-9 items-center justify-center rounded-full bg-white/12 text-white/75 ring-1 ring-white/75 backdrop-blur-lg transition hover:bg-white/18 hover:text-white/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/85";
-function de({ storefrontConfiguration: e }) {
-  const { t: s, i18n: n } = A(), { storeSlug: l } = j(), r = z(), [c, d] = S(null), [i, u] = S(() => /* @__PURE__ */ new Set()), p = l?.trim() || e?.storeSlug || "", h = new URLSearchParams(r.search).get("popup_e2e") === "1", K = C() && !h ? [] : e?.content?.modalMessages ?? [];
-  $(() => {
-    const a = () => {
-      d(G(e?.shop.timeZone));
-    };
-    a();
-    const b = window.setInterval(a, 6e4);
-    return () => window.clearInterval(b);
-  }, [e?.shop.timeZone]);
-  const o = c ? K.filter((a) => Y(a, c)).filter((a) => !B({ dismissedMessageKeys: i, message: a, storeSlug: p })).map((a) => J({
-    fallbackTitle: s("storefront_popup_title_fallback"),
-    fallbackLanguage: e?.workspace?.workspaceLanguage,
-    language: n.language,
-    message: a,
-    storeSlug: p
-  })).find((a) => a !== null) ?? null : null, f = (a) => {
-    a || !o || (X(o), u((b) => {
-      const N = new Set(b);
-      return N.add(o.storageKey), N;
-    }));
-  };
-  if (!o)
-    return null;
-  const [w, ...y] = o.imageUrls, v = !!w, _ = o.subtitle || o.messageText || o.title;
-  return /* @__PURE__ */ t(R, { open: !!o, onOpenChange: f, children: /* @__PURE__ */ t(
-    E,
-    {
-      "data-testid": "storefront-popup-modal-content",
-      showCloseButton: !1,
-      className: "overflow-hidden border-0 bg-white p-0 shadow-2xl",
-      desktopClassName: "max-w-xl gap-0",
-      mobileClassName: "max-h-[92dvh] gap-0",
-      children: /* @__PURE__ */ m("div", { "data-testid": "storefront-popup-modal", className: "flex max-h-[90dvh] w-full min-w-0 flex-col", children: [
-        v ? /* @__PURE__ */ t(D, { className: "w-full p-0 text-left", children: /* @__PURE__ */ m("div", { className: "relative aspect-[17/7] min-h-52 w-full overflow-hidden border-b border-slate-200 sm:aspect-[17/6]", children: [
-          /* @__PURE__ */ t(
-            "button",
-            {
-              type: "button",
-              className: Q,
-              "aria-label": s("close_modal"),
-              onClick: () => f(!1),
-              children: /* @__PURE__ */ t(H, { className: "h-4 w-4", "aria-hidden": "true" })
-            }
-          ),
-          /* @__PURE__ */ t(
-            "img",
-            {
-              src: w,
-              alt: "",
-              className: "absolute inset-0 h-full w-full object-cover object-center",
-              loading: "lazy"
-            }
-          ),
-          /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-[linear-gradient(180deg,rgba(2,6,23,0.04)_0%,rgba(15,23,42,0.22)_42%,rgba(15,23,42,0.9)_100%)]" }),
-          /* @__PURE__ */ m("div", { className: "absolute inset-x-0 bottom-0 px-5 pb-5 sm:px-6", children: [
-            /* @__PURE__ */ t(I, { className: "max-w-[28rem] text-left text-3xl font-semibold leading-tight text-white", children: /* @__PURE__ */ t("span", { children: o.title }) }),
-            /* @__PURE__ */ t(P, { className: x("mt-2 max-w-[30rem] text-left text-sm leading-6 text-white/85", !o.subtitle && "sr-only"), children: /* @__PURE__ */ t("span", { children: _ }) })
-          ] })
-        ] }) }) : /* @__PURE__ */ t(D, { className: "border-b border-slate-200 px-5 py-4 text-left sm:px-6", children: /* @__PURE__ */ m("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ t("span", { className: "mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-950 text-white", children: /* @__PURE__ */ t(L, { className: "h-4 w-4", "aria-hidden": "true" }) }),
-          /* @__PURE__ */ m("span", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ t(I, { className: "text-left text-lg font-semibold leading-6 text-slate-950", children: /* @__PURE__ */ t("span", { children: o.title }) }),
-            /* @__PURE__ */ t(P, { className: x("text-left text-sm text-slate-600", !o.subtitle && "sr-only"), children: /* @__PURE__ */ t("span", { children: _ }) })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ t("div", { className: "overflow-y-auto px-5 py-5 sm:px-6", children: /* @__PURE__ */ m("div", { className: "grid gap-5", children: [
-          v && y.length > 0 ? /* @__PURE__ */ t("div", { className: "grid grid-cols-3 gap-2", children: y.slice(0, 3).map((a) => /* @__PURE__ */ t("div", { className: "overflow-hidden rounded-lg border border-slate-200 bg-slate-50", children: /* @__PURE__ */ t("img", { src: a, alt: "", className: "aspect-[4/3] h-full w-full object-cover", loading: "lazy" }) }, a)) }) : null,
-          o.messageHtml ? /* @__PURE__ */ t(
-            "div",
-            {
-              className: x(
-                "text-sm leading-6 text-slate-700 [&_a]:text-slate-950 [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-slate-300 [&_blockquote]:pl-4 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold [&_li]:my-1 [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:my-2 [&_ul]:list-disc [&_ul]:pl-6",
-                !o.subtitle && "text-base leading-7"
-              ),
-              dangerouslySetInnerHTML: { __html: o.messageHtml }
-            }
-          ) : null
-        ] }) }),
-        /* @__PURE__ */ t(O, { className: "border-t border-slate-200 px-5 py-4 sm:px-6", children: /* @__PURE__ */ t(
-          V,
-          {
-            type: "button",
-            variant: "outline",
-            className: "h-11 w-full rounded-xl sm:w-auto",
-            onClick: () => f(!1),
-            children: /* @__PURE__ */ t("span", { children: s("close_modal") })
-          }
-        ) })
-      ] })
-    }
-  ) });
+import { getLocalizedEntry as e, getLocalizedValue as t } from "../../localization.js";
+import { buildStorefrontImageUrl as n } from "../../lib/storefrontImage.js";
+import { Button as r } from "../../ui/button.js";
+import { isAutomationRuntime as i } from "../../lib/isAutomationRuntime.js";
+import { ResponsiveDialog as a, ResponsiveDialogContent as o, ResponsiveDialogDescription as s, ResponsiveDialogFooter as c, ResponsiveDialogHeader as l, ResponsiveDialogTitle as u } from "../../chunks/ui/dist/ResponsiveDialog-3nJFjDos.js";
+import { useEffect as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { cn as h } from "@rpcbase/ui";
+import { useLocation as g, useParams as _ } from "@rpcbase/router";
+import { useTranslation as v } from "react-i18next";
+import { Info as y, X as b } from "lucide-react";
+//#region src/components/StorefrontPopupMessages/index.tsx
+var x = "loczer-storefront-popup-message-dismissed", S = (e, t) => `${x}:${e || "storefront"}:${t}`, C = (e) => {
+	if (typeof window > "u") return null;
+	try {
+		return e ? window.sessionStorage : window.localStorage;
+	} catch {
+		return null;
+	}
+}, w = ({ dismissedMessageKeys: e, message: t, storeSlug: n }) => {
+	let r = S(n, t.id);
+	if (e.has(r)) return !0;
+	let i = C(t.showOnEachVisit);
+	if (!i) return !1;
+	try {
+		return i.getItem(r) === "1";
+	} catch {
+		return !1;
+	}
+}, T = (e) => {
+	let t = C(e.showOnEachVisit);
+	if (t) try {
+		t.setItem(e.storageKey, "1");
+	} catch {}
+}, E = (e) => `${String(e.getFullYear()).padStart(4, "0")}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`, D = (e) => {
+	let t = /* @__PURE__ */ new Date(), n = e?.trim();
+	if (n) try {
+		let e = new Intl.DateTimeFormat("en", {
+			day: "2-digit",
+			month: "2-digit",
+			timeZone: n,
+			year: "numeric"
+		}).formatToParts(t), r = e.find((e) => e.type === "year")?.value, i = e.find((e) => e.type === "month")?.value, a = e.find((e) => e.type === "day")?.value;
+		if (r && i && a) return `${r}-${i}-${a}`;
+	} catch {}
+	return E(t);
+}, O = (e, t) => !(!e.enabled || e.startDate && e.startDate > t || e.endDate && e.endDate < t), k = ({ fallbackTitle: r, fallbackLanguage: i, language: a, message: o, storeSlug: s }) => {
+	let c = t(o.title, a, i).trim(), l = t(o.subtitle, a, i).trim(), u = e(o.message, a, i), d = u?.html?.trim() ?? "", f = u?.text?.trim() ?? "", p = o.imageIds.map((e) => n(e, s)).filter((e) => e.length > 0);
+	return !c && !l && !d && p.length === 0 ? null : {
+		id: o.id,
+		title: c || r,
+		subtitle: l,
+		messageHtml: d,
+		messageText: f,
+		imageUrls: p,
+		showOnEachVisit: o.showOnEachVisit,
+		storageKey: S(s, o.id)
+	};
+}, A = "absolute right-5 top-5 z-10 flex h-9 w-9 items-center justify-center rounded-full bg-white/12 text-white/75 ring-1 ring-white/75 backdrop-blur-lg transition hover:bg-white/18 hover:text-white/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/85";
+function j({ storefrontConfiguration: e }) {
+	let { t, i18n: n } = v(), { storeSlug: x } = _(), S = g(), [C, E] = f(null), [j, M] = f(() => /* @__PURE__ */ new Set()), N = x?.trim() || e?.storeSlug || "", P = new URLSearchParams(S.search).get("popup_e2e") === "1", F = i() && !P ? [] : e?.content?.modalMessages ?? [];
+	d(() => {
+		let t = () => {
+			E(D(e?.shop.timeZone));
+		};
+		t();
+		let n = window.setInterval(t, 6e4);
+		return () => window.clearInterval(n);
+	}, [e?.shop.timeZone]);
+	let I = C ? F.filter((e) => O(e, C)).filter((e) => !w({
+		dismissedMessageKeys: j,
+		message: e,
+		storeSlug: N
+	})).map((r) => k({
+		fallbackTitle: t("storefront_popup_title_fallback"),
+		fallbackLanguage: e?.workspace?.workspaceLanguage,
+		language: n.language,
+		message: r,
+		storeSlug: N
+	})).find((e) => e !== null) ?? null : null, L = (e) => {
+		e || !I || (T(I), M((e) => {
+			let t = new Set(e);
+			return t.add(I.storageKey), t;
+		}));
+	};
+	if (!I) return null;
+	let [R, ...z] = I.imageUrls, B = !!R, V = I.subtitle || I.messageText || I.title;
+	return /* @__PURE__ */ p(a, {
+		open: !!I,
+		onOpenChange: L,
+		children: /* @__PURE__ */ p(o, {
+			"data-testid": "storefront-popup-modal-content",
+			showCloseButton: !1,
+			className: "overflow-hidden border-0 bg-white p-0 shadow-2xl",
+			desktopClassName: "max-w-xl gap-0",
+			mobileClassName: "max-h-[92dvh] gap-0",
+			children: /* @__PURE__ */ m("div", {
+				"data-testid": "storefront-popup-modal",
+				className: "flex max-h-[90dvh] w-full min-w-0 flex-col",
+				children: [
+					B ? /* @__PURE__ */ p(l, {
+						className: "w-full p-0 text-left",
+						children: /* @__PURE__ */ m("div", {
+							className: "relative aspect-[17/7] min-h-52 w-full overflow-hidden border-b border-slate-200 sm:aspect-[17/6]",
+							children: [
+								/* @__PURE__ */ p("button", {
+									type: "button",
+									className: A,
+									"aria-label": t("close_modal"),
+									onClick: () => L(!1),
+									children: /* @__PURE__ */ p(b, {
+										className: "h-4 w-4",
+										"aria-hidden": "true"
+									})
+								}),
+								/* @__PURE__ */ p("img", {
+									src: R,
+									alt: "",
+									className: "absolute inset-0 h-full w-full object-cover object-center",
+									loading: "lazy"
+								}),
+								/* @__PURE__ */ p("div", { className: "absolute inset-0 bg-[linear-gradient(180deg,rgba(2,6,23,0.04)_0%,rgba(15,23,42,0.22)_42%,rgba(15,23,42,0.9)_100%)]" }),
+								/* @__PURE__ */ m("div", {
+									className: "absolute inset-x-0 bottom-0 px-5 pb-5 sm:px-6",
+									children: [/* @__PURE__ */ p(u, {
+										className: "max-w-[28rem] text-left text-3xl font-semibold leading-tight text-white",
+										children: /* @__PURE__ */ p("span", { children: I.title })
+									}), /* @__PURE__ */ p(s, {
+										className: h("mt-2 max-w-[30rem] text-left text-sm leading-6 text-white/85", !I.subtitle && "sr-only"),
+										children: /* @__PURE__ */ p("span", { children: V })
+									})]
+								})
+							]
+						})
+					}) : /* @__PURE__ */ p(l, {
+						className: "border-b border-slate-200 px-5 py-4 text-left sm:px-6",
+						children: /* @__PURE__ */ m("div", {
+							className: "flex items-start gap-3",
+							children: [/* @__PURE__ */ p("span", {
+								className: "mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-950 text-white",
+								children: /* @__PURE__ */ p(y, {
+									className: "h-4 w-4",
+									"aria-hidden": "true"
+								})
+							}), /* @__PURE__ */ m("span", {
+								className: "min-w-0 space-y-1",
+								children: [/* @__PURE__ */ p(u, {
+									className: "text-left text-lg font-semibold leading-6 text-slate-950",
+									children: /* @__PURE__ */ p("span", { children: I.title })
+								}), /* @__PURE__ */ p(s, {
+									className: h("text-left text-sm text-slate-600", !I.subtitle && "sr-only"),
+									children: /* @__PURE__ */ p("span", { children: V })
+								})]
+							})]
+						})
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "overflow-y-auto px-5 py-5 sm:px-6",
+						children: /* @__PURE__ */ m("div", {
+							className: "grid gap-5",
+							children: [B && z.length > 0 ? /* @__PURE__ */ p("div", {
+								className: "grid grid-cols-3 gap-2",
+								children: z.slice(0, 3).map((e) => /* @__PURE__ */ p("div", {
+									className: "overflow-hidden rounded-lg border border-slate-200 bg-slate-50",
+									children: /* @__PURE__ */ p("img", {
+										src: e,
+										alt: "",
+										className: "aspect-[4/3] h-full w-full object-cover",
+										loading: "lazy"
+									})
+								}, e))
+							}) : null, I.messageHtml ? /* @__PURE__ */ p("div", {
+								className: h("text-sm leading-6 text-slate-700 [&_a]:text-slate-950 [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-slate-300 [&_blockquote]:pl-4 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold [&_li]:my-1 [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:my-2 [&_ul]:list-disc [&_ul]:pl-6", !I.subtitle && "text-base leading-7"),
+								dangerouslySetInnerHTML: { __html: I.messageHtml }
+							}) : null]
+						})
+					}),
+					/* @__PURE__ */ p(c, {
+						className: "border-t border-slate-200 px-5 py-4 sm:px-6",
+						children: /* @__PURE__ */ p(r, {
+							type: "button",
+							variant: "outline",
+							className: "h-11 w-full rounded-xl sm:w-auto",
+							onClick: () => L(!1),
+							children: /* @__PURE__ */ p("span", { children: t("close_modal") })
+						})
+					})
+				]
+			})
+		})
+	});
 }
-export {
-  de as StorefrontPopupMessages
-};
+//#endregion
+export { j as StorefrontPopupMessages };