@graphcommerce/magento-customer 6.2.0-canary.8 → 6.2.0-canary.80

package/CHANGELOG.md

@@ -1,5 +1,185 @@
 # Change Log
 
+## 6.2.0-canary.80
+
+## 6.2.0-canary.79
+
+## 6.2.0-canary.78
+
+## 6.2.0-canary.77
+
+## 6.2.0-canary.76
+
+## 6.2.0-canary.75
+
+### Patch Changes
+
+- [#2016](https://github.com/graphcommerce-org/graphcommerce/pull/2016) [`227ddcee8`](https://github.com/graphcommerce-org/graphcommerce/commit/227ddcee8808715928371c1f3a4c7925032df0ef) - Made cardProps on CustomerAddressActionCards overridable. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.74
+
+### Patch Changes
+
+- [#2006](https://github.com/graphcommerce-org/graphcommerce/pull/2006) [`80b60cb40`](https://github.com/graphcommerce-org/graphcommerce/commit/80b60cb404882260bd0e8184f3e54f4720925c96) - Bugfix for unintentionally overriding the billing address even if a default address was set. Also made prefix optional when creating an address ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.73
+
+## 6.2.0-canary.72
+
+## 6.2.0-canary.71
+
+## 6.2.0-canary.70
+
+## 6.2.0-canary.69
+
+## 6.2.0-canary.68
+
+## 6.2.0-canary.67
+
+## 6.2.0-canary.66
+
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+## 6.2.0-canary.61
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+## 6.2.0-canary.52
+
+### Patch Changes
+
+- [#1972](https://github.com/graphcommerce-org/graphcommerce/pull/1972) [`cda89820d`](https://github.com/graphcommerce-org/graphcommerce/commit/cda89820dc50e2019a26239b7450863d8c862bfb) - Ensure correct width for CircularProgress and fix misalignment in rotate animation ([@carlocarels90](https://github.com/carlocarels90))
+
+## 6.2.0-canary.51
+
+## 6.2.0-canary.50
+
+## 6.2.0-canary.49
+
+## 6.2.0-canary.48
+
+## 6.2.0-canary.47
+
+### Patch Changes
+
+- [#1969](https://github.com/graphcommerce-org/graphcommerce/pull/1969) [`838322a97`](https://github.com/graphcommerce-org/graphcommerce/commit/838322a97c7ef1b8aa919196e756da381904bf04) - Fixing the Internal Server Error if the third address line is empty. ([@action-simon](https://github.com/action-simon))
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+### Minor Changes
+
+- [#1962](https://github.com/graphcommerce-org/graphcommerce/pull/1962) [`518b6ca24`](https://github.com/graphcommerce-org/graphcommerce/commit/518b6ca248fc94624dc06eb02de5b3eac0fc9483) - Created a new `<ValidatedPasswordElement/>` which validates according to Magento's validation groups and implement on all locations. Move remaining password fields to `<PasswordElement />` ([@carlocarels90](https://github.com/carlocarels90))
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+## 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
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+### Patch Changes
+
+- [#1942](https://github.com/graphcommerce-org/graphcommerce/pull/1942) [`21b0d0c48`](https://github.com/graphcommerce-org/graphcommerce/commit/21b0d0c48603343c09f287978bf051140e9be912) - Customer's session is now revalidated when a previous session is detected on pageload, making sure the customer is still logged in. ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.29
+
+## 6.2.0-canary.28
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+## 6.2.0-canary.21
+
+## 6.2.0-canary.20
+
+## 6.2.0-canary.19
+
+## 6.2.0-canary.18
+
+## 6.2.0-canary.17
+
+## 6.2.0-canary.16
+
+### Patch Changes
+
+- [#1930](https://github.com/graphcommerce-org/graphcommerce/pull/1930) [`c8d023e9e`](https://github.com/graphcommerce-org/graphcommerce/commit/c8d023e9e874131cd9f8fe192b1fca5fe1a26ee3) - Fix the close menu on search and add the option to secondary menu items ([@StefanAngenent](https://github.com/StefanAngenent))
+
+## 6.2.0-canary.15
+
+### Minor Changes
+
+- [#1926](https://github.com/graphcommerce-org/graphcommerce/pull/1926) [`ab8877fdb`](https://github.com/graphcommerce-org/graphcommerce/commit/ab8877fdb6147960ce656d28306d719e92f6de68) - Made the follow order link in the order card & order details a working <Link /> if provided from magento backend. ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 6.2.0-canary.14
+
+## 6.2.0-canary.13
+
+## 6.2.0-canary.12
+
+## 6.2.0-canary.11
+
+## 6.2.0-canary.10
+
+## 6.2.0-canary.9
+
 ## 6.2.0-canary.8
 
 ## 6.2.0-canary.7

package/components/AccountSignInUpForm/AccountSignInUpForm.tsx

@@ -118,7 +118,9 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
                   pattern: { value: emailPattern, message: '' },
                 })}
                 InputProps={{
-                  endAdornment: formState.isSubmitting && <CircularProgress />,
+                  endAdornment: formState.isSubmitting && (
+                    <CircularProgress sx={{ display: 'inline-flex' }} />
+                  ),
                   readOnly: !!customerQuery.data?.customer?.email,
                 }}
               />

package/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -1,3 +1,9 @@
+import {
+  ApolloErrorSnackbar,
+  PasswordElement,
+  PasswordRepeatElement,
+} from '@graphcommerce/ecommerce-ui'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
   Form,
   FormActions,
@@ -7,10 +13,8 @@ import {
   Button,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { TextField } from '@mui/material'
-import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 import {
   ChangePasswordDocument,
   ChangePasswordMutation,
@@ -21,55 +25,61 @@ export function ChangePasswordForm() {
   const form = useFormGqlMutation<
     ChangePasswordMutation,
     ChangePasswordMutationVariables & { confirmPassword?: string }
-  >(ChangePasswordDocument)
-  const { muiRegister, handleSubmit, required, watch, data, formState, error } = form
+  >(ChangePasswordDocument, {}, { errorPolicy: 'all' })
+  const { handleSubmit, required, data, formState, error, control } = form
+  const [remainingError0, authenticationError] = graphqlErrorByCategory({
+    category: 'graphql-authentication',
+    error,
+  })
+  const [remainingError, inputError] = graphqlErrorByCategory({
+    category: 'graphql-input',
+    error: remainingError0,
+  })
+
   const submitHandler = handleSubmit(() => {})
-  const pass = watch('newPassword')
+
+  const showSuccess = !formState.isSubmitting && formState.isSubmitSuccessful && !error?.message
 
   return (
     <Form onSubmit={submitHandler} noValidate>
       <FormRow>
-        <TextField
+        <PasswordElement
+          control={control}
+          name='currentPassword'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.currentPassword}
+          autoComplete='current-password'
           label={<Trans id='Current Password' />}
           required={required.currentPassword}
-          {...muiRegister('currentPassword', { required: required.currentPassword })}
-          helperText={formState.errors.currentPassword?.message}
           disabled={formState.isSubmitting}
+          error={Boolean(authenticationError)}
+          helperText={authenticationError?.message}
         />
       </FormRow>
 
       <FormRow>
-        <TextField
+        <ValidatedPasswordElement
+          control={control}
+          name='newPassword'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.newPassword}
+          autoComplete='new-password'
           label={<Trans id='New password' />}
           required={required.newPassword}
-          {...muiRegister('newPassword', { required: required.newPassword })}
-          helperText={formState.errors.newPassword?.message}
           disabled={formState.isSubmitting}
+          error={Boolean(inputError)}
+          helperText={inputError?.message}
         />
-
-        <TextField
+        <PasswordRepeatElement
+          control={control}
+          name='confirmPassword'
+          passwordFieldName='newPassword'
+          autoComplete='new-password'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.confirmPassword}
           label={<Trans id='Confirm password' />}
           required
-          {...muiRegister('confirmPassword', {
-            required: true,
-            validate: (value) => value === pass || i18n._(/* i18n */ "Passwords don't match"),
-          })}
-          helperText={formState.errors.confirmPassword?.message}
           disabled={formState.isSubmitting}
         />
       </FormRow>
 
-      <ApolloCustomerErrorAlert error={error} />
-
       <FormDivider />
 
       <FormActions>
@@ -84,9 +94,13 @@ export function ChangePasswordForm() {
         </Button>
       </FormActions>
 
-      <MessageSnackbar sticky open={Boolean(formState.isSubmitSuccessful && data)}>
-        <Trans id='Successfully changed password' />
-      </MessageSnackbar>
+      <ApolloErrorSnackbar error={remainingError} />
+
+      {showSuccess && (
+        <MessageSnackbar open={showSuccess} sticky variant='pill'>
+          <Trans id='Successfully changed password' />
+        </MessageSnackbar>
+      )}
     </Form>
   )
 }

package/components/CreateCustomerAddressForm/CreateCustomerAddress.graphql

@@ -1,5 +1,5 @@
 mutation CreateCustomerAddress(
-  $prefix: String!
+  $prefix: String
   $firstname: String!
   $middlename: String
   $lastname: String!
@@ -7,7 +7,7 @@ mutation CreateCustomerAddress(
   $telephone: String!
   $street: String!
   $houseNumber: String!
-  $addition: String
+  $addition: String = ""
   $city: String!
   $postcode: String!
   $region: CustomerAddressRegionInput!

package/components/CreateCustomerAddressForm/CustomerAddress.graphql

@@ -20,4 +20,5 @@ fragment CustomerAddress on CustomerAddress {
 
   vat_id
   default_shipping
+  default_billing
 }

package/components/CustomerFab/CustomerFab.tsx

@@ -8,6 +8,7 @@ import { i18n } from '@lingui/core'
 import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { useCustomerSession, UseCustomerSessionReturn } from '../../hooks'
+import { useCustomerValidateToken } from '../../hooks/useCustomerValidateToken'
 
 type CustomerFabContentProps = {
   icon?: React.ReactNode
@@ -53,6 +54,8 @@ export type CustomerFabProps = Omit<CustomerFabContentProps, 'session'>
 export function CustomerFab(props: CustomerFabProps) {
   const session = useCustomerSession()
 
+  useCustomerValidateToken()
+
   return (
     <NoSsr fallback={<CustomerFabContent {...props} />}>
       <CustomerFabContent session={session} {...props} />

package/components/CustomerMenuFabItem/CustomerMenuFabItem.tsx

@@ -1,6 +1,6 @@
 import { MenuFabSecondaryItem, iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Badge, NoSsr, SxProps, Theme } from '@mui/material'
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { useCustomerSession, UseCustomerSessionReturn } from '../../hooks/useCustomerSession'
 
 type CustomerMenuFabItemProps = {
@@ -10,13 +10,15 @@ type CustomerMenuFabItemProps = {
   guestHref: string
   sx?: SxProps<Theme>
   session?: UseCustomerSessionReturn
+  onClick?: MouseEventHandler<HTMLElement>
 }
 
 function CustomerMenuFabItemContent(props: CustomerMenuFabItemProps) {
-  const { session, icon, children, guestHref, authHref, sx = [] } = props
+  const { session, icon, children, onClick, guestHref, authHref, sx = [] } = props
 
   return (
     <MenuFabSecondaryItem
+      onClick={onClick}
       sx={sx}
       icon={
         <Badge

package/components/OrderDetails/OrderDetails.tsx

@@ -26,7 +26,6 @@ const parts = [
   'totalsRow',
   'totalsDivider',
   'totalsVat',
-  'iconContainer',
   'invoice',
 ] as const
 const { classes } = extendableComponent(componentName, parts)
@@ -85,18 +84,11 @@ const TotalsVat = styled(TotalsRow, { target: classes.totalsVat })(({ theme }) =
     padding: `${theme.spacings.xxs} 0`,
   }),
 )
-const IconContainer = styled(TotalsRow, { target: classes.iconContainer })(({ theme }) =>
-  theme.unstable_sx({
-    marginLeft: '-6px',
-    '& > div': {
-      padding: '4px 0',
-    },
-  }),
-)
 
 const Invoice = styled(TotalsRow, { target: classes.invoice })(({ theme }) =>
   theme.unstable_sx({
     display: 'flex',
+    justifyContent: 'flex-start',
     alignItems: 'center',
     color: 'primary.main',
   }),
@@ -248,9 +240,7 @@ export function OrderDetails(props: OrderDetailsProps) {
               <>
                 <div>{shipments?.[0]?.tracking && shipments?.[0]?.tracking?.[0]?.title}</div>
                 {shipments?.[0]?.tracking?.[0] && (
-                  <IconContainer>
-                    <TrackingLink {...shipments?.[0].tracking?.[0]} />
-                  </IconContainer>
+                  <TrackingLink {...shipments?.[0].tracking?.[0]} sx={{ padding: '4px 0' }} />
                 )}
               </>
             )}
@@ -275,12 +265,10 @@ export function OrderDetails(props: OrderDetailsProps) {
                 <div>{payment_methods[0].name}</div>
 
                 {invoices && invoices?.length > 0 && (
-                  <IconContainer>
-                    <Invoice>
-                      <IconSvg src={iconInvoice} size='small' />
-                      {invoices?.[0]?.number}
-                    </Invoice>
-                  </IconContainer>
+                  <Invoice>
+                    <IconSvg src={iconInvoice} size='small' />
+                    {invoices?.[0]?.number}
+                  </Invoice>
                 )}
               </>
             )}

package/components/ResetPasswordForm/ResetPasswordForm.tsx

@@ -1,14 +1,10 @@
-import {
-  PasswordElement,
-  PasswordRepeatElement,
-  TextFieldElement,
-} from '@graphcommerce/ecommerce-ui'
+import { PasswordRepeatElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { TextField } from '@mui/material'
 import { useRouter } from 'next/router'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 import {
   ResetPasswordDocument,
   ResetPasswordMutation,
@@ -59,11 +55,11 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
         />
       </FormRow>
       <FormRow>
-        <PasswordElement
+        <ValidatedPasswordElement
           control={control}
           name='newPassword'
+          autoComplete='new-password'
           variant='outlined'
-          type='password'
           label={<Trans id='New password' />}
           required
           disabled={formState.isSubmitting}
@@ -71,9 +67,9 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
         <PasswordRepeatElement
           control={control}
           name='confirmPassword'
+          autoComplete='new-password'
           passwordFieldName='newPassword'
           variant='outlined'
-          type='password'
           label={<Trans id='Confirm password' />}
           required
           disabled={formState.isSubmitting}

package/components/SignInForm/SignInForm.tsx

@@ -1,9 +1,18 @@
+import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { useApolloClient } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { Button, FormRow, FormActions } from '@graphcommerce/next-ui'
+import {
+  Button,
+  FormRow,
+  FormActions,
+  iconEyeCrossed,
+  iconEye,
+  IconSvg,
+} from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { Box, FormControl, Link, SxProps, TextField, Theme } from '@mui/material'
+import { Box, FormControl, IconButton, InputAdornment, Link, SxProps, Theme } from '@mui/material'
+import { MouseEvent, useState } from 'react'
 import { CustomerDocument } from '../../hooks'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { SignInDocument } from './SignIn.gql'
@@ -12,7 +21,6 @@ type SignInFormProps = { email: string; sx?: SxProps<Theme> }
 
 export function SignInForm(props: SignInFormProps) {
   const { email, sx } = props
-
   const client = useApolloClient()
   const form = useFormGqlMutation(
     SignInDocument,
@@ -32,7 +40,7 @@ export function SignInForm(props: SignInFormProps) {
     { errorPolicy: 'all' },
   )
 
-  const { muiRegister, handleSubmit, required, formState, error } = form
+  const { handleSubmit, required, formState, error, control } = form
   const [remainingError, authError] = graphqlErrorByCategory({
     category: 'graphql-authentication',
     error,
@@ -41,18 +49,19 @@ export function SignInForm(props: SignInFormProps) {
 
   return (
     <Box component='form' onSubmit={submitHandler} noValidate sx={sx}>
-      <FormRow>
-        <TextField
-          key='password'
+      <FormRow sx={{ gridTemplateColumns: 'none' }}>
+        <PasswordElement
           variant='outlined'
-          type='password'
           error={!!formState.errors.password || !!authError}
+          control={control}
+          name='password'
           label={<Trans id='Password' />}
           autoFocus
           autoComplete='current-password'
           id='current-password'
           required={required.password}
-          {...muiRegister('password', { required: required.password })}
+          disabled={formState.isSubmitting}
+          helperText={!!formState.errors.password || authError?.message}
           InputProps={{
             endAdornment: (
               <Link href='/account/forgot-password' underline='hover' sx={{ whiteSpace: 'nowrap' }}>
@@ -60,8 +69,6 @@ export function SignInForm(props: SignInFormProps) {
               </Link>
             ),
           }}
-          helperText={formState.errors.password?.message || authError?.message}
-          disabled={formState.isSubmitting}
         />
       </FormRow>
 

package/components/SignInForm/SignInFormInline.tsx

@@ -1,7 +1,8 @@
+import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { Button, extendableComponent } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, TextField, Theme } from '@mui/material'
+import { Box, Link, SxProps, Theme } from '@mui/material'
 import { SignInDocument, SignInMutationVariables } from './SignIn.gql'
 
 type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & {
@@ -12,13 +13,13 @@ type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & {
 const { classes } = extendableComponent('SignInFormInline', ['form', 'button'] as const)
 
 export function SignInFormInline(props: InlineSignInFormProps) {
-  const { email, sx = [] } = props
+  const { email, children, sx = [] } = props
   const form = useFormGqlMutation(
     SignInDocument,
     { defaultValues: { email }, onBeforeSubmit: (values) => ({ ...values, email }) },
     { errorPolicy: 'all' },
   )
-  const { muiRegister, handleSubmit, required, formState, error } = form
+  const { handleSubmit, required, formState, control } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -41,35 +42,34 @@ export function SignInFormInline(props: InlineSignInFormProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <TextField
+      <PasswordElement
+        control={control}
         variant='outlined'
-        type='password'
-        error={!!formState.errors.password || !!error?.message}
+        name='password'
         label={<Trans id='Password' />}
         autoFocus
         autoComplete='current-password'
         id='current-password'
         required={required.password}
-        {...muiRegister('password', { required: required.password })}
-        helperText={error?.message}
         disabled={formState.isSubmitting}
         InputProps={{
           endAdornment: (
-            <Button
-              href='/account/forgot-password'
-              color='secondary'
-              variant='text'
-              className={classes.button}
-              sx={{ minWidth: 'max-content' }}
-            >
+            <Link href='/account/forgot-password' underline='hover' sx={{ whiteSpace: 'nowrap' }}>
               <Trans id='Forgot password?' />
-            </Button>
+            </Link>
           ),
         }}
       />
-      <Button type='submit' loading={formState.isSubmitting} color='secondary' variant='pill'>
+      <Button
+        type='submit'
+        loading={formState.isSubmitting}
+        color='secondary'
+        variant='pill'
+        sx={{ alignSelf: 'start', marginTop: (theme) => `calc(${theme.spacings.xxs} * .33)` }}
+      >
         <Trans id='Sign in' />
       </Button>
+      {children}
     </Box>
   )
 }

package/components/SignUpForm/SignUpForm.tsx

@@ -1,15 +1,14 @@
-import { useQuery } from '@graphcommerce/graphql'
+import { PasswordElement, PasswordRepeatElement } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Alert, FormControlLabel, Switch, TextField } from '@mui/material'
+import { Alert, FormControlLabel, Switch } from '@mui/material'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
 import { NameFields } from '../NameFields/NameFields'
 import { SignUpDocument, SignUpMutation, SignUpMutationVariables } from './SignUp.gql'
 import { SignUpConfirmDocument } from './SignUpConfirm.gql'
+import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 
 type SignUpFormProps = { email: string }
 
@@ -18,8 +17,6 @@ const requireEmailValidation = import.meta.graphCommerce.customerRequireEmailCon
 export function SignUpForm(props: SignUpFormProps) {
   const { email } = props
 
-  const storeConfig = useQuery(StoreConfigDocument).data?.storeConfig
-
   const Mutation = requireEmailValidation ? SignUpConfirmDocument : SignUpDocument
 
   const form = useFormGqlMutation<
@@ -31,11 +28,10 @@ export function SignUpForm(props: SignUpFormProps) {
     { errorPolicy: 'all' },
   )
 
-  const { muiRegister, handleSubmit, required, watch, formState, error } = form
+  const { muiRegister, handleSubmit, required, formState, error, control } = form
   const [remainingError, inputError] = graphqlErrorByCategory({ category: 'graphql-input', error })
 
   const submitHandler = handleSubmit(() => {})
-  const watchPassword = watch('password')
 
   useFormPersist({ form, name: 'SignUp', exclude: ['password', 'confirmPassword'] })
 
@@ -50,37 +46,27 @@ export function SignUpForm(props: SignUpFormProps) {
   return (
     <form onSubmit={submitHandler} noValidate>
       <FormRow>
-        <TextField
+        <ValidatedPasswordElement
+          control={control}
+          name='password'
           variant='outlined'
-          type='password'
           error={!!formState.errors.password || !!inputError}
           label={<Trans id='Password' />}
           autoFocus
           autoComplete='new-password'
           required={required.password}
-          {...muiRegister('password', {
-            required: required.password,
-            minLength: {
-              value: Number(storeConfig?.minimum_password_length ?? 8),
-              message: i18n._(/* i18n */ 'Password must have at least 8 characters'),
-            },
-          })}
-          helperText={formState.errors.password?.message || inputError?.message}
           disabled={formState.isSubmitting}
+          helperText={inputError?.message}
         />
-        <TextField
+        <PasswordRepeatElement
+          control={control}
+          name='confirmPassword'
+          passwordFieldName='password'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.confirmPassword}
+          error={!!formState.errors.confirmPassword || !!inputError}
           label={<Trans id='Confirm password' />}
           autoComplete='new-password'
           required
-          {...muiRegister('confirmPassword', {
-            required: true,
-            validate: (value) =>
-              value === watchPassword || i18n._(/* i18n */ "Passwords don't match"),
-          })}
-          helperText={formState.errors.confirmPassword?.message}
           disabled={formState.isSubmitting}
         />
       </FormRow>

package/components/SignUpForm/SignUpFormInline.tsx

@@ -1,13 +1,17 @@
-import { useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import {
+  ApolloErrorAlert,
+  PasswordElement,
+  PasswordRepeatElement,
+} from '@graphcommerce/ecommerce-ui'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Alert, Box, TextField } from '@mui/material'
+import { Alert, Box } from '@mui/material'
 import React from 'react'
 import { SignUpMutationVariables, SignUpMutation, SignUpDocument } from './SignUp.gql'
 import { SignUpConfirmDocument } from './SignUpConfirm.gql'
+import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 
 type SignUpFormInlineProps = Pick<SignUpMutationVariables, 'email'> & {
   children?: React.ReactNode
@@ -25,37 +29,35 @@ const { classes } = extendableComponent('SignUpFormInline', [
 
 const requireEmailValidation = import.meta.graphCommerce.customerRequireEmailConfirmation ?? false
 
-export function SignUpFormInline({
-  email,
-  children,
-  firstname,
-  lastname,
-  onSubmitted = () => {},
-}: SignUpFormInlineProps) {
+export function SignUpFormInline(props: SignUpFormInlineProps) {
+  const { email, children, firstname, lastname, onSubmitted = () => {} } = props
   const Mutation = requireEmailValidation ? SignUpConfirmDocument : SignUpDocument
 
   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 }),
-  })
-
-  const { muiRegister, watch, handleSubmit, required, formState, error } = form
-  const submitHandler = handleSubmit(onSubmitted)
-  const watchPassword = watch('password')
-
-  const minPasswordLength = Number(
-    useQuery(StoreConfigDocument).data?.storeConfig?.minimum_password_length ?? 8,
+    { errorPolicy: 'all' },
   )
 
+  const { handleSubmit, formState, control, error, required } = form
+  const [remainingError, inputError] = graphqlErrorByCategory({ category: 'graphql-input', error })
+  const submitHandler = handleSubmit(() => {})
+
   if (requireEmailValidation && form.formState.isSubmitSuccessful) {
     return (
       <Alert>
@@ -66,43 +68,31 @@ export function SignUpFormInline({
 
   return (
     <Form onSubmit={submitHandler} noValidate className={classes.form} sx={{ padding: 0 }}>
-      <FormRow key='inline-signup' className={classes.row} sx={{ padding: 0 }}>
-        <TextField
+      <FormRow className={classes.row} sx={{ padding: 0 }}>
+        <ValidatedPasswordElement
+          control={control}
+          name='password'
+          autoComplete='new-password'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.password || !!error?.message}
           label={<Trans id='Password' />}
-          autoFocus
-          autoComplete='new-password'
-          id='new-password'
           required={required.password}
-          {...muiRegister('password', {
-            required: required.password,
-            minLength: {
-              value: minPasswordLength,
-              message: i18n._(/* i18n */ 'Password must have at least 8 characters'),
-            },
-          })}
-          helperText={error?.message}
           disabled={formState.isSubmitting}
+          error={!!inputError}
+          helperText={inputError?.message}
         />
-        <TextField
+        <PasswordRepeatElement
+          control={control}
+          name='confirmPassword'
+          passwordFieldName='password'
+          autoComplete='new-password'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.confirmPassword || !!error?.message}
           label={<Trans id='Confirm password' />}
-          autoComplete='new-password'
           required
-          {...muiRegister('confirmPassword', {
-            required: true,
-            validate: (value) => value === watchPassword,
-          })}
-          helperText={!!formState.errors.confirmPassword && <Trans id='Passwords should match' />}
           disabled={formState.isSubmitting}
         />
       </FormRow>
 
-      <FormRow key='signup-submit'>
+      <FormRow>
         <FormRow
           className={classes.buttonFormRow}
           sx={(theme) => ({
@@ -126,6 +116,7 @@ export function SignUpFormInline({
           </Box>
         </FormRow>
       </FormRow>
+      <ApolloErrorAlert error={remainingError} />
     </Form>
   )
 }

package/components/TrackingLink/TrackingLink.tsx

@@ -1,7 +1,6 @@
 import { IconSvg, iconLocation } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, Theme } from '@mui/material'
-import React from 'react'
+import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import { TrackingLinkFragment } from './TrackingLink.gql'
 
 export type TrackingLinkProps = TrackingLinkFragment & { sx?: SxProps<Theme> }
@@ -9,6 +8,8 @@ export type TrackingLinkProps = TrackingLinkFragment & { sx?: SxProps<Theme> }
 export function TrackingLink(props: TrackingLinkProps) {
   const { number, sx = [] } = props
 
+  const validUrl = number?.startsWith('http://') || number?.startsWith('https://')
+
   return (
     <Box
       className='TrackingLink-root'
@@ -21,12 +22,20 @@ export function TrackingLink(props: TrackingLinkProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      {number && (
-        <>
+      {number && validUrl && (
+        <Link
+          onClick={(e) => e.stopPropagation()}
+          href={number}
+          target='_blank'
+          underline='hover'
+          sx={{ display: 'inline-flex', alignItems: 'center' }}
+        >
           <IconSvg src={iconLocation} size='small' />
           <Trans id='Follow order' />
-        </>
+        </Link>
       )}
+
+      {number && !validUrl && <Typography>{number}</Typography>}
     </Box>
   )
 }

package/components/UpdateCustomerEmailForm/UpdateCustomerEmailForm.tsx

@@ -1,3 +1,4 @@
+import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import {
   Button,
   Form,
@@ -16,6 +17,8 @@ import {
   UpdateCustomerEmailMutation,
   UpdateCustomerEmailMutationVariables,
 } from './UpdateCustomerEmail.gql'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError'
 
 type UpdateCustomerEmailFormProps = {
   email: string
@@ -26,13 +29,20 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
 
   const form = useFormGqlMutation<
     UpdateCustomerEmailMutation,
-    UpdateCustomerEmailMutationVariables & {
-      currentEmail?: string
-      confirmEmail?: string
-    }
-  >(UpdateCustomerEmailDocument)
+    UpdateCustomerEmailMutationVariables & { currentEmail?: string; confirmEmail?: string }
+  >(
+    UpdateCustomerEmailDocument,
+    {},
+    {
+      errorPolicy: 'all',
+    },
+  )
 
-  const { handleSubmit, error, required, formState, watch, muiRegister, reset } = form
+  const { handleSubmit, error, required, formState, watch, muiRegister, reset, control } = form
+  const [remainingError, authenticationError] = graphqlErrorByCategory({
+    category: 'graphql-authentication',
+    error,
+  })
   const submit = handleSubmit(() => {
     reset()
   })
@@ -45,7 +55,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           key='current-email'
           variant='outlined'
           type='text'
-          autoComplete='currentEmail'
+          autoComplete='email'
           autoFocus
           error={formState.isSubmitted && !!formState.errors.currentEmail}
           helperText={formState.isSubmitted && formState.errors.currentEmail?.message}
@@ -67,8 +77,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           key='email'
           variant='outlined'
           type='text'
-          autoComplete='email'
-          autoFocus
+          autoComplete='off'
           error={formState.isSubmitted && !!formState.errors.email}
           helperText={formState.isSubmitted && formState.errors.email?.message}
           label={<Trans id='New email' />}
@@ -82,8 +91,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           key='confirm-email'
           variant='outlined'
           type='text'
-          autoComplete='confirmEmail'
-          autoFocus
+          autoComplete='off'
           error={formState.isSubmitted && !!formState.errors.confirmEmail}
           helperText={formState.isSubmitted && formState.errors.confirmEmail?.message}
           label={<Trans id='Confirm new email' />}
@@ -96,21 +104,21 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
       </FormRow>
 
       <FormRow>
-        <TextField
+        <PasswordElement
+          control={control}
           variant='outlined'
-          type='password'
-          error={!!formState.errors.password}
+          name='password'
           label={<Trans id='Password' />}
-          autoComplete='password'
+          autoComplete='current-password'
           required={required.password}
-          {...muiRegister('password', {
-            required: required.password,
-          })}
-          helperText={formState.errors.password?.message}
           disabled={formState.isSubmitting}
+          error={Boolean(authenticationError)}
+          helperText={authenticationError?.message}
         />
       </FormRow>
 
+      <ApolloCustomerErrorSnackbar error={remainingError} />
+
       <FormDivider />
       <FormActions>
         <Button
@@ -123,7 +131,6 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           <Trans id='Save changes' />
         </Button>
       </FormActions>
-      <ApolloCustomerErrorAlert error={error} />
 
       <MessageSnackbar sticky open={formState.isSubmitSuccessful && !error}>
         <Trans id='Successfully updated email' />

package/components/ValidatedPasswordElement/ValidatedPasswordElement.tsx

@@ -0,0 +1,47 @@
+import { PasswordElement, PasswordElementProps } from '@graphcommerce/ecommerce-ui'
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { FieldValues } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+
+export type ValidatedPasswordElementProps<T extends FieldValues> = PasswordElementProps<T>
+
+export function ValidatedPasswordElement<TFieldValues extends FieldValues>(
+  props: PasswordElementProps<TFieldValues>,
+): JSX.Element {
+  const { ...textFieldProps } = props
+
+  const storeConfig = useQuery(StoreConfigDocument).data?.storeConfig
+  const minPasswordLength = Number(storeConfig?.minimum_password_length) ?? 0
+  const passwordMinCharacterSets = Number(storeConfig?.required_character_classes_number) ?? 0
+
+  const validation: NonNullable<PasswordElementProps<TFieldValues>['validation']> = {}
+
+  validation.minLength = {
+    value: minPasswordLength,
+    message: i18n._(/* i18n */ 'Password must have at least {minPasswordLength} characters', {
+      minPasswordLength,
+    }),
+  }
+
+  validation.validate = (value: string) => {
+    const pass = value.trim()
+    let counter = 0
+
+    if (pass.match(/\d+/)) counter++
+    if (pass.match(/[a-z]+/)) counter++
+    if (pass.match(/[A-Z]+/)) counter++
+    if (pass.match(/[^a-zA-Z0-9]+/)) counter++
+
+    if (counter < passwordMinCharacterSets) {
+      return i18n._(
+        /* i18n */ 'Minimum of different classes of characters in password is {passwordMinCharacterSets}. Classes of characters: Lower Case, Upper Case, Digits, Special Characters.',
+        { passwordMinCharacterSets },
+      )
+    }
+
+    return true
+  }
+
+  return <PasswordElement {...textFieldProps} validation={validation} />
+}

package/hooks/CustomerInfo.graphql

@@ -2,6 +2,7 @@ fragment CustomerInfo on Customer {
   default_billing
   default_shipping
   addresses {
+    default_billing
     ...CustomerAddress
   }
   email

package/hooks/UseCustomerValidateToken.graphql

@@ -0,0 +1,5 @@
+query UseCustomerValidateToken {
+  customer {
+    email
+  }
+}

package/hooks/useCustomerValidateToken.ts

@@ -0,0 +1,23 @@
+import { useApolloClient } from '@graphcommerce/graphql'
+import { ErrorCategory } from '@graphcommerce/magento-graphql'
+import { useRouter } from 'next/router'
+import { UseCustomerValidateTokenDocument } from './UseCustomerValidateToken.gql'
+import { useCustomerQuery } from './useCustomerQuery'
+
+/** Validates the current customer token. This hook is supposed to be called only once. */
+export function useCustomerValidateToken() {
+  const client = useApolloClient()
+  const router = useRouter()
+
+  useCustomerQuery(UseCustomerValidateTokenDocument, {
+    initialFetchPolicy: 'network-only',
+    onError: async ({ graphQLErrors }) => {
+      const category: ErrorCategory = 'graphql-authorization'
+      // If there is no authorization error, do nothing.
+      if (!graphQLErrors.some((e) => e.extensions?.category === category)) return
+
+      await client.clearStore()
+      router.reload()
+    },
+  })
+}

package/link/createCustomerTokenLink.ts

@@ -1,7 +1,5 @@
-import { NormalizedCacheObject } from '@graphcommerce/graphql'
-import { ApolloLink, ApolloCache, setContext } from '@graphcommerce/graphql/apollo'
+import { setContext } from '@graphcommerce/graphql/apollo'
 import { CustomerTokenDocument } from '../hooks'
-import { onAuthorizationError } from './onAuthenticationError'
 
 export const addTokenHeader = setContext((_, context) => {
   if (!context.headers) context.headers = {}
@@ -17,7 +15,4 @@ export const addTokenHeader = setContext((_, context) => {
   }
 })
 
-export const customerTokenLink = ApolloLink.from([addTokenHeader, onAuthorizationError])
-
-/** Not really required anymore, you can use customerTokenLink directly */
-export const createCustomerTokenLink = (_: ApolloCache<NormalizedCacheObject>) => customerTokenLink
+export const customerTokenLink = addTokenHeader

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.8",
+  "version": "6.2.0-canary.80",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,24 +12,25 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.8"
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.80",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.80",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.80"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.2.0-canary.8",
-    "@graphcommerce/framer-utils": "6.2.0-canary.8",
-    "@graphcommerce/graphql": "6.2.0-canary.8",
-    "@graphcommerce/graphql-mesh": "6.2.0-canary.8",
-    "@graphcommerce/image": "6.2.0-canary.8",
-    "@graphcommerce/magento-graphql": "6.2.0-canary.8",
-    "@graphcommerce/magento-store": "6.2.0-canary.8",
-    "@graphcommerce/next-ui": "6.2.0-canary.8",
-    "@graphcommerce/react-hook-form": "6.2.0-canary.8"
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.80",
+    "@graphcommerce/framer-utils": "6.2.0-canary.80",
+    "@graphcommerce/graphql": "6.2.0-canary.80",
+    "@graphcommerce/graphql-mesh": "6.2.0-canary.80",
+    "@graphcommerce/image": "6.2.0-canary.80",
+    "@graphcommerce/magento-graphql": "6.2.0-canary.80",
+    "@graphcommerce/magento-store": "6.2.0-canary.80",
+    "@graphcommerce/next-ui": "6.2.0-canary.80",
+    "@graphcommerce/react-hook-form": "6.2.0-canary.80"
   },
   "peerDependencies": {
-    "@lingui/react": "^3.13.2",
-    "@lingui/core": "^3.13.2",
+    "@lingui/react": "^4.2.1",
+    "@lingui/core": "^4.2.1",
+    "@lingui/macro": "^4.2.1",
     "@mui/material": "^5.10.16",
     "framer-motion": "^10.0.0",
     "graphql": "^16.0.0",

package/link/onAuthenticationError.ts

@@ -1,39 +0,0 @@
-import { InMemoryCache } from '@graphcommerce/graphql'
-import { onError } from '@graphcommerce/graphql/apollo'
-import { CustomerTokenDocument } from '../hooks/CustomerToken.gql'
-
-function invalidateToken(cache: InMemoryCache) {
-  const res = cache.readQuery({
-    query: CustomerTokenDocument,
-  })
-
-  if (res?.customerToken?.valid) {
-    // Write arbitrary old token to document
-    cache.writeQuery({
-      query: CustomerTokenDocument,
-      data: {
-        customerToken: {
-          ...res.customerToken,
-          token: null,
-          createdAt: new Date('2000').toUTCString(),
-          valid: false,
-        },
-      },
-      broadcast: true,
-    })
-  }
-}
-
-export const onAuthorizationError = onError(({ graphQLErrors, operation }) => {
-  const { cache } = operation.getContext()
-  if (graphQLErrors) {
-    for (const err of graphQLErrors) {
-      const isCustomerError = err.path?.join('.').toLowerCase().includes('customer')
-      if (err.extensions?.category === 'graphql-authorization' && isCustomerError) {
-        // Modify the operation context with a new token
-        invalidateToken(cache as InMemoryCache)
-        break
-      }
-    }
-  }
-})