@graphcommerce/magento-product 8.1.0-canary.3 → 8.1.0-canary.31

package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx

@@ -12,6 +12,7 @@ export type ProductFiltersProLayoutSidebarProps = {
   count?: React.ReactNode
   pagination: React.ReactNode
   header?: React.ReactNode
+  children?: React.ReactNode
 } & Partial<OwnerProps>
 
 type OwnerProps = {
@@ -32,6 +33,7 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
     sidebarFilters,
     header,
     headerPosition = 'before',
+    children,
   } = props
 
   const { form, submit } = useProductFiltersPro()
@@ -47,8 +49,6 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
 
       <FormAutoSubmit control={form.control} disabled={autoSubmitDisabled} submit={submit} />
 
-      <StickyBelowHeader sx={{ display: { md: 'none' } }}>{horizontalFilters}</StickyBelowHeader>
-
       <Container
         maxWidth={false}
         className={classes.content}
@@ -56,12 +56,16 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
           display: 'grid',
           gridTemplate: {
             xs: `
-              "beforeContent" auto
-              "items"         auto
-              "afterContent"  auto
+              "content"           auto
+              "horizontalFilters" auto
+              "beforeContent"     auto
+              "items"             auto
+              "afterContent"      auto
             `,
-            md: `
-              "topleft beforeContent" auto
+            md: ` 
+              "topleft content"   auto
+              "sidebar content"   auto
+              "sidebar beforeContent" auto
               "sidebar items"         min-content
               "sidebar afterContent"  1fr
               /300px   auto
@@ -87,6 +91,10 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
             {sidebarFilters}
           </Box>
         )}
+        {children && <Box gridArea='content'>{children}</Box>}
+        <StickyBelowHeader sx={{ display: { md: 'none', gridArea: 'horizontalFilters' } }}>
+          {horizontalFilters}
+        </StickyBelowHeader>
 
         <Box gridArea='beforeContent' sx={{ mt: { md: 0 } }}>
           {count}

package/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx

@@ -11,11 +11,13 @@ import {
 import { Trans } from '@lingui/react'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
+import { SxProps, Theme } from '@mui/material'
 
-export type ProductFiltersProLimitSectionProps = Record<string, unknown>
+export type ProductFiltersProLimitSectionProps = { sx?: SxProps<Theme> }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSectionProps) {
+  const { sx } = props
   const { form } = useProductFiltersPro()
   const { control } = form
   const activePageSize = useWatch({ control, name: 'pageSize' })
@@ -38,6 +40,7 @@ export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSecti
 
   return (
     <ActionCardAccordion
+      sx={sx}
       defaultExpanded={!!activePageSize}
       summary={<Trans id='Per page' />}
       details={

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -1,53 +1,34 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
   ActionCard,
   ActionCardListForm,
   ChipOverlayOrPopper,
   ChipOverlayOrPopperProps,
-  filterNonNullableKeys,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { useMemo } from 'react'
-import { ProductListSortFragment } from '../ProductListSort/ProductListSort.gql'
 import { useProductFiltersPro } from './ProductFiltersPro'
+import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
 
-export type ProductListActionSortProps = ProductListSortFragment &
+export type ProductListActionSortProps = UseProductFiltersProSortProps &
   Omit<
     ChipOverlayOrPopperProps,
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
   >
 
 export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
-  const { sort_fields, chipProps, ...rest } = props
-  const { params, form, submit } = useProductFiltersPro()
-  const { control } = form
-  const activeSort = useWatch({ control, name: 'sort' })
-
-  const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
-  const defaultSort = storeConfigQuery?.storeConfig?.catalog_default_sort_by
-
-  const options = useMemo(
-    () =>
-      filterNonNullableKeys(sort_fields?.options, ['value', 'label']).map((option) => ({
-        ...option,
-        value: option.value === defaultSort ? null : option.value,
-        title: option.label,
-      })),
-    [defaultSort, sort_fields?.options],
-  )
+  const { sort_fields, chipProps, category, ...rest } = props
+  const { submit, form } = useProductFiltersPro()
+  const { options, showReset, selected, selectedLabel } = useProductFiltersProSort(props)
 
   return (
     <ChipOverlayOrPopper
       {...rest}
       overlayProps={{ sizeSm: 'minimal', sizeMd: 'minimal', ...rest.overlayProps }}
       label={<Trans id='Sort By' />}
-      selected={Boolean(params.sort)}
-      selectedLabel={options.find((option) => option.value === params.sort)?.label}
+      selected={selected}
+      selectedLabel={selectedLabel}
       onApply={submit}
       onReset={
-        activeSort
+        showReset
           ? () => {
               form.setValue('sort', null)
               form.setValue('dir', null)
@@ -60,7 +41,7 @@ export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
     >
       {() => (
         <ActionCardListForm
-          control={control}
+          control={form.control}
           name='sort'
           layout='list'
           variant='default'

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -0,0 +1,15 @@
+import { SortEnum } from '@graphcommerce/graphql-mesh'
+import { IconSvg, iconArrowDown, iconArrowUp } from '@graphcommerce/next-ui'
+
+type Props = {
+  sortDirection: SortEnum | null
+}
+
+export function ProductFiltersProSortDirectionArrow({ sortDirection }: Props) {
+  return (
+    <IconSvg
+      src={sortDirection === 'ASC' || sortDirection === null ? iconArrowUp : iconArrowDown}
+      sx={{ display: 'flex' }}
+    />
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,46 +1,26 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import {
-  ActionCard,
-  ActionCardAccordion,
-  ActionCardListForm,
-  Button,
-  filterNonNullableKeys,
-} from '@graphcommerce/next-ui'
+import { ActionCard, ActionCardAccordion, ActionCardListForm, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { useMemo } from 'react'
-import { ProductListSortFragment } from '../ProductListSort/ProductListSort.gql'
+import { SxProps, Theme } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
+import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
 
-export type ProductFiltersProSortSectionProps = ProductListSortFragment
+export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps & {
+  sx?: SxProps<Theme>
+}
 
 export function ProductFiltersProSortSection(props: ProductFiltersProSortSectionProps) {
-  const { sort_fields } = props
+  const { sx } = props
   const { form } = useProductFiltersPro()
-  const { control } = form
-  const activeSort = useWatch({ control, name: 'sort' })
-
-  const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
-  const defaultSort = storeConfigQuery?.storeConfig?.catalog_default_sort_by
-
-  const options = useMemo(
-    () =>
-      filterNonNullableKeys(sort_fields?.options, ['value', 'label']).map((option) => ({
-        ...option,
-        value: option.value === defaultSort ? null : option.value,
-        title: option.label,
-      })),
-    [defaultSort, sort_fields?.options],
-  )
+  const { options, showReset, selected } = useProductFiltersProSort(props)
 
   return (
     <ActionCardAccordion
-      defaultExpanded={!!activeSort}
+      sx={sx}
+      defaultExpanded={selected}
       summary={<Trans id='Sort By' />}
       details={
         <ActionCardListForm
-          control={control}
+          control={form.control}
           name='sort'
           layout='list'
           variant='default'
@@ -50,7 +30,7 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
         />
       }
       right={
-        activeSort ? (
+        showReset ? (
           <Button
             color='primary'
             onClick={(e) => {

package/components/ProductFiltersPro/index.ts

@@ -1,11 +1,17 @@
 export * from './ProductFilterEqualChip'
+export * from './ProductFilterEqualSection'
 export * from './ProductFilterRangeChip'
+export * from './ProductFilterRangeSection'
 export * from './ProductFiltersPro'
 export * from './ProductFiltersProAllFiltersChip'
 export * from './ProductFiltersProAllFiltersSidebar'
+export * from './ProductFiltersProCategorySection'
 export * from './ProductFiltersProChips'
 export * from './ProductFiltersProClearAll'
 export * from './ProductFiltersProLayoutSidebar'
 export * from './ProductFiltersProLimitChip'
 export * from './ProductFiltersProLimitSection'
 export * from './ProductFiltersProSortChip'
+export * from './ProductFiltersProSortDirectionArrow'
+export * from './ProductFiltersProAggregations'
+export * from './ProductFiltersProSortSection'

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -0,0 +1,76 @@
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+import { useMemo } from 'react'
+import { CategoryDefaultFragment } from '../ProductListItems/CategoryDefault.gql'
+import { ProductFilterParams } from '../ProductListItems/filterTypes'
+import { ProductListSortFragment } from '../ProductListSort'
+import { useProductFiltersPro } from './ProductFiltersPro'
+import type { ProductListActionSortProps } from './ProductFiltersProSortChip'
+import { ProductFiltersProSortDirectionArrow } from './ProductFiltersProSortDirectionArrow'
+
+const exclude = ['relevance', 'position']
+
+export type UseProductFiltersProSortProps = ProductListSortFragment & {
+  category?: CategoryDefaultFragment
+}
+
+export function useProductFiltersProSort(props: ProductListActionSortProps) {
+  const { sort_fields, category } = props
+
+  const { params, form } = useProductFiltersPro()
+  const { control, setValue } = form
+
+  const sortFields = useMemo(
+    () =>
+      filterNonNullableKeys(sort_fields?.options).map((o) =>
+        !category?.uid && o.value === 'position'
+          ? { value: 'relevance', label: i18n._(/* i18n*/ 'Relevance') }
+          : o,
+      ),
+    [category?.uid, sort_fields?.options],
+  )
+  const availableSortBy = category?.available_sort_by ?? sortFields.map((o) => o.value)
+
+  const conf = useQuery(StoreConfigDocument).data?.storeConfig
+  const defaultSortBy = (
+    category ? category.default_sort_by ?? conf?.catalog_default_sort_by ?? 'position' : 'relevance'
+  ) as ProductFilterParams['sort']
+
+  const formSort = useWatch({ control, name: 'sort' })
+  const formDirection = useWatch({ control, name: 'dir' })
+  const showReset =
+    (formDirection !== null || formSort !== null) &&
+    Boolean(formSort !== defaultSortBy || formDirection === 'DESC')
+  const selected = Boolean(params.sort && (params.sort !== defaultSortBy || params.dir === 'DESC'))
+
+  const options = useMemo(
+    () =>
+      sortFields
+        .filter((o) => availableSortBy.includes(o.value))
+        .map((option) => {
+          const value = option.value === defaultSortBy ? null : option.value
+          const showSort = formSort === value && !exclude.includes(option.value)
+
+          return {
+            ...option,
+            value,
+            title: option.label,
+            ...(showSort && {
+              onClick: () => setValue('dir', formDirection === 'DESC' ? null : 'DESC'),
+              price: <ProductFiltersProSortDirectionArrow sortDirection={formDirection} />,
+            }),
+          }
+        }),
+    [sortFields, availableSortBy, defaultSortBy, formSort, formDirection, setValue],
+  )
+
+  return {
+    options,
+    selected,
+    showReset,
+    selectedLabel: options.find((option) => option.value === params.sort)?.label,
+  }
+}

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -97,7 +97,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
           top: theme.page.vertical,
           zIndex: 9,
           margin: '0 auto',
-          maxWidth: `calc(100% - 96px - ${theme.spacings.sm} * 2)`,
+
           [theme.breakpoints.down('md')]: {
             textAlign: 'center',
             maxWidth: 'unset',
@@ -136,8 +136,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
             className={classes.scroller}
             hideScrollbar
             sx={(theme) => ({
-              paddingLeft: theme.page.horizontal,
-              paddingRight: theme.page.horizontal,
+              px: theme.page.horizontal,
               paddingBottom: '1px',
               [theme.breakpoints.up('md')]: {
                 borderRadius: '99em',
@@ -145,7 +144,6 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
                 paddingRight: '8px',
               },
               py: '5px',
-
               columnGap: '6px',
               gridAutoColumns: 'min-content',
             })}

package/components/ProductListItems/CategoryDefault.graphql

@@ -0,0 +1,5 @@
+fragment CategoryDefault on CategoryInterface {
+  uid
+  default_sort_by
+  available_sort_by
+}

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,7 +1,7 @@
 import { LazyHydrate, RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import { Box, BoxProps } from '@mui/material'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
-import { AddProductsToCartForm } from '../../index'
+import { AddProductsToCartForm } from '../AddProductsToCart'
 import { ProductListItemProps } from '../ProductListItem/ProductListItem'
 import { ProductListItemRenderer } from './renderer'
 

package/components/ProductListItems/filterTypes.tsx

@@ -31,7 +31,7 @@ export type ProductFilterParams = {
 
 export function toFilterParams(params: ProductListParams): ProductFilterParams {
   const [sortKey] = Object.keys(params.sort) as [keyof ProductAttributeSortInput]
-  const dir = params.sort[sortKey] as SortEnum | undefined
+  const dir = params.sort[sortKey]?.toUpperCase() as SortEnum | undefined
 
   return {
     ...params,

package/components/ProductListItems/filteredProductList.tsx

@@ -35,7 +35,7 @@ export function parseParams(
     }
     if (param === 'dir') {
       const [sortBy] = Object.keys(categoryVariables.sort)
-      if (sortBy) categoryVariables.sort[sortBy] = value as SortEnum
+      if (sortBy) categoryVariables.sort[sortBy] = value?.toUpperCase() as SortEnum
       return undefined
     }
 

package/components/ProductListItems/productListApplyCategoryDefaults.ts

@@ -0,0 +1,28 @@
+import { StoreConfigQuery } from '@graphcommerce/magento-store'
+import { CategoryDefaultFragment } from './CategoryDefault.gql'
+import { ProductListParams } from './filterTypes'
+import { cloneDeep } from '@graphcommerce/graphql'
+
+export async function productListApplyCategoryDefaults(
+  params: ProductListParams | undefined,
+  conf: StoreConfigQuery,
+  category: Promise<CategoryDefaultFragment | null | undefined>,
+) {
+  if (!params) return params
+
+  const newParams = cloneDeep(params)
+  if (!newParams.pageSize) newParams.pageSize = conf.storeConfig?.grid_per_page ?? 12
+
+  if (Object.keys(params.sort).length === 0) {
+    const categorySort = (await category)?.default_sort_by as keyof ProductListParams['sort']
+    const defaultSort = conf.storeConfig?.catalog_default_sort_by as keyof ProductListParams['sort']
+    if (categorySort) newParams.sort = { [categorySort]: 'ASC' }
+    else if (defaultSort) newParams.sort = { [defaultSort]: 'ASC' }
+  }
+
+  if (!newParams.filters.category_uid?.in?.[0]) {
+    newParams.filters.category_uid = { eq: (await category)?.uid }
+  }
+
+  return newParams
+}

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()
@@ -32,9 +35,11 @@ export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
             {breadcrumb.category_name}
           </Link>
         ))}
-      <Link href={`/${category?.url_path}`} underline='hover' color='inherit'>
-        {category?.name}
-      </Link>
+      {category && (
+        <Link href={`/${category?.url_path}`} underline='hover' color='inherit'>
+          {category?.name}
+        </Link>
+      )}
       <Typography color='text.primary'>{name}</Typography>
     </Breadcrumbs>
   )

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/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

@@ -1,4 +1,5 @@
 fragment ProductPagePrice on ProductInterface {
+  __typename
   url_key
   price_range {
     minimum_price {
@@ -30,4 +31,6 @@ fragment ProductPagePrice on ProductInterface {
     }
     quantity
   }
+
+  ...ProductCustomizable
 }

package/components/ProductPagePrice/ProductPagePrice.tsx

@@ -1,12 +1,17 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
 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'
-import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
+import {
+  UseCustomizableOptionPriceProps,
+  useCustomizableOptionPrice,
+} from './useCustomizableOptionPrice'
 
-export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector
+export type ProductPagePriceProps = { product: ProductPagePriceFragment } & AddToCartItemSelector &
+  UseCustomizableOptionPriceProps
 
 const { classes } = extendableComponent('ProductPagePrice', ['root', 'discountPrice'] as const)
 
@@ -18,6 +23,8 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
   const price =
     getProductTierPrice(product, quantity) ?? product.price_range.minimum_price.final_price
 
+  const priceValue = useCustomizableOptionPrice(props)
+
   return (
     <>
       {product.price_range.minimum_price.regular_price.value !== price.value && (
@@ -33,7 +40,7 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
           <Money {...product.price_range.minimum_price.regular_price} />
         </Box>
       )}
-      <Money {...price} />
+      <Money {...price} value={priceValue} />
     </>
   )
 }