@graphcommerce/magento-customer 7.0.0-canary.13 → 7.0.0

package/components/SignInForm/SignInForm.tsx

@@ -1,9 +1,10 @@
+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 { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { Box, FormControl, Link, SxProps, TextField, Theme } from '@mui/material'
+import { Box, FormControl, Link, SxProps, Theme } from '@mui/material'
 import { CustomerDocument } from '../../hooks'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { SignInDocument } from './SignIn.gql'
@@ -12,7 +13,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 +32,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 +41,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 +61,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,13 +1,13 @@
-import { useQuery } from '@graphcommerce/graphql'
+import { 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'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { Alert, FormControlLabel, Switch } from '@mui/material'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
 import { NameFields } from '../NameFields/NameFields'
+import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 import { SignUpDocument, SignUpMutation, SignUpMutationVariables } from './SignUp.gql'
 import { SignUpConfirmDocument } from './SignUpConfirm.gql'
 
@@ -18,8 +18,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 +29,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 +47,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,11 +1,11 @@
-import { useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { ApolloErrorAlert, 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 { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 import { SignUpMutationVariables, SignUpMutation, SignUpDocument } from './SignUp.gql'
 import { SignUpConfirmDocument } from './SignUpConfirm.gql'
 
@@ -25,37 +25,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 +64,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 +112,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,5 @@
+import { PasswordElement } from '@graphcommerce/ecommerce-ui'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
   Button,
   Form,
@@ -9,8 +11,9 @@ import {
 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 { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError'
 import {
   UpdateCustomerEmailDocument,
   UpdateCustomerEmailMutation,
@@ -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/UpdateDefaultAddressForm/UpdateDefaultAddressForm.tsx

@@ -1,5 +1,6 @@
 import { Controller, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { FormControl, FormControlLabel, FormHelperText, Switch } from '@mui/material'
 import React, { useEffect, useMemo } from 'react'
 import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'

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