@graphcommerce/google-datalayer 8.1.0-canary.8 → 9.0.0-canary.100

package/plugins/GoogleDatalayerViewItem.tsx

@@ -1,21 +1,22 @@
 import type { ProductPageMetaProps } from '@graphcommerce/magento-product'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useMemoObject } from '@graphcommerce/next-ui'
 import { useEffect } from 'react'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { productToViewItem } from '../mapping/productToViewItem/productToViewItem'
 
-export const component = 'ProductPageMeta'
-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 GoogleDatalayerViewItem(props: PluginProps<ProductPageMetaProps>) {
+/** When a product detail page is viewed, send a Google Analytics event */
+export function ProductPageMeta(props: PluginProps<ProductPageMetaProps>) {
   const { Prev, product } = props
 
+  const sendEvent = useSendEvent()
   const viewItem = useMemoObject(productToViewItem(product))
-  useEffect(() => sendEvent('view_item', viewItem), [viewItem])
+  useEffect(() => sendEvent('view_item', viewItem), [sendEvent, viewItem])
 
   return <Prev {...props} />
 }
-
-export const Plugin = GoogleDatalayerViewItem

package/plugins/GoogleDatalayerWebVitals.tsx

@@ -3,7 +3,7 @@ import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useEventCallback } from '@mui/material'
 import { useEffect } from 'react'
 import { onCLS, onFCP, onFID, onINP, onLCP, onTTFB, Metric } from 'web-vitals/attribution'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 
 export const config: PluginConfig = {
   type: 'component',
@@ -19,6 +19,7 @@ export const config: PluginConfig = {
 export function FramerNextPages(props: PluginProps<PagesProps>) {
   const { Prev, ...rest } = props
 
+  const sendEvent = useSendEvent()
   const sendCoreWebVitals = useEventCallback((m: Metric, debug_target?: string | undefined) => {
     sendEvent(`cwv_${m.name.toLowerCase()}`, {
       value: m.delta,

package/mapping/cartToDatalayerItems/Cart_DatalayerItems.graphql

@@ -1,11 +0,0 @@
-fragment Cart_DatalayerItems on Cart {
-  __typename
-  items {
-    ...CartItem_DatalayerItem
-  }
-  prices {
-    subtotal_including_tax {
-      currency
-    }
-  }
-}

package/mapping/cartToDatalayerItems/cartToDatalayerItems.ts

@@ -1,10 +0,0 @@
-import { nonNullable } from '@graphcommerce/next-ui'
-import { cartItemToDatalayerItem } from '../cartItemToDatalayerItem/cartItemToDatalayerItem'
-import { datalayerItemsToCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
-import { Cart_DatalayerItemsFragment } from './Cart_DatalayerItems.gql'
-
-export function cartToDatalayerItems<C extends Cart_DatalayerItemsFragment>(cart: C) {
-  const items = cart.items?.filter(nonNullable).map(cartItemToDatalayerItem)
-  if (!items) return {}
-  return { ...datalayerItemsToCurrencyValue(items), items }
-}

package/mapping/orderToPurchase/orderToPurchase.ts

@@ -1,17 +0,0 @@
-import { PaymentMethodContextFragment } from '@graphcommerce/magento-cart-payment-method/Api/PaymentMethodContext.gql'
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
-
-export function orderToPurchase<C extends PaymentMethodContextFragment>(
-  orderNumber: string,
-  cart: C | null | undefined,
-) {
-  if (!cart) return { transaction_id: orderNumber }
-
-  return {
-    transaction_id: orderNumber,
-    coupon: cart.applied_coupons?.map((coupon) => coupon?.code).join(' '),
-    payment_type: cart.selected_payment_method?.code,
-    tax: cart.prices?.applied_taxes?.reduce((sum, tax) => sum + (tax?.amount?.value ?? 0), 0),
-    ...cartToDatalayerItems(cart),
-  }
-}

package/plugins/GoogleDatalayerRemoveItemFromCartFab.tsx

@@ -1,29 +0,0 @@
-import type { RemoveItemFromCartFabProps } from '@graphcommerce/magento-cart-items'
-import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
-import { cartItemToRemoveFromCart } from '../mapping/cartItemToRemoveFromCart/cartToRemoveFromCart'
-
-export const config: PluginConfig = {
-  type: 'component',
-  module: '@graphcommerce/magento-cart-items',
-}
-
-export function RemoveItemFromCartFab(props: PluginProps<RemoveItemFromCartFabProps>) {
-  const { Prev, fabProps } = props
-
-  return (
-    <Prev
-      {...props}
-      fabProps={{
-        ...fabProps,
-        onClick: (e) => {
-          sendEvent(
-            'remove_from_cart',
-            cartItemToRemoveFromCart({ __typename: 'SimpleCartItem', ...props }),
-          )
-          fabProps?.onClick?.(e)
-        },
-      }}
-    />
-  )
-}