@graphcommerce/googleanalytics 3.0.10 → 3.1.0-canary.10

package/CHANGELOG.md

@@ -1,8 +1,34 @@
 # Change Log
 
-## 3.0.10
+## 3.1.0-canary.10
 
-## 3.0.9
+## 3.1.0-canary.9
+
+## 3.1.0-canary.8
+
+## 3.1.0-canary.7
+
+### Patch Changes
+
+- [#1738](https://github.com/graphcommerce-org/graphcommerce/pull/1738) [`52882a63e`](https://github.com/graphcommerce-org/graphcommerce/commit/52882a63e96c0d3ba9641c3714d288fa4f420c82) - Do not forward the Prev prop in plugins ([@paales](https://github.com/paales))
+
+## 3.1.0-canary.6
+
+## 3.1.0-canary.5
+
+## 3.1.0-canary.4
+
+### Minor Changes
+
+- [#1733](https://github.com/graphcommerce-org/graphcommerce/pull/1733) [`85afcf4d0`](https://github.com/graphcommerce-org/graphcommerce/commit/85afcf4d011701f4b80e59e2b2b52a2e1f99a655) - Google Analytics now uses the new plugin system ([@paales](https://github.com/paales))
+
+## 3.0.9-canary.3
+
+## 3.0.9-canary.2
+
+## 3.0.9-canary.1
+
+## 3.0.9-canary.0
 
 ## 3.0.8
 

package/components/GoogleAnalyticsScript.tsx

@@ -3,9 +3,6 @@ import Script from 'next/script'
 export function GoogleAnalyticsScript() {
   const id = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS
 
-  if (process.env.NODE_ENV !== 'production' && !id)
-    console.warn('[@graphcommerce/googletagmanager]: NEXT_PUBLIC_GOOGLE_ANALYTICS not found')
-
   if (!id) return null
 
   return (

package/events/gtagAddShippingInfo/GtagAddShippingInfo.graphql

@@ -1,4 +1,4 @@
-fragment GtagAddShippingInfo on Cart @inject(into: ["ShippingPageFragment"]) {
+fragment GtagAddShippingInfo on Cart @inject(into: ["ShippingMethodSelected"]) {
   prices {
     grand_total {
       currency

package/events/gtagAddShippingInfo/gtagAddShippingInfo.ts

@@ -1,24 +1,21 @@
 import { GtagAddShippingInfoFragment } from './GtagAddShippingInfo.gql'
 
 export function gtagAddShippingInfo<C extends GtagAddShippingInfoFragment>(cart?: C | null) {
-  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
-    globalThis.gtag?.('event', 'add_shipping_info', {
-      currency: cart?.prices?.grand_total?.currency,
-      value: cart?.prices?.grand_total?.value,
-      coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
-      items: cart?.items?.map((item) => ({
-        item_id: item?.product.sku,
-        item_name: item?.product.name,
-        currency: item?.prices?.price.currency,
-        discount: item?.prices?.discounts?.reduce(
-          (sum, discount) => sum + (discount?.amount?.value ?? 0),
-          0,
-        ),
-        item_variant:
-          item?.__typename === 'ConfigurableCartItem' ? item.configured_variant.sku : '',
-        price: item?.prices?.price.value,
-        quantity: item?.quantity,
-      })),
-    })
-  }
+  globalThis.gtag?.('event', 'add_shipping_info', {
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      item_variant: item?.__typename === 'ConfigurableCartItem' ? item.configured_variant.sku : '',
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })
 }

package/events/gtagAddToCart/gtagAddToCart.ts

@@ -8,7 +8,7 @@ import { GtagAddToCartFragment } from './GtagAddToCart.gql'
 // @todo add types
 // @todo some thing still needs to be done for configurables and bundles as you can have multiple items of the same SKU in your cart, but with different configurations/prices
 // F.E. 'sock-red' has 2 variants, 'sock-red:small' (€ 5) and 'sock-red:large' (€ 7,50). At this time we dont know the value of the item added if multiple variants are added
-export const gtagAddToCart = (
+export const gtagAddToCart = async (
   result: FetchResult<AddProductsToCartMutation>,
   variables: AddProductsToCartMutationVariables,
 ) => {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googleanalytics",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.10",
+  "version": "3.1.0-canary.10",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,9 +12,13 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql-mesh": "4.30.2",
-    "@graphcommerce/magento-product": "4.13.3",
-    "@graphcommerce/next-ui": "4.30.2"
+    "@graphcommerce/graphql-mesh": "4.31.0-canary.6",
+    "@graphcommerce/magento-cart": "4.14.0-canary.10",
+    "@graphcommerce/magento-cart-payment-method": "4.14.0-canary.10",
+    "@graphcommerce/magento-cart-shipping-method": "4.14.0-canary.10",
+    "@graphcommerce/magento-product": "4.14.0-canary.10",
+    "@graphcommerce/next-ui": "4.31.0-canary.6",
+    "@graphcommerce/next-config": "4.31.0-canary.6"
   },
   "devDependencies": {
     "@graphcommerce/eslint-config-pwa": "^4.1.11",

package/plugins/GaAddProductsToCartForm.tsx

@@ -0,0 +1,22 @@
+import { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
+import { PluginProps } from '@graphcommerce/next-config'
+import { gtagAddToCart } from '../events/gtagAddToCart/gtagAddToCart'
+
+export const component = 'AddProductsToCartForm'
+export const exported = '@graphcommerce/magento-product'
+
+/** When a product is added to the Cart, send a Google Analytics event */
+function GaAddProductsToCartForm(props: PluginProps<AddProductsToCartFormProps>) {
+  const { Prev, onComplete, ...rest } = props
+
+  return (
+    <Prev
+      {...rest}
+      onComplete={async (data, variables) => {
+        await Promise.all([gtagAddToCart(data, variables), onComplete?.(data, variables)])
+      }}
+    />
+  )
+}
+
+export const Plugin = GaAddProductsToCartForm

package/plugins/GaCartStartCheckout.tsx

@@ -0,0 +1,21 @@
+import { CartStartCheckoutProps } from '@graphcommerce/magento-cart'
+import { PluginProps } from '@graphcommerce/next-config'
+import { gtagBeginCheckout } from '../events/gtagBeginCheckout/gtagBeginCheckout'
+
+export const component = 'CartStartCheckout'
+export const exported = '@graphcommerce/magento-cart'
+
+export function GaCartStartCheckout(props: PluginProps<CartStartCheckoutProps>) {
+  const { Prev, onStart, ...rest } = props
+  return (
+    <Prev
+      {...rest}
+      onStart={(e, cart) => {
+        gtagBeginCheckout(cart)
+        onStart?.(e, cart)
+      }}
+    />
+  )
+}
+
+export const Plugin = GaCartStartCheckout

package/plugins/GaCartStartCheckoutLinkOrButton.tsx

@@ -0,0 +1,23 @@
+import { CartStartCheckoutLinkOrButtonProps } from '@graphcommerce/magento-cart'
+import { PluginProps } from '@graphcommerce/next-config'
+import { gtagBeginCheckout } from '../events/gtagBeginCheckout/gtagBeginCheckout'
+
+export const component = 'CartStartCheckoutLinkOrButton'
+export const exported = '@graphcommerce/magento-cart'
+
+export function GaCartStartCheckoutLinkOrButton(
+  props: PluginProps<CartStartCheckoutLinkOrButtonProps>,
+) {
+  const { Prev, onStart, ...rest } = props
+  return (
+    <Prev
+      {...rest}
+      onStart={(e, cart) => {
+        gtagBeginCheckout(cart)
+        onStart?.(e, cart)
+      }}
+    />
+  )
+}
+
+export const Plugin = GaCartStartCheckoutLinkOrButton

package/plugins/GaFramerNextPages.tsx

@@ -0,0 +1,34 @@
+import type { PagesProps } from '@graphcommerce/framer-next-pages'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { GoogleAnalyticsScript } from '../components/GoogleAnalyticsScript'
+
+export const component = 'FramerNextPages'
+export const exported = '@graphcommerce/framer-next-pages'
+
+let warned = false
+
+function GaFramerNextPages(props: PluginProps<PagesProps>) {
+  const { Prev, ...rest } = props
+
+  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
+    return (
+      <>
+        <GoogleAnalyticsScript />
+        <Prev {...rest} />
+      </>
+    )
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warned) {
+      console.info(
+        '[@graphcommerce/googleanalytics]: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS not found',
+      )
+      warned = true
+    }
+  }
+
+  return <Prev {...rest} />
+}
+
+export const Plugin = GaFramerNextPages

package/plugins/GaPaymentMethodButton.tsx

@@ -0,0 +1,25 @@
+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 { PluginProps } from '@graphcommerce/next-config'
+import { gtagAddPaymentInfo } from '../events/gtagAddPaymentInfo/gtagAddPaymentInfo'
+
+export const component = 'PaymentMethodButton'
+export const exported = '@graphcommerce/magento-cart-payment-method'
+
+function GaPaymentMethodButton(props: PluginProps<PaymentMethodButtonProps>) {
+  const { Prev, onSubmitSuccessful, ...rest } = props
+  const methodContext = useCartQuery(GetPaymentMethodContextDocument)
+
+  return (
+    <Prev
+      {...rest}
+      onSubmitSuccessful={() => {
+        gtagAddPaymentInfo(methodContext.data?.cart)
+        onSubmitSuccessful?.()
+      }}
+    />
+  )
+}
+
+export const Plugin = GaPaymentMethodButton

package/plugins/GaPaymentMethodContextProvider.tsx

@@ -0,0 +1,19 @@
+import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
+import type { PluginProps } from '@graphcommerce/next-config'
+
+export const component = 'PaymentMethodContextProvider'
+export const exported = '@graphcommerce/magento-cart-payment-method'
+
+function GaPaymentMethodContextProvider(props: PluginProps<PaymentMethodContextProviderProps>) {
+  const { Prev, onSuccess, ...rest } = props
+  return (
+    <Prev
+      {...rest}
+      onSuccess={async (orderNumber, cart) => {
+        // Todo - add GA event here
+        await onSuccess?.(orderNumber, cart)
+      }}
+    />
+  )
+}
+export const Plugin = GaPaymentMethodContextProvider

package/plugins/GaProductListItemsBase.tsx

@@ -0,0 +1,25 @@
+import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
+import { PluginProps } from '@graphcommerce/next-config'
+import { gtagSelectItem } from '../events/gtagSelectItem/gtagSelectItem'
+import { useGtagViewItemList } from '../events/useGtagViewItemList/useGtagViewItemList'
+
+export const component = 'ProductListItemsBase'
+export const exported = '@graphcommerce/magento-product'
+
+export function GaProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
+  const { Prev, onClick, ...rest } = props
+
+  useGtagViewItemList(props)
+
+  return (
+    <Prev
+      {...rest}
+      onClick={(e, item) => {
+        gtagSelectItem({ item })
+        onClick?.(e, item)
+      }}
+    />
+  )
+}
+
+export const Plugin = GaProductListItemsBase

package/plugins/GaShippingMethodForm.tsx

@@ -0,0 +1,23 @@
+import { ShippingMethodFormProps } from '@graphcommerce/magento-cart-shipping-method'
+import { PluginProps } from '@graphcommerce/next-config'
+import { gtagAddShippingInfo } from '../events/gtagAddShippingInfo/gtagAddShippingInfo'
+
+export const component = 'ShippingMethodForm'
+export const exported = '@graphcommerce/magento-cart-shipping-method'
+
+/** When the ShippingMethod is submitted the result is sent to Google Analytics */
+export function GaShippingMethodForm(props: PluginProps<ShippingMethodFormProps>) {
+  const { Prev, onComplete, ...rest } = props
+  return (
+    <Prev
+      {...rest}
+      onComplete={(result) => {
+        const cart = result.data?.setShippingMethodsOnCart?.cart
+        if (!cart) return
+        gtagAddShippingInfo(cart)
+      }}
+    />
+  )
+}
+
+export const Plugin = GaShippingMethodForm