@graphcommerce/magento-product-configurable 8.1.0-canary.8 → 9.0.0-canary.54

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # Change Log
 
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+### Minor Changes
+
+- [#2322](https://github.com/graphcommerce-org/graphcommerce/pull/2322) [`4d08a2b`](https://github.com/graphcommerce-org/graphcommerce/commit/4d08a2bd8c1919bd85b18e8e856775d18fb67e00) - Rename configurable_customizable back to customizable_options
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+### Patch Changes
+
+- [#2302](https://github.com/graphcommerce-org/graphcommerce/pull/2302) [`6b7f908`](https://github.com/graphcommerce-org/graphcommerce/commit/6b7f908b7a2561e9d7f6ec3eaf2a6aca8d77b72f) - Fixed tier prices not working for non-configurable products
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+### Patch Changes
+
+- [#2282](https://github.com/graphcommerce-org/graphcommerce/pull/2282) [`e048f61`](https://github.com/graphcommerce-org/graphcommerce/commit/e048f6165ae5a15be99fba0c3d3529c700477d3e) - Disable configurable product options that are unavailable for selection.
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
 ## 8.1.0-canary.8
 
 ### Patch Changes

package/ConfigurableCartItem/ConfigurableCartItem.graphql

@@ -5,7 +5,7 @@ fragment ConfigurableCartItem on ConfigurableCartItem @inject(into: ["CartItem"]
     option_label
     value_label
   }
-  configurable_customizable: customizable_options {
+  customizable_options {
     ...SelectedCustomizableOption
   }
   configured_variant {

package/ConfigurableContext/ConfigurableProductForm.graphql

@@ -27,7 +27,6 @@ fragment ConfigurableProductForm on ConfigurableProduct {
     }
     product {
       ...ProductListItem
-      ...ProductListItemSimple
     }
   }
 }

package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx

@@ -8,7 +8,7 @@ import {
   MessageSnackbar,
   IconSvg,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/macro'
 import { Divider, Typography, Alert, Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
@@ -140,7 +140,7 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
             width: '100%',
           })}
         >
-          <Trans id='Add to Cart' />
+          <Trans>Add to Cart</Trans>
         </Button>
         {additionalButtons}
       </Box>
@@ -172,15 +172,13 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
             color='secondary'
             endIcon={<IconSvg src={iconChevronRight} />}
           >
-            <Trans id='View shopping cart' />
+            <Trans>View shopping cart</Trans>
           </Button>
         }
       >
-        <Trans
-          id='<0>{name}</0> has been added to your shopping cart!'
-          components={{ 0: <strong /> }}
-          values={{ name }}
-        />
+        <Trans>
+          <strong>{name}</strong> has been added to your shopping cart!
+        </Trans>
       </MessageSnackbar>
     </Box>
   )

package/components/ProductListItemConfigurable/ProductListItemConfigurable.graphql

@@ -13,19 +13,4 @@ fragment ProductListItemConfigurable on ConfigurableProduct @inject(into: ["Prod
       }
     }
   }
-  variants {
-    attributes {
-      value_index
-      uid
-      code
-    }
-    product {
-      uid
-      sku
-      name
-      small_image {
-        ...ProductImage
-      }
-    }
-  }
 }

package/components/ProductListItemConfigurable/ProductListItemConfigurable.tsx

@@ -2,16 +2,10 @@ import {
   ProductListItem,
   OverlayAreaKeys,
   ProductListItemProps,
-  useProductListParamsContext,
-  isFilterTypeEqual,
 } from '@graphcommerce/magento-product'
 import { SwatchList } from '../../SwatchList'
 import { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
 
-export type ProductListItemConfigurableActionProps = ProductListItemConfigurableFragment & {
-  variant?: NonNullable<ProductListItemConfigurableFragment['variants']>[0]
-}
-
 export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragment &
   ProductListItemProps & {
     swatchLocations?: Partial<Record<OverlayAreaKeys, string[]>>
@@ -19,7 +13,6 @@ export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragme
 
 export function ProductListItemConfigurable(props: ProdustListItemConfigurableProps) {
   const {
-    variants,
     configurable_options,
     children,
     swatchLocations = { bottomLeft: [], bottomRight: [], topLeft: [], topRight: [] },
@@ -29,40 +22,10 @@ export function ProductListItemConfigurable(props: ProdustListItemConfigurablePr
     topRight,
     ...configurableProduct
   } = props
-  const { params } = useProductListParamsContext()
-
-  const options: [string, string[]][] =
-    configurable_options
-      ?.filter(
-        (option) =>
-          option?.attribute_code &&
-          params.filters[option.attribute_code] &&
-          isFilterTypeEqual(params.filters[option.attribute_code]),
-      )
-      .map((option) => {
-        const filter = params.filters[option?.attribute_code ?? '']
-        return [option?.attribute_code ?? '', (filter?.in as string[]) ?? []]
-      }) ?? []
-
-  const selected = {}
-
-  options.forEach(([attr, values]) => {
-    if (!selected[attr]) selected[attr] = values
-  })
-
-  const matchingVariants = variants?.filter(
-    (variant) =>
-      variant?.attributes?.filter(
-        (attribute) =>
-          selected[attribute?.code ?? ''] !== undefined &&
-          selected[attribute?.code ?? ''].includes(String(attribute?.value_index)),
-      ).length,
-  )
 
   return (
     <ProductListItem
       {...configurableProduct}
-      small_image={matchingVariants?.[0]?.product?.small_image ?? configurableProduct.small_image}
       topLeft={
         <>
           {topLeft}

package/graphql/ConfigurableOptions.graphql

@@ -1,4 +1,4 @@
-fragment ConfigurableOptions on ConfigurableProduct @injectable {
+fragment ConfigurableOptions on ConfigurableProduct {
   __typename
   uid
   sku

package/graphql/ConfigurableOptionsSelection.graphql

@@ -1,4 +1,4 @@
-fragment ConfigurableOptionsSelection on ConfigurableProduct @injectable {
+fragment ConfigurableOptionsSelection on ConfigurableProduct {
   configurable_product_options_selection(configurableOptionValueUids: $selectedOptions) {
     __typename
     configurable_options {

package/hooks/useConfigurableOptionsSelection.ts

@@ -16,7 +16,7 @@ export function useConfigurableOptionsForSelection(variables: UseConfigurableOpt
 
   const selection = useQuery(GetConfigurableOptionsSelectionDocument, {
     variables: { urlKey: url_key ?? '', selectedOptions },
-    skip: !url_key || !selectedOptions.length,
+    skip: !url_key,
   })
 
   const configured = selection.error

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-configurable",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.8",
+  "version": "9.0.0-canary.54",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,23 +12,23 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.8",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/graphql": "^8.1.0-canary.8",
-    "@graphcommerce/graphql-mesh": "^8.1.0-canary.8",
-    "@graphcommerce/image": "^8.1.0-canary.8",
-    "@graphcommerce/lingui-next": "8.1.0-canary.8",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.8",
-    "@graphcommerce/magento-cart-items": "^8.1.0-canary.8",
-    "@graphcommerce/magento-category": "^8.1.0-canary.8",
-    "@graphcommerce/magento-customer": "^8.1.0-canary.8",
-    "@graphcommerce/magento-product": "^8.1.0-canary.8",
-    "@graphcommerce/magento-product-simple": "^8.1.0-canary.8",
-    "@graphcommerce/magento-store": "^8.1.0-canary.8",
-    "@graphcommerce/next-ui": "^8.1.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.8",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.54",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.54",
+    "@graphcommerce/graphql": "^9.0.0-canary.54",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.54",
+    "@graphcommerce/image": "^9.0.0-canary.54",
+    "@graphcommerce/lingui-next": "9.0.0-canary.54",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.54",
+    "@graphcommerce/magento-cart-items": "^9.0.0-canary.54",
+    "@graphcommerce/magento-category": "^9.0.0-canary.54",
+    "@graphcommerce/magento-customer": "^9.0.0-canary.54",
+    "@graphcommerce/magento-product": "^9.0.0-canary.54",
+    "@graphcommerce/magento-product-simple": "^9.0.0-canary.54",
+    "@graphcommerce/magento-store": "^9.0.0-canary.54",
+    "@graphcommerce/next-ui": "^9.0.0-canary.54",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.54",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.54",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.54",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/ConfigurableCartItemActionCard.tsx

@@ -1,12 +1,14 @@
 import type { CartItemActionCardProps } from '@graphcommerce/magento-cart-items'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { isTypename } from '@graphcommerce/next-ui'
 import { ConfigurableCartItemOptions } from '../components'
 
-export const component = 'CartItemActionCard'
-export const exported = '@graphcommerce/magento-cart-items'
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-cart-items',
+}
 
-export function ConfigurableCartItemActionCard(props: PluginProps<CartItemActionCardProps>) {
+export function CartItemActionCard(props: PluginProps<CartItemActionCardProps>) {
   const { Prev, ...rest } = props
 
   if (!isTypename(rest.cartItem, ['ConfigurableCartItem'])) return <Prev {...rest} />
@@ -36,5 +38,3 @@ export function ConfigurableCartItemActionCard(props: PluginProps<CartItemAction
     />
   )
 }
-
-export const Plugin = ConfigurableCartItemActionCard

package/plugins/ConfigurableProductPage/ConfigurableProductPagePriceTiers.tsx

@@ -14,9 +14,10 @@ const ConfigurableProductPagePriceTiers = (
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
 
-  if (!variant) return null
+  if (!variant || product.__typename !== 'ConfigurableProduct')
+    return <Prev product={product} {...rest} />
 
-  return <Prev product={variant} {...rest} />
+  return <Prev product={{ ...variant, options: product.options }} {...rest} />
 }
 
 export const Plugin = ConfigurableProductPagePriceTiers

package/utils/defaultConfigurableOptionsSelection.ts

@@ -27,17 +27,19 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
   client: ApolloClient<object>,
   query: Q,
 ): Q & Pick<AddProductsToCartFormProps, 'defaultValues'> {
-  if (!import.meta.graphCommerce.configurableVariantForSimple) {
+  const simple = query?.products?.items?.find((p) => p?.url_key === urlKey)
+  const configurable = findByTypename(query?.products?.items, 'ConfigurableProduct')
+
+  if (
+    simple?.__typename === 'SimpleProduct' &&
+    !import.meta.graphCommerce.configurableVariantForSimple
+  ) {
     const product = query?.products?.items?.find((p) => p?.url_key === urlKey)
     return { ...query, products: { ...query?.products, items: [product] }, defaultValues: {} }
   }
 
-  const simple = query?.products?.items?.find((p) => p?.url_key === urlKey)
-  const configurable = findByTypename(query?.products?.items, 'ConfigurableProduct')
-
   // Check if the requested product actually is a simple product
-  if (!simple || simple?.__typename !== 'SimpleProduct' || !configurable?.url_key)
-    return { ...query, defaultValues: {} }
+  if (!configurable?.url_key) return { ...query, defaultValues: {} }
 
   // Find the requested simple product on the configurable variants and get the attributes.
   const attributes = configurable?.variants?.find(
@@ -45,8 +47,6 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
   )?.attributes
 
   const selectedOptions = (attributes ?? []).filter(nonNullable).map((a) => a.uid)
-  if (!selectedOptions.length)
-    return { ...query, products: { ...query?.products, items: [simple] }, defaultValues: {} }
 
   /**
    * We're using writeQuery to the Apollo Client cache, to to avoid a second request to the GraphQL
@@ -65,7 +65,6 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
    * })
    * ```
    */
-
   const optionsAvailableForSelection =
     configurable.configurable_product_options_selection?.options_available_for_selection?.filter(
       nonNullable,
@@ -104,8 +103,8 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
                   option_value_uids,
                 }),
               ),
-              media_gallery: simple.media_gallery,
-              variant: simple,
+              media_gallery: simple?.media_gallery ?? configurable.media_gallery,
+              variant: simple?.__typename === 'SimpleProduct' ? simple : null,
             },
           },
         ],