@graphcommerce/magento-product 9.1.0-canary.40 → 9.1.0-canary.42

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 9.1.0-canary.42
+
+### Patch Changes
+
+- [`fe2ca31`](https://github.com/graphcommerce-org/graphcommerce/commit/fe2ca31286628b563f7b490a736d698e170edd65) - Solve issue where ProductListItemReal couldn't be replaced or extended without also replacing ProductListItem ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.41
+
+### Patch Changes
+
+- [#2530](https://github.com/graphcommerce-org/graphcommerce/pull/2530) [`2075f33`](https://github.com/graphcommerce-org/graphcommerce/commit/2075f331eec38e894722d8ba4539d865f2db5507) - Add support for `variant=unit` and `variant=total` rendering of `ProductPagePrice` to include the quantity or not. ([@paales](https://github.com/paales))
+
+- [#2530](https://github.com/graphcommerce-org/graphcommerce/pull/2530) [`4c60c55`](https://github.com/graphcommerce-org/graphcommerce/commit/4c60c55a0e83a8635fb2e97622cecd981d894970) - Created a ProductPagePriceLowest component that switches when the configurable option changes. ([@paales](https://github.com/paales))
+
+- [#2530](https://github.com/graphcommerce-org/graphcommerce/pull/2530) [`5900c8d`](https://github.com/graphcommerce-org/graphcommerce/commit/5900c8d56bc9a3e0e4c2c8e61d5ff219877fd9ec) - Solve issue where the tier price doesn't get divided by the quantity, thus showing the wrong price. ([@paales](https://github.com/paales))
+
+- [#2530](https://github.com/graphcommerce-org/graphcommerce/pull/2530) [`f4a20a7`](https://github.com/graphcommerce-org/graphcommerce/commit/f4a20a7bb37701b779dfe7bd3073574eb6c1cab2) - Make sure the product price is updated when the quantity of a product is changed. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.40
 
 ## 9.1.0-canary.39

package/components/AddProductsToCart/findAddedItems.ts

@@ -42,7 +42,7 @@ export function findAddedItems(
             return foundItem
           })
         ) {
-          // console.log("SKU matche, this isn't the configurable")
+          // console.log("SKU matched, this isn't the configurable")
           return false
         }
       }

package/components/ProductListItem/ProductListItem.tsx

@@ -1,202 +1,13 @@
-import type { ImageProps } from '@graphcommerce/image'
-import { extendableComponent } from '@graphcommerce/next-ui'
-import type { SxProps, Theme } from '@mui/material'
-import { Skeleton } from '@mui/material'
-import React from 'react'
-import type { ProductListItemFragment } from '../../graphql'
-import { productLink } from '../../hooks/useProductLink'
-import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
-import { ProductDiscountLabel } from './ProductDiscountLabel'
-import type { ProductListItemImageProps } from './ProductListItemImage'
-import { ProductListItemImage, ProductListItemImageSkeleton } from './ProductListItemImage'
-import type {
-  ProductListItemImageAreaKeys,
-  ProductListsItemImageAreaProps,
-} from './ProductListItemImageContainer'
-import { ProductImageContainer, ProductListItemImageAreas } from './ProductListItemImageContainer'
-import type { ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
-import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
-import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
-import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
-import { ProductNewLabel } from './ProductNewLabel'
+import {
+  ProductListItemReal,
+  ProductListItemSkeleton,
+  type ProductListItemRealProps,
+  type ProductListItemSkeletonProps,
+} from './ProductListItemParts'
 
-const { classes } = extendableComponent('ProductListItem', [
-  'root',
-  'item',
-  'title',
-  'titleContainer',
-  'subtitle',
-  'price',
-  'overlayItems',
-  'topLeft',
-  'topRight',
-  'bottomLeft',
-  'bottomRight',
-  'imageContainer',
-  'placeholder',
-  'image',
-  'discount',
-  'new',
-] as const)
+export type ProductListItemProps = ProductListItemRealProps | ProductListItemSkeletonProps
 
-type StyleProps = {
-  imageOnly?: boolean
-}
-
-export type BaseProps = {
-  imageOnly?: boolean
-  children?: React.ReactNode
-  sx?: SxProps<Theme>
-  onClick?: (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>,
-    item: ProductListItemFragment,
-  ) => void
-  slotProps?: {
-    root?: Partial<ProductListItemLinkOrDivProps>
-    image?: Partial<ProductListItemImageProps>
-    imageAreas?: Partial<ProductListsItemImageAreaProps>
-    titleAndPrice?: Partial<ProductListItemTitleAndPriceProps>
-  }
-} & StyleProps &
-  Omit<ProductListItemTitleAndPriceProps, 'title' | 'classes' | 'children'> &
-  Omit<ProductListItemImageProps, 'classes'> &
-  Omit<ProductListsItemImageAreaProps, 'classes'> &
-  Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
-
-export type SkeletonProps = BaseProps & { __typename: 'Skeleton' }
-
-export type ProductProps = BaseProps & ProductListItemFragment
-
-export type ProductListItemProps = ProductProps | SkeletonProps
-
-/** @public */
-export function ProductListItemReal(props: ProductProps) {
-  const {
-    subTitle,
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight,
-    small_image,
-    name,
-    price_range,
-    children,
-    imageOnly = false,
-    loading,
-    sizes,
-    dontReportWronglySizedImages,
-    aspectRatio = [4, 3],
-    titleComponent = 'h2',
-    sx = [],
-    onClick,
-    slotProps = {},
-  } = props
-
-  return (
-    <ProductListItemLinkOrDiv
-      href={productLink(props)}
-      className={classes.root}
-      onClick={(e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => onClick?.(e, props)}
-      {...slotProps.root}
-      sx={[
-        ...(Array.isArray(sx) ? sx : [sx]),
-        ...(Array.isArray(slotProps.root?.sx) ? slotProps.root.sx : [slotProps.root?.sx]),
-      ]}
-      ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
-    >
-      <ProductImageContainer className={classes.imageContainer}>
-        <ProductListItemImage
-          classes={classes}
-          src={small_image?.url}
-          alt={small_image?.label}
-          aspectRatio={aspectRatio}
-          loading={loading}
-          sizes={sizes}
-          dontReportWronglySizedImages={dontReportWronglySizedImages}
-          {...slotProps.image}
-        />
-
-        {!imageOnly && (
-          <ProductListItemImageAreas
-            topRight={topRight}
-            bottomLeft={bottomLeft}
-            bottomRight={bottomRight}
-            classes={classes}
-            topLeft={
-              <>
-                <ProductDiscountLabel className={classes.discount} price_range={price_range} />
-                <ProductNewLabel className={classes.new} product={props} />
-                {topLeft}
-              </>
-            }
-            {...slotProps.imageAreas}
-          />
-        )}
-      </ProductImageContainer>
-
-      {!imageOnly && (
-        <>
-          <ProductListItemTitleAndPrice
-            classes={classes}
-            titleComponent={titleComponent}
-            title={name}
-            subTitle={subTitle}
-            {...slotProps.titleAndPrice}
-          >
-            <ProductListPrice {...price_range.minimum_price} />
-          </ProductListItemTitleAndPrice>
-          {children}
-        </>
-      )}
-    </ProductListItemLinkOrDiv>
-  )
-}
-
-/** @public */
-export function ProductListItemSkeleton(props: BaseProps) {
-  const {
-    children,
-    imageOnly = false,
-    aspectRatio,
-    titleComponent = 'h2',
-    sx = [],
-    slotProps = {},
-  } = props
-
-  return (
-    <ProductListItemLinkOrDiv
-      sx={sx}
-      className={classes.root}
-      {...slotProps.root}
-      ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
-    >
-      <ProductImageContainer className={classes.imageContainer}>
-        <ProductListItemImageSkeleton
-          classes={classes}
-          aspectRatio={aspectRatio}
-          {...slotProps.image}
-        />
-      </ProductImageContainer>
-
-      {!imageOnly && (
-        <>
-          <ProductListItemTitleAndPrice
-            classes={classes}
-            titleComponent={titleComponent}
-            title={<Skeleton variant='text' sx={{ width: '100px' }} />}
-            subTitle={<Skeleton variant='text' sx={{ width: '20px' }} />}
-            {...slotProps.titleAndPrice}
-          >
-            <Skeleton variant='text' sx={{ width: '20px' }} />
-          </ProductListItemTitleAndPrice>
-          {children}
-        </>
-      )}
-    </ProductListItemLinkOrDiv>
-  )
-}
-
-function isSkeleton(props: ProductListItemProps): props is SkeletonProps {
+function isSkeleton(props: ProductListItemProps): props is ProductListItemSkeletonProps {
   return props.__typename === 'Skeleton'
 }
 
@@ -207,8 +18,3 @@ export function ProductListItem(props: ProductListItemProps) {
     <ProductListItemReal {...props} />
   )
 }
-
-/** @deprecated */
-export type OverlayAreaKeys = ProductListItemImageAreaKeys
-/** @deprecated */
-export type OverlayAreas = ProductListsItemImageAreaProps

package/components/ProductListItem/ProductListItemParts.tsx

@@ -0,0 +1,192 @@
+import type { ImageProps } from '@graphcommerce/image'
+import { extendableComponent } from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Skeleton } from '@mui/material'
+import React from 'react'
+import type { ProductListItemFragment } from '../../graphql'
+import { productLink } from '../../hooks/useProductLink'
+import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
+import { ProductDiscountLabel } from './ProductDiscountLabel'
+import type { ProductListItemImageProps } from './ProductListItemImage'
+import { ProductListItemImage, ProductListItemImageSkeleton } from './ProductListItemImage'
+import type { ProductListsItemImageAreaProps } from './ProductListItemImageContainer'
+import { ProductImageContainer, ProductListItemImageAreas } from './ProductListItemImageContainer'
+import type { ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
+import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
+import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
+import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
+import { ProductNewLabel } from './ProductNewLabel'
+
+const { classes } = extendableComponent('ProductListItem', [
+  'root',
+  'item',
+  'title',
+  'titleContainer',
+  'subtitle',
+  'price',
+  'overlayItems',
+  'topLeft',
+  'topRight',
+  'bottomLeft',
+  'bottomRight',
+  'imageContainer',
+  'placeholder',
+  'image',
+  'discount',
+  'new',
+] as const)
+
+type StyleProps = {
+  imageOnly?: boolean
+}
+
+export type BaseProps = {
+  imageOnly?: boolean
+  children?: React.ReactNode
+  sx?: SxProps<Theme>
+  onClick?: (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>,
+    item: ProductListItemFragment,
+  ) => void
+  slotProps?: {
+    root?: Partial<ProductListItemLinkOrDivProps>
+    image?: Partial<ProductListItemImageProps>
+    imageAreas?: Partial<ProductListsItemImageAreaProps>
+    titleAndPrice?: Partial<ProductListItemTitleAndPriceProps>
+  }
+} & StyleProps &
+  Omit<ProductListItemTitleAndPriceProps, 'title' | 'classes' | 'children'> &
+  Omit<ProductListItemImageProps, 'classes'> &
+  Omit<ProductListsItemImageAreaProps, 'classes'> &
+  Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
+
+export type ProductListItemSkeletonProps = BaseProps & { __typename: 'Skeleton' }
+
+export type ProductListItemRealProps = BaseProps & ProductListItemFragment
+
+/** @public */
+export function ProductListItemReal(props: ProductListItemRealProps) {
+  const {
+    subTitle,
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight,
+    small_image,
+    name,
+    price_range,
+    children,
+    imageOnly = false,
+    loading,
+    sizes,
+    dontReportWronglySizedImages,
+    aspectRatio = [4, 3],
+    titleComponent = 'h2',
+    sx = [],
+    onClick,
+    slotProps = {},
+  } = props
+
+  return (
+    <ProductListItemLinkOrDiv
+      href={productLink(props)}
+      className={classes.root}
+      onClick={(e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => onClick?.(e, props)}
+      {...slotProps.root}
+      sx={[
+        ...(Array.isArray(sx) ? sx : [sx]),
+        ...(Array.isArray(slotProps.root?.sx) ? slotProps.root.sx : [slotProps.root?.sx]),
+      ]}
+      ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
+    >
+      <ProductImageContainer className={classes.imageContainer}>
+        <ProductListItemImage
+          classes={classes}
+          src={small_image?.url}
+          alt={small_image?.label}
+          aspectRatio={aspectRatio}
+          loading={loading}
+          sizes={sizes}
+          dontReportWronglySizedImages={dontReportWronglySizedImages}
+          {...slotProps.image}
+        />
+
+        {!imageOnly && (
+          <ProductListItemImageAreas
+            topRight={topRight}
+            bottomLeft={bottomLeft}
+            bottomRight={bottomRight}
+            classes={classes}
+            topLeft={
+              <>
+                <ProductDiscountLabel className={classes.discount} price_range={price_range} />
+                <ProductNewLabel className={classes.new} product={props} />
+                {topLeft}
+              </>
+            }
+            {...slotProps.imageAreas}
+          />
+        )}
+      </ProductImageContainer>
+
+      {!imageOnly && (
+        <>
+          <ProductListItemTitleAndPrice
+            classes={classes}
+            titleComponent={titleComponent}
+            title={name}
+            subTitle={subTitle}
+            {...slotProps.titleAndPrice}
+          >
+            <ProductListPrice {...price_range.minimum_price} />
+          </ProductListItemTitleAndPrice>
+          {children}
+        </>
+      )}
+    </ProductListItemLinkOrDiv>
+  )
+}
+
+/** @public */
+export function ProductListItemSkeleton(props: BaseProps) {
+  const {
+    children,
+    imageOnly = false,
+    aspectRatio,
+    titleComponent = 'h2',
+    sx = [],
+    slotProps = {},
+  } = props
+
+  return (
+    <ProductListItemLinkOrDiv
+      sx={sx}
+      className={classes.root}
+      {...slotProps.root}
+      ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
+    >
+      <ProductImageContainer className={classes.imageContainer}>
+        <ProductListItemImageSkeleton
+          classes={classes}
+          aspectRatio={aspectRatio}
+          {...slotProps.image}
+        />
+      </ProductImageContainer>
+
+      {!imageOnly && (
+        <>
+          <ProductListItemTitleAndPrice
+            classes={classes}
+            titleComponent={titleComponent}
+            title={<Skeleton variant='text' sx={{ width: '100px' }} />}
+            subTitle={<Skeleton variant='text' sx={{ width: '20px' }} />}
+            {...slotProps.titleAndPrice}
+          >
+            <Skeleton variant='text' sx={{ width: '20px' }} />
+          </ProductListItemTitleAndPrice>
+          {children}
+        </>
+      )}
+    </ProductListItemLinkOrDiv>
+  )
+}

package/components/ProductListItem/index.ts

@@ -0,0 +1,6 @@
+export * from './ProductListItem'
+export * from './ProductListItemParts'
+export * from './ProductListItemImage'
+export * from './ProductListItemTitleAndPrice'
+export * from './ProductListItemImageContainer'
+export * from './ProductListItemLinkOrDiv'

package/components/ProductListPrice/ProductListPrice.tsx

@@ -18,23 +18,19 @@ export type ProductListPriceProps = ProductListPriceFragment &
   Pick<TypographyProps, 'sx'> & {
     prefix?: React.ReactNode
     suffix?: React.ReactNode
+    asNumber?: boolean
   }
 
 export function ProductListPrice(props: ProductListPriceProps) {
-  const { regular_price, final_price, sx, prefix, suffix } = props
+  const { regular_price, final_price, sx, prefix, suffix, asNumber } = props
 
   return (
-    <Box
-      className={classes.root}
-      sx={sxx({ typography: 'body1', display: 'inline-flex', columnGap: '0.3em' }, sx)}
-    >
+    <Box className={classes.root} sx={sxx({ display: 'inline-flex', columnGap: '0.3em' }, sx)}>
       {prefix && (
         <PrivateQueryMask
           component='span'
-          skeleton={{
-            variant: 'text',
-            sx: { width: '3.5em', transform: 'none' },
-          }}
+          sx={{ '&:empty': { display: 'none' } }}
+          skeleton={{ variant: 'text', sx: { width: '2em', transform: 'none' } }}
           className={classes.prefix}
         >
           {prefix}
@@ -44,38 +40,27 @@ export function ProductListPrice(props: ProductListPriceProps) {
       {regular_price.value !== final_price.value && (
         <PrivateQueryMask
           component='span'
-          sx={{
-            textDecoration: 'line-through',
-            color: 'text.disabled',
-          }}
-          skeleton={{
-            variant: 'text',
-            sx: { width: '3.5em', transform: 'none' },
-          }}
+          sx={{ textDecoration: 'line-through', color: 'text.disabled' }}
+          skeleton={{ variant: 'text', sx: { width: '3.5em', transform: 'none' } }}
           className={classes.discountPrice}
         >
-          <Money {...regular_price} />
+          <Money {...regular_price} asNumber={asNumber} />
         </PrivateQueryMask>
       )}
 
       <PrivateQueryMask
         className={classes.finalPrice}
         component='span'
-        skeleton={{
-          variant: 'text',
-          sx: { width: '3.5em', transform: 'none' },
-        }}
+        skeleton={{ variant: 'text', sx: { width: '3.5em', transform: 'none' } }}
       >
-        <Money {...final_price} />
+        <Money {...final_price} asNumber={asNumber} />
       </PrivateQueryMask>
 
       {suffix && (
         <PrivateQueryMask
           component='span'
-          skeleton={{
-            variant: 'text',
-            sx: { width: '3.5em', transform: 'none' },
-          }}
+          sx={{ '&:empty': { display: 'none' } }}
+          skeleton={{ variant: 'text', sx: { width: '2em', transform: 'none' } }}
           className={classes.suffix}
         >
           {suffix}

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -15,6 +15,8 @@ export type ProductPagePriceProps = {
   prefix?: React.ReactNode
   suffix?: React.ReactNode
   sx?: SxProps<Theme>
+  variant?: 'item' | 'total'
+  asNumber?: boolean
 } & AddToCartItemSelector &
   UseCustomizableOptionPriceProps
 
@@ -26,15 +28,18 @@ const { classes } = extendableComponent('ProductPagePrice', [
 ] as const)
 
 export function ProductPagePrice(props: ProductPagePriceProps) {
-  const { product, index = 0, prefix, suffix, sx } = props
+  const { product, index = 0, prefix, suffix, sx, variant = 'item', asNumber } = props
 
   const { control } = useFormAddProductsToCart()
   const quantity = useWatch({ control, name: `cartItems.${index}.quantity` })
   const price =
     getProductTierPrice(product, quantity) ?? product.price_range.minimum_price.final_price
 
-  const priceValue = useCustomizableOptionPrice(props)
+  const priceValue = useCustomizableOptionPrice(props) ?? 0
+  const finalPriceValue = variant === 'total' ? priceValue * quantity : priceValue
   const regularPrice = product.price_range.minimum_price.regular_price
+  const regularPriceValue =
+    variant === 'total' ? (regularPrice.value ?? 0) * quantity : regularPrice.value
 
   return (
     <Box component='span' sx={sxx({ display: 'inline-flex', columnGap: '0.3em' }, sx)}>
@@ -42,10 +47,8 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
         <PrivateQueryMask
           component='span'
           className={classes.prefix}
-          skeleton={{
-            variant: 'text',
-            sx: { width: '3.5em', transform: 'none' },
-          }}
+          sx={{ '&:empty': { display: 'none' } }}
+          skeleton={{ variant: 'text', sx: { width: '3.5em', transform: 'none' } }}
         >
           {prefix}
         </PrivateQueryMask>
@@ -57,7 +60,7 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
           skeleton={{ variant: 'text', sx: { width: '3.5em', transform: 'none' } }}
           sx={[{ textDecoration: 'line-through', color: 'text.disabled' }]}
         >
-          <Money {...regularPrice} />
+          <Money {...regularPrice} value={regularPriceValue} asNumber={asNumber} />
         </PrivateQueryMask>
       )}
       <PrivateQueryMask
@@ -65,16 +68,15 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
         skeleton={{ variant: 'text', sx: { width: '3.5em', transform: 'none' } }}
         className={classes.finalPrice}
       >
-        <Money {...price} value={priceValue} />
+        <Money {...price} value={finalPriceValue} asNumber={asNumber} />
       </PrivateQueryMask>
+
       {suffix && (
         <PrivateQueryMask
           component='span'
           className={classes.suffix}
-          skeleton={{
-            variant: 'text',
-            sx: { width: '3.5em', transform: 'none' },
-          }}
+          sx={{ '&:empty': { display: 'none' } }}
+          skeleton={{ variant: 'text', sx: { width: '3.5em', transform: 'none' } }}
         >
           {suffix}
         </PrivateQueryMask>

package/components/ProductPagePrice/ProductPagePriceLowest.tsx

@@ -0,0 +1,35 @@
+import { filterNonNullableKeys, sxx } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { Box, type SxProps, type Theme } from '@mui/material'
+import { type AddToCartItemSelector } from '../AddProductsToCart'
+import { ProductListPrice } from '../ProductListPrice'
+import { type ProductPagePriceFragment } from './ProductPagePrice.gql'
+import type { UseCustomizableOptionPriceProps } from './useCustomizableOptionPrice'
+
+export type ProductPagePriceLowestProps = {
+  sx?: SxProps<Theme>
+  product: ProductPagePriceFragment
+} & AddToCartItemSelector &
+  UseCustomizableOptionPriceProps
+
+export function ProductPagePriceLowest(props: ProductPagePriceLowestProps) {
+  const { product, sx, index = 0 } = props
+  const priceTiers = filterNonNullableKeys(product.price_tiers, ['quantity', 'final_price'])
+  const lastTier = priceTiers[priceTiers.length - 1]
+
+  const lowestTier = (lastTier?.final_price.value ?? 0) / (lastTier?.quantity ?? 1)
+  const finalPrice = lowestTier
+    ? {
+        value: lowestTier,
+        currency: product.price_range.minimum_price.final_price.currency,
+      }
+    : product.price_range.minimum_price.final_price
+
+  return (
+    <Box component='div' sx={sxx({}, sx)}>
+      <Trans>
+        As low as <ProductListPrice final_price={finalPrice} regular_price={finalPrice} />
+      </Trans>
+    </Box>
+  )
+}

package/components/ProductPagePrice/getProductTierPrice.ts

@@ -1,4 +1,5 @@
 import type { MoneyFragment } from '@graphcommerce/magento-store'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 
 export function getProductTierPrice(
@@ -8,8 +9,12 @@ export function getProductTierPrice(
   const { price_tiers } = price
   let result: MoneyFragment | undefined | null
 
-  price_tiers?.forEach((priceTier) => {
-    if (priceTier?.quantity && quantity >= priceTier?.quantity) result = priceTier?.final_price
+  filterNonNullableKeys(price_tiers, ['quantity', 'final_price'])?.forEach((priceTier) => {
+    if (quantity >= priceTier.quantity)
+      result = {
+        value: (priceTier.final_price.value ?? 0) / priceTier.quantity,
+        currency: priceTier.final_price.currency,
+      }
   })
 
   return result

package/components/ProductPagePrice/index.ts

@@ -1,4 +1,5 @@
 export * from './ProductPagePrice.gql'
 export * from './ProductPagePriceTiers'
+export * from './ProductPagePriceLowest'
 export * from './ProductPagePrice'
 export * from './getProductTierPrice'

package/components/index.ts

@@ -7,11 +7,7 @@ export * from './ProductList/ProductList.gql'
 export * from './ProductListCount/ProductListCount'
 export * from './ProductListFilters'
 export * from './ProductListFiltersContainer/ProductListFiltersContainer'
-export * from './ProductListItem/ProductListItem'
-export * from './ProductListItem/ProductListItemImage'
-export * from './ProductListItem/ProductListItemTitleAndPrice'
-export * from './ProductListItem/ProductListItemImageContainer'
-export * from './ProductListItem/ProductListItemLinkOrDiv'
+export * from './ProductListItem'
 export * from './ProductListItems/filteredProductList'
 export * from './ProductListItems/filterTypes'
 export * from './ProductListItems/getFilterTypes'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.40",
+  "version": "9.1.0-canary.42",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.40",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.40",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.40",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.40",
-    "@graphcommerce/graphql": "^9.1.0-canary.40",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.40",
-    "@graphcommerce/image": "^9.1.0-canary.40",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.40",
-    "@graphcommerce/magento-store": "^9.1.0-canary.40",
-    "@graphcommerce/next-ui": "^9.1.0-canary.40",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.40",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.40",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.42",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.42",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.42",
+    "@graphcommerce/framer-scroller": "^9.1.0-canary.42",
+    "@graphcommerce/graphql": "^9.1.0-canary.42",
+    "@graphcommerce/graphql-mesh": "^9.1.0-canary.42",
+    "@graphcommerce/image": "^9.1.0-canary.42",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.42",
+    "@graphcommerce/magento-store": "^9.1.0-canary.42",
+    "@graphcommerce/next-ui": "^9.1.0-canary.42",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.42",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.42",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",