@graphcommerce/magento-cart-items 8.1.0-canary.2 → 8.1.0-canary.22

package/CHANGELOG.md

@@ -1,6 +1,107 @@
 # Change Log
 
-## 8.1.0-canary.2
+## 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
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
+## 8.1.0-canary.5
+
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+## 8.0.5
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+## 8.0.5-canary.7
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+## 8.0.5-canary.2
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+## 8.0.4
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+## 8.0.3
+
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+## 8.0.3-canary.4
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
 
 ## 8.0.3-canary.1
 

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,20 +123,38 @@ 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 && (
+            <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
-            uid={uid}
-            quantity={quantity}
-            product={product}
-            buttonProps={{ size }}
+            {...cartItem}
+            buttonProps={{ size: size === 'responsive' ? 'large' : size }}
           />
         )
       }
@@ -150,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,11 +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 { CartItemFragment } from '../../Api/CartItem.gql'
-import { RemoveItemFromCartDocument } from './RemoveItemFromCart.gql'
+import {
+  UseRemoveItemFromCartProps,
+  useRemoveItemFromCart,
+} from '../../hooks/useRemoveItemFromCart'
 
-export type RemoveItemFromCartProps = Omit<CartItemFragment, '__typename'> & {
+export type RemoveItemFromCartProps = UseRemoveItemFromCartProps & {
   sx?: SxProps<Theme>
   buttonProps?: Omit<ButtonProps, 'type' | 'loading'>
 }
@@ -14,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

@@ -22,29 +22,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/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.2",
+  "version": "8.1.0-canary.22",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,17 +12,18 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/graphql": "^8.1.0-canary.2",
-    "@graphcommerce/image": "^8.1.0-canary.2",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.2",
-    "@graphcommerce/magento-customer": "^8.1.0-canary.2",
-    "@graphcommerce/magento-product": "^8.1.0-canary.2",
-    "@graphcommerce/magento-store": "^8.1.0-canary.2",
-    "@graphcommerce/next-ui": "^8.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.2",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.22",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.22",
+    "@graphcommerce/graphql": "^8.1.0-canary.22",
+    "@graphcommerce/image": "^8.1.0-canary.22",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.22",
+    "@graphcommerce/magento-customer": "^8.1.0-canary.22",
+    "@graphcommerce/magento-product": "^8.1.0-canary.22",
+    "@graphcommerce/magento-store": "^8.1.0-canary.22",
+    "@graphcommerce/next-ui": "^8.1.0-canary.22",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.22",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.22",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.22",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
@@ -31,5 +32,8 @@
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "type-fest": "^4.15.0"
   }
 }

package/utils/cartItemToCartItemInput.ts

@@ -0,0 +1,117 @@
+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(
+    isTypename(cartItem, ['ConfigurableCartItem'])
+      ? cartItem.configurable_customizable
+      : 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, i) => {
+      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
+}