@decocms/apps-vtex 7.2.0

package/src/utils/segment.ts

@@ -0,0 +1,152 @@
+import type { Segment } from "./types";
+
+const removeNonLatin1Chars = (str: string) => str.replace(/[^\x00-\xFF]/g, "");
+
+export const SEGMENT_COOKIE_NAME = "vtex_segment";
+export const SALES_CHANNEL_COOKIE = "VTEXSC";
+
+export interface WrappedSegment {
+	payload: Partial<Segment>;
+	token: string;
+}
+
+export const DEFAULT_SEGMENT: Partial<Segment> = {
+	utmi_campaign: null,
+	utmi_page: null,
+	utmi_part: null,
+	utm_campaign: null,
+	utm_source: null,
+	utm_medium: null,
+	channel: "1",
+	cultureInfo: "pt-BR",
+	currencyCode: "BRL",
+	currencySymbol: "R$",
+	countryCode: "BRA",
+};
+
+/**
+ * Stable serialization.
+ *
+ * Even if attributes are in a different order, the final segment
+ * value will be the same. This improves cache hits.
+ */
+export const serializeSegment = ({
+	campaigns,
+	channel,
+	priceTables,
+	regionId,
+	utm_campaign,
+	utm_source,
+	utm_medium,
+	utmi_campaign,
+	utmi_page,
+	utmi_part,
+	currencyCode,
+	currencySymbol,
+	countryCode,
+	cultureInfo,
+	channelPrivacy,
+}: Partial<Segment>): string => {
+	const seg = {
+		campaigns,
+		channel,
+		priceTables,
+		regionId,
+		utm_campaign: utm_campaign && removeNonLatin1Chars(utm_campaign).replace(/[/[\]{}()<>.]/g, ""),
+		utm_source: utm_source && removeNonLatin1Chars(utm_source).replace(/[/[\]{}()<>.]/g, ""),
+		utm_medium: utm_medium && removeNonLatin1Chars(utm_medium).replace(/[/[\]{}()<>.]/g, ""),
+		utmi_campaign: utmi_campaign && removeNonLatin1Chars(utmi_campaign),
+		utmi_page: utmi_page && removeNonLatin1Chars(utmi_page),
+		utmi_part: utmi_part && removeNonLatin1Chars(utmi_part),
+		currencyCode,
+		currencySymbol,
+		countryCode,
+		cultureInfo,
+		channelPrivacy,
+	};
+	return btoa(JSON.stringify(seg));
+};
+
+export const parseSegment = (cookie: string): Partial<Segment> | null => {
+	try {
+		return JSON.parse(atob(cookie));
+	} catch {
+		return null;
+	}
+};
+
+const SEGMENT_QUERY_PARAMS = [
+	"utmi_campaign",
+	"utmi_page",
+	"utmi_part",
+	"utm_campaign",
+	"utm_source",
+	"utm_medium",
+] as const;
+
+export const buildSegmentFromParams = (searchParams: URLSearchParams): Partial<Segment> => {
+	const partialSegment: Partial<Segment> = {};
+	for (const qs of SEGMENT_QUERY_PARAMS) {
+		const param = searchParams.get(qs);
+		if (param) {
+			partialSegment[qs] = param;
+		}
+	}
+
+	const sc = searchParams.get("sc");
+	if (sc) {
+		partialSegment.channel = sc;
+	}
+
+	return partialSegment;
+};
+
+export const withSegmentCookie = (segment: WrappedSegment, headers?: Headers): Headers => {
+	const h = new Headers(headers);
+	if (!segment) return h;
+
+	h.set("cookie", `${SEGMENT_COOKIE_NAME}=${segment.token}`);
+	return h;
+};
+
+function getCookieValue(cookieHeader: string, name: string): string | null {
+	const match = cookieHeader.match(new RegExp(`(?:^|;\\s*)${name}=([^;]+)`));
+	return match?.[1] ?? null;
+}
+
+/**
+ * Build a complete segment from request cookies.
+ * Reads both vtex_segment and VTEXSC cookies.
+ * VTEXSC contains the sales channel and overrides the segment channel.
+ */
+export const buildSegmentFromCookies = (cookieHeader: string): Partial<Segment> => {
+	const segmentCookie = getCookieValue(cookieHeader, SEGMENT_COOKIE_NAME);
+	const vtexsc = getCookieValue(cookieHeader, SALES_CHANNEL_COOKIE);
+
+	const base = segmentCookie ? parseSegment(segmentCookie) : null;
+	const segment: Partial<Segment> = { ...DEFAULT_SEGMENT, ...base };
+
+	if (vtexsc) {
+		segment.channel = vtexsc;
+	}
+
+	return segment;
+};
+
+/**
+ * Check if the current segment represents an anonymous user
+ * (no campaigns, no UTMs, no regionId, no custom priceTables).
+ */
+export const isAnonymous = (segment: Partial<Segment>): boolean => {
+	return (
+		!segment.campaigns &&
+		!segment.utm_campaign &&
+		!segment.utm_source &&
+		!segment.utm_medium &&
+		!segment.utmi_campaign &&
+		!segment.utmi_page &&
+		!segment.utmi_part &&
+		!segment.regionId &&
+		!segment.priceTables
+	);
+};

package/src/utils/similars.ts

@@ -0,0 +1,37 @@
+import type { Product } from "@decocms/apps-commerce/types";
+import { getVtexConfig, vtexFetch } from "../client";
+import { pickSku, toProduct } from "./transform";
+import type { LegacyProduct } from "./types";
+
+export const withIsSimilarTo = async (product: Product): Promise<Product> => {
+	const id = product.isVariantOf?.productGroupID ?? product.inProductGroupWithID;
+
+	if (!id) {
+		return product;
+	}
+
+	try {
+		const rawSimilars = await vtexFetch<LegacyProduct[]>(
+			`/api/catalog_system/pub/products/crossselling/similars/${id}`,
+		);
+
+		if (!rawSimilars?.length) return product;
+
+		const config = getVtexConfig();
+		const baseUrl = config.publicUrl
+			? `https://${config.publicUrl}`
+			: `https://${config.account}.vtexcommercestable.${config.domain ?? "com.br"}`;
+
+		const similars = rawSimilars.map((p) => {
+			const sku = pickSku(p);
+			return toProduct(p, sku, 0, { baseUrl, priceCurrency: "BRL" });
+		});
+
+		return {
+			...product,
+			isSimilarTo: similars,
+		};
+	} catch {
+		return product;
+	}
+};

package/src/utils/sitemap.ts

@@ -0,0 +1,282 @@
+/**
+ * VTEX Sitemap utilities.
+ *
+ * Two flavors:
+ * - `getVtexSitemapEntries()` — flatten VTEX sub-sitemaps into a single
+ *   `SitemapEntry[]` list, for composition with the CMS sitemap generator.
+ * - `createVtexSitemapProxy()` — proxy `/sitemap.xml` and `/sitemap/*`
+ *   straight from VTEX's commerce-stable origin, preserving the sitemap-index
+ *   shape (so crawlers stay within Google's per-file size limit). This is the
+ *   right choice when the storefront has no native sitemap renderer and just
+ *   needs to expose VTEX's existing crawl tree to the public hostname.
+ */
+
+import { getVtexConfig, vtexFetchResponse, vtexHost } from "../client";
+
+export interface SitemapEntry {
+	loc: string;
+	lastmod?: string;
+	changefreq?: "always" | "hourly" | "daily" | "weekly" | "monthly" | "yearly" | "never";
+	priority?: number;
+}
+
+/**
+ * Fetch sitemap entries from VTEX's sitemap API.
+ *
+ * VTEX exposes /sitemap.xml which contains links to sub-sitemaps
+ * (products, categories, brands, etc.). This function fetches the
+ * main sitemap index and extracts all <loc> entries from the
+ * referenced sub-sitemaps.
+ *
+ * @param origin - The storefront origin (e.g., "https://www.mystore.com")
+ * @param options.maxDepth - How many levels of sub-sitemaps to follow (default: 1)
+ * @param options.rewriteHost - Whether to rewrite VTEX hostnames to the storefront origin (default: true)
+ */
+export async function getVtexSitemapEntries(
+	origin: string,
+	options?: {
+		maxDepth?: number;
+		rewriteHost?: boolean;
+		includeBrands?: boolean;
+		includeCategories?: boolean;
+		includeProducts?: boolean;
+	},
+): Promise<SitemapEntry[]> {
+	const config = getVtexConfig();
+	const vtexSitemapHost = vtexHost("vtexcommercestable", config);
+	const rewrite = options?.rewriteHost !== false;
+	const includeProducts = options?.includeProducts !== false;
+	const includeCategories = options?.includeCategories !== false;
+	const includeBrands = options?.includeBrands !== false;
+
+	try {
+		const mainSitemapUrl = `https://${vtexSitemapHost}/sitemap.xml`;
+		const mainResponse = await vtexFetchResponse(mainSitemapUrl);
+		const mainXml = await mainResponse.text();
+
+		const subSitemapUrls = extractLocs(mainXml);
+		const entries: SitemapEntry[] = [];
+
+		const filteredUrls = subSitemapUrls.filter((url) => {
+			const lower = url.toLowerCase();
+			if (!includeProducts && lower.includes("product")) return false;
+			if (!includeCategories && lower.includes("categor")) return false;
+			if (!includeBrands && lower.includes("brand")) return false;
+			return true;
+		});
+
+		const maxDepth = options?.maxDepth ?? 1;
+		if (maxDepth < 1) {
+			return filteredUrls.map((url) => ({
+				loc: rewrite ? rewriteUrl(url, vtexSitemapHost, origin) : url,
+				changefreq: "daily" as const,
+				priority: 0.5,
+			}));
+		}
+
+		const settled = await Promise.allSettled(
+			filteredUrls.map(async (subUrl) => {
+				try {
+					const resp = await vtexFetchResponse(subUrl);
+					const xml = await resp.text();
+					return extractLocs(xml);
+				} catch {
+					return [];
+				}
+			}),
+		);
+
+		const today = new Date().toISOString().split("T")[0];
+
+		for (const result of settled) {
+			if (result.status !== "fulfilled") continue;
+			for (const loc of result.value) {
+				entries.push({
+					loc: rewrite ? rewriteUrl(loc, vtexSitemapHost, origin) : loc,
+					lastmod: today,
+					changefreq: "daily",
+					priority: 0.5,
+				});
+			}
+		}
+
+		return entries;
+	} catch (error) {
+		console.error("[VTEX Sitemap] Failed to fetch VTEX sitemap:", error);
+		return [];
+	}
+}
+
+function extractLocs(xml: string): string[] {
+	const locs: string[] = [];
+	const regex = /<loc>\s*(.*?)\s*<\/loc>/g;
+	let match: RegExpExecArray | null;
+	while ((match = regex.exec(xml)) !== null) {
+		if (match[1]) locs.push(match[1].trim());
+	}
+	return locs;
+}
+
+function rewriteUrl(url: string, vtexSitemapHost: string, origin: string): string {
+	try {
+		const parsed = new URL(url);
+		const originParsed = new URL(origin);
+		const config = getVtexConfig();
+		const domain = config.domain ?? "com.br";
+		if (
+			parsed.hostname === vtexSitemapHost ||
+			parsed.hostname.endsWith(`.vtexcommercestable.${domain}`)
+		) {
+			parsed.protocol = originParsed.protocol;
+			parsed.hostname = originParsed.hostname;
+			parsed.port = originParsed.port;
+		}
+		return parsed.toString();
+	} catch {
+		return url.replace(`https://${vtexSitemapHost}`, origin);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// VTEX sitemap proxy factory
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns true if `pathname` is one of the proxied sitemap paths
+ * (`/sitemap.xml` or any `/sitemap/*` sub-sitemap).
+ */
+export function isVtexSitemapPath(pathname: string): boolean {
+	return pathname === "/sitemap.xml" || pathname.startsWith("/sitemap/");
+}
+
+export interface VtexSitemapProxyConfig {
+	/**
+	 * Extra `<sitemap>` entries to inject into the root sitemap index
+	 * (`/sitemap.xml` only — sub-sitemaps are passed through untouched).
+	 *
+	 * Useful for site-managed sitemaps such as a static search-result
+	 * index (`sitemap-busca.xml`) that VTEX doesn't generate.
+	 *
+	 * Each value is normalized to an absolute URL on the storefront
+	 * origin: leading-slash paths become `${origin}${path}`, and bare
+	 * names become `${origin}/${name}`. Absolute URLs are used as-is.
+	 *
+	 * @example ["/sitemap-busca.xml"]
+	 */
+	extraSitemaps?: string[];
+
+	/**
+	 * VTEX environment for the upstream sitemap fetch.
+	 * @default "vtexcommercestable"
+	 */
+	environment?: "vtexcommercestable" | "vtexcommercebeta";
+
+	/**
+	 * `Cache-Control` header to set on proxied responses. The default
+	 * favors edge caching (Cloudflare honors `s-maxage`) with a long
+	 * stale-while-revalidate window so a slow VTEX origin never blocks
+	 * crawlers.
+	 *
+	 * @default "public, s-maxage=3600, stale-while-revalidate=86400"
+	 */
+	cacheControl?: string;
+
+	/**
+	 * Optional fetch override — primarily for tests. Defaults to the
+	 * platform `fetch`.
+	 */
+	fetchImpl?: typeof fetch;
+}
+
+const DEFAULT_SITEMAP_CACHE_CONTROL = "public, s-maxage=3600, stale-while-revalidate=86400";
+
+function normalizeExtraSitemap(entry: string, origin: string): string {
+	if (entry.startsWith("http://") || entry.startsWith("https://")) return entry;
+	const path = entry.startsWith("/") ? entry : `/${entry}`;
+	return `${origin}${path}`;
+}
+
+/**
+ * Creates a sitemap proxy handler that mirrors VTEX's `/sitemap.xml`
+ * (and sub-sitemaps) onto the storefront origin.
+ *
+ * Returns a function compatible with `createDecoWorkerEntry`'s
+ * `proxyHandler`: it returns `null` for non-sitemap paths, so it
+ * composes naturally with other proxy handlers
+ * (`createVtexCheckoutProxy`, custom logic, etc.).
+ *
+ * The VTEX account is read from the `configureVtex(...)` call done at
+ * worker startup — no per-call account configuration is needed.
+ *
+ * @example
+ * ```ts
+ * import { createVtexSitemapProxy } from "@decocms/apps/vtex/utils/sitemap";
+ * import {
+ *   createVtexCheckoutProxy,
+ *   shouldProxyToVtex,
+ * } from "@decocms/apps/vtex/utils/proxy";
+ *
+ * const proxySitemap = createVtexSitemapProxy({
+ *   extraSitemaps: ["/sitemap-busca.xml"], // optional, site-managed
+ * });
+ * const proxyCheckout = createVtexCheckoutProxy({ ... });
+ *
+ * createDecoWorkerEntry(serverEntry, {
+ *   proxyHandler: async (request, url) => {
+ *     const sitemap = await proxySitemap(request, url);
+ *     if (sitemap) return sitemap;
+ *
+ *     if (!shouldProxyToVtex(url.pathname)) return null;
+ *     return proxyCheckout(request, url);
+ *   },
+ * });
+ * ```
+ */
+export function createVtexSitemapProxy(
+	config: VtexSitemapProxyConfig = {},
+): (request: Request, url: URL) => Promise<Response | null> {
+	const environment = config.environment ?? "vtexcommercestable";
+	const cacheControl = config.cacheControl ?? DEFAULT_SITEMAP_CACHE_CONTROL;
+	const extraSitemaps = config.extraSitemaps ?? [];
+	const fetchImpl = config.fetchImpl ?? fetch;
+
+	return async (_request: Request, url: URL): Promise<Response | null> => {
+		if (!isVtexSitemapPath(url.pathname)) return null;
+
+		// vtexHost() reads the configured account from configureVtex().
+		const vtexSitemapHost = vtexHost(environment);
+		const target = `https://${vtexSitemapHost}${url.pathname}`;
+
+		try {
+			const resp = await fetchImpl(target);
+			if (!resp.ok) {
+				console.error(`[vtex-sitemap] VTEX returned ${resp.status} for ${url.pathname}`);
+				return new Response("Sitemap temporarily unavailable", { status: 502 });
+			}
+
+			let xml = await resp.text();
+			xml = xml.replaceAll(`https://${vtexSitemapHost}`, url.origin);
+
+			if (url.pathname === "/sitemap.xml" && extraSitemaps.length > 0) {
+				const extraEntries = extraSitemaps
+					.map(
+						(s) =>
+							`  <sitemap>\n    <loc>${normalizeExtraSitemap(s, url.origin)}</loc>\n  </sitemap>`,
+					)
+					.join("\n");
+				xml = xml.replace("</sitemapindex>", `${extraEntries}\n</sitemapindex>`);
+			}
+
+			return new Response(xml, {
+				status: 200,
+				headers: {
+					"Content-Type": "application/xml; charset=utf-8",
+					"Cache-Control": cacheControl,
+				},
+			});
+		} catch (err) {
+			console.error("[vtex-sitemap] Failed to proxy VTEX sitemap:", err);
+			return new Response("Sitemap temporarily unavailable", { status: 502 });
+		}
+	};
+}

package/src/utils/slugCache.ts

@@ -0,0 +1,28 @@
+/**
+ * In-flight dedup + SWR cache for VTEX Legacy Catalog slug→product lookups.
+ *
+ * Multiple loaders on the same page (PDP, relatedProducts x3, BuyTogether)
+ * all call `/api/catalog_system/pub/products/search/{slug}/p` for the same slug.
+ * This module routes through vtexCachedFetch which provides in-flight dedup
+ * and stale-while-revalidate caching (3 min TTL for 200 responses).
+ */
+import { getVtexConfig, vtexCachedFetch } from "../client";
+import type { LegacyProduct } from "./types";
+
+export function searchBySlug(linkText: string): Promise<LegacyProduct[] | null> {
+	const config = getVtexConfig();
+	const sc = config.salesChannel;
+	const scParam = sc ? `?sc=${sc}` : "";
+
+	return vtexCachedFetch<LegacyProduct[]>(
+		`/api/catalog_system/pub/products/search/${encodeURIComponent(linkText)}/p${scParam}`,
+	).catch((err) => {
+		console.error(`[VTEX] searchBySlug error for "${linkText}":`, err);
+		return null;
+	});
+}
+
+export async function resolveProductIdBySlug(linkText: string): Promise<string | null> {
+	const products = await searchBySlug(linkText);
+	return products?.length ? products[0].productId : null;
+}

package/src/utils/slugify.ts

@@ -0,0 +1,13 @@
+const mapped = JSON.parse(
+	`{"Á":"A","Ä":"A","Â":"A","À":"A","Ã":"A","Å":"A","Č":"C","Ç":"C","Ć":"C","Ď":"D","É":"E","Ě":"E","Ë":"E","È":"E","Ê":"E","Ẽ":"E","Ĕ":"E","Ȇ":"E","Í":"I","Ì":"I","Î":"I","Ï":"I","Ň":"N","Ñ":"N","Ó":"O","Ö":"O","Ò":"O","Ô":"O","Õ":"O","Ø":"O","Ř":"R","Ŕ":"R","Š":"S","Ť":"T","Ú":"U","Ů":"U","Ü":"U","Ù":"U","Û":"U","Ý":"Y","Ÿ":"Y","Ž":"Z","á":"a","ä":"a","â":"a","à":"a","ã":"a","å":"a","č":"c","ç":"c","ć":"c","ď":"d","é":"e","ě":"e","ë":"e","è":"e","ê":"e","ẽ":"e","ĕ":"e","ȇ":"e","í":"i","ì":"i","î":"i","ï":"i","ň":"n","ñ":"n","ó":"o","ö":"o","ò":"o","ô":"o","õ":"o","ø":"o","ð":"o","ř":"r","ŕ":"r","š":"s","ť":"t","ú":"u","ů":"u","ü":"u","ù":"u","û":"u","ý":"y","ÿ":"y","ž":"z","þ":"b","Þ":"B","Đ":"D","đ":"d","ß":"B","Æ":"A","a":"a"}`,
+);
+
+export const slugify = (str: string) =>
+	str
+		.replace(/,/g, "")
+		.replace(/[·/_,:]/g, "-")
+		.replace(/[*+~.()'"!:@&[\]`/ %$#?{}|><=_^]/g, "-")
+		.split("")
+		.map((char) => mapped[char] ?? char)
+		.join("")
+		.toLowerCase();