@graphcommerce/magento-product 9.1.0-canary.18 → 9.1.0-canary.19

package/components/ProductCustomizable/CustomizableFieldOption.tsx

@@ -1,65 +1,51 @@
-import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement, useWatch } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import { SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
+import { CustomizablePrice } from './CustomizablePrice'
 
 export type CustomizableFieldOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableFieldOption']
 >
 
 export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
-  const { uid, required, optionIndex, index, title, fieldValue, productPrice, currency } = props
-  const { control, register, resetField, getValues } = useFormAddProductsToCart()
+  const { uid, required, index, title: label, fieldValue, productPrice, currency } = props
+  const { control } = useFormAddProductsToCart()
 
+  const name = `cartItems.${index}.entered_options_record.${uid}` as const
   if (!fieldValue) return null
 
   const maxLength = fieldValue.max_characters ?? 0
   return (
     <Box>
-      <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
-      <input
-        type='hidden'
-        {...register(`cartItems.${index}.entered_options.${optionIndex}.uid`)}
-        value={uid}
+      <SectionHeader
+        labelLeft={
+          <>
+            {label} {required && ' *'}
+          </>
+        }
+        sx={{ mt: 0 }}
       />
       <TextFieldElement
         sx={{ width: '100%' }}
         color='primary'
         multiline
         control={control}
-        name={`cartItems.${index}.entered_options.${optionIndex}.value`}
+        name={name}
         required={Boolean(required)}
         InputProps={{
-          endAdornment:
-            fieldValue.price === 0
-              ? null
-              : fieldValue.price && (
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      typography: 'body1',
-                      '&.sizeMedium': { typographty: 'subtitle1' },
-                      '&.sizeLarge': { typography: 'h6' },
-                      color: getValues(`cartItems.${index}.entered_options.${optionIndex}.value`)
-                        ? 'text.primary'
-                        : 'text.secondary',
-                    }}
-                  >
-                    {/* Change fontFamily so the + is properly outlined */}
-                    <span style={{ fontFamily: 'arial', paddingTop: '1px' }}>+{'\u00A0'}</span>
-                    <Money
-                      value={
-                        fieldValue.price_type === 'PERCENT'
-                          ? productPrice * (fieldValue.price / 100)
-                          : fieldValue.price
-                      }
-                      currency={currency}
-                    />
-                  </Box>
-                ),
+          endAdornment: (
+            <CustomizablePrice
+              name={name}
+              productPrice={productPrice}
+              currency={currency}
+              price_type={fieldValue.price_type}
+              value={fieldValue.price}
+            />
+          ),
         }}
         rules={{
           maxLength: {
@@ -75,10 +61,6 @@ export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
             maxLength,
           })
         }
-        onChange={(data) => {
-          if (!data.currentTarget.value)
-            resetField(`cartItems.${index}.entered_options.${optionIndex}.value`)
-        }}
       />
     </Box>
   )

package/components/ProductCustomizable/CustomizableMultipleOption.tsx

@@ -6,20 +6,61 @@ import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
+import type { CustomizableMultipleOptionFragment } from './CustomizableMultipleOption.gql'
 
 export type CustomizableMultipleOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableMultipleOption']
 >
 
+type MultipleActionCardProps = Pick<CustomizableMultipleOptionProps, 'productPrice' | 'currency'> &
+  Pick<ActionCardProps, 'value' | 'selected'> & {
+    option: NonNullable<NonNullable<CustomizableMultipleOptionFragment['multipleValue']>[number]>
+  }
+
+function CustomizableMultipleActionCard(props: MultipleActionCardProps) {
+  const { productPrice, currency, option, selected, ...rest } = props
+  const { title, price, price_type } = option
+
+  return (
+    <ActionCard
+      {...rest}
+      selected={selected}
+      title={title}
+      price={
+        price === 0
+          ? null
+          : price && (
+              <Box
+                sx={{
+                  color: selected ? 'text.primary' : 'text.secondary',
+                }}
+              >
+                <span style={{ fontFamily: 'arial' }}>{'+ '}</span>
+                <Money
+                  value={price_type === 'PERCENT' ? productPrice * (price / 100) : price}
+                  currency={currency}
+                />
+              </Box>
+            )
+      }
+    />
+  )
+}
+
 export function CustomizableMultipleOption(props: CustomizableMultipleOptionProps) {
   const { uid, required, index, title: label, multipleValue, currency, productPrice } = props
-  const { control, getValues } = useFormAddProductsToCart()
-
-  const allSelected = getValues(`cartItems.${index}.customizable_options.${uid}`) || []
+  const { control } = useFormAddProductsToCart()
 
   return (
     <Box>
-      <SectionHeader labelLeft={label} sx={{ mt: 0 }} />
+      <SectionHeader
+        labelLeft={
+          <>
+            {label} {required && ' *'}
+          </>
+        }
+        sx={{ mt: 0 }}
+      />
       <ActionCardListForm
         sx={(theme) => ({
           mt: theme.spacings.xxs,
@@ -31,37 +72,15 @@ export function CustomizableMultipleOption(props: CustomizableMultipleOptionProp
             : false,
         }}
         control={control}
-        render={ActionCard}
-        name={`cartItems.${index}.customizable_options.${uid}`}
-        items={filterNonNullableKeys(multipleValue, ['title']).map(
-          (multipleVal) =>
-            ({
-              value: multipleVal.uid,
-              title: multipleVal.title,
-              price:
-                multipleVal.price === 0
-                  ? null
-                  : multipleVal.price && (
-                      <Box
-                        sx={{
-                          color: allSelected.includes(multipleVal.uid)
-                            ? 'text.primary '
-                            : 'text.secondary',
-                        }}
-                      >
-                        <span style={{ fontFamily: 'arial' }}>{'+ '}</span>
-                        <Money
-                          value={
-                            multipleVal.price_type === 'PERCENT'
-                              ? productPrice * (multipleVal.price / 100)
-                              : multipleVal.price
-                          }
-                          currency={currency}
-                        />
-                      </Box>
-                    ),
-            }) satisfies ActionCardProps,
-        )}
+        render={CustomizableMultipleActionCard}
+        name={`cartItems.${index}.selected_options_record.${uid}`}
+        items={filterNonNullableKeys(multipleValue, ['title']).map((multipleVal) => ({
+          productPrice,
+          currency,
+          title: multipleVal.title ?? '',
+          value: multipleVal.uid,
+          option: multipleVal,
+        }))}
       />
     </Box>
   )

package/components/ProductCustomizable/CustomizablePrice.tsx

@@ -0,0 +1,40 @@
+import type { Control, FieldName, FieldPath } from '@graphcommerce/ecommerce-ui'
+import { useWatch, type FieldValues } from '@graphcommerce/ecommerce-ui'
+import type { PriceTypeEnum } from '@graphcommerce/graphql-mesh'
+import { Money, type MoneyFragment } from '@graphcommerce/magento-store'
+import { Box } from '@mui/material'
+import { useFormAddProductsToCart, type AddProductsToCartFields } from '../AddProductsToCart'
+
+type CustomizablePriceProps = {
+  price_type: PriceTypeEnum | null | undefined
+  productPrice: number
+  name: FieldPath<AddProductsToCartFields>
+} & MoneyFragment
+
+export function CustomizablePrice(props: CustomizablePriceProps) {
+  const { name, value, currency, price_type, productPrice } = props
+
+  const { control } = useFormAddProductsToCart()
+  const optionValue = !!useWatch({ control, name })
+
+  if (!value) return null
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        typography: 'body1',
+        '&.sizeMedium': { typographty: 'subtitle1' },
+        '&.sizeLarge': { typography: 'h6' },
+        color: optionValue ? 'text.primary' : 'text.secondary',
+      }}
+    >
+      {/* Change fontFamily so the + is properly outlined */}
+      <span style={{ fontFamily: 'arial' }}>+{'\u00A0'}</span>
+      <Money
+        value={price_type === 'PERCENT' ? productPrice * (value / 100) : value}
+        currency={currency}
+      />
+    </Box>
+  )
+}

package/components/ProductCustomizable/CustomizableRadioOption.tsx

@@ -6,63 +6,83 @@ import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
+import type { CustomizableRadioOptionFragment } from './CustomizableRadioOption.gql'
 
 export type CustomizableRadioOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableRadioOption']
 >
 
+type RadioActionCardProps = Pick<CustomizableRadioOptionProps, 'productPrice' | 'currency'> &
+  Pick<ActionCardProps, 'value' | 'selected'> & {
+    option: NonNullable<NonNullable<CustomizableRadioOptionFragment['radioValue']>[number]>
+  }
+
+function CustomizableRadioActionCard(props: RadioActionCardProps) {
+  const { productPrice, currency, value, option, selected, ...rest } = props
+  const { title, price, price_type } = option
+
+  return (
+    <ActionCard
+      {...rest}
+      value={value}
+      title={title}
+      selected={selected}
+      price={
+        price === 0
+          ? null
+          : price && (
+              <Box
+                sx={{
+                  color: selected ? 'text.primary' : 'text.secondary',
+                }}
+              >
+                {/* Change fontFamily so the + is properly outlined */}
+                <span style={{ fontFamily: 'arial' }}>{'+ '}</span>
+                <Money
+                  value={price_type === 'PERCENT' ? productPrice * (price / 100) : price}
+                  currency={currency}
+                />
+              </Box>
+            )
+      }
+    />
+  )
+}
+
 export function CustomizableRadioOption(props: CustomizableRadioOptionProps) {
   const { uid, required, index, title: label, radioValue, currency, productPrice } = props
-  const { control, getValues } = useFormAddProductsToCart()
-
-  const allSelected = getValues(`cartItems.${index}.customizable_options.${uid}`) || []
+  const { control } = useFormAddProductsToCart()
 
   return (
     <Box>
-      <SectionHeader labelLeft={label} sx={{ mt: 0 }} />
+      <SectionHeader
+        labelLeft={
+          <>
+            {label} {required && ' *'}
+          </>
+        }
+        sx={{ mt: 0 }}
+      />
       <ActionCardListForm
         sx={(theme) => ({
           mt: theme.spacings.xxs,
         })}
         layout='stack'
         control={control}
-        render={ActionCard}
-        name={`cartItems.${index}.customizable_options.${uid}`}
+        render={CustomizableRadioActionCard}
+        name={`cartItems.${index}.selected_options_record.${uid}`}
         rules={{
           required: required
             ? i18n._(/* i18n*/ 'Please select a value for ‘{label}’', { label })
             : false,
         }}
-        items={filterNonNullableKeys(radioValue, ['title']).map(
-          (radioVal) =>
-            ({
-              value: radioVal.uid,
-              title: radioVal.title,
-              price:
-                radioVal.price === 0
-                  ? null
-                  : radioVal.price && (
-                      <Box
-                        sx={{
-                          color: allSelected.includes(radioVal.uid)
-                            ? 'text.primary'
-                            : 'text.secondary',
-                        }}
-                      >
-                        {/* Change fontFamily so the + is properly outlined */}
-                        <span style={{ fontFamily: 'arial' }}>{'+ '}</span>
-                        <Money
-                          value={
-                            radioVal.price_type === 'PERCENT'
-                              ? productPrice * (radioVal.price / 100)
-                              : radioVal.price
-                          }
-                          currency={currency}
-                        />
-                      </Box>
-                    ),
-            }) satisfies ActionCardProps,
-        )}
+        items={filterNonNullableKeys(radioValue, ['title']).map((radioVal) => ({
+          productPrice,
+          currency,
+          title: radioVal.title ?? '',
+          value: radioVal.uid,
+          option: radioVal,
+        }))}
       />
     </Box>
   )

package/components/ProductCustomizable/ProductCustomizable.graphql

@@ -2,6 +2,7 @@ fragment ProductCustomizable on CustomizableProductInterface {
   options {
     uid
     __typename
+    sort_order
     ...CustomizableOption
     ...CustomizableAreaOption
     ...CustomizableCheckboxOption

package/components/ProductCustomizable/ProductCustomizable.tsx

@@ -1,4 +1,5 @@
 import { filterNonNullableKeys, RenderType } from '@graphcommerce/next-ui'
+import { useMemo } from 'react'
 import type { AddToCartItemSelector } from '../AddProductsToCart'
 import type { ProductPagePriceFragment } from '../ProductPagePrice'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
@@ -42,14 +43,21 @@ export type ProductCustomizableProps = AddToCartItemSelector & {
 export function ProductCustomizable(props: ProductCustomizableProps) {
   const { product, renderer, index = 0 } = props
 
+  const options = useMemo(
+    () =>
+      filterNonNullableKeys(product.options, ['sort_order']).sort(
+        (a, b) => a.sort_order - b.sort_order,
+      ),
+    [product.options],
+  )
+
   return (
     <>
-      {filterNonNullableKeys(product.options, ['sort_order']).map((option) => (
+      {options.map((option) => (
         <RenderType
           key={option.uid}
           renderer={{ ...defaultRenderer, ...renderer }}
           {...option}
-          optionIndex={option.sort_order + 100}
           index={index}
           currency={product.price_range.minimum_price.final_price.currency}
           productPrice={product.price_range.minimum_price.final_price.value}

package/components/ProductCustomizable/productCustomizableSelectors.ts

@@ -24,9 +24,7 @@ export type AnyOption = NonNullable<
 >
 
 export type OptionValueSelector = {
-  [T in AnyOption as T['__typename']]: (
-    option: T,
-  ) => CustomizableProductOptionBase | CustomizableProductOptionBase[]
+  [T in AnyOption as T['__typename']]: (option: AnyOption) => CustomizableProductOptionBase[]
 }
 
 type MissingOptionValueSelectors = Omit<
@@ -44,12 +42,12 @@ type Selectors = Simplify<
 >
 
 export const productCustomizableSelectors = {
-  CustomizableAreaOption: (o: CustomizableAreaOptionFragment) => o.areaValue,
+  CustomizableAreaOption: (o: CustomizableAreaOptionFragment) => [o.areaValue],
   CustomizableCheckboxOption: (o: CustomizableCheckboxOptionFragment) => o.checkboxValue,
-  CustomizableFileOption: (o: CustomizableFileOptionFragment) => o.fileValue,
-  CustomizableDateOption: (o: CustomizableDateOptionFragment) => o.dateValue,
+  CustomizableFileOption: (o: CustomizableFileOptionFragment) => [o.fileValue],
+  CustomizableDateOption: (o: CustomizableDateOptionFragment) => [o.dateValue],
   CustomizableDropDownOption: (o: CustomizableDropDownOptionFragment) => o.dropdownValue,
-  CustomizableFieldOption: (o: CustomizableFieldOptionFragment) => o.fieldValue,
+  CustomizableFieldOption: (o: CustomizableFieldOptionFragment) => [o.fieldValue],
   CustomizableMultipleOption: (o: CustomizableMultipleOptionFragment) => o.multipleValue,
   CustomizableRadioOption: (o: CustomizableRadioOptionFragment) => o.radioValue,
 }

package/components/ProductListItem/ProductDiscountLabel.tsx

@@ -1,7 +1,7 @@
 import { PercentFormat } from '@graphcommerce/next-ui'
 import type { BoxProps } from '@mui/material'
 import { Box } from '@mui/material'
-import type { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import type { ProductListItemFragment } from '../../graphql'
 
 export type ProductDiscountLabelProps = Pick<ProductListItemFragment, 'price_range'> &
   Omit<BoxProps, 'children'>

package/components/ProductListItem/ProductListItem.tsx

@@ -1,9 +1,9 @@
 import type { ImageProps } from '@graphcommerce/image'
 import { extendableComponent } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
-import { Skeleton, useEventCallback } from '@mui/material'
+import { Skeleton } from '@mui/material'
 import React from 'react'
-import type { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import type { ProductListItemFragment } from '../../graphql'
 import { productLink } from '../../hooks/useProductLink'
 import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
 import { ProductDiscountLabel } from './ProductDiscountLabel'
@@ -18,6 +18,7 @@ import type { ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
 import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
 import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
 import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
+import { ProductNewLabel } from './ProductNewLabel'
 
 const { classes, selectors } = extendableComponent('ProductListItem', [
   'root',
@@ -35,6 +36,7 @@ const { classes, selectors } = extendableComponent('ProductListItem', [
   'placeholder',
   'image',
   'discount',
+  'new',
 ] as const)
 
 type StyleProps = {
@@ -123,6 +125,7 @@ export function ProductListItemReal(props: ProductProps) {
             topLeft={
               <>
                 <ProductDiscountLabel className={classes.discount} price_range={price_range} />
+                <ProductNewLabel className={classes.new} product={props} />
                 {topLeft}
               </>
             }

package/components/ProductListItem/ProductNewLabel.tsx

@@ -0,0 +1,36 @@
+import { toDate } from '@graphcommerce/next-ui/Intl/DateTimeFormat/toDate'
+import { Box, type BoxProps } from '@mui/material'
+import type { ProductListItemFragment } from '../../graphql'
+
+export type ProductNewLabelProps = {
+  product: Pick<ProductListItemFragment, 'new_from_date' | 'new_to_date'>
+} & Omit<BoxProps, 'children'>
+
+export function ProductNewLabel(props: ProductNewLabelProps) {
+  const { product, ...boxProps } = props
+  const { new_from_date, new_to_date } = product
+
+  const from = toDate(new_from_date)
+  const to = toDate(new_to_date)
+  const now = new Date()
+  if (!from || from > now) return null
+  if (to && to < now) return null
+
+  return (
+    <Box
+      {...boxProps}
+      sx={{
+        typography: 'caption',
+        bgcolor: 'text.primary',
+        fontWeight: 'fontWeightBold',
+        border: 1,
+        borderColor: 'divider',
+        padding: '0px 6px',
+        color: 'background.default',
+        display: 'inline-block',
+      }}
+    >
+      New
+    </Box>
+  )
+}

package/components/ProductListItems/renderer.tsx

@@ -1,5 +1,5 @@
 import type { TypeRenderer } from '@graphcommerce/next-ui'
-import type { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import type { ProductListItemFragment } from '../../graphql'
 import { ProductListItem } from '../ProductListItem/ProductListItem'
 
 type SkeletonType = { __typename: 'Skeleton'; uid: string }

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -8,6 +8,7 @@ import {
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Typography } from '@mui/material'
 import type { Variant } from '@mui/material/styles/createTypography'
+import type { ProductListItemRenderer } from '../ProductListItems/renderer'
 import { ProductPageName } from '../ProductPageName'
 import type { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
 
@@ -15,6 +16,7 @@ export type ProductPageDescriptionProps = Omit<ColumnTwoWithTopProps, 'top' | 'l
   sx?: SxProps<Theme>
   fontSize?: 'responsive' | Variant
   product: ProductPageDescriptionFragment
+  productListRenderer: ProductListItemRenderer
 }
 
 const componentName = 'ProductPageDescription'
@@ -23,7 +25,14 @@ const parts = ['root', 'description'] as const
 const { classes } = extendableComponent(componentName, parts)
 
 export function ProductPageDescription(props: ProductPageDescriptionProps) {
-  const { product, right, fontSize = 'subtitle1', maxWidth = 'lg', sx = [] } = props
+  const {
+    product,
+    right,
+    fontSize = 'subtitle1',
+    maxWidth = 'lg',
+    sx = [],
+    productListRenderer,
+  } = props
 
   return (
     <LazyHydrate height={500}>

package/components/ProductPageGallery/ProductPageGallery.tsx

@@ -1,6 +1,8 @@
+import type { MotionImageAspectProps } from '@graphcommerce/framer-scroller/components/MotionImageAspect'
 import type { SidebarGalleryProps, TypeRenderer } from '@graphcommerce/next-ui'
-import { nonNullable, SidebarGallery } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, nonNullable, SidebarGallery } from '@graphcommerce/next-ui'
 import type { ProductPageGalleryFragment } from './ProductPageGallery.gql'
+import { ProductVideo, type ProductVideoProps } from './ProductVideo'
 
 export type ProductPageGalleryRenderers = TypeRenderer<
   NonNullable<NonNullable<ProductPageGalleryFragment['media_gallery']>[0]>
@@ -15,24 +17,25 @@ export function ProductPageGallery(props: ProductPageGalleryProps) {
   const { product, children, aspectRatio: [width, height] = [1532, 1678], ...sidebarProps } = props
   const { media_gallery } = product
 
-  const images =
-    media_gallery
-      ?.filter(nonNullable)
-      .filter((p) => p.disabled !== true)
-      .sort((a, b) => (a.position ?? 0) - (b.position ?? 0))
-      .map((item) =>
-        item.__typename === 'ProductImage'
-          ? {
-              src: item.url ?? '',
-              alt: item.label || undefined,
-              width,
-              height,
-            }
-          : {
-              src: '',
-              alt: `{${item.__typename} not yet supported}`,
-            },
-      ) ?? []
+  const images = filterNonNullableKeys(media_gallery)
+    .filter((p) => p.disabled !== true)
+    .sort((a, b) => (a.position ?? 0) - (b.position ?? 0))
+    .map<MotionImageAspectProps<ProductVideoProps>>((item) => {
+      const src = item.url ?? ''
+      const alt = item.label || undefined
+      if (item.__typename === 'ProductImage') return { src, alt, width, height }
+      return {
+        src,
+        alt,
+        width: 1280,
+        height: 720,
+        sx: { objectFit: 'cover' },
+        Additional: ProductVideo,
+        slotProps: {
+          additional: { video: item, width: 1280, height: 720 },
+        },
+      }
+    })
 
   return (
     <SidebarGallery

package/components/ProductPageGallery/ProductVideo.graphql

@@ -1,4 +1,5 @@
 fragment ProductVideo on ProductVideo {
+  url
   video_content {
     media_type
     video_description