@decocms/apps-vtex 8.0.0 → 8.1.0-next.1

package/src/hooks/__tests__/createUseWishlist.test.ts

@@ -1,87 +0,0 @@
-/**
- * Tests for the `createUseWishlist` factory.
- *
- * The hook itself depends on React (useState/useEffect), and apps-start
- * does not pull in @testing-library/react. So we test the parts that
- * don't require a renderer: factory shape, isolation, and the pure
- * helpers `findWishlistEntry` + `legacyAddArgsToCanonical` which encode
- * the most error-prone invariants (id matching + legacy arg swap).
- */
-
-import { describe, expect, it } from "vitest";
-import type { WishlistItem } from "../../loaders/wishlist";
-import {
-	type CreateUseWishlistInvoke,
-	createUseWishlist,
-	findWishlistEntry,
-	legacyAddArgsToCanonical,
-} from "../createUseWishlist";
-
-function makeInvoke(): CreateUseWishlistInvoke {
-	return {
-		vtex: {
-			loaders: {
-				wishlist: async () => [],
-			},
-			actions: {
-				addToWishlist: async () => [],
-				removeFromWishlist: async () => [],
-			},
-		},
-	};
-}
-
-describe("createUseWishlist — factory shape", () => {
-	it("returns useWishlist, resetWishlist", () => {
-		const w = createUseWishlist({ invoke: makeInvoke() });
-		expect(typeof w.useWishlist).toBe("function");
-		expect(typeof w.resetWishlist).toBe("function");
-	});
-
-	it("two factory calls produce independent function references", () => {
-		const a = createUseWishlist({ invoke: makeInvoke() });
-		const b = createUseWishlist({ invoke: makeInvoke() });
-		expect(a.useWishlist).not.toBe(b.useWishlist);
-		expect(a.resetWishlist).not.toBe(b.resetWishlist);
-	});
-});
-
-describe("legacyAddArgsToCanonical — arg swap", () => {
-	it("maps legacy (productId=sku, productGroupId=parent) to canonical { productId, sku }", () => {
-		// In analytics terms: item_id is the SKU; item_group_id is the
-		// VTEX productId. Sites destructure these from analytics objects
-		// and pass them to wishlist.addItem in that order.
-		const out = legacyAddArgsToCanonical("sku-1", "prod-100");
-		expect(out).toEqual({ productId: "prod-100", sku: "sku-1" });
-	});
-
-	it("preserves empty strings without coercing", () => {
-		const out = legacyAddArgsToCanonical("", "");
-		expect(out).toEqual({ productId: "", sku: "" });
-	});
-});
-
-describe("findWishlistEntry — id matching", () => {
-	const items: WishlistItem[] = [
-		{ id: "entry-1", productId: "prod-1", sku: "sku-1", title: "A" },
-		{ id: "entry-2", productId: "prod-2", sku: "sku-2", title: "B" },
-	];
-
-	it("matches by sku (the legacy `productId` arg passed by sites)", () => {
-		const entry = findWishlistEntry(items, "sku-1");
-		expect(entry?.id).toBe("entry-1");
-	});
-
-	it("matches by productId as a fallback", () => {
-		const entry = findWishlistEntry(items, "prod-2");
-		expect(entry?.id).toBe("entry-2");
-	});
-
-	it("returns undefined when no match", () => {
-		expect(findWishlistEntry(items, "missing")).toBeUndefined();
-	});
-
-	it("returns undefined for empty list", () => {
-		expect(findWishlistEntry([], "anything")).toBeUndefined();
-	});
-});

package/src/hooks/cartQuery.ts

@@ -1,204 +0,0 @@
-/**
- * Cart v2 — optional TanStack Query adapter.
- *
- * The base factory (`createCart`) is intentionally QueryClient-free so it runs
- * anywhere. Sites already invested in TanStack Query can use this adapter
- * instead to get cache integration, `staleTime`, devtools, and cross-component
- * query sharing — while keeping the exact same invoke injection and the same
- * server-side fragmentation/projection contract.
- *
- * Importing this module pulls in `@tanstack/react-query` (a peer dependency).
- * If your site does not use react-query, import `createCart` instead.
- *
- * @example
- * ```ts
- * import { createCartQuery } from "@decocms/apps/vtex/hooks/cartQuery";
- * import { invoke } from "~/server/invoke";
- * export const { useCartSummary, useCartFull, useAddToCart } = createCartQuery({ invoke });
- * ```
- */
-
-import type {
-  CartProjection,
-  CartSection,
-  CartSummary,
-  Minicart,
-} from "@decocms/apps-commerce/types";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { CartItemAttachments } from "../loaders/cart/attachments";
-import type { CartGifts } from "../loaders/cart/gifts";
-import type { CartShipping } from "../loaders/cart/shipping";
-import type { OrderForm } from "../types";
-import type { CreateCartInvoke } from "./createCart";
-
-export interface CreateCartQueryOptions {
-  invoke: CreateCartInvoke;
-  orderFormCookieName?: string;
-}
-
-const SUMMARY_KEY = ["vtex", "cart", "summary"] as const;
-const FULL_KEY = ["vtex", "cart", "full"] as const;
-const SHIPPING_KEY = ["vtex", "cart", "shipping"] as const;
-const GIFTS_KEY = ["vtex", "cart", "gifts"] as const;
-const ATTACHMENTS_KEY = ["vtex", "cart", "attachments"] as const;
-
-/** TanStack Query flavour of the Cart v2 hooks. */
-export function createCartQuery(opts: CreateCartQueryOptions) {
-  const { invoke } = opts;
-  const COOKIE_NAME = opts.orderFormCookieName ?? "checkout.vtex.com__orderFormId";
-
-  function escapeRegex(s: string): string {
-    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  }
-  function getOrderFormIdFromCookie(): string | null {
-    if (typeof document === "undefined") return null;
-    const m = document.cookie.match(new RegExp(`${escapeRegex(COOKIE_NAME)}=([^;]*)`));
-    return m ? decodeURIComponent(m[1]) : null;
-  }
-  function setOrderFormIdCookie(id: string) {
-    if (typeof document === "undefined") return;
-    // biome-ignore lint/suspicious/noDocumentCookie: the orderFormId cookie is intentionally client-readable (VTEX standard).
-    document.cookie = `${COOKIE_NAME}=${encodeURIComponent(id)}; path=/; max-age=${7 * 24 * 3600}; SameSite=Lax`;
-  }
-  async function ensureOrderFormId(current: string | null): Promise<string> {
-    const existing = current ?? getOrderFormIdFromCookie();
-    if (existing) return existing;
-    const created = (await invoke.vtex.actions.getOrCreateCartV2({
-      data: { projection: "summary" },
-    })) as CartSummary;
-    if (created.orderFormId) setOrderFormIdCookie(created.orderFormId);
-    return created.orderFormId ?? "";
-  }
-
-  /**
-   * Badge query. Lazy: `enabled` defaults to false so it only runs when the
-   * caller opts in (e.g. after the cart cookie exists) — no cart is created on
-   * mount.
-   */
-  function useCartSummary(options?: { enabled?: boolean; staleTime?: number }) {
-    return useQuery({
-      queryKey: SUMMARY_KEY,
-      queryFn: () => invoke.vtex.loaders.cart.summary({ data: {} }),
-      enabled: options?.enabled ?? false,
-      staleTime: options?.staleTime ?? 30_000,
-    });
-  }
-
-  /** Full drawer query. `enabled` gated so it fires when the drawer opens. */
-  function useCartFull(options?: {
-    enabled?: boolean;
-    staleTime?: number;
-    freeShippingTarget?: number;
-    locale?: string;
-    checkoutHref?: string;
-    enableCoupon?: boolean;
-  }) {
-    return useQuery<Minicart<OrderForm | null>>({
-      queryKey: FULL_KEY,
-      queryFn: () =>
-        invoke.vtex.loaders.cart.full({
-          data: {
-            freeShippingTarget: options?.freeShippingTarget,
-            locale: options?.locale,
-            checkoutHref: options?.checkoutHref,
-            enableCoupon: options?.enableCoupon,
-          },
-        }),
-      enabled: options?.enabled ?? false,
-      staleTime: options?.staleTime ?? 30_000,
-    });
-  }
-
-  function useAddToCart(hookOpts?: { projection?: CartProjection; sections?: CartSection[] }) {
-    const queryClient = useQueryClient();
-    const projection: CartProjection = hookOpts?.projection ?? "summary+items";
-
-    return useMutation({
-      mutationFn: async (params: { id: string; seller: string; quantity?: number }) => {
-        const current = queryClient.getQueryData<CartSummary>(SUMMARY_KEY)?.orderFormId ?? null;
-        const orderFormId = await ensureOrderFormId(current);
-        return invoke.vtex.actions.addItemsToCartV2({
-          data: {
-            orderFormId,
-            orderItems: [{ id: params.id, seller: params.seller, quantity: params.quantity ?? 1 }],
-            projection,
-            sections: hookOpts?.sections,
-          },
-        });
-      },
-      // Optimistic badge bump.
-      onMutate: async (params) => {
-        await queryClient.cancelQueries({ queryKey: SUMMARY_KEY });
-        const prev = queryClient.getQueryData<CartSummary>(SUMMARY_KEY);
-        const qty = params.quantity ?? 1;
-        queryClient.setQueryData<CartSummary>(SUMMARY_KEY, (s) => ({
-          orderFormId: s?.orderFormId ?? null,
-          total: s?.total ?? 0,
-          totalItems: (s?.totalItems ?? 0) + qty,
-        }));
-        return { prev };
-      },
-      onError: (_err, _params, ctx) => {
-        if (ctx?.prev) queryClient.setQueryData(SUMMARY_KEY, ctx.prev);
-      },
-      onSuccess: (result) => {
-        if (projection === "minicart") {
-          queryClient.setQueryData(FULL_KEY, result);
-        } else if (projection !== "none") {
-          const r = result as Partial<CartSummary>;
-          if (r && typeof r.totalItems === "number") {
-            queryClient.setQueryData<CartSummary>(SUMMARY_KEY, {
-              orderFormId: r.orderFormId ?? null,
-              totalItems: r.totalItems,
-              total: r.total ?? 0,
-            });
-          }
-        }
-      },
-    });
-  }
-
-  /**
-   * Shipping estimate query. Keyed by `{ postalCode, items }` — which is NOT
-   * user-personalized — so react-query's cache/dedupe gives you the caching
-   * the server-side loader can't do yet (see the loader's caching note).
-   * `enabled` defaults on when a postal code is present.
-   */
-  function useShipping(
-    params: {
-      items: Array<{ id: string | number; quantity: number; seller: string }>;
-      postalCode: string;
-      country?: string;
-    },
-    options?: { enabled?: boolean; staleTime?: number },
-  ) {
-    return useQuery<CartShipping>({
-      queryKey: [...SHIPPING_KEY, params.postalCode, params.items],
-      queryFn: () => invoke.vtex.loaders.cart.shipping({ data: params }),
-      enabled: options?.enabled ?? Boolean(params.postalCode && params.items.length),
-      staleTime: options?.staleTime ?? 5 * 60_000,
-    });
-  }
-
-  /** Selectable-gifts / promotions query. `enabled` gated (default false). */
-  function useGifts(options?: { enabled?: boolean; staleTime?: number }) {
-    return useQuery<CartGifts>({
-      queryKey: GIFTS_KEY,
-      queryFn: () => invoke.vtex.loaders.cart.gifts({ data: {} }),
-      enabled: options?.enabled ?? false,
-      staleTime: options?.staleTime ?? 30_000,
-    });
-  }
-
-  /** Single-line attachments query. `enabled` gated (default false). */
-  function useAttachments(itemIndex: number, options?: { enabled?: boolean; staleTime?: number }) {
-    return useQuery<CartItemAttachments>({
-      queryKey: [...ATTACHMENTS_KEY, itemIndex],
-      queryFn: () => invoke.vtex.loaders.cart.attachments({ data: { itemIndex } }),
-      enabled: options?.enabled ?? false,
-      staleTime: options?.staleTime ?? 30_000,
-    });
-  }
-
-  return { useCartSummary, useCartFull, useAddToCart, useShipping, useGifts, useAttachments };
-}