@decocms/apps 1.7.1 → 1.8.0

package/package.json

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

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

@@ -3,6 +3,16 @@ export {
 	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";