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

package/mapping/cartToViewCart/Cart_ViewCart.graphql

@@ -1,4 +1,11 @@
 fragment Cart_ViewCart on Cart @inject(into: ["CartItemCountChanged"]) {
   __typename
-  ...Cart_DatalayerItems
+  items {
+    ...CartItem_DatalayerItem
+  }
+  prices {
+    subtotal_including_tax {
+      currency
+    }
+  }
 }

package/mapping/cartToViewCart/cartToViewCart.ts

@@ -1,6 +1,15 @@
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { nonNullable } from '@graphcommerce/next-ui'
+import { cartItemToDatalayerItem } from '../cartItemToDatalayerItem/cartItemToDatalayerItem'
+import {
+  DataLayerCurrencyValue,
+  datalayerItemsToCurrencyValue,
+} from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
 import { Cart_ViewCartFragment } from './Cart_ViewCart.gql'
 
-export function cartToViewCart<C extends Cart_ViewCartFragment>(cart: C) {
-  return cartToDatalayerItems(cart)
+export type ViewCart = DataLayerCurrencyValue & { items: GoogleDatalayerItem[] }
+
+export function cartToViewCart<C extends Cart_ViewCartFragment>(cart: C): ViewCart {
+  const items = cart?.items?.filter(nonNullable).map(cartItemToDatalayerItem) ?? []
+  return { ...datalayerItemsToCurrencyValue(items), items }
 }

package/mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue.ts

@@ -1,8 +1,15 @@
 import { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
 
-export function datalayerItemsToCurrencyValue(items: GoogleDatalayerItem[]) {
+export type DataLayerCurrencyValue = {
+  currency: string
+  value: number
+}
+
+export function datalayerItemsToCurrencyValue(
+  items: GoogleDatalayerItem[],
+): DataLayerCurrencyValue {
   return {
-    currency: items[0].currency,
+    currency: items[0]?.currency ?? '',
     value: items.reduce((acc, item) => acc + (item.price ?? 0) * item.quantity, 0),
   }
 }

package/mapping/productItemsToViewItemList/productItemsToViewItemList.ts

@@ -1,22 +1,44 @@
-import { ProductListItemFragment } from '@graphcommerce/magento-product'
+import { ProductFilterParams, ProductListItemFragment } from '@graphcommerce/magento-product'
 import { nonNullable } from '@graphcommerce/next-ui'
-import { productToDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import {
+  GoogleDatalayerItem,
+  productToDatalayerItem,
+} from '../productToDatalayerItem/productToDatalayerItem'
+
+export type ViewItemList = {
+  item_list_id: string
+  item_list_name: string
+  items: GoogleDatalayerItem[]
+  filter_params?: ProductFilterParams | null
+}
+
+export type SelectItem = {
+  item_list_id: string
+  item_list_name: string
+  items: GoogleDatalayerItem[]
+  filter_params?: ProductFilterParams | null
+}
 
 export function productItemsToViewItemList<P extends ProductListItemFragment>(
   item_list_id: string,
   item_list_name: string,
   items: Array<P | null | undefined> | null | undefined,
-) {
+  filter_params: ProductFilterParams | null | undefined,
+): ViewItemList {
   return {
     item_list_id,
     item_list_name,
-    items: items?.filter(nonNullable)?.map((item) => productToDatalayerItem(item)) ?? [],
+    items: (items ?? [])?.filter(nonNullable)?.map(productToDatalayerItem),
+    filter_params,
   }
 }
 
 export function viewItemListToSelectItem(
   viewItemList: ReturnType<typeof productItemsToViewItemList>,
   itemId: string,
-) {
-  return { ...viewItemList, items: viewItemList.items.filter((i) => i.item_id === itemId) }
+): SelectItem {
+  return {
+    ...viewItemList,
+    items: viewItemList.items.filter((i) => i.item_id === itemId),
+  }
 }

package/mapping/productToDatalayerItem/Product_DatalayerItem.graphql

@@ -4,12 +4,7 @@ fragment Product_DatalayerItem on ProductInterface {
   sku
   price_range {
     minimum_price {
-      final_price {
-        ...Money
-      }
-      discount {
-        amount_off
-      }
+      ...ProductListPrice
     }
   }
   ...ProductPageBreadcrumb

package/mapping/productToDatalayerItem/productToDatalayerItem.ts

@@ -2,14 +2,18 @@ import { productPageCategory } from '@graphcommerce/magento-product'
 import { nonNullable } from '@graphcommerce/next-ui'
 import { Product_DatalayerItemFragment } from './Product_DatalayerItem.gql'
 
+/**
+ * https://developers.google.com/tag-platform/gtagjs/reference/events#add_to_cart_item
+ */
 export type GoogleDatalayerItem = {
   item_id: string
+  item_uid: string
   item_name: string
   affiliation?: string
   coupon?: string
   currency?: string
   discount?: number
-  index?: number
+  index: number
   item_brand?: string
   item_category?: string
   item_category2?: string
@@ -20,27 +24,30 @@ export type GoogleDatalayerItem = {
   item_list_name?: string
   item_variant?: string
   location_id?: string
-  price?: number
+  price: number
   quantity: number
 }
 
 export function productToDatalayerItem<P extends Product_DatalayerItemFragment>(
   item: P,
+  index: number,
 ): GoogleDatalayerItem {
   const category = productPageCategory(item)
   const item_categories = Object.fromEntries(
     [...(category?.breadcrumbs?.map((b) => b?.category_name) ?? []), category?.name]
       .filter(nonNullable)
-      .map((name, index) => [`item_category${index > 0 ? index + 1 : ''}`, name]),
+      .map((name, idx) => [`item_category${idx > 0 ? idx + 1 : ''}`, name]),
   )
 
   return {
     item_id: item.sku ?? '',
+    item_uid: item.uid,
     item_name: item.name ?? '',
-    price: item.price_range?.minimum_price.final_price.value ?? undefined,
+    price: item.price_range?.minimum_price.final_price.value ?? 0,
     currency: item.price_range?.minimum_price.final_price.currency ?? undefined,
     discount: item.price_range?.minimum_price.discount?.amount_off ?? undefined,
     quantity: 1,
+    index,
     ...item_categories,
   }
 }

package/mapping/productToViewItem/productToViewItem.ts

@@ -1,11 +1,16 @@
-import { datalayerItemsToCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
-import { productToDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import {
+  DataLayerCurrencyValue,
+  datalayerItemsToCurrencyValue,
+} from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import {
+  GoogleDatalayerItem,
+  productToDatalayerItem,
+} from '../productToDatalayerItem/productToDatalayerItem'
 import { Product_ViewItemFragment } from './Product_ViewItem.gql'
 
-export function productToViewItem<C extends Product_ViewItemFragment>(product: C) {
-  const items = [productToDatalayerItem(product)]
-  return {
-    ...datalayerItemsToCurrencyValue(items),
-    items,
-  }
+export type ViewItem = { items: GoogleDatalayerItem[] } & DataLayerCurrencyValue
+
+export function productToViewItem<C extends Product_ViewItemFragment>(product: C): ViewItem {
+  const items = [productToDatalayerItem(product, 0)]
+  return { ...datalayerItemsToCurrencyValue(items), items }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/google-datalayer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.9",
+  "version": "9.0.0-canary.101",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,14 +12,14 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.9",
-    "@graphcommerce/magento-cart-payment-method": "^8.1.0-canary.9",
-    "@graphcommerce/magento-cart-shipping-method": "^8.1.0-canary.9",
-    "@graphcommerce/magento-product": "^8.1.0-canary.9",
-    "@graphcommerce/next-ui": "^8.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.9",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.101",
+    "@graphcommerce/magento-cart-payment-method": "^9.0.0-canary.101",
+    "@graphcommerce/magento-cart-shipping-method": "^9.0.0-canary.101",
+    "@graphcommerce/magento-product": "^9.0.0-canary.101",
+    "@graphcommerce/next-ui": "^9.0.0-canary.101",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
     "@mui/material": "^5.14.20",
     "next": "^14",
     "react": "^18.2.0",
@@ -37,9 +37,12 @@
     },
     "@graphcommerce/magento-product": {
       "optional": true
+    },
+    "@graphcommerce/magento-product-configurable": {
+      "optional": true
     }
   },
   "dependencies": {
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^4.2.3"
   }
 }

package/plugins/GoogleDatalayerAddProductsToCartForm.tsx

@@ -3,19 +3,22 @@ import {
   findAddedItems,
   toUserErrors,
 } from '@graphcommerce/magento-product'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { nonNullable } from '@graphcommerce/next-ui'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { cartItemToDatalayerItem } from '../mapping/cartItemToDatalayerItem/cartItemToDatalayerItem'
 import { datalayerItemsToCurrencyValue } from '../mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
 
-export const component = 'AddProductsToCartForm'
-export const exported = '@graphcommerce/magento-product'
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-product',
+  type: 'component',
+}
 
 /** When a product is added to the Cart, send a Google Analytics event */
-function GoogleDatalayerAddProductsToCartForm(props: PluginProps<AddProductsToCartFormProps>) {
+export function AddProductsToCartForm(props: PluginProps<AddProductsToCartFormProps>) {
   const { Prev, onComplete, ...rest } = props
 
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
@@ -24,9 +27,12 @@ function GoogleDatalayerAddProductsToCartForm(props: PluginProps<AddProductsToCa
         const addedItems = findAddedItems(data, variables)
 
         const items = addedItems
-          .map(({ itemVariable, itemInCart }) => {
+          .map(({ itemVariable, itemInCart }, index) => {
             if (!itemInCart) return null
-            return { ...cartItemToDatalayerItem(itemInCart), quantity: itemVariable.quantity }
+            return {
+              ...cartItemToDatalayerItem(itemInCart, index),
+              quantity: itemVariable.quantity,
+            }
           })
           .filter(nonNullable)
 
@@ -48,5 +54,3 @@ function GoogleDatalayerAddProductsToCartForm(props: PluginProps<AddProductsToCa
     />
   )
 }
-
-export const Plugin = GoogleDatalayerAddProductsToCartForm

package/plugins/GoogleDatalayerCartStartCheckout.tsx

@@ -1,25 +1,28 @@
 import { CartStartCheckoutProps } from '@graphcommerce/magento-cart'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useMemoObject } from '@graphcommerce/next-ui'
 import { useEffect, useRef } from 'react'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { cartToBeginCheckout } from '../mapping/cartToBeginCheckout/cartToBeginCheckout'
 import { cartToViewCart } from '../mapping/cartToViewCart/cartToViewCart'
 
-export const component = 'CartStartCheckout'
-export const exported = '@graphcommerce/magento-cart'
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-cart',
+  type: 'component',
+}
 
-export function GoogleDatalayerCartStartCheckout(props: PluginProps<CartStartCheckoutProps>) {
+export function CartStartCheckout(props: PluginProps<CartStartCheckoutProps>) {
   const { Prev, onStart, ...rest } = props
 
   const send = useRef(false)
+  const sendEvent = useSendEvent()
   const viewCart = useMemoObject(cartToViewCart({ __typename: 'Cart', ...props }))
   useEffect(() => {
     if (!send.current) {
       sendEvent('view_cart', viewCart)
       send.current = true
     }
-  }, [viewCart])
+  }, [sendEvent, viewCart])
 
   return (
     <Prev
@@ -31,5 +34,3 @@ export function GoogleDatalayerCartStartCheckout(props: PluginProps<CartStartChe
     />
   )
 }
-
-export const Plugin = GoogleDatalayerCartStartCheckout

package/plugins/GoogleDatalayerCartStartCheckoutLinkOrButton.tsx

@@ -1,16 +1,19 @@
 import { CartStartCheckoutLinkOrButtonProps } from '@graphcommerce/magento-cart'
-import type { PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { useSendEvent } from '../api/sendEvent'
 import { cartToBeginCheckout } from '../mapping/cartToBeginCheckout/cartToBeginCheckout'
 
-export const component = 'CartStartCheckoutLinkOrButton'
-export const exported = '@graphcommerce/magento-cart'
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-cart',
+  type: 'component',
+}
 
-export function GoogleDatalayerCartStartCheckoutLinkOrButton(
+export function CartStartCheckoutLinkOrButton(
   props: PluginProps<CartStartCheckoutLinkOrButtonProps>,
 ) {
   const { Prev, onStart, ...rest } = props
 
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
@@ -21,5 +24,3 @@ export function GoogleDatalayerCartStartCheckoutLinkOrButton(
     />
   )
 }
-
-export const Plugin = GoogleDatalayerCartStartCheckoutLinkOrButton

package/plugins/GoogleDatalayerPaymentMethodButton.tsx

@@ -1,17 +1,20 @@
 import { useCartQuery } from '@graphcommerce/magento-cart'
 import { PaymentMethodButtonProps } from '@graphcommerce/magento-cart-payment-method'
 import { GetPaymentMethodContextDocument } from '@graphcommerce/magento-cart-payment-method/PaymentMethodContext/GetPaymentMethodContext.gql'
-import type { PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { useSendEvent } from '../api/sendEvent'
 import { cartToAddPaymentInfo } from '../mapping/cartToAddPaymentInfo/cartToAddPaymentInfo'
 
-export const component = 'PaymentMethodButton'
-export const exported = '@graphcommerce/magento-cart-payment-method'
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-cart-payment-method',
+  type: 'component',
+}
 
-function GoogleDatalayerPaymentMethodButton(props: PluginProps<PaymentMethodButtonProps>) {
+export function PaymentMethodButton(props: PluginProps<PaymentMethodButtonProps>) {
   const { Prev, onSubmitSuccessful, ...rest } = props
   const methodContext = useCartQuery(GetPaymentMethodContextDocument)
 
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
@@ -24,5 +27,3 @@ function GoogleDatalayerPaymentMethodButton(props: PluginProps<PaymentMethodButt
     />
   )
 }
-
-export const Plugin = GoogleDatalayerPaymentMethodButton

package/plugins/GoogleDatalayerPaymentMethodContextProvider.tsx

@@ -1,23 +1,26 @@
 import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
-import type { PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
-import { orderToPurchase } from '../mapping/orderToPurchase/orderToPurchase'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { useSendEvent } from '../api/sendEvent'
+import { cartToPurchase } from '../mapping/cartToPurchase/cartToPurchase'
 
-export const component = 'PaymentMethodContextProvider'
-export const exported = '@graphcommerce/magento-cart-payment-method'
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-cart-payment-method',
+  type: 'component',
+}
 
-function GoogleDatalayerPaymentMethodContextProvider(
+export function PaymentMethodContextProvider(
   props: PluginProps<PaymentMethodContextProviderProps>,
 ) {
   const { Prev, onSuccess, ...rest } = props
+
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
       onSuccess={(orderNumber, cart) => {
-        sendEvent('purchase', orderToPurchase(orderNumber, cart))
+        sendEvent('purchase', cartToPurchase(orderNumber, cart))
         return onSuccess?.(orderNumber, cart)
       }}
     />
   )
 }
-export const Plugin = GoogleDatalayerPaymentMethodContextProvider

package/plugins/GoogleDatalayerProductListItem.tsx

@@ -1,12 +1,14 @@
 import { ProductListItemProps } from '@graphcommerce/magento-product'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useEventCallback } from '@mui/material'
 import { useViewItemList } from '../components/DatalayerViewItemList'
 
-export const component = 'ProductListItem'
-export const exported = '@graphcommerce/magento-product'
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-product',
+  type: 'component',
+}
 
-function GoogleDatalayerProductListItem(props: PluginProps<ProductListItemProps>) {
+export function ProductListItem(props: PluginProps<ProductListItemProps>) {
   const { Prev, onClick, ...rest } = props
   const selectItem = useViewItemList()
 
@@ -20,5 +22,3 @@ function GoogleDatalayerProductListItem(props: PluginProps<ProductListItemProps>
     />
   )
 }
-
-export const Plugin = GoogleDatalayerProductListItem

package/plugins/GoogleDatalayerProductListItemsBase.tsx

@@ -1,17 +1,23 @@
 import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { useForkRef } from '@mui/material'
+import { useRef } from 'react'
 import { DatalayerViewItemList } from '../components/DatalayerViewItemList'
 
-export const component = 'ProductListItemsBase'
-export const exported = '@graphcommerce/magento-product'
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-product',
+  type: 'component',
+}
+
+export function ProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
+  const { Prev, containerRef, ...rest } = props
+
+  const internalRef = useRef<HTMLDivElement>(null)
+  const ref = useForkRef(containerRef, internalRef)
 
-export function GoogleDatalayerProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
-  const { Prev, ...rest } = props
   return (
-    <DatalayerViewItemList {...rest}>
-      <Prev {...rest} />
+    <DatalayerViewItemList {...rest} containerRef={internalRef}>
+      <Prev {...rest} containerRef={ref} />
     </DatalayerViewItemList>
   )
 }
-
-export const Plugin = GoogleDatalayerProductListItemsBase

package/plugins/GoogleDatalayerRemoveItemFromCart.tsx

@@ -1,29 +1,28 @@
-import type { RemoveItemFromCartProps } from '@graphcommerce/magento-cart-items'
-import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import type { useRemoveItemFromCart as useRemoveItemFromCartBase } from '@graphcommerce/magento-cart-items'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+import { useSendEvent } from '../api/sendEvent'
 import { cartItemToRemoveFromCart } from '../mapping/cartItemToRemoveFromCart/cartToRemoveFromCart'
 
 export const config: PluginConfig = {
-  type: 'component',
+  type: 'function',
   module: '@graphcommerce/magento-cart-items',
 }
 
-export function RemoveItemFromCart(props: PluginProps<RemoveItemFromCartProps>) {
-  const { Prev, buttonProps } = props
-
-  return (
-    <Prev
-      {...props}
-      buttonProps={{
-        ...buttonProps,
-        onClick: (e) => {
-          sendEvent(
-            'remove_from_cart',
-            cartItemToRemoveFromCart({ __typename: 'SimpleCartItem', ...props }),
-          )
-          buttonProps?.onClick?.(e)
-        },
-      }}
-    />
-  )
+export const useRemoveItemFromCart: FunctionPlugin<typeof useRemoveItemFromCartBase> = (
+  usePrev,
+  props,
+) => {
+  const sendEvent = useSendEvent()
+  return usePrev({
+    ...props,
+    onComplete: (result, variables) => {
+      if (!result.errors) {
+        sendEvent(
+          'remove_from_cart',
+          cartItemToRemoveFromCart({ ...props, __typename: 'SimpleCartItem' }),
+        )
+      }
+      return props.onComplete?.(result, variables)
+    },
+  })
 }

package/plugins/GoogleDatalayerShippingMethodForm.tsx

@@ -1,13 +1,17 @@
 import { ShippingMethodFormProps } from '@graphcommerce/magento-cart-shipping-method'
-import type { PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { useSendEvent } from '../api/sendEvent'
 import { cartToAddShippingInfo } from '../mapping/cartToAddShippingInfo/cartToAddShippingInfo'
 
-export const component = 'ShippingMethodForm'
-export const exported = '@graphcommerce/magento-cart-shipping-method'
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-cart-shipping-method',
+  type: 'component',
+}
 
-export function GoogleDatalayerShippingMethodForm(props: PluginProps<ShippingMethodFormProps>) {
+export function ShippingMethodForm(props: PluginProps<ShippingMethodFormProps>) {
   const { Prev, onComplete, ...rest } = props
+
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
@@ -15,7 +19,7 @@ export function GoogleDatalayerShippingMethodForm(props: PluginProps<ShippingMet
         if (result.data?.setShippingMethodsOnCart?.cart) {
           sendEvent(
             'add_shipping_info',
-            cartToAddShippingInfo(result.data?.setShippingMethodsOnCart?.cart),
+            cartToAddShippingInfo(result.data.setShippingMethodsOnCart.cart),
           )
         }
 
@@ -24,5 +28,3 @@ export function GoogleDatalayerShippingMethodForm(props: PluginProps<ShippingMet
     />
   )
 }
-
-export const Plugin = GoogleDatalayerShippingMethodForm

package/plugins/{GoogleDatalayerUpdateItemQuantity.tsx → GoogleDatalayerUseRemoveItemFromCart.tsx}

@@ -1,20 +1,22 @@
 import type { UpdateItemQuantityProps } from '@graphcommerce/magento-cart-items'
-import type { PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { useSendEvent } from '../api/sendEvent'
 import { cartItemToDatalayerItem } from '../mapping/cartItemToDatalayerItem/cartItemToDatalayerItem'
 import { datalayerItemsToCurrencyValue } from '../mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
 
-export const component = 'UpdateItemQuantity'
-export const exported =
-  '@graphcommerce/magento-cart-items/components/UpdateItemQuantity/UpdateItemQuantity'
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-cart-items',
+  type: 'component',
+}
 
 /**
  * When a product is added to the Cart, by using the + button on cart page, send a Google Analytics
  * event
  */
-function GoogleDatalayerUpdateItemQuantity(props: PluginProps<UpdateItemQuantityProps>) {
+export function UpdateItemQuantity(props: PluginProps<UpdateItemQuantityProps>) {
   const { Prev, formOptions, quantity, ...rest } = props
 
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
@@ -32,7 +34,7 @@ function GoogleDatalayerUpdateItemQuantity(props: PluginProps<UpdateItemQuantity
 
           if (!itemInCart?.quantity || diffQuantity === 0) return original
 
-          const items = [{ ...cartItemToDatalayerItem(itemInCart), quantity: absQuantity }]
+          const items = [{ ...cartItemToDatalayerItem(itemInCart, 0), quantity: absQuantity }]
           sendEvent(diffQuantity < 0 ? 'remove_from_cart' : 'add_to_cart', {
             ...datalayerItemsToCurrencyValue(items),
             items,
@@ -44,5 +46,3 @@ function GoogleDatalayerUpdateItemQuantity(props: PluginProps<UpdateItemQuantity
     />
   )
 }
-
-export const Plugin = GoogleDatalayerUpdateItemQuantity