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

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,83 +1,124 @@
 import { LazyHydrate, RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
-import { Box, BoxProps } from '@mui/material'
-import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import { Box, BoxProps, Breakpoint, Theme, useTheme } from '@mui/material'
 import { AddProductsToCartForm } from '../AddProductsToCart'
 import { ProductListItemProps } from '../ProductListItem/ProductListItem'
+import { ProductListItemsFragment } from './ProductListItems.gql'
 import { ProductListItemRenderer } from './renderer'
 
 type ComponentState = {
   size?: 'normal' | 'small'
 }
 
-export type ProductItemsGridProps = {
-  items?:
-    | Array<(ProductListItemFragment & ProductListItemProps) | null | undefined>
-    | null
-    | undefined
+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 = ProductListItemsFragment & {
   renderers: ProductListItemRenderer
   loadingEager?: number
   title: string
   sx?: BoxProps['sx']
+  columns?: ((theme: Theme) => ColumnsConfig) | ColumnsConfig
+  containerRef?: React.Ref<HTMLDivElement>
 } & Pick<ProductListItemProps, 'onClick' | 'titleComponent'> &
   ComponentState
 
 const slots = ['root'] as const
-const name = 'ProductListItemsBase' as const
+const name = 'ProductListItemsBase'
 
 const { withState } = extendableComponent<ComponentState, typeof name, typeof slots>(name, slots)
 
 export function ProductListItemsBase(props: ProductItemsGridProps) {
   const {
     items,
+    containerRef,
     sx = [],
     renderers,
     loadingEager = 0,
     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 (
     <AddProductsToCartForm>
       <Box
+        ref={containerRef}
         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
@@ -57,7 +52,7 @@ export type AnyFilterType =
 export function isFilterTypeEqual(filter?: unknown): filter is FilterEqualTypeInput {
   return Boolean(
     filter &&
-      ('in' in (filter as FilterEqualTypeInput) || 'from' in (filter as FilterEqualTypeInput)),
+      ('in' in (filter as FilterEqualTypeInput) || 'eq' in (filter as FilterEqualTypeInput)),
   )
 }
 
@@ -72,4 +67,16 @@ 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 || value.eq)
+      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

@@ -1,10 +1,13 @@
 import type {
   FilterEqualTypeInput,
-  FilterMatchTypeInput,
   FilterRangeTypeInput,
   SortEnum,
 } from '@graphcommerce/graphql-mesh'
-import { FilterTypes, ProductListParams } from './filterTypes'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { equal } from '@wry/equality'
+import { useRouter } from 'next/router'
+import { ProductListParams } from './filterTypes'
+import { FilterTypes } from './getFilterTypes'
 
 export function parseParams(
   url: string,
@@ -12,54 +15,58 @@ export function parseParams(
   filterTypes: FilterTypes,
   search: string | null = null,
 ): ProductListParams | undefined {
-  const categoryVariables: ProductListParams = { url, filters: {}, sort: {}, search }
+  const productListParams: ProductListParams = { url, filters: {}, sort: {}, search }
 
   const typeMap = filterTypes
 
   let error = false
-  query.reduce<string | undefined>((param, value) => {
+  query.map(decodeURI).reduce<string | undefined>((param, value) => {
     // We parse everything in pairs, every second loop we parse
     if (!param || param === 'q') return value
 
     if (param === 'page') {
-      categoryVariables.currentPage = Number(value)
+      productListParams.currentPage = Number(value)
       return undefined
     }
     if (param === 'page-size') {
-      categoryVariables.pageSize = Number(value)
+      productListParams.pageSize = Number(value)
       return undefined
     }
     if (param === 'sort') {
-      categoryVariables.sort[value] = 'ASC'
+      productListParams.sort[value] = 'ASC'
       return undefined
     }
     if (param === 'dir') {
-      const [sortBy] = Object.keys(categoryVariables.sort)
-      if (sortBy) categoryVariables.sort[sortBy] = value?.toUpperCase() as SortEnum
+      const [sortBy] = Object.keys(productListParams.sort)
+      if (sortBy) productListParams.sort[sortBy] = value?.toUpperCase() as SortEnum
+      return undefined
+    }
+    if (param === 'category_uid') {
+      productListParams.filters.category_uid = { eq: value }
       return undefined
     }
 
     const [from, to] = value.split('-')
     switch (typeMap[param]) {
-      case 'FilterMatchTypeInput':
-        categoryVariables.filters[param] = { match: value } as FilterMatchTypeInput
+      case 'BOOLEAN':
+      case 'SELECT':
+      case 'MULTISELECT':
+        productListParams.filters[param] = { in: value.split(',') } as FilterEqualTypeInput
         return undefined
-      case 'FilterRangeTypeInput':
-        categoryVariables.filters[param] = {
+      case 'PRICE':
+        productListParams.filters[param] = {
           ...(from !== '*' && { from }),
           ...(to !== '*' && { to }),
         } as FilterRangeTypeInput
         return undefined
-      case 'FilterEqualTypeInput':
-        categoryVariables.filters[param] = { in: value.split(',') } as FilterEqualTypeInput
-        return undefined
     }
 
+    // console.log('Filter not recognized', param, typeMap[param])
     error = true
     return undefined
   }, undefined)
 
-  return error ? undefined : categoryVariables
+  return error ? undefined : productListParams
 }
 
 export function extractUrlQuery(params?: { url: string[] }) {
@@ -73,3 +80,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/getFilterTypes.ts

@@ -1,5 +1,7 @@
 import { gql, ApolloClient, NormalizedCacheObject, TypedDocumentNode } from '@graphcommerce/graphql'
-import type { Exact } from '@graphcommerce/graphql-mesh'
+import type { AttributeFrontendInputEnum, Exact } from '@graphcommerce/graphql-mesh'
+import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
+import { ProductFilterTypesDocument } from './ProductFilterTypes.gql'
 
 type FilterInputTypesQueryVariables = Exact<{ [key: string]: never }>
 
@@ -25,13 +27,40 @@ const FilterInputTypesDocument = gql`
   }
 ` as TypedDocumentNode<FilterInputTypesQuery, FilterInputTypesQueryVariables>
 
+export type FilterTypes = Partial<Record<string, AttributeFrontendInputEnum>>
+
 export async function getFilterTypes(
   client: ApolloClient<NormalizedCacheObject>,
-): Promise<Record<string, string | undefined>> {
+  isSearch: boolean = false,
+): Promise<FilterTypes> {
+  if (import.meta.graphCommerce.magentoVersion >= 247) {
+    const types = await client.query({
+      query: ProductFilterTypesDocument,
+      variables: {
+        filters: isSearch ? { is_filterable_in_search: true } : {},
+      },
+    })
+
+    const typeMap: FilterTypes = Object.fromEntries(
+      filterNonNullableKeys(types.data.attributesList?.items, ['frontend_input'])
+        .map((i) => [i.code, i.frontend_input])
+        .filter(nonNullable),
+    )
+
+    return typeMap
+  }
+
   const filterInputTypes = await client.query({ query: FilterInputTypesDocument })
 
-  const typeMap: Record<string, string | undefined> = Object.fromEntries(
-    filterInputTypes.data?.__type.inputFields.map(({ name, type }) => [name, type.name]),
+  const typeMap: FilterTypes = Object.fromEntries(
+    filterInputTypes.data?.__type.inputFields
+      .map<[string, AttributeFrontendInputEnum] | undefined>((field) => {
+        if (field.type.name === 'FilterEqualTypeInput') return [field.name, 'SELECT']
+        if (field.type.name === 'FilterRangeTypeInput') return [field.name, 'PRICE']
+        if (field.type.name === 'FilterMatchTypeInput') return [field.name, 'TEXT']
+        return undefined
+      })
+      .filter(nonNullable),
   )
 
   return typeMap

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 { ProductListQueryVariables } from '../ProductList/ProductList.gql'
 import { CategoryDefaultFragment } from './CategoryDefault.gql'
 import { ProductListParams } from './filterTypes'
-import { cloneDeep } from '@graphcommerce/graphql'
+
+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)
@@ -26,3 +66,9 @@ export async function productListApplyCategoryDefaults(
 
   return newParams
 }
+
+export function categoryDefaultsToProductListFilters(
+  variables: ProductListQueryVariables | undefined,
+): ProductListQueryVariables {
+  return { ...variables, filters: { category_uid: variables?.filters?.category_uid } }
+}

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 { 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'
@@ -16,23 +16,42 @@ export function ProductListPagination({
 }: ProductPaginationProps) {
   if (!page_info || !page_info.total_pages || !page_info.current_page) return null
 
-  return (
-    <Pagination
-      count={page_info?.total_pages}
-      page={page_info?.current_page ?? 1}
-      renderLink={(_, icon, btnProps) => {
-        const suffix = btnProps.page === 1 ? '' : `#products`
-        return (
-          <Link
-            {...btnProps}
-            href={`${productListLink({ ...params, currentPage: btnProps.page })}${suffix}`}
-            color='inherit'
-          >
-            {icon}
-          </Link>
-        )
-      }}
-      {...paginationProps}
-    />
-  )
+  if (import.meta.graphCommerce.productListPaginationVariant !== 'EXTENDED') {
+    return (
+      <Pagination
+        count={page_info?.total_pages}
+        page={page_info?.current_page ?? 1}
+        renderLink={(_, icon, btnProps) => {
+          const suffix = btnProps.page === 1 ? '' : `#products`
+          return (
+            <Link
+              {...btnProps}
+              href={`${productListLink({ ...params, currentPage: btnProps.page })}${suffix}`}
+              component={NextLink}
+              shallow
+              color='inherit'
+            >
+              {icon}
+            </Link>
+          )
+        }}
+        {...paginationProps}
+      />
+    )
+  }
+
+  if (import.meta.graphCommerce.productListPaginationVariant === 'EXTENDED') {
+    return (
+      <PaginationExtended
+        count={page_info?.total_pages}
+        page={page_info?.current_page ?? 1}
+        paginationHref={({ page }) =>
+          `${productListLink({ ...params, currentPage: page })}${page === 1 ? '' : '#products'}`
+        }
+        {...paginationProps}
+      />
+    )
+  }
+
+  return null
 }

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/ProductPageBreadcrumb/ProductPageBreadcrumb.graphql

@@ -1,5 +1,8 @@
 fragment ProductPageBreadcrumb on ProductInterface {
+  __typename
+  uid
   name
+  url_key
   categories {
     uid
     name

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -8,6 +8,9 @@ import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
 type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment &
   Omit<BreadcrumbsProps, 'children'>
 
+/**
+ * @deprecated Please use ProductPageBreadcrumbs
+ */
 export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
   const { categories, name, ...breadcrumbProps } = props
   const prev = usePrevPageRouter()