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

package/CHANGELOG.md

@@ -1,8 +1,242 @@
 # Change Log
 
-## 7.0.0-canary.13
+## 7.0.0
 
-## 7.0.0-canary.12
+### 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))
+
+- [#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))
+
+### Patch Changes
+
+- [#1916](https://github.com/graphcommerce-org/graphcommerce/pull/1916) [`97ebc19af`](https://github.com/graphcommerce-org/graphcommerce/commit/97ebc19aff093bf57d24d009e96661ad43926fd6) - The customer's token would be invalidated if any authorization error occured. Now only scoped to customer queries and mutations, potentially reducing the amount of random logouts. ([@paales](https://github.com/paales))
+
+- [#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))
+
+- [#1914](https://github.com/graphcommerce-org/graphcommerce/pull/1914) [`38d6c4888`](https://github.com/graphcommerce-org/graphcommerce/commit/38d6c488850013b36cae9f388996039219c1327e) - Errors in the cart didn't allow for recovery from the faulty state ([@paales](https://github.com/paales))
+
+- [#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))
+
+- [#2006](https://github.com/graphcommerce-org/graphcommerce/pull/2006) [`80b60cb40`](https://github.com/graphcommerce-org/graphcommerce/commit/80b60cb404882260bd0e8184f3e54f4720925c96) - The Billing address was set to the shipping address when a default billing address was available and made prefix optional when creating an address ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#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))
+
+- [#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))
+
+- [#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))
+
+- [#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.98
+
+## 6.2.0-canary.97
+
+## 6.2.0-canary.96
+
+## 6.2.0-canary.95
+
+## 6.2.0-canary.94
+
+## 6.2.0-canary.93
+
+## 6.2.0-canary.92
+
+## 6.2.0-canary.91
+
+## 6.2.0-canary.90
+
+## 6.2.0-canary.89
+
+## 6.2.0-canary.88
+
+## 6.2.0-canary.87
+
+## 6.2.0-canary.86
+
+## 6.2.0-canary.85
+
+## 6.2.0-canary.84
+
+## 6.2.0-canary.83
+
+## 6.2.0-canary.82
+
+## 6.2.0-canary.81
+
+## 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
 

package/components/AccountSignInUpForm/AccountSignInUpForm.tsx

@@ -8,6 +8,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { emailPattern } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, CircularProgress, Link, SxProps, TextField, Theme, Typography } from '@mui/material'
 import router from 'next/router'
 import { CustomerDocument, useFormIsEmailAvailable } from '../../hooks'
@@ -118,7 +119,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/AddressFields/AddressFields.tsx

@@ -21,8 +21,8 @@ export type AddressFieldValues = {
   city?: string
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AddressFieldsProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   form: UseFormReturn<any>
   readOnly?: boolean
   countryFirst?: boolean

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -1,7 +1,6 @@
 import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
 import { Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Link } from '@mui/material'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
 

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, 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/CreateCustomerAddressForm.tsx

@@ -12,6 +12,7 @@ import {
 import { phonePattern, 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 { useRouter } from 'next/router'
 import { AddressFields } from '../AddressFields/AddressFields'
@@ -43,7 +44,7 @@ export function CreateCustomerAddressForm() {
             {},
         }
       },
-      onComplete: (e) => {
+      onComplete: () => {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         router.push(`/account/addresses`)
       },

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/EditAddressForm/EditAddressForm.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
@@ -12,6 +13,7 @@ import {
 import { phonePattern, 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 { SxProps, TextField, Theme } from '@mui/material'
 import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
 import { AddressFields } from '../AddressFields/AddressFields'

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -2,6 +2,7 @@ import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { TextField, Alert, SxProps, Theme } from '@mui/material'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import {

package/components/NameFields/NameFields.tsx

@@ -3,6 +3,7 @@ import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import { assertFormGqlOperation, Controller, UseFormReturn } 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 { MenuItem, TextField } from '@mui/material'
 import React from 'react'
 
@@ -28,7 +29,7 @@ export function NameFields(props: NameFieldProps) {
   const { prefix, form, readOnly, prefixes = [mr, mrs, other] } = props
   assertFormGqlOperation<NameFieldValues>(form)
 
-  const { control, formState, muiRegister, required, valid } = form
+  const { control, required, valid } = form
 
   return (
     <>

package/components/OrderCard/OrderCard.tsx

@@ -1,12 +1,12 @@
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent, NextLink, useDateTimeFormat } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
 import { Box, styled, SxProps, Theme, Skeleton, ListItemButton } from '@mui/material'
 import { UseOrderCardItemImages } from '../../hooks/useOrderCardItemImages'
 import { OrderCardItemImage } from '../OrderCardItemImage/OrderCardItemImage'
 import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
 import { TrackingLink } from '../TrackingLink/TrackingLink'
 import { OrderCardFragment } from './OrderCard.gql'
-import { Trans } from '@lingui/react'
 
 type OrderCardProps = Partial<OrderCardFragment> & {
   loading?: boolean

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/SessionDebugger/SessionDebugger.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable no-console */
 import { useApolloClient } from '@graphcommerce/graphql'
-import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
 import { Button } from '@mui/material'
+import { CustomerTokenDocument } from '../../hooks/CustomerToken.gql'
 
 export function SessionDebugger() {
   const client = useApolloClient()