@graphcommerce/magento-product 8.0.6-canary.4 → 8.1.0-canary.11

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 8.1.0-canary.11
+
+### Patch Changes
+
+- [#2255](https://github.com/graphcommerce-org/graphcommerce/pull/2255) [`679d07d`](https://github.com/graphcommerce-org/graphcommerce/commit/679d07dad5b5e2dab3c0f3d537716b6115af8ef7) - make the ProductPageMeta fragment injectable
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+## 8.1.0-canary.8
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
+## 8.1.0-canary.5
+
+### Patch Changes
+
+- [#2224](https://github.com/graphcommerce-org/graphcommerce/pull/2224) [`4dd2d01`](https://github.com/graphcommerce-org/graphcommerce/commit/4dd2d01b3e14e3107ee3e337bef2a8528d654e75) - When applying a filter it would not always scroll to the #products.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
 ## 8.0.6-canary.4
 
 ### Patch Changes

package/components/AddProductsToCart/index.ts

@@ -3,6 +3,7 @@ export * from './AddProductsToCartButton'
 export * from './AddProductsToCartError'
 export * from './AddProductsToCartFab'
 export * from './AddProductsToCartForm'
+export * from './AddProductsToCartSnackbar'
 export * from './AddProductsToCartQuantity'
 export * from './useAddProductsToCartAction'
 export * from './useFormAddProductsToCart'

package/components/JsonLdProduct/ProductPageJsonLd.tsx

@@ -1,10 +1,17 @@
 import { JsonLd } from '@graphcommerce/next-ui'
 import { JsonLdProductFragment } from './JsonLdProduct.gql'
 
-export function ProductPageJsonLd<
+export type ProductPageJsonLdProps<
   T extends { '@type': string },
   P extends JsonLdProductFragment,
->(props: { product: P; render: (product: P) => T & { '@context': 'https://schema.org' } }) {
+> = {
+  product: P
+  render: (product: P) => T & { '@context': 'https://schema.org' }
+}
+
+export function ProductPageJsonLd<T extends { '@type': string }, P extends JsonLdProductFragment>(
+  props: ProductPageJsonLdProps<T, P>,
+) {
   const { product, render } = props
   return <JsonLd<T> item={render(product)} />
 }

package/components/JsonLdProduct/index.ts

@@ -1,2 +1,3 @@
 export * from './jsonLdProduct'
 export * from './ProductPageJsonLd'
+export * from './JsonLdProduct.gql'

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,8 +1,9 @@
 import { useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
-import { useMemoObject } from '@graphcommerce/next-ui'
-import { useEventCallback } from '@mui/material'
+import { useMatchMediaMotionValue, useMemoObject } from '@graphcommerce/next-ui'
+import { useEventCallback, useTheme } from '@mui/material'
+import { m, useTransform } from 'framer-motion'
 import { useRouter } from 'next/router'
-import React, { BaseSyntheticEvent, createContext, useContext, useMemo } from 'react'
+import React, { BaseSyntheticEvent, createContext, useContext, useMemo, useRef } from 'react'
 import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import {
@@ -44,23 +45,30 @@ export type FilterFormProviderProps = Omit<
   params: ProductListParams
 } & DataProps
 
+const isSidebar = import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR'
+
 export function ProductFiltersPro(props: FilterFormProviderProps) {
   const { children, params, aggregations, appliedAggregations, filterTypes, ...formProps } = props
 
   const defaultValues = useMemoObject(toFilterParams(params))
   const form = useForm<ProductFilterParams>({ defaultValues, ...formProps })
+  const ref = useRef<HTMLFormElement>(null)
 
   const router = useRouter()
+  const theme = useTheme()
+  const isDesktop = useMatchMediaMotionValue('up', 'md')
+  const scrollMarginTop = useTransform(() => (isDesktop.get() ? 0 : theme.appShell.headerHeightSm))
+  const scroll = useTransform(() => !isSidebar || isDesktop.get())
 
   const submit = useEventCallback(
     form.handleSubmit(async (formValues) => {
-      const queryUrl = router.query.url ?? []
-      const comingFromURLWithoutFilters = !queryUrl.includes('q')
       const path = productListLinkFromFilter({ ...formValues, currentPage: 1 })
-
       if (router.asPath === path) return false
-      if (comingFromURLWithoutFilters) return router.push(path, path)
-      return router.replace(path, path)
+
+      const opts = { scroll: scroll.get() }
+      return (router.query.url ?? []).includes('q')
+        ? router.replace(path, path, opts)
+        : router.push(path, path, opts)
     }),
   )
 
@@ -78,7 +86,7 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
 
   return (
     <FilterFormContext.Provider value={filterFormContext}>
-      <form noValidate onSubmit={submit} id='products' />
+      <m.form ref={ref} noValidate onSubmit={submit} id='products' style={{ scrollMarginTop }} />
       {children}
     </FilterFormContext.Provider>
   )

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,7 +1,7 @@
 import { LazyHydrate, RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import { Box, BoxProps } from '@mui/material'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
-import { AddProductsToCartForm } from '../../index'
+import { AddProductsToCartForm } from '../AddProductsToCart'
 import { ProductListItemProps } from '../ProductListItem/ProductListItem'
 import { ProductListItemRenderer } from './renderer'
 

package/components/ProductPageMeta/ProductPageMeta.graphql

@@ -1,4 +1,4 @@
-fragment ProductPageMeta on ProductInterface {
+fragment ProductPageMeta on ProductInterface @injectable {
   ...ProductLink
   sku
   name

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -11,7 +11,7 @@ export type ProductTypenames = NonNullable<
 export async function getProductStaticPaths(
   client: ApolloClient<NormalizedCacheObject>,
   locale: string,
-  typename?: ProductTypenames,
+  options: { limit?: boolean } = { limit: import.meta.graphCommerce.limitSsg || false },
 ) {
   const query = client.query({
     query: ProductStaticPathsDocument,
@@ -36,8 +36,7 @@ export async function getProductStaticPaths(
   const paths: Return['paths'] = (await Promise.all(pages))
     .map((q) => q.data.products?.items)
     .flat(1)
-    .filter((item) => (typename ? item?.__typename === typename : true))
     .map((p) => ({ params: { url: `${p?.url_key}` }, locale }))
 
-  return import.meta.graphCommerce.limitSsg ? paths.slice(0, 1) : paths
+  return options.limit ? paths.slice(0, 1) : paths
 }

package/components/ProductStaticPaths/getSitemapPaths.ts

@@ -3,6 +3,9 @@ import { canonicalize, nonNullable } from '@graphcommerce/next-ui'
 import { productLink } from '../../hooks/useProductLink'
 import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
 
+/**
+ * @deprecated Not used anymore, use `getProductStaticPaths` instead.
+ */
 export async function getSitemapPaths(
   client: ApolloClient<NormalizedCacheObject>,
   ctx: { locale?: string; defaultLocale?: string },

package/hooks/useProductListLinkReplace.ts

@@ -9,6 +9,9 @@ type UseProductLinkPushProps = {
   scroll?: boolean
 }
 
+/**
+ * @deprecated replaced by custom function inside ProductFiltersPro
+ */
 export function useProductListLinkReplace(props?: UseProductLinkPushProps) {
   const { setParams } = useProductListParamsContext()
   const router = useRouter()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.6-canary.4",
+  "version": "8.1.0-canary.11",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.0.6-canary.4",
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/framer-next-pages": "^8.0.6-canary.4",
-    "@graphcommerce/framer-scroller": "^8.0.6-canary.4",
-    "@graphcommerce/graphql": "^8.0.6-canary.4",
-    "@graphcommerce/graphql-mesh": "^8.0.6-canary.4",
-    "@graphcommerce/image": "^8.0.6-canary.4",
-    "@graphcommerce/magento-cart": "^8.0.6-canary.4",
-    "@graphcommerce/magento-store": "^8.0.6-canary.4",
-    "@graphcommerce/next-ui": "^8.0.6-canary.4",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.4",
+    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.11",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.11",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.11",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.11",
+    "@graphcommerce/graphql": "^8.1.0-canary.11",
+    "@graphcommerce/graphql-mesh": "^8.1.0-canary.11",
+    "@graphcommerce/image": "^8.1.0-canary.11",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.11",
+    "@graphcommerce/magento-store": "^8.1.0-canary.11",
+    "@graphcommerce/next-ui": "^8.1.0-canary.11",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.11",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.11",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "exclude": ["**/node_modules", "**/.*/"],
   "include": ["**/*.ts", "**/*.tsx"],
-  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json",
 }