@graphcommerce/magento-product 9.0.0-canary.57 → 9.0.0-canary.59

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 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
+
+- [#2328](https://github.com/graphcommerce-org/graphcommerce/pull/2328) [`ee04368`](https://github.com/graphcommerce-org/graphcommerce/commit/ee04368444f732e5541a595db6e2ef66d15add68) - Move to attributesList to get a list of filterable attributes instead of using an introspection query. `productFiltersProSectionRenderer` and `productFiltersProChipRenderer` keys now now one of `AttributeFrontendInputEnum`. ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.57
 
 ## 9.0.0-canary.56

package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -1,3 +1,4 @@
+import { AttributeFrontendInputEnum } from '@graphcommerce/graphql-mesh'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import { ProductFilterEqualChip } from './ProductFilterEqualChip'
 import { ProductFilterEqualSection } from './ProductFilterEqualSection'
@@ -11,20 +12,24 @@ export type FilterProps = {
   aggregation: NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
 }
 
-export type FilterRenderer = Record<string, React.FC<FilterProps>>
+export type FilterRenderer = Record<AttributeFrontendInputEnum, React.FC<FilterProps>>
 
 export type ProductFiltersProAggregationsProps = {
-  renderer?: FilterRenderer
+  renderer?: Partial<FilterRenderer>
 }
 
-export const productFiltersProSectionRenderer = {
-  FilterRangeTypeInput: ProductFilterRangeSection,
-  FilterEqualTypeInput: ProductFilterEqualSection,
+export const productFiltersProSectionRenderer: Partial<FilterRenderer> = {
+  SELECT: ProductFilterEqualSection,
+  MULTISELECT: ProductFilterEqualSection,
+  BOOLEAN: ProductFilterEqualSection,
+  PRICE: ProductFilterRangeSection,
 }
 
-export const productFiltersProChipRenderer = {
-  FilterEqualTypeInput: ProductFilterEqualChip,
-  FilterRangeTypeInput: ProductFilterRangeChip,
+export const productFiltersProChipRenderer: Partial<FilterRenderer> = {
+  SELECT: ProductFilterEqualChip,
+  MULTISELECT: ProductFilterEqualChip,
+  BOOLEAN: ProductFilterEqualChip,
+  PRICE: ProductFilterRangeChip,
 }
 
 export function ProductFiltersProAggregations(props: ProductFiltersProAggregationsProps) {
@@ -36,7 +41,10 @@ export function ProductFiltersProAggregations(props: ProductFiltersProAggregatio
       {excludeCategory(applyAggregationCount(aggregations, appliedAggregations, params)).map(
         (aggregation) => {
           const filterType = filterTypes[aggregation.attribute_code]
-          if (!filterType) return null
+          if (!filterType) {
+            console.log('Filter not recognized', aggregation.attribute_code, filterTypes)
+            return null
+          }
 
           const Component = renderer?.[filterType]
           if (!Component) {

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/ProductListFilters/ProductListFilters.tsx

@@ -1,5 +1,5 @@
 import { ChipMenuProps } from '@graphcommerce/next-ui'
-import { FilterTypes } from '../ProductListItems/filterTypes'
+import { FilterTypes } from '../ProductListItems/getFilterTypes'
 import { FilterCheckboxType } from './FilterCheckboxType'
 import { FilterEqualType } from './FilterEqualType'
 import { FilterRangeType } from './FilterRangeType'
@@ -23,22 +23,16 @@ export function ProductListFilters(props: ProductFiltersProps) {
           return null
 
         switch (filterTypes[aggregation.attribute_code]) {
-          case 'FilterEqualTypeInput':
-            if (
-              aggregation.options?.[0]?.label === '0' ||
-              aggregation.options?.[1]?.label === '0' ||
-              aggregation.options?.[0]?.label === '1' ||
-              aggregation.options?.[1]?.label === '1'
-            ) {
-              return (
-                <FilterCheckboxType
-                  key={aggregation.attribute_code}
-                  {...aggregation}
-                  {...chipMenuProps}
-                />
-              )
-            }
-
+          case 'BOOLEAN':
+            return (
+              <FilterCheckboxType
+                key={aggregation.attribute_code}
+                {...aggregation}
+                {...chipMenuProps}
+              />
+            )
+          case 'SELECT':
+          case 'MULTISELECT':
             return (
               <FilterEqualType
                 key={aggregation.attribute_code}
@@ -46,8 +40,7 @@ export function ProductListFilters(props: ProductFiltersProps) {
                 {...chipMenuProps}
               />
             )
-
-          case 'FilterRangeTypeInput':
+          case 'PRICE':
             return (
               <FilterRangeType
                 key={aggregation.attribute_code}
@@ -56,6 +49,7 @@ export function ProductListFilters(props: ProductFiltersProps) {
               />
             )
         }
+
         // console.log(
         //   'Filter not recognized',
         //   aggregation.attribute_code,

package/components/ProductListItems/ProductFilterTypes.graphql

@@ -0,0 +1,8 @@
+query ProductFilterTypes($filters: AttributeFilterInput!) {
+  attributesList(entityType: CATALOG_PRODUCT, filters: $filters) {
+    items {
+      code
+      frontend_input
+    }
+  }
+}

package/components/ProductListItems/filterTypes.tsx

@@ -67,8 +67,6 @@ export function isFilterTypeRange(filter: AnyFilterType): filter is FilterRangeT
   )
 }
 
-export type FilterTypes = Partial<Record<string, string>>
-
 export function toProductListParams(params: ProductFilterParams): ProductListParams {
   const { sort, dir, filters, ...rest } = params
 

package/components/ProductListItems/filteredProductList.tsx

@@ -1,13 +1,13 @@
 import type {
   FilterEqualTypeInput,
-  FilterMatchTypeInput,
   FilterRangeTypeInput,
   SortEnum,
 } from '@graphcommerce/graphql-mesh'
-import { useRouter } from 'next/router'
-import { FilterTypes, ProductListParams } from './filterTypes'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { equal } from '@wry/equality'
+import { useRouter } from 'next/router'
+import { ProductListParams } from './filterTypes'
+import { FilterTypes } from './getFilterTypes'
 
 export function parseParams(
   url: string,
@@ -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
 
@@ -44,20 +44,20 @@ export function parseParams(
 
     const [from, to] = value.split('-')
     switch (typeMap[param]) {
-      case 'FilterMatchTypeInput':
-        categoryVariables.filters[param] = { match: value } as FilterMatchTypeInput
+      case 'BOOLEAN':
+      case 'SELECT':
+      case 'MULTISELECT':
+        categoryVariables.filters[param] = { in: value.split(',') } as FilterEqualTypeInput
         return undefined
-      case 'FilterRangeTypeInput':
+      case 'PRICE':
         categoryVariables.filters[param] = {
           ...(from !== '*' && { from }),
           ...(to !== '*' && { to }),
         } as FilterRangeTypeInput
         return undefined
-      case 'FilterEqualTypeInput':
-        categoryVariables.filters[param] = { in: value.split(',') } as FilterEqualTypeInput
-        return undefined
     }
 
+    // console.log('Filter not recognized', param, typeMap[param])
     error = true
     return undefined
   }, undefined)

package/components/ProductListItems/getFilterTypes.ts

@@ -1,5 +1,7 @@
 import { gql, ApolloClient, NormalizedCacheObject, TypedDocumentNode } from '@graphcommerce/graphql'
-import type { Exact } from '@graphcommerce/graphql-mesh'
+import type { AttributeFrontendInputEnum, Exact } from '@graphcommerce/graphql-mesh'
+import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
+import { ProductFilterTypesDocument } from './ProductFilterTypes.gql'
 
 type FilterInputTypesQueryVariables = Exact<{ [key: string]: never }>
 
@@ -25,13 +27,40 @@ const FilterInputTypesDocument = gql`
   }
 ` as TypedDocumentNode<FilterInputTypesQuery, FilterInputTypesQueryVariables>
 
+export type FilterTypes = Partial<Record<string, AttributeFrontendInputEnum>>
+
 export async function getFilterTypes(
   client: ApolloClient<NormalizedCacheObject>,
-): Promise<Record<string, string | undefined>> {
+  isSearch: boolean = false,
+): Promise<FilterTypes> {
+  if (import.meta.graphCommerce.magentoVersion >= 247) {
+    const types = await client.query({
+      query: ProductFilterTypesDocument,
+      variables: {
+        filters: isSearch ? { is_filterable_in_search: true } : {},
+      },
+    })
+
+    const typeMap: FilterTypes = Object.fromEntries(
+      filterNonNullableKeys(types.data.attributesList?.items, ['frontend_input'])
+        .map((i) => [i.code, i.frontend_input])
+        .filter(nonNullable),
+    )
+
+    return typeMap
+  }
+
   const filterInputTypes = await client.query({ query: FilterInputTypesDocument })
 
-  const typeMap: Record<string, string | undefined> = Object.fromEntries(
-    filterInputTypes.data?.__type.inputFields.map(({ name, type }) => [name, type.name]),
+  const typeMap: FilterTypes = Object.fromEntries(
+    filterInputTypes.data?.__type.inputFields
+      .map<[string, AttributeFrontendInputEnum] | undefined>((field) => {
+        if (field.type.name === 'FilterEqualTypeInput') return [field.name, 'SELECT']
+        if (field.type.name === 'FilterRangeTypeInput') return [field.name, 'PRICE']
+        if (field.type.name === 'FilterMatchTypeInput') return [field.name, 'TEXT']
+        return undefined
+      })
+      .filter(nonNullable),
   )
 
   return typeMap

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.57",
+  "version": "9.0.0-canary.59",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,19 +18,19 @@
     "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.57",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.57",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.57",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.57",
-    "@graphcommerce/graphql": "^9.0.0-canary.57",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.57",
-    "@graphcommerce/image": "^9.0.0-canary.57",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.57",
-    "@graphcommerce/magento-category": "^9.0.0-canary.57",
-    "@graphcommerce/magento-store": "^9.0.0-canary.57",
-    "@graphcommerce/next-ui": "^9.0.0-canary.57",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.57",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.57",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.59",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.59",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.59",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.59",
+    "@graphcommerce/graphql": "^9.0.0-canary.59",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.59",
+    "@graphcommerce/image": "^9.0.0-canary.59",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.59",
+    "@graphcommerce/magento-category": "^9.0.0-canary.59",
+    "@graphcommerce/magento-store": "^9.0.0-canary.59",
+    "@graphcommerce/next-ui": "^9.0.0-canary.59",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.59",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.59",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",