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

shopify/utils/storefront/storefront.graphql.gen.ts

@@ -7704,6 +7704,8 @@ export type FilterFragment = { id: string, label: string, type: FilterType, valu
 
 export type CartFragment = { id: string, checkoutUrl: any, totalQuantity: number, lines: { nodes: Array<{ id: string, quantity: number, merchandise: { id: string, title: string, image?: { url: any, altText?: string | null } | null, product: { title: string }, price: { amount: any, currencyCode: CurrencyCode } }, cost: { totalAmount: { amount: any, currencyCode: CurrencyCode }, subtotalAmount: { amount: any, currencyCode: CurrencyCode }, amountPerQuantity: { amount: any, currencyCode: CurrencyCode }, compareAtAmountPerQuantity?: { amount: any, currencyCode: CurrencyCode } | null } } | { id: string, quantity: number, merchandise: { id: string, title: string, image?: { url: any, altText?: string | null } | null, product: { title: string }, price: { amount: any, currencyCode: CurrencyCode } }, cost: { totalAmount: { amount: any, currencyCode: CurrencyCode }, subtotalAmount: { amount: any, currencyCode: CurrencyCode }, amountPerQuantity: { amount: any, currencyCode: CurrencyCode }, compareAtAmountPerQuantity?: { amount: any, currencyCode: CurrencyCode } | null } }> }, cost: { subtotalAmount: { amount: any, currencyCode: CurrencyCode }, totalAmount: { amount: any, currencyCode: CurrencyCode }, checkoutChargeAmount: { amount: any, currencyCode: CurrencyCode } }, discountCodes: Array<{ code: string, applicable: boolean }>, discountAllocations: Array<{ discountedAmount: { amount: any, currencyCode: CurrencyCode } } | { discountedAmount: { amount: any, currencyCode: CurrencyCode } } | { discountedAmount: { amount: any, currencyCode: CurrencyCode } }> };
 
+export type CustomerFragment = { id: string, email?: string | null, firstName?: string | null, lastName?: string | null };
+
 export type CreateCartMutationVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -7767,6 +7769,13 @@ export type ProductRecommendationsQueryVariables = Exact<{
 
 export type ProductRecommendationsQuery = { productRecommendations?: Array<{ availableForSale: boolean, createdAt: any, description: string, descriptionHtml: any, handle: string, id: string, isGiftCard: boolean, onlineStoreUrl?: any | null, productType: string, publishedAt: any, requiresSellingPlan: boolean, tags: Array<string>, title: string, totalInventory?: number | null, updatedAt: any, vendor: string, featuredImage?: { altText?: string | null, url: any } | null, images: { nodes: Array<{ altText?: string | null, url: any }> }, media: { nodes: Array<{ alt?: string | null, mediaContentType: MediaContentType, previewImage?: { altText?: string | null, url: any } | null } | { alt?: string | null, mediaContentType: MediaContentType, previewImage?: { altText?: string | null, url: any } | null } | { alt?: string | null, mediaContentType: MediaContentType, previewImage?: { altText?: string | null, url: any } | null } | { alt?: string | null, mediaContentType: MediaContentType, previewImage?: { altText?: string | null, url: any } | null }> }, options: Array<{ name: string, values: Array<string> }>, priceRange: { minVariantPrice: { amount: any, currencyCode: CurrencyCode }, maxVariantPrice: { amount: any, currencyCode: CurrencyCode } }, seo: { title?: string | null, description?: string | null }, variants: { nodes: Array<{ availableForSale: boolean, barcode?: string | null, currentlyNotInStock: boolean, id: string, quantityAvailable?: number | null, requiresShipping: boolean, sku?: string | null, title: string, weight?: number | null, weightUnit: WeightUnit, compareAtPrice?: { amount: any, currencyCode: CurrencyCode } | null, image?: { altText?: string | null, url: any } | null, price: { amount: any, currencyCode: CurrencyCode }, selectedOptions: Array<{ name: string, value: string }>, unitPrice?: { amount: any, currencyCode: CurrencyCode } | null, unitPriceMeasurement?: { measuredType?: UnitPriceMeasurementMeasuredType | null, quantityValue: number, referenceUnit?: UnitPriceMeasurementMeasuredUnit | null, quantityUnit?: UnitPriceMeasurementMeasuredUnit | null } | null }> }, collections: { nodes: Array<{ description: string, descriptionHtml: any, handle: string, id: string, title: string, updatedAt: any, image?: { altText?: string | null, url: any } | null }> } }> | null };
 
+export type FetchCustomerInfoQueryVariables = Exact<{
+  customerAccessToken: Scalars['String']['input'];
+}>;
+
+
+export type FetchCustomerInfoQuery = { customer?: { id: string, email?: string | null, firstName?: string | null, lastName?: string | null } | null };
+
 export type AddItemToCartMutationVariables = Exact<{
   cartId: Scalars['ID']['input'];
   lines: Array<CartLineInput> | CartLineInput;
@@ -7790,3 +7799,11 @@ export type UpdateItemsMutationVariables = Exact<{
 
 
 export type UpdateItemsMutation = { payload?: { cart?: { id: string, checkoutUrl: any, totalQuantity: number, lines: { nodes: Array<{ id: string, quantity: number, merchandise: { id: string, title: string, image?: { url: any, altText?: string | null } | null, product: { title: string }, price: { amount: any, currencyCode: CurrencyCode } }, cost: { totalAmount: { amount: any, currencyCode: CurrencyCode }, subtotalAmount: { amount: any, currencyCode: CurrencyCode }, amountPerQuantity: { amount: any, currencyCode: CurrencyCode }, compareAtAmountPerQuantity?: { amount: any, currencyCode: CurrencyCode } | null } } | { id: string, quantity: number, merchandise: { id: string, title: string, image?: { url: any, altText?: string | null } | null, product: { title: string }, price: { amount: any, currencyCode: CurrencyCode } }, cost: { totalAmount: { amount: any, currencyCode: CurrencyCode }, subtotalAmount: { amount: any, currencyCode: CurrencyCode }, amountPerQuantity: { amount: any, currencyCode: CurrencyCode }, compareAtAmountPerQuantity?: { amount: any, currencyCode: CurrencyCode } | null } }> }, cost: { subtotalAmount: { amount: any, currencyCode: CurrencyCode }, totalAmount: { amount: any, currencyCode: CurrencyCode }, checkoutChargeAmount: { amount: any, currencyCode: CurrencyCode } }, discountCodes: Array<{ code: string, applicable: boolean }>, discountAllocations: Array<{ discountedAmount: { amount: any, currencyCode: CurrencyCode } } | { discountedAmount: { amount: any, currencyCode: CurrencyCode } } | { discountedAmount: { amount: any, currencyCode: CurrencyCode } }> } | null } | null };
+
+export type SignInWithEmailAndPasswordMutationVariables = Exact<{
+  email: Scalars['String']['input'];
+  password: Scalars['String']['input'];
+}>;
+
+
+export type SignInWithEmailAndPasswordMutation = { customerAccessTokenCreate?: { customerAccessToken?: { accessToken: string, expiresAt: any } | null, customerUserErrors: Array<{ code?: CustomerErrorCode | null, message: string }> } | null };

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>;
@@ -135,6 +136,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/manifest.gen.ts

@@ -6,18 +6,20 @@ import * as $$$$$$$$$0 from "./actions/cart/addCoupon.ts";
 import * as $$$$$$$$$1 from "./actions/cart/addItem.ts";
 import * as $$$$$$$$$2 from "./actions/cart/addItems.ts";
 import * as $$$$$$$$$3 from "./actions/cart/addKit.ts";
-import * as $$$$$$$$$4 from "./actions/cart/partnerAssociate.ts";
-import * as $$$$$$$$$5 from "./actions/cart/partnerDisassociate.ts";
-import * as $$$$$$$$$6 from "./actions/cart/removeCoupon.ts";
-import * as $$$$$$$$$7 from "./actions/cart/removeKit.ts";
-import * as $$$$$$$$$8 from "./actions/cart/updateItemQuantity.ts";
-import * as $$$$$$$$$9 from "./actions/newsletter/register.ts";
-import * as $$$$$$$$$10 from "./actions/notifyme.ts";
-import * as $$$$$$$$$11 from "./actions/review/create.ts";
-import * as $$$$$$$$$12 from "./actions/shippingSimulation.ts";
-import * as $$$$$$$$$13 from "./actions/submmitForm.ts";
-import * as $$$$$$$$$14 from "./actions/wishlist/addProduct.ts";
-import * as $$$$$$$$$15 from "./actions/wishlist/removeProduct.ts";
+import * as $$$$$$$$$4 from "./actions/cart/addMetadata.ts";
+import * as $$$$$$$$$5 from "./actions/cart/partnerAssociate.ts";
+import * as $$$$$$$$$6 from "./actions/cart/partnerDisassociate.ts";
+import * as $$$$$$$$$7 from "./actions/cart/removeCoupon.ts";
+import * as $$$$$$$$$8 from "./actions/cart/removeKit.ts";
+import * as $$$$$$$$$9 from "./actions/cart/removeMetadata.ts";
+import * as $$$$$$$$$10 from "./actions/cart/updateItemQuantity.ts";
+import * as $$$$$$$$$11 from "./actions/newsletter/register.ts";
+import * as $$$$$$$$$12 from "./actions/notifyme.ts";
+import * as $$$$$$$$$13 from "./actions/review/create.ts";
+import * as $$$$$$$$$14 from "./actions/shippingSimulation.ts";
+import * as $$$$$$$$$15 from "./actions/submmitForm.ts";
+import * as $$$$$$$$$16 from "./actions/wishlist/addProduct.ts";
+import * as $$$$$$$$$17 from "./actions/wishlist/removeProduct.ts";
 import * as $$$$0 from "./handlers/sitemap.ts";
 import * as $$$0 from "./loaders/cart.ts";
 import * as $$$1 from "./loaders/partners.ts";
@@ -53,18 +55,20 @@ const manifest = {
     "wake/actions/cart/addItem.ts": $$$$$$$$$1,
     "wake/actions/cart/addItems.ts": $$$$$$$$$2,
     "wake/actions/cart/addKit.ts": $$$$$$$$$3,
-    "wake/actions/cart/partnerAssociate.ts": $$$$$$$$$4,
-    "wake/actions/cart/partnerDisassociate.ts": $$$$$$$$$5,
-    "wake/actions/cart/removeCoupon.ts": $$$$$$$$$6,
-    "wake/actions/cart/removeKit.ts": $$$$$$$$$7,
-    "wake/actions/cart/updateItemQuantity.ts": $$$$$$$$$8,
-    "wake/actions/newsletter/register.ts": $$$$$$$$$9,
-    "wake/actions/notifyme.ts": $$$$$$$$$10,
-    "wake/actions/review/create.ts": $$$$$$$$$11,
-    "wake/actions/shippingSimulation.ts": $$$$$$$$$12,
-    "wake/actions/submmitForm.ts": $$$$$$$$$13,
-    "wake/actions/wishlist/addProduct.ts": $$$$$$$$$14,
-    "wake/actions/wishlist/removeProduct.ts": $$$$$$$$$15,
+    "wake/actions/cart/addMetadata.ts": $$$$$$$$$4,
+    "wake/actions/cart/partnerAssociate.ts": $$$$$$$$$5,
+    "wake/actions/cart/partnerDisassociate.ts": $$$$$$$$$6,
+    "wake/actions/cart/removeCoupon.ts": $$$$$$$$$7,
+    "wake/actions/cart/removeKit.ts": $$$$$$$$$8,
+    "wake/actions/cart/removeMetadata.ts": $$$$$$$$$9,
+    "wake/actions/cart/updateItemQuantity.ts": $$$$$$$$$10,
+    "wake/actions/newsletter/register.ts": $$$$$$$$$11,
+    "wake/actions/notifyme.ts": $$$$$$$$$12,
+    "wake/actions/review/create.ts": $$$$$$$$$13,
+    "wake/actions/shippingSimulation.ts": $$$$$$$$$14,
+    "wake/actions/submmitForm.ts": $$$$$$$$$15,
+    "wake/actions/wishlist/addProduct.ts": $$$$$$$$$16,
+    "wake/actions/wishlist/removeProduct.ts": $$$$$$$$$17,
   },
   "name": "wake",
   "baseUrl": import.meta.url,

wake/utils/getUTMMetadata.ts

@@ -0,0 +1,24 @@
+import { Metadata } from "../actions/cart/addMetadata.ts";
+
+const UTM_METADATA_KEYS = [
+  { urlKey: "utm_campaign", metaKey: "utmCampaign" },
+  { urlKey: "utm_medium", metaKey: "utmMedium" },
+  { urlKey: "utm_term", metaKey: "utmTerm" },
+  { urlKey: "utm_source", metaKey: "utmSource" },
+  { urlKey: "utm_content", metaKey: "utmContent" },
+];
+
+export const getUTMMetadata = (url: string) => {
+  const searchParams = new URLSearchParams(url);
+
+  const metadata: Metadata[] = [];
+
+  UTM_METADATA_KEYS.forEach(({ urlKey, metaKey }) => {
+    const value = searchParams.get(urlKey);
+    if (value) {
+      metadata.push({ key: metaKey, value });
+    }
+  });
+
+  return metadata;
+};

wake/utils/graphql/queries.ts

@@ -10,6 +10,10 @@ fragment Checkout on Checkout {
 	coupon
   customer {
     customerId
+  }
+  metadata {
+    key
+    value
   }
 	products {
 		imageUrl
@@ -1327,6 +1331,16 @@ export const RemoveKit = {
   }`,
 };
 
+export const CheckoutAddMetadata = {
+  fragments: [Checkout],
+  query:
+    gql`mutation CheckoutAddMetadata($checkoutId: Uuid!, $metadata: [CheckoutMetadataInput]!) {
+    checkout: checkoutAddMetadata(checkoutId: $checkoutId, metadata: $metadata){
+      ...Checkout
+    }
+  }`,
+};
+
 export const GetPartners = {
   query:
     gql`query GetPartners($first: Int,$last: Int,$names: [String],$priceTableIds: [Int!],$sortDirection: SortDirection! = ASC,$sortKey: PartnerSortKeys! = ID,$before: String,$alias: [String],$after: String) {
@@ -1360,11 +1374,22 @@ export const CheckoutPartnerAssociate = {
   }`,
 };
 
+export const CheckoutRemoveMetadata = {
+  fragments: [Checkout],
+  query:
+    gql`mutation CheckoutRemoveMetadata($checkoutId: Uuid!, $keys: [String]!) {
+    checkout: checkoutRemoveMetadata(checkoutId: $checkoutId, keys: $keys){
+      ...Checkout
+    }
+  }`,
+};
+
 export const CheckoutPartnerDisassociate = {
   fragments: [Checkout],
   query:
     gql`mutation CheckoutPartnerDisassociate($checkoutId: Uuid!, $customerAccessToken: String){
     checkout: checkoutPartnerDisassociate(checkoutId: $checkoutId , customerAccessToken: $customerAccessToken ){
+
       ...Checkout
     }
   }`,