@graphcommerce/magento-product-configurable 4.2.11 → 4.3.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Change Log
 
+## 4.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`48e6522bb`](https://github.com/graphcommerce-org/graphcommerce/commit/48e6522bb9424d4bd77fd77c68065f5625f3ec8d), [`75ae24a93`](https://github.com/graphcommerce-org/graphcommerce/commit/75ae24a93bd74e3b9b7efda21ec7ba6fbe9a3a75), [`37b1980a0`](https://github.com/graphcommerce-org/graphcommerce/commit/37b1980a04a4a3d77663b404ae83539620cf65b9)]:
+  - @graphcommerce/magento-product@4.6.1
+  - @graphcommerce/react-hook-form@3.3.4
+  - @graphcommerce/magento-cart-items@3.1.12
+  - @graphcommerce/magento-category@4.5.12
+  - @graphcommerce/magento-product-simple@4.1.1
+  - @graphcommerce/magento-cart@4.8.5
+  - @graphcommerce/magento-customer@4.11.5
+
+## 4.3.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
+
+- [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`87c897cda`](https://github.com/graphcommerce-org/graphcommerce/commit/87c897cda1934f072887d5302b7b7ef5ecccd1c0) Thanks [@paales](https://github.com/paales)! - Fix issue where configurable products couldn’t properly be configured
+
+* [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`b6bf2c941`](https://github.com/graphcommerce-org/graphcommerce/commit/b6bf2c94197ddacbf8f1fc0d352cd0d46e096f30) Thanks [@paales](https://github.com/paales)! - Remove unused ProductCustomizable on the old product pages
+
+- [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`b91b9eb1f`](https://github.com/graphcommerce-org/graphcommerce/commit/b91b9eb1f3f9c2740fcbe03d8047f23941b10dcc) Thanks [@paales](https://github.com/paales)! - Remove the Actions callback from Configurable product list item
+
+- Updated dependencies [[`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8), [`b6bf2c941`](https://github.com/graphcommerce-org/graphcommerce/commit/b6bf2c94197ddacbf8f1fc0d352cd0d46e096f30)]:
+  - @graphcommerce/magento-product@4.6.0
+  - @graphcommerce/magento-product-simple@4.1.0
+  - @graphcommerce/magento-store@4.3.0
+  - @graphcommerce/next-ui@4.27.0
+  - @graphcommerce/magento-cart@4.8.4
+  - @graphcommerce/magento-customer@4.11.4
+  - @graphcommerce/magento-cart-items@3.1.11
+  - @graphcommerce/magento-category@4.5.11
+
 ## 4.2.11
 
 ### Patch Changes

package/ConfigurableOptions/ConfigurableOptions.tsx

@@ -1,3 +1,4 @@
+import { Controller, FieldErrors, UseControllerProps } from '@graphcommerce/ecommerce-ui'
 import {
   RenderType,
   SectionHeader,
@@ -5,7 +6,6 @@ import {
   ToggleButtonGroup,
   extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Controller, FieldErrors, UseControllerProps } from '@graphcommerce/react-hook-form'
 import { BaseTextFieldProps, FormHelperText, SxProps } from '@mui/material'
 import React from 'react'
 import { Selected, useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'

package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx

@@ -21,7 +21,7 @@ import {
 import {
   ConfigurableProductAddToCartDocument,
   ConfigurableProductAddToCartMutationVariables,
-} from './ConfigurableProductAddToCart.gql'
+} from '../graphql/ConfigurableProductAddToCart.gql'
 
 type ConfigurableProductAddToCartProps = {
   variables: Omit<ConfigurableProductAddToCartMutationVariables, 'cartId' | 'selectedOptions'>
@@ -52,14 +52,13 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
     ...buttonProps
   } = props
 
-  const { getUids, getVariants, selection } = useConfigurableContext(variables.sku)
+  const { getVariants, selection } = useConfigurableContext(variables.sku)
 
   const form = useFormGqlMutationCart(ConfigurableProductAddToCartDocument, {
     defaultValues: { ...variables },
     onBeforeSubmit: ({ selectedOptions, ...vars }) => ({
       ...vars,
-      // todo: selectedOptions should contain the correct values directly
-      selectedOptions: getUids(selectedOptions?.[0] as unknown as Selected),
+      selectedOptions: Object.values(selectedOptions),
     }),
   })
 

package/ProductPageConfigurableQueryFragment.graphql

@@ -4,11 +4,7 @@ fragment ProductPageConfigurableQueryFragment on Query {
     items {
       __typename
       uid
-      ... on ConfigurableProduct {
-        ...ProductWeight
-        ...ProductCustomizable
-        ...ConfigurableProductForm
-      }
+      ...ConfigurableProductForm
     }
   }
 }

package/SwatchList.tsx

@@ -1,15 +1,15 @@
 import type { Maybe } from '@graphcommerce/graphql-mesh'
 import { RenderType } from '@graphcommerce/next-ui'
 import React from 'react'
-import type { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
 import { ColorSwatchData } from './Swatches/ColorSwatchData'
 import { ImageSwatchData } from './Swatches/ImageSwatchData'
 import { TextSwatchData } from './Swatches/TextSwatchData'
 import { SwatchSize, SwatchTypeRenderer } from './Swatches/types'
+import { ProductListItemConfigurableFragment } from './components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
 
 type SwatchListProps = {
   attributes: string[]
-  configurable_options: Maybe<ProductListItemConfigurableFragment['configurable_options']>
+  configurable_options?: Maybe<ProductListItemConfigurableFragment['configurable_options']>
 }
 
 const renderer: SwatchTypeRenderer = {
@@ -34,6 +34,7 @@ export function SwatchList({ attributes, configurable_options }: SwatchListProps
                 renderer={renderer}
                 {...val}
                 {...val.swatch_data}
+                __typename={val?.swatch_data?.__typename ?? 'TextSwatchData'}
                 size={'small' as SwatchSize}
               />
             ) : null,

package/Swatches/types.ts

@@ -1,6 +1,6 @@
 import { MoneyProps } from '@graphcommerce/magento-store'
 import { TypeRenderer } from '@graphcommerce/next-ui'
-import { ProductListItemConfigurableFragment } from '../ProductListItemConfigurable.gql'
+import { ProductListItemConfigurableFragment } from '../components/ProductListItemConfigurable/ProductListItemConfigurable.gql'
 import { SwatchDataFragment } from './SwatchData.gql'
 
 type ConfigurableOption = NonNullable<

package/components/ConfigurableName/ConfigurableName.tsx

@@ -0,0 +1,14 @@
+import { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
+import { useConfigurableOptionsSelection } from '../../hooks/useConfigurableOptionsSelection'
+
+type ConfigurableNameProps = {
+  product: ConfigurableOptionsFragment
+  index?: number
+}
+
+export function ConfigurableName(props: ConfigurableNameProps) {
+  const { product, index = 0 } = props
+  const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })
+
+  return <>{configured?.configurable_product_options_selection?.variant?.name ?? product.name}</>
+}

package/components/ConfigurableName/index.ts

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

package/components/ConfigurableOptionValue/ConfigurableOptionValue.graphql

@@ -0,0 +1,7 @@
+fragment ConfigurableOptionValue on ConfigurableProductOptionsValues {
+  __typename
+  uid
+  ...ConfigurableOptionValueColor
+  ...ConfigurableOptionValueText
+  ...ConfigurableOptionValueImage
+}

package/components/ConfigurableOptionValue/ConfigurableOptionValue.tsx

@@ -0,0 +1,24 @@
+import { ActionCardItemRenderProps, RenderType } from '@graphcommerce/next-ui'
+import { ConfigurableOptionValueColor } from '../ConfigurableOptionValueColor'
+import { ConfigurableOptionValueImage } from '../ConfigurableOptionValueImage/ConfigurableOptionValueImage'
+import { ConfigurableOptionValueText } from '../ConfigurableOptionValueText/ConfigurableOptionValueText'
+import { ConfigurableOptionValueFragment } from './ConfigurableOptionValue.gql'
+
+export type ConfigurabeOptionValueProps = ActionCardItemRenderProps<ConfigurableOptionValueFragment>
+
+export function ConfigurableOptionValue(props: ConfigurabeOptionValueProps) {
+  const { swatch_data } = props
+
+  return (
+    <RenderType
+      {...props}
+      __typename={swatch_data?.__typename ?? 'TextSwatchData'}
+      description={swatch_data?.value ?? ''}
+      renderer={{
+        ColorSwatchData: ConfigurableOptionValueColor,
+        ImageSwatchData: ConfigurableOptionValueImage,
+        TextSwatchData: ConfigurableOptionValueText,
+      }}
+    />
+  )
+}

package/components/ConfigurableOptionValue/index.ts

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

package/components/ConfigurableOptionValueColor/ConfigurableOptionValueColor.graphql

@@ -0,0 +1,11 @@
+fragment ConfigurableOptionValueColor on ConfigurableProductOptionsValues {
+  uid
+  use_default_value
+  store_label
+  swatch_data {
+    __typename
+    ... on ColorSwatchData {
+      value
+    }
+  }
+}

package/components/ConfigurableOptionValueColor/ConfigurableOptionValueColor.tsx

@@ -0,0 +1,32 @@
+import { ActionCard, ActionCardItemRenderProps } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { swatchSizes } from '../ConfigurableOptionValueImage'
+import { ConfigurableOptionValueColorFragment } from './ConfigurableOptionValueColor.gql'
+
+export type ConfigurableOptionValueColorProps =
+  ActionCardItemRenderProps<ConfigurableOptionValueColorFragment>
+
+export function ConfigurableOptionValueColor(props: ConfigurableOptionValueColorProps) {
+  const { swatch_data, store_label, size = 'large' } = props
+
+  if (swatch_data?.__typename !== 'ColorSwatchData')
+    throw Error(`ConfigurableOptionValueColor can not render a ${swatch_data?.__typename}`)
+
+  return (
+    <ActionCard
+      {...props}
+      image={
+        <Box
+          sx={{
+            width: swatchSizes[size],
+            height: swatchSizes[size],
+            backgroundColor: swatch_data.value,
+            borderRadius: '50%',
+          }}
+        />
+      }
+      title={store_label}
+      size={size}
+    />
+  )
+}

package/components/ConfigurableOptionValueColor/index.ts

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

package/components/ConfigurableOptionValueImage/ConfigurableOptionValueImage.graphql

@@ -0,0 +1,12 @@
+fragment ConfigurableOptionValueImage on ConfigurableProductOptionsValues {
+  uid
+  use_default_value
+  store_label
+  swatch_data {
+    __typename
+    ... on ImageSwatchData {
+      thumbnail
+      value
+    }
+  }
+}

package/components/ConfigurableOptionValueImage/ConfigurableOptionValueImage.tsx

@@ -0,0 +1,44 @@
+import { Image } from '@graphcommerce/image'
+import { ActionCardItemRenderProps, ActionCard, responsiveVal } from '@graphcommerce/next-ui'
+import { ConfigurableOptionValueImageFragment } from './ConfigurableOptionValueImage.gql'
+
+export type ConfigurableOptionValueImageProps =
+  ActionCardItemRenderProps<ConfigurableOptionValueImageFragment>
+
+export const swatchSizes = {
+  small: responsiveVal(30, 40),
+  medium: responsiveVal(30, 50),
+  large: responsiveVal(50, 80),
+}
+
+export function ConfigurableOptionValueImage(props: ConfigurableOptionValueImageProps) {
+  const {
+    swatch_data,
+    store_label,
+    uid,
+    use_default_value,
+    size = 'large',
+    ...actionCardProps
+  } = props
+
+  if (swatch_data?.__typename !== 'ImageSwatchData')
+    throw Error(`ConfigurableOptionValueImage can not render a ${swatch_data?.__typename}`)
+
+  const image = swatch_data.thumbnail && (
+    <Image
+      src={swatch_data.thumbnail ?? ''}
+      layout='fill'
+      alt={swatch_data.value ?? ''}
+      sizes={swatchSizes[size]}
+      sx={{
+        display: 'block',
+        borderRadius: '50%',
+        width: swatchSizes[size],
+        height: swatchSizes[size],
+        objectFit: 'cover',
+      }}
+    />
+  )
+
+  return <ActionCard {...actionCardProps} image={image} title={store_label} size={size} />
+}

package/components/ConfigurableOptionValueImage/index.ts

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

package/components/ConfigurableOptionValueText/ConfigurableOptionValueText.graphql

@@ -0,0 +1,11 @@
+fragment ConfigurableOptionValueText on ConfigurableProductOptionsValues {
+  uid
+  use_default_value
+  store_label
+  swatch_data {
+    __typename
+    ... on TextSwatchData {
+      value
+    }
+  }
+}

package/components/ConfigurableOptionValueText/ConfigurableOptionValueText.tsx

@@ -0,0 +1,21 @@
+import { ActionCard, ActionCardItemRenderProps } from '@graphcommerce/next-ui'
+import { ConfigurableOptionValueTextFragment } from './ConfigurableOptionValueText.gql'
+
+export type ConfigurableOptionValueTextProps =
+  ActionCardItemRenderProps<ConfigurableOptionValueTextFragment>
+
+export function ConfigurableOptionValueText(props: ConfigurableOptionValueTextProps) {
+  const { swatch_data, store_label, uid, use_default_value, size, ...actionCardProps } = props
+
+  if (swatch_data?.__typename !== 'TextSwatchData')
+    throw Error(`ConfigurableOptionValueText can not render a ${swatch_data?.__typename}`)
+
+  return (
+    <ActionCard
+      {...actionCardProps}
+      size={size}
+      title={swatch_data?.value ?? store_label}
+      details={size !== 'small' && store_label}
+    />
+  )
+}

package/components/ConfigurableOptionValueText/index.ts

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

package/components/ConfigurablePrice/ConfigurablePrice.tsx

@@ -0,0 +1,19 @@
+import { Money } from '@graphcommerce/magento-store'
+import { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
+import { useConfigurableOptionsSelection } from '../../hooks/useConfigurableOptionsSelection'
+
+type ConfigurablePriceProps = {
+  product: ConfigurableOptionsFragment
+  index?: number
+}
+
+export function ConfigurablePrice(props: ConfigurablePriceProps) {
+  const { product, index = 0 } = props
+  const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })
+
+  const regular_price =
+    configured?.configurable_product_options_selection?.variant?.price_range.minimum_price
+      .final_price ?? product.price_range?.minimum_price.final_price
+
+  return <Money {...regular_price} />
+}

package/components/ConfigurablePrice/index.ts

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

package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

@@ -0,0 +1,101 @@
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
+import { SectionHeader, filterNonNullableKeys, ActionCardListProps } from '@graphcommerce/next-ui'
+import {
+  ActionCardItemBase,
+  ActionCardListForm,
+} from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
+import { i18n } from '@lingui/core'
+import { Alert, Box, SxProps, Theme } from '@mui/material'
+import { useRouter } from 'next/router'
+import React, { useEffect, useMemo } from 'react'
+import { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
+import { useConfigurableOptionsSelection } from '../../hooks'
+import { ConfigurableOptionValue } from '../ConfigurableOptionValue/ConfigurableOptionValue'
+import { ConfigurableOptionValueFragment } from '../ConfigurableOptionValue/ConfigurableOptionValue.gql'
+
+export type ConfigurableProductOptionsProps = {
+  optionEndLabels?: Record<string, React.ReactNode>
+  sx?: SxProps<Theme>
+  render?: typeof ConfigurableOptionValue
+  product: ConfigurableOptionsFragment
+  index?: number
+} & Pick<ActionCardListProps, 'color' | 'variant' | 'size' | 'layout' | 'collapse'>
+
+export function ConfigurableProductOptions(props: ConfigurableProductOptionsProps) {
+  const {
+    optionEndLabels,
+    sx,
+    render = ConfigurableOptionValue,
+    product,
+    index = 0,
+    ...other
+  } = props
+  const { control, setError, clearErrors } = useFormAddProductsToCart()
+  const { locale } = useRouter()
+
+  const options = useMemo(
+    () =>
+      filterNonNullableKeys(product.configurable_options, ['attribute_code', 'label']).map(
+        (option) => ({
+          ...option,
+          values: filterNonNullableKeys(option.values, ['uid', 'swatch_data']).map((ov) => ({
+            value: ov.uid,
+            ...ov,
+          })),
+        }),
+      ),
+    [product.configurable_options],
+  )
+
+  const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })
+  const unavailable =
+    configured &&
+    (configured?.configurable_product_options_selection?.options_available_for_selection ?? [])
+      .length === 0
+
+  const allLabels = useMemo(() => {
+    const formatter = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' })
+    return formatter.format(options.map((o) => o.label))
+  }, [locale, options])
+
+  useEffect(() => {
+    if (unavailable) {
+      setError(`cartItems.${index}.sku`, {
+        message: i18n._(/* i18n */ 'Product not available in {allLabels}', { allLabels }),
+      })
+    }
+    if (!unavailable) clearErrors(`cartItems.${index}.sku`)
+  }, [allLabels, clearErrors, index, setError, unavailable])
+
+  return (
+    <Box sx={(theme) => ({ display: 'grid', rowGap: theme.spacings.sm })}>
+      {options.map((option, idx) => {
+        const { values, label } = option
+        const fieldName = `cartItems.${index}.selected_options.${idx}` as const
+
+        return (
+          <Box key={fieldName} sx={sx}>
+            <SectionHeader
+              labelLeft={label}
+              labelRight={optionEndLabels?.[option?.attribute_code ?? '']}
+              sx={{ mt: 0 }}
+            />
+
+            <ActionCardListForm<ActionCardItemBase & ConfigurableOptionValueFragment>
+              layout='grid'
+              {...other}
+              name={fieldName}
+              control={control}
+              required
+              items={values}
+              render={render}
+              rules={{
+                required: i18n._(/* i18n*/ 'Please select a value for ‘{label}’', { label }),
+              }}
+            />
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}

package/components/ConfigurableProductOptions/index.ts

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

package/components/ConfigurableProductPageGallery/ConfigurableProductPageGallery.tsx

@@ -0,0 +1,20 @@
+import { ProductPageGallery, ProductPageGalleryProps } from '@graphcommerce/magento-product'
+import { useConfigurableOptionsSelection } from '../../hooks/useConfigurableOptionsSelection'
+
+type ConfigurableProductPageGalleryProps = ProductPageGalleryProps & {
+  url_key?: string | null
+  index?: number
+}
+
+/** Compatible with any product type, but will switch the image when used for a ConfigurableProduct */
+export function ConfigurableProductPageGallery(props: ConfigurableProductPageGalleryProps) {
+  const { media_gallery, url_key, index = 0 } = props
+
+  const { configured } = useConfigurableOptionsSelection({ url_key, index })
+  const media =
+    (configured?.configurable_product_options_selection?.media_gallery?.length ?? 0) > 0
+      ? configured?.configurable_product_options_selection?.media_gallery
+      : media_gallery
+
+  return <ProductPageGallery {...props} media_gallery={media} />
+}

package/components/ConfigurableProductPageGallery/index.ts

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

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

@@ -2,12 +2,11 @@ import {
   ProductListItem,
   OverlayAreaKeys,
   ProductListItemProps,
-  isFilterTypeEqual,
   useProductListParamsContext,
+  isFilterTypeEqual,
 } from '@graphcommerce/magento-product'
-import React from 'react'
+import { SwatchList } from '../../SwatchList'
 import { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
-import { SwatchList } from './SwatchList'
 
 export type ProductListItemConfigurableActionProps = ProductListItemConfigurableFragment & {
   variant?: NonNullable<ProductListItemConfigurableFragment['variants']>[0]
@@ -15,13 +14,11 @@ export type ProductListItemConfigurableActionProps = ProductListItemConfigurable
 
 export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragment &
   ProductListItemProps & {
-    Actions?: React.VFC<ProductListItemConfigurableActionProps>
     swatchLocations?: Record<OverlayAreaKeys, string[]>
   }
 
 export function ProductListItemConfigurable(props: ProdustListItemConfigurableProps) {
   const {
-    Actions,
     variants,
     configurable_options,
     children,
@@ -103,7 +100,6 @@ export function ProductListItemConfigurable(props: ProdustListItemConfigurablePr
         </>
       }
     >
-      {Actions && <Actions {...configurableProduct} variant={matchingVariants?.[0]} />}
       {children}
     </ProductListItem>
   )

package/components/ProductListItemConfigurable/index.ts

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

package/components/index.ts

@@ -0,0 +1,9 @@
+export * from './ConfigurableOptionValue'
+export * from './ConfigurableOptionValueColor'
+export * from './ConfigurableOptionValueImage'
+export * from './ConfigurableOptionValueText'
+export * from './ConfigurablePrice'
+export * from './ConfigurableProductOptions'
+export * from './ConfigurableProductPageGallery'
+export * from './ProductListItemConfigurable'
+export * from './ConfigurableName'

package/graphql/ConfigurableOptions.graphql

@@ -0,0 +1,25 @@
+fragment ConfigurableOptions on ConfigurableProduct {
+  __typename
+  uid
+  sku
+  name
+  url_key
+  price_range {
+    minimum_price {
+      final_price {
+        currency
+        value
+      }
+    }
+  }
+  configurable_options {
+    attribute_code
+    uid
+    label
+    position
+    use_default
+    values {
+      ...ConfigurableOptionValue
+    }
+  }
+}

package/graphql/ConfigurableOptionsSelection.graphql

@@ -0,0 +1,52 @@
+fragment ConfigurableOptionsSelection on ConfigurableProduct @injectable {
+  configurable_product_options_selection(configurableOptionValueUids: $selectedOptions) {
+    configurable_options {
+      attribute_code
+      label
+      values {
+        is_available
+        is_use_default
+        label
+        swatch {
+          value
+          ... on ImageSwatchData {
+            thumbnail
+          }
+        }
+        uid
+      }
+    }
+    options_available_for_selection {
+      attribute_code
+      option_value_uids
+    }
+    media_gallery {
+      __typename
+      label
+      position
+      disabled
+      ...ProductImage
+      ...ProductVideo
+    }
+    variant {
+      uid
+      name
+      thumbnail {
+        disabled
+        label
+        position
+        url
+      }
+      price_range {
+        minimum_price {
+          final_price {
+            ...Money
+          }
+          regular_price {
+            ...Money
+          }
+        }
+      }
+    }
+  }
+}

package/graphql/GetConfigurableOptionsSelection.graphql

@@ -0,0 +1,9 @@
+query GetConfigurableOptionsSelection($urlKey: String!, $selectedOptions: [ID!] = []) {
+  products(filter: { url_key: { eq: $urlKey } }) {
+    items {
+      __typename
+      uid
+      ...ConfigurableOptionsSelection
+    }
+  }
+}

package/graphql/index.ts

@@ -0,0 +1,2 @@
+export * from './ConfigurableOptionsSelection.gql'
+export * from './GetConfigurableOptionsSelection.gql'

package/hooks/index.ts

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

package/hooks/useConfigurableOptionsSelection.ts

@@ -0,0 +1,30 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
+import { findByTypename, nonNullable } from '@graphcommerce/next-ui'
+import { GetConfigurableOptionsSelectionDocument } from '../graphql/GetConfigurableOptionsSelection.gql'
+
+export function useConfigurableOptionsSelection({
+  url_key,
+  index = 0,
+}: {
+  url_key?: string | null
+  index: number
+}) {
+  const { watch } = useFormAddProductsToCart()
+
+  const selectedOptions = (watch(`cartItems.${index}.selected_options`) ?? [])
+    .filter(nonNullable)
+    .filter(Boolean)
+
+  const cpc = useQuery(GetConfigurableOptionsSelectionDocument, {
+    variables: { urlKey: url_key ?? '', selectedOptions },
+    skip: !url_key || !selectedOptions.length,
+    ssr: false,
+  })
+
+  const configured = findByTypename(
+    cpc.data?.products?.items ?? cpc.previousData?.products?.items,
+    'ConfigurableProduct',
+  )
+  return { ...cpc, configured }
+}

package/index.ts

@@ -1,5 +1,7 @@
+export * from './components'
 export * from './ConfigurableCartItem/ConfigurableCartItem'
 export * from './ConfigurableContext/ConfigurableContext'
 export * from './ConfigurableProductAddToCart/ConfigurableProductAddToCart'
 export * from './ConfigurableProductPage.gql'
-export * from './ProductListItemConfigurable'
+export * from './graphql'
+export * from './hooks'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-configurable",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.2.11",
+  "version": "4.3.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -22,15 +22,15 @@
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/graphql-mesh": "4.2.0",
     "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-cart": "4.8.3",
-    "@graphcommerce/magento-cart-items": "3.1.10",
-    "@graphcommerce/magento-category": "4.5.10",
-    "@graphcommerce/magento-customer": "4.11.3",
-    "@graphcommerce/magento-product": "4.5.10",
-    "@graphcommerce/magento-product-simple": "4.0.58",
-    "@graphcommerce/magento-store": "4.2.35",
-    "@graphcommerce/next-ui": "4.26.0",
-    "@graphcommerce/react-hook-form": "3.3.3"
+    "@graphcommerce/magento-cart": "4.8.5",
+    "@graphcommerce/magento-cart-items": "3.1.12",
+    "@graphcommerce/magento-category": "4.5.12",
+    "@graphcommerce/magento-customer": "4.11.5",
+    "@graphcommerce/magento-product": "4.6.1",
+    "@graphcommerce/magento-product-simple": "4.1.1",
+    "@graphcommerce/magento-store": "4.3.0",
+    "@graphcommerce/next-ui": "4.27.0",
+    "@graphcommerce/react-hook-form": "3.3.4"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/test/addConfigurableProductToCart.ts

@@ -1,7 +1,7 @@
 import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
 import { CreateEmptyCartDocument } from '@graphcommerce/magento-cart/hooks/CreateEmptyCart.gql'
+import { ProductAddToCartDocument } from '@graphcommerce/magento-product/components'
 import { Page, expect } from '@playwright/test'
-import { ConfigurableProductAddToCartDocument } from '../ConfigurableProductAddToCart/ConfigurableProductAddToCart.gql'
 
 export async function addConfigurableProductToCart(page: Page, productUrl: string) {
   await page.goto(productUrl)
@@ -18,7 +18,7 @@ export async function addConfigurableProductToCart(page: Page, productUrl: strin
   expect(createCart.errors).toBeUndefined()
   expect(createCart.data?.createEmptyCart).toBeDefined()
 
-  const addToCart = await waitForGraphQlResponse(page, ConfigurableProductAddToCartDocument)
+  const addToCart = await waitForGraphQlResponse(page, ProductAddToCartDocument)
   expect(addToCart.errors).toBeUndefined()
   expect(addToCart.data?.addProductsToCart?.user_errors.length).toBe(0)
 }