[WAKE] Feat: create wake checkout metadata actions and add on page load

wake/actions/cart/addMetadata.ts

@@ -0,0 +1,50 @@
+import { HttpError } from "../../../utils/http.ts";
+import { AppContext } from "../../mod.ts";
+import { getCartCookie, setCartCookie } from "../../utils/cart.ts";
+import { CheckoutAddMetadata } from "../../utils/graphql/queries.ts";
+import {
+  CheckoutAddMetadataMutation,
+  CheckoutAddMetadataMutationVariables,
+  CheckoutFragment,
+} from "../../utils/graphql/storefront.graphql.gen.ts";
+import { parseHeaders } from "../../utils/parseHeaders.ts";
+
+export interface Metadata {
+  key: string;
+  value: string;
+}
+export interface Props {
+  metadata: Metadata[];
+}
+
+const action = async (
+  props: Props,
+  req: Request,
+  ctx: AppContext,
+): Promise<Partial<CheckoutFragment>> => {
+  const { storefront } = ctx;
+  const cartId = getCartCookie(req.headers);
+  const headers = parseHeaders(req.headers);
+
+  if (!cartId) {
+    throw new HttpError(400, "Missing cart cookie");
+  }
+
+  const data = await storefront.query<
+    CheckoutAddMetadataMutation,
+    CheckoutAddMetadataMutationVariables
+  >({
+    variables: { checkoutId: cartId, ...props },
+    ...CheckoutAddMetadata,
+  }, { headers });
+
+  const checkoutId = data.checkout?.checkoutId;
+
+  if (cartId !== checkoutId) {
+    setCartCookie(ctx.response.headers, checkoutId);
+  }
+
+  return data.checkout ?? {};
+};
+
+export default action;

wake/actions/cart/removeMetadata.ts

@@ -0,0 +1,46 @@
+import { HttpError } from "../../../utils/http.ts";
+import { AppContext } from "../../mod.ts";
+import { getCartCookie, setCartCookie } from "../../utils/cart.ts";
+import { CheckoutRemoveMetadata } from "../../utils/graphql/queries.ts";
+import {
+  CheckoutFragment,
+  CheckoutRemoveMetadataMutation,
+  CheckoutRemoveMetadataMutationVariables,
+} from "../../utils/graphql/storefront.graphql.gen.ts";
+import { parseHeaders } from "../../utils/parseHeaders.ts";
+
+export interface Props {
+  keys: string[];
+}
+
+const action = async (
+  props: Props,
+  req: Request,
+  ctx: AppContext,
+): Promise<Partial<CheckoutFragment>> => {
+  const { storefront } = ctx;
+  const cartId = getCartCookie(req.headers);
+  const headers = parseHeaders(req.headers);
+
+  if (!cartId) {
+    throw new HttpError(400, "Missing cart cookie");
+  }
+
+  const data = await storefront.query<
+    CheckoutRemoveMetadataMutation,
+    CheckoutRemoveMetadataMutationVariables
+  >({
+    variables: { checkoutId: cartId, ...props },
+    ...CheckoutRemoveMetadata,
+  }, { headers });
+
+  const checkoutId = data.checkout?.checkoutId;
+
+  if (cartId !== checkoutId) {
+    setCartCookie(ctx.response.headers, checkoutId);
+  }
+
+  return data.checkout ?? {};
+};
+
+export default action;

wake/hooks/context.ts

@@ -8,6 +8,7 @@ import type {
 import { Person } from "../../commerce/types.ts";
 import { setClientCookie } from "../utils/cart.ts";
 import { ShopQuery } from "../utils/graphql/storefront.graphql.gen.ts";
+import { getUTMMetadata } from "../utils/getUTMMetadata.ts";
 
 export interface Context {
   cart: Partial<CheckoutFragment>;
@@ -49,6 +50,7 @@ const enqueue = (
       context.wishlist.value = wishlist || context.wishlist.value;
 
       loading.value = false;
+      setMetaData();
     } catch (error) {
       if (error.name === "AbortError") return;
 
@@ -127,6 +129,20 @@ const load = (signal: AbortSignal) =>
     wishlist: invoke.wake.loaders.wishlist(),
   }, { signal });
 
+async function setMetaData() {
+  const metadata = getUTMMetadata(globalThis.location.search);
+
+  try {
+    await invoke.wake.actions.cart.removeMetadata({
+      keys: metadata.map((meta) => meta.key),
+    });
+  } catch (error) {
+    console.error(error);
+  }
+
+  await invoke.wake.actions.cart.addMetadata({ metadata });
+}
+
 if (IS_BROWSER) {
   enqueue2(load2);
   enqueue(load);
@@ -135,6 +151,11 @@ if (IS_BROWSER) {
     "visibilitychange",
     () => document.visibilityState === "visible" && enqueue(load),
   );
+
+  const metadata = getUTMMetadata(globalThis.location.search);
+  if (metadata) {
+    await invoke.wake.actions.cart.addMetadata({ metadata });
+  }
 }
 
 export const state = {

wake/hooks/useCart.ts

@@ -50,6 +50,8 @@ const state = {
   updateItem: enqueue("wake/actions/cart/updateItemQuantity.ts"),
   addCoupon: enqueue("wake/actions/cart/addCoupon.ts"),
   removeCoupon: enqueue("wake/actions/cart/removeCoupon.ts"),
+  addMetadata: enqueue("wake/actions/cart/addMetadata.ts"),
+  removeMetadata: enqueue("wake/actions/cart/removeMetadata.ts"),
   partnerAssociate: enqueue("wake/actions/cart/partnerAssociate.ts"),
   partnerDisassociate: enqueue("wake/actions/cart/partnerDisassociate.ts"),
 };

wake/loaders/cart.ts

@@ -11,7 +11,7 @@ import {
 import { parseHeaders } from "../utils/parseHeaders.ts";
 
 /**
- * @title VNDA Integration
+ * @title Wake Integration
  * @description Cart loader
  */
 const loader = async (

wake/loaders/productDetailsPage.ts

@@ -26,7 +26,7 @@ export interface Props {
 async function loader(
   props: Props,
   req: Request,
-  ctx: AppContext
+  ctx: AppContext,
 ): Promise<ProductDetailsPage | null> {
   const url = new URL(req.url);
   const { slug, buyTogether, includeSameParent } = props;
@@ -55,7 +55,7 @@ async function loader(
     },
     {
       headers,
-    }
+    },
   );
 
   const buyListProducts = await Promise.all(
@@ -64,8 +64,8 @@ async function loader(
 
       const { productId, includeSameParent, quantity } = buyListProduct;
 
-      const buyListProductPage =
-        await ctx.invoke.wake.loaders.productDetailsPage({
+      const buyListProductPage = await ctx.invoke.wake.loaders
+        .productDetailsPage({
           // 'slug' its just to fit the parse function of loader
           slug: `slug-${productId}`,
           includeSameParent,
@@ -81,7 +81,7 @@ async function loader(
       });
 
       return buyListProductPage.product;
-    }) ?? []
+    }) ?? [],
   ).then((maybeProductList) =>
     maybeProductList.filter((node): node is Product => Boolean(node))
   );
@@ -100,7 +100,7 @@ async function loader(
     },
     {
       headers,
-    }
+    },
   );
 
   const wakeProductOrBuyList = wakeProduct || wakeBuyList;
@@ -109,35 +109,34 @@ async function loader(
     return null;
   }
 
-  const variantsItems =
-    (await ctx.invoke.wake.loaders.productList({
-      first: MAXIMUM_REQUEST_QUANTITY,
-      sortDirection: "ASC",
-      sortKey: "RANDOM",
-      filters: { productId: [productId] },
-    })) ?? [];
+  const variantsItems = (await ctx.invoke.wake.loaders.productList({
+    first: MAXIMUM_REQUEST_QUANTITY,
+    sortDirection: "ASC",
+    sortKey: "RANDOM",
+    filters: { productId: [productId] },
+  })) ?? [];
 
   const buyTogetherItens =
     buyTogether && !!wakeProductOrBuyList.buyTogether?.length
       ? (await ctx.invoke.wake.loaders.productList({
-          first: MAXIMUM_REQUEST_QUANTITY,
-          sortDirection: "ASC",
-          sortKey: "RANDOM",
-          filters: {
-            productId: wakeProductOrBuyList.buyTogether?.map(
-              (bt) => bt!.productId
-            ),
-            mainVariant: true,
-          },
-          getVariations: true,
-        })) ?? []
+        first: MAXIMUM_REQUEST_QUANTITY,
+        sortDirection: "ASC",
+        sortKey: "RANDOM",
+        filters: {
+          productId: wakeProductOrBuyList.buyTogether?.map(
+            (bt) => bt!.productId,
+          ),
+          mainVariant: true,
+        },
+        getVariations: true,
+      })) ?? []
       : [];
 
   const product = toProduct(
     wakeProductOrBuyList,
     { base: url },
     variantsItems,
-    variantId
+    variantId,
   );
   return {
     "@type": "ProductDetailsPage",
@@ -146,18 +145,17 @@ async function loader(
       {
         base: url,
       },
-      product
+      product,
     ),
     product: {
       ...product,
       isAccessoryOrSparePartFor: buyListProducts,
-      isRelatedTo:
-        buyTogetherItens?.map((buyItem) => {
-          return {
-            ...buyItem,
-            additionalType: "BuyTogether",
-          };
-        }) ?? [],
+      isRelatedTo: buyTogetherItens?.map((buyItem) => {
+        return {
+          ...buyItem,
+          additionalType: "BuyTogether",
+        };
+      }) ?? [],
     },
     seo: {
       canonical: product.isVariantOf?.url ?? "",