@graphcommerce/magento-recently-viewed-products 7.1.0-canary.41

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @graphcommerce/magento-recently-viewed-products
+
+## 7.1.0-canary.41
+
+### Minor Changes
+
+- [#2077](https://github.com/graphcommerce-org/graphcommerce/pull/2077) [`e661106d4`](https://github.com/graphcommerce-org/graphcommerce/commit/e661106d45e51c617533f19b397a812e22b6fc82) - Added recently viewed products hook and render component ([@bramvanderholst](https://github.com/bramvanderholst))

package/Config.graphqls

@@ -0,0 +1,20 @@
+"""
+Settings for recently viewed products
+"""
+input RecentlyViewedProductsConfig {
+  """
+  Enable/disable recently viewed products
+  """
+  enabled: Boolean
+  """
+  Number of recently viewed products to be stored in localStorage
+  """
+  maxCount: Int
+}
+
+extend input GraphCommerceConfig {
+  """
+  Settings for recently viewed products
+  """
+  recentlyViewedProducts: RecentlyViewedProductsConfig
+}

package/README.md

@@ -0,0 +1,10 @@
+# @graphcommerce/magento-recently-viewed-products
+
+When visiting a product page, the product SKU is added to a list of recently
+viewed products, stored in the users localStorage.
+
+## Configuration
+
+When `configurableVariantForSimple` is enabled in `graphcommerce.config.js`,
+fully configured configurable products will be shown as the selected variant in
+recently viewed products.

package/components/RecentlyViewedProducts.tsx

@@ -0,0 +1,43 @@
+import { ProductListItemRenderer, ProductScroller } from '@graphcommerce/magento-product'
+import { useInView } from 'framer-motion'
+import { useRef } from 'react'
+import {
+  UseRecentlyViewedProductsProps,
+  useRecentlyViewedProducts,
+  useRecentlyViewedSkus,
+} from '../hooks'
+
+export type RecentlyViewedProductsProps = UseRecentlyViewedProductsProps & {
+  title?: React.ReactNode
+  productListRenderer: ProductListItemRenderer
+  loading?: 'lazy' | 'eager'
+}
+export function RecentlyViewedProducts(props: RecentlyViewedProductsProps) {
+  const { exclude, title, productListRenderer, loading = 'lazy' } = props
+
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { margin: '300px', once: true })
+  const { skus } = useRecentlyViewedSkus({ exclude })
+  const productList = useRecentlyViewedProducts({ exclude, skip: !isInView && loading === 'lazy' })
+
+  if (
+    !import.meta.graphCommerce.recentlyViewedProducts?.enabled ||
+    (!productList.loading && !skus.length)
+  ) {
+    return null
+  }
+
+  const loadingProducts = [...Array(skus.length - productList.products.length).keys()].map((i) => ({
+    __typename: 'Skeleton' as const,
+    uid: i.toString(),
+  }))
+
+  return (
+    <ProductScroller
+      ref={ref}
+      productListRenderer={productListRenderer}
+      title={title}
+      items={[...loadingProducts, ...productList.products]}
+    />
+  )
+}

package/graphql/RecentlyViewedProducts.graphql

@@ -0,0 +1,10 @@
+query RecentlyViewedProducts {
+  recentlyViewedProducts @client {
+    __typename
+    items {
+      __typename
+      sku
+      parentSku
+    }
+  }
+}

package/graphql/RecentlyViewedProducts.graphqls

@@ -0,0 +1,12 @@
+extend type Query {
+  recentlyViewedProducts: RecentlyViewedProducts
+}
+
+type RecentlyViewedProducts {
+  items: [RecentlyViewedProduct!]!
+}
+
+type RecentlyViewedProduct {
+  sku: String!
+  parentSku: String
+}

package/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useRecentlyViewedProducts'
+export * from './useRecentlyViewedSkus'

package/hooks/useRecentlyViewedProducts.tsx

@@ -0,0 +1,44 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { ProductListDocument } from '@graphcommerce/magento-product'
+import { nonNullable } from '@graphcommerce/next-ui'
+import { useRecentlyViewedSkus, UseRecentlyViewedSkusProps } from './useRecentlyViewedSkus'
+
+export type UseRecentlyViewedProductsProps = UseRecentlyViewedSkusProps & { skip?: boolean }
+export function useRecentlyViewedProducts(props: UseRecentlyViewedProductsProps) {
+  const { exclude, skip = false } = props
+  let { skus, loading } = useRecentlyViewedSkus()
+
+  const productList = useQuery(ProductListDocument, {
+    variables: {
+      filters: {
+        sku: {
+          in: skus.map((p) => p.sku).sort(),
+        },
+      },
+    },
+    skip: loading || !skus.length || skip,
+  })
+
+  const productData =
+    productList.data?.products?.items || productList.previousData?.products?.items || []
+
+  if (exclude) {
+    skus = skus.filter(
+      (item) =>
+        item?.sku &&
+        !exclude.includes(item.sku) &&
+        item?.parentSku &&
+        !exclude.includes(item.parentSku),
+    )
+  }
+
+  // Sort products based on the time they were viewed. Last viewed item should be the first item in the array
+  const products = skus
+    .map((sku) => productData.find((p) => (p?.sku || '') === sku.sku))
+    .filter(nonNullable)
+
+  return {
+    products,
+    loading: loading || productList.loading,
+  }
+}

package/hooks/useRecentlyViewedSkus.tsx

@@ -0,0 +1,24 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { RecentlyViewedProductsDocument } from '../graphql/RecentlyViewedProducts.gql'
+
+export type UseRecentlyViewedSkusProps = { exclude?: string[] }
+
+export function useRecentlyViewedSkus(props: UseRecentlyViewedSkusProps = {}) {
+  const { exclude } = props
+  const { data, loading, previousData } = useQuery(RecentlyViewedProductsDocument, {
+    skip: !import.meta.graphCommerce.recentlyViewedProducts?.enabled,
+  })
+  let skus = (loading ? previousData : data)?.recentlyViewedProducts?.items || []
+
+  // Filter out excluded products (current product page)
+  if (exclude)
+    skus = skus.filter(
+      (item) =>
+        item?.sku &&
+        !exclude.includes(item.sku) &&
+        item?.parentSku &&
+        !exclude.includes(item.parentSku),
+    )
+
+  return { skus, loading }
+}

package/index.ts

@@ -0,0 +1,3 @@
+export * from './components/RecentlyViewedProducts'
+export * from './hooks'
+export * from './graphql/RecentlyViewedProducts.gql'

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@graphcommerce/magento-recently-viewed-products",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "7.1.0-canary.41",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "peerDependencies": {
+    "@graphcommerce/eslint-config-pwa": "7.1.0-canary.41",
+    "@graphcommerce/graphql": "7.1.0-canary.41",
+    "@graphcommerce/graphql-mesh": "7.1.0-canary.41",
+    "@graphcommerce/magento-cart": "7.1.0-canary.41",
+    "@graphcommerce/magento-product": "7.1.0-canary.41",
+    "@graphcommerce/magento-product-configurable": "7.1.0-canary.41",
+    "@graphcommerce/next-config": "7.1.0-canary.41",
+    "@graphcommerce/next-ui": "7.1.0-canary.41",
+    "@graphcommerce/prettier-config-pwa": "7.1.0-canary.41",
+    "@graphcommerce/typescript-config-pwa": "7.1.0-canary.41",
+    "@mui/material": "^5.10.16",
+    "framer-motion": "^10.0.0",
+    "next": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/plugins/RegisterProductAsRecentlyViewed.tsx

@@ -0,0 +1,85 @@
+import { useApolloClient } from '@graphcommerce/graphql'
+import {
+  type AddToCartItemSelector,
+  type ProductPageMeta,
+  ProductPageMetaFragment,
+} from '@graphcommerce/magento-product'
+import { useConfigurableSelectedVariant } from '@graphcommerce/magento-product-configurable/hooks'
+import type { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
+import { useEventCallback } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { RecentlyViewedProductsDocument } from '../graphql/RecentlyViewedProducts.gql'
+
+export const component = 'ProductPageMeta'
+export const exported = '@graphcommerce/magento-product/components/ProductPageMeta/ProductPageMeta'
+export const ifConfig: IfConfig = 'recentlyViewedProducts.enabled'
+
+type PluginType = ReactPlugin<typeof ProductPageMeta, AddToCartItemSelector>
+
+function ViewHandling(props: { product: ProductPageMetaFragment }) {
+  const { product } = props
+  const client = useApolloClient()
+  const variant = useConfigurableSelectedVariant({ url_key: product?.url_key, index: 0 })
+  const { events } = useRouter()
+
+  const registerView = useEventCallback(async () => {
+    const recentlyViewed = await client.query({ query: RecentlyViewedProductsDocument })
+    const skus = recentlyViewed.data.recentlyViewedProducts?.items ?? []
+
+    const isValidVariant =
+      (variant?.url_rewrites ?? []).length > 0 &&
+      variant?.url_key &&
+      import.meta.graphCommerce.configurableVariantForSimple
+
+    const parentSku = product.sku || ''
+    const sku = (isValidVariant ? variant.sku : product.sku) || ''
+
+    const parentSkuAlreadySet = skus.some(
+      (p) => p.sku === product.sku || p.parentSku === product.sku,
+    )
+    const skuAlreadySet = skus.some((p) => p.sku === sku)
+    const skuIsLastItem = skus.length === 0 || skus[skus.length - 1].sku === sku
+
+    if (skuAlreadySet && skuIsLastItem) return
+
+    // If SKU already exists in recently viewed products, remove it, so we can re-add it as the first item of the array
+    const viewedSkus = [
+      ...(skuIsLastItem || parentSkuAlreadySet
+        ? skus.filter((p) => p.sku !== parentSku && p.parentSku !== parentSku)
+        : skus),
+    ]
+
+    // Limit array
+    const items = [
+      { __typename: 'RecentlyViewedProduct' as const, parentSku, sku },
+      ...viewedSkus,
+    ].splice(0, import.meta.graphCommerce.recentlyViewedProducts?.maxCount || 10)
+
+    client.writeQuery({
+      query: RecentlyViewedProductsDocument,
+      broadcast: true,
+      data: { recentlyViewedProducts: { __typename: 'RecentlyViewedProducts', items } },
+    })
+  })
+
+  useEffect(() => {
+    events.on('routeChangeStart', registerView)
+    return () => events.off('routeChangeStart', registerView)
+  }, [events, registerView])
+
+  return null
+}
+
+const RegisterProductAsRecentlyViewed: PluginType = (props) => {
+  const { Prev, product } = props
+
+  return (
+    <>
+      <ViewHandling product={product} />
+      <Prev {...props} />
+    </>
+  )
+}
+
+export const Plugin = RegisterProductAsRecentlyViewed