@decocms/apps 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/apps",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "type": "module",
   "description": "Deco commerce apps for TanStack Start - Shopify, VTEX, commerce types, analytics utils",
   "exports": {

package/shopify/utils/storefront/storefront.graphql.gen.ts

@@ -37,25 +37,41 @@ export type CartFragment = {
 
 // Mutation types
 export type AddItemToCartMutation = { cart?: CartFragment | null };
-export type AddItemToCartMutationVariables = { cartId: string; lines: any };
+export type AddItemToCartMutationVariables = { cartId: string; lines: unknown };
 export type UpdateItemsMutation = { cart?: CartFragment | null };
-export type UpdateItemsMutationVariables = { cartId: string; lines: any };
+export type UpdateItemsMutationVariables = { cartId: string; lines: unknown };
 export type AddCouponMutation = { cart?: CartFragment | null };
 export type AddCouponMutationVariables = { cartId: string; discountCodes: string[] };
 
-// Product types
-export type ProductFragment = any;
-export type ProductVariantFragment = any;
-export type GetProductQuery = { product?: any };
-export type GetProductQueryVariables = { handle?: string; identifiers?: any[] };
-export type ProductRecommendationsQuery = { productRecommendations?: any[] };
+// Product types — these are intentionally loose stubs because the
+// real Shopify Storefront API GraphQL types are huge and only a tiny
+// subset is consumed. `unknown` keeps consumers honest (forces a cast
+// at the boundary) without exploding the type surface.
+export type ProductFragment = unknown;
+export type ProductVariantFragment = unknown;
+export type GetProductQuery = { product?: unknown };
+export type GetProductQueryVariables = { handle?: string; identifiers?: unknown[] };
+export type ProductRecommendationsQuery = { productRecommendations?: unknown[] };
 export type ProductRecommendationsQueryVariables = { productId: string };
 
 // Search/Collection types
 export type InputMaybe<T> = T | null | undefined;
 export type ProductCollectionSortKeys = string;
 export type SearchSortKeys = string;
-export type ProductFilter = any;
+// Loose shape derived from the only consumers in
+// `shopify/utils/utils.ts` (filterToObject + getFiltersByUrl). Keeps
+// the types honest without depending on Shopify's full GraphQL schema.
+export type ProductFilter = {
+	tag?: string;
+	productType?: string;
+	productVendor?: string;
+	available?: boolean;
+	price?: { min?: number; max?: number };
+	variantOption?: { name: string; value: string };
+	productMetafield?: { namespace: string; key: string; value: string };
+	taxonomyMetafield?: { namespace: string; key: string; value: string };
+	category?: { id: string };
+};
 
 // Customer types
 export type Customer = {
@@ -65,9 +81,9 @@ export type Customer = {
 	email?: string | null;
 	phone?: string | null;
 	acceptsMarketing?: boolean;
-	defaultAddress?: any;
-	addresses?: { nodes: any[] };
-	orders?: { nodes: any[] };
+	defaultAddress?: unknown;
+	addresses?: { nodes: unknown[] };
+	orders?: { nodes: unknown[] };
 };
 
 export type CustomerAccessTokenCreateInput = {

package/vtex/hooks/createUseCart.ts

@@ -31,9 +31,7 @@ import type { OrderForm, OrderFormItem } from "../types";
 export interface CreateUseCartInvoke {
 	vtex: {
 		actions: {
-			getOrCreateCart: (args: {
-				data: { orderFormId?: string };
-			}) => Promise<OrderForm>;
+			getOrCreateCart: (args: { data: { orderFormId?: string } }) => Promise<OrderForm>;
 			addItemsToCart: (args: {
 				data: {
 					orderFormId: string;
@@ -130,10 +128,7 @@ export function createUseCart(opts: CreateUseCartOptions) {
 		return of.orderFormId;
 	}
 
-	function itemToAnalyticsItem(
-		item: OrderFormItem & { coupon?: string },
-		index: number,
-	) {
+	function itemToAnalyticsItem(item: OrderFormItem & { coupon?: string }, index: number) {
 		return {
 			item_id: item.productId,
 			item_group_id: item.productId,
@@ -217,11 +212,7 @@ export function createUseCart(opts: CreateUseCartOptions) {
 				},
 			},
 
-			addItem: async (params: {
-				id: string;
-				seller: string;
-				quantity?: number;
-			}) => {
+			addItem: async (params: { id: string; seller: string; quantity?: number }) => {
 				setLoading(true);
 				try {
 					const ofId = await ensureOrderForm();
@@ -266,9 +257,7 @@ export function createUseCart(opts: CreateUseCartOptions) {
 				}
 			},
 
-			updateItems: async (params: {
-				orderItems: Array<{ index: number; quantity: number }>;
-			}) => {
+			updateItems: async (params: { orderItems: Array<{ index: number; quantity: number }> }) => {
 				const ofId = _orderForm?.orderFormId || getOrderFormIdFromCookie();
 				if (!ofId) return;
 				setLoading(true);
@@ -319,10 +308,7 @@ export function createUseCart(opts: CreateUseCartOptions) {
 				}
 			},
 
-			sendAttachment: async (params: {
-				attachment: string;
-				body: Record<string, unknown>;
-			}) => {
+			sendAttachment: async (params: { attachment: string; body: Record<string, unknown> }) => {
 				const ofId = _orderForm?.orderFormId || getOrderFormIdFromCookie();
 				if (!ofId) return;
 				setLoading(true);
@@ -361,9 +347,7 @@ export function createUseCart(opts: CreateUseCartOptions) {
 			},
 
 			mapItemsToAnalyticsItems: (orderForm: OrderForm | null) => {
-				return (orderForm?.items || []).map((item, index) =>
-					itemToAnalyticsItem(item, index),
-				);
+				return (orderForm?.items || []).map((item, index) => itemToAnalyticsItem(item, index));
 			},
 		};
 	}

package/vtex/hooks/createUseUser.ts

@@ -0,0 +1,153 @@
+/**
+ * Factory for the legacy invoke-based `useUser` hook.
+ *
+ * This is the API shape that migrated Fresh sites depend on:
+ *   - module-level singleton state (no QueryClient required)
+ *   - listener-based re-render (`forceRender` on a useState counter)
+ *   - signal-shaped accessors (`user.value`, `loading.value`)
+ *   - awaitable refresh (`await refresh()`)
+ *
+ * It is intentionally separate from the canonical `useUser` in
+ * `vtex/hooks/useUser.ts`, which is built on TanStack Query and exposes
+ * `{ user, isLoggedIn, isLoading, refetch }`. Both can coexist in a single site.
+ *
+ * @example
+ * ```ts
+ * // src/hooks/useUser.ts
+ * import { createUseUser } from "@decocms/apps/vtex/hooks/createUseUser";
+ * import { invoke } from "~/server/invoke";
+ *
+ * export const { useUser, resetUser } = createUseUser({ invoke });
+ * export type { Person } from "@decocms/apps/vtex/loaders/user";
+ * ```
+ */
+
+import { useEffect, useState } from "react";
+import type { Person } from "../loaders/user";
+
+/** Minimal structural shape of the invoke proxy this hook needs. */
+export interface CreateUseUserInvoke {
+	vtex: {
+		loaders: {
+			user: () => Promise<Person | null>;
+		};
+	};
+}
+
+export interface CreateUseUserOptions {
+	invoke: CreateUseUserInvoke;
+}
+
+/** Build a per-site `useUser` plus its companions. */
+export function createUseUser(opts: CreateUseUserOptions) {
+	const { invoke } = opts;
+
+	let _user: Person | null = null;
+	let _loading = false;
+	let _initStarted = false;
+	let _initFailed = false;
+	const _listeners = new Set<() => void>();
+
+	function notify() {
+		for (const fn of _listeners) fn();
+	}
+	function setUser(u: Person | null) {
+		_user = u;
+		notify();
+	}
+	function setLoading(v: boolean) {
+		_loading = v;
+		notify();
+	}
+
+	async function refresh(): Promise<Person | null> {
+		setLoading(true);
+		try {
+			const u = await invoke.vtex.loaders.user();
+			setUser(u);
+			_initFailed = false;
+			return u;
+		} catch (err) {
+			console.error("[useUser] refresh failed:", err);
+			_initFailed = true;
+			notify();
+			return null;
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	/** Reset module-level user state so the next useUser() re-fetches. */
+	function resetUser() {
+		_user = null;
+		_loading = false;
+		_initStarted = false;
+		_initFailed = false;
+		notify();
+	}
+
+	function useUser() {
+		const [, forceRender] = useState(0);
+
+		useEffect(() => {
+			const listener = () => forceRender((n) => n + 1);
+			_listeners.add(listener);
+
+			if (!_user && !_initStarted) {
+				_initStarted = true;
+				setLoading(true);
+				invoke.vtex.loaders
+					.user()
+					.then((u) => {
+						setUser(u);
+					})
+					.catch((err: unknown) => {
+						console.error("[useUser] init failed:", err);
+						_initFailed = true;
+						notify();
+					})
+					.finally(() => setLoading(false));
+			}
+
+			return () => {
+				_listeners.delete(listener);
+			};
+		}, []);
+
+		return {
+			user: {
+				get value() {
+					return _user;
+				},
+				set value(v: Person | null) {
+					setUser(v);
+				},
+			},
+
+			loading: {
+				get value() {
+					return _loading;
+				},
+			},
+
+			isLoggedIn: {
+				get value() {
+					return !!_user?.email;
+				},
+			},
+
+			initFailed: {
+				get value() {
+					return _initFailed;
+				},
+			},
+
+			refresh,
+		};
+	}
+
+	return {
+		useUser,
+		resetUser,
+	};
+}

package/vtex/hooks/createUseWishlist.ts

@@ -0,0 +1,242 @@
+/**
+ * Factory for the legacy invoke-based `useWishlist` hook.
+ *
+ * Mirrors the deco-cx/apps signal-based wishlist API used by migrated
+ * Fresh sites: `wishlist.addItem(productId, productGroupId)`,
+ * `removeItem(productId)`, `getItem(productId): boolean`.
+ *
+ * It is intentionally separate from the canonical `useWishlist` in
+ * `vtex/hooks/useWishlist.ts`, which is built on TanStack Query and exposes
+ * `{ items, isInWishlist, toggle, add, remove }`. Both can coexist.
+ *
+ * ## VTEX wishlist arg conventions
+ *
+ * The legacy hook's `addItem(productId, productGroupId)` argument names
+ * are misleading because they were originally derived from analytics
+ * `item_id` / `item_group_id`:
+ *
+ * - `productId` arg → analytics `item_id` → VTEX `sku` field on the wishlist
+ * - `productGroupId` arg → analytics `item_group_id` → VTEX `productId`
+ *
+ * The factory swaps them on the wire so the canonical
+ * `vtex/actions/wishlist.addItem` gets the right shape.
+ *
+ * @example
+ * ```ts
+ * // src/hooks/useWishlist.ts
+ * import { createUseWishlist } from "@decocms/apps/vtex/hooks/createUseWishlist";
+ * import { invoke } from "~/server/invoke";
+ *
+ * export const { useWishlist, resetWishlist } = createUseWishlist({ invoke });
+ * export type { WishlistItem } from "@decocms/apps/vtex/loaders/wishlist";
+ * ```
+ */
+
+import { useEffect, useState } from "react";
+import type { WishlistItem } from "../loaders/wishlist";
+
+/**
+ * Pure helper: find a wishlist entry by either the SKU id (legacy
+ * `productId` arg) or the VTEX productId. Exported for unit testability.
+ */
+export function findWishlistEntry(
+	items: readonly WishlistItem[],
+	productId: string,
+): WishlistItem | undefined {
+	return items.find((it) => it.sku === productId || it.productId === productId);
+}
+
+/**
+ * Pure helper: convert legacy `addItem(productId, productGroupId)` args
+ * into the canonical `{ productId, sku }` shape expected by
+ * `vtex/actions/wishlist.addItem`. Exported for unit testability.
+ */
+export function legacyAddArgsToCanonical(
+	legacyProductId: string,
+	legacyProductGroupId: string,
+): { productId: string; sku: string } {
+	// See arg conventions in the file header. The legacy `productId` is
+	// the SKU; the legacy `productGroupId` is the VTEX productId.
+	return {
+		productId: legacyProductGroupId,
+		sku: legacyProductId,
+	};
+}
+
+/** Minimal structural shape of the invoke proxy this hook needs. */
+export interface CreateUseWishlistInvoke {
+	vtex: {
+		loaders: {
+			wishlist: () => Promise<WishlistItem[]>;
+		};
+		actions: {
+			addToWishlist: (args: {
+				data: { productId: string; sku: string; title?: string };
+			}) => Promise<WishlistItem[]>;
+			removeFromWishlist: (args: { data: { id: string } }) => Promise<WishlistItem[]>;
+		};
+	};
+}
+
+export interface CreateUseWishlistOptions {
+	invoke: CreateUseWishlistInvoke;
+}
+
+/** Build a per-site `useWishlist` plus its companions. */
+export function createUseWishlist(opts: CreateUseWishlistOptions) {
+	const { invoke } = opts;
+
+	let _items: WishlistItem[] = [];
+	let _loading = false;
+	let _initStarted = false;
+	let _initFailed = false;
+	const _listeners = new Set<() => void>();
+
+	function notify() {
+		for (const fn of _listeners) fn();
+	}
+	function setItems(items: WishlistItem[]) {
+		_items = items;
+		notify();
+	}
+	function setLoading(v: boolean) {
+		_loading = v;
+		notify();
+	}
+
+	function getItem(productId: string): boolean {
+		return !!findWishlistEntry(_items, productId);
+	}
+
+	async function addItem(productId: string, productGroupId: string): Promise<void> {
+		setLoading(true);
+		try {
+			const updated = await invoke.vtex.actions.addToWishlist({
+				data: legacyAddArgsToCanonical(productId, productGroupId),
+			});
+			setItems(updated);
+		} catch (err) {
+			console.error("[useWishlist] addItem failed:", err);
+			throw err;
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	async function removeItem(productId: string): Promise<void> {
+		const entry = findWishlistEntry(_items, productId);
+		if (!entry?.id) {
+			// Either the wishlist hasn't loaded yet or the item isn't there.
+			// Either way, nothing to remove.
+			return;
+		}
+		setLoading(true);
+		try {
+			const updated = await invoke.vtex.actions.removeFromWishlist({
+				data: { id: entry.id },
+			});
+			setItems(updated);
+		} catch (err) {
+			console.error("[useWishlist] removeItem failed:", err);
+			throw err;
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	async function refresh(): Promise<WishlistItem[]> {
+		setLoading(true);
+		try {
+			const items = await invoke.vtex.loaders.wishlist();
+			setItems(items);
+			_initFailed = false;
+			return items;
+		} catch (err) {
+			console.error("[useWishlist] refresh failed:", err);
+			_initFailed = true;
+			notify();
+			return [];
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	/** Reset module-level wishlist state so the next useWishlist() re-fetches. */
+	function resetWishlist() {
+		_items = [];
+		_loading = false;
+		_initStarted = false;
+		_initFailed = false;
+		notify();
+	}
+
+	function useWishlist() {
+		const [, forceRender] = useState(0);
+
+		useEffect(() => {
+			const listener = () => forceRender((n) => n + 1);
+			_listeners.add(listener);
+
+			if (_items.length === 0 && !_initStarted) {
+				_initStarted = true;
+				setLoading(true);
+				invoke.vtex.loaders
+					.wishlist()
+					.then((items) => {
+						setItems(items);
+					})
+					.catch((err: unknown) => {
+						// 401 / unauthenticated is normal — user just isn't logged in.
+						// Real errors get logged.
+						console.error("[useWishlist] init failed:", err);
+						_initFailed = true;
+						notify();
+					})
+					.finally(() => setLoading(false));
+			}
+
+			return () => {
+				_listeners.delete(listener);
+			};
+		}, []);
+
+		return {
+			items: {
+				get value() {
+					return _items;
+				},
+				set value(v: WishlistItem[]) {
+					setItems(v);
+				},
+			},
+
+			loading: {
+				get value() {
+					return _loading;
+				},
+			},
+
+			initFailed: {
+				get value() {
+					return _initFailed;
+				},
+			},
+
+			count: {
+				get value() {
+					return _items.length;
+				},
+			},
+
+			addItem,
+			removeItem,
+			getItem,
+			refresh,
+		};
+	}
+
+	return {
+		useWishlist,
+		resetWishlist,
+	};
+}

package/vtex/hooks/index.ts

@@ -1,9 +1,19 @@
-export { type UseAutocompleteOptions, useAutocomplete } from "./useAutocomplete";
-export { type CartItem, type OrderForm, type UseCartOptions, useCart } from "./useCart";
 export {
 	type CreateUseCartInvoke,
 	type CreateUseCartOptions,
 	createUseCart,
 } from "./createUseCart";
+export {
+	type CreateUseUserInvoke,
+	type CreateUseUserOptions,
+	createUseUser,
+} from "./createUseUser";
+export {
+	type CreateUseWishlistInvoke,
+	type CreateUseWishlistOptions,
+	createUseWishlist,
+} from "./createUseWishlist";
+export { type UseAutocompleteOptions, useAutocomplete } from "./useAutocomplete";
+export { type CartItem, type OrderForm, type UseCartOptions, useCart } from "./useCart";
 export { type UseUserOptions, useUser, type VtexUser } from "./useUser";
 export { type UseWishlistOptions, useWishlist, type WishlistItem } from "./useWishlist";