@tiendanube/live-state 1.1.0 → 1.3.0

package/dist/index.js

@@ -5,7 +5,7 @@ import { jsx as D, jsxs as O } from "react/jsx-runtime";
 import { Alert as ee, Box as k, Button as te, Card as ne, Icon as re, Link as ie, Text as A } from "@nimbus-ds/components";
 import { CloseIcon as ae, MoneyIcon as oe } from "@nimbus-ds/icons";
 //#region node_modules/@tanstack/query-core/build/modern/queryObserver.js
-var j = class extends n {
+var se = class extends n {
 	constructor(e, t) {
 		super(), this.options = t, this.#e = e, this.#s = null, this.#o = h(), this.bindMethods(), this.setOptions(t);
 	}
@@ -28,16 +28,16 @@ var j = class extends n {
 		this.refetch = this.refetch.bind(this);
 	}
 	onSubscribe() {
-		this.listeners.size === 1 && (this.#t.addObserver(this), M(this.#t, this.options) ? this.#h() : this.updateResult(), this.#y());
+		this.listeners.size === 1 && (this.#t.addObserver(this), j(this.#t, this.options) ? this.#h() : this.updateResult(), this.#y());
 	}
 	onUnsubscribe() {
 		this.hasListeners() || this.destroy();
 	}
 	shouldFetchOnReconnect() {
-		return N(this.#t, this.options, this.options.refetchOnReconnect);
+		return M(this.#t, this.options, this.options.refetchOnReconnect);
 	}
 	shouldFetchOnWindowFocus() {
-		return N(this.#t, this.options, this.options.refetchOnWindowFocus);
+		return M(this.#t, this.options, this.options.refetchOnWindowFocus);
 	}
 	destroy() {
 		this.listeners = /* @__PURE__ */ new Set(), this.#b(), this.#x(), this.#t.removeObserver(this);
@@ -51,13 +51,13 @@ var j = class extends n {
 			observer: this
 		});
 		let r = this.hasListeners();
-		r && P(this.#t, n, this.options, t) && this.#h(), this.updateResult(), r && (this.#t !== n || y(this.options.enabled, this.#t) !== y(t.enabled, this.#t) || S(this.options.staleTime, this.#t) !== S(t.staleTime, this.#t)) && this.#g();
+		r && N(this.#t, n, this.options, t) && this.#h(), this.updateResult(), r && (this.#t !== n || y(this.options.enabled, this.#t) !== y(t.enabled, this.#t) || S(this.options.staleTime, this.#t) !== S(t.staleTime, this.#t)) && this.#g();
 		let i = this.#_();
 		r && (this.#t !== n || y(this.options.enabled, this.#t) !== y(t.enabled, this.#t) || i !== this.#p) && this.#v(i);
 	}
 	getOptimisticResult(e) {
 		let t = this.#e.getQueryCache().build(this.#e, e), n = this.createResult(t, e);
-		return ce(this, n) && (this.#r = n, this.#a = this.options, this.#i = this.#t.state), n;
+		return le(this, n) && (this.#r = n, this.#a = this.options, this.#i = this.#t.state), n;
 	}
 	getCurrentResult() {
 		return this.#r;
@@ -118,7 +118,7 @@ var j = class extends n {
 	createResult(e, t) {
 		let n = this.#t, i = this.options, a = this.#r, s = this.#i, c = this.#a, l = e === n ? this.#n : e.state, { state: u } = e, d = { ...u }, f = !1, p;
 		if (t._optimisticResults) {
-			let r = this.hasListeners(), a = !r && M(e, t), s = r && P(e, n, t, i);
+			let r = this.hasListeners(), a = !r && j(e, t), s = r && N(e, n, t, i);
 			(a || s) && (d = {
 				...d,
 				...o(u.data, e.options)
@@ -161,7 +161,7 @@ var j = class extends n {
 			isPaused: d.fetchStatus === "paused",
 			isPlaceholderData: f,
 			isRefetchError: S && w,
-			isStale: F(e, t),
+			isStale: P(e, t),
 			refetch: this.refetch,
 			promise: this.#o,
 			isEnabled: y(t.enabled, e) !== !1
@@ -219,35 +219,35 @@ var j = class extends n {
 		});
 	}
 };
-function se(e, t) {
+function ce(e, t) {
 	return y(t.enabled, e) !== !1 && e.state.data === void 0 && !(e.state.status === "error" && y(t.retryOnMount, e) === !1);
 }
-function M(e, t) {
-	return se(e, t) || e.state.data !== void 0 && N(e, t, t.refetchOnMount);
+function j(e, t) {
+	return ce(e, t) || e.state.data !== void 0 && M(e, t, t.refetchOnMount);
 }
-function N(e, t, n) {
+function M(e, t, n) {
 	if (y(t.enabled, e) !== !1 && S(t.staleTime, e) !== "static") {
 		let r = typeof n == "function" ? n(e) : n;
-		return r === "always" || r !== !1 && F(e, t);
+		return r === "always" || r !== !1 && P(e, t);
 	}
 	return !1;
 }
-function P(e, t, n, r) {
-	return (e !== t || y(r.enabled, e) === !1) && (!n.suspense || e.state.status !== "error") && F(e, n);
+function N(e, t, n, r) {
+	return (e !== t || y(r.enabled, e) === !1) && (!n.suspense || e.state.status !== "error") && P(e, n);
 }
-function F(e, t) {
+function P(e, t) {
 	return y(t.enabled, e) !== !1 && e.isStaleByTime(S(t.staleTime, e));
 }
-function ce(e, t) {
+function le(e, t) {
 	return !a(e.getCurrentResult(), t);
 }
 //#endregion
 //#region node_modules/@tanstack/react-query/build/modern/IsRestoringProvider.js
-var I = C.createContext(!1), le = () => C.useContext(I);
-I.Provider;
+var F = C.createContext(!1), ue = () => C.useContext(F);
+F.Provider;
 //#endregion
 //#region node_modules/@tanstack/react-query/build/modern/QueryErrorResetBoundary.js
-function ue() {
+function de() {
 	let e = !1;
 	return {
 		clearReset: () => {
@@ -259,7 +259,7 @@ function ue() {
 		isReset: () => e
 	};
 }
-var de = C.createContext(ue()), L = () => C.useContext(de), R = (e, t, n) => {
+var I = C.createContext(de()), L = () => C.useContext(I), R = (e, t, n) => {
 	let r = n?.state.error && typeof e.throwOnError == "function" ? x(e.throwOnError, [n.state.error, n]) : e.throwOnError;
 	(e.suspense || e.experimental_prefetchInRender || r) && (t.isReset() || (e.retryOnMount = !1));
 }, z = (e) => {
@@ -276,9 +276,9 @@ var de = C.createContext(ue()), L = () => C.useContext(de), R = (e, t, n) => {
 });
 //#endregion
 //#region node_modules/@tanstack/react-query/build/modern/useBaseQuery.js
-function U(e, t, n) {
+function me(e, t, n) {
 	if (process.env.NODE_ENV !== "production" && (typeof e != "object" || Array.isArray(e))) throw Error("Bad argument type. Starting with v5, only the \"Object\" form is allowed when calling query related functions. Please use the error stack to find the culprit call. More info here: https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object");
-	let r = le(), i = L(), a = d(n), o = a.defaultQueryOptions(e);
+	let r = ue(), i = L(), a = d(n), o = a.defaultQueryOptions(e);
 	a.getDefaultOptions().queries?._experimental_beforeQuery?.(o);
 	let l = a.getQueryCache().get(o.queryHash);
 	process.env.NODE_ENV !== "production" && (o.queryFn || console.error(`[${o.queryHash}]: No queryFn was passed as an option, and no default queryFn was found. The queryFn parameter is only optional when using a default queryFn. More info here: https://tanstack.com/query/latest/docs/framework/react/guides/default-query-function`)), o._optimisticResults = r ? "isRestoring" : "optimistic", V(o), R(o, i, l), z(i);
@@ -302,27 +302,27 @@ function U(e, t, n) {
 }
 //#endregion
 //#region node_modules/@tanstack/react-query/build/modern/useQuery.js
-function me(e, t) {
-	return U(e, j, t);
+function he(e, t) {
+	return me(e, se, t);
 }
 //#endregion
 //#region src/utils/query.ts
-var W = ["live-state"];
-async function he(e) {
+var U = ["live-state"];
+async function ge(e) {
 	await _.prefetchQuery({
-		queryKey: W,
+		queryKey: U,
 		queryFn: ({ signal: t }) => e({ signal: t }),
 		staleTime: 6e4
 	});
 }
-async function ge() {
-	await _.invalidateQueries({ queryKey: W });
+async function _e() {
+	await _.invalidateQueries({ queryKey: U });
 }
 //#endregion
 //#region src/hooks/useLiveState.ts
-function _e() {
-	let { fetcher: e, mockData: t, refetchInterval: n, log: r } = p(), i = t !== void 0, { data: a, error: o, isLoading: s, refetch: c } = me({
-		queryKey: W,
+function ve() {
+	let { fetcher: e, mockData: t, refetchInterval: n, log: r } = p(), i = t !== void 0, { data: a, error: o, isLoading: s, refetch: c } = he({
+		queryKey: U,
 		queryFn: ({ signal: t }) => e({ signal: t }),
 		enabled: !i,
 		staleTime: 6e4,
@@ -357,7 +357,7 @@ function _e() {
 }
 //#endregion
 //#region src/hooks/useTrackEvent.ts
-function G() {
+function W() {
 	let { onEvent: e, disabled: t, log: n } = p();
 	return w((r, a) => {
 		e?.(r, a), t || i(r, a, n);
@@ -369,10 +369,10 @@ function G() {
 }
 //#endregion
 //#region src/utils/closable-storage.ts
-var K = "@tiendanube/live-state:closable", q = K;
-function J() {
+var G = "@tiendanube/live-state:closable", K = G;
+function q() {
 	try {
-		let e = localStorage.getItem(q);
+		let e = localStorage.getItem(K);
 		if (!e) return {};
 		let t = JSON.parse(e);
 		if (typeof t != "object" || !t) return {};
@@ -396,21 +396,21 @@ function J() {
 		return {};
 	}
 }
-function Y(e) {
+function J(e) {
 	try {
-		localStorage.setItem(q, JSON.stringify(e));
+		localStorage.setItem(K, JSON.stringify(e));
 	} catch {}
 }
 //#endregion
 //#region src/hooks/useClosable.ts
-function ve({ context: e, id: t, maxCloseTimes: n = 3, expiresIn: r }) {
+function ye({ context: e, id: t, maxCloseTimes: n = 3, expiresIn: r }) {
 	let [i, a] = E(null);
 	return T(() => {
 		if (!t) {
 			a(!0);
 			return;
 		}
-		let i = J(), o = i[e]?.[t];
+		let i = q(), o = i[e]?.[t];
 		if (!o) {
 			a(!0);
 			return;
@@ -418,7 +418,7 @@ function ve({ context: e, id: t, maxCloseTimes: n = 3, expiresIn: r }) {
 		let { count: s, closedAt: c } = o;
 		if (r != null && c > 0 && Date.now() - c > r) {
 			let n = { ...i };
-			n[e] && (delete n[e][t], Y(n)), a(!0);
+			n[e] && (delete n[e][t], J(n)), a(!0);
 			return;
 		}
 		a(s < n);
@@ -431,8 +431,8 @@ function ve({ context: e, id: t, maxCloseTimes: n = 3, expiresIn: r }) {
 		isVisible: i,
 		close: w(() => {
 			if (a(!1), !t) return;
-			let n = J(), r = n[e]?.[t]?.count ?? 0;
-			Y({
+			let n = q(), r = n[e]?.[t]?.count ?? 0;
+			J({
 				...n,
 				[e]: {
 					...n[e] ?? {},
@@ -447,7 +447,7 @@ function ve({ context: e, id: t, maxCloseTimes: n = 3, expiresIn: r }) {
 }
 //#endregion
 //#region src/utils/cta.ts
-function X(e, t) {
+function Y(e, t) {
 	let n = m(t);
 	try {
 		switch (e.type) {
@@ -473,25 +473,25 @@ function X(e, t) {
 }
 //#endregion
 //#region src/utils/sanitize.ts
-var ye = new Set([
+var be = new Set([
 	"strong",
 	"em",
 	"b",
 	"i",
 	"br",
 	"span"
-]), be = /<(script|style|iframe|object|embed|form|input|button|textarea|select|link|meta|head|body|html|svg|math)[\s\S]*?<\/\1\s*>|<(script|style|iframe|object|embed|form|input|button|textarea|select|link|meta|head|body|html|svg|math)[^>]*\/?>/gi;
-function xe(e) {
-	return e.replace(be, "").replace(/<([a-zA-Z][a-zA-Z0-9]*)\s[^>]*>/g, "<$1>").replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g, (e, t) => ye.has(t.toLowerCase()) ? e : "");
-}
+]), xe = /<(script|style|iframe|object|embed|form|input|button|textarea|select|link|meta|head|body|html|svg|math)[\s\S]*?<\/\1\s*>|<(script|style|iframe|object|embed|form|input|button|textarea|select|link|meta|head|body|html|svg|math)[^>]*\/?>/gi;
 function Se(e) {
+	return e.replace(xe, "").replace(/<([a-zA-Z][a-zA-Z0-9]*)\s[^>]*>/g, "<$1>").replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g, (e, t) => be.has(t.toLowerCase()) ? e : "");
+}
+function Ce(e) {
 	return /<[a-zA-Z][^>]*>/.test(e);
 }
 //#endregion
 //#region src/components/RichText.tsx
-function Z({ content: e, ...t }) {
-	if (Se(e)) {
-		let n = xe(e);
+function X({ content: e, ...t }) {
+	if (Ce(e)) {
+		let n = Se(e);
 		return /* @__PURE__ */ D(A, {
 			...t,
 			children: /* @__PURE__ */ D("span", { dangerouslySetInnerHTML: { __html: n } })
@@ -503,16 +503,21 @@ function Z({ content: e, ...t }) {
 	});
 }
 //#endregion
-//#region src/components/LiveStateAlert.tsx
-function Q({ data: e, trackingConfig: t, onClose: n, onCtaClick: r }) {
-	let i = G(), { log: a } = p(), o = e.type === "alert" ? "danger" : "warning", s = w(() => u({
+//#region src/components/LiveStateMessage.tsx
+var we = {
+	alert: "danger",
+	warning: "warning",
+	info: "primary"
+};
+function Z({ data: e, trackingConfig: t, onClose: n, onCtaClick: r }) {
+	let i = W(), { log: a } = p(), o = we[e.type] ?? "danger", s = w(() => u({
 		context: e.context,
 		campaignId: e.campaignId,
 		group: e.group,
 		...e.metadata,
 		...t.properties
 	}), [e, t.properties]), c = w(() => {
-		i(g(t.prefix, t.page, e.context, "click"), s()), r ? r(e.cta) : X(e.cta, a);
+		e.cta && (i(g(t.prefix, t.page, e.context, "click"), s()), r ? r(e.cta) : Y(e.cta, a));
 	}, [
 		e,
 		t,
@@ -534,6 +539,7 @@ function Q({ data: e, trackingConfig: t, onClose: n, onCtaClick: r }) {
 	}, []), /* @__PURE__ */ D(ee, {
 		appearance: o,
 		title: e.title,
+		"data-testid": "live-state-message",
 		onRemove: n ? l : void 0,
 		children: /* @__PURE__ */ O(k, {
 			display: "flex",
@@ -544,14 +550,15 @@ function Q({ data: e, trackingConfig: t, onClose: n, onCtaClick: r }) {
 			children: [/* @__PURE__ */ D(k, {
 				flex: "1 1 auto",
 				minWidth: "220px",
-				children: /* @__PURE__ */ D(Z, { content: e.message })
-			}), /* @__PURE__ */ D(k, {
+				children: /* @__PURE__ */ D(X, { content: e.message })
+			}), e.cta && /* @__PURE__ */ D(k, {
 				display: "flex",
 				justifyContent: "flex-end",
 				marginTop: "2",
 				children: /* @__PURE__ */ D(te, {
 					appearance: "primary",
 					onClick: c,
+					"data-testid": "live-state-message-cta-button",
 					children: e.cta.label
 				})
 			})]
@@ -559,8 +566,8 @@ function Q({ data: e, trackingConfig: t, onClose: n, onCtaClick: r }) {
 	});
 }
 //#endregion
-//#region src/components/LiveStateInfo.tsx
-var Ce = {
+//#region src/components/LiveStatePromo.tsx
+var Q = {
 	blue: {
 		background: "#0050C3",
 		icon: "#FFFFFF"
@@ -571,7 +578,7 @@ var Ce = {
 	}
 };
 function $({ data: e, trackingConfig: t, defaultVariant: n = "blue", onClose: r, isMobile: i, onCtaClick: a }) {
-	let o = G(), { log: s } = p(), c = e.variant || n, l = Ce[c], [d, f] = E(() => window.innerWidth < 750);
+	let o = W(), { log: s } = p(), c = e.variant || n, l = Q[c], [d, f] = E(() => window.innerWidth < 750);
 	T(() => {
 		let e = () => f(window.innerWidth < 750);
 		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
@@ -583,7 +590,7 @@ function $({ data: e, trackingConfig: t, defaultVariant: n = "blue", onClose: r,
 		...e.metadata,
 		...t.properties
 	}), [e, t.properties]), _ = w(() => {
-		o(g(t.prefix, t.page, e.context, "click"), h()), a ? a(e.cta) : X(e.cta, s);
+		e.cta && (o(g(t.prefix, t.page, e.context, "click"), h()), a ? a(e.cta) : Y(e.cta, s));
 	}, [
 		e,
 		t,
@@ -603,21 +610,22 @@ function $({ data: e, trackingConfig: t, defaultVariant: n = "blue", onClose: r,
 	T(() => {
 		o(g(t.prefix, t.page, e.context, "view"), h());
 	}, []);
-	let y = /* @__PURE__ */ D(ie, {
+	let y = e.cta ? /* @__PURE__ */ D(ie, {
 		as: "a",
 		textDecoration: "none",
 		onClick: _,
-		"data-testid": "live-state-cta-link",
+		"data-testid": "live-state-promo-cta-link",
 		children: /* @__PURE__ */ D(A, {
 			color: "primary-interactive",
 			fontSize: "base",
 			children: e.cta.label
 		})
-	});
+	}) : null;
 	return /* @__PURE__ */ D(ne, { children: /* @__PURE__ */ O(k, {
 		display: "flex",
 		flexDirection: "row",
 		justifyContent: "space-between",
+		"data-testid": "live-state-promo",
 		children: [/* @__PURE__ */ O(k, {
 			display: "flex",
 			gap: "4",
@@ -643,17 +651,17 @@ function $({ data: e, trackingConfig: t, defaultVariant: n = "blue", onClose: r,
 			}), /* @__PURE__ */ O(k, {
 				display: "grid",
 				gap: "2",
-				children: [/* @__PURE__ */ O(k, { children: [/* @__PURE__ */ D(Z, {
+				children: [/* @__PURE__ */ O(k, { children: [/* @__PURE__ */ D(X, {
 					content: e.title,
 					fontSize: "base",
 					color: "neutral-textHigh"
-				}), /* @__PURE__ */ D(Z, {
+				}), /* @__PURE__ */ D(X, {
 					content: e.message,
 					fontSize: "base",
 					color: "neutral-textLow"
 				})] }), m && y]
 			})]
-		}), (!m || r) && /* @__PURE__ */ O(k, {
+		}), (!m && y || r) && /* @__PURE__ */ O(k, {
 			display: "flex",
 			flexDirection: m ? "column" : "row",
 			alignItems: m ? "flex-end" : "center",
@@ -685,32 +693,36 @@ function $({ data: e, trackingConfig: t, defaultVariant: n = "blue", onClose: r,
 }
 //#endregion
 //#region src/components/LiveStateRenderer.tsx
-function we({ data: e, loading: t, trackingConfig: n, allowedContexts: r, defaultVariant: i, isMobile: a, onCtaClick: o }) {
-	let { log: s, onNavigate: c } = p(), l = o ?? c, { isVisible: u, close: d } = ve({
+function Te({ data: e, loading: t, trackingConfig: n, allowedContexts: r, defaultVariant: i, isMobile: a, onCtaClick: o }) {
+	let { log: s, onNavigate: c } = p(), l = o ?? c, { isVisible: u, close: d } = ye({
 		context: e?.context ?? "",
 		id: e?.campaignId,
 		maxCloseTimes: e?.metadata?.maxCloseTimes,
 		expiresIn: e?.metadata?.expiresIn
 	});
 	if (t || !e) return null;
-	if (!e.context || !e.type || !e.title || !e.message || !e.cta?.label || !e.cta?.url || !e.cta?.type) return s("warn", "Invalid payload, missing required fields", { data: e }), null;
+	let f = e.cta != null && (!e.cta.label || !e.cta.url || !e.cta.type);
+	if (!e.context || !e.model || !e.type || !e.title || !e.message || f) return s("warn", "Invalid payload, missing required fields", { data: e }), null;
 	if (r && !r.includes(e.context) || u === null || !u) return null;
-	let f = e.closable ? d : void 0;
-	return e.type === "alert" || e.type === "warning" ? /* @__PURE__ */ D(Q, {
-		data: e,
-		onClose: f,
-		trackingConfig: n,
-		onCtaClick: l
-	}) : e.type === "info" ? /* @__PURE__ */ D($, {
-		data: e,
-		onClose: f,
-		trackingConfig: n,
-		defaultVariant: i,
-		isMobile: a,
-		onCtaClick: l
-	}) : (s("warn", `Unknown type: ${e.type}`, { data: e }), null);
+	let m = e.closable ? d : void 0;
+	return {
+		message: /* @__PURE__ */ D(Z, {
+			data: e,
+			onClose: m,
+			trackingConfig: n,
+			onCtaClick: l
+		}),
+		promo: /* @__PURE__ */ D($, {
+			data: e,
+			onClose: m,
+			trackingConfig: n,
+			defaultVariant: i,
+			isMobile: a,
+			onCtaClick: l
+		})
+	}[e.model];
 }
 //#endregion
-export { K as LIVE_STATE_STORAGE_KEY, Q as LiveStateAlert, $ as LiveStateInfo, v as LiveStateProvider, we as LiveStateRenderer, X as handleCtaClick, ge as invalidateLiveState, he as prefetchLiveState, i as trackEvent, _e as useLiveState, G as useTrackEvent };
+export { G as LIVE_STATE_STORAGE_KEY, Z as LiveStateMessage, $ as LiveStatePromo, v as LiveStateProvider, Te as LiveStateRenderer, Y as handleCtaClick, _e as invalidateLiveState, ge as prefetchLiveState, i as trackEvent, ve as useLiveState, W as useTrackEvent };
 
 //# sourceMappingURL=index.js.map