Avoid utm campaigns with space or plus sign in VTEX legacy fetch. (#68)

* Avoid utm campaigns with space or plus sign in UTM campaigns.

* Remove console.log.

* Create variable to hold all QS to sanatize.

* Remove console.log.

packs/vtex/actions/wishlist/removeItem.ts

@@ -1,6 +1,6 @@
 import { paths } from "../../utils/paths.ts";
 import { parseCookie } from "../../utils/vtexId.ts";
-import { fetchAPI } from "deco-sites/std/utils/fetch.ts";
+import { fetchAPI } from "deco-sites/std/utils/fetchVTEX.ts";
 import wishlistLoader from "../../loaders/wishlist.ts";
 import type { WishlistItem } from "deco-sites/std/packs/vtex/types.ts";
 import type { Context } from "deco-sites/std/packs/vtex/accounts/vtex.ts";

packs/vtex/loaders/legacy/productDetailsPage.ts

@@ -13,7 +13,7 @@ import {
   pickSku,
   toProductPage,
 } from "deco-sites/std/packs/vtex/utils/transform.ts";
-import { fetchAPI } from "deco-sites/std/utils/fetch.ts";
+import { fetchAPI } from "deco-sites/std/utils/fetchVTEX.ts";
 
 export interface Props {
   slug: RequestURLParam;

packs/vtex/loaders/legacy/productList.ts

@@ -13,7 +13,7 @@ import {
   withSegmentCookie,
 } from "deco-sites/std/packs/vtex/utils/segment.ts";
 import { toProduct } from "deco-sites/std/packs/vtex/utils/transform.ts";
-import { fetchAPI } from "deco-sites/std/utils/fetch.ts";
+import { fetchAPI } from "deco-sites/std/utils/fetchVTEX.ts";
 
 export interface CollectionProps {
   // TODO: pattern property isn't being handled by RJSF

packs/vtex/loaders/legacy/productListingPage.ts

@@ -20,7 +20,7 @@ import {
   legacyFacetToFilter,
   toProduct,
 } from "deco-sites/std/packs/vtex/utils/transform.ts";
-import { fetchAPI, fetchSafe } from "deco-sites/std/utils/fetch.ts";
+import { fetchAPI, fetchSafe } from "deco-sites/std/utils/fetchVTEX.ts";
 import type { LegacyFacets, LegacyProduct } from "../../types.ts";
 
 const MAX_ALLOWED_PAGES = 500;

packs/vtex/loaders/legacy/relatedProductsLoader.ts

@@ -1,4 +1,4 @@
-import { fetchAPI } from "deco-sites/std/utils/fetch.ts";
+import { fetchAPI } from "deco-sites/std/utils/fetchVTEX.ts";
 import { paths } from "deco-sites/std/packs/vtex/utils/paths.ts";
 import { toProduct } from "deco-sites/std/packs/vtex/utils/transform.ts";
 import { RequestURLParam } from "deco-sites/std/functions/requestToParam.ts";

packs/vtex/loaders/navbar.ts

@@ -1,6 +1,6 @@
 import { categoryTreeToNavbar } from "deco-sites/std/packs/vtex/utils/transform.ts";
 import { paths } from "deco-sites/std/packs/vtex/utils/paths.ts";
-import { fetchAPI } from "deco-sites/std/utils/fetch.ts";
+import { fetchAPI } from "deco-sites/std/utils/fetchVTEX.ts";
 import type { Navbar } from "deco-sites/std/commerce/types.ts";
 import type { Context } from "deco-sites/std/packs/vtex/accounts/vtex.ts";
 import type { Category } from "deco-sites/std/packs/vtex/types.ts";

packs/vtex/utils/legacy.ts

@@ -1,4 +1,4 @@
-import { fetchAPI } from "deco-sites/std/utils/fetch.ts";
+import { fetchAPI } from "deco-sites/std/utils/fetchVTEX.ts";
 import { paths } from "deco-sites/std/packs/vtex/utils/paths.ts";
 import { slugify } from "deco-sites/std/packs/vtex/utils/slugify.ts";
 import type { Segment } from "deco-sites/std/packs/vtex/types.ts";

utils/fetchVTEX.ts

@@ -0,0 +1,57 @@
+import { FetchOptions } from "./fetch.ts";
+import {
+  fetchAPI as fetchAPIBase,
+  fetchSafe as fetchSafeBase,
+} from "./fetch.ts";
+
+const processFetch = async (
+  _fetch: (
+    input: string | Request | URL,
+    init?: RequestInit & FetchOptions,
+  ) => ReturnType<typeof fetch>,
+  input: string | Request | URL,
+  init?: RequestInit & FetchOptions,
+) => {
+  let url: URL;
+
+  if (typeof input === "string") {
+    url = new URL(input);
+  } else if (input instanceof URL) {
+    url = input;
+  } else {
+    // is a request... you know what you are doing.
+    return await _fetch(input, init);
+  }
+
+  const QS_TO_REMOVE_PLUS = ["utm_campaign"];
+
+  QS_TO_REMOVE_PLUS.forEach((qsToSanatize) => {
+    if (url.searchParams.has(qsToSanatize)) {
+      const searchParams = url.searchParams;
+      const testParamValues = searchParams.getAll(qsToSanatize);
+      const updatedTestParamValues = testParamValues.map((paramValue) =>
+        paramValue.replace(/\+/g, "").replaceAll(" ", "")
+      );
+      searchParams.delete(qsToSanatize);
+      updatedTestParamValues.forEach((updatedValue) =>
+        searchParams.append(qsToSanatize, updatedValue)
+      );
+    }
+  });
+
+  return await _fetch(url.toString(), init);
+};
+
+export const fetchSafe = async (
+  input: string | Request | URL,
+  init?: RequestInit & FetchOptions,
+) => {
+  return await processFetch(fetchSafeBase, input, init);
+};
+
+export const fetchAPI = async <T>(
+  input: string | Request | URL,
+  init?: RequestInit & FetchOptions,
+): Promise<T> => {
+  return await processFetch(fetchAPIBase, input, init) as T;
+};