@graphcommerce/google-datalayer 9.0.0-canary.59 → 9.0.0-canary.60

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @graphcommerce/google-datalayer
 
+## 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

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

package/plugins/GoogleDatalayerAddProductsToCartForm.tsx

@@ -3,17 +3,19 @@ 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 { 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
 
   return (
@@ -48,5 +50,3 @@ function GoogleDatalayerAddProductsToCartForm(props: PluginProps<AddProductsToCa
     />
   )
 }
-
-export const Plugin = GoogleDatalayerAddProductsToCartForm

package/plugins/GoogleDatalayerCartStartCheckout.tsx

@@ -1,15 +1,17 @@
 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 { 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)
@@ -31,5 +33,3 @@ export function GoogleDatalayerCartStartCheckout(props: PluginProps<CartStartChe
     />
   )
 }
-
-export const Plugin = GoogleDatalayerCartStartCheckout

package/plugins/GoogleDatalayerCartStartCheckoutLinkOrButton.tsx

@@ -1,12 +1,14 @@
 import { CartStartCheckoutLinkOrButtonProps } from '@graphcommerce/magento-cart'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { sendEvent } 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
@@ -21,5 +23,3 @@ export function GoogleDatalayerCartStartCheckoutLinkOrButton(
     />
   )
 }
-
-export const Plugin = GoogleDatalayerCartStartCheckoutLinkOrButton

package/plugins/GoogleDatalayerPaymentMethodButton.tsx

@@ -1,14 +1,16 @@
 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 type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { sendEvent } 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)
 
@@ -24,5 +26,3 @@ function GoogleDatalayerPaymentMethodButton(props: PluginProps<PaymentMethodButt
     />
   )
 }
-
-export const Plugin = GoogleDatalayerPaymentMethodButton

package/plugins/GoogleDatalayerPaymentMethodContextProvider.tsx

@@ -1,12 +1,14 @@
 import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { sendEvent } from '../api/sendEvent'
 import { orderToPurchase } from '../mapping/orderToPurchase/orderToPurchase'
 
-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
@@ -20,4 +22,3 @@ function GoogleDatalayerPaymentMethodContextProvider(
     />
   )
 }
-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,11 +1,13 @@
 import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 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 GoogleDatalayerProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
+export function ProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
   const { Prev, ...rest } = props
   return (
     <DatalayerViewItemList {...rest}>
@@ -13,5 +15,3 @@ export function GoogleDatalayerProductListItemsBase(props: PluginProps<ProductIt
     </DatalayerViewItemList>
   )
 }
-
-export const Plugin = GoogleDatalayerProductListItemsBase

package/plugins/GoogleDatalayerShippingMethodForm.tsx

@@ -1,12 +1,14 @@
 import { ShippingMethodFormProps } from '@graphcommerce/magento-cart-shipping-method'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { sendEvent } 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
   return (
     <Prev
@@ -24,5 +26,3 @@ export function GoogleDatalayerShippingMethodForm(props: PluginProps<ShippingMet
     />
   )
 }
-
-export const Plugin = GoogleDatalayerShippingMethodForm

package/plugins/GoogleDatalayerUseRemoveItemFromCart.tsx

@@ -1,18 +1,19 @@
 import type { UpdateItemQuantityProps } from '@graphcommerce/magento-cart-items'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { sendEvent } 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
 
   return (
@@ -44,5 +45,3 @@ function GoogleDatalayerUpdateItemQuantity(props: PluginProps<UpdateItemQuantity
     />
   )
 }
-
-export const Plugin = GoogleDatalayerUpdateItemQuantity

package/plugins/GoogleDatalayerViewItem.tsx

@@ -1,15 +1,17 @@
 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 { 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>) {
+export function ProductPageMeta(props: PluginProps<ProductPageMetaProps>) {
   const { Prev, product } = props
 
   const viewItem = useMemoObject(productToViewItem(product))
@@ -17,5 +19,3 @@ function GoogleDatalayerViewItem(props: PluginProps<ProductPageMetaProps>) {
 
   return <Prev {...props} />
 }
-
-export const Plugin = GoogleDatalayerViewItem