@graphcommerce/magento-product 6.0.2-canary.9 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Change Log
 
+## 6.1.0
+
+### Minor Changes
+
+- [#1890](https://github.com/graphcommerce-org/graphcommerce/pull/1890) [`f88727915`](https://github.com/graphcommerce-org/graphcommerce/commit/f88727915998690b34d35c7eb5b2af3ca154da3d) - Aggregation options (filters) now show a relevant count when applying filters and hide the count when it doesn't make sense. ([@paales](https://github.com/paales))
+
+- [#1877](https://github.com/graphcommerce-org/graphcommerce/pull/1877) [`27cd09247`](https://github.com/graphcommerce-org/graphcommerce/commit/27cd0924751a1ed2d1043e09600c039df76bad45) - Fetching core product page and and related+upsells in parallel so Magento doesn't choke on the query complexity limit. ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#1888](https://github.com/graphcommerce-org/graphcommerce/pull/1888) [`5460925a7`](https://github.com/graphcommerce-org/graphcommerce/commit/5460925a7f8bd0b8a871ed77098bec3a490fa8f2) - Filtering on category_uid wouldn't work on search results page ([@paales](https://github.com/paales))
+
+- [#1888](https://github.com/graphcommerce-org/graphcommerce/pull/1888) [`47429b293`](https://github.com/graphcommerce-org/graphcommerce/commit/47429b293f37b3977a862a36cff4da6956c44a4f) - When filtering on a paginated page it would not reset the currentPage to 1 ([@paales](https://github.com/paales))
+
+- [#1888](https://github.com/graphcommerce-org/graphcommerce/pull/1888) [`504d74916`](https://github.com/graphcommerce-org/graphcommerce/commit/504d749161959759b78cc5e9dcc7ca61349a0f12) - When the category_uid is filterable it would always show an active filter on all filters ([@paales](https://github.com/paales))
+
+- [#1870](https://github.com/graphcommerce-org/graphcommerce/pull/1870) [`fc567a9bd`](https://github.com/graphcommerce-org/graphcommerce/commit/fc567a9bd1b0ef4e8a8996752f279f7b5fd1fe84) - Crosssells will now be preloaded during the addProductsToCart mutation so they are already available in the 'added' overlay, preventing a second scroll. ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#1894](https://github.com/graphcommerce-org/graphcommerce/pull/1894) [`e08879934`](https://github.com/graphcommerce-org/graphcommerce/commit/e08879934095cee9c8371a4013543864b58c4706) - ProductSpecs would throw an hydration error if there were multiple categories with the same label ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.22
+
+## 6.0.2-canary.21
+
+## 6.0.2-canary.20
+
+## 6.0.2-canary.19
+
+## 6.0.2-canary.18
+
+## 6.0.2-canary.17
+
+## 6.0.2-canary.16
+
+## 6.0.2-canary.15
+
+### Patch Changes
+
+- [#1870](https://github.com/graphcommerce-org/graphcommerce/pull/1870) [`fc567a9bd`](https://github.com/graphcommerce-org/graphcommerce/commit/fc567a9bd1b0ef4e8a8996752f279f7b5fd1fe84) - Crosssells will now be preloaded during the addProductsToCart mutation so they are already available in the 'added' overlay, preventing a second scroll. ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 6.0.2-canary.14
+
+### Patch Changes
+
+- [#1894](https://github.com/graphcommerce-org/graphcommerce/pull/1894) [`e08879934`](https://github.com/graphcommerce-org/graphcommerce/commit/e08879934095cee9c8371a4013543864b58c4706) - ProductSpecs would throw an hydration error if there were multiple categories with the same label ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.13
+
+## 6.0.2-canary.12
+
+## 6.0.2-canary.11
+
+### Patch Changes
+
+- [#1890](https://github.com/graphcommerce-org/graphcommerce/pull/1890) [`f88727915`](https://github.com/graphcommerce-org/graphcommerce/commit/f88727915998690b34d35c7eb5b2af3ca154da3d) - Aggregation options (filters) now show a relevant count when applying filters and hide the count when it doesn't make sense. ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.10
+
 ## 6.0.2-canary.9
 
 ## 6.0.2-canary.8

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -1,9 +1,14 @@
 import { UseFormGraphQlOptions } from '@graphcommerce/ecommerce-ui'
-import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { ApolloQueryResult, useApolloClient } from '@graphcommerce/graphql'
+import {
+  useFormGqlMutationCart,
+  CrosssellsDocument,
+  CrosssellsQuery,
+} from '@graphcommerce/magento-cart'
 import { ExtendableComponent } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme, useThemeProps } from '@mui/material'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import {
   AddProductsToCartDocument,
   AddProductsToCartMutation,
@@ -54,6 +59,8 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
   let { children, redirect, onComplete, sx, errorSnackbar, successSnackbar, ...formProps } =
     useThemeProps({ name, props })
   const router = useRouter()
+  const client = useApolloClient()
+  const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>>>()
 
   if (typeof redirect !== 'undefined' && redirect !== 'added' && router.pathname === redirect)
     redirect = undefined
@@ -69,7 +76,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
       if (variables2 === false) return false
 
       const { cartId, cartItems } = variables2
-      return {
+      const requestData = {
         cartId,
         cartItems: cartItems
           .filter((cartItem) => cartItem.sku)
@@ -80,6 +87,19 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
             entered_options: cartItem.entered_options?.filter((option) => option?.value),
           })),
       }
+
+      const lastItem = requestData.cartItems[requestData.cartItems.length - 1]
+      const { sku } = lastItem
+
+      if (sku && redirect === 'added') {
+        // Preload crosssells
+        crosssellsQuery.current = client.query({
+          query: CrosssellsDocument,
+          variables: { pageSize: 1, filters: { sku: { eq: sku } } },
+        })
+      }
+
+      return requestData
     },
     onComplete: async (result, variables) => {
       await onComplete?.(result, variables)
@@ -92,6 +112,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
       if (toUserErrors(result.data).length || result.errors?.length || !redirect) return
 
       if (redirect === 'added') {
+        await crosssellsQuery.current
         const method = router.pathname.startsWith('/checkout/added') ? router.replace : router.push
         await method({
           pathname: '/checkout/added',

package/components/ProductFiltersPro/PriceSlider.tsx

@@ -9,7 +9,7 @@ export type PriceSliderProps = {
   value: FilterRangeTypeInput | null | undefined
   onChange: (...event: any[]) => void
   sx?: SxProps<Theme>
-  options: FilterProps['options']
+  options: FilterProps['aggregation']['options']
 }
 
 const { classes } = extendableComponent('PriceSlider', ['container', 'slider'] as const)

package/components/ProductFiltersPro/ProductFilterEqualChip.tsx

@@ -15,7 +15,9 @@ import { useProductFiltersPro } from './ProductFiltersPro'
 import { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterEqualChip(props: FilterProps) {
-  const { attribute_code, label, options } = props
+  const { aggregation } = props
+  const { attribute_code, label, options } = aggregation
+
   const { form, submit, params } = useProductFiltersPro()
   const { control } = form
   const attrCode = attribute_code as keyof ProductAttributeFilterInput
@@ -35,12 +37,14 @@ export function ProductFilterEqualChip(props: FilterProps) {
 
   const items = useMemo(
     () =>
-      filterNonNullableKeys(options, ['count', 'label']).map((option) => ({
+      filterNonNullableKeys(options, ['label']).map((option) => ({
         ...option,
         title: (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <div>{option.label}</div>
-            <Box sx={{ typography: 'caption', color: 'text.disabled' }}>({option.count})</Box>
+            {option.count !== null && (
+              <Box sx={{ typography: 'caption', color: 'text.disabled' }}>({option.count})</Box>
+            )}
           </Box>
         ),
         image: attrCode?.toLowerCase().includes('color') && (

package/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -17,7 +17,8 @@ import { useProductFiltersPro } from './ProductFiltersPro'
 import { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterEqualSection(props: FilterProps) {
-  const { attribute_code, label, options } = props
+  const { aggregation } = props
+  const { attribute_code, label, options } = aggregation
   const { form, submit, params } = useProductFiltersPro()
   const { control } = form
   const attrCode = attribute_code as keyof ProductAttributeFilterInput
@@ -31,14 +32,16 @@ export function ProductFilterEqualSection(props: FilterProps) {
 
   const items = useMemo(
     () =>
-      filterNonNullableKeys(options, ['count', 'label']).map((option) => ({
+      filterNonNullableKeys(options, ['label']).map((option) => ({
         ...option,
         title: (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <Typography sx={{ marginRight: 1 }}>{option.label}</Typography>
-            <Typography variant='caption' color='text.disabled'>
-              ({option.count})
-            </Typography>
+            {option.count !== null && (
+              <Typography variant='caption' color='text.disabled'>
+                ({option.count})
+              </Typography>
+            )}
           </Box>
         ),
         image: attrCode?.toLowerCase().includes('color') && (

package/components/ProductFiltersPro/ProductFilterRangeChip.tsx

@@ -10,7 +10,9 @@ import { FilterProps } from './ProductFiltersProAggregations'
 const { classes } = extendableComponent('FilterRangeType', ['root', 'container', 'slider'] as const)
 
 export function ProductFilterRangeChip(props: FilterProps) {
-  const { attribute_code, label, options } = props
+  const { aggregation } = props
+  const { attribute_code, label, options } = aggregation
+
   const { form, submit, params } = useProductFiltersPro()
   const { control } = form
   const attrCode = attribute_code as keyof ProductAttributeFilterInput

package/components/ProductFiltersPro/ProductFilterRangeSection.tsx

@@ -9,7 +9,8 @@ import { useProductFiltersPro } from './ProductFiltersPro'
 import { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterRangeSection(props: FilterProps) {
-  const { attribute_code, label, options } = props
+  const { aggregation } = props
+  const { attribute_code, label, options } = aggregation
 
   const { form, params } = useProductFiltersPro()
   const { control } = form

package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -1,45 +1,45 @@
-import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import { useProductFiltersPro } from './ProductFiltersPro'
+import { excludeCategory } from './activeAggregations'
+import { applyAggregationCount } from './applyAggregationCount'
 
-export type FilterProps = NonNullable<
-  NonNullable<ProductListFiltersFragment['aggregations']>[number]
->
+export type FilterProps = {
+  aggregation: NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
+}
 
 export type FilterRenderer = Record<string, React.FC<FilterProps>>
 
 export type ProductFiltersProAggregationsProps = {
   filterTypes: Record<string, string | undefined>
   renderer?: FilterRenderer
+  appliedAggregations?: ProductListFiltersFragment['aggregations']
 } & ProductListFiltersFragment
 
 export function ProductFiltersProAggregations(props: ProductFiltersProAggregationsProps) {
-  const { aggregations, filterTypes, renderer } = props
+  const { aggregations, appliedAggregations, filterTypes, renderer } = props
   const { params } = useProductFiltersPro()
 
   return (
     <>
-      {filterNonNullableKeys(aggregations)
-        .filter(({ attribute_code }) => {
-          if (params.search !== null) return true
-          return attribute_code !== 'category_id' && attribute_code !== 'category_uid'
-        })
-        .map((aggregation) => {
-          const filterType = filterTypes[aggregation.attribute_code]
-          if (!filterType) return null
+      {excludeCategory(
+        applyAggregationCount(aggregations, appliedAggregations, params),
+        params,
+      ).map((aggregation) => {
+        const filterType = filterTypes[aggregation.attribute_code]
+        if (!filterType) return null
 
-          const Component = renderer?.[filterType]
-          if (!Component) {
-            if (process.env.NODE_ENV === 'development') {
-              console.log(
-                `The renderer for fitlerType ${filterType} can not be found, please add it to the renderer prop: renderer={{ ${filterType}: (props) => <>MYRenderer</> }}}}`,
-              )
-            }
-            return null
+        const Component = renderer?.[filterType]
+        if (!Component) {
+          if (process.env.NODE_ENV === 'development') {
+            console.log(
+              `The renderer for fitlerType ${filterType} can not be found, please add it to the renderer prop: renderer={{ ${filterType}: (props) => <>MYRenderer</> }}}}`,
+            )
           }
+          return null
+        }
 
-          return <Component key={aggregation.attribute_code} {...aggregation} {...props} />
-        })}
+        return <Component key={aggregation.attribute_code} aggregation={aggregation} {...props} />
+      })}
     </>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -1,4 +1,3 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
 import {
   ChipOverlayOrPopper,
   ChipOverlayOrPopperProps,
@@ -6,6 +5,8 @@ import {
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box } from '@mui/material'
+import { activeAggregations } from './activeAggregations'
+import { applyAggregationCount } from './applyAggregationCount'
 import { ProductFilterEqualSection } from './ProductFilterEqualSection'
 import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import { useProductFiltersPro } from './ProductFiltersPro'
@@ -26,21 +27,23 @@ type AllFiltersChip = ProductFiltersProAggregationsProps &
   >
 
 export function ProductFiltersProAllFiltersChip(props: AllFiltersChip) {
-  const { filterTypes, aggregations, renderer, sort_fields, total_count, ...rest } = props
+  const {
+    filterTypes,
+    aggregations,
+    appliedAggregations: aggregationsCount,
+    sort_fields,
+    total_count,
+    renderer,
+    ...rest
+  } = props
 
   const { form, submit, params } = useProductFiltersPro()
-  const { filters, sort } = params
+  const { sort } = params
 
-  const activeFilters = filterNonNullableKeys(aggregations)
-    .filter(({ attribute_code }) => {
-      if (params.search !== null) return true
-      return attribute_code !== 'category_id' && attribute_code !== 'category_uid'
-    })
-    .filter(
-      ({ attribute_code }) =>
-        filters[attribute_code]?.from || filters[attribute_code]?.to || filters[attribute_code]?.in,
-    )
-    .map(({ label }) => label)
+  const activeFilters = activeAggregations(
+    applyAggregationCount(aggregations, aggregationsCount, params),
+    params,
+  ).map(({ label }) => label)
 
   const allFilters = [...activeFilters, sort].filter(Boolean)
   const hasFilters = allFilters.length > 0
@@ -53,7 +56,7 @@ export function ProductFiltersProAllFiltersChip(props: AllFiltersChip) {
       onReset={
         hasFilters
           ? () => {
-              form.setValue('filters', { category_uid: filters.category_uid })
+              form.setValue('filters', { category_uid: params.filters.category_uid })
               form.setValue('currentPage', 1)
               form.setValue('sort', null)
               form.setValue('dir', null)
@@ -70,10 +73,11 @@ export function ProductFiltersProAllFiltersChip(props: AllFiltersChip) {
     >
       {() => (
         <Box sx={(theme) => ({ display: 'grid', rowGap: theme.spacings.sm })}>
-          <ProductFiltersProSortSection sort_fields={sort_fields} />
+          <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
           <ProductFiltersProAggregations
             filterTypes={filterTypes}
             aggregations={aggregations}
+            appliedAggregations={aggregationsCount}
             renderer={{
               FilterRangeTypeInput: ProductFilterRangeSection,
               FilterEqualTypeInput: ProductFilterEqualSection,

package/components/ProductFiltersPro/activeAggregations.ts

@@ -0,0 +1,25 @@
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import { ProductFilterParams } from '../ProductListItems/filterTypes'
+
+export function excludeCategory(
+  aggregations: ProductListFiltersFragment['aggregations'],
+  params: ProductFilterParams,
+) {
+  return filterNonNullableKeys(aggregations).filter(({ attribute_code }) => {
+    if (params.search !== null) return true
+    return attribute_code !== 'category_id' && attribute_code !== 'category_uid'
+  })
+}
+
+export function activeAggregations(
+  aggregations: ProductListFiltersFragment['aggregations'],
+  params: ProductFilterParams,
+) {
+  return excludeCategory(aggregations, params).filter(
+    ({ attribute_code }) =>
+      params.filters[attribute_code]?.from ||
+      params.filters[attribute_code]?.to ||
+      params.filters[attribute_code]?.in,
+  )
+}

package/components/ProductFiltersPro/applyAggregationCount.ts

@@ -0,0 +1,40 @@
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import { ProductFilterParams } from '../ProductListItems/filterTypes'
+
+/**
+ * Apply aggregation count to aggregation options:
+ *
+ * - If the filter is applied and there is only one filter applied we can show the count
+ * - If the filter is applied and there is more than one filter applied we don't show the count
+ * - If the filter is not applied we show the count from the applied aggregation
+ */
+export function applyAggregationCount(
+  aggregations: ProductListFiltersFragment['aggregations'],
+  appliedAggregations: ProductListFiltersFragment['aggregations'],
+  params: ProductFilterParams,
+) {
+  const filterCount = Object.keys(params.filters).filter((attribute_code) => {
+    if (params.search !== null) return true
+    return attribute_code !== 'category_id' && attribute_code !== 'category_uid'
+  }).length
+
+  return filterNonNullableKeys(aggregations).map((aggregation) => {
+    const appliedAggregation = appliedAggregations?.find(
+      (a) => a?.attribute_code === aggregation?.attribute_code,
+    )
+    const applied = Boolean(params.filters[aggregation.attribute_code])
+
+    return {
+      ...aggregation,
+      options: filterNonNullableKeys(aggregation?.options)?.map((option) => {
+        if (applied && filterCount === 1) return option
+        if (applied && filterCount > 1) return { ...option, count: null }
+        return {
+          ...option,
+          count: appliedAggregation?.options?.find((o) => o?.value === option?.value)?.count ?? 0,
+        }
+      }),
+    }
+  })
+}

package/components/ProductList/ProductList.graphql

@@ -12,6 +12,7 @@ query ProductList(
     sort: $sort
     search: $search
   ) {
+    ...ProductListFilters
     ...ProductListCount
     ...ProductListPagination
     ...ProductListSort

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -12,7 +12,7 @@ export type FilterCheckboxTypeProps = Filter &
   Omit<ChipProps<'button'>, 'selected' | 'onDelete' | 'component'> & { sx?: SxProps<Theme> }
 
 export function FilterCheckboxType(props: FilterCheckboxTypeProps) {
-  const { attribute_code, count, label, options, ...chipProps } = props
+  const { attribute_code, label, options, ...chipProps } = props
   const { params } = useProductListParamsContext()
   const currentFilter = params.filters[attribute_code]
   const replaceRoute = useProductListLinkReplace({ scroll: false })

package/components/ProductListFilters/ProductListFilters.graphql

@@ -2,8 +2,8 @@ fragment ProductListFilters on Products {
   aggregations {
     __typename
     label
-    count
     attribute_code
+    count
     options {
       __typename
       label

package/components/ProductSpecs/ProductSpecs.tsx

@@ -47,7 +47,7 @@ export function ProductSpecs(props: ProductSpecsProps) {
               <div>{aggregation?.label}</div>
               <Box className={classes.options} sx={{ display: 'grid', gridAutoFlow: 'row' }}>
                 {aggregation?.options?.map((option) => (
-                  <span key={option?.label}>{option?.label === '1' ? 'Yes' : option?.label}</span>
+                  <span key={option?.value}>{option?.label === '1' ? 'Yes' : option?.label}</span>
                 ))}
               </Box>
             </li>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.2-canary.9",
+  "version": "6.1.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.2-canary.9",
-    "@graphcommerce/prettier-config-pwa": "6.0.2-canary.9",
-    "@graphcommerce/typescript-config-pwa": "6.0.2-canary.9"
+    "@graphcommerce/eslint-config-pwa": "6.1.0",
+    "@graphcommerce/prettier-config-pwa": "6.1.0",
+    "@graphcommerce/typescript-config-pwa": "6.1.0"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.0.2-canary.9",
-    "@graphcommerce/framer-scroller": "6.0.2-canary.9",
-    "@graphcommerce/framer-next-pages": "6.0.2-canary.9",
-    "@graphcommerce/graphql": "6.0.2-canary.9",
-    "@graphcommerce/graphql-mesh": "6.0.2-canary.9",
-    "@graphcommerce/image": "6.0.2-canary.9",
-    "@graphcommerce/magento-cart": "6.0.2-canary.9",
-    "@graphcommerce/magento-store": "6.0.2-canary.9",
-    "@graphcommerce/next-ui": "6.0.2-canary.9",
+    "@graphcommerce/ecommerce-ui": "6.1.0",
+    "@graphcommerce/framer-scroller": "6.1.0",
+    "@graphcommerce/framer-next-pages": "6.1.0",
+    "@graphcommerce/graphql": "6.1.0",
+    "@graphcommerce/graphql-mesh": "6.1.0",
+    "@graphcommerce/image": "6.1.0",
+    "@graphcommerce/magento-cart": "6.1.0",
+    "@graphcommerce/magento-store": "6.1.0",
+    "@graphcommerce/next-ui": "6.1.0",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {