@graphcommerce/magento-customer 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) [`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.5

package/components/AddressFields/AddressAddition.tsx

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

package/components/AddressFields/AddressCity.tsx

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

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, InputCheckmark, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { FormRow, 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, valid, countryList, regionList } = form
+  const { control, name, readOnly, required, countryList, regionList } = form
 
   return (
     <FormRow>
@@ -54,10 +54,8 @@ export function AddressCountryRegion<
         variant='outlined'
         label={<Trans id='Country' />}
         required={required[name.countryCode]}
-        InputProps={{
-          readOnly,
-          endAdornment: <InputCheckmark show={valid[name.countryCode]} select />,
-        }}
+        showValid
+        InputProps={{ readOnly }}
         options={countryList.map((country) => ({
           id: country.two_letter_abbreviation,
           label: country.full_name_locale,
@@ -72,10 +70,8 @@ export function AddressCountryRegion<
           variant='outlined'
           label={<Trans id='Region' />}
           required
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid[name.regionId]} select />,
-          }}
+          showValid
+          InputProps={{ readOnly }}
           options={regionList.map((region) => ({ ...region, label: region.name }))}
         />
       )}

package/components/AddressFields/AddressHouseNumber.tsx

@@ -4,7 +4,6 @@ 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'
@@ -14,7 +13,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, valid } = form
+  const { control, name, readOnly, required } = form
   return (
     <TextFieldElement
       control={control}
@@ -30,10 +29,8 @@ export function AddressHousenumber<
       type='text'
       label={<Trans id='Housenumber' />}
       autoComplete='address-line2'
-      InputProps={{
-        readOnly,
-        endAdornment: <InputCheckmark show={valid[name.houseNumber]} />,
-      }}
+      showValid
+      InputProps={{ readOnly }}
     />
   )
 }

package/components/AddressFields/AddressPostcode.tsx

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

package/components/AddressFields/AddressStreet.tsx

@@ -1,5 +1,4 @@
 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'
@@ -9,7 +8,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, valid } = form
+  const { control, name, readOnly, required } = form
   return (
     <TextFieldElement
       variant='outlined'
@@ -19,10 +18,8 @@ export function AddressStreet<
       type='text'
       label={<Trans id='Street' />}
       autoComplete='address-line1'
-      InputProps={{
-        readOnly,
-        endAdornment: <InputCheckmark show={valid[name.street]} />,
-      }}
+      showValid
+      InputProps={{ readOnly }}
     />
   )
 }

package/components/CreateCustomerAddressForm/CreateCustomerAddressForm.tsx

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

package/components/EditAddressForm/EditAddressForm.tsx

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

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -1,9 +1,10 @@
+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 { TextField, Alert, SxProps, Theme } from '@mui/material'
+import { Alert, SxProps, Theme } from '@mui/material'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import {
   ForgotPasswordDocument,
@@ -16,7 +17,7 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
   const form = useFormGqlMutation<ForgotPasswordMutation, ForgotPasswordMutationVariables>(
     ForgotPasswordDocument,
   )
-  const { muiRegister, handleSubmit, required, data, formState, error } = form
+  const { control, handleSubmit, required, data, formState, error } = form
   const submitHandler = handleSubmit(() => {})
 
   if (formState.isSubmitSuccessful && data) {
@@ -37,18 +38,20 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
   return (
     <Form onSubmit={submitHandler} noValidate sx={sx}>
       <FormRow>
-        <TextField
+        <TextFieldElement
           variant='outlined'
           type='text'
           error={!!formState.errors.email}
           label={<Trans id='Email' />}
           required={required.email}
-          {...muiRegister('email', {
-            required: required.email,
+          name='email'
+          control={control}
+          rules={{
             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, InputCheckmark } from '@graphcommerce/next-ui'
+import { FormRow } 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, valid } = form
+  const { control, required } = form
 
   return (
     <>
@@ -40,41 +40,32 @@ export function NameFields(props: NameFieldProps) {
             required={required.prefix}
             name='prefix'
             label={<Trans id='Prefix' />}
-            InputProps={{
-              readOnly,
-              endAdornment: <InputCheckmark show={valid.prefix} select />,
-            }}
-            options={prefixes.map((option) => ({
-              id: option,
-              label: option,
-            }))}
+            showValid
+            InputProps={{ readOnly }}
+            options={prefixes.map((option) => ({ id: option, label: option }))}
           />
         </FormRow>
       )}
       <FormRow>
         <TextFieldElement
-          control={form.control}
+          control={control}
           name='firstname'
           required={required.firstname}
           variant='outlined'
           type='text'
           label={<Trans id='First Name' />}
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid.firstname} />,
-          }}
+          InputProps={{ readOnly }}
+          showValid
         />
         <TextFieldElement
-          control={form.control}
+          control={control}
           name='lastname'
           required={required.lastname}
           variant='outlined'
           type='text'
           label={<Trans id='Last Name' />}
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid.lastname} />,
-          }}
+          InputProps={{ readOnly }}
+          showValid
         />
       </FormRow>
     </>

package/components/SignUpForm/SignUpForm.tsx

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

package/components/UpdateCustomerEmailForm/UpdateCustomerEmailForm.tsx

@@ -1,4 +1,4 @@
-import { PasswordElement } from '@graphcommerce/ecommerce-ui'
+import { PasswordElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
   Button,
@@ -12,7 +12,6 @@ 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,
@@ -32,13 +31,17 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
     UpdateCustomerEmailMutationVariables & { currentEmail?: string; confirmEmail?: string }
   >(
     UpdateCustomerEmailDocument,
-    {},
+    {
+      defaultValues: {
+        currentEmail: email,
+      },
+    },
     {
       errorPolicy: 'all',
     },
   )
 
-  const { handleSubmit, error, required, formState, watch, muiRegister, reset, control } = form
+  const { handleSubmit, error, required, formState, watch, reset, control } = form
   const [remainingError, authenticationError] = graphqlErrorByCategory({
     category: 'graphql-authentication',
     error,
@@ -51,30 +54,20 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
   return (
     <Form onSubmit={submit} noValidate>
       <FormRow>
-        <TextField
-          key='current-email'
+        <TextFieldElement
           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
-          value={email}
-          {...muiRegister('currentEmail', {
-            required: true,
-            pattern: { value: emailPattern, message: '' },
-          })}
-          InputProps={{
-            readOnly: true,
-          }}
+          name='currentEmail'
+          control={control}
+          showValid
+          InputProps={{ readOnly: true }}
         />
       </FormRow>
 
       <FormRow>
-        <TextField
-          key='email'
+        <TextFieldElement
           variant='outlined'
           type='text'
           autoComplete='off'
@@ -82,12 +75,15 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           helperText={formState.isSubmitted && formState.errors.email?.message}
           label={<Trans id='New email' />}
           required={required.email}
-          {...muiRegister('email', {
+          name='email'
+          rules={{
             required: true,
             pattern: { value: emailPattern, message: '' },
-          })}
+          }}
+          showValid
+          control={control}
         />
-        <TextField
+        <TextFieldElement
           key='confirm-email'
           variant='outlined'
           type='text'
@@ -96,10 +92,13 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           helperText={formState.isSubmitted && formState.errors.confirmEmail?.message}
           label={<Trans id='Confirm new email' />}
           required
-          {...muiRegister('confirmEmail', {
+          name='confirmEmail'
+          rules={{
             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, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Controller, FormAutoSubmit, 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,7 +32,6 @@ export function UpdateDefaultAddressForm(props: UpdateDefaultAddressFormProps) {
   const { handleSubmit, control, error, reset, formState } = form
 
   const submit = handleSubmit(() => {})
-  useFormAutoSubmit({ form, submit })
 
   useEffect(() => {
     reset(defaultValues)
@@ -40,6 +39,7 @@ 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,7 +10,6 @@ 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.0",
+  "version": "8.0.6-canary.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "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-utils": "^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-graphql": "^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/react-hook-form": "^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-utils": "^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-graphql": "^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/react-hook-form": "^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",