Merge pull request #2183 from graphcommerce-org/fix/various

When updating the quantity of the product in the cart it could happen that the form would become out of sync with the actual data.

.changeset/spicy-falcons-care.md

@@ -0,0 +1,5 @@
+---
+"@graphcommerce/magento-cart-items": patch
+---
+
+When updating the quantity of the product in the cart it could happen that the form would become out of sync with the actual data.

packages/magento-cart-items/components/UpdateItemQuantity/UpdateItemQuantity.tsx

@@ -1,6 +1,7 @@
+import { NumberFieldElement, NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
 import { ApolloCartErrorSnackbar, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { TextInputNumber, TextInputNumberProps } from '@graphcommerce/next-ui'
-import { useFormAutoSubmit, UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
+import { TextInputNumberProps } from '@graphcommerce/next-ui'
+import { FormAutoSubmit, UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
 import { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import {
@@ -16,31 +17,36 @@ type UpdateItemQuantityFormReturn = UseFormGraphQlOptions<
 
 export type UpdateItemQuantityProps = Omit<UpdateItemQuantityMutationVariables, 'cartId'> & {
   formOptions?: Omit<UpdateItemQuantityFormReturn, 'mode' | 'defaultValues'>
-  textInputProps?: TextInputNumberProps
+  textInputProps?: Omit<
+    NumberFieldElementProps<UpdateItemQuantityMutationVariables>,
+    'rules' | 'shouldUnregister' | 'defaultValue' | 'control' | 'disabled'
+  >
   sx?: SxProps<Theme>
 }
 
 export function UpdateItemQuantity(props: UpdateItemQuantityProps) {
   const { uid, quantity, sx, textInputProps, formOptions } = props
   const form = useFormGqlMutationCart(UpdateItemQuantityDocument, {
+    experimental_useV2: true,
     defaultValues: { uid, quantity },
     mode: 'onChange',
     ...formOptions,
   })
-  const { muiRegister, required, handleSubmit, formState, error, reset } = form
+  const { handleSubmit, formState, error, reset, control } = form
 
   const submit = handleSubmit(() => {})
-  useFormAutoSubmit({ form, submit })
 
   return (
     <form noValidate onSubmit={submit}>
-      <TextInputNumber
+      <FormAutoSubmit control={control} submit={submit} initialWait={0} />
+      <NumberFieldElement
+        control={control}
+        name='quantity'
         size='small'
         variant='standard'
         inputProps={{ min: 1 }}
         InputProps={{ disableUnderline: true }}
         error={!!formState.errors.quantity}
-        {...muiRegister('quantity', { required: required.quantity })}
         helperText={formState.errors.quantity?.message}
         sx={sx}
         {...textInputProps}

packages/next-ui/TextInputNumber/TextInputNumber.tsx

@@ -32,6 +32,9 @@ const name = 'TextInputNumber' as const
 const parts = ['quantity', 'quantityInput', 'button'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
+/**
+ * @deprecated Please us NumberFieldElement
+ */
 export function TextInputNumber(props: TextInputNumberProps) {
   const {
     DownProps = {},