feat(vtex): add support for preserving UTM characters in segmentBag

Author: marcoferreiradev

vtex/actions/session/createSession.ts

@@ -21,22 +21,31 @@ async function action(
   const setCookiesSoFar = getSetCookies(ctx.response.headers);
   const { header: cookie } = buildCookieJar(req.headers, setCookiesSoFar);
 
-  const response = await vcs["POST /api/sessions"]({
-    items: items.join(","),
-  }, {
-    body: {
-      public: {
-        ...props.publicProperties,
+  const url = new URL(req.url);
+  const searchParams = new URLSearchParams(url.search);
+  searchParams.set("items", items.join(","));
+
+  const response = await vcs["POST /api/sessions"](
+    Object.fromEntries(searchParams.entries()),
+    {
+      body: {
+        public: {
+          ...props.publicProperties,
+        },
       },
+      headers: { cookie },
     },
-    headers: { cookie },
-  });
+  );
 
   if (!response.ok) {
     throw new Error(`Failed to create session: ${response.status}`);
   }
 
-  setCookiesFromSession(response.headers, ctx.response.headers, req.url);
+  setCookiesFromSession({
+    from: response.headers,
+    req,
+    ctx,
+  });
 
   return await response.json() as GetSessionResponse;
 }

vtex/actions/session/editSession.ts

@@ -41,7 +41,11 @@ async function action(
     throw new Error(`Failed to edit session: ${response.status}`);
   }
 
-  setCookiesFromSession(response.headers, ctx.response.headers, req.url);
+  setCookiesFromSession({
+    from: response.headers,
+    req,
+    ctx,
+  });
 
   return (await response.json()) as GetSessionResponse;
 }

vtex/mod.ts

@@ -76,14 +76,18 @@ export interface Props {
    */
   setRefreshToken?: boolean;
   defaultSegment?: SegmentCulture;
+  /**
+   * @description Preserve UTM characters on cookies.
+   * @default false
+   */
+  preserveUtmChars?: boolean;
   usePortalSitemap?: boolean;
   /**
    * @description Use VTEX as backend platform
    * @default vtex
    * @hide true
    */
   platform: "vtex";
-
   advancedConfigs?: {
     doNotFetchVariantsForRelatedProducts?: boolean;
   };

vtex/utils/cookies.ts

@@ -4,7 +4,8 @@ import {
   getSetCookies,
   setCookie,
 } from "std/http/cookie.ts";
-import { SEGMENT_COOKIE_NAME } from "./segment.ts";
+import { SEGMENT_COOKIE_NAME, setSegmentBag } from "./segment.ts";
+import type { AppContext } from "../mod.ts";
 
 export const stringify = (cookies: Record<string, string>) =>
   Object.entries(cookies)
@@ -30,28 +31,29 @@ export const proxySetCookie = (
   }
 };
 
-export const setCookiesFromSession = (
-  from: Headers,
-  to: Headers,
-  domain: URL | string,
-) => {
-  const newDomain = new URL(domain);
+export const setCookiesFromSession = ({
+  from,
+  req,
+  ctx,
+}: {
+  from: Headers;
+  req: Request;
+  ctx: AppContext;
+}) => {
+  const newDomain = new URL(req.url);
 
   for (const cookie of getSetCookies(from)) {
-    const newCookie = cookie.name === SEGMENT_COOKIE_NAME
-      ? {
-        value: cookie.value,
-        name: cookie.name,
-        path: "/",
-        secure: true,
-        httpOnly: true,
-      }
-      : {
-        ...cookie,
-        domain: newDomain.hostname,
-      };
+    if (cookie.name === SEGMENT_COOKIE_NAME) {
+      const { cookies } = buildCookieJar(from, getSetCookies(from));
+      setSegmentBag(cookies, req, ctx);
+      continue;
+    }
+    const newCookie = {
+      ...cookie,
+      domain: newDomain.hostname,
+    };
 
-    setCookie(to, newCookie);
+    setCookie(ctx.response.headers, newCookie);
   }
 };
 
@@ -61,7 +63,7 @@ export const setCookiesFromSession = (
  */
 export interface CookieJarResult {
   header: string;
-  record: Record<string, string>;
+  cookies: Record<string, string>;
   detailed: Cookie[];
 }
 
@@ -85,12 +87,8 @@ export function buildCookieJar(
   const cookies = Array.from(jar.values());
 
   return {
-    header: cookies
-      .map((c) => `${c.name}=${c.value}`)
-      .join("; "),
-    record: Object.fromEntries(
-      cookies.map((c) => [c.name, c.value]),
-    ),
+    header: cookies.map((c) => `${c.name}=${c.value}`).join("; "),
+    cookies: Object.fromEntries(cookies.map((c) => [c.name, c.value])),
     detailed: cookies,
   };
 }

vtex/utils/segment.ts

@@ -90,21 +90,21 @@ const serialize = ({
   countryCode,
   cultureInfo,
   channelPrivacy,
-}: Partial<Segment>) => {
+}: Partial<Segment>, preserveUtmChars = false) => {
+  const normalize = (value: string | null | undefined) =>
+    value && !preserveUtmChars ? removeNonLatin1Chars(value) : value;
+
   const seg = {
     campaigns,
     channel,
     priceTables,
     regionId,
-    utm_campaign: utm_campaign &&
-      removeNonLatin1Chars(utm_campaign).replace(/[\/\[\]{}()<>.]/g, ""),
-    utm_source: utm_source &&
-      removeNonLatin1Chars(utm_source).replace(/[\/\[\]{}()<>.]/g, ""),
-    utm_medium: utm_medium &&
-      removeNonLatin1Chars(utm_medium).replace(/[\/\[\]{}()<>.]/g, ""),
-    utmi_campaign: utmi_campaign && removeNonLatin1Chars(utmi_campaign),
-    utmi_page: utmi_page && removeNonLatin1Chars(utmi_page),
-    utmi_part: utmi_part && removeNonLatin1Chars(utmi_part),
+    utm_campaign: normalize(utm_campaign)?.replace(/[\/\[\]{}()<>.]/g, ""),
+    utm_source: normalize(utm_source)?.replace(/[\/\[\]{}()<>.]/g, ""),
+    utm_medium: normalize(utm_medium)?.replace(/[\/\[\]{}()<>.]/g, ""),
+    utmi_campaign: normalize(utmi_campaign),
+    utmi_page: normalize(utmi_page),
+    utmi_part: normalize(utmi_part),
     currencyCode,
     currencySymbol,
     countryCode,
@@ -168,10 +168,9 @@ export const setSegmentBag = (
   const segmentFromCookie = vtex_segment ? parse(vtex_segment) : null;
 
   const segmentFromSalesChannelCookie = cookies[SALES_CHANNEL_COOKIE]
-    ? {
-      channel: cookies[SALES_CHANNEL_COOKIE]?.split("=")[1],
-    }
+    ? { channel: cookies[SALES_CHANNEL_COOKIE]?.split("=")[1] }
     : {};
+
   const segmentFromRequest = buildSegmentFromRequest(req);
 
   const segment = {
@@ -182,10 +181,10 @@ export const setSegmentBag = (
     ...segmentFromSalesChannelCookie,
     ...segmentFromRequest,
   };
-  const token = serialize(segment);
+
+  const token = serialize(segment, ctx.preserveUtmChars);
   setSegmentInBag(ctx, { payload: segment, token });
 
-  // If the user came from a sales channel in the URL, we set the cookie
   if (segmentFromRequest.channel) {
     setCookie(ctx.response.headers, {
       value: `sc=${segmentFromRequest.channel}`,
@@ -195,7 +194,6 @@ export const setSegmentBag = (
     });
   }
 
-  // Avoid setting cookie when segment from request matches the one generated
   if (vtex_segment !== token) {
     setCookie(ctx.response.headers, {
       value: token,