@graphcommerce/magento-product 8.1.0-canary.5 → 8.1.0-canary.52

package/components/ProductFiltersPro/ProductFiltersProNoResults.tsx

@@ -0,0 +1,79 @@
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
+import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
+import { useProductFilterProHasFiltersApplied } from './useProductFiltersProHasFiltersApplied'
+
+export type ProductFitlersProNoResultProps = { search?: string | null; sx?: SxProps<Theme> }
+
+const name = 'ProductFiltersProNoResults' as const
+const parts = ['root'] as const
+const { classes } = extendableComponent(name, parts)
+
+export function ProductFiltersProNoResults(props: ProductFitlersProNoResultProps) {
+  const { search, sx = [] } = props
+
+  const term = search ? `'${search}'` : ''
+
+  const clearAll = useProductFiltersProClearAllAction()
+  const hasFilters = useProductFilterProHasFiltersApplied()
+
+  return (
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          marginTop: theme.spacings.md,
+          marginBottom: theme.spacings.sm,
+          textAlign: 'center',
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {term ? (
+        <>
+          <Typography variant='h5' align='center'>
+            <Trans>We couldn&apos;t find any results for {term}</Trans>
+          </Typography>
+          <p>
+            {hasFilters ? (
+              <Trans>
+                Try a different search or{' '}
+                <Link
+                  href='#'
+                  onClick={(e) => {
+                    e.preventDefault()
+                    return clearAll()
+                  }}
+                >
+                  clear current filters
+                </Link>
+              </Trans>
+            ) : (
+              <Trans>Try a different search</Trans>
+            )}
+          </p>
+        </>
+      ) : (
+        <>
+          <Typography variant='h5' align='center'>
+            <Trans>We couldn&apos;t find any results</Trans>
+          </Typography>
+          {hasFilters && (
+            <p>
+              <Link
+                href='#'
+                onClick={(e) => {
+                  e.preventDefault()
+                  return clearAll()
+                }}
+              >
+                <Trans>Clear current filters</Trans>
+              </Link>
+            </p>
+          )}
+        </>
+      )}
+    </Box>
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -15,7 +15,7 @@ export type ProductListActionSortProps = UseProductFiltersProSortProps &
   >
 
 export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
-  const { sort_fields, chipProps, category, ...rest } = props
+  const { sort_fields, total_count, chipProps, category, ...rest } = props
   const { submit, form } = useProductFiltersPro()
   const { options, showReset, selected, selectedLabel } = useProductFiltersProSort(props)
 

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -1,7 +1,5 @@
 import { SortEnum } from '@graphcommerce/graphql-mesh'
-import { IconSvg } from '@graphcommerce/next-ui'
-import * as IconArrowDown from '@graphcommerce/next-ui/icons/arrow-down.svg'
-import * as IconArrowUp from '@graphcommerce/next-ui/icons/arrow-up.svg'
+import { IconSvg, iconArrowDown, iconArrowUp } from '@graphcommerce/next-ui'
 
 type Props = {
   sortDirection: SortEnum | null
@@ -10,7 +8,7 @@ type Props = {
 export function ProductFiltersProSortDirectionArrow({ sortDirection }: Props) {
   return (
     <IconSvg
-      src={sortDirection === 'ASC' || sortDirection === null ? IconArrowUp : IconArrowDown}
+      src={sortDirection === 'ASC' || sortDirection === null ? iconArrowUp : iconArrowDown}
       sx={{ display: 'flex' }}
     />
   )

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,16 +1,21 @@
 import { ActionCard, ActionCardAccordion, ActionCardListForm, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
 
-export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps
+export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps & {
+  sx?: SxProps<Theme>
+}
 
 export function ProductFiltersProSortSection(props: ProductFiltersProSortSectionProps) {
+  const { sx } = props
   const { form } = useProductFiltersPro()
   const { options, showReset, selected } = useProductFiltersProSort(props)
 
   return (
     <ActionCardAccordion
+      sx={sx}
       defaultExpanded={selected}
       summary={<Trans id='Sort By' />}
       details={
@@ -19,7 +24,7 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
           name='sort'
           layout='list'
           variant='default'
-          size='medium'
+          size='responsive'
           render={ActionCard}
           items={options}
         />

package/components/ProductFiltersPro/activeAggregations.ts

@@ -2,21 +2,17 @@ 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 excludeCategory(aggregations: ProductListFiltersFragment['aggregations']) {
+  return filterNonNullableKeys(aggregations).filter(
+    ({ attribute_code }) => attribute_code !== 'category_id' && attribute_code !== 'category_uid',
+  )
 }
 
 export function activeAggregations(
   aggregations: ProductListFiltersFragment['aggregations'],
   params: ProductFilterParams,
 ) {
-  return excludeCategory(aggregations, params).filter(
+  return excludeCategory(aggregations).filter(
     ({ attribute_code }) =>
       params.filters[attribute_code]?.from ||
       params.filters[attribute_code]?.to ||

package/components/ProductFiltersPro/applyAggregationCount.ts

@@ -27,14 +27,20 @@ export function applyAggregationCount(
 
     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,
-        }
-      }),
+      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,
+          }
+        })
+        .sort((a, b) => {
+          if (a.count === 0) return 1
+          if (b.count === 0) return -1
+          return 0
+        }),
     }
   })
 }

package/components/ProductFiltersPro/index.ts

@@ -1,11 +1,20 @@
 export * from './ProductFilterEqualChip'
+export * from './ProductFilterEqualSection'
 export * from './ProductFilterRangeChip'
+export * from './ProductFilterRangeSection'
 export * from './ProductFiltersPro'
+export * from './ProductFiltersProAggregations'
 export * from './ProductFiltersProAllFiltersChip'
 export * from './ProductFiltersProAllFiltersSidebar'
+export * from './ProductFiltersProCategorySection'
 export * from './ProductFiltersProChips'
 export * from './ProductFiltersProClearAll'
 export * from './ProductFiltersProLayoutSidebar'
 export * from './ProductFiltersProLimitChip'
 export * from './ProductFiltersProLimitSection'
 export * from './ProductFiltersProSortChip'
+export * from './ProductFiltersProSortDirectionArrow'
+export * from './ProductFiltersProSortSection'
+export * from './useProductFiltersProClearAllAction'
+export * from './useProductFiltersProHasFiltersApplied'
+export * from './ProductFiltersProNoResults'

package/components/ProductFiltersPro/{useClearAllFiltersHandler.ts → useProductFiltersProClearAllAction.ts}

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { ProductFilterParams } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
-export function useClearAllFiltersAction() {
+export function useProductFiltersProClearAllAction() {
   const { form, submit } = useProductFiltersPro()
   const { reset, getValues } = form
 

package/components/ProductFiltersPro/useProductFiltersProHasFiltersApplied.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react'
+import { useProductFiltersPro } from './ProductFiltersPro'
+import { activeAggregations } from './activeAggregations'
+import { applyAggregationCount } from './applyAggregationCount'
+
+export function useProductFilterProHasFiltersApplied() {
+  const { params, aggregations, appliedAggregations } = useProductFiltersPro()
+  const { sort } = params
+
+  const hasFilters = useMemo(() => {
+    const activeFilters = activeAggregations(
+      applyAggregationCount(aggregations, appliedAggregations, params),
+      params,
+    ).map(({ label }) => label)
+
+    const allFilters = [...activeFilters, sort].filter(Boolean)
+    return allFilters.length > 0
+  }, [aggregations, appliedAggregations, params, sort])
+
+  return hasFilters
+}

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -27,7 +27,7 @@ export function useProductFiltersProSort(props: ProductListActionSortProps) {
     () =>
       filterNonNullableKeys(sort_fields?.options).map((o) =>
         !category?.uid && o.value === 'position'
-          ? { value: 'relevance', label: i18n._('Relevance') }
+          ? { value: 'relevance', label: i18n._(/* i18n*/ 'Relevance') }
           : o,
       ),
     [category?.uid, sort_fields?.options],
@@ -41,7 +41,9 @@ export function useProductFiltersProSort(props: ProductListActionSortProps) {
 
   const formSort = useWatch({ control, name: 'sort' })
   const formDirection = useWatch({ control, name: 'dir' })
-  const showReset = Boolean(formSort !== defaultSortBy || formDirection === 'DESC')
+  const showReset =
+    (formDirection !== null || formSort !== null) &&
+    Boolean(formSort !== defaultSortBy || formDirection === 'DESC')
   const selected = Boolean(params.sort && (params.sort !== defaultSortBy || params.dir === 'DESC'))
 
   const options = useMemo(

package/components/ProductList/ProductList.graphql

@@ -4,6 +4,8 @@ query ProductList(
   $filters: ProductAttributeFilterInput = {}
   $sort: ProductAttributeSortInput = {}
   $search: String = ""
+  $context: InContextInput = { loggedIn: false }
+  $onlyItems: Boolean = false
 ) {
   products(
     pageSize: $pageSize
@@ -11,11 +13,12 @@ query ProductList(
     filter: $filters
     sort: $sort
     search: $search
-  ) {
-    ...ProductListFilters
-    ...ProductListCount
-    ...ProductListPagination
-    ...ProductListSort
+  ) @inContext(context: $context) {
+    ...ProductListSuggestions @skip(if: $onlyItems)
+    ...ProductListFilters @skip(if: $onlyItems)
+    ...ProductListCount @skip(if: $onlyItems)
+    ...ProductListPagination @skip(if: $onlyItems)
+    ...ProductListSort @skip(if: $onlyItems)
     ...ProductListItems
   }
 }

package/components/ProductListCount/ProductListCount.tsx

@@ -11,10 +11,11 @@ const { classes, selectors } = extendableComponent('ProductListCount', [
 
 export type ProductCountProps = ProductListCountFragment & {
   sx?: SxProps<Theme>
+  children?: React.ReactNode
 }
 
 export function ProductListCount(props: ProductCountProps) {
-  const { total_count, sx = [] } = props
+  const { total_count, children, sx = [] } = props
 
   return (
     <Box
@@ -41,6 +42,7 @@ export function ProductListCount(props: ProductCountProps) {
         className={classes.count}
         sx={{ lineHeight: 0 }}
       >
+        {children ? <> {children} </> : null}
         {total_count === 0 && <Trans id='no products' />}
         {total_count === 1 && <Trans id='one product' />}
         {(total_count ?? 0) > 1 && <Trans id='{total_count} products' values={{ total_count }} />}

package/components/ProductListFilters/ProductFilters.graphql

@@ -1,5 +1,10 @@
-query ProductFilters($filters: ProductAttributeFilterInput = {}, $search: String) {
-  filters: products(filter: $filters, currentPage: 1, pageSize: 1, search: $search) {
+query ProductFilters(
+  $filters: ProductAttributeFilterInput = {}
+  $search: String
+  $context: InContextInput
+) {
+  filters: products(filter: $filters, currentPage: 1, pageSize: 1, search: $search)
+    @inContext(context: $context) {
     ...ProductListFilters
   }
 }

package/components/ProductListFilters/ProductListFilters.graphql

@@ -1,5 +1,5 @@
 fragment ProductListFilters on Products {
-  aggregations {
+  aggregations(filter: { category: { includeDirectChildrenOnly: true } }) {
     __typename
     label
     attribute_code

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -97,7 +97,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
           top: theme.page.vertical,
           zIndex: 9,
           margin: '0 auto',
-          maxWidth: `calc(100% - 96px - ${theme.spacings.sm} * 2)`,
+
           [theme.breakpoints.down('md')]: {
             textAlign: 'center',
             maxWidth: 'unset',
@@ -136,8 +136,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
             className={classes.scroller}
             hideScrollbar
             sx={(theme) => ({
-              paddingLeft: theme.page.horizontal,
-              paddingRight: theme.page.horizontal,
+              px: theme.page.horizontal,
               paddingBottom: '1px',
               [theme.breakpoints.up('md')]: {
                 borderRadius: '99em',
@@ -145,7 +144,6 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
                 paddingRight: '8px',
               },
               py: '5px',
-
               columnGap: '6px',
               gridAutoColumns: 'min-content',
             })}

package/components/ProductListItem/ProductDiscountLabel.tsx

@@ -1,4 +1,4 @@
-import { useNumberFormat } from '@graphcommerce/next-ui'
+import { PercentFormat } from '@graphcommerce/next-ui'
 import { Box, BoxProps } from '@mui/material'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 
@@ -7,7 +7,6 @@ export type ProductDiscountLabelProps = Pick<ProductListItemFragment, 'price_ran
 
 export function ProductDiscountLabel(props: ProductDiscountLabelProps) {
   const { price_range, ...boxProps } = props
-  const formatter = useNumberFormat({ style: 'percent', maximumFractionDigits: 1 })
   const discount = Math.floor(price_range.minimum_price.discount?.percent_off ?? 0)
 
   return (
@@ -26,7 +25,7 @@ export function ProductDiscountLabel(props: ProductDiscountLabelProps) {
           }}
           {...boxProps}
         >
-          {formatter.format(discount / -100)}
+          <PercentFormat>{discount / 100}</PercentFormat>
         </Box>
       )}
     </>

package/components/ProductListItem/ProductListItem.tsx

@@ -85,8 +85,8 @@ export function ProductListItemReal(props: ProductProps) {
     onClick,
   } = props
 
-  const handleClick = useEventCallback(
-    (e: React.MouseEvent<HTMLAnchorElement>) => onClick?.(e, props),
+  const handleClick = useEventCallback((e: React.MouseEvent<HTMLAnchorElement>) =>
+    onClick?.(e, props),
   )
 
   return (
@@ -140,7 +140,7 @@ export function ProductListItemReal(props: ProductProps) {
   )
 }
 
-export function ProductListItemSkeleton(props: SkeletonProps) {
+export function ProductListItemSkeleton(props: BaseProps) {
   const { children, imageOnly = false, aspectRatio, titleComponent = 'h2', sx = [] } = props
 
   return (

package/components/ProductListItem/ProductListItemTitleAndPrice.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material'
+import { Box, SxProps, Theme, Typography } from '@mui/material'
 import { productListPrice } from '../ProductListPrice'
 
 export type ProductListItemTitleAndPriceProps = {
@@ -7,26 +7,30 @@ export type ProductListItemTitleAndPriceProps = {
   subTitle?: React.ReactNode
   children: React.ReactNode
   classes: { titleContainer: string; title: string; subtitle: string }
+  sx?: SxProps<Theme>
 }
 
 export function ProductListItemTitleAndPrice(props: ProductListItemTitleAndPriceProps) {
-  const { titleComponent = 'h2', classes, children, subTitle, title } = props
+  const { titleComponent = 'h2', classes, children, subTitle, title, sx } = props
 
   return (
     <Box
       className={classes.titleContainer}
-      sx={(theme) => ({
-        display: 'grid',
-        alignItems: 'baseline',
-        marginTop: theme.spacings.xs,
-        columnGap: 1,
-        gridTemplateAreas: {
-          xs: `"title title" "subtitle price"`,
-          md: `"title subtitle price"`,
-        },
-        gridTemplateColumns: { xs: 'unset', md: 'auto auto 1fr' },
-        justifyContent: 'space-between',
-      })}
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          alignItems: 'baseline',
+          marginTop: theme.spacings.xs,
+          columnGap: 1,
+          gridTemplateAreas: {
+            xs: `"title title" "subtitle price"`,
+            md: `"title subtitle price"`,
+          },
+          gridTemplateColumns: { xs: 'unset', md: 'auto auto 1fr' },
+          justifyContent: 'space-between',
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       <Typography
         component={titleComponent}
@@ -37,7 +41,6 @@ export function ProductListItemTitleAndPrice(props: ProductListItemTitleAndPrice
           overflowWrap: 'break-word',
           maxWidth: '100%',
           gridArea: 'title',
-          fontWeight: 'fontWeightBold',
         }}
         className={classes.title}
       >

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,5 +1,5 @@
 import { LazyHydrate, RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
-import { Box, BoxProps } from '@mui/material'
+import { Box, BoxProps, Breakpoint, Theme, useTheme } from '@mui/material'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 import { AddProductsToCartForm } from '../AddProductsToCart'
 import { ProductListItemProps } from '../ProductListItem/ProductListItem'
@@ -9,6 +9,27 @@ type ComponentState = {
   size?: 'normal' | 'small'
 }
 
+type ColumnConfig = {
+  /**
+   * The total width of the grid, this is used to provde the correct values to the image sizes prop so the right image size is loaded.
+   *
+   * @default "calc(100vw - ${theme.page.horizontal} * 2)"
+   */
+  totalWidth?: string
+  /**
+   * Gap between the columns/rows
+   *
+   * @default theme.spacings.md
+   */
+  gap?: string
+  /**
+   * Number of columns
+   */
+  count: number
+}
+
+type ColumnsConfig = Partial<Record<Breakpoint, ColumnConfig>>
+
 export type ProductItemsGridProps = {
   items?:
     | Array<(ProductListItemFragment & ProductListItemProps) | null | undefined>
@@ -18,6 +39,7 @@ export type ProductItemsGridProps = {
   loadingEager?: number
   title: string
   sx?: BoxProps['sx']
+  columns?: ((theme: Theme) => ColumnsConfig) | ColumnsConfig
 } & Pick<ProductListItemProps, 'onClick' | 'titleComponent'> &
   ComponentState
 
@@ -35,8 +57,28 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
     size = 'normal',
     titleComponent,
     onClick,
+    columns,
   } = props
 
+  const theme = useTheme()
+
+  const totalWidth = `calc(100vw - ${theme.page.horizontal} * 2)`
+  const gap = theme.spacings.md
+
+  let columnConfig = typeof columns === 'function' ? columns(theme) : columns
+
+  if (!columnConfig && size === 'small') {
+    columnConfig = {
+      xs: { count: 2 },
+      md: { count: 3 },
+      lg: { count: 4, totalWidth: `${theme.breakpoints.values.xl}px` },
+    }
+  }
+
+  if (!columnConfig) {
+    columnConfig = { xs: { count: 2 }, md: { count: 3 }, lg: { count: 4 } }
+  }
+
   const classes = withState({ size })
 
   return (
@@ -44,40 +86,40 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
       <Box
         className={classes.root}
         sx={[
-          (theme) => ({
-            display: 'grid',
-            gridColumnGap: theme.spacings.md,
-            gridRowGap: theme.spacings.md,
-
-            '&.sizeSmall': {
-              gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 280)}, 1fr))`,
-            },
-            '&.sizeNormal': {
-              gridTemplateColumns: {
-                xs: `repeat(2, 1fr)`,
-                md: `repeat(3, 1fr)`,
-                lg: `repeat(4, 1fr)`,
-              },
+          ...Object.entries(columnConfig).map(([key, column]) => ({
+            [theme.breakpoints.up(key as Breakpoint)]: {
+              gap: column.gap ?? gap,
+              // width: totalWidth,
+              gridTemplateColumns: `repeat(${column.count}, 1fr)`,
             },
-          }),
+          })),
+          { display: 'grid' },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       >
         {items?.map((item, idx) =>
           item ? (
-            <LazyHydrate key={item.uid ?? ''} hydrated={loadingEager > idx ? true : undefined}>
+            <LazyHydrate
+              key={item.uid ?? ''}
+              hydrated={loadingEager > idx ? true : undefined}
+              height={responsiveVal(250, 500)}
+            >
               <RenderType
                 renderer={renderers}
-                sizes={
-                  size === 'small'
-                    ? { 0: '100vw', 354: '50vw', 675: '30vw', 1255: '23vw', 1500: '337px' }
-                    : { 0: '100vw', 367: '48vw', 994: '30vw', 1590: '23vw', 1920: '443px' }
-                }
+                sizes={Object.fromEntries(
+                  Object.entries(columnConfig ?? {}).map(([key, column]) => {
+                    const totalW = column.totalWidth ?? totalWidth
+                    const columnGap = column.gap ?? gap
+                    return [
+                      theme.breakpoints.values[key as Breakpoint],
+                      `calc((${totalW} - (${columnGap} * ${column.count - 1})) / ${column.count})`,
+                    ]
+                  }),
+                )}
                 {...item}
                 loading={loadingEager > idx ? 'eager' : 'lazy'}
                 titleComponent={titleComponent}
                 onClick={onClick}
-                noReport
               />
             </LazyHydrate>
           ) : null,

package/components/ProductListItems/filterTypes.tsx

@@ -43,11 +43,6 @@ export function toFilterParams(params: ProductListParams): ProductFilterParams {
   }
 }
 
-export function toProductListParams(params: ProductFilterParams): ProductListParams {
-  const { sort, dir, ...rest } = params
-  return { sort: sort ? { [sort]: dir } : {}, ...rest }
-}
-
 export type AnyFilterType =
   | ProductAttributeFilterInput[keyof ProductAttributeFilterInput]
   | FilterEqualTypeInput
@@ -73,3 +68,17 @@ 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
+
+  const newFilers = Object.fromEntries(
+    Object.entries(filters).filter(([, value]) => {
+      if (isFilterTypeEqual(value)) return Boolean(value.in)
+      if (isFilterTypeMatch(value)) return Boolean(value.match)
+      if (isFilterTypeRange(value)) return Boolean(value.from || value.to)
+      return false
+    }),
+  )
+  return { sort: sort ? { [sort]: dir } : {}, filters: newFilers, ...rest }
+}