@graphcommerce/magento-product 3.0.1

package/components/ProductListItem/index.tsx

@@ -0,0 +1,223 @@
+import { Link as MuiLink, makeStyles, Theme, Typography } from '@material-ui/core'
+import { Image, ImageProps } from '@graphcommerce/image'
+import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+import clsx from 'clsx'
+import PageLink from 'next/link'
+import { useRouter } from 'next/router'
+import React, { PropsWithChildren, useCallback } from 'react'
+import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import { useProductLink } from '../../hooks/useProductLink'
+import ProductListPrice from '../ProductListPrice'
+
+export const useProductListItemStyles = makeStyles(
+  (theme: Theme) => ({
+    item: {
+      position: 'relative',
+      height: '100%',
+    },
+    title: {
+      display: 'inline',
+      color: theme.palette.text.primary,
+      overflowWrap: 'break-word',
+      wordBreak: 'break-all',
+      maxWidth: '100%',
+      marginRight: responsiveVal(3, 5),
+      gridArea: 'title',
+      fontWeight: theme.typography.fontWeightBold,
+    },
+    itemTitleContainer: {
+      display: 'grid',
+      gridTemplateColumns: 'unset',
+      alignItems: 'baseline',
+      marginTop: theme.spacings.xs,
+      columnGap: 4,
+      gridTemplateAreas: `
+        "title title"
+        "subtitle price"
+      `,
+      justifyContent: 'space-between',
+      [theme.breakpoints.up('md')]: {
+        gridTemplateAreas: `"title subtitle price"`,
+        gridTemplateColumns: 'auto auto 1fr',
+      },
+    },
+    subtitle: {
+      gridArea: 'subtitle',
+    },
+    price: {
+      gridArea: 'price',
+      textAlign: 'right',
+      [theme.breakpoints.up('sm')]: {
+        justifySelf: 'flex-end',
+      },
+    },
+    overlayItems: {
+      display: 'grid',
+      gridTemplateAreas: `
+        "topLeft topRight"
+        "bottomLeft bottomRight"
+      `,
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+      gridTemplateRows: 'repeat(2, minmax(0, 1fr))',
+      padding: responsiveVal(8, 12),
+      color: theme.palette.text.primary,
+    },
+    cellAlignRight: {
+      justifySelf: 'end',
+      textAlign: 'right',
+    },
+    cellAlignBottom: {
+      alignSelf: 'flex-end',
+    },
+    overlayItem: {
+      '& div': {
+        gap: 0,
+        // whiteSpace: 'nowrap',
+      },
+    },
+    imageContainer: ({ aspectRatio = [4, 3] }: BaseProps) => ({
+      display: 'block',
+      height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
+      position: 'relative',
+      paddingTop: `calc(100% / ${aspectRatio[0]} * ${aspectRatio[1]})`,
+      background: theme.palette.background.highlight, // thema specifiek
+      borderRadius: 2,
+    }),
+    placeholder: {
+      display: 'flex',
+      textAlign: 'center',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: theme.palette.background.default,
+      fontWeight: 600,
+      userSelect: 'none',
+    },
+    image: {
+      objectFit: 'contain',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+    },
+    link: {
+      textDecoration: 'underline',
+    },
+    discount: {
+      ...theme.typography.caption,
+      background: theme.palette.text.primary,
+      fontWeight: theme.typography.fontWeightBold,
+      padding: '0px 6px',
+      color: '#fff',
+      display: 'inline-block',
+      borderRadius: 2,
+    },
+  }),
+  { name: 'ProductListItem' },
+)
+
+export type OverlayAreaKeys = 'topLeft' | 'bottomLeft' | 'topRight' | 'bottomRight'
+
+export type OverlayAreas = Partial<Record<OverlayAreaKeys, React.ReactNode>>
+
+type BaseProps = PropsWithChildren<
+  {
+    subTitle?: React.ReactNode
+    aspectRatio?: [number, number]
+    imageOnly?: boolean
+  } & OverlayAreas &
+    ProductListItemFragment &
+    Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
+>
+
+export type ProductListItemProps = BaseProps & UseStyles<typeof useProductListItemStyles>
+
+export default function ProductListItem(props: ProductListItemProps) {
+  const {
+    subTitle,
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight,
+    small_image,
+    name,
+    price_range,
+    children,
+    imageOnly = false,
+    loading,
+    sizes,
+    dontReportWronglySizedImages,
+  } = props
+  const classes = useProductListItemStyles(props)
+  const productLink = useProductLink(props)
+  const discount = Math.floor(price_range.minimum_price.discount?.percent_off ?? 0)
+  const { locale } = useRouter()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const format = useCallback(
+    new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 }).format,
+    [],
+  )
+
+  return (
+    <div className={classes.item}>
+      <PageLink href={productLink} passHref>
+        <MuiLink underline='none'>
+          <div className={classes.imageContainer}>
+            {small_image ? (
+              <Image
+                layout='fill'
+                sizes={sizes}
+                dontReportWronglySizedImages={dontReportWronglySizedImages}
+                src={small_image.url ?? ''}
+                alt={small_image.label ?? ''}
+                className={classes.image}
+                loading={loading}
+              />
+            ) : (
+              <div className={clsx(classes.placeholder, classes.image)}>GEEN AFBEELDING</div>
+            )}
+
+            {!imageOnly && (
+              <div className={classes.overlayItems}>
+                <div className={classes.overlayItem}>
+                  {discount > 0 && (
+                    <div className={classes.discount}>{format(discount / -100)}</div>
+                  )}
+                  {topLeft}
+                </div>
+                <div className={clsx(classes.overlayItem, classes.cellAlignRight)}>{topRight}</div>
+                <div className={clsx(classes.overlayItem, classes.cellAlignBottom)}>
+                  {bottomLeft}
+                </div>
+                <div className={clsx(classes.cellAlignBottom, classes.cellAlignRight)}>
+                  {bottomRight}
+                </div>
+              </div>
+            )}
+          </div>
+        </MuiLink>
+      </PageLink>
+
+      {!imageOnly && (
+        <>
+          <div className={classes.itemTitleContainer}>
+            {/* <div> */}
+            <Typography component='h2' variant='subtitle1' className={classes.title}>
+              {name}
+            </Typography>
+            {/* </div> */}
+            <div className={classes.subtitle}>{subTitle}</div>
+
+            <ProductListPrice {...price_range.minimum_price} classes={{ root: classes.price }} />
+          </div>
+
+          {children}
+        </>
+      )}
+    </div>
+  )
+}

package/components/ProductListItems/ProductListItems.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductListItemsFragment = { items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'ConfigurableProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } }, configurable_options?: Types.Maybe<Array<Types.Maybe<{ attribute_code?: Types.Maybe<string>, uid: string, label?: Types.Maybe<string>, values?: Types.Maybe<Array<Types.Maybe<{ store_label?: Types.Maybe<string>, uid?: Types.Maybe<string>, swatch_data?: Types.Maybe<{ __typename: 'ColorSwatchData', value?: Types.Maybe<string> } | { __typename: 'ImageSwatchData', value?: Types.Maybe<string>, thumbnail?: Types.Maybe<string> } | { __typename: 'TextSwatchData', value?: Types.Maybe<string> }> }>>> }>>>, variants?: Types.Maybe<Array<Types.Maybe<{ attributes?: Types.Maybe<Array<Types.Maybe<{ uid: string, code?: Types.Maybe<string> }>>>, product?: Types.Maybe<{ uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, small_image?: Types.Maybe<{ label?: Types.Maybe<string>, url?: Types.Maybe<string> }> }> }>>> } | { __typename: 'DownloadableProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'GroupedProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'SimpleProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'VirtualProduct', uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, url_key?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } }>>> };

package/components/ProductListItems/ProductListItems.graphql

@@ -0,0 +1,7 @@
+fragment ProductListItems on Products {
+  items {
+    __typename
+    uid
+    ...ProductListItem
+  }
+}

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -0,0 +1,60 @@
+import { Theme, makeStyles } from '@material-ui/core'
+import { Maybe } from '@graphcommerce/graphql'
+import { RenderType, UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+import clsx from 'clsx'
+import React from 'react'
+import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import { ProductListItemProps } from '../ProductListItem'
+import { ProductListItemRenderer } from './renderer'
+
+export const useStyles = makeStyles(
+  (theme: Theme) => ({
+    productList: {
+      display: 'grid',
+      gridColumnGap: theme.spacings.sm,
+      gridRowGap: theme.spacings.md,
+      gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 360)}, 1fr))`,
+    },
+    productListsmall: {
+      gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 280)}, 1fr))`,
+    },
+  }),
+  { name: 'ProductList' },
+)
+
+export type ProductItemsGridProps = {
+  items?: Maybe<Array<Maybe<ProductListItemFragment & ProductListItemProps>>>
+  renderers: ProductListItemRenderer
+  loadingEager?: number
+  size?: 'normal' | 'small'
+} & UseStyles<typeof useStyles> &
+  JSX.IntrinsicElements['div']
+
+export default function ProductListItemsBase(props: ProductItemsGridProps) {
+  const { items, renderers, loadingEager = 0, size, ...divProps } = props
+  const classes = useStyles(props)
+
+  return (
+    <div
+      {...divProps}
+      className={clsx(classes.productList, classes[`productList${size}`], divProps.className)}
+    >
+      {items?.map((item, idx) =>
+        item ? (
+          <RenderType
+            key={item.uid ?? ''}
+            renderer={renderers}
+            {...item}
+            loading={loadingEager > idx ? 'eager' : 'lazy'}
+            sizes={
+              size === 'small'
+                ? { 0: '100vw', 354: '50vw', 675: '30vw', 1255: '23vw', 1500: '337px' }
+                : { 0: '100vw', 367: '48vw', 994: '30vw', 1590: '23vw', 1920: '443px' }
+            }
+            noReport
+          />
+        ) : null,
+      )}
+    </div>
+  )
+}

package/components/ProductListItems/ProductListParamsProvider.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren, useState, useEffect } from 'react'
+import { productListParamsContext } from '../../context/productListParamsContext'
+import { ProductListParams } from './filterTypes'
+
+export default function ProductListParamsProvider({
+  children,
+  value,
+}: PropsWithChildren<{ value: ProductListParams }>) {
+  const [params, setParams] = useState<ProductListParams>(value)
+
+  useEffect(() => {
+    setParams(value)
+  }, [value])
+
+  return (
+    <productListParamsContext.Provider value={{ params, setParams }}>
+      {children}
+    </productListParamsContext.Provider>
+  )
+}

package/components/ProductListItems/filterTypes.tsx

@@ -0,0 +1,45 @@
+import {
+  Exact,
+  Maybe,
+  Scalars,
+  ProductAttributeFilterInput,
+  ProductAttributeSortInput,
+  FilterEqualTypeInput,
+  FilterMatchTypeInput,
+  FilterRangeTypeInput,
+} from '@graphcommerce/graphql'
+
+/** This is mainly based on ProductListQueryVariables */
+export type ProductListParams = Exact<{
+  pageSize?: Maybe<Scalars['Int']>
+  currentPage?: Maybe<Scalars['Int']>
+  filters: ProductAttributeFilterInput
+  sort: ProductAttributeSortInput
+  search?: Maybe<Scalars['String']>
+  url: string
+}>
+
+type AnyFilterType = FilterEqualTypeInput | FilterMatchTypeInput | FilterRangeTypeInput | undefined
+
+export function isFilterTypeEqual(filter: AnyFilterType): filter is FilterEqualTypeInput {
+  return Boolean(
+    filter && ((filter as FilterEqualTypeInput).eq || (filter as FilterEqualTypeInput).in),
+  )
+}
+
+export function isFilterTypeMatch(filter: AnyFilterType): filter is FilterMatchTypeInput {
+  return Boolean(filter && (filter as FilterMatchTypeInput).match)
+}
+
+export function isFilterTypeRange(filter: AnyFilterType): filter is FilterRangeTypeInput {
+  return Boolean(
+    filter && ((filter as FilterRangeTypeInput).from || (filter as FilterRangeTypeInput).to),
+  )
+}
+
+export type AllFilterInputTypes =
+  | 'FilterEqualTypeInput'
+  | 'FilterMatchTypeInput'
+  | 'FilterRangeTypeInput'
+
+export type FilterTypes = Partial<Record<string, AllFilterInputTypes>>

package/components/ProductListItems/filteredProductList.tsx

@@ -0,0 +1,74 @@
+import {
+  FilterEqualTypeInput,
+  FilterMatchTypeInput,
+  FilterRangeTypeInput,
+  SortEnum,
+} from '@graphcommerce/graphql'
+import { FilterTypes, ProductListParams } from './filterTypes'
+
+export function parseParams(
+  url: string,
+  query: string[],
+  filterTypes: FilterTypes,
+): ProductListParams | false {
+  const categoryVariables: ProductListParams = { url, filters: {}, sort: {} }
+
+  const typeMap = filterTypes
+
+  let error = false
+  query.reduce<string | undefined>((param, value) => {
+    // We parse everything in pairs, every second loop we parse
+    if (!param) return value
+
+    if (param === 'page') {
+      categoryVariables.currentPage = Number(value)
+      return undefined
+    }
+    if (param === 'limit') {
+      categoryVariables.pageSize = Number(param)
+      return undefined
+    }
+    if (param === 'sort') {
+      categoryVariables.sort[value] = 'ASC'
+      return undefined
+    }
+    if (param === 'dir') {
+      const [sortBy] = Object.keys(categoryVariables.sort)
+      if (sortBy) categoryVariables.sort[sortBy] = value as SortEnum
+      return undefined
+    }
+
+    const [from, to] = value.split('-')
+    switch (typeMap[param]) {
+      case 'FilterMatchTypeInput':
+        categoryVariables.filters[param] = { match: value } as FilterMatchTypeInput
+        return undefined
+      case 'FilterRangeTypeInput':
+        categoryVariables.filters[param] = {
+          ...(from !== '*' && { from }),
+          ...(to !== '*' && { to }),
+        } as FilterRangeTypeInput
+        return undefined
+      case 'FilterEqualTypeInput':
+        categoryVariables.filters[param] = { in: value.split(',') } as FilterEqualTypeInput
+        return undefined
+    }
+
+    error = true
+    return undefined
+  }, undefined)
+
+  return error ? false : categoryVariables
+}
+
+export function extractUrlQuery(params?: { url: string[] }) {
+  if (!params?.url) return [undefined, undefined] as const
+
+  const queryIndex = params.url.findIndex((slug) => slug === 'q')
+  const qIndex = queryIndex < 0 ? params.url.length : queryIndex
+  const url = params.url.slice(0, qIndex).join('/')
+  const query = params.url.slice(qIndex + 1)
+
+  if (queryIndex > 0 && !query.length) return [undefined, undefined] as const
+  return [url, query] as const
+}

package/components/ProductListItems/getFilterTypes.ts

@@ -0,0 +1,51 @@
+import { gql, ApolloClient, NormalizedCacheObject } from '@apollo/client'
+import { Exact } from '@graphcommerce/graphql'
+import { AllFilterInputTypes, FilterTypes } from './filterTypes'
+
+const allFilterInputTypes: AllFilterInputTypes[] = [
+  'FilterEqualTypeInput',
+  'FilterMatchTypeInput',
+  'FilterRangeTypeInput',
+]
+
+type FilterInputTypesQueryVariables = Exact<{ [key: string]: never }>
+
+type FilterInputTypesQuery = {
+  __type: {
+    inputFields: {
+      name: string
+      type: { name: AllFilterInputTypes }
+    }[]
+  }
+}
+
+const FilterInputTypesDocument = gql`
+  query FilterInputTypes {
+    __type(name: "ProductAttributeFilterInput") {
+      inputFields {
+        name
+        type {
+          name
+        }
+      }
+    }
+  }
+`
+
+export async function getFilterTypes(
+  client: ApolloClient<NormalizedCacheObject>,
+): Promise<FilterTypes> {
+  const filterInputTypes = client.query<FilterInputTypesQuery, FilterInputTypesQueryVariables>({
+    query: FilterInputTypesDocument,
+  })
+
+  const typeMap: FilterTypes = {}
+
+  ;(await filterInputTypes).data?.__type.inputFields.forEach(({ name, type }) => {
+    if (!allFilterInputTypes.includes(type.name))
+      throw new Error(`filter ${name} with FilterTypeInput ${type.name} not implemented`)
+    typeMap[name] = type.name
+  })
+
+  return typeMap
+}

package/components/ProductListItems/index.tsx

@@ -0,0 +1,6 @@
+import ProductListItemsBase, { ProductItemsGridProps } from './ProductListItemsBase'
+import renderer from './renderer'
+
+export default function ProductListItems(props: Omit<ProductItemsGridProps, 'renderers'>) {
+  return <ProductListItemsBase renderers={renderer} {...props} />
+}

package/components/ProductListItems/renderer.tsx

@@ -0,0 +1,16 @@
+import { TypeRenderer } from '@graphcommerce/next-ui'
+import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import ProductListItem from '../ProductListItem'
+
+export type ProductListItemRenderer = TypeRenderer<ProductListItemFragment>
+
+const renderer: ProductListItemRenderer = {
+  SimpleProduct: ProductListItem,
+  ConfigurableProduct: ProductListItem,
+  BundleProduct: ProductListItem,
+  VirtualProduct: ProductListItem,
+  DownloadableProduct: ProductListItem,
+  GroupedProduct: ProductListItem,
+}
+
+export default renderer

package/components/ProductListLink/ProductListLink.tsx

@@ -0,0 +1,50 @@
+import { Link, LinkProps } from '@material-ui/core'
+import PageLink, { LinkProps as PageLinkProps } from 'next/link'
+import React, { PropsWithChildren } from 'react'
+import { useProductListLink } from '../../hooks/useProductListLink'
+import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
+import { ProductListParams } from '../ProductListItems/filterTypes'
+
+export type ProductListLinkProps = PropsWithChildren<
+  LinkProps &
+    ProductListParams & { noLink?: boolean; link?: Omit<PageLinkProps, 'href' | 'passHref'> }
+>
+
+const ProductListLink = React.forwardRef<HTMLAnchorElement, ProductListLinkProps>((props, ref) => {
+  const { setParams } = useProductListParamsContext()
+  const {
+    children,
+    url,
+    sort,
+    currentPage,
+    pageSize,
+    filters,
+    search,
+    noLink,
+    link,
+    ...linkProps
+  } = props
+  const newParams = { filters, sort, url, currentPage, pageSize, search }
+
+  const productListLink = useProductListLink(newParams)
+  const updateParams = () => setParams(newParams)
+
+  // We're setting nofollow if a custom sort, pageSize, filters or search is set.
+  let rel: string | undefined
+  if (Object.keys(sort).length || pageSize || Object.keys(filters).length || search)
+    rel = 'nofollow'
+
+  return (
+    <PageLink href={productListLink} passHref {...link}>
+      {noLink ? (
+        children
+      ) : (
+        <Link rel={rel} {...linkProps} ref={ref} onClick={updateParams}>
+          {children}
+        </Link>
+      )}
+    </PageLink>
+  )
+})
+
+export default ProductListLink

package/components/ProductListPagination/ProductListPagination.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductListPaginationFragment = { page_info?: Types.Maybe<{ current_page?: Types.Maybe<number>, total_pages?: Types.Maybe<number> }> };

package/components/ProductListPagination/ProductListPagination.graphql

@@ -0,0 +1,6 @@
+fragment ProductListPagination on Products {
+  page_info {
+    current_page
+    total_pages
+  }
+}

package/components/ProductListPagination/index.tsx

@@ -0,0 +1,31 @@
+import { PaginationProps } from '@material-ui/lab'
+import { Pagination } from '@graphcommerce/next-ui'
+import React from 'react'
+import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
+import ProductListLink from '../ProductListLink/ProductListLink'
+import { ProductListPaginationFragment } from './ProductListPagination.gql'
+
+export type ProductPaginationProps = ProductListPaginationFragment &
+  Omit<PaginationProps, 'count' | 'defaultPage' | 'page' | 'renderItem'>
+
+export default function ProductListPagination({
+  page_info,
+  ...paginationProps
+}: ProductPaginationProps) {
+  const { params } = useProductListParamsContext()
+
+  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={(page: number, icon: React.ReactNode, btnProps: any) => (
+        <ProductListLink {...btnProps} {...params} currentPage={btnProps.page}>
+          {icon}
+        </ProductListLink>
+      )}
+      {...paginationProps}
+    />
+  )
+}

package/components/ProductListPrice/ProductListPrice.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductListPriceFragment = { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } };

package/components/ProductListPrice/ProductListPrice.graphql

@@ -0,0 +1,12 @@
+fragment ProductListPrice on ProductPrice {
+  regular_price {
+    ...Money
+  }
+  discount {
+    amount_off
+    percent_off
+  }
+  final_price {
+    ...Money
+  }
+}

package/components/ProductListPrice/index.tsx

@@ -0,0 +1,36 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { Money } from '@graphcommerce/magento-store'
+import { UseStyles } from '@graphcommerce/next-ui'
+import React from 'react'
+import { ProductListPriceFragment } from './ProductListPrice.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {},
+    discount: {
+      textDecoration: 'line-through',
+      color: theme.palette.primary.mutedText,
+      display: 'inline',
+      marginRight: 8,
+    },
+  }),
+  { name: 'ProductListPrice' },
+)
+
+type ProductListPriceProps = ProductListPriceFragment & UseStyles<typeof useStyles>
+
+export default function ProductListPrice(props: ProductListPriceProps) {
+  const { regular_price, final_price } = props
+  const classes = useStyles(props)
+
+  return (
+    <Typography component='div' variant='body1' className={classes.root}>
+      {regular_price.value !== final_price.value && (
+        <div className={classes.discount}>
+          <Money {...regular_price} />
+        </div>
+      )}
+      <Money {...final_price} />
+    </Typography>
+  )
+}