@decocms/apps-vtex 7.24.0 → 7.26.0

package/src/loaders/intelligentSearch/productDetailsPage.ts

@@ -6,6 +6,7 @@
 
 import type { ProductDetailsPage } from "@decocms/apps-commerce/types";
 import { getVtexConfig, vtexCachedFetch } from "../../client";
+import PDPDefaultPath from "../paths/PDPDefaultPath";
 import { searchBySlug } from "../../utils/slugCache";
 import { pickSku, toProductPage } from "../../utils/transform";
 import type { LegacyProduct } from "../../utils/types";
@@ -42,10 +43,27 @@ export default async function vtexProductDetailsPage(
 		variantIncludeImage = true,
 		variantIncludeInventory = true,
 	} = props;
-	if (!slug) return null;
 
 	try {
-		const linkText = slug.replace(/\/p$/, "").replace(/^\//, "").toLowerCase();
+		// Only the admin hits the PDP at its raw route pattern (`/:slug/p`), so the
+		// `slug` route-param resolves to the literal placeholder `:slug` — there's
+		// no real product in the URL, so render the best seller as a preview.
+		//
+		// This is NOT a general fallback: a concrete slug that resolves to no
+		// product (e.g. `/dssadals/p`) must still 404 like any missing product, and
+		// a genuinely absent slug must NOT pull in an unrelated product either. So
+		// we trigger ONLY on the `:`-prefixed placeholder, never on empty/missing.
+		// Mirrors deco-cx/apps' PDPDefaultPath behavior.
+		let effectiveSlug = slug;
+
+		if (slug?.startsWith(":")) {
+			const defaultPaths = await PDPDefaultPath({ count: 1 });
+			effectiveSlug = defaultPaths?.possiblePaths[0];
+		}
+
+		if (!effectiveSlug) return null;
+
+		const linkText = effectiveSlug.replace(/\/p$/, "").replace(/^\//, "").toLowerCase();
 		const config = getVtexConfig();
 		const sc = config.salesChannel;
 

package/src/loaders/paths/PDPDefaultPath.ts

@@ -0,0 +1,51 @@
+/**
+ * PDP default-path resolver.
+ *
+ * Ported from deco-cx/apps (`vtex/loaders/paths/PDPDefaultPath.ts`). When a
+ * Product page is previewed/configured in the CMS, it is resolved at its raw
+ * route pattern (`/:slug/p`), so the `slug` route-param comes through as the
+ * literal placeholder `:slug` — there is no concrete product in the URL. Rather
+ * than render a 404, we fall back to a real product — the best seller — so the
+ * PDP has something to show in the admin.
+ *
+ * We query Intelligent Search for the top-selling, in-stock product and return
+ * its `linkText` as the slug the PDP loader should render.
+ */
+import { intelligentSearch } from "../../client";
+
+export interface PDPDefaultPathProps {
+	/** How many candidate paths to fetch. Defaults to 1. */
+	count?: number;
+}
+
+export interface DefaultPathResult {
+	possiblePaths: string[];
+}
+
+export default async function PDPDefaultPath(
+	props: PDPDefaultPathProps = {},
+): Promise<DefaultPathResult | null> {
+	const { count = 1 } = props;
+
+	try {
+		const data = await intelligentSearch<{ products?: Array<{ linkText?: string }> }>(
+			"/product_search/",
+			{
+				page: "1",
+				count: String(count),
+				query: "",
+				sort: "orders:desc",
+				hideUnavailableItems: "true",
+			},
+		);
+
+		const possiblePaths = (data.products ?? [])
+			.map((p) => p.linkText)
+			.filter((linkText): linkText is string => Boolean(linkText));
+
+		return { possiblePaths };
+	} catch (error) {
+		console.error("[VTEX] PDPDefaultPath error:", error);
+		return null;
+	}
+}

package/src/manifest.gen.ts

@@ -17,6 +17,11 @@ import * as loaders_address from "./loaders/address";
 import * as loaders_autocomplete from "./loaders/autocomplete";
 import * as loaders_brands from "./loaders/brands";
 import * as loaders_cart from "./loaders/cart";
+import * as loaders_cart_attachments from "./loaders/cart/attachments";
+import * as loaders_cart_full from "./loaders/cart/full";
+import * as loaders_cart_gifts from "./loaders/cart/gifts";
+import * as loaders_cart_shipping from "./loaders/cart/shipping";
+import * as loaders_cart_summary from "./loaders/cart/summary";
 import * as loaders_catalog from "./loaders/catalog";
 import * as loaders_collections from "./loaders/collections";
 import * as loaders_legacy from "./loaders/legacy";
@@ -35,44 +40,49 @@ import * as loaders_wishlistProducts from "./loaders/wishlistProducts";
 import * as loaders_workflow from "./loaders/workflow";
 
 const manifest = {
-	name: "vtex",
-	loaders: {
-		"vtex/loaders/address": loaders_address,
-		"vtex/loaders/autocomplete": loaders_autocomplete,
-		"vtex/loaders/brands": loaders_brands,
-		"vtex/loaders/cart": loaders_cart,
-		"vtex/loaders/catalog": loaders_catalog,
-		"vtex/loaders/collections": loaders_collections,
-		"vtex/loaders/legacy": loaders_legacy,
-		"vtex/loaders/logistics": loaders_logistics,
-		"vtex/loaders/navbar": loaders_navbar,
-		"vtex/loaders/orders": loaders_orders,
-		"vtex/loaders/pageType": loaders_pageType,
-		"vtex/loaders/payment": loaders_payment,
-		"vtex/loaders/profile": loaders_profile,
-		"vtex/loaders/promotion": loaders_promotion,
-		"vtex/loaders/search": loaders_search,
-		"vtex/loaders/session": loaders_session,
-		"vtex/loaders/user": loaders_user,
-		"vtex/loaders/wishlist": loaders_wishlist,
-		"vtex/loaders/wishlistProducts": loaders_wishlistProducts,
-		"vtex/loaders/workflow": loaders_workflow,
-	},
-	actions: {
-		"vtex/actions/address": actions_address,
-		"vtex/actions/analytics/sendEvent": actions_analytics_sendEvent,
-		"vtex/actions/auth": actions_auth,
-		"vtex/actions/checkout": actions_checkout,
-		"vtex/actions/masterData": actions_masterData,
-		"vtex/actions/misc": actions_misc,
-		"vtex/actions/newsletter": actions_newsletter,
-		"vtex/actions/orders": actions_orders,
-		"vtex/actions/profile": actions_profile,
-		"vtex/actions/session": actions_session,
-		"vtex/actions/trigger": actions_trigger,
-		"vtex/actions/wishlist": actions_wishlist,
-	},
-	sections: {},
+  name: "vtex",
+  loaders: {
+    "vtex/loaders/address": loaders_address,
+    "vtex/loaders/autocomplete": loaders_autocomplete,
+    "vtex/loaders/brands": loaders_brands,
+    "vtex/loaders/cart": loaders_cart,
+    "vtex/loaders/cart/summary": loaders_cart_summary,
+    "vtex/loaders/cart/full": loaders_cart_full,
+    "vtex/loaders/cart/shipping": loaders_cart_shipping,
+    "vtex/loaders/cart/gifts": loaders_cart_gifts,
+    "vtex/loaders/cart/attachments": loaders_cart_attachments,
+    "vtex/loaders/catalog": loaders_catalog,
+    "vtex/loaders/collections": loaders_collections,
+    "vtex/loaders/legacy": loaders_legacy,
+    "vtex/loaders/logistics": loaders_logistics,
+    "vtex/loaders/navbar": loaders_navbar,
+    "vtex/loaders/orders": loaders_orders,
+    "vtex/loaders/pageType": loaders_pageType,
+    "vtex/loaders/payment": loaders_payment,
+    "vtex/loaders/profile": loaders_profile,
+    "vtex/loaders/promotion": loaders_promotion,
+    "vtex/loaders/search": loaders_search,
+    "vtex/loaders/session": loaders_session,
+    "vtex/loaders/user": loaders_user,
+    "vtex/loaders/wishlist": loaders_wishlist,
+    "vtex/loaders/wishlistProducts": loaders_wishlistProducts,
+    "vtex/loaders/workflow": loaders_workflow,
+  },
+  actions: {
+    "vtex/actions/address": actions_address,
+    "vtex/actions/analytics/sendEvent": actions_analytics_sendEvent,
+    "vtex/actions/auth": actions_auth,
+    "vtex/actions/checkout": actions_checkout,
+    "vtex/actions/masterData": actions_masterData,
+    "vtex/actions/misc": actions_misc,
+    "vtex/actions/newsletter": actions_newsletter,
+    "vtex/actions/orders": actions_orders,
+    "vtex/actions/profile": actions_profile,
+    "vtex/actions/session": actions_session,
+    "vtex/actions/trigger": actions_trigger,
+    "vtex/actions/wishlist": actions_wishlist,
+  },
+  sections: {},
 } as const;
 
 export type Manifest = typeof manifest;

package/src/utils/__tests__/cartProjection.test.ts

@@ -0,0 +1,118 @@
+/**
+ * Tests for `projectOrderForm` — the server-side fragmentation of a VTEX
+ * OrderForm into the requested `CartProjection`. Pure function, no I/O.
+ */
+
+import type { Minicart } from "@decocms/apps-commerce/types";
+import { describe, expect, it } from "vitest";
+import type { OrderForm } from "../../types";
+import { projectOrderForm } from "../cartProjection";
+
+function makeOrderForm(overrides: Partial<OrderForm> = {}): OrderForm {
+  return {
+    orderFormId: "of-123",
+    salesChannel: "1",
+    loggedIn: false,
+    isCheckedIn: false,
+    allowManualPrice: false,
+    canEditData: true,
+    ignoreProfileData: false,
+    value: 15000, // R$150.00 in cents
+    messages: [],
+    items: [
+      {
+        id: "sku-1",
+        productId: "prod-1",
+        name: "Camiseta",
+        skuName: "Camiseta P Azul",
+        imageUrl: "http://img.example/x.jpg",
+        detailUrl: "/camiseta/p",
+        price: 10000,
+        listPrice: 12000,
+        sellingPrice: 10000,
+        quantity: 1,
+        seller: "1",
+        uniqueId: "u1",
+      },
+      {
+        id: "sku-2",
+        productId: "prod-2",
+        name: "Boné",
+        skuName: "Boné U Preto",
+        imageUrl: "https://img.example/y.jpg",
+        detailUrl: "/bone/u",
+        price: 5000,
+        listPrice: 5000,
+        sellingPrice: 5000,
+        quantity: 2,
+        seller: "1",
+        uniqueId: "u2",
+      },
+    ],
+    totalizers: [
+      { id: "Items", name: "Items", value: 20000 },
+      { id: "Discounts", name: "Discounts", value: -5000 },
+    ],
+    shippingData: null,
+    clientProfileData: null,
+    paymentData: null,
+    marketingData: null,
+    ...overrides,
+  } as OrderForm;
+}
+
+describe("projectOrderForm", () => {
+  it("none → { ok: true } and discards the payload", () => {
+    expect(projectOrderForm(makeOrderForm(), "none")).toEqual({ ok: true });
+  });
+
+  it("summary → orderFormId, summed quantities, total in major units", () => {
+    const r = projectOrderForm(makeOrderForm(), "summary") as {
+      orderFormId: string;
+      totalItems: number;
+      total: number;
+    };
+    expect(r.orderFormId).toBe("of-123");
+    expect(r.totalItems).toBe(3); // 1 + 2
+    expect(r.total).toBe(150); // 15000 cents → 150
+  });
+
+  it("summary+items → summary plus slim, https-normalized items", () => {
+    const r = projectOrderForm(makeOrderForm(), "summary+items") as {
+      totalItems: number;
+      items: Array<{ item_name: string; image: string; price: number; quantity: number }>;
+    };
+    expect(r.totalItems).toBe(3);
+    expect(r.items).toHaveLength(2);
+    expect(r.items[0]).toMatchObject({
+      item_name: "Camiseta",
+      item_variant: "Camiseta P Azul",
+      image: "https://img.example/x.jpg", // http → https
+      price: 100, // 10000 cents
+      quantity: 1,
+    });
+    // slim projection must NOT leak the full VTEX item fields
+    expect(r.items[0]).not.toHaveProperty("uniqueId");
+  });
+
+  it("minicart → canonical Minicart with major-unit totals", () => {
+    const r = projectOrderForm(makeOrderForm(), "minicart") as Minicart<OrderForm>;
+    expect(r.storefront.items).toHaveLength(2);
+    expect(r.storefront.total).toBe(150);
+    expect(r.original.orderFormId).toBe("of-123");
+  });
+
+  it("raw → the untouched OrderForm", () => {
+    const of = makeOrderForm();
+    expect(projectOrderForm(of, "raw")).toBe(of);
+  });
+
+  it("summary handles an empty cart without NaN", () => {
+    const r = projectOrderForm(
+      makeOrderForm({ items: [], value: 0, totalizers: [] }),
+      "summary",
+    ) as { totalItems: number; total: number };
+    expect(r.totalItems).toBe(0);
+    expect(r.total).toBe(0);
+  });
+});

package/src/utils/cartProjection.ts

@@ -0,0 +1,96 @@
+/**
+ * Project a VTEX OrderForm down to a requested `CartProjection`.
+ *
+ * The VTEX checkout API always returns the whole OrderForm from mutation
+ * endpoints (bounded only by `expectedOrderFormSections`) — there is no
+ * delta/patch response. So "return the minimum" is enforced **server-side**:
+ * we take whatever VTEX gave us and shape it into `none` / `summary` /
+ * `summary+items` / `minicart` / `raw` before it reaches the browser.
+ *
+ * Pure function — no I/O, fully unit-testable. All monetary values in the
+ * projected output are in major units (VTEX is cents).
+ *
+ * @see `@decocms/apps-commerce/types/cart` for the agnostic contract.
+ */
+
+import type {
+  CartItemSlim,
+  CartOk,
+  CartProjection,
+  CartSummary,
+  CartSummaryWithItems,
+  Minicart,
+} from "@decocms/apps-commerce/types";
+import type { OrderForm, OrderFormItem } from "../types";
+import { type VtexOrderFormToMinicartOptions, vtexOrderFormToMinicart } from "./minicart";
+
+const CENTS_PER_MAJOR = 100;
+
+function fromCents(cents: number | undefined | null): number {
+  if (cents == null || !Number.isFinite(cents)) return 0;
+  return cents / CENTS_PER_MAJOR;
+}
+
+/** Sum of line quantities. */
+function countItems(orderForm: OrderForm): number {
+  return (orderForm.items ?? []).reduce((sum, i) => sum + (i.quantity ?? 0), 0);
+}
+
+function toSummary(orderForm: OrderForm): CartSummary {
+  return {
+    orderFormId: orderForm.orderFormId ?? null,
+    totalItems: countItems(orderForm),
+    total: fromCents(orderForm.value),
+  };
+}
+
+/** Map a VTEX line to the slim, analytics-compatible `CartItemSlim`. */
+function toSlimItem(item: OrderFormItem): CartItemSlim {
+  return {
+    item_id: item.id,
+    item_name: item.name ?? item.skuName ?? "",
+    item_variant: item.skuName,
+    image: item.imageUrl?.replace(/^http:/, "https:") ?? "",
+    price: fromCents(item.sellingPrice ?? item.price),
+    quantity: item.quantity,
+  };
+}
+
+export type ProjectOrderFormOptions = VtexOrderFormToMinicartOptions;
+
+/** The projected result type, with VTEX-concrete `minicart`/`raw` payloads. */
+export type VtexCartProjectionResult =
+  | CartOk
+  | CartSummary
+  | CartSummaryWithItems
+  | Minicart<OrderForm>
+  | OrderForm;
+
+/**
+ * Shape a VTEX OrderForm into the requested projection.
+ *
+ * @param orderForm - Raw OrderForm from a VTEX checkout call.
+ * @param projection - Desired client-facing shape.
+ * @param opts - Storefront overrides forwarded to the `minicart` projection.
+ */
+export function projectOrderForm(
+  orderForm: OrderForm,
+  projection: CartProjection,
+  opts: ProjectOrderFormOptions = {},
+): VtexCartProjectionResult {
+  switch (projection) {
+    case "none":
+      return { ok: true };
+    case "summary":
+      return toSummary(orderForm);
+    case "summary+items":
+      return {
+        ...toSummary(orderForm),
+        items: (orderForm.items ?? []).map(toSlimItem),
+      };
+    case "minicart":
+      return vtexOrderFormToMinicart(orderForm, opts);
+    case "raw":
+      return orderForm;
+  }
+}