@graphcommerce/google-datalayer 8.1.0-canary.5 → 8.1.0-canary.52

package/CHANGELOG.md

@@ -1,5 +1,104 @@
 # @graphcommerce/google-datalayer
 
+## 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
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
 ## 8.1.0-canary.5
 
 ## 8.0.6-canary.4

package/Config.graphqls

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

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.5",
+  "version": "8.1.0-canary.52",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,14 +12,14 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.5",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.5",
-    "@graphcommerce/magento-cart-payment-method": "^8.1.0-canary.5",
-    "@graphcommerce/magento-cart-shipping-method": "^8.1.0-canary.5",
-    "@graphcommerce/magento-product": "^8.1.0-canary.5",
-    "@graphcommerce/next-ui": "^8.1.0-canary.5",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.5",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.52",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.52",
+    "@graphcommerce/magento-cart-payment-method": "^8.1.0-canary.52",
+    "@graphcommerce/magento-cart-shipping-method": "^8.1.0-canary.52",
+    "@graphcommerce/magento-product": "^8.1.0-canary.52",
+    "@graphcommerce/next-ui": "^8.1.0-canary.52",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.52",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.52",
     "@mui/material": "^5.14.20",
     "next": "^14",
     "react": "^18.2.0",

package/plugins/GoogleDatalayerCartStartCheckoutLinkOrButton.tsx

@@ -15,7 +15,7 @@ export function GoogleDatalayerCartStartCheckoutLinkOrButton(
     <Prev
       {...rest}
       onStart={(e, cart) => {
-        sendEvent('begin_checkout', cartToBeginCheckout(cart))
+        if (cart) sendEvent('begin_checkout', cartToBeginCheckout(cart))
         return onStart?.(e, cart)
       }}
     />

package/plugins/GoogleDatalayerPaymentMethodContextProvider.tsx

@@ -1,8 +1,7 @@
 import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
 import type { PluginProps } from '@graphcommerce/next-config'
-import { purchase } from '../mapping/orderToPurchase'
-import { orderToPurchase } from '../mapping/orderToPurchase/orderToPurchase'
 import { sendEvent } from '../api/sendEvent'
+import { orderToPurchase } from '../mapping/orderToPurchase/orderToPurchase'
 
 export const component = 'PaymentMethodContextProvider'
 export const exported = '@graphcommerce/magento-cart-payment-method'

package/plugins/GoogleDatalayerProductListItem.tsx

@@ -1,15 +1,12 @@
-import { ProductListItem } from '@graphcommerce/magento-product'
+import { ProductListItemProps } from '@graphcommerce/magento-product'
 import type { PluginProps } from '@graphcommerce/next-config'
 import { useEventCallback } from '@mui/material'
-import { ComponentProps } from 'react'
 import { useViewItemList } from '../components/DatalayerViewItemList'
 
 export const component = 'ProductListItem'
 export const exported = '@graphcommerce/magento-product'
 
-function GoogleDatalayerProductListItem(
-  props: PluginProps<ComponentProps<typeof ProductListItem>>,
-) {
+function GoogleDatalayerProductListItem(props: PluginProps<ProductListItemProps>) {
   const { Prev, onClick, ...rest } = props
   const selectItem = useViewItemList()
 

package/plugins/GoogleDatalayerRemoveItemFromCart.tsx

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

package/plugins/GoogleDatalayerViewItem.tsx

@@ -1,7 +1,7 @@
-import type { ProductPageMeta } from '@graphcommerce/magento-product'
+import type { ProductPageMetaProps } from '@graphcommerce/magento-product'
 import type { PluginProps } from '@graphcommerce/next-config'
 import { useMemoObject } from '@graphcommerce/next-ui'
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { sendEvent } from '../api/sendEvent'
 import { productToViewItem } from '../mapping/productToViewItem/productToViewItem'
 
@@ -9,7 +9,7 @@ export const component = 'ProductPageMeta'
 export const exported = '@graphcommerce/magento-product'
 
 /** When a product is added to the Cart, send a Google Analytics event */
-function GoogleDatalayerViewItem(props: PluginProps<React.ComponentProps<typeof ProductPageMeta>>) {
+function GoogleDatalayerViewItem(props: PluginProps<ProductPageMetaProps>) {
   const { Prev, product } = props
 
   const viewItem = useMemoObject(productToViewItem(product))

package/plugins/GoogleDatalayerWebVitals.tsx

@@ -1,19 +1,22 @@
 import type { PagesProps } from '@graphcommerce/framer-next-pages'
-import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
+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'
 
-export const component = 'FramerNextPages'
-export const exported = '@graphcommerce/framer-next-pages'
-export const ifConfig: IfConfig = 'dataLayer.coreWebVitals'
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/framer-next-pages',
+  ifConfig: 'dataLayer.coreWebVitals',
+}
 
-/** When a product is added to the Cart, send a Google Analytics event.
+/**
+ * When a product is added to the Cart, send a Google Analytics event.
  *
  * Based on this information: https://github.com/GoogleChrome/web-vitals?tab=readme-ov-file#send-the-results-to-google-analytics
  */
-function GoogleDatalayerCoreWebVitals(props: PluginProps<PagesProps>) {
+export function FramerNextPages(props: PluginProps<PagesProps>) {
   const { Prev, ...rest } = props
 
   const sendCoreWebVitals = useEventCallback((m: Metric, debug_target?: string | undefined) => {
@@ -36,5 +39,3 @@ function GoogleDatalayerCoreWebVitals(props: PluginProps<PagesProps>) {
 
   return <Prev {...rest} />
 }
-
-export const Plugin = GoogleDatalayerCoreWebVitals

package/plugins/GoogleDatalayerRemoveItemFromCartFab.tsx

@@ -1,30 +0,0 @@
-import type { RemoveItemFromCartFab as Original } from '@graphcommerce/magento-cart-items'
-import type { ReactPlugin } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
-import { cartItemToRemoveFromCart } from '../mapping/cartItemToRemoveFromCart/cartToRemoveFromCart'
-
-export const component = 'RemoveItemFromCartFab'
-export const exported =
-  '@graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCartFab'
-
-export const GoogleDatalayerRemoveItemFromCartFab: ReactPlugin<typeof Original> = (props) => {
-  const { Prev, fabProps } = props
-
-  return (
-    <Prev
-      {...props}
-      fabProps={{
-        ...fabProps,
-        onClick: (e) => {
-          sendEvent(
-            'remove_from_cart',
-            cartItemToRemoveFromCart({ __typename: 'SimpleCartItem', ...props }),
-          )
-          fabProps?.onClick?.(e)
-        },
-      }}
-    />
-  )
-}
-
-export const Plugin = GoogleDatalayerRemoveItemFromCartFab