@decocms/apps 0.21.4 → 0.23.0

package/commerce/components/Image.tsx

@@ -1,4 +1,5 @@
 import type { ImgHTMLAttributes } from "react";
+import { forwardRef } from "react";
 
 // -------------------------------------------------------------------------
 // Known asset prefixes that get stripped to produce a relative src path
@@ -34,7 +35,7 @@ export function getImageCdnDomain(): string {
 // Fit options & optimization types
 // -------------------------------------------------------------------------
 
-export type FitOptions = "contain" | "cover";
+export type FitOptions = "contain" | "cover" | "fill";
 
 export const FACTORS = [1, 2];
 
@@ -163,92 +164,77 @@ export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "s
   height?: number;
   /** @description Object-fit */
   fit?: FitOptions;
-  /** @description Preload the image (adds fetchPriority="high") */
+  /**
+   * @description Web Vitals (LCP). Injects a `<link rel="preload">` tag
+   * alongside the `<img>`, sets `fetchPriority="high"` and `loading="eager"`.
+   * Use once per page for the LCP image.
+   */
   preload?: boolean;
+  /** @description Media query for responsive preloading (e.g. "(min-width: 768px)") */
+  media?: string;
 }
 
-export function Image({
-  src,
-  width,
-  height,
-  fit = "cover",
-  preload,
-  loading,
-  decoding,
-  srcSet: srcSetProp,
-  sizes,
-  ...rest
-}: ImageProps) {
-  if (!height && typeof process !== "undefined") {
-    console.warn(`Missing height. This image will NOT be optimized: ${src}`);
-  }
-
-  const srcSet = srcSetProp ?? getSrcSet(src, width, height, fit);
-
-  return (
-    <img
-      {...rest}
-      src={src}
-      srcSet={srcSet}
-      sizes={srcSet ? (sizes ?? "(max-width: 768px) 100vw, 50vw") : undefined}
-      width={width}
-      height={height}
-      loading={loading ?? (preload ? "eager" : "lazy")}
-      decoding={decoding ?? "async"}
-      fetchPriority={preload ? "high" : undefined}
-    />
-  );
-}
-
-// -------------------------------------------------------------------------
-// Picture (responsive art direction)
-// -------------------------------------------------------------------------
-
-export interface PictureSourceProps {
-  src: string;
-  width: number;
-  height?: number;
-  media: string;
-  fit?: FitOptions;
-}
-
-export interface PictureProps extends Omit<ImageProps, "sizes"> {
-  sources: PictureSourceProps[];
-}
+export const Image = forwardRef<HTMLImageElement, ImageProps>(
+  function Image(
+    {
+      src,
+      width,
+      height,
+      fit = "cover",
+      preload,
+      media,
+      loading,
+      decoding,
+      srcSet: srcSetProp,
+      sizes,
+      fetchPriority,
+      ...rest
+    },
+    ref,
+  ) {
+    if (!height && typeof process !== "undefined") {
+      console.warn(`Missing height. This image will NOT be optimized: ${src}`);
+    }
 
-export function Picture({
-  sources,
-  src,
-  width,
-  height,
-  fit = "cover",
-  preload,
-  ...rest
-}: PictureProps) {
-  return (
-    <picture>
-      {sources.map((source, i) => {
-        const srcSet = getSrcSet(source.src, source.width, source.height, source.fit ?? fit);
-        return (
-          <source
-            key={i}
-            srcSet={srcSet}
-            media={source.media}
-            width={source.width}
-            height={source.height}
+    const optimizedSrc = getOptimizedMediaUrl({
+      originalSrc: src,
+      width,
+      height,
+      fit,
+    });
+    const srcSet = srcSetProp ?? getSrcSet(src, width, height, fit);
+    const resolvedSizes = srcSet
+      ? (sizes ?? "(max-width: 768px) 100vw, 50vw")
+      : undefined;
+
+    return (
+      <>
+        {preload && (
+          <link
+            as="image"
+            rel="preload"
+            href={optimizedSrc}
+            imageSrcSet={srcSet}
+            imageSizes={resolvedSizes}
+            fetchPriority={fetchPriority ?? "high"}
+            media={media}
           />
-        );
-      })}
-      <Image
-        src={src}
-        width={width}
-        height={height}
-        fit={fit}
-        preload={preload}
-        {...rest}
-      />
-    </picture>
-  );
-}
+        )}
+        <img
+          {...rest}
+          src={optimizedSrc}
+          srcSet={srcSet}
+          sizes={resolvedSizes}
+          width={width}
+          height={height}
+          loading={loading ?? (preload ? "eager" : "lazy")}
+          decoding={decoding ?? "async"}
+          fetchPriority={preload ? "high" : fetchPriority}
+          ref={ref}
+        />
+      </>
+    );
+  },
+);
 
 export default Image;

package/commerce/components/Picture.tsx

@@ -0,0 +1,114 @@
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import { getOptimizedMediaUrl, getSrcSet, type FitOptions } from "./Image";
+
+// -------------------------------------------------------------------------
+// Preload context — flows from <Picture preload> to child <Source> elements
+// so each source can inject its own <link rel="preload"> with the correct
+// media query for responsive art direction.
+// -------------------------------------------------------------------------
+
+interface PreloadContextValue {
+  preload: boolean;
+}
+
+const PreloadContext = createContext<PreloadContextValue>({ preload: false });
+
+// -------------------------------------------------------------------------
+// Source — composable <source> with automatic srcSet optimization and
+// preload link injection when inside a <Picture preload>.
+// -------------------------------------------------------------------------
+
+export type SourceProps = Omit<
+  ComponentPropsWithoutRef<"source">,
+  "width" | "height"
+> & {
+  src: string;
+  /** @description Improves Web Vitals (CLS|LCP) */
+  width: number;
+  /** @description Improves Web Vitals (CLS|LCP) */
+  height?: number;
+  /** @description Improves Web Vitals (LCP). Use high for LCP image. */
+  fetchPriority?: "high" | "low" | "auto";
+  /** @description Object-fit */
+  fit?: FitOptions;
+};
+
+export const Source = forwardRef<HTMLSourceElement, SourceProps>(
+  function Source(
+    { src, width, height, fetchPriority, fit = "cover", ...rest },
+    ref,
+  ) {
+    const { preload } = useContext(PreloadContext);
+
+    const optimizedSrc = getOptimizedMediaUrl({
+      originalSrc: src,
+      width,
+      height,
+      fit,
+    });
+    const srcSet = rest.srcSet ?? getSrcSet(src, width, height, fit);
+
+    return (
+      <>
+        {preload && (
+          <link
+            as="image"
+            rel="preload"
+            href={optimizedSrc}
+            imageSrcSet={srcSet}
+            fetchPriority={fetchPriority ?? "high"}
+            media={rest.media}
+          />
+        )}
+        <source
+          {...rest}
+          srcSet={srcSet ?? optimizedSrc}
+          width={width}
+          height={height}
+          ref={ref}
+        />
+      </>
+    );
+  },
+);
+
+// -------------------------------------------------------------------------
+// Picture — composable wrapper that provides preload context to children.
+//
+// Usage:
+//   <Picture preload={isLcp}>
+//     <Source media="(max-width: 767px)" src={mobile} width={320} height={280} />
+//     <Source media="(min-width: 768px)" src={desktop} width={1280} height={280} />
+//     <Image src={desktop} width={1280} height={280} />
+//   </Picture>
+// -------------------------------------------------------------------------
+
+export type PictureProps = ComponentPropsWithoutRef<"picture"> & {
+  children: ReactNode;
+  /**
+   * @description When true, child <Source> and <Image> elements inject
+   * `<link rel="preload">` tags for their respective media queries.
+   */
+  preload?: boolean;
+};
+
+export const Picture = forwardRef<HTMLPictureElement, PictureProps>(
+  function Picture({ children, preload = false, ...props }, ref) {
+    const value = useMemo(() => ({ preload }), [preload]);
+
+    return (
+      <PreloadContext.Provider value={value}>
+        <picture {...props} ref={ref}>
+          {children}
+        </picture>
+      </PreloadContext.Provider>
+    );
+  },
+);

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@decocms/apps",
-  "version": "0.21.4",
+  "version": "0.23.0",
   "type": "module",
   "description": "Deco commerce apps for TanStack Start - Shopify, VTEX, commerce types, analytics utils",
   "exports": {
     "./commerce/types": "./commerce/types/commerce.ts",
     "./commerce/components/JsonLd": "./commerce/components/JsonLd.tsx",
     "./commerce/components/Image": "./commerce/components/Image.tsx",
+    "./commerce/components/Picture": "./commerce/components/Picture.tsx",
     "./commerce/utils/*": "./commerce/utils/*.ts",
     "./commerce/sdk/*": "./commerce/sdk/*.ts",
     "./shopify": "./shopify/index.ts",

package/vtex/client.ts

@@ -4,6 +4,7 @@
  */
 
 import { type FetchCacheOptions, fetchWithCache } from "./utils/fetchCache";
+import { SEGMENT_COOKIE_NAME, parseSegment } from "./utils/segment";
 
 // ---------------------------------------------------------------------------
 // URL sanitization (ported from deco-cx/apps vtex/utils/fetchVTEX.ts)
@@ -176,6 +177,22 @@ function authHeaders(): Record<string, string> {
 	return headers;
 }
 
+/**
+ * Read regionId from the current request's vtex_segment cookie.
+ * Returns null when no cookie provider is registered or no regionId is set.
+ */
+function extractRegionIdFromCookies(): string | null {
+	if (!_getCookieHeader) return null;
+	const cookies = _getCookieHeader();
+	if (!cookies) return null;
+	const match = cookies.match(
+		new RegExp(`(?:^|;\\s*)${SEGMENT_COOKIE_NAME}=([^;]+)`),
+	);
+	if (!match?.[1]) return null;
+	const segment = parseSegment(match[1]);
+	return segment?.regionId ?? null;
+}
+
 export async function vtexFetchResponse(
 	path: string,
 	init?: RequestInit,
@@ -293,7 +310,7 @@ export async function vtexFetchWithCookies<T>(
 export async function intelligentSearch<T>(
 	path: string,
 	params?: Record<string, string>,
-	opts?: { cookieHeader?: string; locale?: string },
+	opts?: { cookieHeader?: string; locale?: string; regionId?: string },
 ): Promise<T> {
 	const url = new URL(`${isUrl()}${path}`);
 	if (params) {
@@ -309,6 +326,11 @@ export async function intelligentSearch<T>(
 		url.searchParams.set("locale", locale);
 	}
 
+	const regionId = opts?.regionId ?? extractRegionIdFromCookies();
+	if (regionId) {
+		url.searchParams.set("regionId", regionId);
+	}
+
 	const headers: Record<string, string> = { ...authHeaders() };
 	if (opts?.cookieHeader) {
 		headers.cookie = opts.cookieHeader;
@@ -316,8 +338,6 @@ export async function intelligentSearch<T>(
 
 	const fullUrl = url.toString();
 
-	// IS GET requests go through SWR cache (3 min TTL via status-based defaults).
-	// The doFetch callback throws on non-ok responses, so null is never returned.
 	return fetchWithCache<T>(fullUrl, async () => {
 		const response = await _fetch(fullUrl, { headers });
 		if (!response.ok) {

package/vtex/invoke.ts

@@ -42,7 +42,7 @@ import {
   type UploadAttachmentOpts,
   type CreateDocumentResult,
 } from "./actions/masterData";
-import { createSession } from "./actions/session";
+import { createSession, editSession, type SessionData } from "./actions/session";
 import { subscribe, type SubscribeProps } from "./actions/newsletter";
 import { notifyMe, type NotifyMeProps } from "./actions/misc";
 import type { OrderForm } from "./types";
@@ -168,6 +168,14 @@ export const invoke = {
         { unwrap: true },
       ),
 
+      editSession: createInvokeFn(
+        (input: { public: Record<string, { value: string }> }) =>
+          editSession(input.public),
+        { unwrap: true },
+      ) as unknown as (ctx: {
+        data: { public: Record<string, { value: string }> };
+      }) => Promise<SessionData>,
+
       // -- MasterData -------------------------------------------------------
 
       createDocument: createInvokeFn(

package/vtex/middleware.ts

@@ -52,6 +52,12 @@ export interface VtexRequestContext {
   email?: string;
   /** Sales channel derived from segment. */
   salesChannel: string;
+  /**
+   * VTEX region ID from the segment cookie.
+   * Present when the user has set a postal code (CEP) for regionalization.
+   * Null when no region is set (anonymous default segment).
+   */
+  regionId: string | null;
   /** Whether this request carries price tables (B2B). */
   hasCustomPricing: boolean;
   /** Intelligent Search session cookie. */
@@ -123,6 +129,7 @@ export function extractVtexContext(request: Request): VtexRequestContext {
     isLoggedIn: authInfo?.isLoggedIn ?? false,
     email: authInfo?.email,
     salesChannel: segment.channel ?? "1",
+    regionId: segment.regionId ?? null,
     hasCustomPricing: Boolean(
       segment.priceTables && segment.priceTables.length > 0,
     ),
@@ -217,7 +224,9 @@ export function buildSegmentSetCookie(
  */
 export function vtexCacheKeySuffix(ctx: VtexRequestContext): string {
   if (ctx.isLoggedIn) return "__vtex_auth";
-  return `__vtex_sc=${ctx.salesChannel}`;
+  const parts = [`sc=${ctx.salesChannel}`];
+  if (ctx.regionId) parts.push(`r=${ctx.regionId}`);
+  return `__vtex_${parts.join("_")}`;
 }
 
 // -------------------------------------------------------------------------

package/vtex/utils/cookies.ts

@@ -10,32 +10,73 @@ interface Cookie {
   sameSite?: "Strict" | "Lax" | "None";
 }
 
+function parseSingleSetCookie(raw: string): Cookie | null {
+  const parts = raw.split(";").map((p) => p.trim());
+  const [nameValue, ...attrs] = parts;
+  const eqIdx = nameValue.indexOf("=");
+  if (eqIdx < 0) return null;
+  const cookie: Cookie = {
+    name: nameValue.slice(0, eqIdx),
+    value: nameValue.slice(eqIdx + 1),
+  };
+  for (const attr of attrs) {
+    const [k, v] = attr.split("=").map((s) => s.trim());
+    const lower = k.toLowerCase();
+    if (lower === "domain") cookie.domain = v;
+    else if (lower === "path") cookie.path = v;
+    else if (lower === "secure") cookie.secure = true;
+    else if (lower === "httponly") cookie.httpOnly = true;
+    else if (lower === "samesite") cookie.sameSite = v as Cookie["sameSite"];
+  }
+  return cookie;
+}
+
+/**
+ * Extract individual Set-Cookie values from a Headers object.
+ *
+ * Uses Headers.getSetCookie() (available in Cloudflare Workers and Node 18+)
+ * which returns each Set-Cookie as a separate string — unlike Headers.get()
+ * or Headers.forEach() which join multiple values with ", " and corrupt
+ * cookie strings that contain commas in Expires dates.
+ */
 function getSetCookies(headers: Headers): Cookie[] {
+  const rawCookies: string[] =
+    typeof headers.getSetCookie === "function"
+      ? headers.getSetCookie()
+      : getRawSetCookiesFallback(headers);
+
   const cookies: Cookie[] = [];
-  headers.forEach((value, key) => {
-    if (key.toLowerCase() !== "set-cookie") return;
-    const parts = value.split(";").map((p) => p.trim());
-    const [nameValue, ...attrs] = parts;
-    const eqIdx = nameValue.indexOf("=");
-    if (eqIdx < 0) return;
-    const cookie: Cookie = {
-      name: nameValue.slice(0, eqIdx),
-      value: nameValue.slice(eqIdx + 1),
-    };
-    for (const attr of attrs) {
-      const [k, v] = attr.split("=").map((s) => s.trim());
-      const lower = k.toLowerCase();
-      if (lower === "domain") cookie.domain = v;
-      else if (lower === "path") cookie.path = v;
-      else if (lower === "secure") cookie.secure = true;
-      else if (lower === "httponly") cookie.httpOnly = true;
-      else if (lower === "samesite") cookie.sameSite = v as Cookie["sameSite"];
-    }
-    cookies.push(cookie);
-  });
+  for (const raw of rawCookies) {
+    const cookie = parseSingleSetCookie(raw);
+    if (cookie) cookies.push(cookie);
+  }
   return cookies;
 }
 
+/**
+ * Fallback for runtimes without Headers.getSetCookie().
+ * Splits the comma-joined string heuristically — not perfect for cookies
+ * with Expires containing commas, but better than the old approach.
+ */
+function getRawSetCookiesFallback(headers: Headers): string[] {
+  const joined = headers.get("set-cookie");
+  if (!joined) return [];
+  const results: string[] = [];
+  let current = "";
+  for (const segment of joined.split(",")) {
+    const trimmed = segment.trimStart();
+    const looksLikeNewCookie = /^[^=;]+=[^;]/.test(trimmed) && current.length > 0;
+    if (looksLikeNewCookie) {
+      results.push(current.trim());
+      current = trimmed;
+    } else {
+      current += (current ? "," : "") + segment;
+    }
+  }
+  if (current.trim()) results.push(current.trim());
+  return results;
+}
+
 function setCookie(headers: Headers, cookie: Cookie): void {
   let str = `${cookie.name}=${cookie.value}`;
   if (cookie.domain) str += `; Domain=${cookie.domain}`;

package/vtex/utils/proxy.ts

@@ -104,10 +104,20 @@ function buildOriginUrl(
   return new URL(`https://${originHost}${url.pathname}${url.search}`);
 }
 
+/**
+ * Copy headers excluding hop-by-hop and Set-Cookie.
+ *
+ * Set-Cookie is excluded intentionally: Headers.forEach / .set() joins
+ * multiple Set-Cookie values with ", " which corrupts cookies containing
+ * commas (e.g. Expires dates). proxySetCookie handles Set-Cookie
+ * separately using Headers.getSetCookie() for correct multi-cookie support.
+ */
 function filterHeaders(headers: Headers): Headers {
   const filtered = new Headers();
   headers.forEach((value, key) => {
-    if (!HOP_BY_HOP_HEADERS.has(key.toLowerCase())) {
+    const lower = key.toLowerCase();
+    if (lower === "set-cookie") return;
+    if (!HOP_BY_HOP_HEADERS.has(lower)) {
       filtered.set(key, value);
     }
   });
@@ -169,13 +179,13 @@ export async function proxyToVtex(
 
   const responseHeaders = filterHeaders(new Headers(originResponse.headers));
 
-  if (options?.rewriteCookieDomain !== false) {
-    proxySetCookie(
-      originResponse.headers,
-      responseHeaders,
-      new URL(request.url).origin,
-    );
-  }
+  proxySetCookie(
+    originResponse.headers,
+    responseHeaders,
+    options?.rewriteCookieDomain !== false
+      ? new URL(request.url).origin
+      : undefined,
+  );
 
   if (originResponse.status >= 300 && originResponse.status < 400) {
     const location = originResponse.headers.get("location");