@graphcommerce/magento-customer 6.2.0-canary.35 → 6.2.0-canary.37

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.2.0-canary.37
+
+### Patch Changes
+
+- [#1952](https://github.com/graphcommerce-org/graphcommerce/pull/1952) [`f1fe4f598`](https://github.com/graphcommerce-org/graphcommerce/commit/f1fe4f5986cee1f7c8313152e43691ed939c8f21) - enable password fields when there is an error and user input correction is required. ([@carlocarels90](https://github.com/carlocarels90))
+
+## 6.2.0-canary.36
+
 ## 6.2.0-canary.35
 
 ## 6.2.0-canary.34

package/components/SignUpForm/SignUpFormInline.tsx

@@ -1,3 +1,4 @@
+import { ApolloErrorAlert } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-ui'
@@ -37,19 +38,26 @@ export function SignUpFormInline({
   const form = useFormGqlMutation<
     SignUpMutation,
     SignUpMutationVariables & { confirmPassword?: string }
-  >(Mutation, {
-    // todo(paales): This causes dirty data to be send to the backend.
-    defaultValues: {
-      email,
-      prefix: '-',
-      firstname: firstname ?? '-',
-      lastname: lastname ?? '-',
+  >(
+    Mutation,
+    {
+      // todo(paales): This causes dirty data to be send to the backend.
+      defaultValues: {
+        email,
+        prefix: '-',
+        firstname: firstname ?? '-',
+        lastname: lastname ?? '-',
+      },
+      onBeforeSubmit: (values) => ({ ...values, email }),
+      onComplete: (result) => {
+        if (!result.errors) onSubmitted()
+      },
     },
-    onBeforeSubmit: (values) => ({ ...values, email }),
-  })
+    { errorPolicy: 'all' },
+  )
 
-  const { muiRegister, watch, handleSubmit, required, formState, error } = form
-  const submitHandler = handleSubmit(onSubmitted)
+  const { muiRegister, watch, handleSubmit, required, formState } = form
+  const submitHandler = handleSubmit(() => {})
   const watchPassword = watch('password')
 
   const minPasswordLength = Number(
@@ -66,11 +74,11 @@ export function SignUpFormInline({
 
   return (
     <Form onSubmit={submitHandler} noValidate className={classes.form} sx={{ padding: 0 }}>
-      <FormRow key='inline-signup' className={classes.row} sx={{ padding: 0 }}>
+      <FormRow className={classes.row} sx={{ padding: 0 }}>
         <TextField
           variant='outlined'
           type='password'
-          error={!!formState.errors.password || !!error?.message}
+          error={!!formState.errors.password || !!form.error}
           label={<Trans id='Password' />}
           autoFocus
           autoComplete='new-password'
@@ -83,13 +91,12 @@ export function SignUpFormInline({
               message: i18n._(/* i18n */ 'Password must have at least 8 characters'),
             },
           })}
-          helperText={error?.message}
           disabled={formState.isSubmitting}
         />
         <TextField
           variant='outlined'
           type='password'
-          error={!!formState.errors.confirmPassword || !!error?.message}
+          error={!!formState.errors.confirmPassword || !!form.error}
           label={<Trans id='Confirm password' />}
           autoComplete='new-password'
           required
@@ -102,7 +109,7 @@ export function SignUpFormInline({
         />
       </FormRow>
 
-      <FormRow key='signup-submit'>
+      <FormRow>
         <FormRow
           className={classes.buttonFormRow}
           sx={(theme) => ({
@@ -126,6 +133,7 @@ export function SignUpFormInline({
           </Box>
         </FormRow>
       </FormRow>
+      <ApolloErrorAlert error={form.error} />
     </Form>
   )
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.35",
+  "version": "6.2.0-canary.37",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.35",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.35",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.35"
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.37",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.37",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.37"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.2.0-canary.35",
-    "@graphcommerce/framer-utils": "6.2.0-canary.35",
-    "@graphcommerce/graphql": "6.2.0-canary.35",
-    "@graphcommerce/graphql-mesh": "6.2.0-canary.35",
-    "@graphcommerce/image": "6.2.0-canary.35",
-    "@graphcommerce/magento-graphql": "6.2.0-canary.35",
-    "@graphcommerce/magento-store": "6.2.0-canary.35",
-    "@graphcommerce/next-ui": "6.2.0-canary.35",
-    "@graphcommerce/react-hook-form": "6.2.0-canary.35"
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.37",
+    "@graphcommerce/framer-utils": "6.2.0-canary.37",
+    "@graphcommerce/graphql": "6.2.0-canary.37",
+    "@graphcommerce/graphql-mesh": "6.2.0-canary.37",
+    "@graphcommerce/image": "6.2.0-canary.37",
+    "@graphcommerce/magento-graphql": "6.2.0-canary.37",
+    "@graphcommerce/magento-store": "6.2.0-canary.37",
+    "@graphcommerce/next-ui": "6.2.0-canary.37",
+    "@graphcommerce/react-hook-form": "6.2.0-canary.37"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",