@graphcommerce/magento-cart-items 3.1.15 → 3.1.16

package/Api/CartItem.graphql

@@ -4,13 +4,15 @@ fragment CartItem on CartItemInterface @injectable {
   product {
     uid
     ...ProductLink
+    sku
     name
     url_key
+    sku
     thumbnail {
-      url
-      label
+      ...ProductImage
     }
   }
+
   prices {
     discounts {
       amount {

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 3.1.16
+
+### Patch Changes
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6) Thanks [@paales](https://github.com/paales)! - Added crosssel functionality
+
+- Updated dependencies [[`9e630670f`](https://github.com/graphcommerce-org/graphcommerce/commit/9e630670ff6c952ab7b938d890b5509804985cf3), [`cf3518499`](https://github.com/graphcommerce-org/graphcommerce/commit/cf351849999ad6fe73ce2bb258098a7dd301d517), [`2e9fa5984`](https://github.com/graphcommerce-org/graphcommerce/commit/2e9fa5984a07ff14fc1b3a4f62189a26e8e3ecdd), [`adf13069a`](https://github.com/graphcommerce-org/graphcommerce/commit/adf13069af6460c960276b402237371c12fc6dec), [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6), [`8a34f8081`](https://github.com/graphcommerce-org/graphcommerce/commit/8a34f808186274a6fe1d4f309472f1a9c6d00efd), [`3dde492ad`](https://github.com/graphcommerce-org/graphcommerce/commit/3dde492ad3a49d96481eeb7453fb305d0017b1a5)]:
+  - @graphcommerce/next-ui@4.28.1
+  - @graphcommerce/graphql@3.5.0
+  - @graphcommerce/magento-cart@4.9.0
+  - @graphcommerce/magento-customer@4.12.0
+  - @graphcommerce/magento-product@4.7.3
+  - @graphcommerce/magento-store@4.3.2
+  - @graphcommerce/image@3.1.10
+
 ## 3.1.15
 
 ### Patch Changes

package/components/ActionCartItem/ActionCartItem.tsx

@@ -0,0 +1,64 @@
+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: { name, thumbnail },
+    sx = [],
+    details,
+    size = 'medium',
+    ...cardProps
+  } = props
+
+  return (
+    <ActionCard
+      {...cardProps}
+      value={uid}
+      size={size}
+      sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
+      image={
+        thumbnail?.url && (
+          <Image
+            src={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={name}
+      details={
+        <>
+          {details}
+          <UpdateItemQuantity uid={uid} quantity={quantity} />
+        </>
+      }
+      action={<RemoveItemFromCartFab uid={uid} />}
+    />
+  )
+}

package/components/SelectedCustomizableOptions/SelectedCustomizableOption.graphql

@@ -0,0 +1,16 @@
+fragment SelectedCustomizableOption on SelectedCustomizableOption {
+  customizable_option_uid
+  is_required
+  label
+  type
+  values {
+    customizable_option_value_uid
+    label
+    price {
+      type
+      units
+      value
+    }
+    value
+  }
+}

package/components/SelectedCustomizableOptions/SelectedCustomizableOptions.tsx

@@ -0,0 +1,36 @@
+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 { SelectedCustomizableOptionFragment } from './SelectedCustomizableOption.gql'
+
+type ConfigurableActionCartItemProps = {
+  customizable_options?: (SelectedCustomizableOptionFragment | null | undefined)[] | null
+}
+
+export function SelectedCustomizableOptions(props: ConfigurableActionCartItemProps) {
+  const { customizable_options } = props
+
+  const options = filterNonNullableKeys(customizable_options, [])
+
+  if (!options.length) return null
+
+  return (
+    <>
+      {options.map((option) => (
+        <Typography variant='body2' component='div' key={option.customizable_option_uid}>
+          <Typography variant='subtitle2' component='span'>
+            {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>
+          ))}
+        </Typography>
+      ))}
+    </>
+  )
+}

package/components/SelectedCustomizableOptions/index.ts

@@ -0,0 +1,2 @@
+export * from './SelectedCustomizableOption.gql'
+export * from './SelectedCustomizableOptions'

package/index.ts

@@ -1,9 +1,9 @@
 export * from './Api/CartItem.gql'
 export * from './Api/CartItems.gql'
-
 export * from './CartItem/CartItem'
-export * from './CartItem/CartItemOptionDropdown'
 export * from './CartItems/CartItems'
+export * from './components/ActionCartItem/ActionCartItem'
+export * from './components/SelectedCustomizableOptions/SelectedCustomizableOptions'
 export * from './DeliveryLabel/DeliveryLabel'
 export * from './RemoveItemFromCart/RemoveItemFromCartFab'
 export * from './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": "3.1.15",
+  "version": "3.1.16",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,13 +18,13 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "3.4.8",
-    "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-cart": "4.8.7",
-    "@graphcommerce/magento-customer": "4.11.7",
-    "@graphcommerce/magento-product": "4.7.2",
-    "@graphcommerce/magento-store": "4.3.1",
-    "@graphcommerce/next-ui": "4.28.0",
+    "@graphcommerce/graphql": "3.5.0",
+    "@graphcommerce/image": "3.1.10",
+    "@graphcommerce/magento-cart": "4.9.0",
+    "@graphcommerce/magento-customer": "4.12.0",
+    "@graphcommerce/magento-product": "4.7.3",
+    "@graphcommerce/magento-store": "4.3.2",
+    "@graphcommerce/next-ui": "4.28.1",
     "@graphcommerce/react-hook-form": "3.3.5"
   },
   "peerDependencies": {

package/CartItem/CartItemOptionDropdown.tsx

@@ -1,58 +0,0 @@
-import { extendableComponent } from '@graphcommerce/next-ui'
-import { Box, MenuItem, Select, SelectProps, SxProps, Theme } from '@mui/material'
-
-export type CartItemOptionDropdownProps = {
-  label: string
-  sx?: SxProps<Theme>
-} & Pick<SelectProps, 'onChange'>
-
-const compName = 'CartItem' as const
-const parts = ['root', 'label', 'select'] as const
-const { classes } = extendableComponent(compName, parts)
-
-export function CartItemOptionDropdown(props: CartItemOptionDropdownProps) {
-  const { onChange, label, sx = [] } = props
-
-  return (
-    <Box
-      className={classes.root}
-      sx={[(theme) => ({ marginRight: theme.spacings.xs }), ...(Array.isArray(sx) ? sx : [sx])]}
-    >
-      <Box
-        className={classes.label}
-        sx={(theme) => ({
-          letterSpacing: 1,
-          textTransform: 'uppercase',
-          fontWeight: 500,
-          color: theme.palette.text.disabled,
-        })}
-      >
-        {label}
-      </Box>
-      <Select
-        value={1}
-        onChange={onChange}
-        className={classes.select}
-        sx={(theme) => ({
-          padding: `${theme.spacings.xxs} ${theme.spacings.xxs}`,
-          border: `1px solid ${theme.palette.divider}`,
-          borderRadius: '8px',
-          minWidth: 120,
-          '&:before': {
-            borderBottom: 'none',
-          },
-          '&:hover, &:active, &:focus': {
-            '&:before': {
-              borderBottom: 'none',
-            },
-            background: theme.palette.grey['100'],
-          },
-        })}
-      >
-        <MenuItem value={1}>One</MenuItem>
-        <MenuItem value={2}>Two</MenuItem>
-        <MenuItem value={3}>Three</MenuItem>
-      </Select>
-    </Box>
-  )
-}