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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 9.1.0-canary.20
+
+## 9.1.0-canary.19
+
+### Patch Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`d859dd8`](https://github.com/graphcommerce-org/graphcommerce/commit/d859dd8e5e89e4f22cd6e89e3ae8d03067de6c51) - Do not directly update the cache of the defaultConfigurableOptionsSelection, but query the backend. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`6b2b44c`](https://github.com/graphcommerce-org/graphcommerce/commit/6b2b44ca853279144d7768067f3462d4d4bf0af1) - Move the cartItemEdit functionality to a plugin for configurable products ([@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))
+
 ## 9.1.0-canary.18
 
 ## 9.1.0-canary.17

package/components/ConfigurableCartItemOptions/ConfigurableCartItemOptions.tsx

@@ -5,6 +5,7 @@ import type { ConfigurableCartItemFragment } from '../../ConfigurableCartItem/Co
 
 export type ConfigurableActionCartItemProps = ConfigurableCartItemFragment & CartItemFragment
 
+/** @deprecated Replaced by PriceModifiers on the CartItemActionCard */
 export function ConfigurableCartItemOptions(props: ConfigurableActionCartItemProps) {
   const { configurable_options } = props
   return (

package/components/ConfigurableOptionValueImage/ConfigurableOptionValueImage.tsx

@@ -64,11 +64,6 @@ export function ConfigurableOptionValueImage(props: ConfigurableOptionValueImage
           }
         })
       }
-      reset={
-        <Button variant='inline' color='secondary' onClick={onReset} disableRipple>
-          <Trans id='Change' />
-        </Button>
-      }
       size={size}
     />
   )

package/components/ConfigurableProductOptions/ConfigurableProductOption.tsx

@@ -7,7 +7,7 @@ import { useWatch } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
-import type { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
+import type { ConfigurableOptionsFragment } from '../../graphql'
 import type { UseConfigurableOptionsSelection } from '../../hooks'
 import { useConfigurableOptionsForSelection } from '../../hooks'
 import type {

package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

@@ -7,7 +7,7 @@ import { i18n } from '@lingui/core'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import React, { useEffect, useMemo } from 'react'
-import type { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
+import type { ConfigurableOptionsFragment } from '../../graphql'
 import { useConfigurableOptionsSelection } from '../../hooks'
 import { ConfigurableOptionValue } from '../ConfigurableOptionValue/ConfigurableOptionValue'
 import { ConfigurableProductOption } from './ConfigurableProductOption'

package/graphql/index.ts

@@ -1,2 +1,4 @@
-export * from './ConfigurableOptionsSelection.gql'
-export * from './GetConfigurableOptionsSelection.gql'
+export * from './queries/GetConfigurableOptionsSelection.gql'
+export * from './fragments/ConfigurableOptions.gql'
+export * from './fragments/ConfigurableOptionsSelection.gql'
+export * from './fragments/UseConfigurableOptions.gql'

package/hooks/useConfigurableOptionsSelection.ts

@@ -3,8 +3,8 @@ import type { AddToCartItemSelector } from '@graphcommerce/magento-product'
 import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
 import { findByTypename, nonNullable } from '@graphcommerce/next-ui'
 import { useWatch } from '@graphcommerce/react-hook-form'
-import { GetConfigurableOptionsSelectionDocument } from '../graphql/GetConfigurableOptionsSelection.gql'
-import type { UseConfigurableOptionsFragment } from '../graphql/UseConfigurableOptions.gql'
+import type { UseConfigurableOptionsFragment } from '../graphql'
+import { GetConfigurableOptionsSelectionDocument } from '../graphql'
 
 type UseConfigurableOptionsForSelection = {
   selectedOptions: string[]

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-configurable",
   "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,23 +12,23 @@
     }
   },
   "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/graphql-mesh": "^9.1.0-canary.18",
-    "@graphcommerce/image": "^9.1.0-canary.18",
-    "@graphcommerce/lingui-next": "9.1.0-canary.18",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.18",
-    "@graphcommerce/magento-cart-items": "^9.1.0-canary.18",
-    "@graphcommerce/magento-category": "^9.1.0-canary.18",
-    "@graphcommerce/magento-customer": "^9.1.0-canary.18",
-    "@graphcommerce/magento-product": "^9.1.0-canary.18",
-    "@graphcommerce/magento-product-simple": "^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/react-hook-form": "^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/graphql-mesh": "^9.1.0-canary.20",
+    "@graphcommerce/image": "^9.1.0-canary.20",
+    "@graphcommerce/lingui-next": "9.1.0-canary.20",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.20",
+    "@graphcommerce/magento-cart-items": "^9.1.0-canary.20",
+    "@graphcommerce/magento-category": "^9.1.0-canary.20",
+    "@graphcommerce/magento-customer": "^9.1.0-canary.20",
+    "@graphcommerce/magento-product": "^9.1.0-canary.20",
+    "@graphcommerce/magento-product-simple": "^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/react-hook-form": "^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/ConfigurableCartItemActionCard.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 { ConfigurableCartItemOptions } from '../components'
+import { filterNonNullableKeys, isTypename } from '@graphcommerce/next-ui'
 
 export const config: PluginConfig = {
   type: 'component',
@@ -13,6 +16,14 @@ export function CartItemActionCard(props: PluginProps<CartItemActionCardProps>)
 
   if (!isTypename(rest.cartItem, ['ConfigurableCartItem'])) return <Prev {...rest} />
 
+  const configurableModifiers: PriceModifier[] = filterNonNullableKeys(
+    rest.cartItem.configurable_options,
+  ).map((option) => ({
+    key: option.configurable_product_option_uid,
+    label: option.option_label,
+    items: [{ key: option.configurable_product_option_value_uid, label: option.value_label }],
+  }))
+
   return (
     <Prev
       {...rest}
@@ -29,12 +40,11 @@ export function CartItemActionCard(props: PluginProps<CartItemActionCardProps>)
           //   : rest.cartItem.product.url_key,
         },
       }}
-      details={
-        <>
-          {rest.details}
-          <ConfigurableCartItemOptions {...rest.cartItem} />
-        </>
-      }
+      priceModifiers={[
+        ...(rest.priceModifiers ?? []),
+        ...configurableModifiers,
+        ...selectedCustomizableOptionsModifiers(rest.cartItem),
+      ]}
     />
   )
 }

package/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx

@@ -17,6 +17,10 @@ export function ProductPageDescription(
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ ...product, index })
 
+  if (product.__typename !== 'ConfigurableProduct') {
+    return <Prev product={product} index={index} {...rest} />
+  }
+  
   return (
     <Prev
       product={{

package/plugins/ConfigurableProductPage/ConfigurableProductPageGallery.tsx

@@ -1,6 +1,5 @@
 import type { AddToCartItemSelector, ProductPageGalleryProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { isTypename } from '@graphcommerce/next-ui'
 import { useConfigurableOptionsSelection } from '../../hooks'
 
 export const config: PluginConfig = {
@@ -21,5 +20,9 @@ export function ProductPageGallery(
       ? configured?.configurable_product_options_selection?.media_gallery
       : product.media_gallery
 
+  if (product.__typename !== 'ConfigurableProduct') {
+    return <Prev product={product} {...rest} />
+  }
+
   return <Prev product={{ ...product, media_gallery }} {...rest} />
 }

package/plugins/ConfigurableProductPage/ConfigurableProductPageJsonLd.tsx

@@ -5,6 +5,7 @@ import type {
 } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableSelectedVariant } from '../../hooks'
+import { isTypename } from '@graphcommerce/next-ui'
 
 export const config: PluginConfig = {
   type: 'component',
@@ -17,5 +18,8 @@ export function ProductPageJsonLd<T extends { '@type': string }, P extends JsonL
 ) {
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ ...product, index })
+
+  if (product.__typename !== 'ConfigurableProduct') return <Prev product={product} {...rest} />
+
   return <Prev product={(variant ?? product) as P} {...rest} />
 }

package/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx

@@ -21,7 +21,9 @@ export function ProductPageMeta(props: PluginProps<ProductPageMetaProps> & AddTo
   const isValidVariant = (variant?.url_rewrites ?? []).length > 0 && variant?.url_key
   const targetUrl = isValidVariant ? productLink(variant) : productLink(product)
 
+
   useEffect(() => {
+    if (product.__typename !== 'ConfigurableProduct') return
     // Filter asPath with #, for zoomed gallery
     // Note for future use: This might be a dangerous way to
     // navigate to simple products, since it will trigger on every
@@ -32,5 +34,9 @@ export function ProductPageMeta(props: PluginProps<ProductPageMetaProps> & AddTo
     }
   }, [asPath, replace, targetUrl])
 
+  if (product.__typename !== 'ConfigurableProduct') {
+    return <Prev product={product} {...rest} />
+  }
+
   return <Prev product={variant ? mergeDeep(product, variant) : product} {...rest} />
 }

package/plugins/Configurable_cartItemToCartItemInput.ts

@@ -0,0 +1,30 @@
+import { type cartItemToCartItemInput as cartItemToCartItemInputType } from '@graphcommerce/magento-cart-items'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+
+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 !== 'ConfigurableProduct') return result
+  if (cartItem.__typename !== 'ConfigurableCartItem') return result
+
+  return {
+    ...result,
+    selected_options: [
+      ...filterNonNullableKeys(cartItem.configurable_options).map(
+        (option) => option.configurable_product_option_value_uid,
+      ),
+      ...(result?.selected_options ?? []),
+    ],
+  }
+}

package/utils/defaultConfigurableOptionsSelection.ts

@@ -22,11 +22,11 @@ type BaseQuery =
  *   selected by filling in `selectedOptions` and passing it as `defaultValues `. We also
  *   prepopulating the result of `GetConfigurableOptionsSelection` query.
  */
-export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQuery>(
+export async function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQuery>(
   urlKey: string,
   client: ApolloClient<object>,
   query: Q,
-): Q & Pick<AddProductsToCartFormProps, 'defaultValues'> {
+): Promise<Q & Pick<AddProductsToCartFormProps, 'defaultValues'>> {
   const simple = query?.products?.items?.find((p) => p?.url_key === urlKey)
   const configurable = findByTypename(query?.products?.items, 'ConfigurableProduct')
 
@@ -65,56 +65,17 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
    * })
    * ```
    */
-  const optionsAvailableForSelection =
-    configurable.configurable_product_options_selection?.options_available_for_selection?.filter(
-      nonNullable,
-    )
-
-  client.cache.writeQuery({
+  await client.query({
     query: GetConfigurableOptionsSelectionDocument,
     variables: { urlKey: configurable.url_key, selectedOptions },
-    data: {
-      products: {
-        ...query?.products,
-        __typename: 'Products',
-        items: [
-          {
-            __typename: 'ConfigurableProduct',
-            uid: configurable.uid,
-            configurable_product_options_selection: {
-              __typename: 'ConfigurableProductOptionsSelection',
-              configurable_options: filterNonNullableKeys(configurable.configurable_options, [
-                'attribute_code',
-                'label',
-                'values',
-              ]).map((option) => ({
-                __typename: 'ConfigurableProductOption' as const,
-                uid: option.uid,
-                attribute_code: option.attribute_code,
-                label: option.label,
-                values: filterNonNullableKeys(option.values, ['store_label', 'uid']).map(
-                  ({ store_label, uid }) => ({ label: store_label, uid }),
-                ),
-              })),
-              options_available_for_selection: optionsAvailableForSelection?.map(
-                ({ attribute_code, option_value_uids }) => ({
-                  __typename: 'ConfigurableOptionAvailableForSelection' as const,
-                  attribute_code,
-                  option_value_uids,
-                }),
-              ),
-              media_gallery: simple?.media_gallery ?? configurable.media_gallery,
-              variant: simple?.__typename === 'SimpleProduct' ? simple : null,
-            },
-          },
-        ],
-      },
-    },
   })
 
   return {
     ...query,
-    products: { ...query?.products, items: [configurable] },
+    products: {
+      ...query?.products,
+      items: [{ ...configurable, url_key: simple?.url_key }],
+    },
     defaultValues: { cartItems: [{ selected_options: selectedOptions }] },
   }
 }

package/graphql/ConfigurableProductAddToCart.graphql

@@ -1,27 +0,0 @@
-mutation ConfigurableProductAddToCart(
-  $cartId: String!
-  $sku: String!
-  $quantity: Float = 1
-  $enteredOptions: [EnteredOptionInput] = []
-  $selectedOptions: [ID]!
-) {
-  addProductsToCart(
-    cartId: $cartId
-    cartItems: [
-      {
-        sku: $sku
-        quantity: $quantity
-        entered_options: $enteredOptions
-        selected_options: $selectedOptions
-      }
-    ]
-  ) {
-    cart {
-      ...CartItemCountChanged
-    }
-    user_errors {
-      code
-      message
-    }
-  }
-}