@graphcommerce/magento-cart-items 7.0.0-canary.21 → 7.0.0

package/Api/CartItem.graphql

@@ -1,6 +1,7 @@
 fragment CartItem on CartItemInterface @injectable {
   uid
   quantity
+  __typename
   product {
     uid
     ...ProductLink
@@ -23,12 +24,15 @@ fragment CartItem on CartItemInterface @injectable {
     price {
       ...Money
     }
-    row_total {
+    price_including_tax {
       ...Money
     }
     row_total_including_tax {
       ...Money
     }
+    row_total {
+      ...Money
+    }
     total_item_discount {
       ...Money
     }

package/CHANGELOG.md

@@ -1,6 +1,176 @@
 # Change Log
 
-## 7.0.0-canary.21
+## 7.0.0
+
+### Minor Changes
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`609b384de`](https://github.com/graphcommerce-org/graphcommerce/commit/609b384de8cded7a9dd2f29bd516ded810ab970a) - Created a new version of the cart using ActionCards for each CartItem. Different types of CartItems can have different ActionCards. These ActionCards will be overridden with the use of Plugins. An example can be found in the @graphcommerce/magento-product-configurable package. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#2029](https://github.com/graphcommerce-org/graphcommerce/pull/2029) [`4ac92840a`](https://github.com/graphcommerce-org/graphcommerce/commit/4ac92840a44c8697738f5437fa0b81ef8210e2a7) - Use price_including_tax field when available instead of dividing through the row_total_including_tax ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.98
+
+## 6.2.0-canary.97
+
+## 6.2.0-canary.96
+
+## 6.2.0-canary.95
+
+## 6.2.0-canary.94
+
+## 6.2.0-canary.93
+
+## 6.2.0-canary.92
+
+## 6.2.0-canary.91
+
+### Minor Changes
+
+- [#2029](https://github.com/graphcommerce-org/graphcommerce/pull/2029) [`4ac92840a`](https://github.com/graphcommerce-org/graphcommerce/commit/4ac92840a44c8697738f5437fa0b81ef8210e2a7) - Support official price_including_tax instead of dividing through the row_total_including_tax ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.90
+
+## 6.2.0-canary.89
+
+## 6.2.0-canary.88
+
+## 6.2.0-canary.87
+
+## 6.2.0-canary.86
+
+## 6.2.0-canary.85
+
+## 6.2.0-canary.84
+
+## 6.2.0-canary.83
+
+## 6.2.0-canary.82
+
+## 6.2.0-canary.81
+
+### Minor Changes
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`609b384de`](https://github.com/graphcommerce-org/graphcommerce/commit/609b384de8cded7a9dd2f29bd516ded810ab970a) - Created a new version of the cart using ActionCards for each CartItem. Different types of CartItems can have different ActionCards. These ActionCards will be overridden with the use of Plugins. An example can be found in the @graphcommerce/magento-product-configurable package. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.80
+
+## 6.2.0-canary.79
+
+## 6.2.0-canary.78
+
+## 6.2.0-canary.77
+
+## 6.2.0-canary.76
+
+## 6.2.0-canary.75
+
+## 6.2.0-canary.74
+
+## 6.2.0-canary.73
+
+## 6.2.0-canary.72
+
+## 6.2.0-canary.71
+
+## 6.2.0-canary.70
+
+## 6.2.0-canary.69
+
+## 6.2.0-canary.68
+
+## 6.2.0-canary.67
+
+## 6.2.0-canary.66
+
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+## 6.2.0-canary.61
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+## 6.2.0-canary.52
+
+## 6.2.0-canary.51
+
+## 6.2.0-canary.50
+
+## 6.2.0-canary.49
+
+## 6.2.0-canary.48
+
+## 6.2.0-canary.47
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+## 6.2.0-canary.37
+
+## 6.2.0-canary.36
+
+## 6.2.0-canary.35
+
+## 6.2.0-canary.34
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+## 6.2.0-canary.29
+
+## 6.2.0-canary.28
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+## 6.2.0-canary.21
 
 ## 6.2.0-canary.20
 

package/{CartItem → components/CartItem}/CartItem.tsx

@@ -9,7 +9,7 @@ import {
   NextLink,
 } from '@graphcommerce/next-ui'
 import { Badge, Box, Link, SxProps, Theme } from '@mui/material'
-import { CartItemFragment } from '../Api/CartItem.gql'
+import { CartItemFragment } from '../../Api/CartItem.gql'
 import { RemoveItemFromCartFab } from '../RemoveItemFromCart/RemoveItemFromCartFab'
 import { UpdateItemQuantity } from '../UpdateItemQuantity/UpdateItemQuantity'
 
@@ -38,6 +38,7 @@ const { withState } = extendableComponent<OwnerState, typeof compName, typeof pa
   parts,
 )
 
+/** @deprecated Replace with CartItemActionCard */
 export function CartItem(props: CartItemProps) {
   const { product, errors, uid, prices, quantity, children, withOptions = true, sx = [] } = props
   const { name } = product
@@ -96,7 +97,7 @@ export function CartItem(props: CartItemProps) {
             quantity={quantity}
             prices={prices}
             product={product}
-            className={classes.badge}
+            fabProps={{ className: classes.badge }}
             sx={(theme) => ({
               '& > button': {
                 background: theme.palette.background.paper,

package/components/CartItemActionCard/CartItemActionCard.tsx

@@ -0,0 +1,149 @@
+import { Image } from '@graphcommerce/image'
+import { useDisplayInclTax } from '@graphcommerce/magento-cart/hooks'
+import { Money } from '@graphcommerce/magento-store'
+import {
+  ActionCard,
+  ActionCardProps,
+  responsiveVal,
+  filterNonNullableKeys,
+} from '@graphcommerce/next-ui'
+import { Box, Link } from '@mui/material'
+import { CartItemFragment } from '../../Api/CartItem.gql'
+import { RemoveItemFromCart } from '../RemoveItemFromCart/RemoveItemFromCart'
+import { UpdateItemQuantity } from '../UpdateItemQuantity/UpdateItemQuantity'
+
+export type CartItemActionCardProps = { cartItem: CartItemFragment } & Omit<
+  ActionCardProps,
+  '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 CartItemActionCard(props: CartItemActionCardProps) {
+  const { cartItem, sx = [], size = 'large', ...rest } = props
+  const { uid, quantity, prices, errors, product } = cartItem
+  const { name, thumbnail, url_key } = product
+
+  const inclTaxes = useDisplayInclTax()
+
+  let price: number | null | undefined
+
+  if (inclTaxes) {
+    if (prices?.price_including_tax) {
+      price = prices.price_including_tax.value
+    } else {
+      const rowTotalIncludingTax = prices?.row_total_including_tax?.value ?? 0
+      price = rowTotalIncludingTax / quantity
+    }
+  } else {
+    price = prices?.price.value
+  }
+
+  return (
+    <ActionCard
+      value={uid}
+      sx={[
+        (theme) => ({
+          '&.ActionCard-root': {
+            px: 0,
+            py: theme.spacings.xs,
+          },
+          '& .MuiBox-root': {
+            justifyContent: 'space-between',
+            alignItems: 'stretch',
+          },
+          '&.sizeSmall': {
+            px: 0,
+          },
+          '& .ActionCard-action': {
+            pr: theme.spacings.xs,
+          },
+          '& .ActionCard-image': {
+            alignSelf: 'flex-start',
+            transform: 'translateY(10px)',
+          },
+          '& .ActionCard-secondaryAction': {
+            typography: typographySizes[size],
+            display: 'flex',
+            alignItems: 'center',
+            color: 'text.secondary',
+            mt: 1,
+            gap: '10px',
+            justifyContent: 'start',
+          },
+          '& .ActionCard-price': {
+            typography: typographySizes[size],
+            pr: theme.spacings.xs,
+            mb: { xs: 0.5, sm: 0 },
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      image={
+        thumbnail?.url && (
+          <Image
+            layout='fill'
+            src={thumbnail?.url}
+            sx={{
+              width: productImageSizes[size],
+              height: productImageSizes[size],
+              display: 'block',
+              borderRadius: 1,
+            }}
+            sizes={productImageSizes[size]}
+          />
+        )
+      }
+      title={
+        url_key ? (
+          <Link
+            href={url_key}
+            underline='hover'
+            sx={{
+              color: 'inherit',
+              flexWrap: 'nowrap',
+              maxWidth: 'max-content',
+            }}
+          >
+            {name}
+          </Link>
+        ) : (
+          name
+        )
+      }
+      secondaryAction={
+        <>
+          <UpdateItemQuantity uid={uid} quantity={quantity} />
+          {' ⨉ '}
+          <Money value={price} currency={prices?.price.currency} />
+        </>
+      }
+      price={<Money {...(inclTaxes ? prices?.row_total_including_tax : prices?.row_total)} />}
+      action={
+        <RemoveItemFromCart
+          uid={uid}
+          quantity={quantity}
+          product={product}
+          buttonProps={{ size }}
+        />
+      }
+      size={size}
+      after={filterNonNullableKeys(errors).map((error) => (
+        <Box sx={{ color: 'error.main', typography: 'caption' }} key={error.message}>
+          {error.message}
+        </Box>
+      ))}
+      {...rest}
+    />
+  )
+}

package/{CartItems → components/CartItems}/CartItems.tsx

@@ -1,11 +1,12 @@
 import { RenderType, TypeRenderer } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
-import { CartItemsFragment } from '../Api/CartItems.gql'
+import { CartItemsFragment } from '../../Api/CartItems.gql'
 
 export type CartItemRenderer = TypeRenderer<NonNullable<NonNullable<CartItemsFragment['items']>[0]>>
 
 export type CartProps = { renderer: CartItemRenderer } & CartItemsFragment
 
+/** @deprecated Replace with CartItemsActionCards */
 export function CartItems(props: CartProps) {
   const { renderer, items, id } = props
 

package/components/CartItemsActionCards/CartItemsActionCards.tsx

@@ -0,0 +1,63 @@
+import { ActionCardLayout, ActionCardLayoutProps, nonNullable } from '@graphcommerce/next-ui'
+import { Theme, useMediaQuery } from '@mui/material'
+import { CartItemsFragment } from '../../Api/CartItems.gql'
+import {
+  CartItemActionCard,
+  CartItemActionCardProps,
+} from '../CartItemActionCard/CartItemActionCard'
+
+export type CartProps = Omit<ActionCardLayoutProps, 'className'> & {
+  cart?: CartItemsFragment | null
+  sizeSm?: CartItemActionCardProps['size']
+  sizeMd?: CartItemActionCardProps['size']
+  variant?: CartItemActionCardProps['variant']
+  itemProps?: Omit<
+    CartItemActionCardProps,
+    | 'cartItem'
+    | 'layout'
+    | 'onClick'
+    | 'disabled'
+    | 'selected'
+    | 'reset'
+    | 'color'
+    | 'size'
+    | 'variant'
+  >
+}
+
+export function CartItemsActionCards(props: CartProps) {
+  const {
+    cart,
+    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}
+        />
+      ))}
+      {children}
+    </ActionCardLayout>
+  )
+}

package/components/RemoveItemFromCart/RemoveItemFromCart.tsx

@@ -0,0 +1,36 @@
+import { ApolloCartErrorSnackbar, useFormGqlMutationCart } 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'
+
+export type RemoveItemFromCartProps = Omit<CartItemFragment, '__typename'> & {
+  sx?: SxProps<Theme>
+  buttonProps?: Omit<ButtonProps, 'type' | 'loading'>
+}
+
+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(() => {})
+
+  return (
+    <Form noValidate onSubmit={submitHandler} {...formProps}>
+      <Button
+        variant='inline'
+        color='secondary'
+        {...buttonProps}
+        size='medium'
+        type='submit'
+        loading={formState.isSubmitting}
+      >
+        <Trans id='Remove' />
+      </Button>
+      <ApolloCartErrorSnackbar error={error} />
+    </Form>
+  )
+}

package/{RemoveItemFromCart → components/RemoveItemFromCart}/RemoveItemFromCartFab.tsx

@@ -1,23 +1,19 @@
 import { ApolloCartErrorSnackbar, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { iconClose, IconSvg } from '@graphcommerce/next-ui'
+import { Fab, FabProps, iconClose } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-import { Fab, SxProps, Theme, styled } from '@mui/material'
-import { CartItemFragment } from '../Api/CartItem.gql'
+import { SxProps, Theme, styled } from '@mui/material'
+import { CartItemFragment } from '../../Api/CartItem.gql'
 import { RemoveItemFromCartDocument } from './RemoveItemFromCart.gql'
 
-export type RemoveItemFromCartProps = CartItemFragment &
-  Omit<JSX.IntrinsicElements['form'], 'onSubmit' | 'noValidate'> & { sx?: SxProps<Theme> }
+export type RemoveItemFromCartFabProps = Omit<CartItemFragment, '__typename'> & {
+  sx?: SxProps<Theme>
+  fabProps?: Omit<FabProps, 'type' | 'icon' | 'loading'>
+}
 
 const Form = styled('form')({})
 
-export function RemoveItemFromCartFab(props: RemoveItemFromCartProps) {
-  const {
-    product: {},
-    uid,
-    quantity,
-    prices,
-    ...formProps
-  } = props
+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(() => {})
@@ -29,9 +25,8 @@ export function RemoveItemFromCartFab(props: RemoveItemFromCartProps) {
         size='small'
         type='submit'
         disabled={formState.isSubmitting}
-      >
-        <IconSvg src={iconClose} />
-      </Fab>
+        icon={iconClose}
+      />
       <ApolloCartErrorSnackbar error={error} />
     </Form>
   )

package/components/SelectedCustomizableOptions/SelectedCustomizableOptions.tsx

@@ -1,8 +1,7 @@
 import { Money } from '@graphcommerce/magento-store'
-import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
-import { Typography } from '@mui/material'
-import { CartItem_ConfigurableCartItem_Fragment } from '../../Api/CartItem.gql'
-import { ActionCartItemProps } from '../ActionCartItem/ActionCartItem'
+import { IconSvg, filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
+import * as InfoIcon from '@graphcommerce/next-ui/icons/info.svg'
+import { Box, Tooltip, Typography } from '@mui/material'
 import { SelectedCustomizableOptionFragment } from './SelectedCustomizableOption.gql'
 
 type ConfigurableActionCartItemProps = {
@@ -19,17 +18,24 @@ export function SelectedCustomizableOptions(props: ConfigurableActionCartItemPro
   return (
     <>
       {options.map((option) => (
-        <Typography variant='body2' component='div' key={option.customizable_option_uid}>
-          <Typography variant='subtitle2' component='span'>
+        <Box
+          key={option.customizable_option_uid}
+          sx={(theme) => ({ display: 'flex', gap: theme.spacings.xxs })}
+        >
+          <Typography variant='subtitle2' component='span' sx={{ color: 'text.primary' }}>
             {option.label}
           </Typography>
           {option.values.filter(nonNullable).map((value) => (
-            <span key={value.customizable_option_value_uid}>
-              {value.price.value > 0 && <Money value={value.price.value} />} {value?.label}
-              {value?.value}
-            </span>
+            <>
+              <span key={value.customizable_option_value_uid}>
+                {value.price.value > 0 && <Money value={value.price.value} />} {value?.label}
+              </span>
+              <Tooltip title={value.value}>
+                <IconSvg src={InfoIcon} size='medium' />
+              </Tooltip>
+            </>
           ))}
-        </Typography>
+        </Box>
       ))}
     </>
   )

package/{UpdateItemQuantity → components/UpdateItemQuantity}/UpdateItemQuantity.tsx

@@ -34,8 +34,9 @@ export function UpdateItemQuantity(props: UpdateItemQuantityProps) {
     <form noValidate onSubmit={submit}>
       <TextInputNumber
         size='small'
-        variant='outlined'
+        variant='standard'
         inputProps={{ min: 1 }}
+        InputProps={{ disableUnderline: true }}
         error={!!formState.errors.quantity}
         {...muiRegister('quantity', { required: required.quantity })}
         helperText={formState.errors.quantity?.message}

package/index.ts

@@ -1,8 +1,10 @@
 export * from './Api/CartItem.gql'
 export * from './Api/CartItems.gql'
-export * from './CartItem/CartItem'
-export * from './CartItems/CartItems'
-export * from './components/ActionCartItem/ActionCartItem'
+export * from './components/CartItem/CartItem'
+export * from './components/CartItemsActionCards/CartItemsActionCards'
+export * from './components/CartItemActionCard/CartItemActionCard'
 export * from './components/SelectedCustomizableOptions/SelectedCustomizableOptions'
-export * from './RemoveItemFromCart/RemoveItemFromCartFab'
-export * from './UpdateItemQuantity/UpdateItemQuantity'
+export * from './components/RemoveItemFromCart/RemoveItemFromCart'
+export * from './components/RemoveItemFromCart/RemoveItemFromCartFab'
+export * from './components/RemoveItemFromCart/RemoveItemFromCart.gql'
+export * from './components/UpdateItemQuantity/UpdateItemQuantity'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-items",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.0.0-canary.21",
+  "version": "7.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,23 +12,24 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "7.0.0-canary.21",
-    "@graphcommerce/prettier-config-pwa": "7.0.0-canary.21",
-    "@graphcommerce/typescript-config-pwa": "7.0.0-canary.21"
+    "@graphcommerce/eslint-config-pwa": "7.0.0",
+    "@graphcommerce/prettier-config-pwa": "7.0.0",
+    "@graphcommerce/typescript-config-pwa": "7.0.0"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "7.0.0-canary.21",
-    "@graphcommerce/image": "7.0.0-canary.21",
-    "@graphcommerce/magento-cart": "7.0.0-canary.21",
-    "@graphcommerce/magento-customer": "7.0.0-canary.21",
-    "@graphcommerce/magento-product": "7.0.0-canary.21",
-    "@graphcommerce/magento-store": "7.0.0-canary.21",
-    "@graphcommerce/next-ui": "7.0.0-canary.21",
-    "@graphcommerce/react-hook-form": "7.0.0-canary.21"
+    "@graphcommerce/graphql": "7.0.0",
+    "@graphcommerce/image": "7.0.0",
+    "@graphcommerce/magento-cart": "7.0.0",
+    "@graphcommerce/magento-customer": "7.0.0",
+    "@graphcommerce/magento-product": "7.0.0",
+    "@graphcommerce/magento-store": "7.0.0",
+    "@graphcommerce/next-ui": "7.0.0",
+    "@graphcommerce/react-hook-form": "7.0.0"
   },
   "peerDependencies": {
-    "@lingui/react": "^3.13.2",
-    "@lingui/core": "^3.13.2",
+    "@lingui/react": "^4.2.1",
+    "@lingui/core": "^4.2.1",
+    "@lingui/macro": "^4.2.1",
     "@mui/material": "^5.10.16",
     "framer-motion": "^10.0.0",
     "next": "^13.2.0",

package/CartItems/CartItemsQuery.graphql

@@ -1,5 +0,0 @@
-query CartItemsQuery($cartId: String!) {
-  cart(cart_id: $cartId) {
-    ...CartItems
-  }
-}

package/components/ActionCartItem/ActionCartItem.tsx

@@ -1,57 +0,0 @@
-import { Image } from '@graphcommerce/image'
-import { Money } from '@graphcommerce/magento-store'
-import { ActionCard, ActionCardProps, responsiveVal } from '@graphcommerce/next-ui'
-import { CartItemFragment } from '../../Api/CartItem.gql'
-import { RemoveItemFromCartFab } from '../../RemoveItemFromCart/RemoveItemFromCartFab'
-import { UpdateItemQuantity } from '../../UpdateItemQuantity/UpdateItemQuantity'
-
-export type ActionCartItemProps = Omit<
-  ActionCardProps,
-  'value' | 'image' | 'price' | 'title' | 'action'
->
-
-export const productImageSizes = {
-  small: responsiveVal(50, 60),
-  medium: responsiveVal(60, 80),
-  large: responsiveVal(80, 100),
-}
-
-export function ActionCartItem(props: CartItemFragment & ActionCartItemProps) {
-  const { uid, quantity, prices, product, sx = [], details, size = 'medium', ...cardProps } = props
-
-  return (
-    <ActionCard
-      {...cardProps}
-      value={uid}
-      size={size}
-      sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
-      image={
-        product.thumbnail?.url && (
-          <Image
-            src={product.thumbnail?.url}
-            width={50}
-            height={50}
-            sx={{
-              width: productImageSizes[size],
-              height: productImageSizes[size],
-              display: 'block',
-              borderRadius: 1,
-            }}
-            sizes={productImageSizes[size]}
-          />
-        )
-      }
-      price={<Money {...prices?.row_total_including_tax} />}
-      title={product.name}
-      details={
-        <>
-          {details}
-          <UpdateItemQuantity uid={uid} quantity={quantity} />
-        </>
-      }
-      action={
-        <RemoveItemFromCartFab uid={uid} quantity={quantity} prices={prices} product={product} />
-      }
-    />
-  )
-}