@graphcommerce/magento-product-configurable 8.0.6-canary.4 → 8.0.7

package/CHANGELOG.md

@@ -1,36 +1,14 @@
 # Change Log
 
-## 8.0.6-canary.4
+## 8.0.7
 
-## 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.6
 
 ## 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))
+- [#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
 
@@ -40,8 +18,7 @@
 
 ### 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))
+- [#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
 
@@ -95,8 +72,7 @@
 
 ### Patch Changes
 
-- [#2190](https://github.com/graphcommerce-org/graphcommerce/pull/2190) [`770a309`](https://github.com/graphcommerce-org/graphcommerce/commit/770a309cdf0586aaaed5defd345e451dee8d89c8) - Fixed a bug concerning customizable options. Customizable options of configurable products are shown again in the cart.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2190](https://github.com/graphcommerce-org/graphcommerce/pull/2190) [`770a309`](https://github.com/graphcommerce-org/graphcommerce/commit/770a309cdf0586aaaed5defd345e451dee8d89c8) - Fixed a bug concerning customizable options. Customizable options of configurable products are shown again in the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ## 8.0.1-canary.4
 
@@ -104,8 +80,7 @@
 
 ### Patch Changes
 
-- [#2190](https://github.com/graphcommerce-org/graphcommerce/pull/2190) [`770a309`](https://github.com/graphcommerce-org/graphcommerce/commit/770a309cdf0586aaaed5defd345e451dee8d89c8) - Fixed a bug concerning customizable options. Customizable options of configurable products are shown again in the cart.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2190](https://github.com/graphcommerce-org/graphcommerce/pull/2190) [`770a309`](https://github.com/graphcommerce-org/graphcommerce/commit/770a309cdf0586aaaed5defd345e451dee8d89c8) - Fixed a bug concerning customizable options. Customizable options of configurable products are shown again in the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ## 8.0.1-canary.2
 
@@ -117,28 +92,21 @@
 
 ### Minor Changes
 
-- [#2099](https://github.com/graphcommerce-org/graphcommerce/pull/2099) [`ff796b8`](https://github.com/graphcommerce-org/graphcommerce/commit/ff796b838fae6cb5e35b101500133b0235a8677d) - Support for all customizable product options (except file upload) on the product pages and in the cart.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2099](https://github.com/graphcommerce-org/graphcommerce/pull/2099) [`ff796b8`](https://github.com/graphcommerce-org/graphcommerce/commit/ff796b838fae6cb5e35b101500133b0235a8677d) - Support for all customizable product options (except file upload) on the product pages and in the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
-- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`13e23e4`](https://github.com/graphcommerce-org/graphcommerce/commit/13e23e4265bac70fb4d0830e4661019e71ce299f) - Wishlist will now support configurable products and uses the `<ActionCardLayout/>`
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`13e23e4`](https://github.com/graphcommerce-org/graphcommerce/commit/13e23e4265bac70fb4d0830e4661019e71ce299f) - Wishlist will now support configurable products and uses the `<ActionCardLayout/>` ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ### Patch Changes
 
-- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`bc90852`](https://github.com/graphcommerce-org/graphcommerce/commit/bc90852755479e48d25a370deccce0ca74e1e48f) - When selecting a non-existing option on a configurable product page, the price would be updated.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`bc90852`](https://github.com/graphcommerce-org/graphcommerce/commit/bc90852755479e48d25a370deccce0ca74e1e48f) - When selecting a non-existing option on a configurable product page, the price would be updated. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
-- [#2058](https://github.com/graphcommerce-org/graphcommerce/pull/2058) [`16dc488`](https://github.com/graphcommerce-org/graphcommerce/commit/16dc4889543106238b1a87694e75586e4c1a787c) - Provide instant feedback on availble attribute options when making a selection on a configurable product
-  ([@FrankHarland](https://github.com/FrankHarland))
+- [#2058](https://github.com/graphcommerce-org/graphcommerce/pull/2058) [`16dc488`](https://github.com/graphcommerce-org/graphcommerce/commit/16dc4889543106238b1a87694e75586e4c1a787c) - Provide instant feedback on availble attribute options when making a selection on a configurable product ([@FrankHarland](https://github.com/FrankHarland))
 
-- [#2146](https://github.com/graphcommerce-org/graphcommerce/pull/2146) [`3c19305`](https://github.com/graphcommerce-org/graphcommerce/commit/3c19305a7107d250bd898a9f4dfef38e362c2cbf) - Display the details of configurable products in the cart.
-  ([@mikekeehnen](https://github.com/mikekeehnen))
+- [#2146](https://github.com/graphcommerce-org/graphcommerce/pull/2146) [`3c19305`](https://github.com/graphcommerce-org/graphcommerce/commit/3c19305a7107d250bd898a9f4dfef38e362c2cbf) - Display the details of configurable products in the cart. ([@mikekeehnen](https://github.com/mikekeehnen))
 
-- [#2137](https://github.com/graphcommerce-org/graphcommerce/pull/2137) [`df507b1`](https://github.com/graphcommerce-org/graphcommerce/commit/df507b194c67eef7b02df858c07938bb308b5397) - Don't render pseudo-locale in HTML lang attribute
-  ([@hnsr](https://github.com/hnsr))
+- [#2137](https://github.com/graphcommerce-org/graphcommerce/pull/2137) [`df507b1`](https://github.com/graphcommerce-org/graphcommerce/commit/df507b194c67eef7b02df858c07938bb308b5397) - Don't render pseudo-locale in HTML lang attribute ([@hnsr](https://github.com/hnsr))
 
-- [#2159](https://github.com/graphcommerce-org/graphcommerce/pull/2159) [`17a5304`](https://github.com/graphcommerce-org/graphcommerce/commit/17a5304cbe297d29ddddce0d88f2c1bff220b59d) - Prevent aggregations from being excluded when executing the `defaultConfigurableOptionsSelection`
-  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+- [#2159](https://github.com/graphcommerce-org/graphcommerce/pull/2159) [`17a5304`](https://github.com/graphcommerce-org/graphcommerce/commit/17a5304cbe297d29ddddce0d88f2c1bff220b59d) - Prevent aggregations from being excluded when executing the `defaultConfigurableOptionsSelection` ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
 
 ## 8.0.0-canary.100
 
@@ -154,8 +122,7 @@
 
 ### Patch Changes
 
-- [#2146](https://github.com/graphcommerce-org/graphcommerce/pull/2146) [`3c19305`](https://github.com/graphcommerce-org/graphcommerce/commit/3c19305a7107d250bd898a9f4dfef38e362c2cbf) - Display the details of configurable products in the cart.
-  ([@mikekeehnen](https://github.com/mikekeehnen))
+- [#2146](https://github.com/graphcommerce-org/graphcommerce/pull/2146) [`3c19305`](https://github.com/graphcommerce-org/graphcommerce/commit/3c19305a7107d250bd898a9f4dfef38e362c2cbf) - Display the details of configurable products in the cart. ([@mikekeehnen](https://github.com/mikekeehnen))
 
 ## 8.0.0-canary.94
 
@@ -191,8 +158,7 @@
 
 ### Patch Changes
 
-- [#2137](https://github.com/graphcommerce-org/graphcommerce/pull/2137) [`df507b1`](https://github.com/graphcommerce-org/graphcommerce/commit/df507b194c67eef7b02df858c07938bb308b5397) - Don't render pseudo-locale in HTML lang attribute
-  ([@hnsr](https://github.com/hnsr))
+- [#2137](https://github.com/graphcommerce-org/graphcommerce/pull/2137) [`df507b1`](https://github.com/graphcommerce-org/graphcommerce/commit/df507b194c67eef7b02df858c07938bb308b5397) - Don't render pseudo-locale in HTML lang attribute ([@hnsr](https://github.com/hnsr))
 
 ## 8.0.0-canary.78
 
@@ -210,15 +176,13 @@
 
 ### Patch Changes
 
-- [#2159](https://github.com/graphcommerce-org/graphcommerce/pull/2159) [`17a5304`](https://github.com/graphcommerce-org/graphcommerce/commit/17a5304cbe297d29ddddce0d88f2c1bff220b59d) - Spread product back into products instead of only adding items
-  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+- [#2159](https://github.com/graphcommerce-org/graphcommerce/pull/2159) [`17a5304`](https://github.com/graphcommerce-org/graphcommerce/commit/17a5304cbe297d29ddddce0d88f2c1bff220b59d) - Spread product back into products instead of only adding items ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
 
 ## 8.0.0-canary.71
 
 ### Minor Changes
 
-- [#2099](https://github.com/graphcommerce-org/graphcommerce/pull/2099) [`ff796b8`](https://github.com/graphcommerce-org/graphcommerce/commit/ff796b838fae6cb5e35b101500133b0235a8677d) - Created UI for all customizable options except for the file upload customizable option
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2099](https://github.com/graphcommerce-org/graphcommerce/pull/2099) [`ff796b8`](https://github.com/graphcommerce-org/graphcommerce/commit/ff796b838fae6cb5e35b101500133b0235a8677d) - Created UI for all customizable options except for the file upload customizable option ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ## 8.0.0-canary.70
 
@@ -1763,31 +1727,31 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from "@lingui/macro";
+  import { Trans, t } from '@lingui/macro'
 
   function MyComponent() {
-    const foo = "bar";
+    const foo = 'bar'
     return (
       <div aria-label={t`Account ${foo}`}>
         <Trans>My Translation {foo}</Trans>
       </div>
-    );
+    )
   }
   ```
 
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from "@lingui/react";
-  import { i18n } from "@lingui/core";
+  import { Trans } from '@lingui/react'
+  import { i18n } from '@lingui/core'
 
   function MyComponent() {
-    const foo = "bar";
+    const foo = 'bar'
     return (
       <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
-        <Trans key="My Translation {foo}" values={{ foo }}></Trans>
+        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
       </div>
-    );
+    )
   }
   ```
 

package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx

@@ -1,4 +1,3 @@
-import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
 import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { Money } from '@graphcommerce/magento-store'
 import {
@@ -7,6 +6,7 @@ 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, required, control, error, data } = form
+  const { handleSubmit, formState, muiRegister, required, control, error, data } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -91,14 +91,12 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
         {...optionsProps}
       />
 
-      <NumberFieldElement
+      <TextInputNumber
         variant='outlined'
         error={formState.isSubmitted && !!formState.errors.quantity}
         required={required.quantity}
         inputProps={{ min: 1 }}
-        name='quantity'
-        rules={{ required: required.quantity }}
-        control={control}
+        {...muiRegister('quantity', { required: required.quantity })}
         helperText={formState.isSubmitted && formState.errors.quantity?.message}
         // disabled={loading}
         size='small'

package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

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

package/graphql/GetConfigurableOptionsSelection.graphql

@@ -1,4 +1,9 @@
-query GetConfigurableOptionsSelection($urlKey: String!, $selectedOptions: [ID!] = []) {
+query GetConfigurableOptionsSelection(
+  $urlKey: String!
+  $selectedOptions: [ID!] = []
+  $reviewPageSize: Int = 3
+  $reviewPage: Int = 1
+) {
   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.0.6-canary.4",
+  "version": "8.0.7",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,23 +12,23 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.0.6-canary.4",
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/graphql": "^8.0.6-canary.4",
-    "@graphcommerce/graphql-mesh": "^8.0.6-canary.4",
-    "@graphcommerce/image": "^8.0.6-canary.4",
-    "@graphcommerce/lingui-next": "8.0.6-canary.4",
-    "@graphcommerce/magento-cart": "^8.0.6-canary.4",
-    "@graphcommerce/magento-cart-items": "^8.0.6-canary.4",
-    "@graphcommerce/magento-category": "^8.0.6-canary.4",
-    "@graphcommerce/magento-customer": "^8.0.6-canary.4",
-    "@graphcommerce/magento-product": "^8.0.6-canary.4",
-    "@graphcommerce/magento-product-simple": "^8.0.6-canary.4",
-    "@graphcommerce/magento-store": "^8.0.6-canary.4",
-    "@graphcommerce/next-ui": "^8.0.6-canary.4",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/react-hook-form": "^8.0.6-canary.4",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.4",
+    "@graphcommerce/ecommerce-ui": "^8.0.7",
+    "@graphcommerce/eslint-config-pwa": "^8.0.7",
+    "@graphcommerce/graphql": "^8.0.7",
+    "@graphcommerce/graphql-mesh": "^8.0.7",
+    "@graphcommerce/image": "^8.0.7",
+    "@graphcommerce/lingui-next": "8.0.7",
+    "@graphcommerce/magento-cart": "^8.0.7",
+    "@graphcommerce/magento-cart-items": "^8.0.7",
+    "@graphcommerce/magento-category": "^8.0.7",
+    "@graphcommerce/magento-customer": "^8.0.7",
+    "@graphcommerce/magento-product": "^8.0.7",
+    "@graphcommerce/magento-product-simple": "^8.0.7",
+    "@graphcommerce/magento-store": "^8.0.7",
+    "@graphcommerce/next-ui": "^8.0.7",
+    "@graphcommerce/prettier-config-pwa": "^8.0.7",
+    "@graphcommerce/react-hook-form": "^8.0.7",
+    "@graphcommerce/typescript-config-pwa": "^8.0.7",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/defaultConfigurableOptionsSelection.ts

@@ -40,9 +40,8 @@ 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)
@@ -73,7 +72,7 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
 
   client.cache.writeQuery({
     query: GetConfigurableOptionsSelectionDocument,
-    variables: { urlKey: configurable.url_key, selectedOptions },
+    variables: { urlKey: configurable.url_key, selectedOptions, reviewPage: 1, reviewPageSize: 3 },
     data: {
       products: {
         ...query?.products,