@graphcommerce/google-datalayer 8.1.0-canary.9 → 9.0.0-canary.101

package/CHANGELOG.md

@@ -1,5 +1,205 @@
 # @graphcommerce/google-datalayer
 
+## 9.0.0-canary.101
+
+## 9.0.0-canary.100
+
+## 9.0.0-canary.99
+
+## 9.0.0-canary.98
+
+## 9.0.0-canary.97
+
+## 9.0.0-canary.96
+
+## 9.0.0-canary.95
+
+## 9.0.0-canary.94
+
+## 9.0.0-canary.93
+
+## 9.0.0-canary.92
+
+## 9.0.0-canary.91
+
+## 9.0.0-canary.90
+
+## 9.0.0-canary.89
+
+## 9.0.0-canary.88
+
+## 9.0.0-canary.87
+
+## 9.0.0-canary.86
+
+## 9.0.0-canary.85
+
+## 9.0.0-canary.84
+
+## 9.0.0-canary.83
+
+## 9.0.0-canary.82
+
+## 9.0.0-canary.81
+
+## 9.0.0-canary.80
+
+### Patch Changes
+
+- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`e3fe4f7`](https://github.com/graphcommerce-org/graphcommerce/commit/e3fe4f73c8c3e3c6a5ec68cdc7a32820e8f69e07) - Solve an issue where the BillingPage query would be re-queried after setting the payment method. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 9.0.0-canary.79
+
+## 9.0.0-canary.78
+
+## 9.0.0-canary.77
+
+## 9.0.0-canary.76
+
+## 9.0.0-canary.75
+
+## 9.0.0-canary.74
+
+## 9.0.0-canary.73
+
+### Minor Changes
+
+- [#2337](https://github.com/graphcommerce-org/graphcommerce/pull/2337) [`18898df`](https://github.com/graphcommerce-org/graphcommerce/commit/18898df44b786dd68d8e6fec538e3db947c157e4) - All sendEvent calls are now the return type of useSendEvent, to allow plugins to use hooks themselves ([@Renzovh](https://github.com/Renzovh))
+
+## 9.0.0-canary.72
+
+## 9.0.0-canary.71
+
+## 9.0.0-canary.70
+
+## 9.0.0-canary.69
+
+## 9.0.0-canary.68
+
+## 9.0.0-canary.67
+
+## 9.0.0-canary.66
+
+## 9.0.0-canary.65
+
+## 9.0.0-canary.64
+
+## 9.0.0-canary.63
+
+## 9.0.0-canary.62
+
+## 9.0.0-canary.61
+
+## 9.0.0-canary.60
+
+### Patch Changes
+
+- [#2331](https://github.com/graphcommerce-org/graphcommerce/pull/2331) [`702bfc9`](https://github.com/graphcommerce-org/graphcommerce/commit/702bfc93566c9745546988e57988431d5d4d8cb0) - Moved plugins to new format ([@paales](https://github.com/paales))
+
+## 9.0.0-canary.59
+
+## 9.0.0-canary.58
+
+## 9.0.0-canary.57
+
+## 9.0.0-canary.56
+
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+### Patch Changes
+
+- [#2246](https://github.com/graphcommerce-org/graphcommerce/pull/2246) [`fc5c04d`](https://github.com/graphcommerce-org/graphcommerce/commit/fc5c04d4a2c0301be7d3cc983d9b31f6fcaf6fe6) - Create useRemoveItemFromCart hook to allow for reuse while keeping compatibility with plugins. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
 ## 8.1.0-canary.9
 
 ## 8.1.0-canary.8
@@ -18,8 +218,7 @@
 
 ### Patch Changes
 
-- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Prevent BillingPage query from rerunning on each mutation
-  ([@FrankHarland](https://github.com/FrankHarland))
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Prevent BillingPage query from rerunning on each mutation ([@FrankHarland](https://github.com/FrankHarland))
 
 ## 8.0.6-canary.1
 
@@ -34,8 +233,7 @@
   - Removed `eventFormat` as we could automatically detec the correct event format and it is now the responsibility of GTM or the GTAG to handle the event format.
   - Created cartItemToGoogleDatalayerItem and productToGoogleDatalayerItem for easier modifications. ([@paales](https://github.com/paales))
 
-- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`cabeadc`](https://github.com/graphcommerce-org/graphcommerce/commit/cabeadce2b73ce072a2fa8b8ab1ab49907cda13b) - Added core web vitals measurements to the datalayer.
-  ([@paales](https://github.com/paales))
+- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`cabeadc`](https://github.com/graphcommerce-org/graphcommerce/commit/cabeadce2b73ce072a2fa8b8ab1ab49907cda13b) - Added core web vitals measurements to the datalayer. ([@paales](https://github.com/paales))
 
 ## 8.0.5-canary.10
 
@@ -64,8 +262,7 @@
   - Removed `eventFormat` as we could automatically detec the correct event format and it is now the responsibility of GTM or the GTAG to handle the event format.
   - Created cartItemToGoogleDatalayerItem and productToGoogleDatalayerItem for easier modifications. ([@paales](https://github.com/paales))
 
-- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`cabeadc`](https://github.com/graphcommerce-org/graphcommerce/commit/cabeadce2b73ce072a2fa8b8ab1ab49907cda13b) - Added core web vitals measurements to the datalayer.
-  ([@paales](https://github.com/paales))
+- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`cabeadc`](https://github.com/graphcommerce-org/graphcommerce/commit/cabeadce2b73ce072a2fa8b8ab1ab49907cda13b) - Added core web vitals measurements to the datalayer. ([@paales](https://github.com/paales))
 
 ## 8.0.5-canary.0
 
@@ -73,12 +270,10 @@
 
 ### Patch Changes
 
-- [#2158](https://github.com/graphcommerce-org/graphcommerce/pull/2158) [`34de808`](https://github.com/graphcommerce-org/graphcommerce/commit/34de8085e9352d1f3b20b26746685370ea10ab90) - Extracted the datalayer from the googleanalytics package and moved to google-datalayer package. Make sure Google Analytics and Google Tagmanager both can send events individually. Be able to configure the datalayer will send as GA4 or legacy GA3 events.
-  ([@mikekeehnen](https://github.com/mikekeehnen))
+- [#2158](https://github.com/graphcommerce-org/graphcommerce/pull/2158) [`34de808`](https://github.com/graphcommerce-org/graphcommerce/commit/34de8085e9352d1f3b20b26746685370ea10ab90) - Extracted the datalayer from the googleanalytics package and moved to google-datalayer package. Make sure Google Analytics and Google Tagmanager both can send events individually. Be able to configure the datalayer will send as GA4 or legacy GA3 events. ([@mikekeehnen](https://github.com/mikekeehnen))
 
 ## 8.0.4-canary.1
 
 ### Patch Changes
 
-- [#2158](https://github.com/graphcommerce-org/graphcommerce/pull/2158) [`34de808`](https://github.com/graphcommerce-org/graphcommerce/commit/34de8085e9352d1f3b20b26746685370ea10ab90) - Extracted the datalayer from the googleanalytics package and moved to google-datalayer package. Make sure Google Analytics and Google Tagmanager both can send events individually. Be able to configure the datalayer will send as GA4 or legacy GA3 events.
-  ([@mikekeehnen](https://github.com/mikekeehnen))
+- [#2158](https://github.com/graphcommerce-org/graphcommerce/pull/2158) [`34de808`](https://github.com/graphcommerce-org/graphcommerce/commit/34de8085e9352d1f3b20b26746685370ea10ab90) - Extracted the datalayer from the googleanalytics package and moved to google-datalayer package. Make sure Google Analytics and Google Tagmanager both can send events individually. Be able to configure the datalayer will send as GA4 or legacy GA3 events. ([@mikekeehnen](https://github.com/mikekeehnen))

package/Config.graphqls

@@ -1,4 +1,7 @@
 extend input GraphCommerceConfig {
+  """
+  Datalayer config
+  """
   dataLayer: DatalayerConfig
 }
 

package/api/googleEventNames.ts

@@ -1,3 +1,17 @@
+import { Metric } from 'web-vitals'
+import type { AddPaymentInfo } from '../mapping/cartToAddPaymentInfo/cartToAddPaymentInfo'
+import type { AddShippingInfo } from '../mapping/cartToAddShippingInfo/cartToAddShippingInfo'
+import type { BeginCheckout } from '../mapping/cartToBeginCheckout/cartToBeginCheckout'
+import type { PurchaseOrRefund } from '../mapping/cartToPurchase/cartToPurchase'
+import type { ViewCart } from '../mapping/cartToViewCart/cartToViewCart'
+import type { DataLayerCurrencyValue } from '../mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import type {
+  SelectItem,
+  ViewItemList,
+} from '../mapping/productItemsToViewItemList/productItemsToViewItemList'
+import type { GoogleDatalayerItem } from '../mapping/productToDatalayerItem/productToDatalayerItem'
+import type { ViewItem } from '../mapping/productToViewItem/productToViewItem'
+
 export const googleEventNames = [
   'add_payment_info',
   'add_shipping_info',
@@ -37,3 +51,105 @@ export const googleEventNames = [
   'view_promotion',
   'view_search_results',
 ] as const
+
+/**
+ * @see https://developers.google.com/tag-platform/gtagjs/reference/events
+ */
+export type GoogleEventTypes = {
+  exception: { description?: string; fatal?: boolean }
+  share: { method?: string; content_type?: string; item_id?: string }
+
+  add_payment_info: AddPaymentInfo
+  add_shipping_info: AddShippingInfo
+  add_to_cart: ViewCart
+  add_to_wishlist: DataLayerCurrencyValue & { items: GoogleDatalayerItem[] }
+  begin_checkout: BeginCheckout
+
+  login: { method?: string }
+  sign_up: {
+    method?: string
+  }
+
+  page_view: {
+    page_location?: string
+    client_id?: string
+    language?: string
+    page_encoding?: string
+    page_title?: string
+    user_agent?: string
+  }
+
+  purchase: PurchaseOrRefund
+  refund: PurchaseOrRefund
+  remove_from_cart: ViewCart
+
+  select_content: {
+    content_type?: string
+    content_id?: string
+    data?: object
+  }
+  select_item: SelectItem
+
+  view_cart: ViewCart
+  view_item: ViewItem
+  view_item_list: ViewItemList
+
+  search: { search_term?: string }
+  view_search_results: { search_term?: string }
+
+  view_promotion: {
+    creative_name?: string
+    creative_slot?: string
+    promotion_id?: string
+    promotion_name?: string
+    items?: GoogleDatalayerItem[]
+  }
+  select_promotion: {
+    creative_name?: string
+    creative_slot?: string
+    promotion_id?: string
+    promotion_name?: string
+    items?: GoogleDatalayerItem[]
+  }
+
+  // Tutorial
+  tutorial_begin: object
+  tutorial_complete: object
+
+  // Gaming
+  earn_virtual_currency: { value?: string; virtual_currency_name?: string }
+  join_group: { group_id?: string }
+  level_end: { level_name?: string; success?: boolean }
+  level_start: { level_name?: string }
+  level_up: { level?: number; character?: string }
+  post_score: { score?: number; level?: number; character?: string }
+  spend_virtual_currency: {
+    value?: string
+    virtual_currency_name?: string
+    item_name?: string
+  }
+  unlock_achievement: { achievement_id: string }
+
+  // Leads
+  close_convert_lead: DataLayerCurrencyValue
+  close_unconvert_lead: DataLayerCurrencyValue & { unconvert_lead_reason?: string }
+  disqualify_lead: DataLayerCurrencyValue & { disqualified_lead_reason?: string }
+  generate_lead: DataLayerCurrencyValue & { lead_source?: string }
+  qualify_lead: DataLayerCurrencyValue
+  working_lead: DataLayerCurrencyValue & { lead_status?: string }
+
+  // Custom events
+  add_to_cart_error: {
+    userErrors?: string[]
+    errors?: string[]
+    variables?: object
+  }
+
+  // Core web vitals tracking.
+  [key: `cwv_${string}`]: {
+    value: Metric['delta']
+    debug_target?: string
+  } & {
+    [K in keyof Metric as K extends string ? `metric_${K}` : never]?: Metric[K]
+  }
+}

package/api/sendEvent.ts

@@ -1,12 +1,20 @@
-import { googleEventNames } from './googleEventNames'
+import { GoogleEventTypes } from './googleEventNames'
 
-export type EventMapFunctionType = (
-  eventName: (typeof googleEventNames)[number] | (string & Record<never, never>),
-  eventData: {
-    [key: string]: unknown
-  },
+export type SendEvent = (
+  eventName: Event | (string & Record<never, never>),
+  eventData: { [key: string]: unknown },
 ) => void
 
-export const sendEvent: EventMapFunctionType = (eventName, eventData) => {
+export function sendEvent<Event extends keyof GoogleEventTypes>(
+  eventName: Event,
+  eventData: GoogleEventTypes[Event],
+) {
   // This is a generic event handler and is plugins from google-analytics and google datalayer
 }
+
+export function useSendEvent() {
+  return <Event extends keyof GoogleEventTypes>(
+    eventName: Event,
+    eventData: GoogleEventTypes[Event],
+  ) => sendEvent<Event>(eventName, eventData)
+}

package/components/DatalayerViewItemList.tsx

@@ -1,12 +1,13 @@
-import { ProductItemsGridProps } from '@graphcommerce/magento-product'
+import { ProductItemsGridProps, useProductFiltersPro } from '@graphcommerce/magento-product'
 import { useMemoObject } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
-import React, { useContext, useEffect } from 'react'
-import { sendEvent } from '../api/sendEvent'
+import React, { useContext, useEffect, useRef } from 'react'
+import { useSendEvent } from '../api/sendEvent'
 import {
   productItemsToViewItemList,
   viewItemListToSelectItem,
 } from '../mapping/productItemsToViewItemList/productItemsToViewItemList'
+import { useDebounce } from '@graphcommerce/react-hook-form'
 
 const DatalayerSelectItemContext = React.createContext<((itemId: string) => void) | undefined>(
   undefined,
@@ -25,13 +26,61 @@ export function useViewItemList() {
 export function DatalayerViewItemList(
   props: ProductItemsGridProps & { children: React.ReactNode },
 ) {
-  const { title: item_list_name, items, children } = props
+  const { title: item_list_name, items, children, containerRef } = props
   const item_list_id = item_list_name.toLowerCase().replace(/\s/g, '_')
 
+  const params = useProductFiltersPro(true)?.params
+
+  const sendEvent = useSendEvent()
   const viewItemList = useMemoObject(
-    productItemsToViewItemList(item_list_id, item_list_name, items),
+    productItemsToViewItemList(item_list_id, item_list_name, items, params),
   )
-  useEffect(() => sendEvent('view_item_list', viewItemList), [viewItemList])
+
+  const sendUids = useRef<Map<string, boolean>>(new Map())
+
+  const send = useDebounce(() => {
+    const toSend = [...sendUids.current.entries()]
+      .filter(([, value]) => value !== true)
+      .map(([key]) => key)
+    if (toSend.length === 0) return
+
+    const viewItems = viewItemList.items.filter((item) => toSend.includes(item.item_uid))
+
+    sendEvent('view_item_list', { ...viewItemList, items: viewItems })
+
+    // Mark as send.
+    toSend.forEach((item_uid) => sendUids.current.set(item_uid, true))
+  }, 1000)
+
+  useEffect(() => {
+    sendUids.current.clear()
+    if (typeof containerRef === 'function' || !containerRef?.current) return () => {}
+
+    const childNodes = [...containerRef.current.childNodes].filter((n) => n instanceof HTMLElement)
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const { target } = entry
+          if (entry.isIntersecting && target instanceof HTMLElement) {
+            const index = childNodes.indexOf(target)
+            const item = viewItemList.items[index]
+            if (item && !sendUids.current.has(item.item_uid)) {
+              sendUids.current.set(item.item_uid, false)
+            }
+          }
+        }
+        send()
+      },
+      { threshold: 0.5 },
+    )
+
+    childNodes.forEach((node) => {
+      io.observe(node)
+    })
+
+    return () => io.disconnect()
+  }, [containerRef, send, viewItemList])
 
   const selectItem = useEventCallback((itemId: string) => {
     sendEvent('select_item', viewItemListToSelectItem(viewItemList, itemId))

package/mapping/cartItemToDatalayerItem/cartItemToDatalayerItem.ts

@@ -6,6 +6,7 @@ import { CartItem_DatalayerItemFragment } from './CartItem_DatalayerItem.gql'
 
 export function cartItemToDatalayerItem<P extends CartItem_DatalayerItemFragment>(
   item: P,
+  index: number,
 ): GoogleDatalayerItem {
   const discount = item.prices?.total_item_discount?.value
     ? item.prices.total_item_discount.value / item.quantity
@@ -14,14 +15,14 @@ export function cartItemToDatalayerItem<P extends CartItem_DatalayerItemFragment
   const price = (item?.prices?.price_including_tax?.value ?? 0) - discount
 
   return {
-    ...productToDatalayerItem(item.product),
+    ...productToDatalayerItem(item.product, index),
     currency: item.prices?.price.currency as string,
     discount,
     price,
     quantity: item.quantity,
     item_variant:
       item.__typename === 'ConfigurableCartItem'
-        ? item.configured_variant.sku ?? undefined
+        ? (item.configured_variant.sku ?? undefined)
         : undefined,
   }
 }

package/mapping/cartItemToRemoveFromCart/cartToRemoveFromCart.ts

@@ -5,9 +5,6 @@ import { CartItem_RemoveFromCartFragment } from './CartItem_RemoveFromCart.gql'
 export const cartItemToRemoveFromCart = <C extends CartItem_RemoveFromCartFragment>(
   cartItem: C,
 ) => {
-  const items = [cartItemToDatalayerItem(cartItem)]
-  return {
-    ...datalayerItemsToCurrencyValue(items),
-    items,
-  }
+  const items = [cartItemToDatalayerItem(cartItem, 0)]
+  return { ...datalayerItemsToCurrencyValue(items), items }
 }

package/mapping/cartToAddPaymentInfo/Cart_AddPaymentInfo.graphql

@@ -1,10 +1,10 @@
 fragment Cart_AddPaymentInfo on Cart
 @inject(into: ["PaymentMethodContext", "PaymentMethodUpdated"]) {
+  ...Cart_ViewCart
   applied_coupons {
     code
   }
   selected_payment_method {
     code
   }
-  ...Cart_DatalayerItems
 }

package/mapping/cartToAddPaymentInfo/cartToAddPaymentInfo.ts

@@ -1,10 +1,17 @@
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
 import { Cart_AddPaymentInfoFragment } from './Cart_AddPaymentInfo.gql'
 
-export function cartToAddPaymentInfo<C extends Cart_AddPaymentInfoFragment>(cart: C) {
+export type AddPaymentInfo = ViewCart & {
+  coupon?: string
+  payment_type?: string
+}
+
+export function cartToAddPaymentInfo<C extends Cart_AddPaymentInfoFragment>(
+  cart: C,
+): AddPaymentInfo {
   return {
+    ...cartToViewCart(cart),
     coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
     payment_type: cart?.selected_payment_method?.code,
-    ...cartToDatalayerItems(cart),
   }
 }

package/mapping/cartToAddShippingInfo/Cart_AddShippingInfo.graphql

@@ -8,5 +8,5 @@ fragment Cart_AddShippingInfo on Cart @inject(into: ["ShippingMethodSelected"])
       method_code
     }
   }
-  ...Cart_DatalayerItems
+  ...Cart_ViewCart
 }

package/mapping/cartToAddShippingInfo/cartToAddShippingInfo.ts

@@ -1,15 +1,23 @@
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
 import { Cart_AddShippingInfoFragment } from './Cart_AddShippingInfo.gql'
 
-export function cartToAddShippingInfo<C extends Cart_AddShippingInfoFragment>(cart: C) {
+export type AddShippingInfo = ViewCart & {
+  coupon?: string
+  shipping_tier?: string
+}
+
+export function cartToAddShippingInfo<C extends Cart_AddShippingInfoFragment>(
+  cart: C,
+): AddShippingInfo {
   return {
     coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
-    shipping_tier: cart?.shipping_addresses
+    shipping_tier: filterNonNullableKeys(cart?.shipping_addresses, ['selected_shipping_method'])
       .map(
-        (address) =>
-          `${address?.selected_shipping_method?.carrier_code}_${address?.selected_shipping_method?.method_code}`,
+        ({ selected_shipping_method: { carrier_code, method_code } }) =>
+          `${carrier_code}_${method_code}`,
       )
       .join(' '),
-    ...cartToDatalayerItems(cart),
+    ...cartToViewCart(cart),
   }
 }

package/mapping/cartToBeginCheckout/Cart_BeginCheckout.graphql

@@ -1,6 +1,6 @@
 fragment Cart_BeginCheckout on Cart @inject(into: ["CartStartCheckout"]) {
+  ...Cart_ViewCart
   applied_coupons {
     code
   }
-  ...Cart_DatalayerItems
 }

package/mapping/cartToBeginCheckout/cartToBeginCheckout.ts

@@ -1,9 +1,13 @@
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
 import { Cart_BeginCheckoutFragment } from './Cart_BeginCheckout.gql'
 
-export function cartToBeginCheckout<C extends Cart_BeginCheckoutFragment>(cart: C) {
+export type BeginCheckout = ViewCart & {
+  coupon?: string
+}
+
+export function cartToBeginCheckout<C extends Cart_BeginCheckoutFragment>(cart: C): BeginCheckout {
   return {
     coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
-    ...cartToDatalayerItems(cart),
+    ...cartToViewCart(cart),
   }
 }

package/mapping/cartToPurchase/Cart_PurchaseEvent.graphql

@@ -0,0 +1,18 @@
+fragment Cart_PurchaseEvent on Cart
+@inject(into: ["PaymentMethodContext", "PaymentMethodUpdated"]) {
+  ...Cart_AddPaymentInfo
+  shipping_addresses {
+    selected_shipping_method {
+      price_excl_tax {
+        ...Money
+      }
+    }
+  }
+  prices {
+    applied_taxes {
+      amount {
+        ...Money
+      }
+    }
+  }
+}

package/mapping/cartToPurchase/cartToPurchase.ts

@@ -0,0 +1,28 @@
+import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
+import { Cart_PurchaseEventFragment } from './Cart_PurchaseEvent.gql'
+
+export type PurchaseOrRefund = ViewCart & {
+  transaction_id: string
+  coupon?: string
+  shipping?: number
+  tax?: number
+}
+
+export function cartToPurchase<C extends Cart_PurchaseEventFragment>(
+  orderNumber: string,
+  cart: C | null | undefined,
+): PurchaseOrRefund {
+  // Although the fallback information is wrong, we find it to be more important to register a purchase even in the cart object is missing.
+  const base = cart ? cartToViewCart(cart) : { items: [], currency: '', value: 0 }
+
+  return {
+    transaction_id: orderNumber,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
+    shipping: cart?.shipping_addresses.reduce(
+      (sum, address) => sum + (address?.selected_shipping_method?.price_excl_tax.value ?? 0),
+      0,
+    ),
+    tax: cart?.prices?.applied_taxes?.reduce((sum, tax) => sum + (tax?.amount?.value ?? 0), 0),
+    ...base,
+  }
+}