@graphcommerce/magento-product 8.1.0-canary.8 → 9.0.0-canary.100

package/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx

@@ -1,21 +1,17 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { ActionCardItemBase, ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import {
-  ActionCard,
-  ActionCardAccordion,
-  ActionCardItemBase,
-  ActionCardListForm,
-  Button,
-} from '@graphcommerce/next-ui'
+import { ActionCard, ActionCardAccordion, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
-export type ProductFiltersProLimitSectionProps = Record<string, unknown>
+export type ProductFiltersProLimitSectionProps = { sx?: SxProps<Theme> }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSectionProps) {
+  const { sx } = props
   const { form } = useProductFiltersPro()
   const { control } = form
   const activePageSize = useWatch({ control, name: 'pageSize' })
@@ -38,6 +34,7 @@ export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSecti
 
   return (
     <ActionCardAccordion
+      sx={sx}
       defaultExpanded={!!activePageSize}
       summary={<Trans id='Per page' />}
       details={
@@ -48,7 +45,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

@@ -1,9 +1,5 @@
-import {
-  ActionCard,
-  ActionCardListForm,
-  ChipOverlayOrPopper,
-  ChipOverlayOrPopperProps,
-} from '@graphcommerce/next-ui'
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import { ActionCard, ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
@@ -15,10 +11,12 @@ 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)
 
+  if ((options.length ?? 0) <= 1) return null
+
   return (
     <ChipOverlayOrPopper
       {...rest}

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -1,7 +1,5 @@
 import { SortEnum } from '@graphcommerce/graphql-mesh'
-import { IconSvg } from '@graphcommerce/next-ui'
-import * as IconArrowDown from '@graphcommerce/next-ui/icons/arrow-down.svg'
-import * as IconArrowUp from '@graphcommerce/next-ui/icons/arrow-up.svg'
+import { IconSvg, iconArrowDown, iconArrowUp } from '@graphcommerce/next-ui'
 
 type Props = {
   sortDirection: SortEnum | null
@@ -10,7 +8,7 @@ type Props = {
 export function ProductFiltersProSortDirectionArrow({ sortDirection }: Props) {
   return (
     <IconSvg
-      src={sortDirection === 'ASC' || sortDirection === null ? IconArrowUp : IconArrowDown}
+      src={sortDirection === 'ASC' || sortDirection === null ? iconArrowUp : iconArrowDown}
       sx={{ display: 'flex' }}
     />
   )

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,16 +1,24 @@
-import { ActionCard, ActionCardAccordion, ActionCardListForm, Button } from '@graphcommerce/next-ui'
+import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
+import { ActionCard, ActionCardAccordion, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
 
-export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps
+export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps & {
+  sx?: SxProps<Theme>
+}
 
 export function ProductFiltersProSortSection(props: ProductFiltersProSortSectionProps) {
+  const { sx } = props
   const { form } = useProductFiltersPro()
   const { options, showReset, selected } = useProductFiltersProSort(props)
 
+  if ((options.length ?? 0) <= 1) return null
+
   return (
     <ActionCardAccordion
+      sx={sx}
       defaultExpanded={selected}
       summary={<Trans id='Sort By' />}
       details={
@@ -19,7 +27,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

@@ -1,11 +1,20 @@
 export * from './ProductFilterEqualChip'
+export * from './ProductFilterEqualSection'
 export * from './ProductFilterRangeChip'
+export * from './ProductFilterRangeSection'
 export * from './ProductFiltersPro'
+export * from './ProductFiltersProAggregations'
 export * from './ProductFiltersProAllFiltersChip'
 export * from './ProductFiltersProAllFiltersSidebar'
+export * from './ProductFiltersProCategorySection'
 export * from './ProductFiltersProChips'
 export * from './ProductFiltersProClearAll'
 export * from './ProductFiltersProLayoutSidebar'
 export * from './ProductFiltersProLimitChip'
 export * from './ProductFiltersProLimitSection'
 export * from './ProductFiltersProSortChip'
+export * from './ProductFiltersProSortDirectionArrow'
+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/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -27,7 +27,7 @@ export function useProductFiltersProSort(props: ProductListActionSortProps) {
     () =>
       filterNonNullableKeys(sort_fields?.options).map((o) =>
         !category?.uid && o.value === 'position'
-          ? { value: 'relevance', label: i18n._('Relevance') }
+          ? { value: 'relevance', label: i18n._(/* i18n*/ 'Relevance') }
           : o,
       ),
     [category?.uid, sort_fields?.options],
@@ -36,12 +36,16 @@ export function useProductFiltersProSort(props: ProductListActionSortProps) {
 
   const conf = useQuery(StoreConfigDocument).data?.storeConfig
   const defaultSortBy = (
-    category ? category.default_sort_by ?? conf?.catalog_default_sort_by ?? 'position' : 'relevance'
+    category
+      ? (category.default_sort_by ?? conf?.catalog_default_sort_by ?? 'position')
+      : 'relevance'
   ) as ProductFilterParams['sort']
 
   const formSort = useWatch({ control, name: 'sort' })
   const formDirection = useWatch({ control, name: 'dir' })
-  const showReset = Boolean(formSort !== defaultSortBy || formDirection === 'DESC')
+  const showReset =
+    (formDirection !== null || formSort !== null) &&
+    Boolean(formSort !== defaultSortBy || formDirection === 'DESC')
   const selected = Boolean(params.sort && (params.sort !== defaultSortBy || params.dir === 'DESC'))
 
   const options = useMemo(

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,14 @@
-query ProductFilters($filters: ProductAttributeFilterInput = {}, $search: String) {
-  filters: products(filter: $filters, currentPage: 1, pageSize: 1, search: $search) {
+query ProductFilters(
+  $filters: ProductAttributeFilterInput = {}
+  $search: String
+  $context: InContextInput
+  $pageSize: Int = 1
+) {
+  filters: products(filter: $filters, currentPage: 1, pageSize: $pageSize, search: $search)
+    @inContext(context: $context) {
+    page_info {
+      total_pages
+    }
     ...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/ProductListFilters/ProductListFilters.tsx

@@ -1,5 +1,5 @@
 import { ChipMenuProps } from '@graphcommerce/next-ui'
-import { FilterTypes } from '../ProductListItems/filterTypes'
+import { FilterTypes } from '../ProductListItems/getFilterTypes'
 import { FilterCheckboxType } from './FilterCheckboxType'
 import { FilterEqualType } from './FilterEqualType'
 import { FilterRangeType } from './FilterRangeType'
@@ -23,22 +23,16 @@ export function ProductListFilters(props: ProductFiltersProps) {
           return null
 
         switch (filterTypes[aggregation.attribute_code]) {
-          case 'FilterEqualTypeInput':
-            if (
-              aggregation.options?.[0]?.label === '0' ||
-              aggregation.options?.[1]?.label === '0' ||
-              aggregation.options?.[0]?.label === '1' ||
-              aggregation.options?.[1]?.label === '1'
-            ) {
-              return (
-                <FilterCheckboxType
-                  key={aggregation.attribute_code}
-                  {...aggregation}
-                  {...chipMenuProps}
-                />
-              )
-            }
-
+          case 'BOOLEAN':
+            return (
+              <FilterCheckboxType
+                key={aggregation.attribute_code}
+                {...aggregation}
+                {...chipMenuProps}
+              />
+            )
+          case 'SELECT':
+          case 'MULTISELECT':
             return (
               <FilterEqualType
                 key={aggregation.attribute_code}
@@ -46,8 +40,7 @@ export function ProductListFilters(props: ProductFiltersProps) {
                 {...chipMenuProps}
               />
             )
-
-          case 'FilterRangeTypeInput':
+          case 'PRICE':
             return (
               <FilterRangeType
                 key={aggregation.attribute_code}
@@ -56,6 +49,7 @@ export function ProductListFilters(props: ProductFiltersProps) {
               />
             )
         }
+
         // console.log(
         //   'Filter not recognized',
         //   aggregation.attribute_code,

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -97,7 +97,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
           top: theme.page.vertical,
           zIndex: 9,
           margin: '0 auto',
-          maxWidth: `calc(100% - 96px - ${theme.spacings.sm} * 2)`,
+
           [theme.breakpoints.down('md')]: {
             textAlign: 'center',
             maxWidth: 'unset',
@@ -136,8 +136,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
             className={classes.scroller}
             hideScrollbar
             sx={(theme) => ({
-              paddingLeft: theme.page.horizontal,
-              paddingRight: theme.page.horizontal,
+              px: theme.page.horizontal,
               paddingBottom: '1px',
               [theme.breakpoints.up('md')]: {
                 borderRadius: '99em',
@@ -145,7 +144,6 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
                 paddingRight: '8px',
               },
               py: '5px',
-
               columnGap: '6px',
               gridAutoColumns: 'min-content',
             })}

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

package/components/ProductListItems/ProductFilterTypes.graphql

@@ -0,0 +1,8 @@
+query ProductFilterTypes($filters: AttributeFilterInput!) {
+  attributesList(entityType: CATALOG_PRODUCT, filters: $filters) {
+    items {
+      code
+      frontend_input
+    }
+  }
+}