@graphcommerce/magento-customer 3.5.3 → 3.6.0

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.6.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-customer@3.5.6...@graphcommerce/magento-customer@3.6.0) (2021-11-12)
+
+
+### Bug Fixes
+
+* even more translations ([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
+
+
+### Features
+
+* added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
+
+
+
+
+
+## [3.5.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-customer@3.5.4...@graphcommerce/magento-customer@3.5.5) (2021-11-12)
+
+
+### Bug Fixes
+
+* design ([a095309](https://github.com/ho-nl/m2-pwa/commit/a095309bb3d77228985e08e30f626cd26e878f57))
+* login error message should wrap ([6b8e61f](https://github.com/ho-nl/m2-pwa/commit/6b8e61fa6523391e5faa3dfd37b9fcd648d831bb))
+* snackbar styling and consistant grammar ([3f6a4f9](https://github.com/ho-nl/m2-pwa/commit/3f6a4f9a1c8b2d5220268d59d0c8e5a11c9ce6a8))
+
+
+
+
+
+## [3.5.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-customer@3.5.3...@graphcommerce/magento-customer@3.5.4) (2021-11-12)
+
+
+### Bug Fixes
+
+* **checkout-email-form:** spacing too large ([f54e217](https://github.com/ho-nl/m2-pwa/commit/f54e2170b5c47c1c33e74db45e3bcae3d3523c4e))
+* **use-form-is-email-available:** invalid email resets sign in/up state ([87b3965](https://github.com/ho-nl/m2-pwa/commit/87b39656760372f2be69eca045e3db8120006137))
+
+
+
+
+
 # [3.5.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-customer@3.4.15...@graphcommerce/magento-customer@3.5.0) (2021-11-09)
 
 

package/components/AccountAddress/index.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/macro'
 import { Link, makeStyles, Theme } from '@material-ui/core'
 import PageLink from 'next/link'
 import React from 'react'
@@ -50,7 +51,9 @@ export default function AccountAddress(props: AccountAddressProps) {
       </div>
       <div className={classes.actions}>
         <PageLink href={`/account/addresses/edit?addressId=${id}`} passHref>
-          <Link color='primary'>Edit</Link>
+          <Link color='primary'>
+            <Trans>Edit</Trans>
+          </Link>
         </PageLink>
         <DeleteCustomerAddressForm addressId={id ?? undefined} />
       </div>

package/components/AccountAddresses/index.tsx

@@ -3,10 +3,10 @@ import {
   FullPageMessage,
   SectionContainer,
   MessageSnackbar,
-  SvgImage,
   iconHome,
   SvgImageSimple,
 } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
 import { makeStyles, Theme } from '@material-ui/core'
 import { Skeleton } from '@material-ui/lab'
 import Link from 'next/link'
@@ -54,7 +54,7 @@ export default function AccountAddresses(props: AccountAddressesProps) {
           <Skeleton height={128} />
         </div>
         <Button className={classes.button} variant='contained' color='primary' disabled>
-          Add new address
+          <Trans>Add new address</Trans>
         </Button>
       </SectionContainer>
     )
@@ -65,12 +65,12 @@ export default function AccountAddresses(props: AccountAddressesProps) {
       {((addresses && addresses.length === 0) || !addresses) && (
         <>
           <FullPageMessage
-            title='You have no addresses saved yet'
+            title={<Trans>You have no addresses saved yet</Trans>}
             icon={<SvgImageSimple src={iconHome} size='xxl' />}
             button={
               <Link href='/account/addresses/add' passHref>
                 <Button size='large' variant='contained' color='primary'>
-                  Add new address
+                  <Trans>Add new address</Trans>
                 </Button>
               </Link>
             }
@@ -88,12 +88,12 @@ export default function AccountAddresses(props: AccountAddressesProps) {
 
           <Link href='/account/addresses/add' passHref>
             <Button className={classes.button} variant='contained' color='primary'>
-              Add new address
+              <Trans>Add new address</Trans>
             </Button>
           </Link>
 
           <MessageSnackbar sticky open={router.query.confirm_delete !== undefined}>
-            <>Address was deleted</>
+            <Trans>Successfully deleted address</Trans>
           </MessageSnackbar>
         </SectionContainer>
       )}

package/components/AddressFields/index.tsx

@@ -6,6 +6,7 @@ import {
   houseNumberPattern,
   UseFormReturn,
 } from '@graphcommerce/react-hook-form'
+import { t, Trans } from '@lingui/macro'
 import { TextField } from '@material-ui/core'
 import React, { useMemo } from 'react'
 
@@ -56,7 +57,7 @@ export default function AddressFields(props: AddressFieldsProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.street}
-          label='Street'
+          label={<Trans>Street</Trans>}
           autoComplete='address-line1'
           required={!!required?.street}
           {...muiRegister('street', { required: required?.street })}
@@ -70,12 +71,12 @@ export default function AddressFields(props: AddressFieldsProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.houseNumber}
-          label='Housenumber'
+          label={<Trans>Housenumber</Trans>}
           autoComplete='address-line2'
           required={!!required?.houseNumber}
           {...muiRegister('houseNumber', {
             required: required?.houseNumber,
-            pattern: { value: houseNumberPattern, message: 'Please provide a valid house number' },
+            pattern: { value: houseNumberPattern, message: t`Please provide a valid house number` },
           })}
           helperText={formState.isSubmitted && formState.errors.houseNumber?.message}
           InputProps={{
@@ -88,7 +89,7 @@ export default function AddressFields(props: AddressFieldsProps) {
           type='text'
           error={!!formState.errors.addition}
           required={!!required?.addition}
-          label='Addition'
+          label={<Trans>Addition</Trans>}
           autoComplete='address-line3'
           {...muiRegister('addition', { required: required?.addition })}
           helperText={formState.isSubmitted && formState.errors.addition?.message}
@@ -104,7 +105,7 @@ export default function AddressFields(props: AddressFieldsProps) {
           type='text'
           error={!!formState.errors.postcode}
           required={!!required?.postcode}
-          label='Postcode'
+          label={<Trans>Postcode</Trans>}
           {...muiRegister('postcode', { required: required?.postcode })}
           helperText={formState.isSubmitted && formState.errors.postcode?.message}
           InputProps={{
@@ -117,7 +118,7 @@ export default function AddressFields(props: AddressFieldsProps) {
           type='text'
           error={!!formState.errors.city}
           required={!!required?.city}
-          label='City'
+          label={<Trans>City</Trans>}
           {...muiRegister('city', { required: required?.city })}
           helperText={formState.isSubmitted && formState.errors.city?.message}
           InputProps={{
@@ -133,7 +134,7 @@ export default function AddressFields(props: AddressFieldsProps) {
           {...muiRegister('countryCode', { required: required.countryCode })}
           variant='outlined'
           error={!!formState.errors.countryCode}
-          label='Country'
+          label={<Trans>Country</Trans>}
           required={!!required?.countryCode}
           helperText={formState.errors.countryCode?.message}
           // onBlur={onBlur}
@@ -159,7 +160,7 @@ export default function AddressFields(props: AddressFieldsProps) {
             SelectProps={{ native: true, displayEmpty: true }}
             variant='outlined'
             error={!!formState.errors.regionId}
-            label='Region'
+            label={<Trans>Region</Trans>}
             {...muiRegister('regionId', {
               required: true,
               shouldUnregister: true,

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -1,4 +1,5 @@
 import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
 import { Link } from '@material-ui/core'
 import NextLink from 'next/link'
 import React from 'react'
@@ -12,7 +13,9 @@ export default function ApolloCustomerErrorAlert(props: MagentoErrorAlertProps)
   const action = unauthorized && (
     <>
       <NextLink href='/account/signin' passHref>
-        <Link>Sign Up / Sign In</Link>
+        <Link>
+          <Trans>Create Account</Trans> / <Trans>Sign In</Trans>
+        </Link>
       </NextLink>
     </>
   )

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -5,6 +5,7 @@ import {
   iconPerson,
   SvgImageSimple,
 } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
 import PageLink from 'next/link'
 import React from 'react'
 
@@ -27,7 +28,7 @@ export default function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFu
         unauthorized ? (
           <PageLink href={signInHref} passHref>
             <Button variant='contained' color='primary' size='large'>
-              Login
+              <Trans>Login</Trans>
             </Button>
           </PageLink>
         ) : undefined
@@ -36,7 +37,7 @@ export default function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFu
         unauthorized ? (
           <PageLink href={signUpHref} passHref>
             <Button variant='text' color='primary'>
-              Or create an account
+              <Trans>Or create an account</Trans>
             </Button>
           </PageLink>
         ) : undefined

package/components/ChangeNameForm/index.tsx

@@ -8,6 +8,7 @@ import {
   SvgImageSimple,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/macro'
 import React from 'react'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import NameFields from '../NameFields'
@@ -49,16 +50,13 @@ export default function ChangeNameForm(props: ChangeNameFormProps) {
             size='large'
             loading={formState.isSubmitting}
           >
-            Save changes
+            <Trans>Save changes</Trans>
           </Button>
         </FormActions>
         <ApolloCustomerErrorAlert error={error} />
       </Form>
       <MessageSnackbar open={formState.isSubmitSuccessful && !error} variant='pill'>
-        <>
-          <SvgImageSimple src={iconCheckmark} size='small' />
-          Changes saved
-        </>
+        <Trans>Successfully saved changes</Trans>
       </MessageSnackbar>
     </>
   )

package/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -7,6 +7,7 @@ import {
   FormDivider,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Trans, t } from '@lingui/macro'
 import { TextField } from '@material-ui/core'
 import React from 'react'
 
@@ -33,7 +34,7 @@ export default function ChangePasswordForm() {
           variant='outlined'
           type='password'
           error={!!formState.errors.currentPassword}
-          label='Current Password'
+          label={<Trans>Current Password</Trans>}
           required={required.currentPassword}
           {...muiRegister('currentPassword', { required: required.currentPassword })}
           helperText={formState.errors.currentPassword?.message}
@@ -46,7 +47,7 @@ export default function ChangePasswordForm() {
           variant='outlined'
           type='password'
           error={!!formState.errors.newPassword}
-          label='New Password'
+          label={<Trans>New Password</Trans>}
           required={required.newPassword}
           {...muiRegister('newPassword', { required: required.newPassword })}
           helperText={formState.errors.newPassword?.message}
@@ -57,11 +58,11 @@ export default function ChangePasswordForm() {
           variant='outlined'
           type='password'
           error={!!formState.errors.confirmPassword}
-          label='Confirm Password'
+          label={<Trans>Confirm Password</Trans>}
           required
           {...muiRegister('confirmPassword', {
             required: true,
-            validate: (value) => value === pass || "Passwords don't match",
+            validate: (value) => value === pass || t`Passwords don't match`,
           })}
           helperText={formState.errors.confirmPassword?.message}
           disabled={formState.isSubmitting}
@@ -80,12 +81,12 @@ export default function ChangePasswordForm() {
           variant='contained'
           size='large'
         >
-          Save new password
+          <Trans>Save new password</Trans>
         </Button>
       </FormActions>
 
       <MessageSnackbar sticky open={Boolean(formState.isSubmitSuccessful && data)}>
-        <>Password changed</>
+        <Trans>Successfully changed password</Trans>
       </MessageSnackbar>
     </Form>
   )

package/components/CreateCustomerAddressForm/index.tsx

@@ -9,6 +9,7 @@ import {
   InputCheckmark,
 } from '@graphcommerce/next-ui'
 import { phonePattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Trans, t } from '@lingui/macro'
 import { TextField } from '@material-ui/core'
 import { useRouter } from 'next/router'
 import React from 'react'
@@ -65,10 +66,10 @@ export default function CreateCustomerAddressForm() {
             type='text'
             error={!!formState.errors.telephone}
             required={required.telephone}
-            label='Telephone'
+            label={<Trans>Telephone</Trans>}
             {...muiRegister('telephone', {
               required: required.telephone,
-              pattern: { value: phonePattern, message: 'Invalid phone number' },
+              pattern: { value: phonePattern, message: t`Invalid phone number` },
             })}
             helperText={formState.isSubmitted && formState.errors.telephone?.message}
             disabled={formState.isSubmitting}
@@ -86,7 +87,7 @@ export default function CreateCustomerAddressForm() {
             size='large'
             loading={formState.isSubmitting}
           >
-            Save changes
+            <Trans>Save changes</Trans>
           </Button>
         </FormActions>
       </Form>

package/components/CustomerFab/index.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from '@apollo/client'
 import { iconPerson, StyledBadge, SvgImageSimple, UseStyles } from '@graphcommerce/next-ui'
+import { t } from '@lingui/macro'
 import { Fab, FabProps as FabPropsType, makeStyles, NoSsr, Theme } from '@material-ui/core'
 import PageLink from 'next/link'
 import React from 'react'
@@ -25,7 +26,7 @@ function CustomerFabContent(props: CustomerFabContentProps) {
 
   return (
     <PageLink href={requireAuth ? guestHref : authHref} passHref>
-      <Fab color='inherit' aria-label='Open Menu' size='large' {...FabProps}>
+      <Fab color='inherit' aria-label={t`Account`} size='large' {...FabProps}>
         <StyledBadge
           badgeContent={customerToken?.token ? 1 : 0}
           color={customerToken?.valid ? 'primary' : 'error'}

package/components/DeleteCustomerAddressForm/index.tsx

@@ -1,4 +1,5 @@
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/macro'
 import { Button, makeStyles, Theme } from '@material-ui/core'
 import { useRouter } from 'next/router'
 import React from 'react'
@@ -38,7 +39,7 @@ export default function DeleteCustomerAddressForm(props: DeleteCustomerAddressFo
   return (
     <form onSubmit={submitHandler} noValidate>
       <Button type='submit' variant='text' color='inherit' className={classes.button}>
-        Delete this address
+        <Trans>Delete this address</Trans>
       </Button>
       <ApolloCustomerErrorAlert error={error} />
     </form>

package/components/EditAddressForm/index.tsx

@@ -9,6 +9,7 @@ import {
   InputCheckmark,
 } from '@graphcommerce/next-ui'
 import { phonePattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { t, Trans } from '@lingui/macro'
 import { makeStyles, TextField } from '@material-ui/core'
 import { useRouter } from 'next/router'
 import React from 'react'
@@ -94,10 +95,10 @@ export default function EditAddressForm(props: EditAddressFormProps) {
             type='text'
             error={!!formState.errors.telephone}
             required={required.telephone}
-            label='Telephone'
+            label={<Trans>Telephone</Trans>}
             {...muiRegister('telephone', {
               required: required.telephone,
-              pattern: { value: phonePattern, message: 'Invalid phone number' },
+              pattern: { value: phonePattern, message: t`Invalid phone number` },
             })}
             helperText={formState.isSubmitted && formState.errors.telephone?.message}
             disabled={formState.isSubmitting}
@@ -115,7 +116,7 @@ export default function EditAddressForm(props: EditAddressFormProps) {
             size='large'
             loading={formState.isSubmitting}
           >
-            Save changes
+            <Trans>Save changes</Trans>
           </Button>
         </FormActions>
       </Form>

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -1,5 +1,6 @@
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { t, Trans } from '@lingui/macro'
 import { makeStyles, TextField, Theme } from '@material-ui/core'
 import { Alert } from '@material-ui/lab'
 import React from 'react'
@@ -31,7 +32,7 @@ export default function ForgotPasswordForm() {
   if (formState.isSubmitSuccessful && data) {
     return (
       <Alert severity='success' variant='standard' className={classes.alert}>
-        We&apos;ve send a password reset link to your account!
+        <Trans>We've send a password reset link to your email address!</Trans>
       </Alert>
     )
   }
@@ -43,11 +44,11 @@ export default function ForgotPasswordForm() {
           variant='outlined'
           type='text'
           error={!!formState.errors.email}
-          label='Email'
+          label={<Trans>Email</Trans>}
           required={required.email}
           {...muiRegister('email', {
             required: required.email,
-            pattern: { value: emailPattern, message: 'Invalid email address' },
+            pattern: { value: emailPattern, message: t`Invalid email address` },
           })}
           helperText={formState.errors.email?.message}
           disabled={formState.isSubmitting}
@@ -64,7 +65,7 @@ export default function ForgotPasswordForm() {
           variant='contained'
           size='large'
         >
-          Send password reset email
+          <Trans>Send password reset email</Trans>
         </Button>
       </FormActions>
     </Form>

package/components/NameFields/index.tsx

@@ -1,5 +1,6 @@
 import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import { assertFormGqlOperation, Controller, UseFormReturn } from '@graphcommerce/react-hook-form'
+import { t, Trans } from '@lingui/macro'
 import { MenuItem, TextField } from '@material-ui/core'
 import React from 'react'
 
@@ -23,8 +24,8 @@ export default function NameFields(props: NameFieldProps) {
 
   return (
     <>
-      <FormRow>
-        {prefix && (
+      {prefix && (
+        <FormRow>
           <Controller
             defaultValue='Dhr.'
             control={control}
@@ -34,18 +35,18 @@ export default function NameFields(props: NameFieldProps) {
                 variant='outlined'
                 select
                 error={!!fieldState.error}
-                label='Prefix'
+                label={<Trans>Prefix</Trans>}
                 required={!!required?.prefix}
                 helperText={fieldState.error?.message}
                 onChange={(e) => onChange(e.target.value)}
                 inputRef={ref}
                 InputProps={{
                   readOnly,
-                  endAdornment: <InputCheckmark show={valid.prefix} />,
+                  endAdornment: <InputCheckmark show={valid.prefix} select />,
                 }}
                 {...field}
               >
-                {['Dhr.', 'Mevr.'].map((option) => (
+                {[t`Mr`, t`Mrs`, t`Other`].map((option) => (
                   <MenuItem key={option} value={option}>
                     {option}
                   </MenuItem>
@@ -53,14 +54,14 @@ export default function NameFields(props: NameFieldProps) {
               </TextField>
             )}
           />
-        )}
-      </FormRow>
+        </FormRow>
+      )}
 
       <FormRow>
         <TextField
           variant='outlined'
           type='text'
-          label='First Name'
+          label={<Trans>First Name</Trans>}
           required={!!required}
           error={!!formState.errors.firstname}
           helperText={formState.isSubmitted && formState.errors.firstname?.message}
@@ -74,7 +75,7 @@ export default function NameFields(props: NameFieldProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.lastname}
-          label='Last Name'
+          label={<Trans>Last Name</Trans>}
           required={!!required?.lastname}
           helperText={formState.isSubmitted && formState.errors.lastname?.message}
           InputProps={{

package/components/ResetPasswordForm/index.tsx

@@ -1,5 +1,6 @@
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/macro'
 import { TextField } from '@material-ui/core'
 import { useRouter } from 'next/router'
 import React from 'react'
@@ -44,7 +45,7 @@ export default function ResetPasswordForm(props: ResetPasswordFormProps) {
           variant='outlined'
           type='email'
           error={!!formState.errors.email}
-          label='Email'
+          label={<Trans>Email</Trans>}
           required={required.email}
           {...muiRegister('email', { required: required.email })}
           helperText={formState.errors.email?.message}

package/components/SignInForm/SignInForm.tsx

@@ -55,15 +55,12 @@ export default function SignInForm(props: SignInFormProps) {
           variant='outlined'
           type='password'
           error={!!formState.errors.password || !!authError}
-          label={t`Password`}
+          label={<Trans>Password</Trans>}
           autoFocus
           autoComplete='current-password'
           id='current-password'
           required={required.password}
           {...muiRegister('password', { required: required.password })}
-          FormHelperTextProps={{
-            className: classes.forgotPass,
-          }}
           InputProps={{
             endAdornment: (
               <PageLink href='/account/forgot-password' key='forgot-password' passHref>

package/components/SignInForm/SignInFormInline.tsx

@@ -43,7 +43,7 @@ export default function SignInFormInline({ email }: PropsWithChildren<InlineSign
         variant='outlined'
         type='password'
         error={!!formState.errors.password || !!error?.message}
-        label={t`Password`}
+        label={<Trans>Password</Trans>}
         autoFocus
         autoComplete='current-password'
         id='current-password'

package/components/SignUpForm/SignUpForm.tsx

@@ -34,7 +34,7 @@ export default function SignUpForm(props: SignUpFormProps) {
           variant='outlined'
           type='password'
           error={!!formState.errors.password || !!inputError}
-          label={t`Password`}
+          label={<Trans>Password</Trans>}
           autoFocus
           autoComplete='new-password'
           required={required.password}

package/components/SignUpForm/SignUpFormInline.tsx

@@ -67,7 +67,7 @@ export default function SignUpFormInline({
           variant='outlined'
           type='password'
           error={!!formState.errors.password || !!error?.message}
-          label={t`Password`}
+          label={<Trans>Password</Trans>}
           autoFocus
           autoComplete='new-password'
           id='new-password'
@@ -103,7 +103,7 @@ export default function SignUpFormInline({
               color='secondary'
               variant='pill'
             >
-              Sign up
+              Create Account
             </Button>
           </div>
         </FormRow>

package/components/UpdateCustomerEmailForm/index.tsx

@@ -71,7 +71,7 @@ export default function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormPr
           autoFocus
           error={formState.isSubmitted && !!formState.errors.email}
           helperText={formState.isSubmitted && formState.errors.email?.message}
-          label='New email'
+          label={<Trans>New email</Trans>}
           required={required.email}
           {...muiRegister('email', {
             required: true,
@@ -86,11 +86,11 @@ export default function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormPr
           autoFocus
           error={formState.isSubmitted && !!formState.errors.confirmEmail}
           helperText={formState.isSubmitted && formState.errors.confirmEmail?.message}
-          label={t`Confirm new email`}
+          label={<Trans>Confirm new email</Trans>}
           required
           {...muiRegister('confirmEmail', {
             required: true,
-            validate: (value) => value === watchNewEmail || "Emails don't match",
+            validate: (value) => value === watchNewEmail || t`Emails don't match`,
           })}
         />
       </FormRow>
@@ -100,7 +100,7 @@ export default function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormPr
           variant='outlined'
           type='password'
           error={!!formState.errors.password}
-          label={t`Password`}
+          label={<Trans>Password</Trans>}
           autoComplete='password'
           required={required.password}
           {...muiRegister('password', {
@@ -120,13 +120,13 @@ export default function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormPr
           size='large'
           loading={formState.isSubmitting}
         >
-          Save changes
+          <Trans>Save changes</Trans>
         </Button>
       </FormActions>
       <ApolloCustomerErrorAlert error={error} />
 
       <MessageSnackbar sticky open={formState.isSubmitSuccessful && !error}>
-        <>Successfully updated email</>
+        <Trans>Successfully updated email</Trans>
       </MessageSnackbar>
     </Form>
   )

package/components/UpdateDefaultAddressForm/index.tsx

@@ -1,4 +1,5 @@
 import { Controller, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/macro'
 import { FormControl, FormControlLabel, FormHelperText, Switch } from '@material-ui/core'
 import React, { useEffect, useMemo } from 'react'
 import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
@@ -50,7 +51,7 @@ export default function UpdateDefaultAddressForm(props: AccountAddressProps) {
           <FormControl error={!!formState.errors.defaultShipping}>
             <FormControlLabel
               control={<Switch color='primary' />}
-              label='Shipping address'
+              label={<Trans>Shipping address</Trans>}
               checked={value}
               inputRef={ref}
               onBlur={onBlur}
@@ -71,7 +72,7 @@ export default function UpdateDefaultAddressForm(props: AccountAddressProps) {
           <FormControl error={!!formState.errors.defaultBilling}>
             <FormControlLabel
               control={<Switch color='primary' />}
-              label='Billing address'
+              label={<Trans>Billing address</Trans>}
               checked={value}
               inputRef={ref}
               onBlur={onBlur}

package/hooks/useExtractCustomerErrors.tsx

@@ -1,5 +1,6 @@
 import { ApolloError, useApolloClient } from '@apollo/client'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import { t } from '@lingui/macro'
 import { useEffect } from 'react'
 import { CustomerTokenDocument } from './CustomerToken.gql'
 
@@ -11,7 +12,7 @@ export function useExtractCustomerErrors({ error }: UseExtractErrors) {
     category: 'graphql-authorization',
     error,
     extract: false,
-    mask: 'You need to login to continue',
+    mask: t`You must sign in to continue`,
   })
 
   useEffect(() => {

package/hooks/useFormIsEmailAvailable.tsx

@@ -44,10 +44,7 @@ export default function useFormIsEmailAvailable(props: useFormIsEmailAvailablePr
       return
     }
     if (isSubmitting) return
-    if (!isValid) {
-      setMode('email')
-      return
-    }
+    if (!isValid) return
     if (!isDirty && isSubmitted && isSubmitSuccessful && isValid)
       setMode(hasAccount ? 'signin' : 'signup')
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-customer",
-  "version": "3.5.3",
+  "version": "3.6.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,20 +14,20 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.4",
+    "@graphcommerce/eslint-config-pwa": "^3.1.5",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/graphql": "^2.105.4",
-    "@graphcommerce/image": "^2.105.3",
-    "@graphcommerce/magento-graphql": "^2.104.4",
-    "@graphcommerce/magento-store": "^3.2.18",
-    "@graphcommerce/next-ui": "^3.15.1",
-    "@graphcommerce/react-hook-form": "^2.103.1",
-    "@graphql-typed-document-node/core": "^3.1.0",
+    "@graphcommerce/graphql": "^2.105.5",
+    "@graphcommerce/image": "^2.105.4",
+    "@graphcommerce/magento-graphql": "^2.104.5",
+    "@graphcommerce/magento-store": "^3.3.0",
+    "@graphcommerce/next-ui": "^3.17.0",
+    "@graphcommerce/react-hook-form": "^2.104.0",
+    "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "clsx": "^1.1.1",
@@ -36,5 +36,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "9fb7a52af72eb5c9677f24e11d7b62871151c46e"
+  "gitHead": "6a39908a131938d9c3365cc937b92c1f1f8b33c6"
 }