@ecomiq/storefront 2.1.4 → 3.0.0

package/dist/page-seo-a5FJl8x5.js

@@ -0,0 +1,262 @@
+import { loadStorefrontTranslations, storefrontText } from "./storefront-text-D25ae1qf.js";
+import { store } from "./store-8Q-_LFrQ.js";
+import { absoluteUrl, canonicalOrigin, requestUrl } from "./urls-CpGQPxvf.js";
+// src/page-seo.ts
+const DESCRIPTION_LENGTH = 160;
+const TITLE_LENGTH = 65;
+function plainText(value) {
+	if (!value) return "";
+	return value.replace(/<[^>]*>/g, " ").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&#39;/g, "'").replace(/\s+/g, " ").trim();
+}
+function clip(value, length) {
+	if (value.length <= length) return value;
+	const cut = value.slice(0, length - 1);
+	const space = cut.lastIndexOf(" ");
+	if (space > length / 2) return `${cut.slice(0, space)}…`;
+	return `${cut}…`;
+}
+function describe(...candidates) {
+	const parts = [];
+	for (const candidate of candidates) {
+		const text = plainText(candidate);
+		if (!text) continue;
+		parts.push(text);
+		if (parts.join(" ").length >= 70) break;
+	}
+	return clip(parts.join(" "), DESCRIPTION_LENGTH);
+}
+async function shop(request, context) {
+	const settings = await store(context).getSettings();
+	const name = settings.cms.settings.seo.siteName?.trim() || settings.store.name;
+	const about = settings.cms.settings.seo.metaDescription?.trim() || settings.store.description;
+	return {
+		settings,
+		translations: await loadStorefrontTranslations(settings.store.language),
+		origin: canonicalOrigin(request, settings),
+		name,
+		about
+	};
+}
+function titled(current, name) {
+	const template = current.settings.cms.settings.seo.titleTemplate?.trim();
+	let title = `${name} | ${current.name}`;
+	if (template && template.includes("{page}")) title = template.replaceAll("{page}", name).replaceAll("{site}", current.name);
+	if (title.length > TITLE_LENGTH) return name;
+	return title;
+}
+function crumbs(current, items) {
+	return {
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		itemListElement: [{
+			name: storefrontText(current.translations, "Inicio"),
+			path: "/"
+		}, ...items].map((item, index) => ({
+			"@type": "ListItem",
+			position: index + 1,
+			name: item.name,
+			item: absoluteUrl(current.origin, item.path)
+		}))
+	};
+}
+function seo(current, page, noindex = false) {
+	const { branding } = current.settings.cms.settings;
+	const { store: shop } = current.settings;
+	const image = page.image || branding.socialImageUrl || shop.logo || shop.icon || null;
+	return {
+		...page,
+		image,
+		siteName: current.name,
+		noindex
+	};
+}
+async function homeSeo(request, context) {
+	const current = await shop(request, context);
+	const { settings } = current;
+	const description = describe(current.about, `Compra en ${current.name}.`);
+	let title = settings.cms.settings.seo.metaTitle?.trim() || current.name;
+	if (title.length < 15 && current.about) title = clip(`${title} | ${plainText(current.about)}`, TITLE_LENGTH);
+	const logo = settings.store.logo ?? settings.store.icon;
+	const organization = {
+		"@context": "https://schema.org",
+		"@type": "Organization",
+		name: current.name,
+		url: current.origin
+	};
+	if (logo) organization.logo = logo;
+	return seo(current, {
+		title,
+		description,
+		canonical: absoluteUrl(current.origin, "/"),
+		image: logo,
+		type: "website",
+		jsonLd: [organization, {
+			"@context": "https://schema.org",
+			"@type": "WebSite",
+			name: current.name,
+			url: current.origin,
+			potentialAction: {
+				"@type": "SearchAction",
+				target: {
+					"@type": "EntryPoint",
+					urlTemplate: `${current.origin}/products?q={search_term_string}`
+				},
+				"query-input": "required name=search_term_string"
+			}
+		}]
+	});
+}
+async function productSeo(request, context, product, rating = null) {
+	const current = await shop(request, context);
+	const canonical = absoluteUrl(current.origin, product.url);
+	const images = [product.imageUrl, ...product.images.filter((image) => image.type === "image").map((image) => image.url)].filter((url, index, all) => url && all.indexOf(url) === index);
+	const offer = {
+		"@type": "Offer",
+		url: canonical,
+		price: product.price,
+		priceCurrency: current.settings.store.currency,
+		availability: product.isAvailable ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
+		itemCondition: "https://schema.org/NewCondition"
+	};
+	const data = {
+		"@context": "https://schema.org",
+		"@type": "Product",
+		name: product.name,
+		description: clip(plainText(product.description), 5e3),
+		image: images,
+		offers: offer
+	};
+	const sku = product.variants[0]?.sku;
+	if (sku) data.sku = sku;
+	if (product.brand) data.brand = {
+		"@type": "Brand",
+		name: product.brand
+	};
+	if (rating && rating.averageRating !== null && rating.reviewCount > 0) data.aggregateRating = {
+		"@type": "AggregateRating",
+		ratingValue: Number(rating.averageRating.toFixed(1)),
+		reviewCount: rating.reviewCount
+	};
+	return seo(current, {
+		title: titled(current, product.name),
+		description: describe(product.description, storefrontText(current.translations, "{value0} en {value1}.", {
+			value0: product.name,
+			value1: current.name
+		}), current.about),
+		canonical,
+		image: images[0] ?? null,
+		type: "product",
+		jsonLd: [data, crumbs(current, [{
+			name: product.name,
+			path: product.url
+		}])]
+	});
+}
+async function categorySeo(request, context, category) {
+	const current = await shop(request, context);
+	const trail = [...category.ancestors.map((ancestor) => ({
+		name: ancestor.name,
+		path: ancestor.url
+	})), {
+		name: category.name,
+		path: category.url
+	}];
+	return seo(current, {
+		title: category.metaTitle?.trim() || titled(current, category.name),
+		description: describe(category.metaDescription, category.description, storefrontText(current.translations, "{value0} en {value1}.", {
+			value0: category.name,
+			value1: current.name
+		}), current.about),
+		canonical: absoluteUrl(current.origin, category.url),
+		image: category.imageUrl,
+		type: "website",
+		jsonLd: [crumbs(current, trail)]
+	});
+}
+async function collectionSeo(request, context, collection) {
+	const current = await shop(request, context);
+	const path = `/collections/${collection.slug}`;
+	return seo(current, {
+		title: titled(current, collection.name),
+		description: describe(collection.description, storefrontText(current.translations, "{value0} en {value1}.", {
+			value0: collection.name,
+			value1: current.name
+		}), current.about),
+		canonical: absoluteUrl(current.origin, path),
+		image: collection.imageUrl ?? null,
+		type: "website",
+		jsonLd: [crumbs(current, [{
+			name: collection.name,
+			path
+		}])]
+	});
+}
+async function pageSeo(request, context, input) {
+	const current = await shop(request, context);
+	const path = input.path ?? requestUrl(request).pathname;
+	const title = input.systemTitle ? storefrontText(current.translations, input.title, input.titleValues) : input.title;
+	return seo(current, {
+		title: titled(current, title),
+		description: describe(input.description, storefrontText(current.translations, "{value0} en {value1}.", {
+			value0: title,
+			value1: current.name
+		}), current.about),
+		canonical: absoluteUrl(current.origin, path),
+		image: input.image ?? null,
+		type: input.type ?? "website",
+		jsonLd: [crumbs(current, [{
+			name: title,
+			path
+		}])]
+	}, input.noindex);
+}
+function seoMeta(page) {
+	if (!page) return [];
+	const tags = [
+		{ title: page.title },
+		{
+			name: "description",
+			content: page.description
+		},
+		{
+			tagName: "link",
+			rel: "canonical",
+			href: page.canonical
+		},
+		{
+			property: "og:type",
+			content: page.type
+		},
+		{
+			property: "og:title",
+			content: page.title
+		},
+		{
+			property: "og:description",
+			content: page.description
+		},
+		{
+			property: "og:url",
+			content: page.canonical
+		},
+		{
+			property: "og:site_name",
+			content: page.siteName
+		},
+		{
+			name: "twitter:card",
+			content: page.image ? "summary_large_image" : "summary"
+		}
+	];
+	if (page.image) tags.push({
+		property: "og:image",
+		content: page.image
+	});
+	if (page.noindex) tags.push({
+		name: "robots",
+		content: "noindex, follow"
+	});
+	for (const data of page.jsonLd) tags.push({ "script:ld+json": data });
+	return tags;
+}
+export { categorySeo, collectionSeo, homeSeo, pageSeo, productSeo, seoMeta };

package/dist/page-seo.d.ts

@@ -0,0 +1,34 @@
+import { StorefrontTextValues } from "./storefront-text.js";
+import { MetaDescriptor, RouterContextProvider } from "react-router";
+import { CategoryDetail, Collection, ProductDetail } from "@ecomiq/core";
+type JsonLd = Record<string, unknown>;
+export type PageSeo = {
+  title: string;
+  description: string;
+  canonical: string;
+  image: string | null;
+  type: "website" | "product" | "article";
+  siteName: string;
+  noindex: boolean;
+  jsonLd: JsonLd[];
+};
+export type PageSeoInput = {
+  title: string;
+  systemTitle?: boolean;
+  titleValues?: StorefrontTextValues;
+  description?: string | null;
+  image?: string | null;
+  path?: string;
+  type?: "website" | "article";
+  noindex?: boolean;
+};
+export declare function homeSeo(request: Request, context: Readonly<RouterContextProvider>): Promise<PageSeo>;
+export declare function productSeo(request: Request, context: Readonly<RouterContextProvider>, product: ProductDetail, rating?: {
+  averageRating: number | null;
+  reviewCount: number;
+} | null): Promise<PageSeo>;
+export declare function categorySeo(request: Request, context: Readonly<RouterContextProvider>, category: CategoryDetail): Promise<PageSeo>;
+export declare function collectionSeo(request: Request, context: Readonly<RouterContextProvider>, collection: Collection): Promise<PageSeo>;
+export declare function pageSeo(request: Request, context: Readonly<RouterContextProvider>, input: PageSeoInput): Promise<PageSeo>;
+export declare function seoMeta(page: PageSeo | null | undefined): MetaDescriptor[];
+export {};

package/dist/pages-Ca_Gt6mq.js

@@ -0,0 +1,150 @@
+import { categoryAnalytics, collectionAnalytics, productAnalytics } from "./analytics/events-Dt81tIp1.js";
+import { readCatalog } from "./catalog-7gJ-l5hW.js";
+import { store } from "./store-8Q-_LFrQ.js";
+import { requestUrl, requireCanonical } from "./urls-CpGQPxvf.js";
+import { worker } from "./worker-CNi-gzCu.js";
+import { data, redirect } from "react-router";
+import { CategoryDetailSchema, CollectionSchema, GraphQLResponseError, ProductDetailSchema, ProductSummarySchema, ProductsResponseSchema, graphQLSelection, sanitizeHtml } from "@ecomiq/core";
+import { z } from "zod";
+// src/pages.ts
+const RELATED_LIMIT = 8;
+const RELATED_MAX = 12;
+const ReviewSummarySchema = z.object({
+	averageRating: z.number().nullable(),
+	reviewCount: z.number().int().nonnegative()
+});
+const RouteSchema = z.object({ route: z.object({
+	kind: z.enum([
+		"product",
+		"category",
+		"redirect"
+	]),
+	url: z.string(),
+	product: ProductDetailSchema.extend({
+		related: z.array(ProductSummarySchema),
+		reviewSummary: ReviewSummarySchema
+	}).nullable(),
+	category: CategoryDetailSchema.extend({ products: ProductsResponseSchema }).nullable()
+}).nullable() });
+const ROUTE = `query Route($path: String!, $previewKey: String, $related: Int!, $catalog: StorefrontProductsInput) {
+  route(path: $path, previewKey: $previewKey) {
+    kind
+    url
+    product { ${graphQLSelection(ProductDetailSchema)} related(limit: $related) { ${graphQLSelection(ProductSummarySchema)} } reviewSummary { averageRating reviewCount } }
+    category { ${graphQLSelection(CategoryDetailSchema)} products(input: $catalog) { ${graphQLSelection(ProductsResponseSchema)} } }
+  }
+}`;
+const CollectionPageSchema = z.object({
+	collection: CollectionSchema,
+	products: ProductsResponseSchema
+});
+const COLLECTION = `query Collection($handle: String!, $catalog: StorefrontProductsInput) {
+  collection(slug: $handle) { ${graphQLSelection(CollectionSchema)} }
+  products(input: $catalog) { ${graphQLSelection(ProductsResponseSchema)} }
+}`;
+function productsInput(query) {
+	const { includeFilters: _includeFilters, categoryId: _categoryId, sellers, sort, productTypes, ...rest } = query;
+	return {
+		...rest,
+		...sellers ? { sellerSlugs: sellers } : {},
+		...sort ? { sort: sort.toUpperCase() } : {},
+		...productTypes ? { productTypes: productTypes.map((type) => type.toUpperCase()) } : {}
+	};
+}
+function withoutFilter(result, id) {
+	return {
+		...result,
+		filters: result.filters.filter((filter) => filter.id !== id)
+	};
+}
+function moved(current, url) {
+	const target = new URL(current);
+	target.pathname = url;
+	return redirect(`/${target.pathname.replace(/^\/+/, "")}${target.search}`, 301);
+}
+async function resolvePage(request, context, options = {}) {
+	const current = requestUrl(request);
+	const query = readCatalog(current);
+	delete query.categories;
+	const { productPreview } = context.get(worker);
+	const { route } = await store(context).graphql(ROUTE, RouteSchema, {
+		path: current.pathname,
+		previewKey: productPreview?.key ?? null,
+		related: Math.min(RELATED_MAX, Math.max(1, Math.trunc(options.related ?? RELATED_LIMIT))),
+		catalog: productsInput(query)
+	});
+	if (route === null) throw data(null, { status: 404 });
+	if (route.kind === "redirect") throw moved(current, route.url);
+	requireCanonical(request, route.url);
+	if (route.kind === "product" && route.product) {
+		const { related, reviewSummary, ...product } = route.product;
+		if (product.isPreview && productPreview) productPreview.shown = true;
+		return {
+			kind: "product",
+			product,
+			related: related.filter((item) => item.id !== product.id),
+			reviewSummary,
+			analytics: productAnalytics(product)
+		};
+	}
+	if (route.kind === "category" && route.category) {
+		const { products, ...category } = route.category;
+		const description = category.description === null ? null : sanitizeHtml(category.description);
+		return {
+			kind: "category",
+			category: {
+				...category,
+				description
+			},
+			page: query.page ?? 1,
+			result: withoutFilter(products, "category"),
+			analytics: categoryAnalytics(category, products.products)
+		};
+	}
+	throw data(null, { status: 404 });
+}
+async function productPage(request, context, options = {}) {
+	const page = await resolvePage(request, context, options);
+	if (page.kind !== "product") throw data(null, { status: 404 });
+	return page;
+}
+async function collectionPage(request, context, handle) {
+	const query = {
+		...readCatalog(requestUrl(request)),
+		collections: [handle]
+	};
+	try {
+		const { collection, products } = await store(context).graphql(COLLECTION, CollectionPageSchema, {
+			handle,
+			catalog: productsInput(query)
+		});
+		return {
+			collection,
+			page: query.page ?? 1,
+			result: withoutFilter(products, "collection"),
+			analytics: collectionAnalytics(collection, products.products)
+		};
+	} catch (error) {
+		if (error instanceof GraphQLResponseError && error.errors.some((item) => item.extensions?.code === "NOT_FOUND")) throw data(null, { status: 404 });
+		throw error;
+	}
+}
+function productReviews(context, options) {
+	if (options.reviewCount === 0) return Promise.resolve({
+		reviews: [],
+		reviewCount: 0
+	});
+	return store(context).listProductReviews({
+		productId: options.productId,
+		limit: 200,
+		sortBy: "createdOn",
+		sortDirection: "desc"
+	}).then((result) => ({
+		reviews: result.data,
+		reviewCount: result.totalCount ?? result.data.length
+	})).catch(() => ({
+		reviews: [],
+		reviewCount: 0
+	}));
+}
+export { collectionPage, productPage, productReviews, resolvePage };

package/dist/pages.d.ts

@@ -0,0 +1,45 @@
+import { PageAnalytics } from "./analytics/events.js";
+import { RouterContextProvider } from "react-router";
+import { CategoryDetail, Collection, ProductDetail, ProductSummary, ProductsResponse, StorefrontReview } from "@ecomiq/core";
+import { z } from "zod";
+declare const ReviewSummarySchema: z.ZodObject<{
+  averageRating: z.ZodNullable<z.ZodNumber>;
+  reviewCount: z.ZodNumber;
+}, z.core.$strip>;
+export type ReviewSummary = z.infer<typeof ReviewSummarySchema>;
+export type ProductPage = {
+  kind: "product";
+  product: ProductDetail;
+  related: ProductSummary[];
+  reviewSummary: ReviewSummary;
+  analytics: PageAnalytics;
+};
+export type CategoryPage = {
+  kind: "category";
+  category: CategoryDetail;
+  page: number;
+  result: ProductsResponse;
+  analytics: PageAnalytics;
+};
+export type ResolvedPage = ProductPage | CategoryPage;
+export type CollectionPage = {
+  collection: Collection;
+  page: number;
+  result: ProductsResponse;
+  analytics: PageAnalytics;
+};
+export type ProductReviews = {
+  reviews: StorefrontReview[];
+  reviewCount: number;
+};
+export type PageOptions = {
+  related?: number;
+};
+export declare function resolvePage(request: Request, context: Readonly<RouterContextProvider>, options?: PageOptions): Promise<ResolvedPage>;
+export declare function productPage(request: Request, context: Readonly<RouterContextProvider>, options?: PageOptions): Promise<ProductPage>;
+export declare function collectionPage(request: Request, context: Readonly<RouterContextProvider>, handle: string): Promise<CollectionPage>;
+export declare function productReviews(context: Readonly<RouterContextProvider>, options: {
+  productId: string;
+  reviewCount: number;
+}): Promise<ProductReviews>;
+export {};

package/dist/payment-dialog-frame-B-Q_xQ94.js

@@ -0,0 +1,57 @@
+import { useStorefrontText } from "./storefront-language-DrMjVbmk.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/payment-dialog-frame.tsx
+function PaymentDialogFrame({ title, logo, onClose, note, children }) {
+	const storefrontTranslate = useStorefrontText();
+	const close = useRef(onClose);
+	close.current = onClose;
+	const modal = useRef(null);
+	useEffect(() => {
+		const dialog = modal.current;
+		if (dialog === null) return;
+		const trigger = document.activeElement;
+		dialog.showModal();
+		return () => {
+			dialog.close();
+			if (trigger instanceof HTMLElement && trigger.isConnected) trigger.focus();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("dialog", {
+		ref: modal,
+		role: "dialog",
+		"aria-label": title,
+		onCancel: (event) => {
+			event.preventDefault();
+			close.current();
+		},
+		className: "fixed inset-0 m-auto max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] max-w-md rounded-lg bg-background p-0 text-foreground shadow-xl backdrop:bg-black/50",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative max-h-full w-full max-w-md overflow-y-auto rounded-lg bg-background p-4 text-foreground shadow-xl",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "mb-2 flex items-center justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [logo, /* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium",
+							children: title
+						})]
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => close.current(),
+						"aria-label": storefrontTranslate("Cerrar"),
+						className: "rounded-md px-2 text-lg leading-none text-muted-foreground hover:text-foreground",
+						children: "×"
+					})]
+				}),
+				children,
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-center text-xs text-muted-foreground",
+					children: note
+				})
+			]
+		})
+	});
+}
+export { PaymentDialogFrame };

package/dist/payment-logo-BoPaGJc_.js

@@ -0,0 +1,46 @@
+import { paymentLogoNames, paymentLogoPath } from "./payment-logos-BYvdwYyJ.js";
+import { jsx } from "react/jsx-runtime";
+// src/payment-logo.tsx
+const paymentLogoAliases = /* @__PURE__ */ new Map([
+	["amex", "american_express"],
+	["diners_club", "diners"],
+	["mercado_pago", "mercadopago"],
+	["master", "mastercard"],
+	["manual_yape", "yape"],
+	["manual_plin", "plin"]
+]);
+function paymentLogoCode(code) {
+	const normalized = code.trim().toLowerCase().replaceAll("-", "_");
+	return paymentLogoAliases.get(normalized) ?? normalized;
+}
+function hasPaymentLogo(code) {
+	return paymentLogoNames.has(paymentLogoCode(code));
+}
+function PaymentLogo({ code, className }) {
+	const logoCode = paymentLogoCode(code);
+	const name = paymentLogoNames.get(logoCode);
+	if (name === void 0) return null;
+	return /* @__PURE__ */ jsx("img", {
+		src: paymentLogoPath(logoCode),
+		alt: name,
+		width: 38,
+		height: 24,
+		className,
+		loading: "lazy",
+		decoding: "async"
+	});
+}
+function addLogoCode(codes, code) {
+	const logoCode = paymentLogoCode(code);
+	if (paymentLogoNames.has(logoCode)) codes.add(logoCode);
+}
+function paymentLogoCodes(methods) {
+	const codes = /* @__PURE__ */ new Set();
+	const ordered = [...methods].sort((left, right) => left.sortOrder - right.sortOrder);
+	for (const method of ordered) {
+		for (const brand of method.brands) addLogoCode(codes, brand);
+		if (method.kind === "card" || method.brands.length === 0) addLogoCode(codes, method.code);
+	}
+	return [...codes];
+}
+export { PaymentLogo, hasPaymentLogo, paymentLogoCodes };