@decocms/apps 1.0.0 → 1.1.0

package/commerce/sdk/analytics.ts

@@ -1,24 +1,165 @@
-import type { AnalyticsEvent } from "../types/commerce";
-
-declare global {
-	interface Window {
-		DECO: { events: { dispatch: (event: any) => void } };
-		DECO_SITES_STD: {
-			sendAnalyticsEvent: (args: AnalyticsEvent) => void;
-		};
-	}
+/**
+ * Analytics mappers — convert schema.org Product to GA4 AnalyticsItem.
+ *
+ * These are the generic, platform-independent mappers. Sites can wrap them
+ * to add custom fields (sellerP, etc.) via the `extend` option.
+ */
+import type { BreadcrumbList, Product } from "../types";
+
+export interface AnalyticsItem {
+  item_id?: string;
+  item_name?: string;
+  affiliation?: string;
+  coupon?: string;
+  discount?: number;
+  index?: number;
+  item_group_id?: string;
+  item_url?: string;
+  item_brand?: string;
+  item_category?: string;
+  item_category2?: string;
+  item_category3?: string;
+  item_category4?: string;
+  item_category5?: string;
+  item_list_id?: string;
+  item_list_name?: string;
+  item_variant?: string;
+  location_id?: string;
+  price?: number;
+  quantity: number;
+  [key: string]: unknown;
+}
+
+export function mapCategoriesToAnalyticsCategories(
+  categories: string[],
+): Record<string, string> {
+  return categories.slice(0, 5).reduce(
+    (result, category, index) => {
+      result[`item_category${index === 0 ? "" : index + 1}`] = category;
+      return result;
+    },
+    {} as Record<string, string>,
+  );
+}
+
+export function mapProductCategoryToAnalyticsCategories(category: string): Record<string, string> {
+  return category.split(">").reduce(
+    (result, cat, index) => {
+      result[`item_category${index === 0 ? "" : index}`] = cat.trim();
+      return result;
+    },
+    {} as Record<string, string>,
+  );
+}
+
+export interface MapProductToAnalyticsItemOptions {
+  product: Product;
+  breadcrumbList?: BreadcrumbList;
+  price?: number;
+  lowPrice?: number;
+  listPrice?: number;
+  index?: number;
+  quantity?: number;
+  coupon?: string;
+  /** Extend the result with custom fields (e.g., sellerP, sellerName) */
+  extend?: (product: Product, base: AnalyticsItem) => Record<string, unknown>;
+}
+
+export function mapProductToAnalyticsItem(opts: MapProductToAnalyticsItemOptions): AnalyticsItem {
+  const {
+    product,
+    breadcrumbList,
+    price,
+    lowPrice,
+    listPrice,
+    index = 0,
+    quantity = 1,
+    coupon = "",
+    extend,
+  } = opts;
+
+  const { name, productID, inProductGroupWithID, isVariantOf, url, sku } = product;
+
+  const categories = breadcrumbList?.itemListElement
+    ? mapCategoriesToAnalyticsCategories(
+        breadcrumbList.itemListElement
+          .map(({ name: n }) => n ?? "")
+          .filter(Boolean),
+      )
+    : mapProductCategoryToAnalyticsCategories(product.category ?? "");
+
+  const base: AnalyticsItem = {
+    item_id: productID,
+    item_group_id: inProductGroupWithID,
+    quantity,
+    coupon,
+    price: lowPrice,
+    index,
+    item_variant: sku,
+    discount: Number((price && listPrice ? listPrice - price : 0).toFixed(2)),
+    item_name: isVariantOf?.name ?? name ?? "",
+    item_brand: product.brand?.name ?? "",
+    item_url: url,
+    ...categories,
+  };
+
+  if (extend) {
+    return { ...base, ...extend(product, base) };
+  }
+
+  return base;
+}
+
+export interface MapProductToAnalyticsItemListOptions {
+  product: Product;
+  breadcrumbList?: BreadcrumbList;
+  price?: number;
+  listPrice?: number;
+  index?: number;
+  quantity?: number;
+  coupon?: string;
 }
 
-export const sendEvent = <E extends AnalyticsEvent>(event: E) => {
-	if (typeof globalThis.window?.DECO?.events?.dispatch === "function") {
-		globalThis.window.DECO.events.dispatch(event);
-		return;
-	}
+export function mapProductToAnalyticsItemList(opts: MapProductToAnalyticsItemListOptions): AnalyticsItem {
+  const {
+    product,
+    breadcrumbList,
+    price,
+    listPrice,
+    index = 0,
+    quantity = 1,
+    coupon = "",
+  } = opts;
+
+  const { name, productID, inProductGroupWithID, isVariantOf, url } = product;
+
+  const categories = breadcrumbList?.itemListElement
+    ? mapCategoriesToAnalyticsCategories(
+        breadcrumbList.itemListElement
+          .map(({ name: n }) => n ?? "")
+          .filter(Boolean),
+      )
+    : mapProductCategoryToAnalyticsCategories(product.category ?? "");
 
-	if (typeof globalThis.window?.DECO_SITES_STD?.sendAnalyticsEvent === "function") {
-		globalThis.window.DECO_SITES_STD.sendAnalyticsEvent(event);
-		return;
-	}
+  const finalPrice = typeof price === "number" ? price : 0;
+  const discount =
+    typeof listPrice === "number" && typeof price === "number"
+      ? Math.max(0, listPrice - price)
+      : 0;
 
-	console.info("[analytics] No event dispatcher found. Event not sent:", event.name);
-};
+  const itemId = inProductGroupWithID ?? isVariantOf?.productGroupID ?? productID;
+
+  return {
+    item_id: itemId,
+    item_group_id: inProductGroupWithID,
+    quantity,
+    coupon,
+    price: finalPrice,
+    index,
+    discount: Number(discount.toFixed(2)),
+    item_name: isVariantOf?.name ?? name ?? "",
+    item_brand: product.brand?.name ?? "",
+    item_url: url,
+    ...categories,
+  };
+}

package/package.json

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

package/vtex/actions/address.ts

@@ -209,3 +209,33 @@ export async function updateAddress(
 	);
 	return result;
 }
+
+// ---------------------------------------------------------------------------
+// Request-aware wrappers (for COMMERCE_LOADERS / invoke proxy)
+// Handle cookie extraction, postalCode sanitization, and field defaults.
+// ---------------------------------------------------------------------------
+
+import { getVtexCookies, ensureUnsuffixedAuthCookie } from "../utils/cookies";
+
+function sanitizeAddressInput(props: Record<string, any>): Record<string, any> {
+	if (props.postalCode) props.postalCode = props.postalCode.replace(/\D/g, "");
+	if (!props.addressName) props.addressName = props.receiverName || `Address ${Date.now()}`;
+	if (!props.addressType) props.addressType = "residential";
+	return props;
+}
+
+export async function createAddressFromRequest(props: Record<string, any>, request: Request): Promise<SavedAddress> {
+	const cookie = ensureUnsuffixedAuthCookie(getVtexCookies(request));
+	return createAddress(sanitizeAddressInput(props) as AddressInput, cookie);
+}
+
+export async function updateAddressFromRequest(props: Record<string, any>, request: Request): Promise<UpdateAddressResult> {
+	const cookie = ensureUnsuffixedAuthCookie(getVtexCookies(request));
+	const { addressId, ...fields } = props;
+	return updateAddress(addressId, fields, cookie);
+}
+
+export async function deleteAddressFromRequest(props: Record<string, any>, request: Request): Promise<DeleteAddressResult> {
+	const cookie = ensureUnsuffixedAuthCookie(getVtexCookies(request));
+	return deleteAddress(props.addressId, cookie);
+}

package/vtex/actions/profile.ts

@@ -117,3 +117,72 @@ export async function updateProfile(
 	);
 	return profile;
 }
+
+// ---------------------------------------------------------------------------
+// Request-aware wrappers (for COMMERCE_LOADERS / invoke proxy)
+// ---------------------------------------------------------------------------
+
+import { getVtexCookies } from "../utils/cookies";
+import { updateNewsletterOptIn } from "./newsletter";
+import { deletePaymentToken } from "./misc";
+import { getCurrentProfile } from "../loaders/profile";
+
+/**
+ * Normalize birthDate strings to ISO 8601.
+ * Handles dd/mm/yyyy (Brazilian format), yyyy-mm-dd, and full ISO.
+ */
+function normalizeBirthDate(profile: Record<string, any>): void {
+	if (!profile.birthDate || typeof profile.birthDate !== "string") return;
+	const ddmmyyyy = profile.birthDate.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+	if (ddmmyyyy) {
+		profile.birthDate = `${ddmmyyyy[3]}-${ddmmyyyy[2]}-${ddmmyyyy[1]}T00:00:00.000Z`;
+	} else if (!profile.birthDate.includes("T")) {
+		const isoMatch = profile.birthDate.match(/(\d{4})-(\d{2})-(\d{2})/);
+		if (isoMatch) {
+			profile.birthDate = `${isoMatch[0]}T00:00:00.000Z`;
+		}
+	}
+}
+
+/**
+ * Update user profile via VTEX IO GraphQL. Handles cookie extraction,
+ * birthDate normalization, and undefined-key cleanup.
+ */
+export async function updateProfileFromRequest(props: Record<string, any>, request: Request): Promise<any> {
+	const { account } = getVtexConfig();
+	const cookie = getVtexCookies(request);
+	const profile = { ...props };
+	normalizeBirthDate(profile);
+	for (const key of Object.keys(profile)) {
+		if (profile[key] === undefined) delete profile[key];
+	}
+	const QUERY = `mutation UpdateProfile($profile: ProfileInput!) {
+		updateProfile(fields: $profile) @context(provider: "vtex.store-graphql@2.x") {
+			cacheId firstName lastName email document gender homePhone
+			businessPhone birthDate isCorporate corporateName
+			corporateDocument tradeName stateRegistration
+		}
+	}`;
+	const res = await fetch(`https://${account}.myvtex.com/_v/private/graphql/v1`, {
+		method: "POST",
+		body: JSON.stringify({ query: QUERY, variables: { profile } }),
+		headers: { "Content-Type": "application/json", cookie },
+	});
+	return res.json();
+}
+
+export async function newsletterProfileFromRequest(props: Record<string, any>, request: Request): Promise<any> {
+	const cookie = request.headers.get("cookie") ?? "";
+	return updateNewsletterOptIn(props.isNewsletterOptIn, props.email, cookie);
+}
+
+export async function deletePaymentFromRequest(props: Record<string, any>, request: Request): Promise<any> {
+	const cookie = getVtexCookies(request);
+	return deletePaymentToken(props.id, cookie);
+}
+
+export async function getPasswordLastUpdate(_props: Record<string, any>, request: Request): Promise<string | null> {
+	const cookie = getVtexCookies(request);
+	const profile = await getCurrentProfile(cookie);
+	return profile?.passwordLastUpdate ?? null;
+}

package/vtex/loaders/autocomplete.ts

@@ -0,0 +1,58 @@
+/**
+ * VTEX Intelligent Search autocomplete — suggestions + product results.
+ *
+ * Combines /autocomplete_suggestions/ and /product_search/ in parallel,
+ * transforms IS products to schema.org via pickSku + toProduct.
+ */
+import { getVtexConfig, intelligentSearch as vtexIS } from "../client";
+import { pickSku, toProduct as toSchemaProduct } from "../utils/transform";
+
+export interface AutocompleteProps {
+  query: string;
+  count?: number;
+  showSponsored?: boolean;
+  placement?: string;
+  fuzzy?: string;
+}
+
+export interface AutocompleteResult {
+  searches: Array<{ term: string; count: number; attributes?: any[] }>;
+  products: any[];
+}
+
+export async function autocompleteSearch(props: AutocompleteProps): Promise<AutocompleteResult> {
+  const query = props.query || "";
+  const count = props.count ?? 4;
+  if (!query.trim()) return { searches: [], products: [] };
+
+  try {
+    const [suggestionsData, productsData] = await Promise.all([
+      vtexIS<{
+        searches: Array<{ term: string; count: number; attributes?: any[] }>;
+      }>("/autocomplete_suggestions/", { query }),
+      vtexIS<{ products: any[] }>("/product_search/", {
+        query,
+        count: String(count),
+        showSponsored: props.showSponsored !== false ? "true" : "false",
+        placement: props.placement ?? "top-search",
+        fuzzy: props.fuzzy ?? "0",
+      }),
+    ]);
+
+    const config = getVtexConfig();
+    const baseUrl = config.publicUrl
+      ? `https://${config.publicUrl}`
+      : `https://${config.account}.vtexcommercestable.${config.domain ?? "com.br"}`;
+
+    return {
+      searches: suggestionsData.searches ?? [],
+      products: (productsData.products ?? []).slice(0, count).map((p: any) => {
+        const sku = pickSku(p);
+        return toSchemaProduct(p, sku, 0, { baseUrl, priceCurrency: "BRL" });
+      }),
+    };
+  } catch (error) {
+    console.error("[vtex] autocompleteSearch error:", error);
+    return { searches: [], products: [] };
+  }
+}

package/vtex/utils/authHelpers.ts

@@ -0,0 +1,97 @@
+/**
+ * VTEX auth helpers — pure functions for cookie extraction, JWT parsing,
+ * Set-Cookie forwarding, and logout.
+ *
+ * These are consumed by site-level createServerFn wrappers in invoke.ts.
+ * createServerFn itself must live in site source (not node_modules) because
+ * TanStack Start's Vite plugin only transforms source files.
+ */
+import { getVtexConfig } from "../client";
+
+const DOMAIN_RE = /;\s*domain=[^;]*/gi;
+
+const VTEX_COOKIE_PREFIXES = [
+  "vtex_session=",
+  "vtex_segment=",
+  "VtexIdclientAutCookie",
+  "checkout.vtex.com",
+  "CheckoutOrderFormOwnership",
+];
+
+/**
+ * Extract VTEX-relevant cookies from a raw Cookie header string.
+ * Filters out analytics/CF cookies that can cause VTEX 503 errors.
+ */
+export function extractVtexCookiesFromHeader(raw: string): string {
+  return raw
+    .split(";")
+    .map((c) => c.trim())
+    .filter((c) => VTEX_COOKIE_PREFIXES.some((prefix) => c.startsWith(prefix)))
+    .join("; ");
+}
+
+/**
+ * Strip Domain= from Set-Cookie headers so cookies are associated
+ * with the storefront domain instead of the VTEX domain.
+ */
+export function stripCookieDomain(cookies: string[]): string[] {
+  return cookies.map((c) => c.replace(DOMAIN_RE, ""));
+}
+
+/** Standard VTEX cookies to expire on logout. */
+export const VTEX_LOGOUT_COOKIES = [
+  "checkout.vtex.com=; Path=/; Max-Age=0; Secure; HttpOnly; SameSite=Lax",
+  "CheckoutOrderFormOwnership=; Path=/; Max-Age=0; Secure; HttpOnly; SameSite=Lax",
+  "checkout.vtex.com__orderFormId=; Path=/; Max-Age=0",
+  "vtex_session=; Path=/; Max-Age=0",
+  "vtex_segment=; Path=/; Max-Age=0",
+];
+
+/**
+ * Perform VTEX logout — calls the VTEX ID logout endpoint and returns
+ * the Set-Cookie headers (with domain stripped) to expire auth cookies.
+ */
+export async function performVtexLogout(cookies: string): Promise<{ setCookies: string[] }> {
+  const config = getVtexConfig();
+  const domain = config.domain ?? "com.br";
+  const logoutUrl = `https://${config.account}.vtexcommercestable.${domain}/api/vtexid/pub/logout?scope=${config.account}&returnUrl=/`;
+
+  const res = await fetch(logoutUrl, {
+    method: "GET",
+    headers: { cookie: cookies },
+    redirect: "manual",
+  });
+
+  const upstreamCookies = res.headers.getSetCookie?.() ?? [];
+
+  return {
+    setCookies: [
+      ...stripCookieDomain(upstreamCookies),
+      ...VTEX_LOGOUT_COOKIES,
+    ],
+  };
+}
+
+/**
+ * Parse VTEX auth JWT to extract email and userId.
+ * Reads the VtexIdclientAutCookie_* cookie from a raw Cookie header.
+ */
+export function parseVtexAuthJwt(rawCookies: string): { email: string; userId: string } | null {
+  try {
+    const match = rawCookies.match(/VtexIdclientAutCookie_[^=]+=([^;]+)/);
+    if (!match) return null;
+    const token = match[1];
+    const parts = token.split(".");
+    if (parts.length < 2) return null;
+    const payload = JSON.parse(
+      Buffer.from(
+        parts[1].replace(/-/g, "+").replace(/_/g, "/"),
+        "base64",
+      ).toString("utf-8"),
+    );
+    if (!payload.sub) return null;
+    return { email: payload.sub, userId: payload.userId ?? "" };
+  } catch {
+    return null;
+  }
+}