@graphcommerce/magento-product-configurable 8.1.0-canary.3 → 8.1.0-canary.5

package/CHANGELOG.md

@@ -1,8 +1,83 @@
 # Change Log
 
-## 8.1.0-canary.3
+## 8.1.0-canary.5
 
-## 8.1.0-canary.2
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+### Patch Changes
+
+- [#2213](https://github.com/graphcommerce-org/graphcommerce/pull/2213) [`a0d952e`](https://github.com/graphcommerce-org/graphcommerce/commit/a0d952e6b8a71a7451bfdb2bdb5150fc218169e2) - Moved product reviews to the relatedUpsells query so we do not pass the queryComplexity limit
+  ([@paales](https://github.com/paales))
+
+## 8.0.6-canary.0
+
+### Patch Changes
+
+- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
+  ([@paales](https://github.com/paales))
+
+## 8.0.5
+
+### Patch Changes
+
+- [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+### Patch Changes
+
+- [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.0.5-canary.7
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+## 8.0.5-canary.2
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+## 8.0.4
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+## 8.0.3
+
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+## 8.0.3-canary.4
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
 
 ## 8.0.3-canary.1
 

package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx

@@ -1,3 +1,4 @@
+import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
 import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { Money } from '@graphcommerce/magento-store'
 import {
@@ -6,7 +7,6 @@ import {
   iconChevronRight,
   MessageSnackbar,
   IconSvg,
-  TextInputNumber,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Divider, Typography, Alert, Box, SxProps, Theme } from '@mui/material'
@@ -64,7 +64,7 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
     }),
   })
 
-  const { handleSubmit, formState, muiRegister, required, control, error, data } = form
+  const { handleSubmit, formState, required, control, error, data } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -91,12 +91,14 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
         {...optionsProps}
       />
 
-      <TextInputNumber
+      <NumberFieldElement
         variant='outlined'
         error={formState.isSubmitted && !!formState.errors.quantity}
         required={required.quantity}
         inputProps={{ min: 1 }}
-        {...muiRegister('quantity', { required: required.quantity })}
+        name='quantity'
+        rules={{ required: required.quantity }}
+        control={control}
         helperText={formState.isSubmitted && formState.errors.quantity?.message}
         // disabled={loading}
         size='small'

package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

@@ -1,6 +1,11 @@
 import { normalizeLocale } from '@graphcommerce/lingui-next'
 import { AddToCartItemSelector, useFormAddProductsToCart } from '@graphcommerce/magento-product'
-import { filterNonNullableKeys, ActionCardListProps } from '@graphcommerce/next-ui'
+import {
+  filterNonNullableKeys,
+  ActionCardListProps,
+  useStorefrontConfig,
+  useLocale,
+} from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box, SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -27,7 +32,6 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
     ...other
   } = props
   const { setError, clearErrors } = useFormAddProductsToCart()
-  const { locale } = useRouter()
 
   const options = filterNonNullableKeys(product.configurable_options, [
     'attribute_code',
@@ -41,8 +45,9 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
     (configured?.configurable_product_options_selection?.options_available_for_selection ?? [])
       .length === 0
 
+  const locale = useLocale()
   const allLabels = useMemo(() => {
-    const formatter = new Intl.ListFormat(normalizeLocale(locale), {
+    const formatter = new Intl.ListFormat(locale, {
       style: 'long',
       type: 'conjunction',
     })

package/graphql/GetConfigurableOptionsSelection.graphql

@@ -1,9 +1,4 @@
-query GetConfigurableOptionsSelection(
-  $urlKey: String!
-  $selectedOptions: [ID!] = []
-  $reviewPageSize: Int = 3
-  $reviewPage: Int = 1
-) {
+query GetConfigurableOptionsSelection($urlKey: String!, $selectedOptions: [ID!] = []) {
   products(filter: { url_key: { eq: $urlKey } }) {
     __typename
     items {

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.3",
+  "version": "8.1.0-canary.5",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,23 +12,23 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.3",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.3",
-    "@graphcommerce/graphql": "^8.1.0-canary.3",
-    "@graphcommerce/graphql-mesh": "^8.1.0-canary.3",
-    "@graphcommerce/image": "^8.1.0-canary.3",
-    "@graphcommerce/lingui-next": "8.1.0-canary.3",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.3",
-    "@graphcommerce/magento-cart-items": "^8.1.0-canary.3",
-    "@graphcommerce/magento-category": "^8.1.0-canary.3",
-    "@graphcommerce/magento-customer": "^8.1.0-canary.3",
-    "@graphcommerce/magento-product": "^8.1.0-canary.3",
-    "@graphcommerce/magento-product-simple": "^8.1.0-canary.3",
-    "@graphcommerce/magento-store": "^8.1.0-canary.3",
-    "@graphcommerce/next-ui": "^8.1.0-canary.3",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.3",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.3",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.3",
+    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.5",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/graphql": "^8.1.0-canary.5",
+    "@graphcommerce/graphql-mesh": "^8.1.0-canary.5",
+    "@graphcommerce/image": "^8.1.0-canary.5",
+    "@graphcommerce/lingui-next": "8.1.0-canary.5",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.5",
+    "@graphcommerce/magento-cart-items": "^8.1.0-canary.5",
+    "@graphcommerce/magento-category": "^8.1.0-canary.5",
+    "@graphcommerce/magento-customer": "^8.1.0-canary.5",
+    "@graphcommerce/magento-product": "^8.1.0-canary.5",
+    "@graphcommerce/magento-product-simple": "^8.1.0-canary.5",
+    "@graphcommerce/magento-store": "^8.1.0-canary.5",
+    "@graphcommerce/next-ui": "^8.1.0-canary.5",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.5",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.5",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/ConfigurableCartItemActionCard.tsx

@@ -1,15 +1,12 @@
-import type { CartItemActionCard } from '@graphcommerce/magento-cart-items'
+import type { CartItemActionCardProps } from '@graphcommerce/magento-cart-items'
 import type { 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/components/CartItemActionCard/CartItemActionCard'
+export const exported = '@graphcommerce/magento-cart-items'
 
-export function ConfigurableCartItemActionCard(
-  props: PluginProps<React.ComponentProps<typeof CartItemActionCard>>,
-) {
+export function ConfigurableCartItemActionCard(props: PluginProps<CartItemActionCardProps>) {
   const { Prev, ...rest } = props
 
   if (!isTypename(rest.cartItem, ['ConfigurableCartItem'])) return <Prev {...rest} />

package/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx

@@ -1,15 +1,17 @@
-import type { AddToCartItemSelector, ProductPageDescription } from '@graphcommerce/magento-product'
-import type { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
+import type {
+  AddToCartItemSelector,
+  ProductPageDescriptionProps,
+} from '@graphcommerce/magento-product'
+import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableSelectedVariant } from '../../hooks'
 
 export const component = 'ProductPageDescription'
-export const exported =
-  '@graphcommerce/magento-product/components/ProductPageDescription/ProductPageDescription'
+export const exported = '@graphcommerce/magento-product'
 export const ifConfig: IfConfig = 'configurableVariantValues.content'
 
-type PluginType = ReactPlugin<typeof ProductPageDescription, AddToCartItemSelector>
-
-export const ConfigurableProductPageDescription: PluginType = (props) => {
+export const ConfigurableProductPageDescription = (
+  props: PluginProps<ProductPageDescriptionProps & AddToCartItemSelector>,
+) => {
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
 

package/plugins/ConfigurableProductPage/ConfigurableProductPageGallery.tsx

@@ -1,14 +1,13 @@
-import type { AddToCartItemSelector, ProductPageGallery } from '@graphcommerce/magento-product'
-import type { ReactPlugin } from '@graphcommerce/next-config'
+import type { AddToCartItemSelector, ProductPageGalleryProps } from '@graphcommerce/magento-product'
+import type { PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableOptionsSelection } from '../../hooks'
 
 export const component = 'ProductPageGallery'
-export const exported =
-  '@graphcommerce/magento-product/components/ProductPageGallery/ProductPageGallery'
+export const exported = '@graphcommerce/magento-product'
 
-type PluginType = ReactPlugin<typeof ProductPageGallery, AddToCartItemSelector>
-
-const ConfigurableProductPageGallery: PluginType = (props) => {
+const ConfigurableProductPageGallery = (
+  props: PluginProps<ProductPageGalleryProps> & AddToCartItemSelector,
+) => {
   const { Prev, product, index, ...rest } = props
 
   const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })

package/plugins/ConfigurableProductPage/ConfigurableProductPageJsonLd.tsx

@@ -1,17 +1,24 @@
-import type { AddToCartItemSelector, ProductPageJsonLd } from '@graphcommerce/magento-product'
-import type { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
+import type {
+  AddToCartItemSelector,
+  JsonLdProductFragment,
+  ProductPageJsonLdProps,
+} from '@graphcommerce/magento-product'
+import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableSelectedVariant } from '../../hooks'
 
 export const component = 'ProductPageJsonLd'
-export const exported = '@graphcommerce/magento-product/components/JsonLdProduct/ProductPageJsonLd'
+export const exported = '@graphcommerce/magento-product'
 export const ifConfig: IfConfig = 'configurableVariantValues.content'
 
-type PluginType = ReactPlugin<typeof ProductPageJsonLd, AddToCartItemSelector>
-
-const ConfigurableProductPageJsonLd: PluginType = (props) => {
+const ConfigurableProductPageJsonLd = <
+  T extends { '@type': string },
+  P extends JsonLdProductFragment,
+>(
+  props: PluginProps<ProductPageJsonLdProps<T, P>> & AddToCartItemSelector,
+) => {
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
-  return <Prev product={variant ?? product} {...rest} />
+  return <Prev product={(variant ?? product) as P} {...rest} />
 }
 
 export const Plugin = ConfigurableProductPageJsonLd

package/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx

@@ -2,20 +2,20 @@ import { mergeDeep } from '@graphcommerce/graphql'
 import {
   productLink,
   type AddToCartItemSelector,
-  type ProductPageMeta,
+  ProductPageMetaProps,
 } from '@graphcommerce/magento-product'
-import type { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
+import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { useConfigurableSelectedVariant } from '../../hooks'
 
 export const component = 'ProductPageMeta'
-export const exported = '@graphcommerce/magento-product/components/ProductPageMeta/ProductPageMeta'
+export const exported = '@graphcommerce/magento-product'
 export const ifConfig: IfConfig = 'configurableVariantValues.url'
 
-type PluginType = ReactPlugin<typeof ProductPageMeta, AddToCartItemSelector>
-
-const ConfigurableProductPageMetaUrls: PluginType = (props) => {
+const ConfigurableProductPageMetaUrls = (
+  props: PluginProps<ProductPageMetaProps> & AddToCartItemSelector,
+) => {
   const { Prev, product, index, ...rest } = props
   const { replace, asPath } = useRouter()
 

package/plugins/ConfigurableProductPage/ConfigurableProductPageName.tsx

@@ -1,14 +1,14 @@
-import type { AddToCartItemSelector, ProductPageName } from '@graphcommerce/magento-product'
-import type { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
+import type { AddToCartItemSelector, ProductPageNameProps } from '@graphcommerce/magento-product'
+import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableSelectedVariant } from '../../hooks'
 
 export const component = 'ProductPageName'
-export const exported = '@graphcommerce/magento-product/components/ProductPageName/ProductPageName'
+export const exported = '@graphcommerce/magento-product'
 export const ifConfig: IfConfig = 'configurableVariantValues.content'
 
-type PluginType = ReactPlugin<typeof ProductPageName, AddToCartItemSelector>
-
-const ConfigurableProductPageName: PluginType = (props) => {
+const ConfigurableProductPageName = (
+  props: PluginProps<ProductPageNameProps> & AddToCartItemSelector,
+) => {
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
   return <Prev product={variant ?? product} {...rest} />

package/plugins/ConfigurableProductPage/ConfigurableProductPagePrice.tsx

@@ -1,18 +1,25 @@
-import { AddToCartItemSelector, type ProductPagePrice } from '@graphcommerce/magento-product'
-import type { ReactPlugin } from '@graphcommerce/next-config'
+import { AddToCartItemSelector, ProductPagePriceProps } from '@graphcommerce/magento-product'
+import type { PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableSelectedVariant } from '../../hooks'
 
 export const component = 'ProductPagePrice'
-export const exported =
-  '@graphcommerce/magento-product/components/ProductPagePrice/ProductPagePrice'
+export const exported = '@graphcommerce/magento-product'
 
-type PluginType = ReactPlugin<typeof ProductPagePrice, AddToCartItemSelector>
-
-const ConfigurableProductPagePrice: PluginType = (props) => {
+const ConfigurableProductPagePrice = (
+  props: PluginProps<ProductPagePriceProps> & AddToCartItemSelector,
+) => {
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
 
-  return <Prev product={variant ?? product} index={index} {...rest} />
+  if (product.__typename !== 'ConfigurableProduct') return <Prev {...props} />
+
+  return (
+    <Prev
+      product={variant ? { ...variant, options: product.options } : product}
+      index={index}
+      {...rest}
+    />
+  )
 }
 
 export const Plugin = ConfigurableProductPagePrice

package/plugins/ConfigurableProductPage/ConfigurableProductPagePriceTiers.tsx

@@ -1,14 +1,16 @@
-import type { AddToCartItemSelector, ProductPagePriceTiers } from '@graphcommerce/magento-product'
-import type { ReactPlugin } from '@graphcommerce/next-config'
+import type {
+  AddToCartItemSelector,
+  ProductPagePriceTiersProps,
+} from '@graphcommerce/magento-product'
+import type { PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableSelectedVariant } from '../../hooks'
 
 export const component = 'ProductPagePriceTiers'
-export const exported =
-  '@graphcommerce/magento-product/components/ProductPagePrice/ProductPagePriceTiers'
+export const exported = '@graphcommerce/magento-product'
 
-type PluginType = ReactPlugin<typeof ProductPagePriceTiers, AddToCartItemSelector>
-
-const ConfigurableProductPagePriceTiers: PluginType = (props) => {
+const ConfigurableProductPagePriceTiers = (
+  props: PluginProps<ProductPagePriceTiersProps> & AddToCartItemSelector,
+) => {
   const { Prev, product, index, ...rest } = props
   const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
 

package/plugins/ConfigurableProductPage/ConfigurableProductShortDescription.tsx

@@ -1,15 +1,17 @@
-import type { AddToCartItemSelector, ProductShortDescription } from '@graphcommerce/magento-product'
-import type { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
+import type {
+  AddToCartItemSelector,
+  ProductShortDescriptionProps,
+} from '@graphcommerce/magento-product'
+import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { useConfigurableSelectedVariant } from '../../hooks'
 
 export const component = 'ProductShortDescription'
-export const exported =
-  '@graphcommerce/magento-product/components/ProductShortDescription/ProductShortDescription'
+export const exported = '@graphcommerce/magento-product'
 export const ifConfig: IfConfig = 'configurableVariantValues.content'
 
-type PluginType = ReactPlugin<typeof ProductShortDescription, AddToCartItemSelector>
-
-const ConfigurableProductShortDescription: PluginType = (props) => {
+const ConfigurableProductShortDescription = (
+  props: PluginProps<ProductShortDescriptionProps> & AddToCartItemSelector,
+) => {
   const { Prev, product, ...rest } = props
   const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index: 0 })
 

package/utils/defaultConfigurableOptionsSelection.ts

@@ -40,8 +40,9 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
     return { ...query, defaultValues: {} }
 
   // Find the requested simple product on the configurable variants and get the attributes.
-  const attributes = configurable?.variants?.find((v) => v?.product?.uid === simple?.uid)
-    ?.attributes
+  const attributes = configurable?.variants?.find(
+    (v) => v?.product?.uid === simple?.uid,
+  )?.attributes
 
   const selectedOptions = (attributes ?? []).filter(nonNullable).map((a) => a.uid)
   if (!selectedOptions.length)
@@ -72,7 +73,7 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
 
   client.cache.writeQuery({
     query: GetConfigurableOptionsSelectionDocument,
-    variables: { urlKey: configurable.url_key, selectedOptions, reviewPage: 1, reviewPageSize: 3 },
+    variables: { urlKey: configurable.url_key, selectedOptions },
     data: {
       products: {
         ...query?.products,