@graphcommerce/googleanalytics 5.1.0-canary.7 → 5.1.0-canary.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.1.0-canary.8
+
+### Patch Changes
+
+- [#1757](https://github.com/graphcommerce-org/graphcommerce/pull/1757) [`566beeee3`](https://github.com/graphcommerce-org/graphcommerce/commit/566beeee3b8300e836cb4cdb8102f1a239c281d7) - Make sure we can handle deeply nested items in a list ([@paales](https://github.com/paales))
+
 ## 5.1.0-canary.7
 
 ## 5.1.0-canary.6

package/components/GoogleAnalyticsItemList.tsx

@@ -0,0 +1,67 @@
+import { nonNullable, useMemoDeep } from '@graphcommerce/next-ui'
+import { useEventCallback } from '@mui/material'
+import React, { useContext, useEffect, useMemo } from 'react'
+import { ProductToGtagItemFragment } from '../events/productToGtagItem/ProductToGtagItem.gql'
+import { GtagItem, productToGtagItem } from '../events/productToGtagItem/productToGtagItem'
+
+export type UseGtagViewItemListProps<
+  P extends ProductToGtagItemFragment = ProductToGtagItemFragment,
+> = {
+  title: string
+  items?: (P | null | undefined)[] | null
+  listId?: string
+}
+
+export type ViewItemList = {
+  item_list_id: string
+  item_list_name: string
+  items: GtagItem[]
+}
+
+const GoogleAnalyticsItemListContext = React.createContext<{
+  item_list_id: string
+  item_list_name: string
+}>({ item_list_id: '', item_list_name: '' })
+
+export function useGoogleAnalyticsListItemHandler(item: ProductToGtagItemFragment) {
+  const { item_list_id, item_list_name } = useContext(GoogleAnalyticsItemListContext)
+  return useEventCallback(() =>
+    globalThis.gtag?.('event', 'select_item', {
+      item_list_id,
+      item_list_name,
+      items: productToGtagItem(item),
+    }),
+  )
+}
+
+export function GoogleAnalyticsItemList<
+  P extends ProductToGtagItemFragment = ProductToGtagItemFragment,
+>(props: UseGtagViewItemListProps<P> & { children: React.ReactNode }) {
+  const { title, items, listId, children } = props
+
+  const eventData: ViewItemList = useMemoDeep(
+    () => ({
+      item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
+      item_list_name: title,
+      items:
+        items?.map((item) => (item ? productToGtagItem(item) : null)).filter(nonNullable) ?? [],
+    }),
+    [listId, items, title],
+  )
+
+  useEffect(() => globalThis.gtag?.('event', 'view_item_list', eventData), [eventData])
+
+  const value = useMemo(
+    () => ({
+      item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
+      item_list_name: title ?? listId,
+    }),
+    [listId, title],
+  )
+
+  return (
+    <GoogleAnalyticsItemListContext.Provider value={value}>
+      {children}
+    </GoogleAnalyticsItemListContext.Provider>
+  )
+}

package/components/index.ts

@@ -1 +1,2 @@
 export * from './GoogleAnalyticsScript'
+export * from './GoogleAnalyticsItemList'

package/index.ts

@@ -1,9 +1,6 @@
 export * from './components'
-export * from './events/useGtagViewItemList/useGtagViewItemList'
 export * from './events/gtagBeginCheckout/gtagBeginCheckout'
 export * from './events/gtagAddPaymentInfo/gtagAddPaymentInfo'
 export * from './events/gtagAddPurchaseInfo/gtagAddPurchaseInfo'
 export * from './events/gtagAddShippingInfo/gtagAddShippingInfo'
-export * from './events/gtagSelectItem/gtagSelectItem'
-export * from './events/useGtagPurchase/useGtagPurchase'
 export * from './events/gtagAddToCart/gtagAddToCart'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googleanalytics",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.1.0-canary.7",
+  "version": "5.1.0-canary.8",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,18 +12,18 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql-mesh": "5.1.0-canary.7",
-    "@graphcommerce/magento-cart": "5.1.0-canary.7",
-    "@graphcommerce/magento-cart-payment-method": "5.1.0-canary.7",
-    "@graphcommerce/magento-cart-shipping-method": "5.1.0-canary.7",
-    "@graphcommerce/magento-product": "5.1.0-canary.7",
-    "@graphcommerce/next-config": "5.1.0-canary.7",
-    "@graphcommerce/next-ui": "5.1.0-canary.7"
+    "@graphcommerce/graphql-mesh": "5.1.0-canary.8",
+    "@graphcommerce/magento-cart": "5.1.0-canary.8",
+    "@graphcommerce/magento-cart-payment-method": "5.1.0-canary.8",
+    "@graphcommerce/magento-cart-shipping-method": "5.1.0-canary.8",
+    "@graphcommerce/magento-product": "5.1.0-canary.8",
+    "@graphcommerce/next-config": "5.1.0-canary.8",
+    "@graphcommerce/next-ui": "5.1.0-canary.8"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.7",
-    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.7",
-    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.7",
+    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.8",
+    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.8",
+    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.8",
     "@types/gtag.js": "^0.0.12"
   },
   "peerDependencies": {

package/plugins/GaProductListItem.tsx

@@ -0,0 +1,24 @@
+import { ProductListItemProps } from '@graphcommerce/magento-product'
+import { PluginProps } from '@graphcommerce/next-config'
+import { useEventCallback } from '@mui/material'
+import { useGoogleAnalyticsListItemHandler } from '../components/GoogleAnalyticsItemList'
+
+export const component = 'ProductListItem'
+export const exported = '@graphcommerce/magento-product'
+
+function GaProductListItemsBase(props: PluginProps<ProductListItemProps>) {
+  const { Prev, onClick, ...rest } = props
+  const handle = useGoogleAnalyticsListItemHandler(rest)
+
+  return (
+    <Prev
+      {...rest}
+      onClick={useEventCallback((e, item) => {
+        handle()
+        onClick?.(e, item)
+      })}
+    />
+  )
+}
+
+export const Plugin = GaProductListItemsBase

package/plugins/GaProductListItemsBase.tsx

@@ -1,24 +1,16 @@
 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'
+import { GoogleAnalyticsItemList } from '../components/GoogleAnalyticsItemList'
 
 export const component = 'ProductListItemsBase'
 export const exported = '@graphcommerce/magento-product'
 
 export function GaProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
-  const { Prev, onClick, ...rest } = props
-
-  useGtagViewItemList(props)
-
+  const { Prev, ...rest } = props
   return (
-    <Prev
-      {...rest}
-      onClick={(e, item) => {
-        gtagSelectItem({ item })
-        return onClick?.(e, item)
-      }}
-    />
+    <GoogleAnalyticsItemList {...rest}>
+      <Prev {...rest} />
+    </GoogleAnalyticsItemList>
   )
 }
 

package/events/gtagSelectItem/gtagSelectItem.ts

@@ -1,17 +0,0 @@
-import { ProductToGtagItemFragment } from '../productToGtagItem/ProductToGtagItem.gql'
-import { productToGtagItem } from '../productToGtagItem/productToGtagItem'
-
-type GtagSelectItemProps<T extends ProductToGtagItemFragment> = {
-  item: T
-  listId?: string
-  title?: string
-}
-
-export function gtagSelectItem<T extends ProductToGtagItemFragment>(props: GtagSelectItemProps<T>) {
-  const { item, listId: item_list_id, title: item_list_name } = props
-  globalThis.gtag?.('event', 'select_item', {
-    item_list_id,
-    item_list_name,
-    items: productToGtagItem(item),
-  })
-}

package/events/useGtagViewItemList/useGtagViewItemList.ts

@@ -1,36 +0,0 @@
-import { nonNullable, useMemoDeep } from '@graphcommerce/next-ui'
-import { useEffect } from 'react'
-import { ProductToGtagItemFragment } from '../productToGtagItem/ProductToGtagItem.gql'
-import { GtagItem, productToGtagItem } from '../productToGtagItem/productToGtagItem'
-
-export type UseGtagViewItemListProps<
-  P extends ProductToGtagItemFragment = ProductToGtagItemFragment,
-> = {
-  title: string
-  items?: (P | null | undefined)[] | null
-  listId?: string
-}
-
-export type ViewItemList = {
-  item_list_id: string
-  item_list_name: string
-  items: GtagItem[]
-}
-
-export function useGtagViewItemList<P extends ProductToGtagItemFragment>(
-  props: UseGtagViewItemListProps<P>,
-) {
-  const { title, items, listId } = props
-
-  const eventData: ViewItemList = useMemoDeep(
-    () => ({
-      item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
-      item_list_name: title,
-      items:
-        items?.map((item) => (item ? productToGtagItem(item) : null)).filter(nonNullable) ?? [],
-    }),
-    [listId, items, title],
-  )
-
-  useEffect(() => globalThis.gtag?.('event', 'view_item_list', eventData), [eventData])
-}