@decocms/apps 0.23.3 → 0.25.0

package/vtex/inline-loaders/productList.ts

@@ -5,159 +5,153 @@
  * Supports: query search, collection IDs, SKU IDs, facets, sort, and
  * hideUnavailableItems — matching the original productList.ts behavior.
  */
-import { intelligentSearch, getVtexConfig, toFacetPath } from "../client";
-import { toProduct, pickSku, sortProducts } from "../utils/transform";
-import type { Product as ProductVTEX } from "../utils/types";
+
 import type { Product } from "../../commerce/types/commerce";
+import { getVtexConfig, intelligentSearch, toFacetPath } from "../client";
+import { pickSku, sortProducts, toProduct } from "../utils/transform";
+import type { Product as ProductVTEX } from "../utils/types";
 
 export interface ProductListProps {
-  props?: CollectionProps | QueryProps | ProductIDProps | FacetsProps;
-  query?: string;
-  count?: number;
-  sort?: string;
-  collection?: string;
-  hideUnavailableItems?: boolean;
+	props?: CollectionProps | QueryProps | ProductIDProps | FacetsProps;
+	query?: string;
+	count?: number;
+	sort?: string;
+	collection?: string;
+	hideUnavailableItems?: boolean;
 }
 
 interface CollectionProps {
-  collection: string;
-  count?: number;
-  sort?: string;
-  hideUnavailableItems?: boolean;
+	collection: string;
+	count?: number;
+	sort?: string;
+	hideUnavailableItems?: boolean;
 }
 
 interface QueryProps {
-  query: string;
-  count?: number;
-  sort?: string;
-  fuzzy?: string;
-  hideUnavailableItems?: boolean;
+	query: string;
+	count?: number;
+	sort?: string;
+	fuzzy?: string;
+	hideUnavailableItems?: boolean;
 }
 
 interface ProductIDProps {
-  ids: string[];
-  hideUnavailableItems?: boolean;
+	ids: string[];
+	hideUnavailableItems?: boolean;
 }
 
 interface FacetsProps {
-  query?: string;
-  facets: string;
-  count?: number;
-  sort?: string;
-  hideUnavailableItems?: boolean;
+	query?: string;
+	facets: string;
+	count?: number;
+	sort?: string;
+	hideUnavailableItems?: boolean;
 }
 
 function isCollectionProps(p: any): p is CollectionProps {
-  return typeof p?.collection === "string";
+	return typeof p?.collection === "string";
 }
 function isProductIDProps(p: any): p is ProductIDProps {
-  return Array.isArray(p?.ids) && p.ids.length > 0;
+	return Array.isArray(p?.ids) && p.ids.length > 0;
 }
 function isFacetsProps(p: any): p is FacetsProps {
-  return typeof p?.facets === "string";
+	return typeof p?.facets === "string";
 }
 
 function resolveParams(props: ProductListProps): {
-  query: string;
-  count: number;
-  sort: string;
-  facetPath: string;
-  fuzzy?: string;
-  hideUnavailableItems: boolean;
-  ids?: string[];
+	query: string;
+	count: number;
+	sort: string;
+	facetPath: string;
+	fuzzy?: string;
+	hideUnavailableItems: boolean;
+	ids?: string[];
 } {
-  const inner = props.props ?? props;
-
-  if (isProductIDProps(inner)) {
-    return {
-      query: `sku:${inner.ids.join(";")}`,
-      count: inner.ids.length,
-      sort: "",
-      facetPath: "",
-      hideUnavailableItems: inner.hideUnavailableItems ?? false,
-      ids: inner.ids,
-    };
-  }
-
-  if (isFacetsProps(inner)) {
-    return {
-      query: inner.query ?? "",
-      count: inner.count ?? 12,
-      sort: inner.sort ?? "",
-      facetPath: inner.facets,
-      hideUnavailableItems: inner.hideUnavailableItems ?? false,
-    };
-  }
-
-  if (isCollectionProps(inner)) {
-    return {
-      query: "",
-      count: inner.count ?? 12,
-      sort: inner.sort ?? "",
-      facetPath: toFacetPath([{ key: "productClusterIds", value: inner.collection }]),
-      hideUnavailableItems: inner.hideUnavailableItems ?? false,
-    };
-  }
-
-  return {
-    query: (inner as any).query ?? "",
-    count: (inner as any).count ?? 12,
-    sort: (inner as any).sort ?? "",
-    facetPath: "",
-    fuzzy: (inner as any).fuzzy,
-    hideUnavailableItems: (inner as any).hideUnavailableItems ?? false,
-  };
+	const inner = props.props ?? props;
+
+	if (isProductIDProps(inner)) {
+		return {
+			query: `sku:${inner.ids.join(";")}`,
+			count: inner.ids.length,
+			sort: "",
+			facetPath: "",
+			hideUnavailableItems: inner.hideUnavailableItems ?? false,
+			ids: inner.ids,
+		};
+	}
+
+	if (isFacetsProps(inner)) {
+		return {
+			query: inner.query ?? "",
+			count: inner.count ?? 12,
+			sort: inner.sort ?? "",
+			facetPath: inner.facets,
+			hideUnavailableItems: inner.hideUnavailableItems ?? false,
+		};
+	}
+
+	if (isCollectionProps(inner)) {
+		return {
+			query: "",
+			count: inner.count ?? 12,
+			sort: inner.sort ?? "",
+			facetPath: toFacetPath([{ key: "productClusterIds", value: inner.collection }]),
+			hideUnavailableItems: inner.hideUnavailableItems ?? false,
+		};
+	}
+
+	return {
+		query: (inner as any).query ?? "",
+		count: (inner as any).count ?? 12,
+		sort: (inner as any).sort ?? "",
+		facetPath: "",
+		fuzzy: (inner as any).fuzzy,
+		hideUnavailableItems: (inner as any).hideUnavailableItems ?? false,
+	};
 }
 
-export default async function vtexProductList(
-  props: ProductListProps,
-): Promise<Product[] | null> {
-  try {
-    const { query, count, sort, facetPath, fuzzy, hideUnavailableItems, ids } =
-      resolveParams(props);
-
-    const config = getVtexConfig();
-    const locale = config.locale ?? "pt-BR";
-
-    const params: Record<string, string> = {
-      page: "1",
-      count: String(count),
-      locale,
-      hideUnavailableItems: String(hideUnavailableItems),
-    };
-    if (query) params.query = query;
-    if (sort) params.sort = sort;
-    if (fuzzy) params.fuzzy = fuzzy;
-
-    const endpoint = facetPath
-      ? `/product_search/${facetPath}`
-      : "/product_search/";
-
-    const data = await intelligentSearch<{ products: ProductVTEX[] }>(
-      endpoint,
-      params,
-    );
-
-    const vtexProducts = data.products ?? [];
-    const baseUrl = config.publicUrl
-      ? `https://${config.publicUrl}`
-      : `https://${config.account}.vtexcommercestable.${config.domain ?? "com.br"}`;
-
-    let products = vtexProducts.map((p) => {
-      const fetchedSkus = ids ? new Set(ids) : null;
-      const preferredSku = fetchedSkus
-        ? p.items.find((item) => fetchedSkus.has(item.itemId)) ?? pickSku(p)
-        : pickSku(p);
-      return toProduct(p, preferredSku, 0, { baseUrl, priceCurrency: "BRL" });
-    });
-
-    if (ids) {
-      products = sortProducts(products, ids, "sku");
-    }
-
-    return products;
-  } catch (error) {
-    console.error("[VTEX] ProductList error:", error);
-    return null;
-  }
+export default async function vtexProductList(props: ProductListProps): Promise<Product[] | null> {
+	try {
+		const { query, count, sort, facetPath, fuzzy, hideUnavailableItems, ids } =
+			resolveParams(props);
+
+		const config = getVtexConfig();
+		const locale = config.locale ?? "pt-BR";
+
+		const params: Record<string, string> = {
+			page: "1",
+			count: String(count),
+			locale,
+			hideUnavailableItems: String(hideUnavailableItems),
+		};
+		if (query) params.query = query;
+		if (sort) params.sort = sort;
+		if (fuzzy) params.fuzzy = fuzzy;
+
+		const endpoint = facetPath ? `/product_search/${facetPath}` : "/product_search/";
+
+		const data = await intelligentSearch<{ products: ProductVTEX[] }>(endpoint, params);
+
+		const vtexProducts = data.products ?? [];
+		const baseUrl = config.publicUrl
+			? `https://${config.publicUrl}`
+			: `https://${config.account}.vtexcommercestable.${config.domain ?? "com.br"}`;
+
+		let products = vtexProducts.map((p) => {
+			const fetchedSkus = ids ? new Set(ids) : null;
+			const preferredSku = fetchedSkus
+				? (p.items.find((item) => fetchedSkus.has(item.itemId)) ?? pickSku(p))
+				: pickSku(p);
+			return toProduct(p, preferredSku, 0, { baseUrl, priceCurrency: "BRL" });
+		});
+
+		if (ids) {
+			products = sortProducts(products, ids, "sku");
+		}
+
+		return products;
+	} catch (error) {
+		console.error("[VTEX] ProductList error:", error);
+		return null;
+	}
 }

package/vtex/inline-loaders/productListShelf.ts

@@ -0,0 +1,159 @@
+/**
+ * Lean product list loader for shelf/card display.
+ * Same API call as productList.ts but uses toProductShelf() for ~90% smaller payloads.
+ *
+ * Use this loader for ProductShelf sections where only card-level data is needed
+ * (name, URL, images, price, installments, PIX, availability, brand).
+ */
+
+import type { Product } from "../../commerce/types/commerce";
+import { getVtexConfig, intelligentSearch, toFacetPath } from "../client";
+import { pickSku, sortProducts, toProductShelf } from "../utils/transform";
+import type { Product as ProductVTEX } from "../utils/types";
+
+export interface ProductListProps {
+	props?: CollectionProps | QueryProps | ProductIDProps | FacetsProps;
+	query?: string;
+	count?: number;
+	sort?: string;
+	collection?: string;
+	hideUnavailableItems?: boolean;
+}
+
+interface CollectionProps {
+	collection: string;
+	count?: number;
+	sort?: string;
+	hideUnavailableItems?: boolean;
+}
+
+interface QueryProps {
+	query: string;
+	count?: number;
+	sort?: string;
+	fuzzy?: string;
+	hideUnavailableItems?: boolean;
+}
+
+interface ProductIDProps {
+	ids: string[];
+	hideUnavailableItems?: boolean;
+}
+
+interface FacetsProps {
+	query?: string;
+	facets: string;
+	count?: number;
+	sort?: string;
+	hideUnavailableItems?: boolean;
+}
+
+function isCollectionProps(p: any): p is CollectionProps {
+	return typeof p?.collection === "string";
+}
+function isProductIDProps(p: any): p is ProductIDProps {
+	return Array.isArray(p?.ids) && p.ids.length > 0;
+}
+function isFacetsProps(p: any): p is FacetsProps {
+	return typeof p?.facets === "string";
+}
+
+function resolveParams(props: ProductListProps): {
+	query: string;
+	count: number;
+	sort: string;
+	facetPath: string;
+	fuzzy?: string;
+	hideUnavailableItems: boolean;
+	ids?: string[];
+} {
+	const inner = props.props ?? props;
+
+	if (isProductIDProps(inner)) {
+		return {
+			query: `sku:${inner.ids.join(";")}`,
+			count: inner.ids.length,
+			sort: "",
+			facetPath: "",
+			hideUnavailableItems: inner.hideUnavailableItems ?? false,
+			ids: inner.ids,
+		};
+	}
+
+	if (isFacetsProps(inner)) {
+		return {
+			query: inner.query ?? "",
+			count: inner.count ?? 12,
+			sort: inner.sort ?? "",
+			facetPath: inner.facets,
+			hideUnavailableItems: inner.hideUnavailableItems ?? false,
+		};
+	}
+
+	if (isCollectionProps(inner)) {
+		return {
+			query: "",
+			count: inner.count ?? 12,
+			sort: inner.sort ?? "",
+			facetPath: toFacetPath([{ key: "productClusterIds", value: inner.collection }]),
+			hideUnavailableItems: inner.hideUnavailableItems ?? false,
+		};
+	}
+
+	return {
+		query: (inner as any).query ?? "",
+		count: (inner as any).count ?? 12,
+		sort: (inner as any).sort ?? "",
+		facetPath: "",
+		fuzzy: (inner as any).fuzzy,
+		hideUnavailableItems: (inner as any).hideUnavailableItems ?? false,
+	};
+}
+
+export default async function vtexProductListShelf(
+	props: ProductListProps,
+): Promise<Product[] | null> {
+	try {
+		const { query, count, sort, facetPath, fuzzy, hideUnavailableItems, ids } =
+			resolveParams(props);
+
+		const config = getVtexConfig();
+		const locale = config.locale ?? "pt-BR";
+
+		const params: Record<string, string> = {
+			page: "1",
+			count: String(count),
+			locale,
+			hideUnavailableItems: String(hideUnavailableItems),
+		};
+		if (query) params.query = query;
+		if (sort) params.sort = sort;
+		if (fuzzy) params.fuzzy = fuzzy;
+
+		const endpoint = facetPath ? `/product_search/${facetPath}` : "/product_search/";
+
+		const data = await intelligentSearch<{ products: ProductVTEX[] }>(endpoint, params);
+
+		const vtexProducts = data.products ?? [];
+		const baseUrl = config.publicUrl
+			? `https://${config.publicUrl}`
+			: `https://${config.account}.vtexcommercestable.${config.domain ?? "com.br"}`;
+
+		let products = vtexProducts.map((p) => {
+			const fetchedSkus = ids ? new Set(ids) : null;
+			const preferredSku = fetchedSkus
+				? (p.items.find((item) => fetchedSkus.has(item.itemId)) ?? pickSku(p))
+				: pickSku(p);
+			return toProductShelf(p, preferredSku, 0, { baseUrl, priceCurrency: "BRL" });
+		});
+
+		if (ids) {
+			products = sortProducts(products, ids, "sku");
+		}
+
+		return products;
+	} catch (error) {
+		console.error("[VTEX] ProductListShelf error:", error);
+		return null;
+	}
+}

package/vtex/inline-loaders/productListingPage.ts

@@ -149,18 +149,13 @@ function facetToToggle(
 	};
 }
 
-function toFilter(
-	selectedFacets: SelectedFacet[],
-	paramsToPersist?: URLSearchParams,
-) {
+function toFilter(selectedFacets: SelectedFacet[], paramsToPersist?: URLSearchParams) {
 	return (facet: ISFacet) => ({
 		"@type": "FilterToggle" as const,
 		key: facet.key,
 		label: facet.name,
 		quantity: facet.quantity,
-		values: facet.values.map(
-			facetToToggle(selectedFacets, facet.key, paramsToPersist),
-		),
+		values: facet.values.map(facetToToggle(selectedFacets, facet.key, paramsToPersist)),
 	});
 }
 
@@ -169,9 +164,7 @@ function toFilter(
 function pageTypesToBreadcrumb(pageTypes: PageType[]) {
 	const filtered = pageTypes.filter(
 		(pt) =>
-			pt.pageType === "Category" ||
-			pt.pageType === "Department" ||
-			pt.pageType === "SubCategory",
+			pt.pageType === "Category" || pt.pageType === "Department" || pt.pageType === "SubCategory",
 	);
 	return filtered.map((page, index) => {
 		const position = index + 1;
@@ -268,12 +261,8 @@ function isValidPLPPath(path: string): boolean {
  * 4. Transform facets to FilterToggle format
  * 5. Build pagination from IS response
  */
-export default async function vtexProductListingPage(
-	props: PLPProps,
-): Promise<any | null> {
-	const pageUrl = props.__pageUrl
-		? new URL(props.__pageUrl, "https://localhost")
-		: null;
+export default async function vtexProductListingPage(props: PLPProps): Promise<any | null> {
+	const pageUrl = props.__pageUrl ? new URL(props.__pageUrl, "https://localhost") : null;
 
 	const query = props.query ?? pageUrl?.searchParams.get("q") ?? "";
 	const countFromUrl = pageUrl?.searchParams.get("PS");
@@ -283,21 +272,14 @@ export default async function vtexProductListingPage(
 	const fuzzy = props.fuzzy ?? pageUrl?.searchParams.get("fuzzy") ?? undefined;
 	const pageFromUrl = pageUrl?.searchParams.get("page");
 	const rawPage = props.page ?? (pageFromUrl ? Number(pageFromUrl) - 1 : 0);
-	const page =
-		Number.isFinite(rawPage) && rawPage >= 0 ? Math.floor(rawPage) : 0;
+	const page = Number.isFinite(rawPage) && rawPage >= 0 ? Math.floor(rawPage) : 0;
 
-	const {
-		selectedFacets: cmsSelectedFacets,
-		hideUnavailableItems = false,
-		__pagePath,
-	} = props;
+	const { selectedFacets: cmsSelectedFacets, hideUnavailableItems = false, __pagePath } = props;
 
 	try {
 		// 1. Resolve selected facets (CMS + URL filter.* params, matching original)
 		let facets: SelectedFacet[] =
-			cmsSelectedFacets && cmsSelectedFacets.length > 0
-				? [...cmsSelectedFacets]
-				: [];
+			cmsSelectedFacets && cmsSelectedFacets.length > 0 ? [...cmsSelectedFacets] : [];
 
 		// Extract filter.* params from URL (e.g. filter.category-1=telhas)
 		if (pageUrl) {
@@ -344,9 +326,7 @@ export default async function vtexProductListingPage(
 			hideUnavailableItems,
 		});
 
-		const productEndpoint = facetPath
-			? `/product_search/${facetPath}`
-			: "/product_search/";
+		const productEndpoint = facetPath ? `/product_search/${facetPath}` : "/product_search/";
 
 		const facetsEndpoint = facetPath ? `/facets/${facetPath}` : "/facets/";
 
@@ -356,11 +336,7 @@ export default async function vtexProductListingPage(
 			intelligentSearch<ISFacetsResult>(facetsEndpoint, params),
 		]);
 
-		const {
-			products: vtexProducts,
-			pagination,
-			recordsFiltered,
-		} = productsResult;
+		const { products: vtexProducts, pagination, recordsFiltered } = productsResult;
 
 		// 3. Transform products using shared transform pipeline (same as deco-cx/apps)
 		const baseUrl = config.publicUrl

package/vtex/inline-loaders/relatedProducts.ts

@@ -69,9 +69,7 @@ export default async function vtexRelatedProducts(
 
 		if (props.hideUnavailableItems) {
 			result = result.filter((p) =>
-				p.offers?.offers?.some(
-					(o) => o.availability === "https://schema.org/InStock",
-				),
+				p.offers?.offers?.some((o) => o.availability === "https://schema.org/InStock"),
 			);
 		}
 

package/vtex/inline-loaders/suggestions.ts

@@ -2,48 +2,45 @@
  * IS autocomplete suggestions loader.
  * Maps VTEX IS response to commerce Suggestion type.
  */
-import { intelligentSearch, getVtexConfig, toFacetPath } from "../client";
-import { toProduct, pickSku } from "../utils/transform";
+
+import type { Product, Suggestion } from "../../commerce/types/commerce";
+import { getVtexConfig, intelligentSearch } from "../client";
+import { pickSku, toProduct } from "../utils/transform";
 import type { Product as ProductVTEX } from "../utils/types";
-import type { Suggestion, Product } from "../../commerce/types/commerce";
 
 export interface SuggestionsProps {
-  query?: string;
-  count?: number;
+	query?: string;
+	count?: number;
 }
 
-export default async function vtexSuggestions(
-  props: SuggestionsProps,
-): Promise<Suggestion | null> {
-  const query = props.query || "";
-  if (!query.trim()) return { searches: [], products: [] };
-
-  try {
-    const data = await intelligentSearch<{
-      searches: Array<{ term: string; count: number }>;
-      products: ProductVTEX[];
-    }>("/autocomplete_suggestions/", { query });
-
-    const searches = (data.searches ?? []).map((s) => ({
-      term: s.term,
-      hits: s.count || 0,
-    }));
-
-    const config = getVtexConfig();
-    const baseUrl = config.publicUrl
-      ? `https://${config.publicUrl}`
-      : `https://${config.account}.vtexcommercestable.${config.domain ?? "com.br"}`;
-
-    const products: Product[] = (data.products ?? [])
-      .slice(0, props.count ?? 4)
-      .map((p) => {
-        const sku = pickSku(p);
-        return toProduct(p, sku, 0, { baseUrl, priceCurrency: "BRL" });
-      });
-
-    return { searches, products };
-  } catch (error) {
-    console.error("[VTEX] Suggestions error:", error);
-    return null;
-  }
+export default async function vtexSuggestions(props: SuggestionsProps): Promise<Suggestion | null> {
+	const query = props.query || "";
+	if (!query.trim()) return { searches: [], products: [] };
+
+	try {
+		const data = await intelligentSearch<{
+			searches: Array<{ term: string; count: number }>;
+			products: ProductVTEX[];
+		}>("/autocomplete_suggestions/", { query });
+
+		const searches = (data.searches ?? []).map((s) => ({
+			term: s.term,
+			hits: s.count || 0,
+		}));
+
+		const config = getVtexConfig();
+		const baseUrl = config.publicUrl
+			? `https://${config.publicUrl}`
+			: `https://${config.account}.vtexcommercestable.${config.domain ?? "com.br"}`;
+
+		const products: Product[] = (data.products ?? []).slice(0, props.count ?? 4).map((p) => {
+			const sku = pickSku(p);
+			return toProduct(p, sku, 0, { baseUrl, priceCurrency: "BRL" });
+		});
+
+		return { searches, products };
+	} catch (error) {
+		console.error("[VTEX] Suggestions error:", error);
+		return null;
+	}
 }