@ecomiq/storefront 2.1.3 → 3.0.0

package/dist/analytics/consent-banner-9QvRRy8v.js

@@ -0,0 +1,239 @@
+import { consentPurposes, installConsent, onConsent, onConsentOpen, openConsent } from "./consent-B13rBpBs.js";
+import { Link, useRouteLoaderData } from "react-router";
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/analytics/consent-banner.tsx
+const PURPOSES = ["analytics", "marketing"];
+const REJECTED = {
+	analytics: false,
+	marketing: false
+};
+const ACCEPTED = {
+	analytics: true,
+	marketing: true
+};
+const COPY = {
+	es: {
+		label: "Cookies",
+		privacy: "Privacidad",
+		configure: "Configurar",
+		choose: "Elige qué aceptas. Las cookies necesarias para el carrito y tu sesión siempre están activas.",
+		accept: "Aceptar",
+		reject: "Rechazar",
+		save: "Guardar",
+		and: " y ",
+		others: "otros proveedores",
+		uses: {
+			analytics: "medir visitas",
+			marketing: "mostrarte publicidad"
+		},
+		options: {
+			analytics: {
+				name: "Medición",
+				use: "para contar visitas y compras"
+			},
+			marketing: {
+				name: "Publicidad",
+				use: "para medir campañas y mostrarte anuncios"
+			}
+		},
+		notice: (providers, uses) => `Con tu permiso, usamos cookies de ${providers} para ${uses}. Los datos que recogen pueden tratarse fuera del país, por ejemplo en Estados Unidos. Puedes cambiar tu elección en «Cookies», al pie de la página.`
+	},
+	en: {
+		label: "Cookies",
+		privacy: "Privacy",
+		configure: "Customize",
+		choose: "Choose what you accept. Cookies needed for the cart and your session are always on.",
+		accept: "Accept",
+		reject: "Reject",
+		save: "Save",
+		and: " and ",
+		others: "other providers",
+		uses: {
+			analytics: "measure visits",
+			marketing: "show you ads"
+		},
+		options: {
+			analytics: {
+				name: "Measurement",
+				use: "to count visits and purchases"
+			},
+			marketing: {
+				name: "Advertising",
+				use: "to measure campaigns and show you ads"
+			}
+		},
+		notice: (providers, uses) => `With your permission, we use cookies from ${providers} to ${uses}. The data they collect may be processed outside your country, for example in the United States. You can change your choice under “Cookies” at the bottom of the page.`
+	},
+	pt: {
+		label: "Cookies",
+		privacy: "Privacidade",
+		configure: "Configurar",
+		choose: "Escolha o que aceita. Os cookies necessários para o carrinho e a sua sessão estão sempre ativos.",
+		accept: "Aceitar",
+		reject: "Recusar",
+		save: "Salvar",
+		and: " e ",
+		others: "outros fornecedores",
+		uses: {
+			analytics: "medir visitas",
+			marketing: "mostrar publicidade"
+		},
+		options: {
+			analytics: {
+				name: "Medição",
+				use: "para contar visitas e compras"
+			},
+			marketing: {
+				name: "Publicidade",
+				use: "para medir campanhas e mostrar anúncios"
+			}
+		},
+		notice: (providers, uses) => `Com a sua permissão, usamos cookies de ${providers} para ${uses}. Os dados que coletam podem ser tratados fora do país, por exemplo nos Estados Unidos. Você pode mudar sua escolha em “Cookies”, no rodapé da página.`
+	}
+};
+function consentCopy(language) {
+	return COPY[language.slice(0, 2).toLowerCase()] ?? COPY.es;
+}
+function useAnalyticsConfig() {
+	return useRouteLoaderData("root")?.analytics ?? null;
+}
+function providers(config, purpose) {
+	const generic = config.googleTagManager !== null || config.scripts !== null;
+	return {
+		google: purpose === "marketing" ? config.googleTagManager !== null : config.googleAnalytics !== null || config.googleTagManager !== null,
+		meta: purpose !== "analytics" && config.metaPixel !== null,
+		others: generic
+	};
+}
+function providerNames(found, copy) {
+	const names = [];
+	if (found.google) names.push("Google");
+	if (found.meta) names.push("Meta");
+	if (found.others) names.push(copy.others);
+	const last = names.pop() ?? "";
+	if (names.length === 0) return last;
+	return `${names.join(", ")}${copy.and}${last}`;
+}
+function ConsentBanner({ className, classNames = {} }) {
+	const config = useAnalyticsConfig();
+	const version = config?.consentVersion ?? null;
+	const id = useId();
+	const [open, setOpen] = useState(false);
+	const [configuring, setConfiguring] = useState(false);
+	const [choice, setChoice] = useState(REJECTED);
+	const [focused, setFocused] = useState(0);
+	const banner = useRef(null);
+	useEffect(() => {
+		if (config === null) return;
+		setOpen(installConsent(config).get() === null);
+		setConfiguring(false);
+		const stopChoice = onConsent(() => setOpen(false));
+		const stopOpen = onConsentOpen(() => {
+			setConfiguring(false);
+			setOpen(true);
+			setFocused((count) => count + 1);
+		});
+		return () => {
+			stopChoice();
+			stopOpen();
+		};
+	}, [version]);
+	useEffect(() => {
+		if (focused > 0) banner.current?.focus();
+	}, [focused]);
+	if (config === null || !open) return null;
+	const copy = consentCopy(config.language);
+	const offered = consentPurposes(config);
+	const purposes = PURPOSES.filter((purpose) => offered[purpose]);
+	const choose = (consent) => installConsent(config).set(consent);
+	const configure = () => {
+		const current = installConsent(config).get();
+		setChoice(current === null ? REJECTED : {
+			analytics: current.analytics,
+			marketing: current.marketing
+		});
+		setConfiguring(true);
+		setFocused((count) => count + 1);
+	};
+	const privacy = config.privacy === null ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx(Link, {
+		to: config.privacy,
+		className: classNames.link,
+		children: copy.privacy
+	})] });
+	return /* @__PURE__ */ jsxs("section", {
+		ref: banner,
+		tabIndex: -1,
+		"aria-label": copy.label,
+		className,
+		children: [configuring ? /* @__PURE__ */ jsxs("div", {
+			className: classNames.options,
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: classNames.text,
+				children: [copy.choose, privacy]
+			}), purposes.map((purpose) => /* @__PURE__ */ jsxs("p", {
+				className: classNames.option,
+				children: [/* @__PURE__ */ jsx("input", {
+					id: `${id}${purpose}`,
+					type: "checkbox",
+					checked: choice[purpose],
+					onChange: (event) => setChoice({
+						...choice,
+						[purpose]: event.currentTarget.checked
+					})
+				}), /* @__PURE__ */ jsxs("label", {
+					htmlFor: `${id}${purpose}`,
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: copy.options[purpose].name }),
+						": ",
+						copy.options[purpose].use,
+						" (",
+						providerNames(providers(config, purpose), copy),
+						")."
+					]
+				})]
+			}, purpose))]
+		}) : /* @__PURE__ */ jsxs("p", {
+			className: classNames.text,
+			children: [
+				copy.notice(providerNames(providers(config, null), copy), purposes.map((purpose) => copy.uses[purpose]).join(copy.and)),
+				privacy,
+				purposes.length > 1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [privacy === null ? " " : " · ", /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: classNames.configure ?? classNames.link,
+					onClick: configure,
+					children: copy.configure
+				})] }) : null
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: classNames.actions,
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: classNames.reject,
+				onClick: () => choose(REJECTED),
+				children: copy.reject
+			}), configuring ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: classNames.accept,
+				onClick: () => choose(choice),
+				children: copy.save
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: classNames.accept,
+				onClick: () => choose(ACCEPTED),
+				children: copy.accept
+			})]
+		})]
+	});
+}
+function ConsentLink({ className, children }) {
+	const config = useAnalyticsConfig();
+	if (config === null) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
+		onClick: openConsent,
+		children: children ?? consentCopy(config.language).label
+	});
+}
+export { ConsentBanner, ConsentLink };

package/dist/analytics/consent-banner.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+export type ConsentBannerProps = {
+  className?: string;
+  classNames?: {
+    text?: string;
+    link?: string;
+    configure?: string;
+    options?: string;
+    option?: string;
+    actions?: string;
+    accept?: string;
+    reject?: string;
+  };
+};
+export type ConsentLinkProps = {
+  className?: string;
+  children?: ReactNode;
+};
+export declare function ConsentBanner({ className, classNames }: ConsentBannerProps): import("react").JSX.Element | null;
+export declare function ConsentLink({ className, children }: ConsentLinkProps): import("react").JSX.Element | null;

package/dist/analytics/cookies-pLozllyB.js

@@ -0,0 +1,100 @@
+import { cartItem } from "./events-Dt81tIp1.js";
+// src/analytics/cookies.ts
+const CONSENT_COOKIE = "__Host-ecomiq-consent";
+const PURCHASE_COOKIE = "__Host-ecomiq-purchase";
+const CONSENT_MAX_AGE = 31536e3;
+const PURCHASE_MAX_AGE = 600;
+const PURCHASE_ITEMS = 20;
+const PURCHASE_NAME_LENGTH = 60;
+const PURCHASE_COOKIE_BYTES = 3800;
+const CATEGORIES = ["analytics", "marketing"];
+function cookieValue(cookies, name) {
+	for (const part of cookies.split(";")) {
+		const separator = part.indexOf("=");
+		if (separator > 0 && part.slice(0, separator).trim() === name) return part.slice(separator + 1).trim();
+	}
+	return null;
+}
+function grantedChoice(value) {
+	if (value === "none") return {
+		analytics: false,
+		marketing: false
+	};
+	const granted = value.split(".");
+	if (granted.some((category) => !CATEGORIES.some((known) => known === category))) return null;
+	return {
+		analytics: granted.includes("analytics"),
+		marketing: granted.includes("marketing")
+	};
+}
+function readConsent(cookies) {
+	const value = cookieValue(cookies ?? "", CONSENT_COOKIE);
+	if (value === null) return null;
+	const [granted = "", version, date, ...rest] = value.split("|");
+	const choice = grantedChoice(granted);
+	if (choice === null || rest.length > 0 || !version || !date) return null;
+	return {
+		...choice,
+		version,
+		date
+	};
+}
+function consentCookie(consent) {
+	const granted = CATEGORIES.filter((category) => consent[category]);
+	const choice = granted.length === 0 ? "none" : granted.join(".");
+	return `${CONSENT_COOKIE}=${choice}|${consent.version}|${consent.date}; Max-Age=${CONSENT_MAX_AGE}; Path=/; SameSite=Lax; Secure`;
+}
+function purchaseCookie(result) {
+	const { cart } = result;
+	const items = cart.items.slice(0, PURCHASE_ITEMS).map((item) => ({
+		...cartItem(item),
+		item_name: item.title.slice(0, PURCHASE_NAME_LENGTH)
+	}));
+	const purchase = {
+		orderId: result.orderId,
+		currency: cart.currencyCode,
+		value: cart.totals.total,
+		tax: cart.totals.taxTotal,
+		shipping: cart.totals.shippingTotal,
+		items
+	};
+	let value = encodeURIComponent(JSON.stringify(purchase));
+	while (value.length > PURCHASE_COOKIE_BYTES && purchase.items.length > 0) {
+		purchase.items.pop();
+		value = encodeURIComponent(JSON.stringify(purchase));
+	}
+	return `${PURCHASE_COOKIE}=${value}; Max-Age=${PURCHASE_MAX_AGE}; Path=/; SameSite=Lax; Secure`;
+}
+function expiredPurchaseCookie() {
+	return `${PURCHASE_COOKIE}=; Max-Age=0; Path=/; SameSite=Lax; Secure`;
+}
+function purchaseItem(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const item = value;
+	return typeof item.item_id === "string" && typeof item.item_name === "string" && typeof item.price === "number";
+}
+function readPurchase(cookies) {
+	const value = cookieValue(cookies, PURCHASE_COOKIE);
+	if (value === null || value === "") return null;
+	try {
+		const purchase = JSON.parse(decodeURIComponent(value));
+		if (typeof purchase.orderId !== "string" || typeof purchase.currency !== "string") return null;
+		if (typeof purchase.value !== "number" || typeof purchase.tax !== "number" || typeof purchase.shipping !== "number") return null;
+		if (!Array.isArray(purchase.items) || !purchase.items.every(purchaseItem)) return null;
+		return purchase;
+	} catch {
+		return null;
+	}
+}
+const ANALYTICS_COOKIE = /^(_ga|_ga_[A-Za-z0-9]+|_gid|_gat(_.+)?)$/;
+const MARKETING_COOKIE = /^(_fbp|_fbc|_gcl_[a-z]+)$/;
+function revokedCookies(cookies, consent) {
+	return cookies.split(";").map((pair) => pair.split("=")[0]?.trim() ?? "").filter((name) => !consent.analytics && ANALYTICS_COOKIE.test(name) || !consent.marketing && MARKETING_COOKIE.test(name));
+}
+function cookieDomains(hostname) {
+	const parts = hostname.split(".");
+	const domains = [null];
+	for (let index = 0; index < parts.length - 1; index += 1) domains.push(`.${parts.slice(index).join(".")}`);
+	return domains;
+}
+export { CONSENT_COOKIE, PURCHASE_COOKIE, consentCookie, cookieDomains, expiredPurchaseCookie, purchaseCookie, readConsent, readPurchase, revokedCookies };

package/dist/analytics/cookies.d.ts

@@ -0,0 +1,6 @@
+import "./events.js";
+import "@ecomiq/core";
+export type Consent = {
+  analytics: boolean;
+  marketing: boolean;
+};

package/dist/analytics/destinations-iECrlLIr.js

@@ -0,0 +1,144 @@
+// src/analytics/destinations.ts
+const TOOLS = [
+	"googleAnalytics",
+	"googleTagManager",
+	"metaPixel",
+	"scripts"
+];
+const DENIED = {
+	ad_storage: "denied",
+	ad_user_data: "denied",
+	ad_personalization: "denied",
+	analytics_storage: "denied"
+};
+const META_EVENTS = {
+	page_view: "PageView",
+	search: "Search",
+	view_item: "ViewContent",
+	add_to_cart: "AddToCart",
+	begin_checkout: "InitiateCheckout",
+	purchase: "Purchase"
+};
+const loaded = /* @__PURE__ */ new Set();
+function grant(value) {
+	return value ? "granted" : "denied";
+}
+function googleConsent(consent) {
+	return {
+		ad_storage: grant(consent.marketing),
+		ad_user_data: grant(consent.marketing),
+		ad_personalization: grant(consent.marketing),
+		analytics_storage: grant(consent.analytics)
+	};
+}
+function script(parent, source) {
+	const element = document.createElement("script");
+	if ("src" in source) {
+		element.async = true;
+		element.src = source.src;
+	} else element.text = source.text;
+	parent.appendChild(element);
+}
+function gtag() {
+	if (window.gtag) return window.gtag;
+	const layer = window.dataLayer ??= [];
+	window.gtag = function() {
+		layer.push(arguments);
+	};
+	window.gtag("consent", "default", DENIED);
+	return window.gtag;
+}
+function metaPixel() {
+	if (window.fbq) return window.fbq;
+	const pixel = function(...args) {
+		if (pixel.callMethod) pixel.callMethod.apply(pixel, args);
+		else pixel.queue.push(args);
+	};
+	pixel.push = pixel;
+	pixel.loaded = true;
+	pixel.version = "2.0";
+	pixel.queue = [];
+	window.fbq = pixel;
+	window._fbq = pixel;
+	script(document.head, { src: "https://connect.facebook.net/en_US/fbevents.js" });
+	return pixel;
+}
+function allowed(tool, consent) {
+	if (tool === "googleAnalytics") return consent.analytics;
+	if (tool === "metaPixel") return consent.marketing;
+	return consent.analytics && consent.marketing;
+}
+function withdraw(consent) {
+	if (window.gtag) window.gtag("consent", "update", googleConsent(consent));
+	if (loaded.has("metaPixel") && !consent.marketing) metaPixel()("consent", "revoke");
+	location.reload();
+}
+function load(settings, consent) {
+	if ([...loaded].some((tool) => !allowed(tool, consent))) return withdraw(consent);
+	const pending = TOOLS.filter((tool) => settings[tool] !== null && allowed(tool, consent) && !loaded.has(tool));
+	if (window.gtag || pending.includes("googleAnalytics") || pending.includes("googleTagManager")) gtag()("consent", "update", googleConsent(consent));
+	for (const tool of pending) loaded.add(tool);
+	if (settings.googleAnalytics !== null && pending.includes("googleAnalytics")) {
+		gtag()("js", /* @__PURE__ */ new Date());
+		gtag()("config", settings.googleAnalytics, { send_page_view: false });
+		script(document.head, { src: `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(settings.googleAnalytics)}` });
+	}
+	if (settings.googleTagManager !== null && pending.includes("googleTagManager")) {
+		(window.dataLayer ??= []).push({
+			"gtm.start": Date.now(),
+			event: "gtm.js"
+		});
+		script(document.head, { src: `https://www.googletagmanager.com/gtm.js?id=${encodeURIComponent(settings.googleTagManager)}` });
+	}
+	if (settings.metaPixel !== null && pending.includes("metaPixel")) metaPixel()("init", settings.metaPixel);
+	if (settings.scripts !== null && pending.includes("scripts")) {
+		if (settings.scripts.head !== null) script(document.head, { text: settings.scripts.head });
+		if (settings.scripts.bodyEnd !== null) script(document.body, { text: settings.scripts.bodyEnd });
+	}
+}
+function contents(params, currency) {
+	const { items } = params;
+	return {
+		content_type: "product",
+		content_ids: items.map((item) => item.item_id),
+		contents: items.map((item) => ({
+			id: item.item_id,
+			quantity: item.quantity ?? 1,
+			item_price: item.price
+		})),
+		num_items: items.reduce((sum, item) => sum + (item.quantity ?? 1), 0),
+		value: params.value,
+		currency: params.currency ?? currency
+	};
+}
+function sendMeta(event, currency) {
+	const name = META_EVENTS[event.name];
+	if (name === void 0) return;
+	const pixel = metaPixel();
+	if (event.name === "page_view") pixel("track", name);
+	else if (event.name === "search") pixel("track", name, { search_string: event.params.search_term });
+	else if (event.name === "purchase") pixel("track", name, contents(event.params, currency), { eventID: event.params.transaction_id });
+	else if ("value" in event.params) pixel("track", name, contents(event.params, currency));
+}
+function send(settings, consent, event) {
+	const params = "items" in event.params ? {
+		currency: settings.currency,
+		...event.params
+	} : event.params;
+	if (loaded.has("googleAnalytics") && allowed("googleAnalytics", consent)) gtag()("event", event.name, params);
+	if (loaded.has("googleTagManager") && allowed("googleTagManager", consent)) {
+		const layer = window.dataLayer ??= [];
+		if ("items" in event.params) {
+			layer.push({ ecommerce: null });
+			layer.push({
+				event: event.name,
+				ecommerce: params
+			});
+		} else layer.push({
+			event: event.name,
+			...params
+		});
+	}
+	if (loaded.has("metaPixel") && allowed("metaPixel", consent)) sendMeta(event, settings.currency);
+}
+export { load, send };

package/dist/analytics/events-Dt81tIp1.js

@@ -0,0 +1,102 @@
+// src/analytics/events.ts
+const LIST_LIMIT = 24;
+const SEARCH_LIST = {
+	id: "search",
+	name: "Búsqueda"
+};
+const CATALOG_LIST = {
+	id: "catalog",
+	name: "Catálogo"
+};
+function filled(value) {
+	const trimmed = value?.trim() ?? "";
+	if (trimmed === "") return void 0;
+	return trimmed;
+}
+function itemsValue(items) {
+	const total = items.reduce((sum, item) => sum + item.price * (item.quantity ?? 1), 0);
+	return Math.round(total * 100) / 100;
+}
+function productItem(product) {
+	return {
+		item_id: product.id,
+		item_name: product.name,
+		item_brand: filled(product.brand),
+		item_category: filled(product.category),
+		price: product.price
+	};
+}
+function cartItem(item) {
+	return {
+		item_id: item.productId ?? item.variantId ?? item.id,
+		item_name: item.title,
+		item_variant: filled(item.variantLabel),
+		price: item.unitPrice,
+		quantity: item.quantity
+	};
+}
+function listAnalytics(list, products) {
+	const items = products.slice(0, LIST_LIMIT).map((product, index) => ({
+		...productItem(product),
+		index
+	}));
+	return { events: [{
+		name: "view_item_list",
+		params: {
+			item_list_id: list.id,
+			item_list_name: list.name,
+			items
+		}
+	}] };
+}
+function productAnalytics(product) {
+	return { events: [{
+		name: "view_item",
+		params: {
+			value: product.price,
+			items: [productItem(product)]
+		}
+	}] };
+}
+function categoryAnalytics(category, products) {
+	return listAnalytics({
+		id: category.slug,
+		name: category.name
+	}, products);
+}
+function collectionAnalytics(collection, products) {
+	return listAnalytics({
+		id: collection.slug,
+		name: collection.name
+	}, products);
+}
+function catalogAnalytics(q, products) {
+	if (q === "") return listAnalytics(CATALOG_LIST, products);
+	const list = listAnalytics(SEARCH_LIST, products);
+	return { events: [{
+		name: "search",
+		params: { search_term: q }
+	}, ...list.events] };
+}
+function checkoutAnalytics(cart) {
+	const items = cart.items.map(cartItem);
+	return {
+		events: [{
+			name: "begin_checkout",
+			params: {
+				currency: cart.currencyCode,
+				value: itemsValue(items),
+				items
+			}
+		}],
+		once: `begin_checkout:${cart.id}`
+	};
+}
+function orderAnalytics(order, paid) {
+	if (!paid) return { events: [] };
+	return {
+		events: [],
+		paid: order.id
+	};
+}
+export { cartItem, catalogAnalytics, categoryAnalytics, checkoutAnalytics, collectionAnalytics, itemsValue, orderAnalytics, productAnalytics };

package/dist/analytics/events.d.ts

@@ -0,0 +1,51 @@
+import { CategoryDetail, Collection, CustomerOrderDetail, ProductDetail, ProductSummary, StorefrontCart } from "@ecomiq/core";
+export type AnalyticsItem = {
+  item_id: string;
+  item_name: string;
+  item_variant?: string;
+  item_brand?: string;
+  item_category?: string;
+  price: number;
+  quantity?: number;
+  index?: number;
+};
+export type CommerceParams = {
+  currency?: string;
+  value: number;
+  items: AnalyticsItem[];
+};
+export type AnalyticsEvent = {
+  name: "page_view";
+  params: {
+    page_location: string;
+    page_title: string;
+  };
+} | {
+  name: "search";
+  params: {
+    search_term: string;
+  };
+} | {
+  name: "view_item_list";
+  params: {
+    item_list_id: string;
+    item_list_name: string;
+    items: AnalyticsItem[];
+  };
+} | {
+  name: "view_item" | "add_to_cart" | "remove_from_cart" | "begin_checkout";
+  params: CommerceParams;
+} | {
+  name: "purchase";
+  params: CommerceParams & {
+    transaction_id: string;
+    tax: number;
+    shipping: number;
+  };
+};
+export type PageAnalytics = {
+  events: AnalyticsEvent[];
+  once?: string;
+  paid?: string;
+};
+export declare function catalogAnalytics(q: string, products: ProductSummary[]): PageAnalytics;