@graphcommerce/google-datalayer 8.1.0-canary.6 → 8.1.0-canary.8

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @graphcommerce/google-datalayer
 
+## 8.1.0-canary.8
+
+## 8.1.0-canary.7
+
 ## 8.1.0-canary.6
 
 ## 8.1.0-canary.5

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.6",
+  "version": "8.1.0-canary.8",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,14 +12,14 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.6",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.6",
-    "@graphcommerce/magento-cart-payment-method": "^8.1.0-canary.6",
-    "@graphcommerce/magento-cart-shipping-method": "^8.1.0-canary.6",
-    "@graphcommerce/magento-product": "^8.1.0-canary.6",
-    "@graphcommerce/next-ui": "^8.1.0-canary.6",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.6",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.6",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.8",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.8",
+    "@graphcommerce/magento-cart-payment-method": "^8.1.0-canary.8",
+    "@graphcommerce/magento-cart-shipping-method": "^8.1.0-canary.8",
+    "@graphcommerce/magento-product": "^8.1.0-canary.8",
+    "@graphcommerce/next-ui": "^8.1.0-canary.8",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.8",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.8",
     "@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,15 +1,14 @@
-import type { RemoveItemFromCart } from '@graphcommerce/magento-cart-items'
-import type { ReactPlugin } from '@graphcommerce/next-config'
+import type { RemoveItemFromCartProps } 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 component = 'RemoveItemFromCart'
-export const exported =
-  '@graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCart'
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-cart-items',
+}
 
-export const GoogleDatalayerRemoveItemFromCart: ReactPlugin<typeof RemoveItemFromCart> = (
-  props,
-) => {
+export function RemoveItemFromCart(props: PluginProps<RemoveItemFromCartProps>) {
   const { Prev, buttonProps } = props
 
   return (
@@ -28,5 +27,3 @@ export const GoogleDatalayerRemoveItemFromCart: ReactPlugin<typeof RemoveItemFro
     />
   )
 }
-
-export const Plugin = GoogleDatalayerRemoveItemFromCart

package/plugins/GoogleDatalayerRemoveItemFromCartFab.tsx

@@ -1,13 +1,14 @@
-import type { RemoveItemFromCartFab as Original } from '@graphcommerce/magento-cart-items'
-import type { ReactPlugin } from '@graphcommerce/next-config'
+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 component = 'RemoveItemFromCartFab'
-export const exported =
-  '@graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCartFab'
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-cart-items',
+}
 
-export const GoogleDatalayerRemoveItemFromCartFab: ReactPlugin<typeof Original> = (props) => {
+export function RemoveItemFromCartFab(props: PluginProps<RemoveItemFromCartFabProps>) {
   const { Prev, fabProps } = props
 
   return (
@@ -26,5 +27,3 @@ export const GoogleDatalayerRemoveItemFromCartFab: ReactPlugin<typeof Original>
     />
   )
 }
-
-export const Plugin = GoogleDatalayerRemoveItemFromCartFab

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