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

package/components/ProductFiltersPro/ProductFiltersProCategorySection.tsx

@@ -1,27 +1,36 @@
-import { UseCategoryTreeProps, useCategoryTree } from '@graphcommerce/magento-category'
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import {
+  CategoryTreeItem,
+  UseCategoryTreeProps,
+  useCategoryTree,
+} from '@graphcommerce/magento-category'
 import {
   ActionCard,
   ActionCardAccordion,
+  ActionCardAccordionProps,
   ActionCardList,
+  Button,
   IconSvg,
   iconChevronLeft,
   responsiveVal,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, SxProps, Theme } from '@mui/material'
-import { useRouter } from 'next/router'
+import { useProductFiltersPro } from './ProductFiltersPro'
 
-export type ProductFiltersCategorySectionProps = UseCategoryTreeProps & {
+export type ProductFiltersProCategoryAccordionProps = {
   hideTitle?: boolean
   sx?: SxProps<Theme>
-}
+  categoryTree: CategoryTreeItem[]
+  onChange: (uid: CategoryTreeItem) => void | Promise<void>
+} & Pick<ActionCardAccordionProps, 'defaultExpanded'>
 
-export function ProductFiltersProCategorySection(props: ProductFiltersCategorySectionProps) {
-  const { hideTitle, sx } = props
-  const router = useRouter()
-  const categoryTree = useCategoryTree(props)
+export function ProductFiltersProCategoryAccordion(props: ProductFiltersProCategoryAccordionProps) {
+  const { hideTitle, sx, categoryTree, onChange, defaultExpanded } = props
+  const { form } = useProductFiltersPro()
 
-  if (!categoryTree) return null
+  const name = `filters.category_uid.in` as const
+  const currentFilter = useWatch({ control: form.control, name })
 
   return (
     <ActionCardAccordion
@@ -30,41 +39,92 @@ export function ProductFiltersProCategorySection(props: ProductFiltersCategorySe
         sx,
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
-      defaultExpanded
+      defaultExpanded={defaultExpanded}
       summary={<Trans id='Categories' />}
+      right={
+        currentFilter && currentFilter.length > 0 ? (
+          <Button
+            color='primary'
+            onClick={(e) => {
+              e.stopPropagation()
+              form.setValue(name, null)
+            }}
+          >
+            <Trans id='Clear' />
+          </Button>
+        ) : undefined
+      }
       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}
+        <ActionCardList
+          size='responsive'
+          variant='default'
+          sx={{ mb: 2 }}
+          value={form.getValues('url')}
+          onChange={async (e, value) => {
+            const item = categoryTree.find((i) => i.value === value)
+            if (!item) return
+            await onChange(item)
+          }}
+        >
+          {categoryTree.map((item) => {
+            const indent = item.isBack ? 0 : item.indent + 1
+            return (
+              <ActionCard
+                key={item.value}
+                {...item}
+                size='responsive'
+                title={
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Box sx={{ marginRight: 1 }}>
+                      {item.isBack ? (
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                          <IconSvg src={iconChevronLeft} size='medium' />
+                          {item.title}
+                        </Box>
+                      ) : (
+                        item.title
+                      )}
+                    </Box>
+                    {item.count !== null && (
+                      <Box sx={{ typography: 'caption', color: 'text.disabled' }}>
+                        ({item.count})
+                      </Box>
+                    )}
                   </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)}
-            />
-          ))}
+                }
+                sx={{
+                  '&.sizeSmall': { pl: responsiveVal(8 * indent, 12 * indent) },
+                  '&.sizeMedium': { pl: responsiveVal(10 * indent, 14 * indent) },
+                  '&.sizeLarge': { pl: responsiveVal(12 * indent, 16 * indent) },
+                  '&.sizeResponsive': { pl: responsiveVal(8 * indent, 16 * indent) },
+                  '& .ActionCard-title.selected': { fontWeight: 'bold' },
+                }}
+              />
+            )
+          })}
         </ActionCardList>
       }
-      right={undefined}
+    />
+  )
+}
+
+export type ProductFiltersCategorySectionProps = UseCategoryTreeProps &
+  Omit<ProductFiltersProCategoryAccordionProps, 'categoryTree' | 'onChange'>
+
+export function ProductFiltersProCategorySection(props: ProductFiltersCategorySectionProps) {
+  const categoryTree = useCategoryTree(props)
+  const { form, submit } = useProductFiltersPro()
+
+  if (!categoryTree) return null
+  return (
+    <ProductFiltersProCategoryAccordion
+      categoryTree={categoryTree}
+      {...props}
+      onChange={async (item) => {
+        form.setValue('url', item.value)
+        form.setValue('filters', { category_uid: { in: [item?.uid] } })
+        await submit()
+      }}
     />
   )
 }

package/components/ProductFiltersPro/ProductFiltersProClearAll.tsx

@@ -1,11 +1,9 @@
 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'
+import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
+import { useProductFilterProHasFiltersApplied } from './useProductFiltersProHasFiltersApplied'
 
 type AllFiltersSidebar = ProductFiltersProAggregationsProps & {
   sx?: SxProps<Theme>
@@ -14,18 +12,8 @@ type AllFiltersSidebar = ProductFiltersProAggregationsProps & {
 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
+  const clearAll = useProductFiltersProClearAllAction()
+  const hasFilters = useProductFilterProHasFiltersApplied()
 
   if (!hasFilters) return null
 

package/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx

@@ -51,7 +51,7 @@ export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSecti
           control={control}
           layout='list'
           variant='default'
-          size='medium'
+          size='responsive'
           items={options}
         />
       }

package/components/ProductFiltersPro/ProductFiltersProNoResults.tsx

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

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

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

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -24,7 +24,7 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
           name='sort'
           layout='list'
           variant='default'
-          size='medium'
+          size='responsive'
           render={ActionCard}
           items={options}
         />

package/components/ProductFiltersPro/activeAggregations.ts

@@ -2,21 +2,17 @@ import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import { ProductFilterParams } from '../ProductListItems/filterTypes'
 
-export function excludeCategory(
-  aggregations: ProductListFiltersFragment['aggregations'],
-  params: ProductFilterParams,
-) {
-  return filterNonNullableKeys(aggregations).filter(({ attribute_code }) => {
-    if (params.search !== null) return true
-    return attribute_code !== 'category_id' && attribute_code !== 'category_uid'
-  })
+export function excludeCategory(aggregations: ProductListFiltersFragment['aggregations']) {
+  return filterNonNullableKeys(aggregations).filter(
+    ({ attribute_code }) => attribute_code !== 'category_id' && attribute_code !== 'category_uid',
+  )
 }
 
 export function activeAggregations(
   aggregations: ProductListFiltersFragment['aggregations'],
   params: ProductFilterParams,
 ) {
-  return excludeCategory(aggregations, params).filter(
+  return excludeCategory(aggregations).filter(
     ({ attribute_code }) =>
       params.filters[attribute_code]?.from ||
       params.filters[attribute_code]?.to ||

package/components/ProductFiltersPro/applyAggregationCount.ts

@@ -27,14 +27,20 @@ export function applyAggregationCount(
 
     return {
       ...aggregation,
-      options: filterNonNullableKeys(aggregation?.options)?.map((option) => {
-        if (applied && filterCount === 1) return option
-        if (applied && filterCount > 1) return { ...option, count: null }
-        return {
-          ...option,
-          count: appliedAggregation?.options?.find((o) => o?.value === option?.value)?.count ?? 0,
-        }
-      }),
+      options: filterNonNullableKeys(aggregation?.options)
+        ?.map((option) => {
+          if (applied && filterCount === 1) return option
+          if (applied && filterCount > 1) return { ...option, count: null }
+          return {
+            ...option,
+            count: appliedAggregation?.options?.find((o) => o?.value === option?.value)?.count ?? 0,
+          }
+        })
+        .sort((a, b) => {
+          if (a.count === 0) return 1
+          if (b.count === 0) return -1
+          return 0
+        }),
     }
   })
 }

package/components/ProductFiltersPro/index.ts

@@ -3,6 +3,7 @@ export * from './ProductFilterEqualSection'
 export * from './ProductFilterRangeChip'
 export * from './ProductFilterRangeSection'
 export * from './ProductFiltersPro'
+export * from './ProductFiltersProAggregations'
 export * from './ProductFiltersProAllFiltersChip'
 export * from './ProductFiltersProAllFiltersSidebar'
 export * from './ProductFiltersProCategorySection'
@@ -13,5 +14,7 @@ export * from './ProductFiltersProLimitChip'
 export * from './ProductFiltersProLimitSection'
 export * from './ProductFiltersProSortChip'
 export * from './ProductFiltersProSortDirectionArrow'
-export * from './ProductFiltersProAggregations'
 export * from './ProductFiltersProSortSection'
+export * from './useProductFiltersProClearAllAction'
+export * from './useProductFiltersProHasFiltersApplied'
+export * from './ProductFiltersProNoResults'

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

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

package/components/ProductFiltersPro/useProductFiltersProHasFiltersApplied.ts

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

package/components/ProductList/ProductList.graphql

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

package/components/ProductListCount/ProductListCount.tsx

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

package/components/ProductListFilters/ProductFilters.graphql

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

package/components/ProductListFilters/ProductListFilters.graphql

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

package/components/ProductListItem/ProductDiscountLabel.tsx

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

package/components/ProductListItem/ProductListItem.tsx

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

package/components/ProductListItem/ProductListItemTitleAndPrice.tsx

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