@graphcommerce/magento-product-bundle 9.1.0-canary.18 → 9.1.0-canary.20

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 9.1.0-canary.20
+
+## 9.1.0-canary.19
+
+### Patch Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`224945f`](https://github.com/graphcommerce-org/graphcommerce/commit/224945faf04dff48692b7fcd99e1835d8a683143) - Add the ability to edit bundle products from the cart page ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`224945f`](https://github.com/graphcommerce-org/graphcommerce/commit/224945faf04dff48692b7fcd99e1835d8a683143) - Magento 2.4.7: Render discounts for bundle products ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`224945f`](https://github.com/graphcommerce-org/graphcommerce/commit/224945faf04dff48692b7fcd99e1835d8a683143) - Calculate the product page price dynamically based on the options and quantities selected. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`6b2b44c`](https://github.com/graphcommerce-org/graphcommerce/commit/6b2b44ca853279144d7768067f3462d4d4bf0af1) - Implement the Cart options as priceModifiers so the logic can be somewhat re-used for multiple locations ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`2409514`](https://github.com/graphcommerce-org/graphcommerce/commit/240951428ac0bdc11649f4190b6d51c004680b34) - Order/Invoice/CreditMemo and Shipment views ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.18
 
 ## 9.1.0-canary.17

package/components/BundleProductOptions/BundleOption.tsx

@@ -6,20 +6,27 @@ import { filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import React, { useMemo } from 'react'
 import { BundleOptionValue } from './BundleOptionValue'
-import type { BundleOptionProps, BundleOptionValueProps } from './types'
+import { toBundleOptionType, type BundleOptionProps, type BundleOptionValueProps } from './types'
 
 export const BundleOption = React.memo<BundleOptionProps>((props) => {
-  const { idx, index, options, title, color, layout, size, variant, required: _required } = props
+  const { index, item, color, layout, size, variant, product, renderer } = props
+  const { options, title, required, type: incomingType, uid, price_range } = item
   const { control } = useFormAddProductsToCart()
-
-  const required = _required ?? false
+  const type = toBundleOptionType(incomingType)
 
   return (
     <div>
-      <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
+      <SectionHeader
+        labelLeft={
+          <>
+            {title} {required && ' *'}
+          </>
+        }
+      />
       <ActionCardListForm<BundleOptionValueProps & ActionCardItemBase, AddProductsToCartFields>
         control={control}
-        required={required}
+        required={Boolean(required)}
+        multiple={type === 'checkbox' || type === 'multi'}
         color={color}
         layout={layout}
         size={size}
@@ -30,22 +37,21 @@ export const BundleOption = React.memo<BundleOptionProps>((props) => {
             ? i18n._(/* i18n*/ 'Please select a value for ‘{label}’', { label: title })
             : false,
         }}
-        name={
-          options?.some((o) => o?.can_change_quantity)
-            ? `cartItems.${index}.entered_options.${idx}.uid`
-            : `cartItems.${index}.selected_options.${idx}`
-        }
-        render={BundleOptionValue}
+        name={`cartItems.${index}.selected_options_record.${uid}`}
+        render={renderer ?? BundleOptionValue}
+        requireOptionSelection={Boolean(required)}
         items={useMemo(
           () =>
             filterNonNullableKeys(options).map((option) => ({
-              ...option,
+              product,
+              item,
+              option,
               value: option.uid,
-              idx,
               index,
-              required,
+              dynamicPrice: product.dynamic_price ?? false,
+              discountPercent: price_range.minimum_price.discount?.percent_off ?? 0,
             })),
-          [idx, index, options, required],
+          [index, options, required],
         )}
       />
     </div>

package/components/BundleProductOptions/BundleOptionValue.tsx

@@ -1,10 +1,12 @@
 import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
 import { Image } from '@graphcommerce/image'
-import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
-import { Money } from '@graphcommerce/magento-store'
-import { ActionCard, Button, responsiveVal } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { ProductListPrice, useFormAddProductsToCart } from '@graphcommerce/magento-product'
+import { ActionCard, responsiveVal } from '@graphcommerce/next-ui'
+import {
+  calculateBundleOptionValuePrice,
+  toProductListPriceFragment,
+} from './calculateBundleOptionValuePrice'
 import type { BundleOptionValueProps } from './types'
 
 const swatchSizes = {
@@ -16,27 +18,30 @@ const swatchSizes = {
 export function BundleOptionValue(props: ActionCardItemRenderProps<BundleOptionValueProps>) {
   const {
     selected,
-    idx,
-    index,
-    price,
+    item,
+    option,
     product,
-    label,
+    index,
     size = 'large',
     color,
-    can_change_quantity,
-    quantity = 1,
-    required,
+    price,
     onReset,
+    ...rest
   } = props
   const { control } = useFormAddProductsToCart()
 
-  const thumbnail = product?.thumbnail?.url
+  const thumbnail = option.product?.thumbnail?.url
+
+  const pricing = toProductListPriceFragment(
+    calculateBundleOptionValuePrice(product, item, option),
+    item.price_range.minimum_price.final_price.currency,
+  )
 
   return (
     <ActionCard
       {...props}
-      title={label}
-      price={price ? <Money value={price} /> : undefined}
+      title={option.label}
+      price={<ProductListPrice {...pricing} />}
       image={
         thumbnail &&
         !thumbnail.includes('/placeholder/') && (
@@ -44,7 +49,7 @@ export function BundleOptionValue(props: ActionCardItemRenderProps<BundleOptionV
             src={thumbnail}
             width={40}
             height={40}
-            alt={label ?? ''}
+            alt={option.label ?? option.product?.name ?? ''}
             sizes={swatchSizes[size]}
             sx={{
               display: 'block',
@@ -55,40 +60,24 @@ export function BundleOptionValue(props: ActionCardItemRenderProps<BundleOptionV
           />
         )
       }
-      action={
-        (can_change_quantity || !required) && (
-          <Button disableRipple variant='inline' color='inherit' size='small' tabIndex={-1}>
-            <Trans id='Select' />
-          </Button>
-        )
-      }
-      reset={
-        (can_change_quantity || !required) && (
-          <Button disableRipple variant='inline' color='inherit' size='small' onClick={onReset}>
-            {can_change_quantity ? <Trans id='Change' /> : <Trans id='Remove' />}
-          </Button>
-        )
-      }
+      reset={<></>}
       secondaryAction={
         selected &&
-        can_change_quantity && (
+        option.can_change_quantity && (
           <NumberFieldElement
             size='small'
             label='Quantity'
             color={color}
             inputProps={{ min: 1 }}
             required
-            defaultValue={`${quantity}`}
+            defaultValue={`${option.quantity}`}
             control={control}
             sx={{
               width: responsiveVal(80, 120),
               mt: 2,
-              '& .MuiFormHelperText-root': {
-                margin: 1,
-                width: '100%',
-              },
+              '& .MuiFormHelperText-root': { margin: 1, width: '100%' },
             }}
-            name={`cartItems.${index}.entered_options.${idx}.value`}
+            name={`cartItems.${index}.entered_options_record.${option.uid}`}
             onMouseDown={(e) => e.stopPropagation()}
           />
         )

package/components/BundleProductOptions/BundleProductOptions.tsx

@@ -1,9 +1,9 @@
 import type { AddToCartItemSelector } from '@graphcommerce/magento-product'
 import type { ActionCardListProps } from '@graphcommerce/next-ui'
-import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { nonNullable } from '@graphcommerce/next-ui'
+import type { ProductPageItem_BundleFragment } from '../../graphql'
 import { BundleOption } from './BundleOption'
 import { BundleOptionValue } from './BundleOptionValue'
-import type { BundleProductOptionsFragment } from './BundleProductOptions.gql'
 import type { BundleOptionValueProps } from './types'
 
 export type BundelProductOptionsProps = Pick<
@@ -11,22 +11,22 @@ export type BundelProductOptionsProps = Pick<
   'size' | 'layout' | 'color' | 'variant'
 > & {
   renderer?: React.FC<BundleOptionValueProps>
-  product: BundleProductOptionsFragment
+  product: ProductPageItem_BundleFragment
 } & AddToCartItemSelector
 
 export function BundleProductOptions(props: BundelProductOptionsProps) {
-  const { product, index = 0 } = props
+  const { product, index = 0, ...rest } = props
 
   return (
     <>
-      {filterNonNullableKeys(product?.items, ['uid', 'title', 'type']).map((item) => (
+      {(product?.items ?? []).filter(nonNullable).map((item) => (
         <BundleOption
           index={index}
           key={item.uid}
           color='primary'
-          {...props}
-          {...item}
-          idx={item.position ?? 0 + 1000}
+          item={item}
+          product={product}
+          {...rest}
           renderer={BundleOptionValue}
         />
       ))}

package/components/BundleProductOptions/calculateBundleOptionValuePrice.ts

@@ -0,0 +1,45 @@
+import type { CurrencyEnum } from '@graphcommerce/graphql-mesh'
+import type { ProductListPriceFragment } from '@graphcommerce/magento-product/components'
+import type { BundleProductItemOptionType, BundleProductItemType, BundleProductType } from './types'
+
+export type CalculatedBundleOptionValuePrice = [number, number] // [regularPrice, finalPrice]
+
+export function calculateBundleOptionValuePrice(
+  product: BundleProductType,
+  item: BundleProductItemType,
+  option: BundleProductItemOptionType,
+  quantity = 1,
+): CalculatedBundleOptionValuePrice {
+  const { dynamic_price = false } = product
+  const precentOff = item?.price_range.minimum_price.discount?.percent_off ?? 0
+
+  const regularPrice =
+    (dynamic_price ? option.product?.price_range.minimum_price.final_price.value : option.price) ??
+    0
+
+  const finalPrice = regularPrice * (1 - precentOff / 100)
+  return [regularPrice * quantity, finalPrice * quantity]
+}
+
+export function sumCalculatedBundleOptionValuePrices(
+  prices: CalculatedBundleOptionValuePrice[],
+): CalculatedBundleOptionValuePrice {
+  return prices.reduce((acc, [regular, final]) => [acc[0] + regular, acc[1] + final], [0, 0])
+}
+
+export function substractCalculatedBundleOptionValuePrices(
+  basePrice: CalculatedBundleOptionValuePrice,
+  substractPrice: CalculatedBundleOptionValuePrice,
+): CalculatedBundleOptionValuePrice {
+  return [basePrice[0] - substractPrice[0], basePrice[1] - substractPrice[1]]
+}
+
+export function toProductListPriceFragment(
+  price: CalculatedBundleOptionValuePrice,
+  currency: CurrencyEnum | null | undefined,
+): ProductListPriceFragment {
+  return {
+    regular_price: { currency: currency, value: price[0] },
+    final_price: { currency, value: price[1] },
+  }
+}

package/components/BundleProductOptions/types.ts

@@ -1,18 +1,32 @@
 import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import type { ActionCardListProps } from '@graphcommerce/next-ui'
-import type { BundleProductOptionsFragment } from './BundleProductOptions.gql'
+import type { ProductPageItem_BundleFragment } from '../../graphql'
+
+export type BundleProductType = ProductPageItem_BundleFragment
+export type BundleProductItemType = NonNullable<NonNullable<BundleProductType['items']>[number]>
+export type BundleProductItemOptionType = NonNullable<
+  NonNullable<BundleProductItemType['options']>[number]
+>
 
 export type BundleOptionProps = {
-  idx: number
-  index: number
   renderer?: React.FC<ActionCardItemRenderProps<BundleOptionValueProps>>
-} & NonNullable<NonNullable<BundleProductOptionsFragment['items']>[number]> &
-  Pick<ActionCardListProps, 'size' | 'layout' | 'color' | 'variant'>
+  index: number
+  product: BundleProductType
+  item: BundleProductItemType
+} & Pick<ActionCardListProps, 'size' | 'layout' | 'color' | 'variant'>
 
-export type BundleOptionValueProps = NonNullable<
-  NonNullable<BundleOptionProps['options']>[number]
-> & {
-  idx: number
+export type BundleOptionValueProps = {
   index: number
-  required: boolean
+  product: BundleProductType
+  item: BundleProductItemType
+  option: BundleProductItemOptionType
+}
+
+const possibleTypes = ['radio', 'checkbox', 'multi', 'select'] as const
+export type BundleOptionType = (typeof possibleTypes)[number]
+
+export function toBundleOptionType(type: string | null | undefined): BundleOptionType {
+  if (!type) return 'radio'
+  if (possibleTypes.includes(type as BundleOptionType)) return type as BundleOptionType
+  return 'radio'
 }

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

@@ -1,6 +1,6 @@
 import type { ProductListItemProps } from '@graphcommerce/magento-product'
 import { ProductListItem } from '@graphcommerce/magento-product'
-import type { ProductListItemBundleFragment } from './ProductListItemBundle.gql'
+import type { ProductListItemBundleFragment } from '../../graphql'
 
 export type ProdustListItemBundleProps = ProductListItemBundleFragment & ProductListItemProps
 

package/components/index.ts

@@ -0,0 +1,6 @@
+export * from './ProductListItemBundle/ProductListItemBundle'
+export * from './BundleProductOptions/BundleOption'
+export * from './BundleProductOptions/BundleOptionValue'
+export * from './BundleProductOptions/BundleProductOptions'
+export * from './BundleProductOptions/calculateBundleOptionValuePrice'
+export * from './BundleProductOptions/types'

package/{components/BundleCartItem → graphql/fragments}/BundleCartItem.graphql

@@ -5,15 +5,7 @@ fragment BundleCartItem on BundleCartItem @inject(into: ["CartItem"]) {
     }
   }
   bundle_options {
-    uid
-    label
-    type
-    values {
-      uid
-      label
-      quantity
-      price
-    }
+    ...SelectedBundleOption
   }
   customizable_options {
     ...SelectedCustomizableOption

package/graphql/fragments/ItemSelectedBundleOption.graphql

@@ -0,0 +1,13 @@
+fragment ItemSelectedBundleOption on ItemSelectedBundleOption {
+  label
+  uid
+  values {
+    price {
+      ...Money
+    }
+    product_name
+    product_sku
+    quantity
+    uid
+  }
+}

package/graphql/fragments/SelectedBundleOption.graphql

@@ -0,0 +1,11 @@
+fragment SelectedBundleOption on SelectedBundleOption {
+  uid
+  label
+  type
+  values {
+    uid
+    label
+    quantity
+    price
+  }
+}

package/graphql/index.ts

@@ -0,0 +1,9 @@
+export * from './fragments/BundleCartItem.gql'
+export * from './fragments/ItemSelectedBundleOption.gql'
+export * from './fragments/SelectedBundleOption.gql'
+export * from './inject/CreditMemoItem_Bundle.gql'
+export * from './inject/InvoiceItem_Bundle.gql'
+export * from './inject/OrderItem_Bundle.gql'
+export * from './inject/ProductListItemBundle.gql'
+export * from './inject/ProductPageItem_Bundle.gql'
+export * from './inject/ShipmentItem_Bundle.gql'

package/graphql/inject/CreditMemoItem_Bundle.graphql

@@ -0,0 +1,5 @@
+fragment CreditMemoItem_Bundle on BundleCreditMemoItem @inject(into: ["CreditMemoItem"]) {
+  bundle_options {
+    ...ItemSelectedBundleOption
+  }
+}

package/graphql/inject/InvoiceItem_Bundle.graphql

@@ -0,0 +1,5 @@
+fragment InvoiceItem_Bundle on BundleInvoiceItem @inject(into: ["InvoiceItem"]) {
+  bundle_options {
+    ...ItemSelectedBundleOption
+  }
+}

package/graphql/inject/OrderItem_Bundle.graphql

@@ -0,0 +1,5 @@
+fragment OrderItem_Bundle on BundleOrderItem @inject(into: ["OrderItem"]) {
+  bundle_options {
+    ...ItemSelectedBundleOption
+  }
+}

package/{components/BundleProductOptions/BundleProductOptions.graphql → graphql/inject/ProductPageItem_Bundle.graphql}

@@ -1,9 +1,20 @@
-fragment BundleProductOptions on BundleProduct {
+fragment ProductPageItem_Bundle on BundleProduct @inject(into: ["ProductPageItem"]) {
   ship_bundle_items
   dynamic_sku
   dynamic_price
   dynamic_weight
+  price_view
   items {
+    price_range {
+      minimum_price {
+        final_price {
+          currency
+        }
+        discount {
+          percent_off
+        }
+      }
+    }
     uid
     position
     required
@@ -11,6 +22,7 @@ fragment BundleProductOptions on BundleProduct {
     title
     type
     options {
+      __typename
       can_change_quantity
       uid
       is_default
@@ -29,6 +41,13 @@ fragment BundleProductOptions on BundleProduct {
         thumbnail {
           ...ProductImage
         }
+        price_range {
+          minimum_price {
+            final_price {
+              ...Money
+            }
+          }
+        }
       }
     }
   }

package/graphql/inject/ShipmentItem_Bundle.graphql

@@ -0,0 +1,5 @@
+fragment ShipmentItem_Bundle on BundleShipmentItem @inject(into: ["ShipmentItem"]) {
+  bundle_options {
+    ...ItemSelectedBundleOption
+  }
+}

package/index.ts

@@ -1,4 +1,3 @@
-export * from './ProductListItemBundle'
-export * from './components/BundleCartItem/BundleCartItem'
-export * from './BundleProductPage.gql'
+export * from './components/ProductListItemBundle/ProductListItemBundle'
 export * from './components/BundleProductOptions'
+export * from './graphql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-bundle",
   "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/graphql": "^9.1.0-canary.18",
-    "@graphcommerce/image": "^9.1.0-canary.18",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.18",
-    "@graphcommerce/magento-cart-items": "^9.1.0-canary.18",
-    "@graphcommerce/magento-product": "^9.1.0-canary.18",
-    "@graphcommerce/magento-product-simple": "^9.1.0-canary.18",
-    "@graphcommerce/magento-product-virtual": "^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/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/graphql": "^9.1.0-canary.20",
+    "@graphcommerce/image": "^9.1.0-canary.20",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.20",
+    "@graphcommerce/magento-cart-items": "^9.1.0-canary.20",
+    "@graphcommerce/magento-product": "^9.1.0-canary.20",
+    "@graphcommerce/magento-product-simple": "^9.1.0-canary.20",
+    "@graphcommerce/magento-product-virtual": "^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/typescript-config-pwa": "^9.1.0-canary.20",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/BundleCartItemActionCard.tsx

@@ -1,7 +1,10 @@
-import type { CartItemActionCardProps } from '@graphcommerce/magento-cart-items'
+import {
+  selectedCustomizableOptionsModifiers,
+  type CartItemActionCardProps,
+} from '@graphcommerce/magento-cart-items'
+import type { PriceModifier } from '@graphcommerce/magento-store'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { isTypename } from '@graphcommerce/next-ui'
-import { BundleProductCartItemOptions } from '../components/BundleProductCartItemOptions/BundleProductCartItemOptions'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 
 export const config: PluginConfig = {
   type: 'component',
@@ -11,17 +14,29 @@ export const config: PluginConfig = {
 export function CartItemActionCard(props: PluginProps<CartItemActionCardProps>) {
   const { Prev, ...rest } = props
 
-  if (!isTypename(rest.cartItem, ['BundleCartItem'])) return <Prev {...rest} />
+  if (rest.cartItem.__typename !== 'BundleCartItem') return <Prev {...rest} />
+
+  const bundleModifiers = filterNonNullableKeys(rest.cartItem.bundle_options).map<PriceModifier>(
+    (option) => ({
+      key: option.uid,
+      label: option.label,
+      items: filterNonNullableKeys(option.values).map((value) => ({
+        key: value.uid,
+        label: value.label,
+        amount: value.price,
+        quantity: value.quantity,
+      })),
+    }),
+  )
 
   return (
     <Prev
       {...rest}
-      details={
-        <>
-          {rest.details}
-          <BundleProductCartItemOptions {...rest.cartItem} />
-        </>
-      }
+      priceModifiers={[
+        ...(rest.priceModifiers ?? []),
+        ...bundleModifiers,
+        ...selectedCustomizableOptionsModifiers(rest.cartItem),
+      ]}
     />
   )
 }

package/plugins/BundleCreditMemoItem.tsx

@@ -0,0 +1,33 @@
+import type { CreditMemoItemProps } from '@graphcommerce/magento-customer'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-customer',
+}
+
+export function CreditMemoItem(props: PluginProps<CreditMemoItemProps>) {
+  const { Prev, ...rest } = props
+
+  if (rest.item.__typename !== 'BundleCreditMemoItem') return <Prev {...rest} />
+
+  return (
+    <Prev
+      {...rest}
+      priceModifiers={[
+        ...(rest.priceModifiers ?? []),
+        ...filterNonNullableKeys(rest.item.bundle_options).map((option) => ({
+          key: option.uid,
+          label: option.label,
+          items: filterNonNullableKeys(option.values).map((value, index) => ({
+            key: `${index}`,
+            label: value.product_name,
+            amount: value.price.value ?? 0,
+            quantity: value.quantity,
+          })),
+        })),
+      ]}
+    />
+  )
+}

package/plugins/BundleInvoiceItem.tsx

@@ -0,0 +1,33 @@
+import type { InvoiceItemProps } from '@graphcommerce/magento-customer'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-customer',
+}
+
+export function InvoiceItem(props: PluginProps<InvoiceItemProps>) {
+  const { Prev, ...rest } = props
+
+  if (rest.item.__typename !== 'BundleInvoiceItem') return <Prev {...rest} />
+
+  return (
+    <Prev
+      {...rest}
+      priceModifiers={[
+        ...(rest.priceModifiers ?? []),
+        ...filterNonNullableKeys(rest.item.bundle_options).map((option) => ({
+          key: option.uid,
+          label: option.label,
+          items: filterNonNullableKeys(option.values).map((value, index) => ({
+            key: `${index}`,
+            label: value.product_name,
+            amount: value.price.value ?? 0,
+            quantity: value.quantity,
+          })),
+        })),
+      ]}
+    />
+  )
+}

package/plugins/BundleOrderItem.tsx

@@ -0,0 +1,33 @@
+import type { OrderItemProps } from '@graphcommerce/magento-customer'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-customer',
+}
+
+export function OrderItem(props: PluginProps<OrderItemProps>) {
+  const { Prev, ...rest } = props
+
+  if (rest.item.__typename !== 'BundleOrderItem') return <Prev {...rest} />
+
+  return (
+    <Prev
+      {...rest}
+      priceModifiers={[
+        ...(rest.priceModifiers ?? []),
+        ...filterNonNullableKeys(rest.item.bundle_options).map((option) => ({
+          key: option.uid,
+          label: option.label,
+          items: filterNonNullableKeys(option.values).map((value, index) => ({
+            key: `${index}`,
+            label: value.product_name,
+            amount: value.price.value ?? 0,
+            quantity: value.quantity,
+          })),
+        })),
+      ]}
+    />
+  )
+}

package/plugins/BundleProductPagePrice.tsx

@@ -0,0 +1,117 @@
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import {
+  useFormAddProductsToCart,
+  type AddToCartItemSelector,
+  type ProductPagePriceProps,
+} from '@graphcommerce/magento-product'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
+import {
+  calculateBundleOptionValuePrice,
+  substractCalculatedBundleOptionValuePrices,
+  sumCalculatedBundleOptionValuePrices,
+  toProductListPriceFragment,
+  type CalculatedBundleOptionValuePrice,
+} from '../components/BundleProductOptions/calculateBundleOptionValuePrice'
+import type { BundleProductItemOptionType } from '../components/BundleProductOptions/types'
+import type { ProductPageItem_BundleFragment } from '../graphql'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-product',
+}
+
+function isBundleProduct(
+  product:
+    | ProductPagePriceProps['product']
+    | (ProductPagePriceProps['product'] & ProductPageItem_BundleFragment),
+): product is ProductPagePriceProps['product'] & ProductPageItem_BundleFragment {
+  return (
+    product.__typename === 'BundleProduct' &&
+    Array.isArray((product as ProductPageItem_BundleFragment).items)
+  )
+}
+
+export function ProductPagePrice(
+  props: PluginProps<ProductPagePriceProps> & AddToCartItemSelector,
+) {
+  const { Prev, product, index = 0, ...rest } = props
+
+  const form = useFormAddProductsToCart()
+  const allSelectedOptions =
+    useWatch({
+      control: form.control,
+      name: `cartItems.${index}.selected_options_record`,
+    }) ?? {}
+
+  const allEnteredOptions =
+    useWatch({
+      control: form.control,
+      name: `cartItems.${index}.entered_options_record`,
+    }) ?? {}
+
+  if (!isBundleProduct(product)) {
+    return <Prev product={product} index={index} {...rest} />
+  }
+
+  const cheapestPricesAlreadyIncludedInBasePrice = filterNonNullableKeys(product.items)
+    .filter((item) => item.required)
+    .map((item) =>
+      item.options
+        .filter(nonNullable)
+        .map((option) => calculateBundleOptionValuePrice(product, item, option))
+        .reduce((acc, price) => (price[1] < acc[1] ? price : acc)),
+    )
+
+  const reduceBase = sumCalculatedBundleOptionValuePrices(cheapestPricesAlreadyIncludedInBasePrice)
+
+  const basePrice: CalculatedBundleOptionValuePrice = [
+    product.price_range.minimum_price.regular_price.value ?? 0,
+    product.price_range.minimum_price.final_price.value ?? 0,
+  ]
+  const base = substractCalculatedBundleOptionValuePrices(basePrice, reduceBase)
+
+  // This only works with Magento 2.4.7, but that is fine.
+  const itemPrices = filterNonNullableKeys(product.items)
+    .map((item) => {
+      const selectedOption = allSelectedOptions[item.uid]
+      const allOptions = item.options.filter(nonNullable)
+
+      const options: BundleProductItemOptionType[] = selectedOption
+        ? allOptions.filter((o) => {
+            if (Array.isArray(selectedOption)) return selectedOption.includes(o?.uid ?? '')
+            return selectedOption === o?.uid
+          })
+        : allOptions.filter((o) => o?.is_default)
+
+      return options.map((option) => {
+        const quantity = allEnteredOptions[option.uid]
+          ? Number(allEnteredOptions[option.uid])
+          : (option.quantity ?? 1)
+        return calculateBundleOptionValuePrice(product, item, option, quantity)
+      })
+    })
+    .flat(1)
+
+  const totalPrice = toProductListPriceFragment(
+    sumCalculatedBundleOptionValuePrices([base, ...itemPrices]),
+    product.price_range.minimum_price.final_price.currency,
+  )
+
+  return (
+    <Prev
+      product={{
+        ...product,
+        price_range: {
+          ...product.price_range,
+          minimum_price: {
+            ...product.price_range.minimum_price,
+            ...totalPrice,
+          },
+        },
+      }}
+      index={index}
+      {...rest}
+    />
+  )
+}

package/plugins/BundleShipmentItem.tsx

@@ -0,0 +1,33 @@
+import type { ShipmentItemProps } from '@graphcommerce/magento-customer'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-customer',
+}
+
+export function ShipmentItem(props: PluginProps<ShipmentItemProps>) {
+  const { Prev, ...rest } = props
+
+  if (rest.item.__typename !== 'BundleShipmentItem') return <Prev {...rest} />
+
+  return (
+    <Prev
+      {...rest}
+      priceModifiers={[
+        ...(rest.priceModifiers ?? []),
+        ...filterNonNullableKeys(rest.item.bundle_options).map((option) => ({
+          key: option.uid,
+          label: option.label,
+          items: filterNonNullableKeys(option.values).map((value, index) => ({
+            key: `${index}`,
+            label: value.product_name,
+            amount: value.price.value ?? 0,
+            quantity: value.quantity,
+          })),
+        })),
+      ]}
+    />
+  )
+}

package/plugins/Bundle_cartItemToCartItemInput.ts

@@ -0,0 +1,48 @@
+import { type cartItemToCartItemInput as cartItemToCartItemInputType } from '@graphcommerce/magento-cart-items'
+import type { AddProductsToCartFields } from '@graphcommerce/magento-product/components'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { toBundleOptionType } from '../components/BundleProductOptions/types'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/magento-cart-items',
+}
+
+export const cartItemToCartItemInput: FunctionPlugin<typeof cartItemToCartItemInputType> = (
+  prev,
+  props,
+) => {
+  const result = prev(props)
+  const { product, cartItem } = props
+
+  if (!result) return result
+  if (product.__typename !== 'BundleProduct') return result
+  if (cartItem.__typename !== 'BundleCartItem') return result
+
+  const selected: AddProductsToCartFields['cartItems'][number]['selected_options_record'] = {}
+  const entered: AddProductsToCartFields['cartItems'][number]['entered_options_record'] = {}
+
+  const items = filterNonNullableKeys(product.items)
+
+  filterNonNullableKeys(cartItem.bundle_options).forEach((option) => {
+    const values = filterNonNullableKeys(option?.values)
+    const productItem = items.find((item) => item.uid === option.uid)
+    const type = toBundleOptionType(productItem?.type)
+
+    const vals = values.map((v) => v.uid)
+    selected[option.uid] = type === 'multi' || type === 'checkbox' ? vals : vals[0]
+
+    values.forEach((v) => {
+      const productOptions = filterNonNullableKeys(productItem?.options)
+      const productOption = productOptions.find((o) => o.uid === v.uid)
+      if (productOption?.can_change_quantity) entered[v.uid] = v.quantity
+    })
+  })
+
+  return {
+    ...result,
+    selected_options_record: { ...result.selected_options_record, ...selected },
+    entered_options_record: { ...result.entered_options_record, ...entered },
+  }
+}

package/BundleProductPage.graphql

@@ -1,3 +0,0 @@
-query BundleProductPage($urlKey: String) {
-  ...ProductPageBundleQueryFragment
-}

package/ProductPageBundleQueryFragment.graphql

@@ -1,9 +0,0 @@
-fragment ProductPageBundleQueryFragment on Query {
-  typeProducts: products(filter: { url_key: { eq: $urlKey } }) {
-    items {
-      __typename
-      uid
-      ...BundleProductOptions
-    }
-  }
-}

package/components/BundleCartItem/BundleCartItem.tsx

@@ -1,36 +0,0 @@
-import { SelectedCustomizableOptions } from '@graphcommerce/magento-cart-items'
-import { Money } from '@graphcommerce/magento-store'
-import { Typography } from '@mui/material'
-import type { BundleProductCartItemOptionsProps } from '../BundleProductCartItemOptions/BundleProductCartItemOptions'
-
-/**
- * @deprecated
- * @public
- */
-export function BundleCartItem(props: BundleProductCartItemOptionsProps) {
-  const { bundle_options } = props
-  return (
-    <>
-      {bundle_options.map((option) => {
-        if (!option?.uid) return null
-        return (
-          <div key={option.uid}>
-            {option.values.map((value) => {
-              if (!value?.uid) return null
-              return (
-                <Typography variant='body2' component='div' key={value.uid}>
-                  {value.quantity > 1 && <>{value.quantity} &times; </>}
-                  <Typography variant='subtitle2' component='span'>
-                    {value.label}
-                  </Typography>{' '}
-                  {value.price > 0 && <Money value={value.price} />}
-                </Typography>
-              )
-            })}
-          </div>
-        )
-      })}
-      <SelectedCustomizableOptions {...props} />
-    </>
-  )
-}

package/components/BundleProductCartItemOptions/BundleProductCartItemOptions.tsx

@@ -1,42 +0,0 @@
-import type { CartItemFragment } from '@graphcommerce/magento-cart-items'
-import { SelectedCustomizableOptions } from '@graphcommerce/magento-cart-items'
-import { Money } from '@graphcommerce/magento-store'
-import { nonNullable } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
-import type { BundleCartItemFragment } from '../BundleCartItem/BundleCartItem.gql'
-
-export type BundleProductCartItemOptionsProps = BundleCartItemFragment & CartItemFragment
-
-export function BundleProductCartItemOptions(props: BundleProductCartItemOptionsProps) {
-  const { bundle_options, prices } = props
-
-  return (
-    <>
-      {bundle_options?.map((option) =>
-        option?.values.filter(nonNullable).map((option_value) => (
-          <Box
-            key={option_value.uid}
-            sx={(theme) => ({
-              display: 'flex',
-              gap: theme.spacings.xxs,
-              [theme.breakpoints.down('sm')]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            })}
-          >
-            <Box sx={{ color: 'text.primary' }}>
-              {option_value.label} {option_value.quantity > 1 && `x${option_value.quantity}`}
-            </Box>
-            {option_value.price > 0 && (
-              <Box sx={(theme) => ({ position: 'absolute', right: theme.spacings.xs })}>
-                <Money currency={prices?.price.currency} value={option_value.price} />
-              </Box>
-            )}
-          </Box>
-        )),
-      )}
-
-      <SelectedCustomizableOptions {...props} />
-    </>
-  )
-}