@graphcommerce/magento-product 7.0.0-canary.21 → 7.0.0

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,7 +1,9 @@
 import { useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
 import { useMemoObject } from '@graphcommerce/next-ui'
-import React, { BaseSyntheticEvent, createContext, useContext, useEffect, useMemo } from 'react'
+import { useEventCallback } from '@mui/material'
+import React, { BaseSyntheticEvent, createContext, useContext, useMemo } from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
+import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import {
   ProductFilterParams,
   ProductListParams,
@@ -9,7 +11,12 @@ import {
   toProductListParams,
 } from '../ProductListItems/filterTypes'
 
-type FilterFormContextProps = {
+type DataProps = {
+  filterTypes: Record<string, string | undefined>
+  appliedAggregations?: ProductListFiltersFragment['aggregations']
+} & ProductListFiltersFragment
+
+type FilterFormContextProps = DataProps & {
   /**
    * Watch and formState are known to cause performance issues.
    *
@@ -32,30 +39,40 @@ export const useProductFiltersPro = () => {
 export type FilterFormProviderProps = Omit<
   UseFormProps<ProductFilterParams>,
   'values' | 'defaultValues'
-> & { children: React.ReactNode; params: ProductListParams }
+> & {
+  children: React.ReactNode
+  params: ProductListParams
+} & DataProps
 
 export function ProductFiltersPro(props: FilterFormProviderProps) {
-  const { children, params, ...formProps } = props
+  const { children, params, aggregations, appliedAggregations, filterTypes, ...formProps } = props
 
-  const fitlerParams = useMemoObject(toFilterParams(params))
-  const form = useForm<ProductFilterParams>({
-    values: fitlerParams,
-    ...formProps,
-  })
-  const { handleSubmit } = form
+  const defaultValues = useMemoObject(toFilterParams(params))
+  const form = useForm<ProductFilterParams>({ defaultValues, ...formProps })
 
   const push = useProductListLinkReplace({ scroll: false })
-  const submit = handleSubmit(async (formValues) =>
-    push({ ...toProductListParams(formValues), currentPage: 1 }),
+  const submit = useEventCallback(
+    form.handleSubmit(async (formValues) =>
+      push({ ...toProductListParams(formValues), currentPage: 1 }),
+    ),
+  )
+
+  const filterFormContext: FilterFormContextProps = useMemo(
+    () => ({
+      form,
+      params: defaultValues,
+      submit,
+      appliedAggregations,
+      filterTypes,
+      aggregations,
+    }),
+    [form, defaultValues, submit, appliedAggregations, filterTypes, aggregations],
   )
 
   return (
-    <FilterFormContext.Provider
-      value={useMemo(() => ({ form, params: fitlerParams, submit }), [form, fitlerParams, submit])}
-    >
-      <form noValidate onSubmit={submit}>
-        {children}
-      </form>
+    <FilterFormContext.Provider value={filterFormContext}>
+      <form noValidate onSubmit={submit} id='products' />
+      {children}
     </FilterFormContext.Provider>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -10,14 +10,12 @@ export type FilterProps = {
 export type FilterRenderer = Record<string, React.FC<FilterProps>>
 
 export type ProductFiltersProAggregationsProps = {
-  filterTypes: Record<string, string | undefined>
   renderer?: FilterRenderer
-  appliedAggregations?: ProductListFiltersFragment['aggregations']
-} & ProductListFiltersFragment
+}
 
 export function ProductFiltersProAggregations(props: ProductFiltersProAggregationsProps) {
-  const { aggregations, appliedAggregations, filterTypes, renderer } = props
-  const { params } = useProductFiltersPro()
+  const { renderer } = props
+  const { params, aggregations, appliedAggregations, filterTypes } = useProductFiltersPro()
 
   return (
     <>
@@ -31,8 +29,9 @@ export function ProductFiltersProAggregations(props: ProductFiltersProAggregatio
         const Component = renderer?.[filterType]
         if (!Component) {
           if (process.env.NODE_ENV === 'development') {
+            // eslint-disable-next-line no-console
             console.log(
-              `The renderer for fitlerType ${filterType} can not be found, please add it to the renderer prop: renderer={{ ${filterType}: (props) => <>MYRenderer</> }}}}`,
+              `The renderer for filterType ${filterType} can not be found, please add it to the renderer prop: renderer={{ ${filterType}: (props) => <>MYRenderer</> }}}}`,
             )
           }
           return null

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -1,12 +1,5 @@
-import {
-  ChipOverlayOrPopper,
-  ChipOverlayOrPopperProps,
-  filterNonNullableKeys,
-} from '@graphcommerce/next-ui'
+import { ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box } from '@mui/material'
-import { activeAggregations } from './activeAggregations'
-import { applyAggregationCount } from './applyAggregationCount'
 import { ProductFilterEqualSection } from './ProductFilterEqualSection'
 import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import { useProductFiltersPro } from './ProductFiltersPro'
@@ -19,52 +12,44 @@ import {
   ProductFiltersProSortSection,
   ProductFiltersProSortSectionProps,
 } from './ProductFiltersProSortSection'
+import { activeAggregations } from './activeAggregations'
+import { applyAggregationCount } from './applyAggregationCount'
+import { useClearAllFiltersAction } from './useClearAllFiltersHandler'
 
-type AllFiltersChip = ProductFiltersProAggregationsProps &
+export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregationsProps &
   ProductFiltersProSortSectionProps &
   Omit<
     ChipOverlayOrPopperProps,
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
   >
 
-export function ProductFiltersProAllFiltersChip(props: AllFiltersChip) {
-  const {
-    filterTypes,
-    aggregations,
-    appliedAggregations: aggregationsCount,
-    sort_fields,
-    total_count,
-    renderer,
-    ...rest
-  } = props
+const defaultRenderer = {
+  FilterRangeTypeInput: ProductFilterRangeSection,
+  FilterEqualTypeInput: ProductFilterEqualSection,
+}
+
+export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFiltersChipProps) {
+  const { sort_fields, total_count, renderer, ...rest } = props
 
-  const { form, submit, params } = useProductFiltersPro()
+  const { submit, params, aggregations, appliedAggregations } = useProductFiltersPro()
   const { sort } = params
 
   const activeFilters = activeAggregations(
-    applyAggregationCount(aggregations, aggregationsCount, params),
+    applyAggregationCount(aggregations, appliedAggregations, params),
     params,
   ).map(({ label }) => label)
 
   const allFilters = [...activeFilters, sort].filter(Boolean)
   const hasFilters = allFilters.length > 0
 
+  const clearAll = useClearAllFiltersAction()
+
   return (
     <ChipOverlayOrPopper
       label={<Trans id='All filters' />}
       chipProps={{ variant: 'outlined' }}
       onApply={submit}
-      onReset={
-        hasFilters
-          ? () => {
-              form.setValue('filters', { category_uid: params.filters.category_uid })
-              form.setValue('currentPage', 1)
-              form.setValue('sort', null)
-              form.setValue('dir', null)
-              return submit()
-            }
-          : undefined
-      }
+      onReset={hasFilters ? clearAll : undefined}
       onClose={submit}
       selectedLabel={allFilters}
       selected={hasFilters}
@@ -73,19 +58,11 @@ export function ProductFiltersProAllFiltersChip(props: AllFiltersChip) {
       {...rest}
     >
       {() => (
-        <Box sx={(theme) => ({ display: 'grid', rowGap: theme.spacings.sm })}>
+        <>
           <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
           <ProductFiltersProLimitSection />
-          <ProductFiltersProAggregations
-            filterTypes={filterTypes}
-            aggregations={aggregations}
-            appliedAggregations={aggregationsCount}
-            renderer={{
-              FilterRangeTypeInput: ProductFilterRangeSection,
-              FilterEqualTypeInput: ProductFilterEqualSection,
-            }}
-          />
-        </Box>
+          <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
+        </>
       )}
     </ChipOverlayOrPopper>
   )

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

@@ -0,0 +1,32 @@
+import { Box, SxProps, Theme } from '@mui/material'
+import { ProductFilterEqualSection } from './ProductFilterEqualSection'
+import { ProductFilterRangeSection } from './ProductFilterRangeSection'
+import {
+  ProductFiltersProAggregations,
+  ProductFiltersProAggregationsProps,
+} from './ProductFiltersProAggregations'
+import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
+import {
+  ProductFiltersProSortSection,
+  ProductFiltersProSortSectionProps,
+} from './ProductFiltersProSortSection'
+
+export type ProductFiltersProAllFiltersSidebarProps = ProductFiltersProAggregationsProps &
+  ProductFiltersProSortSectionProps & { sx?: SxProps<Theme> }
+
+const defaultRenderer = {
+  FilterRangeTypeInput: ProductFilterRangeSection,
+  FilterEqualTypeInput: ProductFilterEqualSection,
+}
+
+export function ProductFiltersProAllFiltersSidebar(props: ProductFiltersProAllFiltersSidebarProps) {
+  const { sort_fields, total_count, renderer, sx = [] } = props
+
+  return (
+    <Box sx={[{ display: { xs: 'none', md: 'grid' } }, ...(Array.isArray(sx) ? sx : [sx])]}>
+      <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
+      <ProductFiltersProLimitSection />
+      <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
+    </Box>
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProClearAll.tsx

@@ -0,0 +1,48 @@
+import { Button } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
+import { useProductFiltersPro } from './ProductFiltersPro'
+import { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
+import { activeAggregations } from './activeAggregations'
+import { applyAggregationCount } from './applyAggregationCount'
+import { useClearAllFiltersAction } from './useClearAllFiltersHandler'
+
+type AllFiltersSidebar = ProductFiltersProAggregationsProps & {
+  sx?: SxProps<Theme>
+}
+
+export function ProductFiltersProClearAll(props: AllFiltersSidebar) {
+  const { sx = [] } = props
+
+  const { params, aggregations, appliedAggregations } = useProductFiltersPro()
+  const { sort } = params
+
+  const clearAll = useClearAllFiltersAction()
+
+  const activeFilters = activeAggregations(
+    applyAggregationCount(aggregations, appliedAggregations, params),
+    params,
+  ).map(({ label }) => label)
+
+  const allFilters = [...activeFilters, sort].filter(Boolean)
+  const hasFilters = allFilters.length > 0
+
+  if (!hasFilters) return null
+
+  return (
+    <Button
+      sx={sx}
+      fullWidth
+      variant='pill'
+      size='medium'
+      color='inherit'
+      disableElevation
+      onClick={(e) => {
+        e.preventDefault()
+        return clearAll()
+      }}
+    >
+      <Trans id='Clear all filters' />
+    </Button>
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx

@@ -0,0 +1,100 @@
+import { FormAutoSubmit } from '@graphcommerce/ecommerce-ui'
+import { extendableComponent, StickyBelowHeader } from '@graphcommerce/next-ui'
+import { Box, Container, Theme, useMediaQuery } from '@mui/material'
+import React from 'react'
+import { useProductFiltersPro } from './ProductFiltersPro'
+
+export type ProductFiltersProLayoutSidebarProps = {
+  items: React.ReactNode
+  clearAll?: React.ReactNode
+  horizontalFilters: React.ReactNode
+  sidebarFilters?: React.ReactNode
+  count?: React.ReactNode
+  pagination: React.ReactNode
+  header?: React.ReactNode
+} & Partial<OwnerProps>
+
+type OwnerProps = {
+  headerPosition: 'before'
+}
+
+const name = 'ProductFiltersProLayoutSidebar' as const
+const parts = ['root', 'content'] as const
+const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
+
+export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSidebarProps) {
+  const {
+    items,
+    clearAll,
+    horizontalFilters,
+    count,
+    pagination,
+    sidebarFilters,
+    header,
+    headerPosition = 'before',
+  } = props
+
+  const { form, submit } = useProductFiltersPro()
+  const classes = withState({ headerPosition })
+
+  // We only need to auto-submit when the layout is not sidebar and we're viewing on desktop
+  const m = useMediaQuery<Theme>((t) => t.breakpoints.down('md'), { defaultMatches: false })
+  const autoSubmitDisabled = m
+
+  return (
+    <>
+      {headerPosition === 'before' ? header : null}
+
+      <FormAutoSubmit control={form.control} disabled={autoSubmitDisabled} submit={submit} />
+
+      <StickyBelowHeader sx={{ display: { md: 'none' } }}>{horizontalFilters}</StickyBelowHeader>
+
+      <Container
+        maxWidth={false}
+        className={classes.content}
+        sx={(theme) => ({
+          display: 'grid',
+          gridTemplate: {
+            xs: `
+              "beforeContent" auto
+              "items"         auto
+              "afterContent"  auto
+            `,
+            md: `
+              "topleft beforeContent" auto
+              "sidebar items"         min-content
+              "sidebar afterContent"  1fr
+              /300px   auto
+            `,
+          },
+
+          columnGap: { md: theme.spacings.md, xl: theme.spacings.xxl },
+
+          '& .ProductListItemsBase-root.sizeNormal': {
+            gridTemplateColumns: {
+              xs: 'repeat(2, 1fr)',
+              lg: 'repeat(3, 1fr)',
+              xl: 'repeat(4, 1fr)',
+            },
+          },
+        })}
+      >
+        <Box gridArea='topleft' sx={{ display: { xs: 'none', md: 'block' }, alignSelf: 'center' }}>
+          {clearAll}
+        </Box>
+        {sidebarFilters && (
+          <Box gridArea='sidebar' sx={{ display: { xs: 'none', md: 'block' } }}>
+            {sidebarFilters}
+          </Box>
+        )}
+
+        <Box gridArea='beforeContent' sx={{ mt: { md: 0 } }}>
+          {count}
+        </Box>
+        <Box gridArea='items'>{items}</Box>
+
+        {pagination && <Box gridArea='afterContent'>{pagination}</Box>}
+      </Container>
+    </>
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProLimitChip.tsx

@@ -50,8 +50,8 @@ export function ProductFiltersProLimitChip(props: ProductFiltersProLimitChipProp
       onReset={
         activePageSize
           ? () => {
-              form.resetField('pageSize', { defaultValue: null })
-              form.resetField('currentPage', { defaultValue: 1 })
+              form.setValue('pageSize', null)
+              form.setValue('currentPage', 1)
               return submit()
             }
           : undefined

package/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx

@@ -3,17 +3,18 @@ import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
   ActionCard,
+  ActionCardAccordion,
   ActionCardItemBase,
   ActionCardListForm,
-  SectionHeader,
+  Button,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Button } from '@mui/material'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
-export type ProductFiltersProLimitSectionProps = object
+export type ProductFiltersProLimitSectionProps = Record<string, unknown>
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSectionProps) {
   const { form } = useProductFiltersPro()
   const { control } = form
@@ -36,34 +37,36 @@ export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSecti
   if (options.length <= 1) return null
 
   return (
-    <Box sx={{ my: 2 }}>
-      <SectionHeader
-        labelLeft={<Trans id='Per page' />}
-        sx={{ mt: 0 }}
-        labelRight={
-          activePageSize ? (
-            <Button
-              variant='inline'
-              color='primary'
-              onClick={() => {
-                form.resetField('pageSize', { defaultValue: null })
-                form.resetField('currentPage', { defaultValue: 1 })
-              }}
-            >
-              <Trans id='Clear' />
-            </Button>
-          ) : undefined
-        }
-      />
-      <ActionCardListForm
-        control={control}
-        name='pageSize'
-        layout='list'
-        variant='default'
-        size='medium'
-        render={ActionCard}
-        items={options}
-      />
-    </Box>
+    <ActionCardAccordion
+      defaultExpanded={!!activePageSize}
+      summary={<Trans id='Per page' />}
+      details={
+        <ActionCardListForm
+          sx={{ mb: 2 }}
+          render={ActionCard}
+          name='pageSize'
+          control={control}
+          layout='list'
+          variant='default'
+          size='medium'
+          items={options}
+        />
+      }
+      right={
+        activePageSize ? (
+          <Button
+            variant='inline'
+            color='primary'
+            onClick={(e) => {
+              e.stopPropagation()
+              form.setValue('pageSize', null)
+              form.setValue('currentPage', 1)
+            }}
+          >
+            <Trans id='Clear' />
+          </Button>
+        ) : undefined
+      }
+    />
   )
 }

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -49,8 +49,9 @@ export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
       onReset={
         activeSort
           ? () => {
-              form.resetField('sort', { defaultValue: null })
-              form.resetField('currentPage', { defaultValue: 1 })
+              form.setValue('sort', null)
+              form.setValue('dir', null)
+              form.setValue('currentPage', 1)
               return submit()
             }
           : undefined

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -3,13 +3,12 @@ import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
   ActionCard,
+  ActionCardAccordion,
   ActionCardListForm,
   Button,
   filterNonNullableKeys,
-  SectionHeader,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box } from '@mui/material'
 import { useMemo } from 'react'
 import { ProductListSortFragment } from '../ProductListSort/ProductListSort.gql'
 import { useProductFiltersPro } from './ProductFiltersPro'
@@ -36,34 +35,35 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
   )
 
   return (
-    <Box sx={{ my: 2 }}>
-      <SectionHeader
-        labelLeft={<Trans id='Sort By' />}
-        sx={{ mt: 0 }}
-        labelRight={
-          activeSort ? (
-            <Button
-              variant='inline'
-              color='primary'
-              onClick={() => {
-                form.resetField('sort', { defaultValue: null })
-                form.resetField('currentPage', { defaultValue: 1 })
-              }}
-            >
-              <Trans id='Clear' />
-            </Button>
-          ) : undefined
-        }
-      />
-      <ActionCardListForm
-        control={control}
-        name='sort'
-        layout='list'
-        variant='default'
-        size='medium'
-        render={ActionCard}
-        items={options}
-      />
-    </Box>
+    <ActionCardAccordion
+      defaultExpanded={!!activeSort}
+      summary={<Trans id='Sort By' />}
+      details={
+        <ActionCardListForm
+          control={control}
+          name='sort'
+          layout='list'
+          variant='default'
+          size='medium'
+          render={ActionCard}
+          items={options}
+        />
+      }
+      right={
+        activeSort ? (
+          <Button
+            color='primary'
+            onClick={(e) => {
+              e.stopPropagation()
+              form.setValue('sort', null)
+              form.setValue('dir', null)
+              form.setValue('currentPage', 1)
+            }}
+          >
+            <Trans id='Clear' />
+          </Button>
+        ) : undefined
+      }
+    />
   )
 }

package/components/ProductFiltersPro/index.ts

@@ -2,7 +2,10 @@ export * from './ProductFilterEqualChip'
 export * from './ProductFilterRangeChip'
 export * from './ProductFiltersPro'
 export * from './ProductFiltersProAllFiltersChip'
+export * from './ProductFiltersProAllFiltersSidebar'
 export * from './ProductFiltersProChips'
+export * from './ProductFiltersProClearAll'
+export * from './ProductFiltersProLayoutSidebar'
 export * from './ProductFiltersProLimitChip'
 export * from './ProductFiltersProLimitSection'
 export * from './ProductFiltersProSortChip'

package/components/ProductFiltersPro/useClearAllFiltersHandler.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react'
+import { ProductFilterParams } from '../ProductListItems/filterTypes'
+import { useProductFiltersPro } from './ProductFiltersPro'
+
+export function useClearAllFiltersAction() {
+  const { form, submit } = useProductFiltersPro()
+  const { reset, getValues } = form
+
+  return useCallback(() => {
+    const currentValues = getValues()
+    const cleanedFilters: ProductFilterParams['filters'] = Object.fromEntries(
+      Object.keys(currentValues.filters).map((key) => [key, null]),
+    )
+
+    reset(
+      {
+        ...currentValues,
+        pageSize: null,
+        currentPage: 1,
+        dir: null,
+        sort: null,
+        filters: {
+          ...cleanedFilters,
+          category_uid: getValues('filters.category_uid'),
+        },
+      },
+      { keepSubmitCount: true, keepIsValid: true },
+    )
+    return submit()
+  }, [getValues, reset, submit])
+}