@graphcommerce/magento-product 8.0.6-canary.0 → 8.0.6-canary.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 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))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Prevent BillingPage query from rerunning on each mutation
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
 ## 8.0.6-canary.0
 
 ### Patch Changes

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -1,6 +1,6 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
 import { useEventCallback } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { startTransition, useEffect, useState } from 'react'
 import { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
 import { toUserErrors } from './toUserErrors'
 import { AddToCartItemSelector, useFormAddProductsToCart } from './useFormAddProductsToCart'
@@ -69,7 +69,9 @@ export function useAddProductsToCartAction(
         if (!sku) console.warn(`You must provide a 'sku' to useAddProductsToCartAction`)
       }
       setValue(`cartItems.${index}.sku`, sku ?? '')
-      onClickIncoming?.(e)
+      startTransition(() => {
+        onClickIncoming?.(e)
+      })
     }),
     onMouseDown: useEventCallback((e) => e.stopPropagation()),
     showSuccess,

package/components/JsonLdProduct/JsonLdProductOffer.graphql

@@ -2,11 +2,10 @@ fragment JsonLdProductOffer on ProductInterface {
   price_range {
     minimum_price {
       regular_price {
-        value
-        currency
+        ...Money
       }
       final_price {
-        value
+        ...Money
       }
     }
   }

package/components/JsonLdProduct/ProductPageJsonLd.tsx

@@ -1,12 +1,10 @@
 import { JsonLd } from '@graphcommerce/next-ui'
 import { JsonLdProductFragment } from './JsonLdProduct.gql'
 
-type ProductPageJsonLdProps<T extends { '@type': string }> = {
-  product: JsonLdProductFragment
-  render: (product: JsonLdProductFragment) => T & { '@context': 'https://schema.org' }
-}
-
-export function ProductPageJsonLd<T extends { '@type': string }>(props: ProductPageJsonLdProps<T>) {
+export function ProductPageJsonLd<
+  T extends { '@type': string },
+  P extends JsonLdProductFragment,
+>(props: { product: P; render: (product: P) => T & { '@context': 'https://schema.org' } }) {
   const { product, render } = props
   return <JsonLd<T> item={render(product)} />
 }

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -1,10 +1,10 @@
+import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
 import type { ProductInterface } from '@graphcommerce/graphql-mesh'
 import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { Money, MoneyProps } from '@graphcommerce/magento-store'
 import {
   Button,
   MessageSnackbar,
-  TextInputNumber,
   iconChevronRight,
   IconSvg,
   extendableComponent,
@@ -40,7 +40,7 @@ export function ProductAddToCart(
     defaultValues: { ...variables },
   })
 
-  const { handleSubmit, formState, error, muiRegister, required, data } = form
+  const { handleSubmit, formState, error, control, required, data } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -58,15 +58,17 @@ export function ProductAddToCart(
         <Money {...price} />
       </Typography>
 
-      <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 }}
         helperText={formState.isSubmitted && formState.errors.quantity?.message}
         disabled={formState.isSubmitting}
         size='small'
+        control={control}
       />
       {children}
       <Box

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.6-canary.0",
+  "version": "8.0.6-canary.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.0.6-canary.0",
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.0",
-    "@graphcommerce/framer-next-pages": "^8.0.6-canary.0",
-    "@graphcommerce/framer-scroller": "^8.0.6-canary.0",
-    "@graphcommerce/graphql": "^8.0.6-canary.0",
-    "@graphcommerce/graphql-mesh": "^8.0.6-canary.0",
-    "@graphcommerce/image": "^8.0.6-canary.0",
-    "@graphcommerce/magento-cart": "^8.0.6-canary.0",
-    "@graphcommerce/magento-store": "^8.0.6-canary.0",
-    "@graphcommerce/next-ui": "^8.0.6-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.0",
+    "@graphcommerce/ecommerce-ui": "^8.0.6-canary.2",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.2",
+    "@graphcommerce/framer-next-pages": "^8.0.6-canary.2",
+    "@graphcommerce/framer-scroller": "^8.0.6-canary.2",
+    "@graphcommerce/graphql": "^8.0.6-canary.2",
+    "@graphcommerce/graphql-mesh": "^8.0.6-canary.2",
+    "@graphcommerce/image": "^8.0.6-canary.2",
+    "@graphcommerce/magento-cart": "^8.0.6-canary.2",
+    "@graphcommerce/magento-store": "^8.0.6-canary.2",
+    "@graphcommerce/next-ui": "^8.0.6-canary.2",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.2",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.2",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",