@graphcommerce/magento-product 8.1.0-canary.3 → 8.1.0-canary.30

package/components/ProductCustomizable/CustomizableDateOption.tsx

@@ -4,6 +4,7 @@ import { Trans } from '@lingui/react'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import { OptionTypeRenderer } from './CustomizableAreaOption'
+import { Money } from '@graphcommerce/magento-store'
 
 type CustomizableDateOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableDateOption']
@@ -21,14 +22,56 @@ export function CustomizableDateOption(props: CustomizableDateOptionProps) {
     title,
     minDate = new Date('1950-11-12T00:00'),
     maxDate = new Date('9999-11-12T00:00'),
+    dateValue,
+    currency,
+    productPrice,
   } = props
-  const { register, setValue, setError, getFieldState, clearErrors, control } =
-    useFormAddProductsToCart()
+  const {
+    register,
+    setValue,
+    setError,
+    getFieldState,
+    clearErrors,
+    control,
+    resetField,
+    getValues,
+  } = useFormAddProductsToCart()
 
   const { invalid } = getFieldState(`cartItems.${index}.entered_options.${optionIndex}.value`)
 
   minDate.setSeconds(0, 0)
   maxDate.setSeconds(0, 0)
+  if (!dateValue) return null
+
+  const price =
+    dateValue.price === 0
+      ? null
+      : dateValue.price && (
+          <Box
+            sx={{
+              display: 'flex',
+              typography: 'body1',
+              '&.sizeMedium': { typographty: 'subtitle1' },
+              '&.sizeLarge': { typography: 'h6' },
+              color:
+                dateValue.uid ===
+                getValues(`cartItems.${index}.entered_options.${optionIndex}.value`)
+                  ? 'text.primary'
+                  : 'text.secondary',
+            }}
+          >
+            {/* Change fontFamily so the + is properly outlined */}
+            <span style={{ fontFamily: 'arial' }}>+{'\u00A0'}</span>
+            <Money
+              value={
+                dateValue.price_type === 'PERCENT'
+                  ? productPrice * (dateValue.price / 100)
+                  : dateValue.price
+              }
+              currency={currency}
+            />
+          </Box>
+        )
   return (
     <Box>
       <input
@@ -41,12 +84,20 @@ export function CustomizableDateOption(props: CustomizableDateOptionProps) {
       <TextFieldElement
         control={control}
         name={`cartItems.${index}.entered_options.${optionIndex}.value`}
-        sx={{ width: '100%' }}
+        sx={{
+          width: '100%',
+          '& input[type="datetime-local"]::-webkit-calendar-picker-indicator': {
+            filter: (theme) => (theme.palette.mode === 'dark' ? 'invert(100%)' : 'none'),
+            mr: '10px',
+          },
+        }}
+        defaultValue=''
         required={!!required}
         error={invalid}
         helperText={invalid ? <Trans id='Invalid date' /> : ''}
         type='datetime-local'
         InputProps={{
+          endAdornment: price,
           inputProps: {
             min: minDate.toISOString().replace(/:00.000Z/, ''),
             max: maxDate.toISOString().replace(/:00.000Z/, ''),
@@ -61,10 +112,12 @@ export function CustomizableDateOption(props: CustomizableDateOptionProps) {
           } else {
             clearErrors(`cartItems.${index}.entered_options.${optionIndex}.value`)
           }
-          setValue(
-            `cartItems.${index}.entered_options.${optionIndex}.value`,
-            `${data.currentTarget.value.replace('T', ' ')}:00`,
-          )
+          if (data.currentTarget.value)
+            setValue(
+              `cartItems.${index}.entered_options.${optionIndex}.value`,
+              `${data.currentTarget.value.replace('T', ' ')}:00`,
+            )
+          else resetField(`cartItems.${index}.entered_options.${optionIndex}.value`)
         }}
       />
     </Box>

package/components/ProductCustomizable/CustomizableDropDownOption.tsx

@@ -1,33 +1,81 @@
-import { SelectElement } from '@graphcommerce/ecommerce-ui'
+import { SelectElement, useController } from '@graphcommerce/ecommerce-ui'
 import { SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
+import { Box, ListItemText, MenuItem, TextField, Typography } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import { OptionTypeRenderer } from './CustomizableAreaOption'
+import { Money } from '@graphcommerce/magento-store'
 
 type CustomizableDropDownOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableDropDownOption']
 >
 
 export function CustomizableDropDownOption(props: CustomizableDropDownOptionProps) {
-  const { uid, required, index, title, dropdownValue } = props
-  const { control } = useFormAddProductsToCart()
+  const { uid, required, index, title, dropdownValue, productPrice, currency } = props
+  const { control, getValues } = useFormAddProductsToCart()
+
+  const {
+    field: { onChange, value, ref, ...field },
+    fieldState: { invalid, error },
+  } = useController({
+    name: `cartItems.${index}.customizable_options.${uid}`,
+    rules: {
+      required: Boolean(required),
+    },
+    control,
+    defaultValue: '',
+  })
 
   return (
     <Box>
       <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
-      <SelectElement
-        sx={{ width: '100%' }}
+
+      <TextField
+        sx={{
+          width: '100%',
+          '& .MuiSelect-select': {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          },
+        }}
         color='primary'
-        control={control}
-        name={`cartItems.${index}.customizable_options.${uid}`}
-        label={title}
+        value={value ?? ''}
+        {...field}
+        inputRef={ref}
+        onChange={(event) => onChange(event.target.value)}
+        select
         required={Boolean(required)}
-        defaultValue=''
-        options={filterNonNullableKeys(dropdownValue, ['title']).map((option) => ({
-          id: option.uid,
-          label: option.title,
-        }))}
-      />
+        error={invalid}
+        helperText={error?.message}
+      >
+        {filterNonNullableKeys(dropdownValue, ['title']).map((option) => (
+          <MenuItem key={option.uid} value={option.uid}>
+            <Box>{option.title}</Box>
+
+            {option.price ? (
+              <Box
+                sx={{
+                  // display: 'flex',
+                  typography: 'body1',
+                  '&.sizeMedium': { typographty: 'subtitle1' },
+                  '&.sizeLarge': { typography: 'h6' },
+                  color: option.uid === value ? 'text.primary' : 'text.secondary',
+                }}
+              >
+                <span style={{ fontFamily: 'arial', paddingTop: '1px' }}>+&nbsp;</span>
+                <Money
+                  value={
+                    option.price_type === 'PERCENT'
+                      ? productPrice * (option.price / 100)
+                      : option.price
+                  }
+                  currency={currency}
+                />
+              </Box>
+            ) : null}
+          </MenuItem>
+        ))}
+      </TextField>
     </Box>
   )
 }

package/components/ProductCustomizable/CustomizableFieldOption.tsx

@@ -1,3 +1,4 @@
+import { Money } from '@graphcommerce/magento-store'
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
@@ -10,10 +11,12 @@ type CustomizableFieldOptionProps = React.ComponentProps<
 >
 
 export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
-  const { uid, required, optionIndex, index, title, fieldValue } = props
-  const { control, register } = useFormAddProductsToCart()
+  const { uid, required, optionIndex, index, title, fieldValue, productPrice, currency } = props
+  const { control, register, resetField, getValues } = useFormAddProductsToCart()
 
-  const maxLength = fieldValue?.max_characters ?? 0
+  if (!fieldValue) return null
+
+  const maxLength = fieldValue.max_characters ?? 0
   return (
     <Box>
       <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
@@ -29,7 +32,36 @@ export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
         control={control}
         name={`cartItems.${index}.entered_options.${optionIndex}.value`}
         required={Boolean(required)}
-        validation={{
+        InputProps={{
+          endAdornment:
+            fieldValue.price === 0
+              ? null
+              : fieldValue.price && (
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      typography: 'body1',
+                      '&.sizeMedium': { typographty: 'subtitle1' },
+                      '&.sizeLarge': { typography: 'h6' },
+                      color: getValues(`cartItems.${index}.entered_options.${optionIndex}.value`)
+                        ? 'text.primary'
+                        : 'text.secondary',
+                    }}
+                  >
+                    {/* Change fontFamily so the + is properly outlined */}
+                    <span style={{ fontFamily: 'arial', paddingTop: '1px' }}>+{'\u00A0'}</span>
+                    <Money
+                      value={
+                        fieldValue.price_type === 'PERCENT'
+                          ? productPrice * (fieldValue.price / 100)
+                          : fieldValue.price
+                      }
+                      currency={currency}
+                    />
+                  </Box>
+                ),
+        }}
+        rules={{
           maxLength: {
             value: maxLength,
             message: i18n._(/* i18n*/ 'There is a maximum of ‘{maxLength}’ characters', {
@@ -43,6 +75,10 @@ export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
             maxLength,
           })
         }
+        onChange={(data) => {
+          if (!data.currentTarget.value)
+            resetField(`cartItems.${index}.entered_options.${optionIndex}.value`)
+        }}
       />
     </Box>
   )

package/components/ProductCustomizable/ProductCustomizable.graphql

@@ -1,4 +1,4 @@
-fragment ProductCustomizable on CustomizableProductInterface @injectable {
+fragment ProductCustomizable on CustomizableProductInterface {
   options {
     uid
     __typename

package/components/ProductCustomizable/index.ts

@@ -1 +1,2 @@
 export * from './ProductCustomizable'
+export * from './productCustomizableSelectors'

package/components/ProductCustomizable/productCustomizableSelectors.ts

@@ -0,0 +1,59 @@
+import type { PriceTypeEnum } from '@graphcommerce/graphql-mesh'
+import type { Simplify } from 'type-fest'
+import type { CustomizableAreaOptionFragment } from './CustomizableAreaOption.gql'
+import type { CustomizableCheckboxOptionFragment } from './CustomizableCheckboxOption.gql'
+import type { CustomizableDateOptionFragment } from './CustomizableDateOption.gql'
+import type { CustomizableDropDownOptionFragment } from './CustomizableDropDownOption.gql'
+import type { CustomizableFieldOptionFragment } from './CustomizableFieldOption.gql'
+import type { CustomizableFileOptionFragment } from './CustomizableFileOption.gql'
+import type { CustomizableMultipleOptionFragment } from './CustomizableMultipleOption.gql'
+import type { CustomizableRadioOptionFragment } from './CustomizableRadioOption.gql'
+import type { ProductCustomizable_SimpleProduct_Fragment } from './ProductCustomizable.gql'
+
+export type CustomizableProductOptionBase =
+  | {
+      price?: number | null | undefined
+      price_type?: PriceTypeEnum | null | undefined
+      uid?: string | null | undefined
+    }
+  | undefined
+  | null
+
+export type AnyOption = NonNullable<
+  NonNullable<ProductCustomizable_SimpleProduct_Fragment['options']>[number]
+>
+
+export type OptionValueSelector = {
+  [T in AnyOption as T['__typename']]: (
+    option: T,
+  ) => CustomizableProductOptionBase | CustomizableProductOptionBase[]
+}
+
+type MissingOptionValueSelectors = Omit<
+  OptionValueSelector,
+  keyof typeof productCustomizableSelectors
+>
+type DefinedOptionValueSelectors = Partial<
+  Pick<OptionValueSelector, keyof typeof productCustomizableSelectors>
+>
+
+type Selectors = Simplify<
+  keyof MissingOptionValueSelectors extends never
+    ? (MissingOptionValueSelectors & DefinedOptionValueSelectors) | undefined
+    : MissingOptionValueSelectors & DefinedOptionValueSelectors
+>
+
+export const productCustomizableSelectors = {
+  CustomizableAreaOption: (o: CustomizableAreaOptionFragment) => o.areaValue,
+  CustomizableCheckboxOption: (o: CustomizableCheckboxOptionFragment) => o.checkboxValue,
+  CustomizableFileOption: (o: CustomizableFileOptionFragment) => o.fileValue,
+  CustomizableDateOption: (o: CustomizableDateOptionFragment) => o.dateValue,
+  CustomizableDropDownOption: (o: CustomizableDropDownOptionFragment) => o.dropdownValue,
+  CustomizableFieldOption: (o: CustomizableFieldOptionFragment) => o.fieldValue,
+  CustomizableMultipleOption: (o: CustomizableMultipleOptionFragment) => o.multipleValue,
+  CustomizableRadioOption: (o: CustomizableRadioOptionFragment) => o.radioValue,
+}
+
+export type SelectorsProp = keyof MissingOptionValueSelectors extends never
+  ? { selectors?: Selectors }
+  : { selectors: Selectors }

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,14 +1,15 @@
-import { useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
-import { useMemoObject } from '@graphcommerce/next-ui'
-import { useEventCallback } from '@mui/material'
-import React, { BaseSyntheticEvent, createContext, useContext, useMemo } from 'react'
-import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
+import { FormAutoSubmit, useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
+import { useMatchMediaMotionValue, useMemoObject } from '@graphcommerce/next-ui'
+import { Theme, useEventCallback, useMediaQuery, useTheme } from '@mui/material'
+import { m, useTransform } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { BaseSyntheticEvent, createContext, useContext, useMemo, useRef } from 'react'
+import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import {
   ProductFilterParams,
   ProductListParams,
   toFilterParams,
-  toProductListParams,
 } from '../ProductListItems/filterTypes'
 
 type DataProps = {
@@ -42,19 +43,54 @@ export type FilterFormProviderProps = Omit<
 > & {
   children: React.ReactNode
   params: ProductListParams
+  /**
+   * Whether the filter should scroll to the products list and whether to submit the form on change.
+   */
+  autoSubmitMd?: boolean
 } & DataProps
 
+function AutoSubmitSidebarDesktop() {
+  const { form, submit } = useProductFiltersPro()
+
+  // We only need to auto-submit when the layout is not sidebar and we're viewing on desktop
+  const autoSubmitDisabled = useMediaQuery<Theme>((t) => t.breakpoints.down('md'), {
+    defaultMatches: false,
+  })
+
+  return <FormAutoSubmit control={form.control} disabled={autoSubmitDisabled} submit={submit} />
+}
+
 export function ProductFiltersPro(props: FilterFormProviderProps) {
-  const { children, params, aggregations, appliedAggregations, filterTypes, ...formProps } = props
+  const {
+    children,
+    params,
+    aggregations,
+    appliedAggregations,
+    filterTypes,
+    autoSubmitMd = false,
+    ...formProps
+  } = props
 
   const defaultValues = useMemoObject(toFilterParams(params))
   const form = useForm<ProductFilterParams>({ defaultValues, ...formProps })
+  const ref = useRef<HTMLFormElement>(null)
+
+  const router = useRouter()
+  const theme = useTheme()
+  const isDesktop = useMatchMediaMotionValue('up', 'md')
+  const scrollMarginTop = useTransform(() => (isDesktop.get() ? 0 : theme.appShell.headerHeightSm))
+  const scroll = useTransform(() => !autoSubmitMd || isDesktop.get())
 
-  const push = useProductListLinkReplace({ scroll: false })
   const submit = useEventCallback(
-    form.handleSubmit(async (formValues) =>
-      push({ ...toProductListParams(formValues), currentPage: 1 }),
-    ),
+    form.handleSubmit(async (formValues) => {
+      const path = productListLinkFromFilter({ ...formValues, currentPage: 1 })
+      if (router.asPath === path) return false
+
+      const opts = { scroll: scroll.get() }
+      return (router.query.url ?? []).includes('q')
+        ? router.replace(path, path, opts)
+        : router.push(path, path, opts)
+    }),
   )
 
   const filterFormContext: FilterFormContextProps = useMemo(
@@ -71,7 +107,8 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
 
   return (
     <FilterFormContext.Provider value={filterFormContext}>
-      <form noValidate onSubmit={submit} id='products' />
+      <m.form ref={ref} noValidate onSubmit={submit} id='products' style={{ scrollMarginTop }} />
+      {autoSubmitMd && <AutoSubmitSidebarDesktop />}
       {children}
     </FilterFormContext.Provider>
   )

package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -1,4 +1,8 @@
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import { ProductFilterEqualChip } from './ProductFilterEqualChip'
+import { ProductFilterEqualSection } from './ProductFilterEqualSection'
+import { ProductFilterRangeChip } from './ProductFilterRangeChip'
+import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import { excludeCategory } from './activeAggregations'
 import { applyAggregationCount } from './applyAggregationCount'
@@ -13,6 +17,16 @@ export type ProductFiltersProAggregationsProps = {
   renderer?: FilterRenderer
 }
 
+export const productFiltersProSectionRenderer = {
+  FilterRangeTypeInput: ProductFilterRangeSection,
+  FilterEqualTypeInput: ProductFilterEqualSection,
+}
+
+export const productFiltersProChipRenderer = {
+  FilterEqualTypeInput: ProductFilterEqualChip,
+  FilterRangeTypeInput: ProductFilterRangeChip,
+}
+
 export function ProductFiltersProAggregations(props: ProductFiltersProAggregationsProps) {
   const { renderer } = props
   const { params, aggregations, appliedAggregations, filterTypes } = useProductFiltersPro()

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -1,11 +1,10 @@
 import { ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { ProductFilterEqualSection } from './ProductFilterEqualSection'
-import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import {
   ProductFiltersProAggregations,
   ProductFiltersProAggregationsProps,
+  productFiltersProSectionRenderer,
 } from './ProductFiltersProAggregations'
 import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
 import {
@@ -23,13 +22,8 @@ export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregations
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
   >
 
-const defaultRenderer = {
-  FilterRangeTypeInput: ProductFilterRangeSection,
-  FilterEqualTypeInput: ProductFilterEqualSection,
-}
-
 export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFiltersChipProps) {
-  const { sort_fields, total_count, renderer, ...rest } = props
+  const { sort_fields, total_count, renderer, category, ...rest } = props
 
   const { submit, params, aggregations, appliedAggregations } = useProductFiltersPro()
   const { sort } = params
@@ -59,9 +53,15 @@ export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFilte
     >
       {() => (
         <>
-          <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
+          <ProductFiltersProSortSection
+            sort_fields={sort_fields}
+            total_count={total_count}
+            category={category}
+          />
           <ProductFiltersProLimitSection />
-          <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
+          <ProductFiltersProAggregations
+            renderer={{ ...productFiltersProSectionRenderer, ...renderer }}
+          />
         </>
       )}
     </ChipOverlayOrPopper>

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

@@ -4,7 +4,12 @@ import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import {
   ProductFiltersProAggregations,
   ProductFiltersProAggregationsProps,
+  productFiltersProSectionRenderer,
 } from './ProductFiltersProAggregations'
+import {
+  ProductFiltersCategorySectionProps,
+  ProductFiltersProCategorySection,
+} from './ProductFiltersProCategorySection'
 import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
 import {
   ProductFiltersProSortSection,
@@ -12,21 +17,30 @@ import {
 } from './ProductFiltersProSortSection'
 
 export type ProductFiltersProAllFiltersSidebarProps = ProductFiltersProAggregationsProps &
-  ProductFiltersProSortSectionProps & { sx?: SxProps<Theme> }
-
-const defaultRenderer = {
-  FilterRangeTypeInput: ProductFilterRangeSection,
-  FilterEqualTypeInput: ProductFilterEqualSection,
-}
+  ProductFiltersProSortSectionProps &
+  ProductFiltersCategorySectionProps & { sx?: SxProps<Theme> }
 
+/**
+ * @deprecated Not used anymore
+ *
+ * @param props
+ * @returns
+ */
 export function ProductFiltersProAllFiltersSidebar(props: ProductFiltersProAllFiltersSidebarProps) {
-  const { sort_fields, total_count, renderer, sx = [] } = props
+  const { sort_fields, total_count, renderer, sx = [], category, params } = props
 
   return (
     <Box sx={[{ display: { xs: 'none', md: 'grid' } }, ...(Array.isArray(sx) ? sx : [sx])]}>
-      <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
+      <ProductFiltersProCategorySection category={category} params={params} />
+      <ProductFiltersProSortSection
+        sort_fields={sort_fields}
+        total_count={total_count}
+        category={category}
+      />
       <ProductFiltersProLimitSection />
-      <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
+      <ProductFiltersProAggregations
+        renderer={{ ...productFiltersProSectionRenderer, ...renderer }}
+      />
     </Box>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProCategorySection.tsx

@@ -0,0 +1,70 @@
+import { UseCategoryTreeProps, useCategoryTree } from '@graphcommerce/magento-category'
+import {
+  ActionCard,
+  ActionCardAccordion,
+  ActionCardList,
+  IconSvg,
+  iconChevronLeft,
+  responsiveVal,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box, SxProps, Theme } from '@mui/material'
+import { useRouter } from 'next/router'
+
+export type ProductFiltersCategorySectionProps = UseCategoryTreeProps & {
+  hideTitle?: boolean
+  sx?: SxProps<Theme>
+}
+
+export function ProductFiltersProCategorySection(props: ProductFiltersCategorySectionProps) {
+  const { hideTitle, sx } = props
+  const router = useRouter()
+  const categoryTree = useCategoryTree(props)
+
+  if (!categoryTree) return null
+
+  return (
+    <ActionCardAccordion
+      sx={[
+        hideTitle ? { '& .MuiAccordionSummary-root': { display: 'none' } } : {},
+        sx,
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      defaultExpanded
+      summary={<Trans id='Categories' />}
+      details={
+        <ActionCardList value='cat' variant='default'>
+          {categoryTree.map((item) => (
+            <ActionCard
+              {...item}
+              title={
+                item.isBack ? (
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                    <IconSvg src={iconChevronLeft} size='medium' />
+                    {item.title}
+                  </Box>
+                ) : (
+                  item.title
+                )
+              }
+              sx={[
+                item.isBack ? {} : {},
+                {
+                  '&.sizeSmall': { pl: responsiveVal(8 * item.indent, 12 * item.indent) },
+                  '&.sizeMedium': { pl: responsiveVal(10 * item.indent, 14 * item.indent) },
+                  '&.sizeLarge': { pl: responsiveVal(12 * item.indent, 16 * item.indent) },
+                  '&.sizeResponsive': { pl: responsiveVal(8 * item.indent, 16 * item.indent) },
+                },
+              ]}
+              value={item.href}
+              key={item.href}
+              selected={item.selected}
+              onClick={() => router.push(item.href)}
+            />
+          ))}
+        </ActionCardList>
+      }
+      right={undefined}
+    />
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProChips.tsx

@@ -1,16 +1,18 @@
-import { ProductFilterEqualChip } from './ProductFilterEqualChip'
-import { ProductFilterRangeChip } from './ProductFilterRangeChip'
 import {
   ProductFiltersProAggregations,
   ProductFiltersProAggregationsProps,
+  productFiltersProChipRenderer,
 } from './ProductFiltersProAggregations'
 
-const defaultRenderer = {
-  FilterEqualTypeInput: ProductFilterEqualChip,
-  FilterRangeTypeInput: ProductFilterRangeChip,
-}
-
+/**
+ * @deprecated Not used anymore, use `<ProductFiltersProAggregations renderer={productFiltersProChipRenderer}/>`
+ */
 export function ProductFiltersProFilterChips(props: ProductFiltersProAggregationsProps) {
   const { renderer } = props
-  return <ProductFiltersProAggregations {...props} renderer={{ ...defaultRenderer, ...renderer }} />
+  return (
+    <ProductFiltersProAggregations
+      {...props}
+      renderer={{ ...productFiltersProChipRenderer, ...renderer }}
+    />
+  )
 }