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

package/components/ProductListCount/ProductListCount.tsx

@@ -1,4 +1,4 @@
-import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, Divider, SxProps, Theme, Typography } from '@mui/material'
 import { ProductListCountFragment } from './ProductListCount.gql'
@@ -9,7 +9,9 @@ const { classes, selectors } = extendableComponent('ProductListCount', [
   'count',
 ] as const)
 
-export type ProductCountProps = ProductListCountFragment & { sx?: SxProps<Theme> }
+export type ProductCountProps = ProductListCountFragment & {
+  sx?: SxProps<Theme>
+}
 
 export function ProductListCount(props: ProductCountProps) {
   const { total_count, sx = [] } = props
@@ -24,17 +26,21 @@ export function ProductListCount(props: ProductCountProps) {
           columnGap: theme.spacings.xs,
           maxWidth: '100%',
           width: responsiveVal(280, 650),
-          margin: '0 auto',
           alignItems: 'center',
-          marginTop: theme.spacings.md,
-          marginBottom: theme.spacings.md,
+          my: theme.spacings.md,
+          mx: 'auto',
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
       className={classes.root}
     >
       <Divider component='div' className={classes.line} />
-      <Typography variant='body2' color='text.disabled' className={classes.count}>
+      <Typography
+        variant='body2'
+        color='text.disabled'
+        className={classes.count}
+        sx={{ lineHeight: 0 }}
+      >
         {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/FilterEqualType.tsx

@@ -3,6 +3,7 @@ import type { FilterEqualTypeInput } from '@graphcommerce/graphql-mesh'
 import { responsiveVal, extendableComponent, ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
 import {
   Box,
+  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   Checkbox,
   ListItem,
   ListItemSecondaryAction,

package/components/ProductListFilters/FilterRangeType.tsx

@@ -3,6 +3,7 @@ import type { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Slider } from '@mui/material'
 import React, { useEffect } from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,9 +1,14 @@
-import { RenderType, responsiveVal } from '@graphcommerce/next-ui'
+import { RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import { Box, BoxProps } from '@mui/material'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import { AddProductsToCartForm } from '../AddProductsToCart'
 import { ProductListItemProps } from '../ProductListItem/ProductListItem'
 import { ProductListItemRenderer } from './renderer'
 
+type ComponentState = {
+  size?: 'normal' | 'small'
+}
+
 export type ProductItemsGridProps = {
   items?:
     | Array<(ProductListItemFragment & ProductListItemProps) | null | undefined>
@@ -12,9 +17,14 @@ export type ProductItemsGridProps = {
   renderers: ProductListItemRenderer
   loadingEager?: number
   title: string
-  size?: 'normal' | 'small'
   sx?: BoxProps['sx']
-} & Pick<ProductListItemProps, 'onClick' | 'titleComponent'>
+} & Pick<ProductListItemProps, 'onClick' | 'titleComponent'> &
+  ComponentState
+
+const slots = ['root'] as const
+const name = 'ProductListItemsBase' as const
+
+const { withState } = extendableComponent<ComponentState, typeof name, typeof slots>(name, slots)
 
 export function ProductListItemsBase(props: ProductItemsGridProps) {
   const {
@@ -27,41 +37,51 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
     onClick,
   } = props
 
+  const classes = withState({ size })
+
   return (
-    <Box
-      sx={[
-        (theme) => ({
-          display: 'grid',
-          gridColumnGap: theme.spacings.md,
-          gridRowGap: theme.spacings.md,
-        }),
-        size === 'small' && {
-          gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 280)}, 1fr))`,
-        },
-        size === 'normal' && {
-          gridTemplateColumns: { xs: `repeat(2, 1fr)`, md: `repeat(3, 1fr)`, lg: `repeat(4, 1fr)` },
-        },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      {items?.map((item, idx) =>
-        item ? (
-          <RenderType
-            key={item.uid ?? ''}
-            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' }
-            }
-            {...item}
-            loading={loadingEager > idx ? 'eager' : 'lazy'}
-            titleComponent={titleComponent}
-            onClick={onClick}
-            noReport
-          />
-        ) : null,
-      )}
-    </Box>
+    <AddProductsToCartForm>
+      <Box
+        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)`,
+              },
+            },
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        {items?.map((item, idx) =>
+          item ? (
+            <RenderType
+              key={item.uid ?? ''}
+              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' }
+              }
+              {...item}
+              loading={loadingEager > idx ? 'eager' : 'lazy'}
+              titleComponent={titleComponent}
+              onClick={onClick}
+              noReport
+            />
+          ) : null,
+        )}
+      </Box>
+    </AddProductsToCartForm>
   )
 }

package/components/ProductListItems/filterTypes.tsx

@@ -1,5 +1,4 @@
 import type {
-  Exact,
   Maybe,
   Scalars,
   ProductAttributeFilterInput,
@@ -12,16 +11,16 @@ import type {
 
 /** This is mainly based on ProductListQueryVariables */
 export type ProductListParams = {
-  pageSize?: Maybe<Scalars['Int']>
-  currentPage?: Maybe<Scalars['Int']>
+  pageSize?: Maybe<Scalars['Int']['input']>
+  currentPage?: Maybe<Scalars['Int']['input']>
   filters: ProductAttributeFilterInput
   sort: ProductAttributeSortInput
-  search?: Maybe<Scalars['String']>
+  search?: Maybe<Scalars['String']['input']>
   url: string
 }
 
 export type ProductFilterParams = {
-  pageSize?: Maybe<Scalars['Int']>
+  pageSize?: Maybe<Scalars['Int']['input']>
   currentPage: number
   filters: ProductAttributeFilterInput
   sort: keyof ProductAttributeSortInput | null

package/components/ProductListLink/ProductListLink.tsx

@@ -12,6 +12,7 @@ export type ProductListLinkProps = LinkProps &
     children?: React.ReactNode
   }
 
+/** @deprecated Use productLinkList() instead */
 export const ProductListLink = React.forwardRef<HTMLAnchorElement, ProductListLinkProps>(
   (props, ref) => {
     const { setParams } = useProductListParamsContext()

package/components/ProductListPagination/ProductListPagination.tsx

@@ -1,7 +1,7 @@
 import { Pagination } from '@graphcommerce/next-ui'
-import { PaginationProps } from '@mui/material'
+import { Link, PaginationProps } from '@mui/material'
+import { productListLink } from '../../hooks/useProductListLink'
 import { ProductListParams } from '../ProductListItems/filterTypes'
-import { ProductListLink } from '../ProductListLink/ProductListLink'
 import { ProductListPaginationFragment } from './ProductListPagination.gql'
 
 export type ProductPaginationProps = ProductListPaginationFragment &
@@ -20,11 +20,18 @@ export function ProductListPagination({
     <Pagination
       count={page_info?.total_pages}
       page={page_info?.current_page ?? 1}
-      renderLink={(_, icon, btnProps) => (
-        <ProductListLink {...btnProps} {...params} currentPage={btnProps.page} color='inherit'>
-          {icon}
-        </ProductListLink>
-      )}
+      renderLink={(_, icon, btnProps) => {
+        const suffix = btnProps.page === 1 ? '' : `#products`
+        return (
+          <Link
+            {...btnProps}
+            href={`${productListLink({ ...params, currentPage: btnProps.page })}${suffix}`}
+            color='inherit'
+          >
+            {icon}
+          </Link>
+        )
+      }}
       {...paginationProps}
     />
   )

package/components/ProductListPrice/ProductListPrice.tsx

@@ -8,7 +8,7 @@ const { classes, selectors } = extendableComponent('ProductListPrice', [
   'discountPrice',
 ] as const)
 
-type ProductListPriceProps = ProductListPriceFragment & Pick<TypographyProps, 'sx'>
+export type ProductListPriceProps = ProductListPriceFragment & Pick<TypographyProps, 'sx'>
 
 export function ProductListPrice(props: ProductListPriceProps) {
   const { regular_price, final_price, sx } = props

package/components/ProductListPrice/index.ts

@@ -0,0 +1,2 @@
+export * from './ProductListPrice.gql'
+export * from './ProductListPrice'

package/components/ProductPage/ProductPageAddToCartRow.tsx

@@ -5,16 +5,17 @@ export type ProductPageAddToCartRowProps = {
   sx?: SxProps<Theme>
   children: React.ReactNode
   after?: React.ReactNode
+  // eslint-disable-next-line react/no-unused-prop-types
   product: UseAddProductsToCartActionFragment
 }
 
 export function ProductPageAddToCartRow(props: ProductPageAddToCartRowProps) {
-  const { sx, children, after, product } = props
+  const { sx, children, after } = props
   return (
     <>
       <Box
         sx={[
-          (theme) => ({ display: 'flex', alignItems: 'start', columnGap: theme.spacings.xs }),
+          (theme) => ({ display: 'flex', alignItems: 'center', columnGap: theme.spacings.xs }),
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       >

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -1,7 +1,7 @@
 import { usePrevPageRouter } from '@graphcommerce/framer-next-pages'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Breadcrumbs, BreadcrumbsProps, Container, Link, Typography } from '@mui/material'
+import { Breadcrumbs, BreadcrumbsProps, Link, Typography } from '@mui/material'
 import { productPageCategory } from '../ProductPageCategory/productPageCategory'
 import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
 
@@ -22,7 +22,7 @@ export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
       </Link>
       {filterNonNullableKeys(category?.breadcrumbs, ['category_level'])
         .sort((a, b) => a.category_level - b.category_level)
-        .map((breadcrumb, i) => (
+        .map((breadcrumb) => (
           <Link
             underline='hover'
             key={breadcrumb.category_uid}

package/components/ProductPageDescription/ProductPageDescription.graphql

@@ -4,4 +4,5 @@ fragment ProductPageDescription on ProductInterface {
   description {
     ...ComplexTextValue
   }
+  url_key
 }

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -6,12 +6,14 @@ import {
 } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme, Typography } from '@mui/material'
 import { Variant } from '@mui/material/styles/createTypography'
+import { ProductPageName } from '../ProductPageName'
 import { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
 
 export type ProductPageDescriptionProps = ProductPageDescriptionFragment &
   Omit<ColumnTwoWithTopProps, 'top' | 'left'> & {
     sx?: SxProps<Theme>
     fontSize?: 'responsive' | Variant
+    product: ProductPageDescriptionFragment
   }
 
 const componentName = 'ProductPageDescription'
@@ -20,7 +22,7 @@ const parts = ['root', 'description'] as const
 const { classes } = extendableComponent(componentName, parts)
 
 export function ProductPageDescription(props: ProductPageDescriptionProps) {
-  const { description, name, right, fontSize = 'subtitle1', sx = [] } = props
+  const { product, right, fontSize = 'subtitle1', sx = [] } = props
 
   return (
     <ColumnTwoWithTop
@@ -28,15 +30,15 @@ export function ProductPageDescription(props: ProductPageDescriptionProps) {
       sx={sx}
       top={
         <Typography variant='h1' component='h1'>
-          {name}
+          <ProductPageName product={product} />
         </Typography>
       }
       left={
-        description && (
+        product.description && (
           <Box
             className={classes.description}
             // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: description.html }}
+            dangerouslySetInnerHTML={{ __html: product.description.html }}
             sx={[
               {
                 '& p:first-of-type': {

package/components/ProductPageGallery/ProductPageGallery.graphql

@@ -7,4 +7,5 @@ fragment ProductPageGallery on ProductInterface {
     ...ProductImage
     ...ProductVideo
   }
+  url_key
 }

package/components/ProductPageGallery/ProductPageGallery.tsx

@@ -10,16 +10,14 @@ export type ProductPageGalleryRenderers = TypeRenderer<
   NonNullable<NonNullable<ProductPageGalleryFragment['media_gallery']>[0]>
 >
 
-export type ProductPageGalleryProps = ProductPageGalleryFragment &
-  Omit<SidebarGalleryProps, 'sidebar' | 'images'> & { children?: React.ReactNode }
+export type ProductPageGalleryProps = Omit<SidebarGalleryProps, 'sidebar' | 'images'> & {
+  product: ProductPageGalleryFragment
+  children?: React.ReactNode
+}
 
 export function ProductPageGallery(props: ProductPageGalleryProps) {
-  const {
-    media_gallery,
-    children,
-    aspectRatio: [width, height] = [1532, 1678],
-    ...sidebarProps
-  } = props
+  const { product, children, aspectRatio: [width, height] = [1532, 1678], ...sidebarProps } = props
+  const { media_gallery } = product
 
   return (
     <SidebarGallery

package/components/ProductPageMeta/ProductPageMeta.graphql

@@ -3,16 +3,18 @@ fragment ProductPageMeta on ProductInterface {
   sku
   name
   url_key
+  url_rewrites {
+    url
+  }
   meta_title
   meta_description
   price_range {
     minimum_price {
       final_price {
-        value
-        currency
+        ...Money
       }
       regular_price {
-        value
+        ...Money
       }
     }
   }

package/components/ProductPageMeta/ProductPageMeta.tsx

@@ -1,9 +1,15 @@
 import { PageMeta } from '@graphcommerce/magento-store'
-import { useCanonical } from '@graphcommerce/next-ui'
-import { useProductLink } from '../../hooks/useProductLink'
+import { PageMetaProps } from '@graphcommerce/next-ui'
+import { productLink } from '../../hooks/useProductLink'
 import { ProductPageMetaFragment } from './ProductPageMeta.gql'
 
-export function ProductPageMeta(props: ProductPageMetaFragment) {
+export type ProductPageMetaProps = { product: ProductPageMetaFragment } & Pick<
+  PageMetaProps,
+  'children' | 'ogImage' | 'ogImageUseFallback'
+>
+
+export function ProductPageMeta(props: ProductPageMetaProps) {
+  const { product, ...rest } = props
   const {
     sku,
     categories,
@@ -14,45 +20,37 @@ export function ProductPageMeta(props: ProductPageMetaFragment) {
     meta_description,
     url_key,
     __typename,
-  } = props
-  const productLink = useProductLink({ url_key, __typename })
-  const canonical = useCanonical(productLink)
+  } = product
 
   return (
     <PageMeta
       title={meta_title ?? name ?? ''}
       metaDescription={meta_description ?? name ?? ''}
-      canonical={productLink}
+      canonical={productLink({ url_key, __typename })}
+      ogImage={media_gallery?.[0]?.url}
+      ogType='product'
+      {...rest}
     >
-      {sku && (
-        <>
-          <meta property='type' content='product' key='og-type' />
-          <meta property='product:retailer_part_no' content={sku} key='og-sku' />
-        </>
-      )}
-      {name && <meta property='og:title' content={name} key='og-title' />}
-      {media_gallery?.[0]?.url && (
-        <meta property='og:image' content={media_gallery[0].url} key='og-image' />
-      )}
+      {sku && <meta property='product:retailer_part_no' content={sku} key='og-product-sku' />}
       {price_range?.minimum_price?.regular_price?.value && (
         <meta
           property='product:price:amount'
           content={price_range.minimum_price.regular_price.value.toString()}
-          key='og-price'
+          key='og-product-price'
         />
       )}
       {price_range?.minimum_price?.final_price?.value && (
         <meta
           property='product:sale_price:amount'
           content={price_range.minimum_price.final_price.value.toString()}
-          key='og-sale-price'
+          key='og-product-sale-price'
         />
       )}
       {price_range?.minimum_price?.final_price?.currency && (
         <meta
           property='product:price:currency'
           content={price_range.minimum_price.final_price.currency}
-          key='og-currency'
+          key='og-product-currency'
         />
       )}
       {categories &&
@@ -61,7 +59,6 @@ export function ProductPageMeta(props: ProductPageMetaFragment) {
             <meta property='product:category' content={category.name} key={category.uid} />
           ) : null,
         )}
-      {canonical && <meta property='og:url' content={canonical} key='og-url' />}
     </PageMeta>
   )
 }

package/components/ProductPageName/ProductPageName.graphql

@@ -0,0 +1,4 @@
+fragment ProductPageName on ProductInterface {
+  name
+  url_key
+}

package/components/ProductPageName/ProductPageName.tsx

@@ -0,0 +1,10 @@
+import { ProductPageNameFragment } from './ProductPageName.gql'
+
+export type ProductPageNameProps = {
+  product: ProductPageNameFragment
+}
+
+export const ProductPageName = (props: ProductPageNameProps) => {
+  const { product } = props
+  return <>{product.name}</>
+}

package/components/ProductPageName/index.ts

@@ -0,0 +1 @@
+export * from './ProductPageName'

package/components/ProductPagePrice/ProductPagePrice.graphql

@@ -1,4 +1,5 @@
 fragment ProductPagePrice on ProductInterface {
+  url_key
   price_range {
     minimum_price {
       regular_price {

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -1,10 +1,10 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
-import { useFormAddProductsToCart } from '../AddProductsToCart'
+import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
 import { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
 
-type ProductPagePriceProps = { product: ProductPagePriceFragment; index?: number }
+export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector
 
 export function ProductPagePrice(props: ProductPagePriceProps) {
   const { product, index = 0 } = props

package/components/ProductShortDescription/ProductShortDescription.graphql

@@ -1,4 +1,5 @@
 fragment ProductShortDescription on ProductInterface {
+  url_key
   short_description {
     ...ComplexTextValue
   }

package/components/ProductShortDescription/ProductShortDescription.tsx

@@ -2,12 +2,16 @@ import { extendableComponent } from '@graphcommerce/next-ui'
 import { SxProps, Theme, Typography } from '@mui/material'
 import { ProductShortDescriptionFragment } from './ProductShortDescription.gql'
 
-type ProductShortDescriptionProps = ProductShortDescriptionFragment & { sx?: SxProps<Theme> }
+export type ProductShortDescriptionProps = {
+  product: ProductShortDescriptionFragment
+  sx?: SxProps<Theme>
+}
 
 const { classes } = extendableComponent('ProductShortDescription', ['description'] as const)
 
 export function ProductShortDescription(props: ProductShortDescriptionProps) {
-  const { short_description, sx = [] } = props
+  const { product, sx = [] } = props
+  const { short_description } = product
 
   return (
     <Typography

package/components/ProductSpecs/ProductSpecs.tsx

@@ -2,14 +2,18 @@ import { responsiveVal, Row, SectionContainer, extendableComponent } from '@grap
 import { Box, SxProps, Theme } from '@mui/material'
 import { ProductSpecsFragment } from './ProductSpecs.gql'
 
-export type ProductSpecsProps = ProductSpecsFragment & { title?: string; sx?: SxProps<Theme> }
+export type ProductSpecsProps = ProductSpecsFragment & {
+  title?: string
+  sx?: SxProps<Theme>
+  children?: React.ReactNode
+}
 
 const name = 'ProductSpecs' as const
 const parts = ['root', 'specs', 'options'] as const
 const { classes } = extendableComponent(name, parts)
 
 export function ProductSpecs(props: ProductSpecsProps) {
-  const { aggregations, title, sx = [] } = props
+  const { aggregations, title, children, sx = [] } = props
   const filter = ['price', 'category_id', 'size', 'new', 'sale', 'color']
   const specs = aggregations?.filter(
     (attr) => !filter.includes(attr?.attribute_code ?? '') && attr?.options?.[0]?.value !== '0',
@@ -53,6 +57,7 @@ export function ProductSpecs(props: ProductSpecsProps) {
             </li>
           ))}
         </Box>
+        {children}
       </SectionContainer>
     </Row>
   )

package/components/index.ts

@@ -1,5 +1,5 @@
 export * from './AddProductsToCart'
-export * from './JsonLdProduct/jsonLdProduct'
+export * from './JsonLdProduct'
 export * from './ProductAddToCart'
 export * from './ProductCustomizable'
 export * from './ProductFiltersPro'
@@ -11,7 +11,6 @@ export * from './ProductListItem/ProductListItem'
 export * from './ProductListItems/filteredProductList'
 export * from './ProductListItems/filterTypes'
 export * from './ProductListItems/getFilterTypes'
-export * from './ProductListItems/ProductListItems'
 export * from './ProductListItems/ProductListItems.gql'
 export * from './ProductListItems/ProductListItemsBase'
 export * from './ProductListItems/ProductListParamsProvider'
@@ -19,19 +18,23 @@ export * from './ProductListItems/renderer'
 export * from './ProductListLink/ProductListLink'
 export * from './ProductListPagination/ProductListPagination'
 export * from './ProductListSort'
+export * from './ProductPageName'
 export * from './ProductPage/ProductPageAddToCartRow'
 export * from './ProductPageBreadcrumb'
 export * from './ProductPageCategory/productPageCategory'
 export * from './ProductPageDescription/ProductPageDescription'
 export * from './ProductPageGallery/ProductPageGallery'
 export * from './ProductPageMeta/ProductPageMeta'
+export * from './ProductPageMeta/ProductPageMeta.gql'
 export * from './ProductPagePrice'
 export * from './ProductRelated/RelatedProducts.gql'
 export * from './ProductShortDescription/ProductShortDescription'
 export * from './ProductShortDescription/ProductShortDescription.gql'
 export * from './ProductSidebarDelivery/ProductSidebarDelivery'
 export * from './ProductSpecs/ProductSpecs'
+export * from './ProductSpecs/ProductSpecs.gql'
 export * from './ProductStaticPaths/getProductStaticPaths'
 export * from './ProductStaticPaths/getSitemapPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
 export * from './ProductWeight/ProductWeight'
+export * from './ProductListPrice'

package/hooks/useProductListLink.ts

@@ -5,7 +5,7 @@ import {
   ProductListParams,
 } from '../components/ProductListItems/filterTypes'
 
-export function createProductListLink(props: ProductListParams): string {
+export function productListLink(props: ProductListParams): string {
   const { url, sort, currentPage, pageSize, filters: incoming } = props
   const isSearch = url.startsWith('search')
   const filters = isSearch ? incoming : { ...incoming, category_uid: undefined }
@@ -43,5 +43,5 @@ export function createProductListLink(props: ProductListParams): string {
 }
 
 export function useProductListLink(props: ProductListParams): string {
-  return createProductListLink({ ...props, url: `${props.url}` })
+  return productListLink({ ...props, url: `${props.url}` })
 }