@graphcommerce/magento-cart-items 9.1.0-canary.18 → 9.1.0-canary.20

package/Api/CartItem.graphql

@@ -14,10 +14,7 @@ fragment CartItem on CartItemInterface {
   }
   prices {
     discounts {
-      amount {
-        ...Money
-      }
-      label
+      ...Discount
     }
     price {
       ...Money
@@ -35,7 +32,6 @@ fragment CartItem on CartItemInterface {
       ...Money
     }
   }
-
   errors {
     code
     message

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 9.1.0-canary.20
+
+## 9.1.0-canary.19
+
+### Patch Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`89e785d`](https://github.com/graphcommerce-org/graphcommerce/commit/89e785de9d62c2f6cf6b2885da72ff63b16fc70d) - Added support for TIME and DATE for the customizable options. Added required stars. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`6b2b44c`](https://github.com/graphcommerce-org/graphcommerce/commit/6b2b44ca853279144d7768067f3462d4d4bf0af1) - Created a new PriceModifiers component that is implemented on CartItems, allowing different product types to render their options in a consistent manner and allow rendering a base price so that the sum in the cart is correct. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`09945ab`](https://github.com/graphcommerce-org/graphcommerce/commit/09945abef32640d1000a1da3f376afe4776d697f) - Solve issue where the UpdateItemQuantity would send a wrong query to the backend. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.18
 
 ## 9.1.0-canary.17

package/components/CartCrosssellsScroller/CartCrosssellsScroller.tsx

@@ -15,7 +15,7 @@ export function CartCrosssellsScroller(props: CartItemCrosssellsProps) {
   if (crossSellItems.length === 0 || crossSellsHideCartItems === true) return null
 
   return (
-    <AddProductsToCartForm redirect={false} disableSuccessSnackbar>
+    <AddProductsToCartForm redirect={false} snackbarProps={{ disableSuccessSnackbar: true }}>
       <ProductScroller
         productListRenderer={renderer}
         items={crossSellItems}

package/components/CartItemActionCard/CartItemActionCard.tsx

@@ -1,7 +1,7 @@
 import { Image } from '@graphcommerce/image'
 import { useDisplayInclTax } from '@graphcommerce/magento-cart/hooks'
-import { productLink, productPath, type ProductLinkProps } from '@graphcommerce/magento-product'
-import { Money } from '@graphcommerce/magento-store'
+import { productPath } from '@graphcommerce/magento-product'
+import { Money, PriceModifiersList, type PriceModifier } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
 import { ActionCard, actionCardImageSizes, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
@@ -10,23 +10,22 @@ import type { CartItemFragment } from '../../Api/CartItem.gql'
 import { RemoveItemFromCart } from '../RemoveItemFromCart/RemoveItemFromCart'
 import { UpdateItemQuantity } from '../UpdateItemQuantity/UpdateItemQuantity'
 
-export type CartItemActionCardProps = { cartItem: CartItemFragment; readOnly?: boolean } & Omit<
-  ActionCardProps,
-  'value' | 'image' | 'price' | 'title' | 'action'
->
-
-/**
- * @deprecated
- * @public
- */
-export function productEditLink(link: ProductLinkProps) {
-  return `/checkout/item/${link.url_key}`
-}
+export type CartItemActionCardProps = {
+  cartItem: CartItemFragment
+  readOnly?: boolean
+  priceModifiers?: PriceModifier[]
+} & Omit<ActionCardProps, 'value' | 'image' | 'title'>
 
 export function CartItemActionCard(props: CartItemActionCardProps) {
-  const { cartItem, sx = [], size = 'responsive', readOnly = false, ...rest } = props
+  const {
+    cartItem,
+    sx = [],
+    size = 'responsive',
+    readOnly = false,
+    priceModifiers,
+    ...rest
+  } = props
   const { uid, quantity, prices, errors, product } = cartItem
-  const { name, thumbnail, url_key } = product
 
   const inclTaxes = useDisplayInclTax()
 
@@ -89,10 +88,10 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
       image={
-        thumbnail?.url && (
+        product.thumbnail?.url ? (
           <Image
             layout='fill'
-            src={thumbnail?.url}
+            src={product.thumbnail.url}
             sx={{
               width: actionCardImageSizes[size],
               height: actionCardImageSizes[size],
@@ -102,12 +101,14 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
             }}
             sizes={actionCardImageSizes[size]}
           />
+        ) : (
+          <Box sx={{ width: actionCardImageSizes[size], height: actionCardImageSizes[size] }} />
         )
       }
       title={
-        url_key ? (
+        product.url_key ? (
           <Link
-            href={productPath(url_key)}
+            href={productPath(product.url_key)}
             underline='hover'
             sx={{
               color: 'inherit',
@@ -115,12 +116,20 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
               maxWidth: 'max-content',
             }}
           >
-            {name}
+            {product.name}
           </Link>
         ) : (
-          name
+          product.name
         )
       }
+      size={size}
+      {...rest}
+      price={
+        <>
+          <Money {...(inclTaxes ? prices?.row_total_including_tax : prices?.row_total)} />
+          {rest.price}
+        </>
+      }
       secondaryAction={
         <>
           <Box
@@ -135,37 +144,51 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
           >
             {readOnly ? quantity : <UpdateItemQuantity uid={uid} quantity={quantity} />}
             {' ⨉ '}
-
             <Money value={price} currency={prices?.price.currency} />
           </Box>
           {hasOptions && !readOnly && (
             <Button
               variant='inline'
               color='secondary'
-              href={`${productEditLink(product)}?cartItemId=${uid}`}
+              href={`/checkout/item/${product.url_key}?cartItemId=${uid}`}
             >
               <Trans id='Edit options' />
             </Button>
           )}
+
+          {rest.secondaryAction}
+
+          {filterNonNullableKeys(errors).map((error) => (
+            <Box sx={{ color: 'error.main', typography: 'body2' }} key={error.message}>
+              {error.message}
+            </Box>
+          ))}
+        </>
+      }
+      details={
+        <>
+          {priceModifiers && priceModifiers.length > 0 && (
+            <PriceModifiersList
+              label={<Trans id='Base Price'>Base price</Trans>}
+              modifiers={[...priceModifiers]}
+              total={prices?.price_including_tax?.value ?? 0}
+              currency={prices?.price.currency}
+            />
+          )}
+          {rest.details}
         </>
       }
-      price={<Money {...(inclTaxes ? prices?.row_total_including_tax : prices?.row_total)} />}
       action={
-        !readOnly && (
-          <RemoveItemFromCart
-            {...cartItem}
-            buttonProps={{ size: size === 'responsive' ? 'large' : size }}
-          />
-        )
+        <>
+          {!readOnly && (
+            <RemoveItemFromCart
+              {...cartItem}
+              buttonProps={{ size: size === 'responsive' ? 'large' : size }}
+            />
+          )}
+          {rest.action}
+        </>
       }
-      size={size}
-      after={filterNonNullableKeys(errors).map((error) => (
-        <Box sx={{ color: 'error.main', typography: 'caption' }} key={error.message}>
-          {error.message}
-        </Box>
-      ))}
-      {...rest}
-      details={<>{rest.details}</>}
     />
   )
 }

package/components/EditCartItem/EditCartItemForm/EditCartItemForm.graphql

@@ -3,6 +3,4 @@ fragment EditCartItemForm on ProductInterface {
   ...ProductWeight
   ...ProductPageItem
   ...ConfigurableOptions
-  ...DownloadableProductOptions
-  ...BundleProductOptions
 }

package/components/SelectedCustomizableOptions/SelectedCustomizableOptions.tsx

@@ -1,4 +1,5 @@
 import { Money } from '@graphcommerce/magento-store'
+import type { PriceModifier } from '@graphcommerce/magento-store/components/PriceModifiers'
 import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import type { CartItemFragment } from '../../Api/CartItem.gql'
@@ -8,6 +9,26 @@ export type SelectedCustomizableOptionProps = CartItemFragment & {
   customizable_options?: (SelectedCustomizableOptionFragment | null | undefined)[] | null
 }
 
+export function selectedCustomizableOptionsModifiers(
+  props: SelectedCustomizableOptionProps,
+): PriceModifier[] {
+  const { customizable_options, product } = props
+
+  return filterNonNullableKeys(customizable_options).map((option) => ({
+    key: option.customizable_option_uid,
+    label: option.label,
+    items: filterNonNullableKeys(option.values).map((value) => ({
+      key: value.customizable_option_value_uid,
+      label: value.label || value.value,
+      amount:
+        value.price.type === 'PERCENT'
+          ? (product.price_range.minimum_price.final_price.value ?? 0) * (value.price.value / 100)
+          : value.price.value,
+    })),
+  }))
+}
+
+/** @deprecated Replaced by `selectedCustomizableOptionsModifiers` */
 export function SelectedCustomizableOptions(props: SelectedCustomizableOptionProps) {
   const { customizable_options, product, prices } = props
   const options = filterNonNullableKeys(customizable_options, [])

package/components/UpdateItemQuantity/UpdateItemQuantity.tsx

@@ -38,7 +38,6 @@ export function UpdateItemQuantity(props: UpdateItemQuantityProps) {
 
   return (
     <form noValidate onSubmit={submit}>
-      <FormAutoSubmit control={control} submit={submit} leading />
       <NumberFieldElement
         control={control}
         name='quantity'
@@ -51,7 +50,8 @@ export function UpdateItemQuantity(props: UpdateItemQuantityProps) {
         sx={sx}
         {...textInputProps}
       />
-      <ApolloCartErrorSnackbar error={error} onClose={() => reset({ quantity })} />
+      <FormAutoSubmit control={control} submit={submit} leading trailing />
+      <ApolloCartErrorSnackbar error={error} onClose={() => reset({ quantity, uid })} />
     </form>
   )
 }

package/package.json

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

package/utils/cartItemToCartItemInput.ts

@@ -1,16 +1,9 @@
-import type {
-  AddProductsToCartFields,
-  AnyOption,
-  CustomizableProductOptionBase,
-  OptionValueSelector,
-  SelectorsProp,
-} from '@graphcommerce/magento-product'
-import { productCustomizableSelectors } from '@graphcommerce/magento-product'
+import type { AddProductsToCartFields, SelectorsProp } from '@graphcommerce/magento-product'
 import { filterNonNullableKeys, isTypename, nonNullable } from '@graphcommerce/next-ui'
 import type { CartItemFragment } from '../Api/CartItem.gql'
 import type { EditCartItemFormFragment } from '../components/EditCartItem/EditCartItemForm/EditCartItemForm.gql'
 
-type CartItemInput = AddProductsToCartFields['cartItems'][number]
+export type CartItemToCartItemInputReturnValue = AddProductsToCartFields['cartItems'][number]
 
 export type CartItemToCartItemInputProps = {
   product: EditCartItemFormFragment
@@ -19,19 +12,18 @@ export type CartItemToCartItemInputProps = {
 
 export function cartItemToCartItemInput(
   props: CartItemToCartItemInputProps,
-): CartItemInput | undefined {
-  const { product, cartItem, selectors } = props
+): CartItemToCartItemInputReturnValue | undefined {
+  const { product, cartItem } = props
 
   if (isTypename(product, ['GroupedProduct']) || !product.sku || !cartItem) return undefined
 
-  const allSelectors: OptionValueSelector = { ...productCustomizableSelectors, ...selectors }
-
-  const cartItemInput: CartItemInput = {
+  const cartItemInput = {
     sku: product.sku,
     quantity: cartItem.quantity,
-    customizable_options: {},
+    selected_options_record: {},
     selected_options: [],
     entered_options: [],
+    entered_options_record: {},
   }
 
   const cartItemCustomizableOptions = filterNonNullableKeys(cartItem.customizable_options ?? {})
@@ -40,13 +32,6 @@ export function cartItemToCartItemInput(
     product.options?.filter(nonNullable).forEach((productOption) => {
       // @todo Date option: Magento's backend does not provide an ISO date string that can be used, only localized strings are available which can not be parsed.
       // @todo File option: We do not support file options yet.
-      if (isTypename(productOption, ['CustomizableDateOption', 'CustomizableFileOption'])) return
-
-      const selector = allSelectors[productOption.__typename] as
-        | undefined
-        | ((option: AnyOption) => CustomizableProductOptionBase | CustomizableProductOptionBase[])
-      const possibleProductValues = selector ? selector(productOption) : null
-
       const cartItemCustomizableOption = cartItemCustomizableOptions.find(
         (option) => option?.customizable_option_uid === productOption.uid,
       )
@@ -56,55 +41,32 @@ export function cartItemToCartItemInput(
       )
       if (cartItemCustomizableOptionValue.length === 0) return
 
-      if (Array.isArray(possibleProductValues)) {
-        const value = cartItemCustomizableOptionValue.map((v) => v.customizable_option_value_uid)
-        if (!cartItemInput.customizable_options) cartItemInput.customizable_options = {}
-        cartItemInput.customizable_options[productOption.uid] = isTypename(productOption, [
-          'CustomizableRadioOption',
-          'CustomizableDropDownOption',
-        ])
-          ? value[0]
-          : value
-      } else {
-        const idx = (productOption.sort_order ?? 0) + 100
-
-        if (!cartItemInput.entered_options) cartItemInput.entered_options = []
-        cartItemInput.entered_options[idx] = {
-          uid: productOption.uid,
-          value: cartItemCustomizableOptionValue[0].value,
-        }
-      }
-    })
-  }
-
-  if (isTypename(cartItem, ['ConfigurableCartItem']) && cartItem.configurable_options) {
-    cartItemInput.selected_options = filterNonNullableKeys(cartItem.configurable_options).map(
-      (option) => option.configurable_product_option_value_uid,
-    )
-  }
-
-  if (isTypename(cartItem, ['BundleCartItem']) && isTypename(product, ['BundleProduct'])) {
-    filterNonNullableKeys(product.items).forEach((productBundleItem) => {
-      const cartItemBundleOption = cartItem.bundle_options.find(
-        (option) => option?.uid === productBundleItem?.uid,
-      )
-
-      if (!cartItemBundleOption) return
-
-      // todo multi select..
-      const idx = productBundleItem.position ?? 0 + 1000
-      const value = cartItemBundleOption.values[0]
-
-      if (!value) return
-      if (productBundleItem.options?.some((o) => o?.can_change_quantity)) {
-        if (!cartItemInput.entered_options) cartItemInput.entered_options = []
-        cartItemInput.entered_options[idx] = {
-          uid: value.uid,
-          value: `${value.quantity}`,
-        }
-      } else {
-        if (!cartItemInput.selected_options) cartItemInput.selected_options = []
-        cartItemInput.selected_options[idx] = value.uid
+      switch (productOption.__typename) {
+        case 'CustomizableAreaOption':
+        case 'CustomizableFileOption':
+        case 'CustomizableFieldOption':
+          cartItemCustomizableOptionValue.forEach(
+            ({ customizable_option_value_uid: uid, value }) => {
+              cartItemInput.entered_options_record[uid] = value
+            },
+          )
+          break
+        case 'CustomizableRadioOption':
+        case 'CustomizableDropDownOption':
+          cartItemInput.selected_options_record[productOption.uid] =
+            cartItemCustomizableOptionValue[0]?.customizable_option_value_uid
+          break
+        case 'CustomizableCheckboxOption':
+        case 'CustomizableMultipleOption':
+          cartItemInput.selected_options_record[productOption.uid] =
+            cartItemCustomizableOptionValue.map(({ customizable_option_value_uid: uid }) => uid)
+          break
+        case 'CustomizableDateOption':
+          // Not supported, backend does not provide an ISO date string that can be used, only localized strings are available which can not be parsed.
+          break
+        default:
+          console.log(`${(productOption as { __typename: string }).__typename} not implemented`)
+          break
       }
     })
   }