@graphcommerce/magento-customer 8.0.6-canary.3 → 8.0.6

package/CHANGELOG.md

@@ -1,20 +1,6 @@
 # Change Log
 
-## 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))
-
-- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders.
-  ([@FrankHarland](https://github.com/FrankHarland))
-
-## 8.0.6-canary.1
-
-## 8.0.6-canary.0
+## 8.0.6
 
 ## 8.0.5
 

package/components/AddressFields/AddressAddition.tsx

@@ -1,4 +1,5 @@
 import { TextFieldElement, FieldValues, FieldPath } from '@graphcommerce/ecommerce-ui'
+import { InputCheckmark } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
 
@@ -7,7 +8,7 @@ export function AddressAddition<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >(props: AddressFieldsOptions<TFieldValues, TName>) {
   const form = useAddressFieldsForm<TFieldValues, TName>(props)
-  const { control, name, readOnly, required } = form
+  const { control, name, readOnly, required, valid } = form
 
   return (
     <TextFieldElement
@@ -18,8 +19,10 @@ export function AddressAddition<
       required={required[name.addition]}
       label={<Trans id='Addition' />}
       autoComplete='address-line3'
-      showValid
-      InputProps={{ readOnly }}
+      InputProps={{
+        readOnly,
+        endAdornment: <InputCheckmark show={valid[name.addition]} />,
+      }}
     />
   )
 }

package/components/AddressFields/AddressCity.tsx

@@ -1,4 +1,5 @@
 import { TextFieldElement, FieldValues, FieldPath } from '@graphcommerce/ecommerce-ui'
+import { InputCheckmark } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
 
@@ -7,7 +8,7 @@ export function AddressCity<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >(props: AddressFieldsOptions<TFieldValues, TName>) {
   const form = useAddressFieldsForm<TFieldValues, TName>(props)
-  const { control, name, readOnly, required } = form
+  const { control, name, readOnly, required, valid } = form
 
   return (
     <TextFieldElement
@@ -17,8 +18,10 @@ export function AddressCity<
       type='text'
       required={required[name.city]}
       label={<Trans id='City' />}
-      showValid
-      InputProps={{ readOnly }}
+      InputProps={{
+        readOnly,
+        endAdornment: <InputCheckmark show={valid[name.city]} />,
+      }}
     />
   )
 }

package/components/AddressFields/AddressCountryRegion.tsx

@@ -1,7 +1,7 @@
 import { SelectElement, FieldValues, FieldPath, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
-import { FormRow, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { FormRow, InputCheckmark, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useMemo } from 'react'
 import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
@@ -43,7 +43,7 @@ export function AddressCountryRegion<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >(props: AddressFieldsOptions<TFieldValues, TName>) {
   const form = useAddressCountryRegion<TFieldValues, TName>(props)
-  const { control, name, readOnly, required, countryList, regionList } = form
+  const { control, name, readOnly, required, valid, countryList, regionList } = form
 
   return (
     <FormRow>
@@ -54,8 +54,10 @@ export function AddressCountryRegion<
         variant='outlined'
         label={<Trans id='Country' />}
         required={required[name.countryCode]}
-        showValid
-        InputProps={{ readOnly }}
+        InputProps={{
+          readOnly,
+          endAdornment: <InputCheckmark show={valid[name.countryCode]} select />,
+        }}
         options={countryList.map((country) => ({
           id: country.two_letter_abbreviation,
           label: country.full_name_locale,
@@ -70,8 +72,10 @@ export function AddressCountryRegion<
           variant='outlined'
           label={<Trans id='Region' />}
           required
-          showValid
-          InputProps={{ readOnly }}
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid[name.regionId]} select />,
+          }}
           options={regionList.map((region) => ({ ...region, label: region.name }))}
         />
       )}

package/components/AddressFields/AddressHouseNumber.tsx

@@ -4,6 +4,7 @@ import {
   FieldPath,
   houseNumberPattern,
 } from '@graphcommerce/ecommerce-ui'
+import { InputCheckmark } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
@@ -13,7 +14,7 @@ export function AddressHousenumber<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >(props: AddressFieldsOptions<TFieldValues, TName>) {
   const form = useAddressFieldsForm<TFieldValues, TName>(props)
-  const { control, name, readOnly, required } = form
+  const { control, name, readOnly, required, valid } = form
   return (
     <TextFieldElement
       control={control}
@@ -29,8 +30,10 @@ export function AddressHousenumber<
       type='text'
       label={<Trans id='Housenumber' />}
       autoComplete='address-line2'
-      showValid
-      InputProps={{ readOnly }}
+      InputProps={{
+        readOnly,
+        endAdornment: <InputCheckmark show={valid[name.houseNumber]} />,
+      }}
     />
   )
 }

package/components/AddressFields/AddressPostcode.tsx

@@ -1,4 +1,5 @@
 import { FieldPath, FieldValues, TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { InputCheckmark } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
 
@@ -7,7 +8,7 @@ export function AddressPostcode<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >(props: AddressFieldsOptions<TFieldValues, TName>) {
   const form = useAddressFieldsForm<TFieldValues, TName>(props)
-  const { control, name, required } = form
+  const { control, name, readOnly, required, valid } = form
 
   return (
     <TextFieldElement
@@ -17,7 +18,10 @@ export function AddressPostcode<
       type='text'
       required={required[name.postcode]}
       label={<Trans id='Postcode' />}
-      showValid
+      InputProps={{
+        readOnly,
+        endAdornment: <InputCheckmark show={valid[name.postcode]} />,
+      }}
     />
   )
 }

package/components/AddressFields/AddressStreet.tsx

@@ -1,4 +1,5 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { InputCheckmark } from '@graphcommerce/next-ui'
 import { FieldValues, FieldPath } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { AddressFieldsOptions, useAddressFieldsForm } from './useAddressFieldsForm'
@@ -8,7 +9,7 @@ export function AddressStreet<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >(props: AddressFieldsOptions<TFieldValues, TName>) {
   const form = useAddressFieldsForm<TFieldValues, TName>(props)
-  const { control, name, readOnly, required } = form
+  const { control, name, readOnly, required, valid } = form
   return (
     <TextFieldElement
       variant='outlined'
@@ -18,8 +19,10 @@ export function AddressStreet<
       type='text'
       label={<Trans id='Street' />}
       autoComplete='address-line1'
-      showValid
-      InputProps={{ readOnly }}
+      InputProps={{
+        readOnly,
+        endAdornment: <InputCheckmark show={valid[name.street]} />,
+      }}
     />
   )
 }

package/components/CreateCustomerAddressForm/CreateCustomerAddressForm.tsx

@@ -1,4 +1,4 @@
-import { ApolloErrorSnackbar, TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
 import { CountryRegionsDocument, StoreConfigDocument } from '@graphcommerce/magento-store'
@@ -57,7 +57,7 @@ export function CreateCustomerAddressForm() {
     { errorPolicy: 'all' },
   )
 
-  const { handleSubmit, formState, required, error, control, valid, data } = form
+  const { handleSubmit, formState, required, error, muiRegister, valid, data } = form
   const submitHandler = handleSubmit((_, e) => {
     if (!formState.errors) e?.target.reset()
   })
@@ -69,21 +69,19 @@ export function CreateCustomerAddressForm() {
         <AddressFields form={form} name={{ regionId: 'region.region_id' }} />
 
         <FormRow>
-          <TextFieldElement
+          <TextField
             variant='outlined'
             type='text'
             error={!!formState.errors.telephone}
             required={required.telephone}
             label={<Trans id='Telephone' />}
-            control={control}
-            name='telephone'
-            rules={{
+            {...muiRegister('telephone', {
               required: required.telephone,
               pattern: { value: phonePattern, message: i18n._(/* i18n */ 'Invalid phone number') },
-            }}
+            })}
             helperText={formState.isSubmitted && formState.errors.telephone?.message}
             disabled={formState.isSubmitting}
-            showValid
+            InputProps={{ endAdornment: <InputCheckmark show={valid.telephone} /> }}
           />
         </FormRow>
 

package/components/EditAddressForm/EditAddressForm.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { ApolloErrorSnackbar, TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import {
@@ -23,9 +23,6 @@ import { UpdateCustomerAddressDocument } from './UpdateCustomerAddress.gql'
 type EditAddressFormProps = {
   address?: AccountAddressFragment
   sx?: SxProps<Theme>
-  /**
-   * @deprecated not used, can be safely removed.
-   */
   onCompleteRoute?: string
 }
 
@@ -78,7 +75,7 @@ export function EditAddressForm(props: EditAddressFormProps) {
     { errorPolicy: 'all' },
   )
 
-  const { handleSubmit, formState, required, error, control, valid } = form
+  const { handleSubmit, formState, required, error, muiRegister, valid } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -88,21 +85,19 @@ export function EditAddressForm(props: EditAddressFormProps) {
         <AddressFields form={form} name={{ regionId: 'region.region_id' }} />
 
         <FormRow>
-          <TextFieldElement
-            control={control}
-            name='telephone'
+          <TextField
             variant='outlined'
             type='text'
             error={!!formState.errors.telephone}
             required={required.telephone}
             label={<Trans id='Telephone' />}
-            rules={{
+            {...muiRegister('telephone', {
               required: required.telephone,
               pattern: { value: phonePattern, message: i18n._(/* i18n */ 'Invalid phone number') },
-            }}
+            })}
             helperText={formState.isSubmitted && formState.errors.telephone?.message}
             disabled={formState.isSubmitting}
-            showValid
+            InputProps={{ endAdornment: <InputCheckmark show={valid.telephone} /> }}
           />
         </FormRow>
 

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -1,10 +1,9 @@
-import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { Alert, SxProps, Theme } from '@mui/material'
+import { TextField, Alert, SxProps, Theme } from '@mui/material'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import {
   ForgotPasswordDocument,
@@ -17,7 +16,7 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
   const form = useFormGqlMutation<ForgotPasswordMutation, ForgotPasswordMutationVariables>(
     ForgotPasswordDocument,
   )
-  const { control, handleSubmit, required, data, formState, error } = form
+  const { muiRegister, handleSubmit, required, data, formState, error } = form
   const submitHandler = handleSubmit(() => {})
 
   if (formState.isSubmitSuccessful && data) {
@@ -38,20 +37,18 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
   return (
     <Form onSubmit={submitHandler} noValidate sx={sx}>
       <FormRow>
-        <TextFieldElement
+        <TextField
           variant='outlined'
           type='text'
           error={!!formState.errors.email}
           label={<Trans id='Email' />}
           required={required.email}
-          name='email'
-          control={control}
-          rules={{
+          {...muiRegister('email', {
+            required: required.email,
             pattern: { value: emailPattern, message: i18n._(/* i18n */ 'Invalid email address') },
-          }}
+          })}
           helperText={formState.errors.email?.message}
           disabled={formState.isSubmitting}
-          showValid
         />
       </FormRow>
 

package/components/NameFields/NameFields.tsx

@@ -1,5 +1,5 @@
 import { SelectElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
-import { FormRow } from '@graphcommerce/next-ui'
+import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import { assertFormGqlOperation, UseFormReturn } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
@@ -27,7 +27,7 @@ export function NameFields(props: NameFieldProps) {
   const { prefix, form, readOnly, prefixes = [mr, mrs, other] } = props
   assertFormGqlOperation<NameFieldValues>(form)
 
-  const { control, required } = form
+  const { control, required, valid } = form
 
   return (
     <>
@@ -40,32 +40,41 @@ export function NameFields(props: NameFieldProps) {
             required={required.prefix}
             name='prefix'
             label={<Trans id='Prefix' />}
-            showValid
-            InputProps={{ readOnly }}
-            options={prefixes.map((option) => ({ id: option, label: option }))}
+            InputProps={{
+              readOnly,
+              endAdornment: <InputCheckmark show={valid.prefix} select />,
+            }}
+            options={prefixes.map((option) => ({
+              id: option,
+              label: option,
+            }))}
           />
         </FormRow>
       )}
       <FormRow>
         <TextFieldElement
-          control={control}
+          control={form.control}
           name='firstname'
           required={required.firstname}
           variant='outlined'
           type='text'
           label={<Trans id='First Name' />}
-          InputProps={{ readOnly }}
-          showValid
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.firstname} />,
+          }}
         />
         <TextFieldElement
-          control={control}
+          control={form.control}
           name='lastname'
           required={required.lastname}
           variant='outlined'
           type='text'
           label={<Trans id='Last Name' />}
-          InputProps={{ readOnly }}
-          showValid
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.lastname} />,
+          }}
         />
       </FormRow>
     </>

package/components/SignUpForm/SignUpForm.tsx

@@ -1,9 +1,10 @@
-import { PasswordRepeatElement, SwitchElement } from '@graphcommerce/ecommerce-ui'
+import { PasswordRepeatElement } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
-import { FormPersist, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { Alert } from '@mui/material'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { Alert, FormControlLabel, Switch } from '@mui/material'
 import { useSignInForm } from '../../hooks/useSignInForm'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
 import { NameFields } from '../NameFields/NameFields'
@@ -38,11 +39,13 @@ export function SignUpForm(props: SignUpFormProps) {
     { errorPolicy: 'all' },
   )
 
-  const { handleSubmit, required, formState, error, control } = form
+  const { muiRegister, handleSubmit, required, formState, error, control } = form
   const [remainingError, inputError] = graphqlErrorByCategory({ category: 'graphql-input', error })
 
   const submitHandler = handleSubmit(() => {})
 
+  useFormPersist({ form, name: 'SignUp', exclude: ['password', 'confirmPassword'] })
+
   if (requireEmailValidation && form.formState.isSubmitSuccessful) {
     return (
       <Alert>
@@ -54,7 +57,6 @@ export function SignUpForm(props: SignUpFormProps) {
   return (
     <form onSubmit={submitHandler} noValidate>
       <FormRow>
-        <FormPersist form={form} name='SignUp' exclude={['password', 'confirmPassword']} />
         <ValidatedPasswordElement
           control={control}
           name='password'
@@ -82,9 +84,9 @@ export function SignUpForm(props: SignUpFormProps) {
 
       <NameFields form={form} prefix />
 
-      <SwitchElement
-        control={control}
-        name='isSubscribed'
+      <FormControlLabel
+        control={<Switch color='primary' />}
+        {...muiRegister('isSubscribed', { required: required.isSubscribed })}
         disabled={formState.isSubmitting}
         label={<Trans id='Subscribe to newsletter' />}
       />

package/components/UpdateCustomerEmailForm/UpdateCustomerEmailForm.tsx

@@ -1,4 +1,4 @@
-import { PasswordElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
+import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
   Button,
@@ -12,6 +12,7 @@ import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { TextField } from '@mui/material'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError'
 import {
   UpdateCustomerEmailDocument,
@@ -31,17 +32,13 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
     UpdateCustomerEmailMutationVariables & { currentEmail?: string; confirmEmail?: string }
   >(
     UpdateCustomerEmailDocument,
-    {
-      defaultValues: {
-        currentEmail: email,
-      },
-    },
+    {},
     {
       errorPolicy: 'all',
     },
   )
 
-  const { handleSubmit, error, required, formState, watch, reset, control } = form
+  const { handleSubmit, error, required, formState, watch, muiRegister, reset, control } = form
   const [remainingError, authenticationError] = graphqlErrorByCategory({
     category: 'graphql-authentication',
     error,
@@ -54,20 +51,30 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
   return (
     <Form onSubmit={submit} noValidate>
       <FormRow>
-        <TextFieldElement
+        <TextField
+          key='current-email'
           variant='outlined'
           type='text'
+          autoComplete='email'
+          autoFocus
+          error={formState.isSubmitted && !!formState.errors.currentEmail}
+          helperText={formState.isSubmitted && formState.errors.currentEmail?.message}
           label={<Trans id='Current email' />}
           required
-          name='currentEmail'
-          control={control}
-          showValid
-          InputProps={{ readOnly: true }}
+          value={email}
+          {...muiRegister('currentEmail', {
+            required: true,
+            pattern: { value: emailPattern, message: '' },
+          })}
+          InputProps={{
+            readOnly: true,
+          }}
         />
       </FormRow>
 
       <FormRow>
-        <TextFieldElement
+        <TextField
+          key='email'
           variant='outlined'
           type='text'
           autoComplete='off'
@@ -75,15 +82,12 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           helperText={formState.isSubmitted && formState.errors.email?.message}
           label={<Trans id='New email' />}
           required={required.email}
-          name='email'
-          rules={{
+          {...muiRegister('email', {
             required: true,
             pattern: { value: emailPattern, message: '' },
-          }}
-          showValid
-          control={control}
+          })}
         />
-        <TextFieldElement
+        <TextField
           key='confirm-email'
           variant='outlined'
           type='text'
@@ -92,13 +96,10 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           helperText={formState.isSubmitted && formState.errors.confirmEmail?.message}
           label={<Trans id='Confirm new email' />}
           required
-          name='confirmEmail'
-          rules={{
+          {...muiRegister('confirmEmail', {
             required: true,
             validate: (value) => value === watchNewEmail || i18n._(/* i18n */ "Emails don't match"),
-          }}
-          showValid
-          control={control}
+          })}
         />
       </FormRow>
 

package/components/UpdateDefaultAddressForm/UpdateDefaultAddressForm.tsx

@@ -1,4 +1,4 @@
-import { Controller, FormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Controller, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { FormControl, FormControlLabel, FormHelperText, Switch } from '@mui/material'
@@ -32,6 +32,7 @@ export function UpdateDefaultAddressForm(props: UpdateDefaultAddressFormProps) {
   const { handleSubmit, control, error, reset, formState } = form
 
   const submit = handleSubmit(() => {})
+  useFormAutoSubmit({ form, submit })
 
   useEffect(() => {
     reset(defaultValues)
@@ -39,7 +40,6 @@ export function UpdateDefaultAddressForm(props: UpdateDefaultAddressFormProps) {
 
   return (
     <form onSubmit={() => {}} noValidate>
-      <FormAutoSubmit control={control} submit={submit} />
       <Controller
         name='defaultShipping'
         control={control}

package/hooks/useAccountSignInUpForm.tsx

@@ -1,7 +1,7 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
 import { useQuery } from '@graphcommerce/graphql'
-import { useUrlQuery } from '@graphcommerce/next-ui'
 import { useFormGqlQuery } from '@graphcommerce/react-hook-form'
+import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { CustomerDocument } from './Customer.gql'
 import {
@@ -10,6 +10,7 @@ import {
   IsEmailAvailableQueryVariables,
 } from './IsEmailAvailable.gql'
 import { useCustomerSession } from './useCustomerSession'
+import { useUrlQuery } from '@graphcommerce/next-ui'
 
 export type UseFormIsEmailAvailableProps = {
   onSubmitted?: (data: { email: string }) => void

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.6-canary.3",
+  "version": "8.0.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.0.6-canary.3",
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.3",
-    "@graphcommerce/framer-next-pages": "^8.0.6-canary.3",
-    "@graphcommerce/framer-utils": "^8.0.6-canary.3",
-    "@graphcommerce/graphql": "^8.0.6-canary.3",
-    "@graphcommerce/graphql-mesh": "^8.0.6-canary.3",
-    "@graphcommerce/image": "^8.0.6-canary.3",
-    "@graphcommerce/magento-graphql": "^8.0.6-canary.3",
-    "@graphcommerce/magento-store": "^8.0.6-canary.3",
-    "@graphcommerce/next-ui": "^8.0.6-canary.3",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.3",
-    "@graphcommerce/react-hook-form": "^8.0.6-canary.3",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.3",
+    "@graphcommerce/ecommerce-ui": "^8.0.6",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6",
+    "@graphcommerce/framer-next-pages": "^8.0.6",
+    "@graphcommerce/framer-utils": "^8.0.6",
+    "@graphcommerce/graphql": "^8.0.6",
+    "@graphcommerce/graphql-mesh": "^8.0.6",
+    "@graphcommerce/image": "^8.0.6",
+    "@graphcommerce/magento-graphql": "^8.0.6",
+    "@graphcommerce/magento-store": "^8.0.6",
+    "@graphcommerce/next-ui": "^8.0.6",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6",
+    "@graphcommerce/react-hook-form": "^8.0.6",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",