@graphcommerce/magento-product 8.1.0-canary.9 → 9.0.0-canary.55

package/components/ProductListItems/filteredProductList.tsx

@@ -4,7 +4,10 @@ import type {
   FilterRangeTypeInput,
   SortEnum,
 } from '@graphcommerce/graphql-mesh'
+import { useRouter } from 'next/router'
 import { FilterTypes, ProductListParams } from './filterTypes'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { equal } from '@wry/equality'
 
 export function parseParams(
   url: string,
@@ -73,3 +76,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/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 { CategoryDefaultFragment } from './CategoryDefault.gql'
 import { ProductListParams } from './filterTypes'
-import { cloneDeep } from '@graphcommerce/graphql'
+import { ProductListQueryVariables } from '../ProductList/ProductList.gql'
 
+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)

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()

package/components/ProductPageBreadcrumb/ProductPageBreadcrumbs.tsx

@@ -0,0 +1,40 @@
+import { usePrevPageRouter } from '@graphcommerce/framer-next-pages'
+import { categoryToBreadcrumbs } from '@graphcommerce/magento-category'
+import { Breadcrumbs } from '@graphcommerce/next-ui'
+import { BreadcrumbsJsonLd } from '@graphcommerce/next-ui/Breadcrumbs/BreadcrumbsJsonLd'
+import { jsonLdBreadcrumb } from '@graphcommerce/next-ui/Breadcrumbs/jsonLdBreadcrumb'
+import { BreadcrumbsProps } from '@mui/material'
+import { useRouter } from 'next/router'
+import { BreadcrumbList } from 'schema-dts'
+import { productPageCategory } from '../ProductPageCategory/productPageCategory'
+import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
+import { productLink } from '../../hooks/useProductLink'
+
+export type ProductPageBreadcrumbsProps = Omit<BreadcrumbsProps, 'children'> & {
+  breadcrumbsAmount?: number
+  product: ProductPageBreadcrumbFragment
+}
+
+export function ProductPageBreadcrumbs(props: ProductPageBreadcrumbsProps) {
+  const { product, ...breadcrumbsProps } = props
+  const { categories } = product
+  const prev = usePrevPageRouter()
+  const router = useRouter()
+
+  const category =
+    categories?.find((c) => `/${c?.url_path}` === prev?.asPath) ?? productPageCategory(product)
+
+  if (!category || !product.name || !product.url_key) return null
+
+  const breadcrumbs = categoryToBreadcrumbs(category)
+
+  return (
+    <>
+      <BreadcrumbsJsonLd<BreadcrumbList>
+        breadcrumbs={[...breadcrumbs, { name: product.name, href: productLink(product) }]}
+        render={(bc) => ({ '@context': 'https://schema.org', ...jsonLdBreadcrumb(bc, router) })}
+      />
+      <Breadcrumbs breadcrumbs={breadcrumbs} lastIsLink {...breadcrumbsProps} />
+    </>
+  )
+}

package/components/ProductPageBreadcrumb/index.ts

@@ -1,2 +1,3 @@
 export * from './ProductPageBreadcrumb.gql'
 export * from './ProductPageBreadcrumb'
+export * from './ProductPageBreadcrumbs'

package/components/ProductPageDescription/ComplexTextValue.graphql

@@ -1,4 +1,4 @@
-fragment ComplexTextValue on ComplexTextValue @injectable {
+fragment ComplexTextValue on ComplexTextValue {
   html
   __typename
 }

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -26,7 +26,7 @@ export function ProductPageDescription(props: ProductPageDescriptionProps) {
   const { product, right, fontSize = 'subtitle1', maxWidth = 'lg', sx = [] } = props
 
   return (
-    <LazyHydrate>
+    <LazyHydrate height={500}>
       <ColumnTwoWithTop
         maxWidth={maxWidth}
         className={classes.root}

package/components/ProductPageGallery/ProductImage.graphql

@@ -1,4 +1,5 @@
 fragment ProductImage on ProductImage {
   url
   label
+  disabled
 }

package/components/ProductPageGallery/ProductPageGallery.tsx

@@ -22,15 +22,21 @@ export function ProductPageGallery(props: ProductPageGalleryProps) {
   const images =
     media_gallery
       ?.filter(nonNullable)
+      .filter((p) => p.disabled !== true)
       .sort((a, b) => (a.position ?? 0) - (b.position ?? 0))
-      .map((item) => {
-        if (item.__typename === 'ProductImage')
-          return { src: item.url ?? '', alt: item.label || undefined, width, height }
-        return {
-          src: '',
-          alt: `{${item.__typename} not yet supported}`,
-        }
-      }) ?? []
+      .map((item) =>
+        item.__typename === 'ProductImage'
+          ? {
+              src: item.url ?? '',
+              alt: item.label || undefined,
+              width,
+              height,
+            }
+          : {
+              src: '',
+              alt: `{${item.__typename} not yet supported}`,
+            },
+      ) ?? []
 
   return (
     <SidebarGallery

package/components/ProductPagePrice/ProductPagePrice.graphql

@@ -13,12 +13,6 @@ fragment ProductPagePrice on ProductInterface {
       final_price {
         ...Money
       }
-      fixed_product_taxes {
-        amount {
-          ...Money
-        }
-        label
-      }
     }
   }
   price_tiers {

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -1,7 +1,7 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { InContextMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
 import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
 import { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
@@ -13,7 +13,10 @@ import {
 export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector &
   UseCustomizableOptionPriceProps
 
-const { classes } = extendableComponent('ProductPagePrice', ['root', 'discountPrice'] as const)
+const { classes } = extendableComponent('ProductPagePrice', [
+  'finalPrice',
+  'discountPrice',
+] as const)
 
 export function ProductPagePrice(props: ProductPagePriceProps) {
   const { product, index = 0 } = props
@@ -24,23 +27,27 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
     getProductTierPrice(product, quantity) ?? product.price_range.minimum_price.final_price
 
   const priceValue = useCustomizableOptionPrice(props)
+  const regularPrice = product.price_range.minimum_price.regular_price
 
   return (
     <>
-      {product.price_range.minimum_price.regular_price.value !== price.value && (
-        <Box
+      {regularPrice.value !== price.value && (
+        <InContextMask
           component='span'
-          sx={{
-            textDecoration: 'line-through',
-            color: 'text.disabled',
-            marginRight: '8px',
-          }}
           className={classes.discountPrice}
+          skeleton={{ variant: 'text', sx: { width: '3em', transform: 'none' } }}
+          sx={[{ textDecoration: 'line-through', color: 'text.disabled', marginRight: '8px' }]}
         >
-          <Money {...product.price_range.minimum_price.regular_price} />
-        </Box>
+          <Money {...regularPrice} />
+        </InContextMask>
       )}
-      <Money {...price} value={priceValue} />
+      <InContextMask
+        component='span'
+        skeleton={{ variant: 'text', sx: { width: '3em', transform: 'none' } }}
+        className={classes.finalPrice}
+      >
+        <Money {...price} value={priceValue} />
+      </InContextMask>
     </>
   )
 }

package/components/ProductPagePrice/ProductPagePriceTiers.tsx

@@ -1,7 +1,8 @@
+import { InContextMask } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, Theme } from '@mui/material'
+import { SxProps, Theme } from '@mui/material'
 import { ProductPagePriceFragment } from './ProductPagePrice.gql'
 
 export type ProductPagePriceTiersProps = {
@@ -21,7 +22,7 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
   if (!priceTiers.length) return null
 
   return (
-    <Box sx={sx}>
+    <InContextMask sx={sx} variant='rectangular'>
       {priceTiers.map(({ quantity, final_price, discount }) => (
         <div key={quantity}>
           <Trans
@@ -31,6 +32,6 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
           />
         </div>
       ))}
-    </Box>
+    </InContextMask>
   )
 }

package/components/ProductPagePrice/useCustomizableOptionPrice.ts

@@ -1,65 +1,23 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { PriceTypeEnum } from '@graphcommerce/graphql-mesh'
 import { MoneyFragment } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys, isTypename, nonNullable } from '@graphcommerce/next-ui'
-import type { Simplify } from 'type-fest'
 import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
-import type { CustomizableAreaOptionFragment } from '../ProductCustomizable/CustomizableAreaOption.gql'
-import type { CustomizableCheckboxOptionFragment } from '../ProductCustomizable/CustomizableCheckboxOption.gql'
-import type { CustomizableDateOptionFragment } from '../ProductCustomizable/CustomizableDateOption.gql'
-import type { CustomizableDropDownOptionFragment } from '../ProductCustomizable/CustomizableDropDownOption.gql'
-import type { CustomizableFieldOptionFragment } from '../ProductCustomizable/CustomizableFieldOption.gql'
-import type { CustomizableFileOptionFragment } from '../ProductCustomizable/CustomizableFileOption.gql'
-import type { CustomizableMultipleOptionFragment } from '../ProductCustomizable/CustomizableMultipleOption.gql'
-import { CustomizableRadioOptionFragment } from '../ProductCustomizable/CustomizableRadioOption.gql'
-import { ProductCustomizable_SimpleProduct_Fragment } from '../ProductCustomizable/ProductCustomizable.gql'
+import {
+  productCustomizableSelectors,
+  CustomizableProductOptionBase,
+  OptionValueSelector,
+  AnyOption,
+  SelectorsProp,
+} from '../ProductCustomizable/productCustomizableSelectors'
 import { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
 
-type AnyOption = NonNullable<
-  NonNullable<ProductCustomizable_SimpleProduct_Fragment['options']>[number]
->
-type OptionValueSelector = {
-  [T in AnyOption as T['__typename']]: (option: T) => Option | Option[]
-}
-
-const defaultSelectors = {
-  CustomizableAreaOption: (o: CustomizableAreaOptionFragment) => o.areaValue,
-  CustomizableCheckboxOption: (o: CustomizableCheckboxOptionFragment) => o.checkboxValue,
-  CustomizableFileOption: (o: CustomizableFileOptionFragment) => o.fileValue,
-  CustomizableDateOption: (o: CustomizableDateOptionFragment) => o.dateValue,
-  CustomizableDropDownOption: (o: CustomizableDropDownOptionFragment) => o.dropdownValue,
-  CustomizableFieldOption: (o: CustomizableFieldOptionFragment) => o.fieldValue,
-  CustomizableMultipleOption: (o: CustomizableMultipleOptionFragment) => o.multipleValue,
-  CustomizableRadioOption: (o: CustomizableRadioOptionFragment) => o.radioValue,
-}
-
-type MissingOptionValueSelectors = Omit<OptionValueSelector, keyof typeof defaultSelectors>
-type DefinedOptionValueSelectors = Partial<Pick<OptionValueSelector, keyof typeof defaultSelectors>>
-
-type Selectors = Simplify<
-  keyof MissingOptionValueSelectors extends never
-    ? (MissingOptionValueSelectors & DefinedOptionValueSelectors) | undefined
-    : MissingOptionValueSelectors & DefinedOptionValueSelectors
->
-
 export type UseCustomizableOptionPriceProps = {
   product: ProductPagePriceFragment
 } & AddToCartItemSelector &
-  (keyof MissingOptionValueSelectors extends never
-    ? { selectors?: Selectors }
-    : { selectors: Selectors })
-
-type Option =
-  | {
-      price?: number | null | undefined
-      price_type?: PriceTypeEnum | null | undefined
-      uid?: string | null | undefined
-    }
-  | undefined
-  | null
+  SelectorsProp
 
-function calcOptionPrice(option: Option, product: MoneyFragment) {
+function calcOptionPrice(option: CustomizableProductOptionBase, product: MoneyFragment) {
   if (!option?.price) return 0
   switch (option.price_type) {
     case 'DYNAMIC':
@@ -81,7 +39,7 @@ export function useCustomizableOptionPrice(props: UseCustomizableOptionPriceProp
     getProductTierPrice(product, cartItem?.quantity) ??
     product.price_range.minimum_price.final_price
 
-  const allSelectors: OptionValueSelector = { ...defaultSelectors, ...selectors }
+  const allSelectors: OptionValueSelector = { ...productCustomizableSelectors, ...selectors }
 
   if (isTypename(product, ['GroupedProduct'])) return price.value
   if (!product.options || product.options.length === 0) return price.value
@@ -95,7 +53,7 @@ export function useCustomizableOptionPrice(props: UseCustomizableOptionPriceProp
 
     const selector = allSelectors[productOption.__typename] as
       | undefined
-      | ((option: AnyOption) => Option | Option[])
+      | ((option: AnyOption) => CustomizableProductOptionBase | CustomizableProductOptionBase[])
     const value = selector ? selector(productOption) : null
 
     if (!value) return 0

package/components/ProductShortDescription/ProductShortDescription.tsx

@@ -13,6 +13,8 @@ export function ProductShortDescription(props: ProductShortDescriptionProps) {
   const { product, sx = [] } = props
   const { short_description } = product
 
+  if (!short_description?.html) return null
+
   return (
     <Typography
       variant='body1'

package/components/ProductWeight/ProductWeight.tsx

@@ -1,19 +1,22 @@
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { useNumberFormat } from '@graphcommerce/next-ui'
+import { UnitFormat, UnitFormatProps } from '@graphcommerce/next-ui'
 import { ProductWeightFragment } from './ProductWeight.gql'
 
-export function ProductWeight(props: ProductWeightFragment) {
-  const { weight } = props
+export type ProductWeightProps = Omit<UnitFormatProps, 'unit'> & { product: ProductWeightFragment }
+
+export function ProductWeight(props: ProductWeightProps) {
+  const { product, ...rest } = props
+
   const { data: conf } = useQuery(StoreConfigDocument)
-  const unit = conf?.storeConfig?.weight_unit ?? ''
 
-  const numberFormatter = useNumberFormat()
+  if (!product.weight) return null
+
+  const unit = conf?.storeConfig?.weight_unit === 'lbs' ? 'pound' : 'kilogram'
 
-  if (!numberFormatter || !weight) return null
   return (
-    <>
-      {numberFormatter.format(weight)} {unit}
-    </>
+    <UnitFormat unit={unit} {...rest}>
+      {product.weight}
+    </UnitFormat>
   )
 }

package/components/index.ts

@@ -41,3 +41,5 @@ export * from './ProductStaticPaths/getSitemapPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
 export * from './ProductWeight/ProductWeight'
 export * from './ProductListPrice'
+export * from './ProductListSuggestions/ProductListSuggestions'
+export * from './ProductListSuggestions/ProductListSuggestions.gql'