npm - @graphcommerce/magento-product - Versions diffs - 9.0.0-canary.57 → 9.0.0-canary.58 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,11 @@
 # Change Log
+## 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 CHANGED Viewed

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

@@ -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 ADDED Viewed

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

package/components/ProductListItems/filterTypes.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,
@@ -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 CHANGED Viewed

@@ -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/package.json CHANGED Viewed

@@ -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.58",
   "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.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",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",