@graphcommerce/magento-cart-items 8.1.0-canary.9 → 9.0.0-canary.55

package/Api/CartItem.graphql

@@ -1,4 +1,4 @@
-fragment CartItem on CartItemInterface @injectable {
+fragment CartItem on CartItemInterface {
   uid
   quantity
   __typename

package/Api/CartItems.graphql

@@ -1,4 +1,4 @@
-fragment CartItems on Cart @injectable {
+fragment CartItems on Cart {
   id
   items {
     uid

package/CHANGELOG.md

@@ -1,5 +1,122 @@
 # Change Log
 
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+### Minor Changes
+
+- [#2322](https://github.com/graphcommerce-org/graphcommerce/pull/2322) [`4d08a2b`](https://github.com/graphcommerce-org/graphcommerce/commit/4d08a2bd8c1919bd85b18e8e856775d18fb67e00) - Rename configurable_customizable back to customizable_options
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+### Patch Changes
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`c30ac07`](https://github.com/graphcommerce-org/graphcommerce/commit/c30ac07d1e9aee5fb3df483404d8a8ca853c93ce) - Make sure the edit cart item isn't shown for an order
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+### Minor Changes
+
+- [#2246](https://github.com/graphcommerce-org/graphcommerce/pull/2246) [`13524f9`](https://github.com/graphcommerce-org/graphcommerce/commit/13524f991a810c1679db49b3b8b4f04f90d0d6c1) - Added the ability to edit cart items with full support for all product types and custom options
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+### Patch Changes
+
+- [#2246](https://github.com/graphcommerce-org/graphcommerce/pull/2246) [`fc5c04d`](https://github.com/graphcommerce-org/graphcommerce/commit/fc5c04d4a2c0301be7d3cc983d9b31f6fcaf6fe6) - Create useRemoveItemFromCart hook to allow for reuse while keeping compatibility with plugins.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+### Minor Changes
+
+- [#2209](https://github.com/graphcommerce-org/graphcommerce/pull/2209) [`2872cab`](https://github.com/graphcommerce-org/graphcommerce/commit/2872cabdca9ee4f0378fd411c6a633f71bb92f1f) - Removed useMediaQuery from the wishlist and cart ItemActionCard and replaced it with a new responsive size prop.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
 ## 8.1.0-canary.9
 
 ## 8.1.0-canary.8

package/components/CartCrosssellsScroller/CartCrosssellsScroller.tsx

@@ -5,7 +5,7 @@ import {
   ProductScroller,
   ProductScrollerProps,
 } from '@graphcommerce/magento-product'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/macro'
 
 export type CartItemCrosssellsProps = {
   renderer: ProductListItemRenderer
@@ -24,7 +24,7 @@ export function CartCrosssellsScroller(props: CartItemCrosssellsProps) {
         productListRenderer={renderer}
         items={crossSellItems}
         sx={sx}
-        title={title ?? <Trans id='Complete your purchase' />}
+        title={title ?? <Trans>Complete your purchase</Trans>}
         titleProps={{ variant: 'h6', ...titleProps }}
       />
     </AddProductsToCartForm>

package/components/CartItem/CartItem.tsx

@@ -93,10 +93,7 @@ export function CartItem(props: CartItemProps) {
         color='default'
         badgeContent={
           <RemoveItemFromCartFab
-            uid={uid}
-            quantity={quantity}
-            prices={prices}
-            product={product}
+            {...props}
             fabProps={{ className: classes.badge }}
             sx={(theme) => ({
               '& > button': {

package/components/CartItemActionCard/CartItemActionCard.tsx

@@ -1,13 +1,15 @@
 import { Image } from '@graphcommerce/image'
 import { useDisplayInclTax } from '@graphcommerce/magento-cart/hooks'
+import { ProductLinkProps } from '@graphcommerce/magento-product'
 import { Money } from '@graphcommerce/magento-store'
 import {
   ActionCard,
   ActionCardProps,
-  responsiveVal,
   filterNonNullableKeys,
+  actionCardImageSizes,
 } from '@graphcommerce/next-ui'
-import { Box, Link } from '@mui/material'
+import { Trans } from '@lingui/react'
+import { Box, Button, Link } from '@mui/material'
 import { CartItemFragment } from '../../Api/CartItem.gql'
 import { RemoveItemFromCart } from '../RemoveItemFromCart/RemoveItemFromCart'
 import { UpdateItemQuantity } from '../UpdateItemQuantity/UpdateItemQuantity'
@@ -17,20 +19,12 @@ export type CartItemActionCardProps = { cartItem: CartItemFragment; readOnly?: b
   'value' | 'image' | 'price' | 'title' | 'action'
 >
 
-export const productImageSizes = {
-  small: responsiveVal(60, 80),
-  medium: responsiveVal(60, 80),
-  large: responsiveVal(100, 120),
-}
-
-const typographySizes = {
-  small: 'body2',
-  medium: 'body1',
-  large: 'subtitle1',
+export function productEditLink(link: ProductLinkProps) {
+  return `/checkout/item/${link.url_key}`
 }
 
 export function CartItemActionCard(props: CartItemActionCardProps) {
-  const { cartItem, sx = [], size = 'large', readOnly = false, ...rest } = props
+  const { cartItem, sx = [], size = 'responsive', readOnly = false, ...rest } = props
   const { uid, quantity, prices, errors, product } = cartItem
   const { name, thumbnail, url_key } = product
 
@@ -49,6 +43,11 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
     price = prices?.price.value
   }
 
+  const hasOptions = !(
+    (cartItem.__typename === 'SimpleCartItem' || cartItem.__typename === 'VirtualCartItem') &&
+    cartItem.customizable_options.length === 0
+  )
+
   return (
     <ActionCard
       value={uid}
@@ -58,13 +57,16 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
             px: 0,
             py: theme.spacings.xs,
           },
-          '& .MuiBox-root': {
+          '& .ActionCard-rootInner': {
             justifyContent: 'space-between',
             alignItems: 'stretch',
           },
           '&.sizeSmall': {
             px: 0,
           },
+          '&.sizeResponsive': {
+            [theme.breakpoints.down('md')]: { px: 0 },
+          },
           '& .ActionCard-end': {
             justifyContent: readOnly ? 'center' : 'space-between',
           },
@@ -75,16 +77,11 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
             alignSelf: 'flex-start',
           },
           '& .ActionCard-secondaryAction': {
-            typography: typographySizes[size],
-            display: 'flex',
-            alignItems: 'center',
-            color: 'text.secondary',
-            mt: 1,
-            gap: '10px',
-            justifyContent: 'start',
+            display: 'grid',
+            rowGap: theme.spacings.xs,
+            justifyItems: 'start',
           },
           '& .ActionCard-price': {
-            typography: typographySizes[size],
             pr: readOnly ? 0 : theme.spacings.xs,
             mb: { xs: 0.5, sm: 0 },
           },
@@ -97,13 +94,13 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
             layout='fill'
             src={thumbnail?.url}
             sx={{
-              width: productImageSizes[size],
-              height: productImageSizes[size],
+              width: actionCardImageSizes[size],
+              height: actionCardImageSizes[size],
               display: 'block',
               borderRadius: 1,
               objectFit: 'contain',
             }}
-            sizes={productImageSizes[size]}
+            sizes={actionCardImageSizes[size]}
           />
         )
       }
@@ -126,14 +123,41 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
       }
       secondaryAction={
         <>
-          {readOnly ? quantity : <UpdateItemQuantity uid={uid} quantity={quantity} />}
-          {' ⨉ '}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              color: 'text.secondary',
+              mt: 1,
+              gap: '10px',
+              justifyContent: 'start',
+            }}
+          >
+            {readOnly ? quantity : <UpdateItemQuantity uid={uid} quantity={quantity} />}
+            {' ⨉ '}
 
-          <Money value={price} currency={prices?.price.currency} />
+            <Money value={price} currency={prices?.price.currency} />
+          </Box>
+          {hasOptions && !readOnly && (
+            <Button
+              variant='inline'
+              color='secondary'
+              href={`${productEditLink(product)}?cartItemId=${uid}`}
+            >
+              <Trans id='Edit options' />
+            </Button>
+          )}
         </>
       }
       price={<Money {...(inclTaxes ? prices?.row_total_including_tax : prices?.row_total)} />}
-      action={!readOnly && <RemoveItemFromCart {...cartItem} buttonProps={{ size }} />}
+      action={
+        !readOnly && (
+          <RemoveItemFromCart
+            {...cartItem}
+            buttonProps={{ size: size === 'responsive' ? 'large' : size }}
+          />
+        )
+      }
       size={size}
       after={filterNonNullableKeys(errors).map((error) => (
         <Box sx={{ color: 'error.main', typography: 'caption' }} key={error.message}>
@@ -141,6 +165,7 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
         </Box>
       ))}
       {...rest}
+      details={<>{rest.details}</>}
     />
   )
 }

package/components/CartItemsActionCards/CartItemsActionCards.tsx

@@ -1,5 +1,4 @@
 import { ActionCardLayout, ActionCardLayoutProps, nonNullable } from '@graphcommerce/next-ui'
-import { Theme, useMediaQuery } from '@mui/material'
 import { CartItemsFragment } from '../../Api/CartItems.gql'
 import {
   CartItemActionCard,
@@ -8,7 +7,13 @@ import {
 
 export type CartProps = Omit<ActionCardLayoutProps, 'className'> & {
   cart?: CartItemsFragment | null
+  /**
+   * @deprecated Not used anymore, please use the size prop
+   */
   sizeSm?: CartItemActionCardProps['size']
+  /**
+   * @deprecated Not used anymore, please use the size prop
+   */
   sizeMd?: CartItemActionCardProps['size']
   variant?: CartItemActionCardProps['variant']
   itemProps?: Omit<
@@ -31,32 +36,25 @@ export function CartItemsActionCards(props: CartProps) {
     children,
     layout = 'list',
     itemProps = {},
-    sizeSm = 'medium',
-    sizeMd = 'large',
     variant = 'default',
     ...remainingProps
   } = props
 
-  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'), {
-    defaultMatches: false,
-  })
-
-  const size = isMobile ? sizeSm : sizeMd
-
   if (!cart?.items?.length) return null
 
   return (
     <ActionCardLayout layout={layout} {...remainingProps}>
-      {cart.items?.filter(nonNullable).map((item) => (
-        <CartItemActionCard
-          key={item.uid}
-          cartItem={item}
-          layout={layout}
-          size={size}
-          variant={variant}
-          {...itemProps}
-        />
-      ))}
+      {cart.items
+        ?.filter(nonNullable)
+        .map((item) => (
+          <CartItemActionCard
+            key={item.uid}
+            cartItem={item}
+            layout={layout}
+            variant={variant}
+            {...itemProps}
+          />
+        ))}
       {children}
     </ActionCardLayout>
   )

package/components/EditCartItem/EditCartItemButton/EditCartItemButton.tsx

@@ -0,0 +1,15 @@
+import {
+  AddProductsToCartButton,
+  AddProductsToCartButtonProps,
+} from '@graphcommerce/magento-product'
+import { Trans } from '@lingui/react'
+
+export function EditCartItemButton(props: AddProductsToCartButtonProps) {
+  const { children, ...rest } = props
+
+  return (
+    <AddProductsToCartButton color='secondary' {...rest}>
+      <Trans id='Save changes' />
+    </AddProductsToCartButton>
+  )
+}

package/components/EditCartItem/EditCartItemForm/EditCartItemForm.graphql

@@ -0,0 +1,8 @@
+fragment EditCartItemForm on ProductInterface {
+  ...ProductCustomizable
+  ...ProductWeight
+  ...ProductPageItem
+  ...ConfigurableOptions
+  ...DownloadableProductOptions
+  ...BundleProductOptions
+}

package/components/EditCartItem/EditCartItemForm/EditCartItemForm.tsx

@@ -0,0 +1,59 @@
+import { UseHistoryLink, useHistoryGo } from '@graphcommerce/framer-next-pages'
+import {
+  useFormAddProductsToCart,
+  AddProductsToCartFormProps,
+  AddToCartItemSelector,
+  AddProductsToCartForm,
+} from '@graphcommerce/magento-product'
+import { useEffect } from 'react'
+import {
+  UseRemoveItemFromCartProps,
+  useRemoveItemFromCart,
+} from '../../../hooks/useRemoveItemFromCart'
+import {
+  CartItemToCartItemInputProps,
+  cartItemToCartItemInput,
+} from '../../../utils/cartItemToCartItemInput'
+
+type EditInitProps = CartItemToCartItemInputProps & AddToCartItemSelector
+
+function EditInit(props: EditInitProps) {
+  const { product, selectors, cartItem, index = 0 } = props
+  const { setValue } = useFormAddProductsToCart()
+
+  useEffect(() => {
+    const cartItemInput = cartItemToCartItemInput({ product, cartItem, selectors })
+    if (cartItemInput) setValue(`cartItems.${index}`, cartItemInput)
+  }, [cartItem, index, product, selectors, setValue])
+
+  return null
+}
+
+export type EditCartItemFormProps = CartItemToCartItemInputProps &
+  AddToCartItemSelector &
+  UseHistoryLink &
+  AddProductsToCartFormProps
+
+export function EditCartItemForm(props: EditCartItemFormProps) {
+  const { product, cartItem, onBeforeSubmit, onComplete, index = 0, children, href } = props
+
+  const remove = useRemoveItemFromCart(cartItem as UseRemoveItemFromCartProps)
+  const goToCart = useHistoryGo({ href })
+
+  return (
+    <AddProductsToCartForm
+      {...props}
+      onBeforeSubmit={async (variables) => {
+        await remove.submit()
+        return onBeforeSubmit?.(variables) ?? variables
+      }}
+      onComplete={async (result, variables) => {
+        await goToCart()
+        return onComplete?.(result, variables)
+      }}
+    >
+      {children}
+      <EditInit product={product} cartItem={cartItem} index={index} />
+    </AddProductsToCartForm>
+  )
+}

package/components/EditCartItem/index.ts

@@ -0,0 +1,3 @@
+export * from './EditCartItemButton/EditCartItemButton'
+export * from './EditCartItemForm/EditCartItemForm'
+export * from './EditCartItemForm/EditCartItemForm.gql'

package/components/RemoveItemFromCart/RemoveItemFromCart.tsx

@@ -1,12 +1,13 @@
-import { ApolloCartErrorSnackbar, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
 import { Button, ButtonProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { SxProps, Theme, styled } from '@mui/material'
-import type { DistributedOmit } from 'type-fest'
-import { CartItemFragment } from '../../Api/CartItem.gql'
-import { RemoveItemFromCartDocument } from './RemoveItemFromCart.gql'
+import {
+  UseRemoveItemFromCartProps,
+  useRemoveItemFromCart,
+} from '../../hooks/useRemoveItemFromCart'
 
-export type RemoveItemFromCartProps = DistributedOmit<CartItemFragment, '__typename'> & {
+export type RemoveItemFromCartProps = UseRemoveItemFromCartProps & {
   sx?: SxProps<Theme>
   buttonProps?: Omit<ButtonProps, 'type' | 'loading'>
 }
@@ -15,12 +16,10 @@ const Form = styled('form')({})
 
 export function RemoveItemFromCart(props: RemoveItemFromCartProps) {
   const { uid, quantity, prices, buttonProps, ...formProps } = props
-  const form = useFormGqlMutationCart(RemoveItemFromCartDocument, { defaultValues: { uid } })
-  const { handleSubmit, formState, error } = form
-  const submitHandler = handleSubmit(() => {})
 
+  const { submit, formState, error } = useRemoveItemFromCart(props)
   return (
-    <Form noValidate onSubmit={submitHandler} {...formProps}>
+    <Form noValidate onSubmit={submit} {...formProps}>
       <Button
         variant='inline'
         color='secondary'

package/components/RemoveItemFromCart/RemoveItemFromCartFab.tsx

@@ -1,11 +1,13 @@
-import { ApolloCartErrorSnackbar, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { ApolloCartErrorSnackbar } from '@graphcommerce/magento-cart'
 import { Fab, FabProps, iconClose } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { SxProps, Theme, styled } from '@mui/material'
-import { CartItemFragment } from '../../Api/CartItem.gql'
-import { RemoveItemFromCartDocument } from './RemoveItemFromCart.gql'
+import {
+  UseRemoveItemFromCartProps,
+  useRemoveItemFromCart,
+} from '../../hooks/useRemoveItemFromCart'
 
-export type RemoveItemFromCartFabProps = Omit<CartItemFragment, '__typename'> & {
+export type RemoveItemFromCartFabProps = UseRemoveItemFromCartProps & {
   sx?: SxProps<Theme>
   fabProps?: Omit<FabProps, 'type' | 'icon' | 'loading'>
 }
@@ -14,12 +16,11 @@ const Form = styled('form')({})
 
 export function RemoveItemFromCartFab(props: RemoveItemFromCartFabProps) {
   const { uid, quantity, prices, product, ...formProps } = props
-  const form = useFormGqlMutationCart(RemoveItemFromCartDocument, { defaultValues: { uid } })
-  const { handleSubmit, formState, error } = form
-  const submitHandler = handleSubmit(() => {})
+
+  const { submit, formState, error } = useRemoveItemFromCart(props)
 
   return (
-    <Form noValidate onSubmit={submitHandler} {...formProps}>
+    <Form noValidate onSubmit={submit} {...formProps}>
       <Fab
         aria-label={i18n._(/* i18n */ 'Remove Product')}
         size='small'

package/components/SelectedCustomizableOptions/SelectedCustomizableOptions.tsx

@@ -6,14 +6,11 @@ import { SelectedCustomizableOptionFragment } from './SelectedCustomizableOption
 
 type SelectedCustomizableOptionProps = CartItemFragment & {
   customizable_options?: (SelectedCustomizableOptionFragment | null | undefined)[] | null
-  configurable_customizable?: (SelectedCustomizableOptionFragment | null | undefined)[] | null
 }
 
 export function SelectedCustomizableOptions(props: SelectedCustomizableOptionProps) {
-  const { customizable_options, product, configurable_customizable } = props
-  const options = customizable_options
-    ? filterNonNullableKeys(customizable_options, [])
-    : filterNonNullableKeys(configurable_customizable, [])
+  const { customizable_options, product } = props
+  const options = filterNonNullableKeys(customizable_options, [])
 
   if (!options.length) return null
 
@@ -22,29 +19,20 @@ export function SelectedCustomizableOptions(props: SelectedCustomizableOptionPro
   return (
     <>
       {options.map((option) => (
-        <Box>
-          <Box key={option.customizable_option_uid} sx={{ color: 'text.primary' }}>
-            {option.label}
-          </Box>
+        <Box key={option.customizable_option_uid}>
+          <Box sx={{ color: 'text.primary' }}>{option.label}</Box>
           {option.values.filter(nonNullable).map((value) => (
             <Box
-              key={option.customizable_option_uid}
+              key={value.customizable_option_value_uid}
               sx={(theme) => ({
                 display: 'flex',
                 gap: theme.spacings.xxs,
                 flexDirection: 'row',
               })}
             >
-              {value.label && (
-                <span key={`${value.customizable_option_value_uid}_${value.label}`}>
-                  {value.label}
-                </span>
-              )}
+              {value.label && <span>{value.label}</span>}
               {value.price.value > 0 && productPrice && (
-                <Box
-                  sx={(theme) => ({ position: 'absolute', right: theme.spacings.xs })}
-                  key={`${value.customizable_option_value_uid}_${value.price.value}`}
-                >
+                <Box sx={(theme) => ({ position: 'absolute', right: theme.spacings.xs })}>
                   <Money
                     value={
                       value.price.type === 'PERCENT'

package/components/UpdateItemQuantity/UpdateItemQuantity.tsx

@@ -38,7 +38,7 @@ export function UpdateItemQuantity(props: UpdateItemQuantityProps) {
 
   return (
     <form noValidate onSubmit={submit}>
-      <FormAutoSubmit control={control} submit={submit} initialWait={0} />
+      <FormAutoSubmit control={control} submit={submit} leading />
       <NumberFieldElement
         control={control}
         name='quantity'

package/hooks/useRemoveItemFromCart.ts

@@ -0,0 +1,28 @@
+import { useFormGqlMutationCart } from '@graphcommerce/magento-cart/hooks'
+import { UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
+import type { DistributedOmit } from 'type-fest'
+import { CartItemFragment } from '../Api/CartItem.gql'
+import {
+  RemoveItemFromCartMutation,
+  RemoveItemFromCartMutationVariables,
+  RemoveItemFromCartDocument,
+} from '../components/RemoveItemFromCart/RemoveItemFromCart.gql'
+
+export type UseRemoveItemFromCartProps = DistributedOmit<CartItemFragment, '__typename'> &
+  Omit<
+    UseFormGraphQlOptions<RemoveItemFromCartMutation, RemoveItemFromCartMutationVariables>,
+    'errors'
+  >
+
+export function useRemoveItemFromCart(props: UseRemoveItemFromCartProps) {
+  const { uid, errors, ...options } = props
+
+  const form = useFormGqlMutationCart(RemoveItemFromCartDocument, {
+    defaultValues: { uid },
+    ...options,
+  })
+
+  const { handleSubmit } = form
+  const submit = handleSubmit(() => {})
+  return { ...form, submit }
+}

package/index.ts

@@ -9,3 +9,5 @@ export * from './components/RemoveItemFromCart/RemoveItemFromCart.gql'
 export * from './components/RemoveItemFromCart/RemoveItemFromCartFab'
 export * from './components/SelectedCustomizableOptions/SelectedCustomizableOptions'
 export * from './components/UpdateItemQuantity/UpdateItemQuantity'
+export * from './components/EditCartItem'
+export * from './hooks/useRemoveItemFromCart'

package/package.json

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

package/utils/cartItemToCartItemInput.ts

@@ -0,0 +1,113 @@
+import {
+  AddProductsToCartFields,
+  AnyOption,
+  CustomizableProductOptionBase,
+  OptionValueSelector,
+  SelectorsProp,
+  productCustomizableSelectors,
+} from '@graphcommerce/magento-product'
+import { isTypename, filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
+import { CartItemFragment } from '../Api/CartItem.gql'
+import { EditCartItemFormFragment } from '../components/EditCartItem/EditCartItemForm/EditCartItemForm.gql'
+
+type CartItemInput = AddProductsToCartFields['cartItems'][number]
+
+export type CartItemToCartItemInputProps = {
+  product: EditCartItemFormFragment
+  cartItem: CartItemFragment
+} & SelectorsProp
+
+export function cartItemToCartItemInput(
+  props: CartItemToCartItemInputProps,
+): CartItemInput | undefined {
+  const { product, cartItem, selectors } = props
+
+  if (isTypename(product, ['GroupedProduct']) || !product.sku || !cartItem) return undefined
+
+  const allSelectors: OptionValueSelector = { ...productCustomizableSelectors, ...selectors }
+
+  const cartItemInput: CartItemInput = {
+    sku: product.sku,
+    quantity: cartItem.quantity,
+    customizable_options: {},
+    selected_options: [],
+    entered_options: [],
+  }
+
+  const cartItemCustomizableOptions = filterNonNullableKeys(cartItem.customizable_options ?? {})
+
+  if (cartItemCustomizableOptions.length > 0) {
+    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,
+      )
+
+      const cartItemCustomizableOptionValue = filterNonNullableKeys(
+        cartItemCustomizableOption?.values,
+      )
+      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
+      }
+    })
+  }
+
+  return cartItemInput
+}