@graphcommerce/google-datalayer 9.0.0-canary.99 → 9.0.0

package/CHANGELOG.md

@@ -1,60 +1,64 @@
 # @graphcommerce/google-datalayer
 
-## 9.0.0-canary.99
+## 9.0.0
 
-## 9.0.0-canary.98
+### Minor Changes
 
-## 9.0.0-canary.97
+- [#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.96
+### Patch Changes
 
-## 9.0.0-canary.95
+- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`e3fe4f7`](https://github.com/graphcommerce-org/graphcommerce/commit/e3fe4f73c8c3e3c6a5ec68cdc7a32820e8f69e07) - Solved 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.94
+- [#2421](https://github.com/graphcommerce-org/graphcommerce/pull/2421) [`d500643`](https://github.com/graphcommerce-org/graphcommerce/commit/d500643138799b6db1610cb10a1d065d6219d8ea) - Resolve peer dependency issues so we get a clean install ([@paales](https://github.com/paales))
 
-## 9.0.0-canary.93
+- [#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.92
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Prevent the `<BillingPage />` query from rerunning on each mutation. ([@FrankHarland](https://github.com/FrankHarland))
 
-## 9.0.0-canary.91
+- [#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))
 
-## 9.0.0-canary.90
+## 9.0.0-canary.118
 
-## 9.0.0-canary.89
+## 9.0.0-canary.117
 
-## 9.0.0-canary.88
+## 9.0.0-canary.116
 
-## 9.0.0-canary.87
+## 9.0.0-canary.115
 
-## 9.0.0-canary.86
+## 9.0.0-canary.114
 
-## 9.0.0-canary.85
+## 9.0.0-canary.113
 
-## 9.0.0-canary.84
+## 9.0.0-canary.112
 
-## 9.0.0-canary.83
+## 9.0.0-canary.111
 
-## 9.0.0-canary.82
+## 9.0.0-canary.110
 
-## 9.0.0-canary.81
+## 9.0.0-canary.109
 
-## 9.0.0-canary.80
+## 9.0.0-canary.108
 
-### Patch Changes
+## 9.0.0-canary.107
 
-- [#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.106
+
+## 9.0.0-canary.105
 
-## 9.0.0-canary.79
+## 9.0.0-canary.104
 
-## 9.0.0-canary.78
+## 9.0.0-canary.103
 
-## 9.0.0-canary.77
+### Patch Changes
 
-## 9.0.0-canary.76
+- [#2421](https://github.com/graphcommerce-org/graphcommerce/pull/2421) [`d500643`](https://github.com/graphcommerce-org/graphcommerce/commit/d500643138799b6db1610cb10a1d065d6219d8ea) - Resolve peer dependency issues so we get a clean install ([@paales](https://github.com/paales))
 
-## 9.0.0-canary.75
+## 9.0.0-canary.80
 
-## 9.0.0-canary.74
+### 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.73
 
@@ -62,164 +66,24 @@
 
 - [#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
-
-## 8.1.0-canary.7
-
-## 8.1.0-canary.6
-
-## 8.1.0-canary.5
-
-## 8.0.6-canary.4
-
-## 8.0.6-canary.3
-
 ## 8.0.6-canary.2
 
 ### 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))
 
-## 8.0.6-canary.1
-
-## 8.0.6-canary.0
-
 ## 8.0.5
 
 ### Patch Changes
@@ -231,45 +95,8 @@
 
 - [#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
-
-## 8.0.5-canary.9
-
-## 8.0.5-canary.8
-
-## 8.0.5-canary.7
-
-## 8.0.5-canary.6
-
-## 8.0.5-canary.5
-
-## 8.0.5-canary.4
-
-## 8.0.5-canary.3
-
-## 8.0.5-canary.2
-
-## 8.0.5-canary.1
-
-### Patch Changes
-
-- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`f120bce`](https://github.com/graphcommerce-org/graphcommerce/commit/f120bce617808d756aebb7c500aa1deb9e4cf487) - Google Datalayer, Analytics and Tagmanager improvements.
-
-  - 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))
-
-## 8.0.5-canary.0
-
 ## 8.0.4
 
 ### 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))
-
-## 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))

package/api/googleEventNames.ts

@@ -1,4 +1,4 @@
-import { Metric } from 'web-vitals'
+import type { 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'

package/api/sendEvent.ts

@@ -1,4 +1,4 @@
-import { GoogleEventTypes } from './googleEventNames'
+import type { GoogleEventTypes } from './googleEventNames'
 
 export type SendEvent = (
   eventName: Event | (string & Record<never, never>),
@@ -6,7 +6,9 @@ export type SendEvent = (
 ) => void
 
 export function sendEvent<Event extends keyof GoogleEventTypes>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   eventName: Event,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   eventData: GoogleEventTypes[Event],
 ) {
   // This is a generic event handler and is plugins from google-analytics and google datalayer

package/components/DatalayerViewItemList.tsx

@@ -1,5 +1,7 @@
-import { ProductItemsGridProps, useProductFiltersPro } from '@graphcommerce/magento-product'
+import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
+import { useProductFiltersPro } from '@graphcommerce/magento-product'
 import { useMemoObject } from '@graphcommerce/next-ui'
+import { useDebounce } from '@graphcommerce/react-hook-form'
 import { useEventCallback } from '@mui/material'
 import React, { useContext, useEffect, useRef } from 'react'
 import { useSendEvent } from '../api/sendEvent'
@@ -7,7 +9,6 @@ import {
   productItemsToViewItemList,
   viewItemListToSelectItem,
 } from '../mapping/productItemsToViewItemList/productItemsToViewItemList'
-import { useDebounce } from '@graphcommerce/react-hook-form'
 
 const DatalayerSelectItemContext = React.createContext<((itemId: string) => void) | undefined>(
   undefined,
@@ -17,7 +18,7 @@ export function useViewItemList() {
   const context = useContext(DatalayerSelectItemContext)
   if (!context) {
     return (itemId: string) => {
-      console.log(`No DatalayerSelectItemContext provider found, trying to select item ${itemId}`)
+      console.warn(`No DatalayerSelectItemContext provider found, trying to select item ${itemId}`)
     }
   }
   return context

package/mapping/cartItemToDatalayerItem/cartItemToDatalayerItem.ts

@@ -1,8 +1,6 @@
-import {
-  GoogleDatalayerItem,
-  productToDatalayerItem,
-} from '../productToDatalayerItem/productToDatalayerItem'
-import { CartItem_DatalayerItemFragment } from './CartItem_DatalayerItem.gql'
+import type { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import { productToDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import type { CartItem_DatalayerItemFragment } from './CartItem_DatalayerItem.gql'
 
 export function cartItemToDatalayerItem<P extends CartItem_DatalayerItemFragment>(
   item: P,

package/mapping/cartItemToRemoveFromCart/cartToRemoveFromCart.ts

@@ -1,6 +1,6 @@
 import { cartItemToDatalayerItem } from '../cartItemToDatalayerItem/cartItemToDatalayerItem'
 import { datalayerItemsToCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
-import { CartItem_RemoveFromCartFragment } from './CartItem_RemoveFromCart.gql'
+import type { CartItem_RemoveFromCartFragment } from './CartItem_RemoveFromCart.gql'
 
 export const cartItemToRemoveFromCart = <C extends CartItem_RemoveFromCartFragment>(
   cartItem: C,

package/mapping/cartToAddPaymentInfo/cartToAddPaymentInfo.ts

@@ -1,5 +1,6 @@
-import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
-import { Cart_AddPaymentInfoFragment } from './Cart_AddPaymentInfo.gql'
+import type { ViewCart } from '../cartToViewCart/cartToViewCart'
+import { cartToViewCart } from '../cartToViewCart/cartToViewCart'
+import type { Cart_AddPaymentInfoFragment } from './Cart_AddPaymentInfo.gql'
 
 export type AddPaymentInfo = ViewCart & {
   coupon?: string

package/mapping/cartToAddShippingInfo/cartToAddShippingInfo.ts

@@ -1,6 +1,7 @@
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
-import { Cart_AddShippingInfoFragment } from './Cart_AddShippingInfo.gql'
+import type { ViewCart } from '../cartToViewCart/cartToViewCart'
+import { cartToViewCart } from '../cartToViewCart/cartToViewCart'
+import type { Cart_AddShippingInfoFragment } from './Cart_AddShippingInfo.gql'
 
 export type AddShippingInfo = ViewCart & {
   coupon?: string

package/mapping/cartToBeginCheckout/cartToBeginCheckout.ts

@@ -1,5 +1,6 @@
-import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
-import { Cart_BeginCheckoutFragment } from './Cart_BeginCheckout.gql'
+import type { ViewCart } from '../cartToViewCart/cartToViewCart'
+import { cartToViewCart } from '../cartToViewCart/cartToViewCart'
+import type { Cart_BeginCheckoutFragment } from './Cart_BeginCheckout.gql'
 
 export type BeginCheckout = ViewCart & {
   coupon?: string

package/mapping/cartToPurchase/cartToPurchase.ts

@@ -1,5 +1,6 @@
-import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
-import { Cart_PurchaseEventFragment } from './Cart_PurchaseEvent.gql'
+import type { ViewCart } from '../cartToViewCart/cartToViewCart'
+import { cartToViewCart } from '../cartToViewCart/cartToViewCart'
+import type { Cart_PurchaseEventFragment } from './Cart_PurchaseEvent.gql'
 
 export type PurchaseOrRefund = ViewCart & {
   transaction_id: string

package/mapping/cartToViewCart/cartToViewCart.ts

@@ -1,11 +1,9 @@
 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'
+import type { DataLayerCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import { datalayerItemsToCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import type { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import type { Cart_ViewCartFragment } from './Cart_ViewCart.gql'
 
 export type ViewCart = DataLayerCurrencyValue & { items: GoogleDatalayerItem[] }
 

package/mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue.ts

@@ -1,4 +1,4 @@
-import { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import type { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
 
 export type DataLayerCurrencyValue = {
   currency: string

package/mapping/productItemsToViewItemList/productItemsToViewItemList.ts

@@ -1,9 +1,7 @@
-import { ProductFilterParams, ProductListItemFragment } from '@graphcommerce/magento-product'
+import type { ProductFilterParams, ProductListItemFragment } from '@graphcommerce/magento-product'
 import { nonNullable } from '@graphcommerce/next-ui'
-import {
-  GoogleDatalayerItem,
-  productToDatalayerItem,
-} from '../productToDatalayerItem/productToDatalayerItem'
+import type { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import { productToDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
 
 export type ViewItemList = {
   item_list_id: string

package/mapping/productToDatalayerItem/productToDatalayerItem.ts

@@ -1,6 +1,6 @@
 import { productPageCategory } from '@graphcommerce/magento-product'
 import { nonNullable } from '@graphcommerce/next-ui'
-import { Product_DatalayerItemFragment } from './Product_DatalayerItem.gql'
+import type { Product_DatalayerItemFragment } from './Product_DatalayerItem.gql'
 
 /**
  * https://developers.google.com/tag-platform/gtagjs/reference/events#add_to_cart_item

package/mapping/productToViewItem/productToViewItem.ts

@@ -1,12 +1,8 @@
-import {
-  DataLayerCurrencyValue,
-  datalayerItemsToCurrencyValue,
-} from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
-import {
-  GoogleDatalayerItem,
-  productToDatalayerItem,
-} from '../productToDatalayerItem/productToDatalayerItem'
-import { Product_ViewItemFragment } from './Product_ViewItem.gql'
+import type { DataLayerCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import { datalayerItemsToCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import type { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import { productToDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import type { Product_ViewItemFragment } from './Product_ViewItem.gql'
 
 export type ViewItem = { items: GoogleDatalayerItem[] } & DataLayerCurrencyValue
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/google-datalayer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.99",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,16 +12,17 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.99",
-    "@graphcommerce/magento-cart-payment-method": "^9.0.0-canary.99",
-    "@graphcommerce/magento-cart-shipping-method": "^9.0.0-canary.99",
-    "@graphcommerce/magento-product": "^9.0.0-canary.99",
-    "@graphcommerce/next-ui": "^9.0.0-canary.99",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.99",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/magento-cart": "^9.0.0",
+    "@graphcommerce/magento-cart-payment-method": "^9.0.0",
+    "@graphcommerce/magento-cart-shipping-method": "^9.0.0",
+    "@graphcommerce/magento-product": "^9.0.0",
+    "@graphcommerce/next-ui": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/react-hook-form": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@mui/material": "^5.14.20",
-    "next": "^14",
+    "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -43,6 +44,6 @@
     }
   },
   "dependencies": {
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^4.2.4"
   }
 }

package/plugins/GoogleDatalayerAddProductsToCartForm.tsx

@@ -1,8 +1,5 @@
-import {
-  AddProductsToCartFormProps,
-  findAddedItems,
-  toUserErrors,
-} from '@graphcommerce/magento-product'
+import type { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
+import { findAddedItems, toUserErrors } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { nonNullable } from '@graphcommerce/next-ui'
 import { useSendEvent } from '../api/sendEvent'

package/plugins/GoogleDatalayerCartStartCheckout.tsx

@@ -1,4 +1,4 @@
-import { CartStartCheckoutProps } from '@graphcommerce/magento-cart'
+import type { CartStartCheckoutProps } from '@graphcommerce/magento-cart'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useMemoObject } from '@graphcommerce/next-ui'
 import { useEffect, useRef } from 'react'

package/plugins/GoogleDatalayerCartStartCheckoutLinkOrButton.tsx

@@ -1,4 +1,4 @@
-import { CartStartCheckoutLinkOrButtonProps } from '@graphcommerce/magento-cart'
+import type { CartStartCheckoutLinkOrButtonProps } from '@graphcommerce/magento-cart'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useSendEvent } from '../api/sendEvent'
 import { cartToBeginCheckout } from '../mapping/cartToBeginCheckout/cartToBeginCheckout'

package/plugins/GoogleDatalayerPaymentMethodButton.tsx

@@ -1,5 +1,5 @@
 import { useCartQuery } from '@graphcommerce/magento-cart'
-import { PaymentMethodButtonProps } from '@graphcommerce/magento-cart-payment-method'
+import type { PaymentMethodButtonProps } from '@graphcommerce/magento-cart-payment-method'
 import { GetPaymentMethodContextDocument } from '@graphcommerce/magento-cart-payment-method/PaymentMethodContext/GetPaymentMethodContext.gql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useSendEvent } from '../api/sendEvent'

package/plugins/GoogleDatalayerProductListItem.tsx

@@ -1,4 +1,4 @@
-import { ProductListItemProps } from '@graphcommerce/magento-product'
+import type { ProductListItemProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useEventCallback } from '@mui/material'
 import { useViewItemList } from '../components/DatalayerViewItemList'

package/plugins/GoogleDatalayerShippingMethodForm.tsx

@@ -1,4 +1,4 @@
-import { ShippingMethodFormProps } from '@graphcommerce/magento-cart-shipping-method'
+import type { ShippingMethodFormProps } from '@graphcommerce/magento-cart-shipping-method'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useSendEvent } from '../api/sendEvent'
 import { cartToAddShippingInfo } from '../mapping/cartToAddShippingInfo/cartToAddShippingInfo'

package/plugins/GoogleDatalayerWebVitals.tsx

@@ -2,7 +2,8 @@ import type { PagesProps } from '@graphcommerce/framer-next-pages'
 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 type { Metric } from 'web-vitals/attribution'
+import { onCLS, onFCP, onINP, onLCP, onTTFB } from 'web-vitals/attribution'
 import { useSendEvent } from '../api/sendEvent'
 
 export const config: PluginConfig = {
@@ -32,8 +33,7 @@ export function FramerNextPages(props: PluginProps<PagesProps>) {
     const opts = { reportAllChanges: true }
     onCLS((m) => sendCoreWebVitals(m, m.attribution.largestShiftTarget))
     onFCP((m) => sendCoreWebVitals(m), opts)
-    onFID((m) => sendCoreWebVitals(m, m.attribution.eventTarget), opts)
-    onINP((m) => sendCoreWebVitals(m, m.attribution.eventTarget), opts)
+    onINP((m) => sendCoreWebVitals(m, m.attribution.interactionTarget), opts)
     onLCP((m) => sendCoreWebVitals(m, m.attribution.element), opts)
     onTTFB((m) => sendCoreWebVitals(m), opts)
   }, [sendCoreWebVitals])