@graphcommerce/magento-product-bundle 4.0.57 → 4.1.0

package/BundleItemsForm/BundleItemsForm.tsx

@@ -1,28 +1,3 @@
-import { BundleItemsFragment } from './BundleItems.gql'
-
-type BundleItemsFormProps = BundleItemsFragment
-
-export function BundleItemsForm(props: BundleItemsFormProps) {
-  const { items } = props
-  return (
-    <>
-      {items?.map((item) => {
-        if (!item?.type) return null
-        // const type = item.type as 'radio' | 'checkbox'
-
-        return (
-          <div key={item?.uid ?? ''}>
-            {item?.title}
-
-            {item?.required}
-
-            {item?.type}
-            {item?.options?.map((option) => (
-              <div key={option?.uid ?? ''}>{option?.label}</div>
-            ))}
-          </div>
-        )
-      })}
-    </>
-  )
+export function BundleItemsForm(props: Record<string, unknown>) {
+  return null
 }

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Change Log
 
+## 4.1.0
+
+### Minor Changes
+
+- [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8) Thanks [@paales](https://github.com/paales)! - Introduced `<AddProductsToCartForm/>`, which is allows for adding all product types to the cart with a single react-hook-form form.
+
+  Which allows you to fully compose the form on the product page without having to modify the page.
+
+### Patch Changes
+
+- Updated dependencies [[`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8), [`9e6fd498e`](https://github.com/graphcommerce-org/graphcommerce/commit/9e6fd498e3242ab30602767ae77a8e22f80d9fd3), [`b6bf2c941`](https://github.com/graphcommerce-org/graphcommerce/commit/b6bf2c94197ddacbf8f1fc0d352cd0d46e096f30)]:
+  - @graphcommerce/ecommerce-ui@1.5.0
+  - @graphcommerce/magento-product@4.6.0
+  - @graphcommerce/magento-product-simple@4.1.0
+  - @graphcommerce/magento-product-virtual@4.1.0
+  - @graphcommerce/magento-store@4.3.0
+  - @graphcommerce/next-ui@4.27.0
+  - @graphcommerce/magento-cart@4.8.4
+  - @graphcommerce/magento-cart-items@3.1.11
+
+## 4.0.58
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/magento-cart@4.8.3
+  - @graphcommerce/magento-cart-items@3.1.10
+  - @graphcommerce/magento-product@4.5.10
+  - @graphcommerce/magento-product-simple@4.0.58
+  - @graphcommerce/magento-product-virtual@4.0.58
+
 ## 4.0.57
 
 ### Patch Changes

package/ProductPageBundleQueryFragment.graphql

@@ -1,14 +1,9 @@
 fragment ProductPageBundleQueryFragment on Query {
   typeProducts: products(filter: { url_key: { eq: $urlKey } }) {
-    ...ProductSpecs
     items {
       __typename
       uid
-      ... on BundleProduct {
-        ...ProductWeight
-        ...ProductCustomizable
-        ...BundleItems
-      }
+      ...BundleProductOptions
     }
   }
 }

package/components/BundleProductOptions/BundleOption.tsx

@@ -0,0 +1,57 @@
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product/components'
+import {
+  SectionHeader,
+  ActionCardListForm,
+  ActionCardItemBase,
+  filterNonNullableKeys,
+} from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+import React, { useMemo } from 'react'
+import { BundleOptionValue } from './BundleOptionValue'
+import { BundleOptionProps, BundleOptionValueProps } from './types'
+
+export const BundleOption = React.memo<BundleOptionProps>((props) => {
+  const { idx, index, options, title, color, layout, size, variant, required: _required } = props
+  const { control } = useFormAddProductsToCart()
+
+  const can_change_quantity = options?.some((o) => o?.can_change_quantity)
+  const required = _required ?? false
+
+  return (
+    <div>
+      <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
+      <ActionCardListForm<BundleOptionValueProps & ActionCardItemBase>
+        control={control}
+        required={required}
+        color={color}
+        layout={layout}
+        size={size}
+        variant={variant}
+        defaultValue={options?.find((opt) => opt?.is_default)?.uid}
+        rules={{
+          required: required
+            ? 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}`
+        }
+        collapse={can_change_quantity}
+        render={BundleOptionValue}
+        items={useMemo(
+          () =>
+            filterNonNullableKeys(options).map((option) => ({
+              ...option,
+              value: option.uid,
+              idx,
+              index,
+              required,
+            })),
+          [idx, index, options, required],
+        )}
+      />
+    </div>
+  )
+})

package/components/BundleProductOptions/BundleOptionValue.tsx

@@ -0,0 +1,101 @@
+import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { Image } from '@graphcommerce/image'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product/components'
+import { Money } from '@graphcommerce/magento-store'
+import {
+  responsiveVal,
+  ActionCardItemRenderProps,
+  ActionCard,
+  Button,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { BundleOptionValueProps } from './types'
+
+const swatchSizes = {
+  small: responsiveVal(30, 40),
+  medium: responsiveVal(30, 50),
+  large: responsiveVal(50, 80),
+}
+
+export const BundleOptionValue = (props: ActionCardItemRenderProps<BundleOptionValueProps>) => {
+  const {
+    selected,
+    idx,
+    index,
+    price,
+    product,
+    label,
+    size = 'large',
+    color,
+    can_change_quantity,
+    quantity = 1,
+    required,
+    onReset,
+  } = props
+  const { control } = useFormAddProductsToCart()
+
+  const thumbnail = product?.thumbnail?.url
+
+  return (
+    <ActionCard
+      {...props}
+      title={label}
+      price={price ? <Money value={price} /> : undefined}
+      image={
+        thumbnail &&
+        !thumbnail.includes('/placeholder/') && (
+          <Image
+            src={thumbnail}
+            width={40}
+            height={40}
+            alt={label ?? ''}
+            sizes={swatchSizes[size]}
+            sx={{
+              display: 'block',
+              width: swatchSizes[size],
+              height: swatchSizes[size],
+              objectFit: 'cover',
+            }}
+          />
+        )
+      }
+      action={
+        (can_change_quantity || !required) && (
+          <Button disableTouchRipple variant='inline' color='secondary' size='small'>
+            <Trans id='Select' />
+          </Button>
+        )
+      }
+      reset={
+        (can_change_quantity || !required) && (
+          <Button
+            disableTouchRipple
+            variant='inline'
+            color='secondary'
+            size='small'
+            onClick={onReset}
+          >
+            {can_change_quantity ? <Trans id='Change' /> : <Trans id='Remove' />}
+          </Button>
+        )
+      }
+      secondaryAction={
+        selected &&
+        can_change_quantity && (
+          <TextFieldElement
+            size='small'
+            label='Quantity'
+            color={color}
+            required
+            defaultValue={`${quantity}`}
+            control={control}
+            sx={{ width: responsiveVal(80, 120), mt: 2 }}
+            name={`cartItems.${index}.entered_options.${idx}.value`}
+            type='number'
+            onMouseDown={(e) => e.stopPropagation()}
+          />
+        )
+      }
+    />
+  )
+}

package/{BundleItemsForm/BundleItems.graphql → components/BundleProductOptions/BundleProductOptions.graphql}

@@ -1,4 +1,4 @@
-fragment BundleItems on BundleProduct {
+fragment BundleProductOptions on BundleProduct {
   ship_bundle_items
   dynamic_sku
   dynamic_price
@@ -21,11 +21,17 @@ fragment BundleItems on BundleProduct {
       quantity
       uid
       product {
+        swatch_image
         uid
         __typename
-        ...ProductListItem
-        ...ProductListItemSimple
-        ...ProductListItemVirtual
+        name
+        url_key
+        thumbnail {
+          disabled
+          label
+          position
+          url
+        }
       }
     }
   }

package/components/BundleProductOptions/BundleProductOptions.tsx

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

package/components/BundleProductOptions/index.ts

@@ -0,0 +1 @@
+export * from './BundleProductOptions'

package/components/BundleProductOptions/types.ts

@@ -0,0 +1,17 @@
+import { ActionCardItemRenderProps, ActionCardListProps } from '@graphcommerce/next-ui'
+import { BundleProductOptionsFragment } from './BundleProductOptions.gql'
+
+export type BundleOptionProps = {
+  idx: number
+  index: number
+  renderer?: React.FC<ActionCardItemRenderProps<BundleOptionValueProps>>
+} & NonNullable<NonNullable<BundleProductOptionsFragment['items']>[number]> &
+  Pick<ActionCardListProps, 'size' | 'layout' | 'color' | 'variant'>
+
+export type BundleOptionValueProps = NonNullable<
+  NonNullable<BundleOptionProps['options']>[number]
+> & {
+  idx: number
+  index: number
+  required: boolean
+}

package/index.ts

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-bundle",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.0.57",
+  "version": "4.1.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,12 +18,16 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
+    "@graphcommerce/ecommerce-ui": "1.5.0",
     "@graphcommerce/graphql": "3.4.8",
-    "@graphcommerce/magento-cart": "4.8.2",
-    "@graphcommerce/magento-cart-items": "3.1.9",
-    "@graphcommerce/magento-product": "4.5.9",
-    "@graphcommerce/magento-product-simple": "4.0.57",
-    "@graphcommerce/magento-product-virtual": "4.0.57"
+    "@graphcommerce/image": "3.1.9",
+    "@graphcommerce/magento-cart": "4.8.4",
+    "@graphcommerce/magento-cart-items": "3.1.11",
+    "@graphcommerce/magento-product": "4.6.0",
+    "@graphcommerce/magento-product-simple": "4.1.0",
+    "@graphcommerce/magento-product-virtual": "4.1.0",
+    "@graphcommerce/magento-store": "4.3.0",
+    "@graphcommerce/next-ui": "4.27.0"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/AddBundleProductToCart.graphql

@@ -1,25 +0,0 @@
-mutation AddBundleProductToCart(
-  $cartId: String!
-  $sku: String!
-  $bundleOptions: [BundleOptionInput!]!
-  $quantity: Float = 1
-  $customizableOptions: [CustomizableOptionInput] = []
-) {
-  addBundleProductsToCart(
-    input: {
-      cart_id: $cartId
-      cart_items: [
-        {
-          data: { quantity: $quantity, sku: $sku }
-          customizable_options: $customizableOptions
-          bundle_options: $bundleOptions
-        }
-      ]
-    }
-  ) {
-    cart {
-      id
-      __typename
-    }
-  }
-}