@decocms/apps 0.20.1

package/vtex/utils/intelligentSearch.ts

@@ -0,0 +1,84 @@
+import { vtexFetch } from "../client";
+import type {
+  PageType,
+  SelectedFacet,
+  SimulationBehavior,
+  Sort,
+} from "./types";
+
+export const SESSION_COOKIE = "vtex_is_session";
+export const ANONYMOUS_COOKIE = "vtex_is_anonymous";
+
+export const withDefaultFacets = (
+  allFacets: readonly SelectedFacet[],
+) => {
+  return [...allFacets];
+};
+
+export const toPath = (facets: SelectedFacet[]) =>
+  facets.map(({ key, value }) => key ? `${key}/${value}` : value).join("/");
+
+interface Params {
+  query: string;
+  page: number;
+  count: number;
+  sort: Sort;
+  fuzzy: string;
+  locale: string;
+  hideUnavailableItems: boolean;
+  simulationBehavior: SimulationBehavior;
+}
+
+export const withDefaultParams = ({
+  query = "",
+  page = 0,
+  count = 12,
+  sort = "",
+  fuzzy = "auto",
+  locale = "pt-BR",
+  hideUnavailableItems,
+  simulationBehavior = "default",
+}: Partial<Params>) => ({
+  page: page + 1,
+  count,
+  query,
+  sort,
+  ...(fuzzy ? { fuzzy } : {}),
+  locale,
+  hideUnavailableItems: hideUnavailableItems ?? false,
+  simulationBehavior,
+});
+
+export const isFilterParam = (keyFilter: string): boolean =>
+  keyFilter.startsWith("filter.");
+
+const segmentsFromTerm = (term: string) => term.split("/").filter(Boolean);
+
+const segmentsFromSearchParams = (url: string) => {
+  const searchParams = new URLSearchParams(url).entries();
+
+  const categories = Array.from(searchParams).sort()
+    .reduce((acc, [key, value]) => {
+      if (key.includes("filter.category")) {
+        acc.push(value);
+      }
+
+      return acc;
+    }, [] as string[]);
+
+  return categories.length ? categories : segmentsFromTerm(url);
+};
+
+export const pageTypesFromUrl = async (
+  url: string,
+): Promise<PageType[]> => {
+  const segments = segmentsFromSearchParams(url);
+
+  return await Promise.all(
+    segments.map((_, index) =>
+      vtexFetch<PageType>(
+        `/api/catalog_system/pub/portal/pagetype/${segments.slice(0, index + 1).join("/")}`,
+      )
+    ),
+  );
+};

package/vtex/utils/legacy.ts

@@ -0,0 +1,155 @@
+import type { Seo } from "../../commerce/types/commerce";
+import { vtexFetch } from "../client";
+import { slugify } from "./slugify";
+import type { PageType } from "./types";
+import { WrappedSegment } from "./segment";
+
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
+export const toSegmentParams = (
+  { payload: segment }: WrappedSegment,
+) => (Object.fromEntries(
+  Object.entries({
+    utmi_campaign: segment.utmi_campaign ?? undefined,
+    utm_campaign: segment.utm_campaign ?? undefined,
+    utm_source: segment.utm_source ?? undefined,
+    sc: segment.channel ?? undefined,
+  }).filter(([_, v]) => v != undefined),
+));
+
+const PAGE_TYPE_TO_MAP_PARAM = {
+  Brand: "b",
+  Category: "c",
+  Department: "c",
+  SubCategory: "c",
+  Collection: "productClusterIds",
+  Cluster: "productClusterIds",
+  Search: "ft",
+  FullText: "ft",
+  Product: "p",
+  NotFound: null,
+};
+
+const segmentsFromTerm = (term: string) => term.split("/").filter(Boolean);
+
+export const getValidTypesFromPageTypes = (pagetypes: PageType[]) => {
+  return pagetypes
+    .filter((type) => PAGE_TYPE_TO_MAP_PARAM[type.pageType]);
+};
+
+export const pageTypesFromPathname = async (
+  term: string,
+): Promise<PageType[]> => {
+  const segments = segmentsFromTerm(term);
+
+  return await Promise.all(
+    segments.map((_, index) =>
+      vtexFetch<PageType>(
+        `/api/catalog_system/pub/portal/pagetype/${segments.slice(0, index + 1).join("/")}`,
+      )
+    ),
+  );
+};
+
+export const getMapAndTerm = (
+  pageTypes: PageType[],
+) => {
+  const term = pageTypes
+    .map((type, index) =>
+      type.url
+        ? segmentsFromTerm(
+          new URL(`http://${type.url}`).pathname,
+        )[index]
+        : null
+    )
+    .filter(Boolean)
+    .join("/");
+
+  const map = pageTypes
+    .map((type) => PAGE_TYPE_TO_MAP_PARAM[type.pageType])
+    .filter(Boolean)
+    .join(",");
+
+  if (map === "ft" && term === "s") {
+    return ["", ""];
+  }
+
+  return [map, term];
+};
+
+export const pageTypesToBreadcrumbList = (
+  pages: PageType[],
+  baseUrl: string,
+) => {
+  const filteredPages = pages
+    .filter(({ pageType }) =>
+      pageType === "Category" || pageType === "Department" ||
+      pageType === "SubCategory"
+    );
+
+  return filteredPages.map((page, index) => {
+    const position = index + 1;
+    const slug = filteredPages.slice(0, position).map((x) => slugify(x.name!));
+
+    return ({
+      "@type": "ListItem" as const,
+      name: page.name!,
+      item: new URL(`/${slug.join("/")}`, baseUrl).href,
+      position,
+    });
+  });
+};
+
+export const pageTypesToSeo = (
+  pages: PageType[],
+  baseUrl: string,
+  currentPage?: number,
+): Seo | null => {
+  const current = pages.at(-1);
+  const url = new URL(baseUrl);
+  const fullTextSearch = url.searchParams.get("q");
+  const hasMapTermOrSkuId =
+    !!(url.searchParams.get("map") || url.searchParams.get("skuId"));
+
+  if (
+    (!current || current.pageType === "Search" ||
+      current.pageType === "FullText") && fullTextSearch
+  ) {
+    return {
+      title: capitalize(fullTextSearch),
+      description: capitalize(fullTextSearch),
+      canonical: url.href,
+      noIndexing: hasMapTermOrSkuId,
+    };
+  }
+
+  if (!current) {
+    return null;
+  }
+
+  return {
+    title: current.title || current.name || "",
+    description: current.metaTagDescription!,
+    noIndexing: hasMapTermOrSkuId,
+    canonical: toCanonical(
+      new URL(
+        (current.url && current.pageType !== "Collection")
+          ? current.url.replace(/^[^/]*\//, "/")
+            .toLowerCase()
+          : url,
+        url,
+      ),
+      currentPage,
+    ),
+  };
+};
+
+function toCanonical(url: URL, page?: number) {
+  if (typeof page === "number") {
+    url.searchParams.set("page", `${page}`);
+  }
+
+  return url.href;
+}
+
+export { isFilterParam } from "./intelligentSearch";

package/vtex/utils/pickAndOmit.ts

@@ -0,0 +1,30 @@
+export function pick<
+  T extends object,
+  K extends keyof T = keyof T,
+>(
+  keys: K[],
+  obj: T | null | undefined,
+): Pick<T, K> | null {
+  if (!keys.length || !obj) {
+    return null;
+  }
+
+  const entries = keys.map((key) => [key, obj[key]]);
+
+  return Object.fromEntries(entries);
+}
+
+export function omit<T extends object, K extends keyof T>(
+  keys: K[],
+  obj: T | null | undefined,
+): Omit<T, K> | null {
+  if (!keys.length || !obj) {
+    return null;
+  }
+
+  const pickedKeys = (Object.keys(obj) as K[]).filter(
+    (key) => !keys.includes(key),
+  );
+
+  return pick(pickedKeys, obj) as unknown as Omit<T, K>;
+}

package/vtex/utils/proxy.ts

@@ -0,0 +1,196 @@
+/**
+ * VTEX Proxy Utility.
+ *
+ * Proxies storefront requests for /checkout, /account, /api, /files, /arquivos
+ * to the VTEX origin. Essential for checkout and My Account pages to work.
+ *
+ * Designed to be used with TanStack Start API routes or Cloudflare Worker
+ * fetch handlers.
+ */
+
+import { getVtexConfig, vtexHost, type VtexConfig } from "../client";
+import { proxySetCookie } from "./cookies";
+
+export interface VtexProxyOptions {
+  /**
+   * VTEX environment suffix.
+   * @default "vtexcommercestable"
+   */
+  environment?: "vtexcommercestable" | "vtexcommercebeta";
+
+  /**
+   * Additional path prefixes to proxy beyond the defaults.
+   * Example: ["/custom-api/"]
+   */
+  extraPaths?: string[];
+
+  /**
+   * Paths that should NOT be proxied even if they match a prefix.
+   */
+  excludePaths?: string[];
+
+  /**
+   * Whether to rewrite Set-Cookie domains to the storefront's domain.
+   * @default true
+   */
+  rewriteCookieDomain?: boolean;
+
+  /**
+   * Custom headers to inject into every proxied request.
+   */
+  extraHeaders?: Record<string, string>;
+}
+
+const DEFAULT_PROXY_PATHS = [
+  "/checkout",
+  "/checkout/",
+  "/account",
+  "/account/",
+  "/api/",
+  "/files/",
+  "/arquivos/",
+  "/checkout/changeToAnonymousUser/",
+  "/_v/",
+  "/no-cache/",
+  "/graphql/",
+  "/login",
+  "/login/",
+  "/logout",
+  "/logout/",
+  "/assets/",
+  "/_secure/account",
+  "/XMLData/",
+] as const;
+
+const HOP_BY_HOP_HEADERS = new Set([
+  "connection",
+  "keep-alive",
+  "proxy-authenticate",
+  "proxy-authorization",
+  "te",
+  "trailers",
+  "transfer-encoding",
+  "upgrade",
+]);
+
+/**
+ * Returns all path prefixes that should be proxied to VTEX.
+ */
+export function getVtexProxyPaths(options?: VtexProxyOptions): string[] {
+  return [...DEFAULT_PROXY_PATHS, ...(options?.extraPaths ?? [])];
+}
+
+/**
+ * Check if a request path should be proxied to VTEX.
+ */
+export function shouldProxyToVtex(
+  pathname: string,
+  options?: VtexProxyOptions,
+): boolean {
+  const paths = getVtexProxyPaths(options);
+  const excluded = options?.excludePaths ?? [];
+
+  if (excluded.some((ex) => pathname.startsWith(ex))) return false;
+  return paths.some((prefix) => pathname.startsWith(prefix));
+}
+
+function buildOriginUrl(
+  request: Request,
+  config: VtexConfig,
+  environment: string,
+): URL {
+  const url = new URL(request.url);
+  const originHost = vtexHost(environment, config);
+  return new URL(`https://${originHost}${url.pathname}${url.search}`);
+}
+
+function filterHeaders(headers: Headers): Headers {
+  const filtered = new Headers();
+  headers.forEach((value, key) => {
+    if (!HOP_BY_HOP_HEADERS.has(key.toLowerCase())) {
+      filtered.set(key, value);
+    }
+  });
+  return filtered;
+}
+
+/**
+ * Proxy a request to VTEX origin.
+ *
+ * Forwards the request with all cookies and headers, rewrites
+ * Set-Cookie domains on the response, and strips hop-by-hop headers.
+ *
+ * @example
+ * ```ts
+ * // In a TanStack Start API route or catch-all handler
+ * if (shouldProxyToVtex(url.pathname)) {
+ *   return proxyToVtex(request);
+ * }
+ * ```
+ */
+export async function proxyToVtex(
+  request: Request,
+  options?: VtexProxyOptions,
+): Promise<Response> {
+  const config = getVtexConfig();
+  const environment = options?.environment ?? "vtexcommercestable";
+
+  const originUrl = buildOriginUrl(request, config, environment);
+  const forwardHeaders = filterHeaders(new Headers(request.headers));
+
+  forwardHeaders.set("Host", originUrl.hostname);
+  forwardHeaders.set("X-Forwarded-Host", new URL(request.url).hostname);
+  forwardHeaders.set("X-Forwarded-Proto", "https");
+
+  if (options?.extraHeaders) {
+    for (const [k, v] of Object.entries(options.extraHeaders)) {
+      forwardHeaders.set(k, v);
+    }
+  }
+
+  if (config.appKey && config.appToken) {
+    forwardHeaders.set("X-VTEX-API-AppKey", config.appKey);
+    forwardHeaders.set("X-VTEX-API-AppToken", config.appToken);
+  }
+
+  const init: RequestInit = {
+    method: request.method,
+    headers: forwardHeaders,
+    redirect: "manual",
+  };
+
+  if (request.method !== "GET" && request.method !== "HEAD") {
+    init.body = request.body;
+    // @ts-expect-error -- needed for streaming body in Workers
+    init.duplex = "half";
+  }
+
+  const originResponse = await fetch(originUrl.toString(), init);
+
+  const responseHeaders = filterHeaders(new Headers(originResponse.headers));
+
+  if (options?.rewriteCookieDomain !== false) {
+    proxySetCookie(
+      originResponse.headers,
+      responseHeaders,
+      new URL(request.url).origin,
+    );
+  }
+
+  if (originResponse.status >= 300 && originResponse.status < 400) {
+    const location = originResponse.headers.get("location");
+    if (location) {
+      const originVtexHost = vtexHost(environment, config);
+      const storefrontOrigin = new URL(request.url).origin;
+      const vtexOrigin = `https://${originVtexHost}`;
+      const rewritten = location.replace(vtexOrigin, storefrontOrigin);
+      responseHeaders.set("location", rewritten);
+    }
+  }
+
+  return new Response(originResponse.body, {
+    status: originResponse.status,
+    statusText: originResponse.statusText,
+    headers: responseHeaders,
+  });
+}

package/vtex/utils/resourceRange.ts

@@ -0,0 +1,10 @@
+/**
+ * Build REST-Range header values for VTEX paginated APIs.
+ * Ported from deco-cx/apps vtex/utils/resourceRange.ts
+ */
+export function resourceRange(skip: number, take: number) {
+  const from = Math.max(skip, 0);
+  const to = from + Math.min(100, take);
+
+  return { from, to };
+}

package/vtex/utils/segment.ts

@@ -0,0 +1,163 @@
+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/vtex/utils/similars.ts

@@ -0,0 +1,38 @@
+import type { Product } from "../../commerce/types/commerce";
+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;
+	}
+};