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

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 { productLink } from '../../hooks/useProductLink'
+import { productPageCategory } from '../ProductPageCategory/productPageCategory'
+import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
+
+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/ProductSpecs/ProductSpecs.graphql

@@ -1,5 +1,5 @@
 fragment ProductSpecs on Products {
-  aggregations {
+  aggregations @skip(if: $useCustomAttributes) {
     attribute_code
     count
     label
@@ -9,4 +9,24 @@ fragment ProductSpecs on Products {
       value
     }
   }
+  items {
+    __typename
+    uid
+    ...ProductListItem
+    custom_attributesV2(filters: { is_visible_on_front: true }) @include(if: $useCustomAttributes) {
+      items {
+        code
+        __typename
+        ... on AttributeValue {
+          value
+        }
+        ... on AttributeSelectedOptions {
+          selected_options {
+            label
+            value
+          }
+        }
+      }
+    }
+  }
 }

package/components/ProductSpecs/ProductSpecs.tsx

@@ -1,6 +1,8 @@
 import { responsiveVal, Row, SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme } from '@mui/material'
 import { ProductSpecsFragment } from './ProductSpecs.gql'
+import { ProductSpecsAggregations } from './ProductSpecsAggregations'
+import { ProductSpecsCustomAttributes } from './ProductSpecsCustomAttributes'
 
 export type ProductSpecsProps = ProductSpecsFragment & {
   title?: string
@@ -13,7 +15,7 @@ const parts = ['root', 'specs', 'options'] as const
 const { classes } = extendableComponent(name, parts)
 
 export function ProductSpecs(props: ProductSpecsProps) {
-  const { aggregations, title, children, sx = [] } = props
+  const { aggregations, items, 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',
@@ -46,16 +48,8 @@ export function ProductSpecs(props: ProductSpecsProps) {
             },
           })}
         >
-          {specs?.map((aggregation) => (
-            <li key={aggregation?.attribute_code}>
-              <div>{aggregation?.label}</div>
-              <Box className={classes.options} sx={{ display: 'grid', gridAutoFlow: 'row' }}>
-                {aggregation?.options?.map((option) => (
-                  <span key={option?.value}>{option?.label === '1' ? 'Yes' : option?.label}</span>
-                ))}
-              </Box>
-            </li>
-          ))}
+          {aggregations && <ProductSpecsAggregations aggregations={aggregations} />}
+          {items && <ProductSpecsCustomAttributes items={items} />}
         </Box>
         {children}
       </SectionContainer>

package/components/ProductSpecs/ProductSpecsAggregations.tsx

@@ -0,0 +1,34 @@
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { ProductSpecsFragment } from './ProductSpecs.gql'
+
+const name = 'ProductSpecs' as const
+const parts = ['root', 'specs', 'options'] as const
+const { classes } = extendableComponent(name, parts)
+
+export type ProductSpecsAggregationsProps = Pick<ProductSpecsFragment, 'aggregations'>
+
+export function ProductSpecsAggregations(props: ProductSpecsAggregationsProps) {
+  const { aggregations } = 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',
+  )
+
+  if (specs?.length === 0) return null
+
+  return (
+    <>
+      {specs?.map((aggregation) => (
+        <li key={aggregation?.attribute_code}>
+          <div>{aggregation?.label}</div>
+          <Box className={classes.options} sx={{ display: 'grid', gridAutoFlow: 'row' }}>
+            {aggregation?.options?.map((option) => (
+              <span key={option?.value}>{option?.label === '1' ? 'Yes' : option?.label}</span>
+            ))}
+          </Box>
+        </li>
+      ))}
+    </>
+  )
+}

package/components/ProductSpecs/ProductSpecsCustomAttributes.tsx

@@ -0,0 +1,45 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { extendableComponent, ListFormat } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { ProductSpecsFragment } from './ProductSpecs.gql'
+import { ProductSpecsTypesDocument } from './ProductSpecsTypes.gql'
+
+const name = 'ProductSpecs' as const
+const parts = ['root', 'specs', 'options'] as const
+const { classes } = extendableComponent(name, parts)
+
+export type ProductSpecsCustomAttributesProps = Pick<ProductSpecsFragment, 'items'>
+
+export function ProductSpecsCustomAttributes(props: ProductSpecsCustomAttributesProps) {
+  const { items } = props
+
+  const specs = items?.[0]?.custom_attributesV2?.items
+
+  const productSpecsTypes = useQuery(ProductSpecsTypesDocument)
+
+  if (items?.length === 0) return null
+
+  return (
+    <>
+      {specs?.map((item) => (
+        <li key={item?.code}>
+          <div>
+            {productSpecsTypes?.data?.attributesList?.items?.find(
+              (type) => type?.code === item?.code,
+            )?.label ?? item?.code}
+          </div>
+          <Box className={classes.options}>
+            {item?.__typename === 'AttributeSelectedOptions' && (
+              <ListFormat listStyle='long' type='unit'>
+                {item?.selected_options?.map((option) => (
+                  <span key={option?.value}>{option?.label === '1' ? 'Yes' : option?.label}</span>
+                ))}
+              </ListFormat>
+            )}
+            {item?.__typename === 'AttributeValue' && <span key={item?.value}>{item.value}</span>}
+          </Box>
+        </li>
+      ))}
+    </>
+  )
+}

package/components/ProductSpecs/ProductSpecsTypes.graphql

@@ -0,0 +1,8 @@
+query ProductSpecsTypes {
+  attributesList(entityType: CATALOG_PRODUCT, filters: { is_visible_on_front: true }) {
+    items {
+      code
+      label
+    }
+  }
+}

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -22,7 +22,7 @@ export async function getProductStaticPaths(
   const { data } = await query
   const totalPages = data.products?.page_info?.total_pages ?? 1
 
-  if (totalPages > 1 && import.meta.graphCommerce.limitSsg !== true) {
+  if (totalPages > 1 && options.limit !== true) {
     for (let i = 2; i <= totalPages; i++) {
       pages.push(
         client.query({

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'

package/hooks/useProductLink.ts

@@ -4,6 +4,10 @@ export type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
 
 export const productRoute = import.meta.graphCommerce.productRoute ?? '/p/'
 
+export function productPath(urlKey: string) {
+  return `${productRoute}${urlKey}`
+}
+
 export function productLink(link: ProductLinkProps) {
   return `${productRoute}${link.url_key}`
 }