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

package/Api/ProductListItem.graphql

@@ -1,4 +1,4 @@
-fragment ProductListItem on ProductInterface @injectable {
+fragment ProductListItem on ProductInterface {
   uid
   ...ProductLink
   sku
@@ -11,5 +11,4 @@ fragment ProductListItem on ProductInterface @injectable {
       ...ProductListPrice
     }
   }
-  ...ConfigurableOptions
 }

package/Api/ProductPageItem.graphql

@@ -1,4 +1,4 @@
-fragment ProductPageItem on ProductInterface @injectable {
+fragment ProductPageItem on ProductInterface {
   __typename
   uid
   ...ProductListItem

package/CHANGELOG.md

@@ -1,5 +1,120 @@
 # Change Log
 
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+### Minor Changes
+
+- [#2322](https://github.com/graphcommerce-org/graphcommerce/pull/2322) [`4d08a2b`](https://github.com/graphcommerce-org/graphcommerce/commit/4d08a2bd8c1919bd85b18e8e856775d18fb67e00) - Rename configurable_customizable back to customizable_options
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+### Patch Changes
+
+- [#2242](https://github.com/graphcommerce-org/graphcommerce/pull/2242) [`a4cce76`](https://github.com/graphcommerce-org/graphcommerce/commit/a4cce76ca37af2bec604e953ada4bb11bd91f55d) - Add option to show an extended version of the pagination component. Configurable via the "productListPaginationVariant" key in your graphcommerce.config.js
+  COMPACT means: "< Page X of Y >"
+  EXTENDED means: "< 1 2 ... [5] ... 10 11 >" ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+### Minor Changes
+
+- [#2273](https://github.com/graphcommerce-org/graphcommerce/pull/2273) [`77955c5`](https://github.com/graphcommerce-org/graphcommerce/commit/77955c56ac8633ab1c5e0f3ddb25e3a87236e2bb) - Improve Breadcrumbs on Category and Product pages
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+### Patch Changes
+
+- [#2255](https://github.com/graphcommerce-org/graphcommerce/pull/2255) [`679d07d`](https://github.com/graphcommerce-org/graphcommerce/commit/679d07dad5b5e2dab3c0f3d537716b6115af8ef7) - make the ProductPageMeta fragment injectable
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+## 8.1.0-canary.8
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
 ## 8.1.0-canary.5
 
 ### Patch Changes

package/Config.graphqls

@@ -3,6 +3,11 @@ enum ProductFiltersLayout {
   SIDEBAR
 }
 
+enum PaginationVariant {
+  COMPACT
+  EXTENDED
+}
+
 extend input GraphCommerceConfig {
   """
   Product filters with better UI for mobile and desktop.
@@ -37,4 +42,12 @@ extend input GraphCommerceConfig {
   Default: 'false'
   """
   crossSellsHideCartItems: Boolean = false
+
+  """
+  Pagination variant for the product listings.
+
+  COMPACT means: "< Page X of Y >"
+  EXTENDED means: "< 1 2 ... 4 [5] 6 ... 10 11 >"
+  """
+  productListPaginationVariant: PaginationVariant = COMPACT
 }

package/components/AddProductsToCart/AddProductsToCartButton.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonProps } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/macro'
 import {
   useAddProductsToCartAction,
   UseAddProductsToCartActionProps,
@@ -17,6 +17,7 @@ export type AddProductsToCartButtonProps = UseAddProductsToCartActionProps &
     | 'onClick'
     | 'sx'
     | 'children'
+    | 'type'
   >
 
 export function AddProductsToCartButton(props: AddProductsToCartButtonProps) {
@@ -25,7 +26,7 @@ export function AddProductsToCartButton(props: AddProductsToCartButtonProps) {
 
   return (
     <Button type='submit' color='primary' variant='pill' size='large' {...rest} {...action}>
-      {children || <Trans id='Add to Cart' />}
+      {children || <Trans>Add to Cart</Trans>}
     </Button>
   )
 }

package/components/AddProductsToCart/AddProductsToCartFab.tsx

@@ -1,5 +1,5 @@
 import { Fab, FabProps, iconShoppingBag, iconCheckmark } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/macro'
 import { SxProps, Theme } from '@mui/material'
 import {
   useAddProductsToCartAction,
@@ -22,7 +22,7 @@ export function AddProductsToCartFab(props: AddProductsToCartFabProps) {
       {...rest}
       {...action}
       icon={showSuccess && !action.loading ? iconCheckmark : icon}
-      aria-label={i18n._(/* i18n*/ `Add to Cart`)}
+      aria-label={t`Add to Cart`}
     />
   )
 }

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -5,8 +5,8 @@ import {
   CrosssellsDocument,
   CrosssellsQuery,
 } from '@graphcommerce/magento-cart'
-import { ExtendableComponent, nonNullable } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme, useThemeProps } from '@mui/material'
+import { ErrorSnackbarProps, MessageSnackbarProps, nonNullable } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useMemo, useRef } from 'react'
 import { AddProductsToCartDocument, AddProductsToCartMutation } from './AddProductsToCart.gql'
@@ -22,30 +22,27 @@ import {
 } from './useFormAddProductsToCart'
 
 export type AddProductsToCartFormProps = {
-  // The props are actually used, but are passed through useThemeProps and that breaks react/no-unused-prop-types
-  // eslint-disable-next-line react/no-unused-prop-types
   children: React.ReactNode
-  // eslint-disable-next-line react/no-unused-prop-types
   sx?: SxProps<Theme>
-  // eslint-disable-next-line react/no-unused-prop-types
   redirect?: RedirectType
-
+  snackbarProps?: AddProductsToCartSnackbarProps
+
+  /**
+   * @deprecated use snackbarProps.errorSnackbar instead
+   */
+  errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
+  /**
+   * @deprecated use snackbarProps.successSnackbar instead
+   */
+  successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
+  /**
+   * @deprecated use snackbarProps.disableSuccessSnackbar instead
+   */
   disableSuccessSnackbar?: boolean
-} & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFields> &
-  AddProductsToCartSnackbarProps
+} & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFields>
 
 const name = 'AddProductsToCartForm'
 
-/** Expose the component to be exendable in your theme.components */
-declare module '@mui/material/styles/components' {
-  interface Components {
-    AddProductsToCartForm?: Pick<
-      ExtendableComponent<Omit<AddProductsToCartFormProps, 'children'>>,
-      'defaultProps'
-    >
-  }
-}
-
 /**
  * Component that handles adding products to the cart. Used on the product page, but can be used for
  * any product listing.
@@ -66,8 +63,9 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
     disableSuccessSnackbar,
     errorSnackbar,
     successSnackbar,
+    snackbarProps,
     ...formProps
-  } = useThemeProps({ name, props })
+  } = props
   const router = useRouter()
   const client = useApolloClient()
   const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>>>()
@@ -90,7 +88,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
         const requestData = {
           cartId,
           cartItems: cartItems
-            .filter((cartItem) => cartItem.sku)
+            .filter((cartItem) => cartItem.sku && cartItem.quantity !== 0)
             .map(({ customizable_options, ...cartItem }) => {
               const options = Object.values(customizable_options ?? {})
                 .flat(1)
@@ -103,7 +101,12 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
                   ...(cartItem.selected_options ?? []).filter(Boolean),
                   ...options,
                 ],
-                entered_options: cartItem.entered_options?.filter((option) => option?.value),
+                entered_options: [
+                  ...(cartItem.entered_options
+                    ?.filter((option) => option?.value)
+                    .filter(nonNullable)
+                    .map((option) => ({ uid: option.uid, value: `${option?.value}` })) ?? []),
+                ],
               }
             }),
         }
@@ -155,12 +158,12 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
       <Box component='form' onSubmit={submit} noValidate sx={sx} className={name}>
         {children}
       </Box>
-      {disableSuccessSnackbar ? null : (
-        <AddProductsToCartSnackbar
-          errorSnackbar={errorSnackbar}
-          successSnackbar={successSnackbar}
-        />
-      )}
+      <AddProductsToCartSnackbar
+        errorSnackbar={errorSnackbar}
+        successSnackbar={successSnackbar}
+        disableSuccessSnackbar={disableSuccessSnackbar}
+        {...snackbarProps}
+      />
     </AddProductsToCartContext.Provider>
   )
 }

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -6,12 +6,13 @@ import {
   ErrorSnackbarProps,
   iconChevronRight,
   IconSvg,
+  ListFormat,
   MessageSnackbar,
   MessageSnackbarProps,
   nonNullable,
   useLocale,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Plural, Trans } from '@lingui/macro'
 import { useMemo } from 'react'
 import { findAddedItems } from './findAddedItems'
 import { toUserErrors } from './toUserErrors'
@@ -20,18 +21,19 @@ import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 export type AddProductsToCartSnackbarProps = {
   errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
   successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
+  disableSuccessSnackbar?: boolean
 }
 
 export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps) {
-  const { errorSnackbar, successSnackbar } = props
+  const { errorSnackbar, successSnackbar, disableSuccessSnackbar } = props
   const { error, data, redirect, control, submittedVariables } = useFormAddProductsToCart()
   const formState = useFormState({ control })
 
-  const formatter = new Intl.ListFormat(useLocale(), { style: 'long', type: 'conjunction' })
-
+  const locale = useLocale()
   const userErrors = toUserErrors(data)
 
   const showSuccess =
+    !disableSuccessSnackbar &&
     !formState.isSubmitting &&
     formState.isSubmitSuccessful &&
     !error?.message &&
@@ -71,22 +73,29 @@ export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps)
               endIcon={<IconSvg src={iconChevronRight} />}
               sx={{ display: 'flex' }}
             >
-              <Trans id='View shopping cart' />
+              <Trans>View shopping cart</Trans>
             </Button>
           }
         >
-          <Trans
-            id={
-              addedItems.length === 1
-                ? '<0>{name}</0> has been added to your shopping cart!'
-                : '<0>{name}</0> have been added to your shopping cart!'
+          <Plural
+            value={addedItems.length}
+            one={
+              <Trans>
+                <ListFormat listStyle='long' type='conjunction'>
+                  {addedItems.map((item) => item?.itemInCart?.product.name).filter(nonNullable)}
+                </ListFormat>{' '}
+                has been added to your shopping cart
+              </Trans>
+            }
+            two={
+              <Trans>
+                <ListFormat listStyle='long' type='conjunction'>
+                  {addedItems.map((item) => item?.itemInCart?.product.name).filter(nonNullable)}
+                </ListFormat>{' '}
+                have been added to your shopping cart!
+              </Trans>
             }
-            components={{ 0: <strong /> }}
-            values={{
-              name: formatter.format(
-                addedItems.map((item) => item?.itemInCart?.product.name).filter(nonNullable),
-              ),
-            }}
+            other={<Trans># products have been added to your shopping cart!</Trans>}
           />
         </MessageSnackbar>
       )}

package/components/AddProductsToCart/UseAddProductsToCartAction.graphql

@@ -1,4 +1,4 @@
-fragment UseAddProductsToCartAction on ProductInterface @injectable {
+fragment UseAddProductsToCartAction on ProductInterface {
   uid
   sku
   only_x_left_in_stock

package/components/AddProductsToCart/findAddedItems.ts

@@ -47,10 +47,7 @@ export function findAddedItems(
         }
       }
 
-      const customizable_options = isTypename(cartItem, ['ConfigurableCartItem'])
-        ? cartItem.configurable_customizable
-        : cartItem.customizable_options
-
+      const { customizable_options } = cartItem
       const matchEntered = filterNonNullableKeys(itemVariable.entered_options).every(
         (requestOption) =>
           customizable_options.find(

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -68,7 +68,8 @@ export function useAddProductsToCartAction(
       if (process.env.NODE_ENV !== 'production') {
         if (!sku) console.warn(`You must provide a 'sku' to useAddProductsToCartAction`)
       }
-      setValue(`cartItems.${index}.sku`, sku ?? '')
+      // TODO should be removed, setting the form value on submission isn't a great idea.
+      if (!getValues(`cartItems.${index}.sku`)) setValue(`cartItems.${index}.sku`, sku ?? '')
       startTransition(() => {
         onClickIncoming?.(e)
       })

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -1,11 +1,10 @@
 import { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
 import { createContext, useContext } from 'react'
-import type { LiteralUnion } from 'type-fest'
+import type { Simplify, LiteralUnion } from 'type-fest'
 import {
   AddProductsToCartMutation,
   AddProductsToCartMutationVariables,
 } from './AddProductsToCart.gql'
-import { Simplify } from 'type-fest'
 
 export type RedirectType = LiteralUnion<'added' | undefined | false, `/${string}`>
 

package/components/JsonLdProduct/JsonLdProduct.graphql

@@ -1,4 +1,4 @@
-fragment JsonLdProduct on ProductInterface @inject(into: ["ProductPageItem"]) @injectable {
+fragment JsonLdProduct on ProductInterface @inject(into: ["ProductPageItem"]) {
   uid
   name
   sku

package/components/JsonLdProduct/ProductPageJsonLd.tsx

@@ -13,5 +13,5 @@ export function ProductPageJsonLd<T extends { '@type': string }, P extends JsonL
   props: ProductPageJsonLdProps<T, P>,
 ) {
   const { product, render } = props
-  return <JsonLd<T> item={render(product)} />
+  return <JsonLd<T> item={render(product)} keyVal='product-jsonld' />
 }

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -9,7 +9,7 @@ import {
   IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/macro'
 import { Divider, Typography, ButtonProps, Box, Alert } from '@mui/material'
 import React from 'react'
 import { ProductAddToCartDocument, ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
@@ -93,7 +93,7 @@ export function ProductAddToCart(
           })}
           {...buttonProps}
         >
-          <Trans id='Add to Cart' />
+          <Trans>Add to Cart</Trans>
         </Button>
         {additionalButtons}
       </Box>
@@ -125,15 +125,13 @@ export function ProductAddToCart(
             color='secondary'
             endIcon={<IconSvg src={iconChevronRight} />}
           >
-            <Trans id='View shopping cart' />
+            <Trans>View shopping cart</Trans>
           </Button>
         }
       >
-        <Trans
-          id='<0>{name}</0> has been added to your shopping cart!'
-          components={{ 0: <strong /> }}
-          values={{ name }}
-        />
+        <Trans>
+          <strong>{name}</strong> has been added to your shopping cart!
+        </Trans>
       </MessageSnackbar>
     </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/PriceSlider.tsx

@@ -1,10 +1,9 @@
 import { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent, filterNonNullableKeys } from '@graphcommerce/next-ui'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Slider, SxProps, Theme, useEventCallback } from '@mui/material'
 import { useCallback } from 'react'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export type PriceSliderProps = {
   value: FilterRangeTypeInput | null | undefined

package/components/ProductFiltersPro/ProductFilterEqualChip.tsx

@@ -12,7 +12,7 @@ import { Box } from '@mui/material'
 import { useMemo } from 'react'
 import { isFilterTypeEqual } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterEqualChip(props: FilterProps) {
   const { aggregation } = props

package/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -14,7 +14,7 @@ import { Box } from '@mui/material'
 import { useMemo } from 'react'
 import { isFilterTypeEqual } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterEqualSection(props: FilterProps) {
   const { aggregation } = props
@@ -66,7 +66,7 @@ export function ProductFilterEqualSection(props: FilterProps) {
           multiple
           layout='list'
           variant='default'
-          size='medium'
+          size='responsive'
           items={items}
           showMoreAfter={4}
         />

package/components/ProductFiltersPro/ProductFilterRangeChip.tsx

@@ -5,7 +5,7 @@ import { ChipOverlayOrPopper, extendableComponent } from '@graphcommerce/next-ui
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
 import { getMinMaxFromOptions, PriceSlider } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 const { classes } = extendableComponent('FilterRangeType', ['root', 'container', 'slider'] as const)
 

package/components/ProductFiltersPro/ProductFilterRangeSection.tsx

@@ -5,7 +5,7 @@ import { Trans } from '@lingui/react'
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
 import { PriceSlider, getMinMaxFromOptions } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterRangeSection(props: FilterProps) {
   const { aggregation } = props