@graphcommerce/magento-product 8.1.0-canary.43 → 8.1.0-canary.45

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 }
+}

package/components/ProductListItems/filteredProductList.tsx

@@ -4,7 +4,10 @@ import type {
   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'
 
 export function parseParams(
   url: string,
@@ -73,3 +76,23 @@ export function extractUrlQuery(params?: { url: string[] }) {
   if (queryIndex > 0 && !query.length) return [undefined, undefined] as const
   return [url, query] as const
 }
+
+export function useRouterFilterParams(props: {
+  filterTypes?: FilterTypes | undefined
+  params?: ProductListParams
+}) {
+  const { filterTypes, params } = props
+  const router = useRouter()
+
+  const path = router.asPath.startsWith('/c/') ? router.asPath.slice(3) : router.asPath.slice(1)
+  const [url, query] = extractUrlQuery({ url: path.split('#')[0].split('/') })
+  if (!url || !query || !filterTypes) return { params, shallow: false }
+
+  const searchParam = url.startsWith('search') ? decodeURI(url.split('/')[1] ?? '') : null
+  const clientParams = parseParams(url, query, filterTypes, searchParam)
+
+  if (clientParams && !clientParams?.filters.category_uid && params?.filters.category_uid)
+    clientParams.filters.category_uid = params?.filters.category_uid
+
+  return { params: clientParams, shallow: !equal(params, clientParams) }
+}

package/components/ProductListItems/productListApplyCategoryDefaults.ts

@@ -1,13 +1,53 @@
-import { StoreConfigQuery } from '@graphcommerce/magento-store'
+import { cloneDeep, useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument, StoreConfigQuery } from '@graphcommerce/magento-store'
 import { CategoryDefaultFragment } from './CategoryDefault.gql'
 import { ProductListParams } from './filterTypes'
-import { cloneDeep } from '@graphcommerce/graphql'
+import { ProductListQueryVariables } from '../ProductList/ProductList.gql'
 
+export function useProductListApplyCategoryDefaults(
+  params: ProductListParams | undefined,
+  category: CategoryDefaultFragment | null | undefined,
+): ProductListQueryVariables | undefined {
+  const storeConfig = useQuery(StoreConfigDocument)
+
+  if (!params) return params
+
+  const variables = cloneDeep(params)
+  if (!variables.pageSize) variables.pageSize = storeConfig.data?.storeConfig?.grid_per_page ?? 12
+
+  if (Object.keys(params.sort).length === 0) {
+    const categorySort = category?.default_sort_by as keyof ProductListParams['sort']
+    const defaultSort = storeConfig.data?.storeConfig
+      ?.catalog_default_sort_by as keyof ProductListParams['sort']
+    if (categorySort) variables.sort = { [categorySort]: 'ASC' }
+    else if (defaultSort) variables.sort = { [defaultSort]: 'ASC' }
+  }
+
+  if (!variables.filters.category_uid?.in?.[0]) {
+    variables.filters.category_uid = { eq: category?.uid }
+  }
+
+  return variables
+}
+
+export async function productListApplyCategoryDefaults(
+  params: ProductListParams,
+  conf: StoreConfigQuery,
+  category:
+    | Promise<CategoryDefaultFragment | null | undefined>
+    | CategoryDefaultFragment
+    | null
+    | undefined,
+): Promise<ProductListQueryVariables>
 export async function productListApplyCategoryDefaults(
   params: ProductListParams | undefined,
   conf: StoreConfigQuery,
-  category: Promise<CategoryDefaultFragment | null | undefined>,
-) {
+  category:
+    | Promise<CategoryDefaultFragment | null | undefined>
+    | CategoryDefaultFragment
+    | null
+    | undefined,
+): Promise<ProductListQueryVariables | undefined> {
   if (!params) return params
 
   const newParams = cloneDeep(params)

package/components/ProductListItems/renderer.tsx

@@ -1,17 +1,23 @@
 import { TypeRenderer } from '@graphcommerce/next-ui'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
-import { ProductListItem, ProductListItemSkeleton } from '../ProductListItem/ProductListItem'
+import { ProductListItem } from '../ProductListItem/ProductListItem'
 
 type SkeletonType = { __typename: 'Skeleton'; uid: string }
 export type ProductListItemType = ProductListItemFragment | SkeletonType
 export type ProductListItemRenderer = TypeRenderer<ProductListItemFragment | SkeletonType>
 
+/**
+ * @deprecated Please use productListRenderer from the example directory instead.
+ */
 export const renderer: ProductListItemRenderer = {
-  Skeleton: ProductListItemSkeleton,
+  Skeleton: ProductListItem,
   SimpleProduct: ProductListItem,
   ConfigurableProduct: ProductListItem,
   BundleProduct: ProductListItem,
   VirtualProduct: ProductListItem,
   DownloadableProduct: ProductListItem,
   GroupedProduct: ProductListItem,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore GiftCardProduct is only available in Commerce
+  GiftCardProduct: ProductListItem,
 }

package/components/ProductListPagination/ProductListPagination.tsx

@@ -1,4 +1,4 @@
-import { PaginationExtended, Pagination } from '@graphcommerce/next-ui'
+import { NextLink, PaginationExtended, Pagination } from '@graphcommerce/next-ui'
 import { Link, PaginationProps } from '@mui/material'
 import { productListLink } from '../../hooks/useProductListLink'
 import { ProductListParams } from '../ProductListItems/filterTypes'
@@ -27,6 +27,8 @@ export function ProductListPagination({
             <Link
               {...btnProps}
               href={`${productListLink({ ...params, currentPage: btnProps.page })}${suffix}`}
+              component={NextLink}
+              shallow
               color='inherit'
             >
               {icon}

package/components/ProductListPrice/ProductListPrice.tsx

@@ -1,10 +1,12 @@
+import { InContextMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Typography, TypographyProps, Box } from '@mui/material'
+import { Typography, TypographyProps } from '@mui/material'
 import { ProductListPriceFragment } from './ProductListPrice.gql'
 
 export const productListPrice = extendableComponent('ProductListPrice', [
   'root',
+  'finalPrice',
   'discountPrice',
 ] as const)
 
@@ -18,19 +20,22 @@ export function ProductListPrice(props: ProductListPriceProps) {
   return (
     <Typography component='div' variant='body1' className={classes.root} sx={sx}>
       {regular_price.value !== final_price.value && (
-        <Box
+        <InContextMask
           component='span'
           sx={{
             textDecoration: 'line-through',
             color: 'text.disabled',
             marginRight: '8px',
           }}
+          skeleton={{ width: '3.5em' }}
           className={classes.discountPrice}
         >
           <Money {...regular_price} />
-        </Box>
+        </InContextMask>
       )}
-      <Money {...final_price} />
+      <InContextMask className={classes.finalPrice} component='span' skeleton={{ width: '3.5em' }}>
+        <Money {...final_price} />
+      </InContextMask>
     </Typography>
   )
 }

package/components/ProductListSuggestions/ProductListSuggestions.graphql

@@ -0,0 +1,5 @@
+fragment ProductListSuggestions on Products {
+  suggestions {
+    search
+  }
+}

package/components/ProductListSuggestions/ProductListSuggestions.tsx

@@ -0,0 +1,42 @@
+import { ListFormat, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { Box, Link } from '@mui/material'
+import { productListLinkFromFilter } from '../../hooks/useProductListLink'
+import { useProductFiltersPro } from '../ProductFiltersPro'
+import { ProductListSuggestionsFragment } from './ProductListSuggestions.gql'
+
+type ProductListSuggestionsProps = {
+  products: ProductListSuggestionsFragment
+}
+
+export function ProductListSuggestions(props: ProductListSuggestionsProps) {
+  const { products } = props
+
+  const { form, submit, params } = useProductFiltersPro()
+
+  if (!products.suggestions || !products.suggestions.length) return null
+
+  const list = (
+    <ListFormat listStyle='short' type='disjunction'>
+      {filterNonNullableKeys(products.suggestions).map((s) => (
+        <Link
+          key={s.search}
+          href={productListLinkFromFilter({ ...params, search: s.search })}
+          onClick={() => {
+            form.setValue('currentPage', 1)
+            form.setValue('search', s.search)
+            return submit()
+          }}
+        >
+          {s.search}
+        </Link>
+      ))}
+    </ListFormat>
+  )
+
+  return (
+    <Box>
+      <Trans>Did you mean: {list}</Trans>
+    </Box>
+  )
+}

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -26,7 +26,7 @@ export function ProductPageDescription(props: ProductPageDescriptionProps) {
   const { product, right, fontSize = 'subtitle1', maxWidth = 'lg', sx = [] } = props
 
   return (
-    <LazyHydrate>
+    <LazyHydrate height={500}>
       <ColumnTwoWithTop
         maxWidth={maxWidth}
         className={classes.root}

package/components/ProductPagePrice/ProductPagePrice.graphql

@@ -13,12 +13,6 @@ fragment ProductPagePrice on ProductInterface {
       final_price {
         ...Money
       }
-      fixed_product_taxes {
-        amount {
-          ...Money
-        }
-        label
-      }
     }
   }
   price_tiers {

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -1,7 +1,7 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { InContextMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
 import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
 import { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
@@ -13,7 +13,10 @@ import {
 export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector &
   UseCustomizableOptionPriceProps
 
-const { classes } = extendableComponent('ProductPagePrice', ['root', 'discountPrice'] as const)
+const { classes } = extendableComponent('ProductPagePrice', [
+  'finalPrice',
+  'discountPrice',
+] as const)
 
 export function ProductPagePrice(props: ProductPagePriceProps) {
   const { product, index = 0 } = props
@@ -24,23 +27,27 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
     getProductTierPrice(product, quantity) ?? product.price_range.minimum_price.final_price
 
   const priceValue = useCustomizableOptionPrice(props)
+  const regularPrice = product.price_range.minimum_price.regular_price
 
   return (
     <>
-      {product.price_range.minimum_price.regular_price.value !== price.value && (
-        <Box
+      {regularPrice.value !== price.value && (
+        <InContextMask
           component='span'
-          sx={{
-            textDecoration: 'line-through',
-            color: 'text.disabled',
-            marginRight: '8px',
-          }}
           className={classes.discountPrice}
+          skeleton={{ variant: 'text', sx: { width: '3em', transform: 'none' } }}
+          sx={[{ textDecoration: 'line-through', color: 'text.disabled', marginRight: '8px' }]}
         >
-          <Money {...product.price_range.minimum_price.regular_price} />
-        </Box>
+          <Money {...regularPrice} />
+        </InContextMask>
       )}
-      <Money {...price} value={priceValue} />
+      <InContextMask
+        component='span'
+        skeleton={{ variant: 'text', sx: { width: '3em', transform: 'none' } }}
+        className={classes.finalPrice}
+      >
+        <Money {...price} value={priceValue} />
+      </InContextMask>
     </>
   )
 }

package/components/ProductPagePrice/ProductPagePriceTiers.tsx

@@ -1,7 +1,8 @@
+import { InContextMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, Theme } from '@mui/material'
+import { SxProps, Theme } from '@mui/material'
 import { ProductPagePriceFragment } from './ProductPagePrice.gql'
 
 export type ProductPagePriceTiersProps = {
@@ -21,7 +22,7 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
   if (!priceTiers.length) return null
 
   return (
-    <Box sx={sx}>
+    <InContextMask sx={sx} variant='rectangular'>
       {priceTiers.map(({ quantity, final_price, discount }) => (
         <div key={quantity}>
           <Trans
@@ -31,6 +32,6 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
           />
         </div>
       ))}
-    </Box>
+    </InContextMask>
   )
 }

package/components/ProductWeight/ProductWeight.tsx

@@ -1,19 +1,22 @@
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { useNumberFormat } from '@graphcommerce/next-ui'
+import { UnitFormat, UnitFormatProps } from '@graphcommerce/next-ui'
 import { ProductWeightFragment } from './ProductWeight.gql'
 
-export function ProductWeight(props: ProductWeightFragment) {
-  const { weight } = props
+export type ProductWeightProps = Omit<UnitFormatProps, 'unit'> & { product: ProductWeightFragment }
+
+export function ProductWeight(props: ProductWeightProps) {
+  const { product, ...rest } = props
+
   const { data: conf } = useQuery(StoreConfigDocument)
-  const unit = conf?.storeConfig?.weight_unit ?? ''
 
-  const numberFormatter = useNumberFormat()
+  if (!product.weight) return null
+
+  const unit = conf?.storeConfig?.weight_unit === 'lbs' ? 'pound' : 'kilogram'
 
-  if (!numberFormatter || !weight) return null
   return (
-    <>
-      {numberFormatter.format(weight)} {unit}
-    </>
+    <UnitFormat unit={unit} {...rest}>
+      {product.weight}
+    </UnitFormat>
   )
 }

package/components/index.ts

@@ -41,3 +41,5 @@ export * from './ProductStaticPaths/getSitemapPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
 export * from './ProductWeight/ProductWeight'
 export * from './ProductListPrice'
+export * from './ProductListSuggestions/ProductListSuggestions'
+export * from './ProductListSuggestions/ProductListSuggestions.gql'

package/hooks/useProductList.ts

@@ -0,0 +1,123 @@
+import { debounce } from '@graphcommerce/ecommerce-ui'
+import {
+  ApolloQueryResult,
+  ApolloClient,
+  useQuery,
+  useInContextQuery,
+  getInContextInput,
+} from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { showPageLoadIndicator } from '@graphcommerce/next-ui'
+import { useEventCallback } from '@mui/material'
+import { FilterFormProviderProps, ProductFiltersDocument } from '../components'
+import {
+  ProductListDocument,
+  ProductListQuery,
+  ProductListQueryVariables,
+} from '../components/ProductList/ProductList.gql'
+import { CategoryDefaultFragment } from '../components/ProductListItems/CategoryDefault.gql'
+import { ProductListParams, toProductListParams } from '../components/ProductListItems/filterTypes'
+import { useRouterFilterParams } from '../components/ProductListItems/filteredProductList'
+import {
+  productListApplyCategoryDefaults,
+  useProductListApplyCategoryDefaults,
+} from '../components/ProductListItems/productListApplyCategoryDefaults'
+
+const productListQueries: Array<Promise<any>> = []
+
+type Next = Parameters<NonNullable<FilterFormProviderProps['handleSubmit']>>[1]
+
+export const prefetchProductList = debounce(
+  async (
+    variables: ProductListQueryVariables,
+    next: Next,
+    client: ApolloClient<any>,
+    shallow: boolean,
+  ) => {
+    if (!shallow) return next(shallow)
+
+    showPageLoadIndicator.set(true)
+
+    const context = getInContextInput(client)
+    const productList = client.query({
+      query: ProductListDocument,
+      variables: { ...variables, context },
+    })
+
+    const productFilters = client.query({
+      query: ProductFiltersDocument,
+      variables: {
+        filters: { category_uid: variables.filters?.category_uid },
+        search: variables.search,
+        context,
+      },
+    })
+
+    const both = Promise.all([productList, productFilters])
+
+    // Push the query to the queue array.
+    productListQueries.push(both)
+
+    // Since we're waiting here the form will be submitting for longer.
+    await both
+
+    const includes = productListQueries.includes(both)
+
+    // Remove all requests that are before the current request
+    const index = productListQueries.indexOf(both)
+    if (index > -1) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      productListQueries.splice(0, index + 1)
+    }
+
+    if (productListQueries.length === 0) showPageLoadIndicator.set(false)
+
+    if (includes) {
+      // todo: When navigating a category, it should now be a shallow route
+
+      // If the resolved request  is still in the array, it may be rendered (URL may be updated)
+      await next(shallow)
+    }
+
+    return undefined
+  },
+  200,
+  // the maxWait is now set to a somewhat shorter time than the average query time.
+  { leading: true, maxWait: 700, trailing: true },
+)
+
+/**
+ * - Handles shallow routing requests
+ * - Handles customer specific product list queries
+ */
+export function useProductList<
+  T extends ProductListQuery & {
+    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 storeConfig = useQuery(StoreConfigDocument).data
+
+  const handleSubmit: NonNullable<FilterFormProviderProps['handleSubmit']> = useEventCallback(
+    async (formValues, next) => {
+      if (!storeConfig) return
+
+      const vars = await productListApplyCategoryDefaults(
+        toProductListParams(formValues),
+        storeConfig,
+        category,
+      )
+
+      const shallowNow =
+        JSON.stringify(vars.filters?.category_uid) === JSON.stringify(params?.filters.category_uid)
+      await prefetchProductList(vars, next, result.client, shallowNow)
+    },
+  )
+
+  return { ...props, ...result.data, params, mask: result.mask, handleSubmit }
+}