@graphcommerce/magento-product 9.0.0-canary.58 → 9.0.0-canary.60

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.0-canary.60
+
+## 9.0.0-canary.59
+
+### Patch Changes
+
+- [#2309](https://github.com/graphcommerce-org/graphcommerce/pull/2309) [`1fe4090`](https://github.com/graphcommerce-org/graphcommerce/commit/1fe409029671b841e582406251e45a9555fc78f9) - Hide SortChip or SortSection when there is only a single filter option. ([@Renzovh](https://github.com/Renzovh))
+
 ## 9.0.0-canary.58
 
 ### Patch Changes

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -19,6 +19,8 @@ export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
   const { submit, form } = useProductFiltersPro()
   const { options, showReset, selected, selectedLabel } = useProductFiltersProSort(props)
 
+  if ((options.length ?? 0) <= 1) return null
+
   return (
     <ChipOverlayOrPopper
       {...rest}

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -13,6 +13,8 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
   const { form } = useProductFiltersPro()
   const { options, showReset, selected } = useProductFiltersProSort(props)
 
+  if ((options.length ?? 0) <= 1) return null
+
   return (
     <ActionCardAccordion
       sx={sx}

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -36,7 +36,9 @@ export function useProductFiltersProSort(props: ProductListActionSortProps) {
 
   const conf = useQuery(StoreConfigDocument).data?.storeConfig
   const defaultSortBy = (
-    category ? category.default_sort_by ?? conf?.catalog_default_sort_by ?? 'position' : 'relevance'
+    category
+      ? (category.default_sort_by ?? conf?.catalog_default_sort_by ?? 'position')
+      : 'relevance'
   ) as ProductFilterParams['sort']
 
   const formSort = useWatch({ control, name: 'sort' })

package/components/ProductListItems/filteredProductList.tsx

@@ -20,7 +20,7 @@ export function parseParams(
   const typeMap = filterTypes
 
   let error = false
-  query.reduce<string | undefined>((param, value) => {
+  query.map(decodeURI).reduce<string | undefined>((param, value) => {
     // We parse everything in pairs, every second loop we parse
     if (!param || param === 'q') return value
 

package/components/ProductListItems/productListApplyCategoryDefaults.ts

@@ -1,8 +1,8 @@
 import { cloneDeep, useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument, StoreConfigQuery } from '@graphcommerce/magento-store'
+import { ProductListQueryVariables } from '../ProductList/ProductList.gql'
 import { CategoryDefaultFragment } from './CategoryDefault.gql'
 import { ProductListParams } from './filterTypes'
-import { ProductListQueryVariables } from '../ProductList/ProductList.gql'
 
 export function useProductListApplyCategoryDefaults(
   params: ProductListParams | undefined,
@@ -66,3 +66,9 @@ export async function productListApplyCategoryDefaults(
 
   return newParams
 }
+
+export function categoryDefaultsToProductListFilters(
+  variables: ProductListQueryVariables | undefined,
+): ProductListQueryVariables {
+  return { ...variables, filters: { category_uid: variables?.filters?.category_uid } }
+}

package/hooks/useProductList.ts

@@ -1,6 +1,5 @@
 import { debounce } from '@graphcommerce/ecommerce-ui'
 import {
-  ApolloQueryResult,
   ApolloClient,
   useQuery,
   useInContextQuery,
@@ -9,7 +8,12 @@ import {
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { showPageLoadIndicator } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
-import { FilterFormProviderProps, ProductFiltersDocument } from '../components'
+import {
+  FilterFormProviderProps,
+  ProductFiltersDocument,
+  ProductFiltersQuery,
+  ProductFiltersQueryVariables,
+} from '../components'
 import {
   ProductListDocument,
   ProductListQuery,
@@ -20,6 +24,7 @@ import { ProductListParams, toProductListParams } from '../components/ProductLis
 import { useRouterFilterParams } from '../components/ProductListItems/filteredProductList'
 import {
   productListApplyCategoryDefaults,
+  categoryDefaultsToProductListFilters,
   useProductListApplyCategoryDefaults,
 } from '../components/ProductListItems/productListApplyCategoryDefaults'
 
@@ -30,6 +35,7 @@ type Next = Parameters<NonNullable<FilterFormProviderProps['handleSubmit']>>[1]
 export const prefetchProductList = debounce(
   async (
     variables: ProductListQueryVariables,
+    filtersVariables: ProductFiltersQueryVariables,
     next: Next,
     client: ApolloClient<any>,
     shallow: boolean,
@@ -47,8 +53,7 @@ export const prefetchProductList = debounce(
     const productFilters = client.query({
       query: ProductFiltersDocument,
       variables: {
-        filters: { category_uid: variables.filters?.category_uid },
-        search: variables.search,
+        ...filtersVariables,
         context,
       },
     })
@@ -91,16 +96,23 @@ export const prefetchProductList = debounce(
  * - Handles customer specific product list queries
  */
 export function useProductList<
-  T extends ProductListQuery & {
-    params?: ProductListParams
-    category?: CategoryDefaultFragment | null | undefined
-  },
+  T extends ProductListQuery &
+    ProductFiltersQuery & {
+      params?: ProductListParams
+      category?: CategoryDefaultFragment | null | undefined
+    },
 >(props: T) {
   const { category } = props
   const { params, shallow } = useRouterFilterParams(props)
   const variables = useProductListApplyCategoryDefaults(params, category)
 
   const result = useInContextQuery(ProductListDocument, { variables, skip: !shallow }, props)
+  const filters = useInContextQuery(
+    ProductFiltersDocument,
+    { variables: categoryDefaultsToProductListFilters(variables), skip: !shallow },
+    props,
+  )
+
   const storeConfig = useQuery(StoreConfigDocument).data
 
   const handleSubmit: NonNullable<FilterFormProviderProps['handleSubmit']> = useEventCallback(
@@ -115,9 +127,22 @@ export function useProductList<
 
       const shallowNow =
         JSON.stringify(vars.filters?.category_uid) === JSON.stringify(params?.filters.category_uid)
-      await prefetchProductList(vars, next, result.client, shallowNow)
+      await prefetchProductList(
+        vars,
+        categoryDefaultsToProductListFilters(vars),
+        next,
+        result.client,
+        shallowNow,
+      )
     },
   )
 
-  return { ...props, ...result.data, params, mask: result.mask, handleSubmit }
+  return {
+    ...props,
+    filters: filters.data.filters,
+    ...result.data,
+    params,
+    mask: result.mask,
+    handleSubmit,
+  }
 }

package/package.json

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