@graphcommerce/magento-customer 9.1.0-canary.54 → 10.0.0-canary.56

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # Change Log
 
+## 10.0.0-canary.56
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.55
+
+### Patch Changes
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`427833d`](https://github.com/graphcommerce-org/graphcommerce/commit/427833d3fa46ec6096853bdc3dfd81321df6e63b) - Forward address field props ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`183d8dd`](https://github.com/graphcommerce-org/graphcommerce/commit/183d8ddef6059f07ffe585b0f05a51731b12b371) - Remove odd nonNullable that is also available in @graphcommmerce/next-ui ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.54
 
 ## 9.1.0-canary.53

package/components/AccountAddress/AccountAddress.tsx

@@ -1,5 +1,5 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
 import { AddressMultiLine } from '../AddressMultiLine/AddressMultiLine'
@@ -46,7 +46,7 @@ export function AccountAddress(props: AccountAddressProps) {
         }}
       >
         <Link href={`/account/addresses/edit?addressId=${id}`} color='primary' underline='hover'>
-          <Trans id='Edit' />
+          <Trans>Edit</Trans>
         </Link>
         <DeleteCustomerAddressForm addressId={id ?? undefined} />
       </Box>

package/components/AccountAddresses/AccountAddresses.tsx

@@ -6,7 +6,7 @@ import {
   IconSvg,
   SectionContainer,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Button, Skeleton } from '@mui/material'
 import { AccountAddress } from '../AccountAddress/AccountAddress'
@@ -29,7 +29,7 @@ export function AccountAddresses(props: AccountAddressesProps) {
   if (loading) {
     return (
       <SectionContainer
-        labelLeft={<Trans id='Shipping addresses' />}
+        labelLeft={<Trans>Shipping addresses</Trans>}
         sx={sx}
         className={classes.root}
       >
@@ -53,7 +53,7 @@ export function AccountAddresses(props: AccountAddressesProps) {
             margin: `${theme.spacings.md} auto`,
           })}
         >
-          <Trans id='Add new address' />
+          <Trans>Add new address</Trans>
         </Button>
       </SectionContainer>
     )
@@ -63,18 +63,18 @@ export function AccountAddresses(props: AccountAddressesProps) {
     <>
       {addresses.length === 0 && (
         <FullPageMessage
-          title={<Trans id='You have no addresses saved yet' />}
+          title={<Trans>You have no addresses saved yet</Trans>}
           icon={<IconSvg src={iconHome} size='xxl' />}
           button={
             <Button href='/account/addresses/add' size='large' variant='pill' color='primary'>
-              <Trans id='Add new address' />
+              <Trans>Add new address</Trans>
             </Button>
           }
         />
       )}
 
       {addresses.length >= 1 && (
-        <SectionContainer labelLeft={<Trans id='Shipping addresses' />}>
+        <SectionContainer labelLeft={<Trans>Shipping addresses</Trans>}>
           <Box
             className={classes.addresses}
             sx={(theme) => ({ '& > div': { borderBottom: `1px solid ${theme.palette.divider}` } })}
@@ -96,7 +96,7 @@ export function AccountAddresses(props: AccountAddressesProps) {
               margin: `${theme.spacings.md} auto`,
             })}
           >
-            <Trans id='Add new address' />
+            <Trans>Add new address</Trans>
           </Button>
         </SectionContainer>
       )}

package/components/AccountDeleteForm/AccountDeleteForm.tsx

@@ -2,7 +2,8 @@ import { CheckboxElement, EmailElement } from '@graphcommerce/ecommerce-ui'
 import { useApolloClient, useMutation } from '@graphcommerce/graphql'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useForm } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
+import { t } from '@lingui/core/macro'
 import { Box, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import { CustomerDocument, CustomerTokenDocument, useCustomerQuery } from '../../hooks'

package/components/AccountSignInUpForm/AccountSignInUpForm.tsx

@@ -1,5 +1,6 @@
 import { ActionCardListForm, EmailElement, FormAutoSubmit } from '@graphcommerce/ecommerce-ui'
 import { useApolloClient } from '@graphcommerce/graphql'
+import { enableGuestCheckoutLogin } from '@graphcommerce/next-config/config'
 import {
   ActionCard,
   Button,
@@ -9,7 +10,7 @@ import {
   FormRow,
   LayoutTitle,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Alert, Box, CircularProgress, Link, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -48,7 +49,7 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
   const client = useApolloClient()
 
   const canSignUp = useCustomerAccountCanSignUp()
-  const isToggleMethod = !import.meta.graphCommerce.enableGuestCheckoutLogin || !canSignUp
+  const isToggleMethod = !enableGuestCheckoutLogin || !canSignUp
 
   const showEmail =
     mode === 'email' ||
@@ -67,10 +68,10 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
         {mode === 'email' && (
           <>
             <LayoutTitle variant='h2' gutterBottom={false}>
-              <Trans id='Sign in or create an account!' />
+              <Trans>Sign in or create an account!</Trans>
             </LayoutTitle>
             <Typography variant='h6' align='center'>
-              <Trans id='Fill in your e-mail to login or create an account' />
+              <Trans>Fill in your e-mail to login or create an account</Trans>
             </Typography>
           </>
         )}
@@ -78,10 +79,10 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
         {(mode === 'signin' || (mode === 'signup' && !canSignUp)) && (
           <>
             <LayoutTitle variant='h2' gutterBottom={false}>
-              <Trans id='Sign in' />
+              <Trans>Sign in</Trans>
             </LayoutTitle>
             <Typography variant='h6' align='center'>
-              <Trans id='Fill in your password' />
+              <Trans>Fill in your password</Trans>
             </Typography>
           </>
         )}
@@ -89,10 +90,10 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
         {mode === 'signup' && canSignUp && (
           <>
             <LayoutTitle variant='h2' gutterBottom={false}>
-              <Trans id='Create account!' />
+              <Trans>Create account!</Trans>
             </LayoutTitle>
             <Typography variant='h6' align='center'>
-              <Trans id='Create a password and tell us your name' />
+              <Trans>Create a password and tell us your name</Trans>
             </Typography>
           </>
         )}
@@ -100,17 +101,17 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
         {mode === 'signedin' && (
           <>
             <LayoutTitle variant='h2' gutterBottom={false}>
-              <Trans id='Hi {firstname}! You’re now logged in!' values={{ firstname }} />
+              <Trans>Hi {firstname}! You’re now logged in!</Trans>
             </LayoutTitle>
             <Typography variant='h6' align='center'>
               <Link href='/account' underline='hover' color='secondary'>
-                <Trans id='View your account' />
+                <Trans>View your account</Trans>
               </Link>
             </Typography>
 
             <FormActions>
               <Button onClick={() => router.back()} variant='pill' color='secondary' size='large'>
-                <Trans id='Continue shopping' />
+                <Trans>Continue shopping</Trans>
               </Button>
             </FormActions>
           </>
@@ -119,10 +120,10 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
         {mode === 'session-expired' && (
           <>
             <LayoutTitle variant='h2' gutterBottom={false}>
-              <Trans id='Your session is expired' />
+              <Trans>Your session is expired</Trans>
             </LayoutTitle>
             <Typography variant='h6' align='center'>
-              <Trans id='Log in to continue shopping' />
+              <Trans>Log in to continue shopping</Trans>
             </Typography>
           </>
         )}
@@ -146,8 +147,8 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
               },
             })}
             items={[
-              { value: 'signin', title: <Trans id='Sign in' /> },
-              { value: 'signup', title: <Trans id='Create Account' /> },
+              { value: 'signin', title: <Trans>Sign in</Trans> },
+              { value: 'signup', title: <Trans>Create Account</Trans> },
             ]}
           />
         </FormRow>
@@ -177,7 +178,7 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
                           form.resetField('email')
                         }}
                       >
-                        <Trans id='Sign out' />
+                        <Trans>Sign out</Trans>
                       </Button>
                     ) : (
                       formState.isSubmitting && <CircularProgress sx={{ display: 'inline-flex' }} />
@@ -200,7 +201,7 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
                   color='primary'
                   size='large'
                 >
-                  <Trans id='Continue' />
+                  <Trans>Continue</Trans>
                 </Button>
               </FormActions>
             </Box>
@@ -223,7 +224,7 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
         <Box>
           {signUpDisabled || (
             <Alert severity='success'>
-              <Trans id='Sign up is disabled, please contact us for more information.' />
+              <Trans>Sign up is disabled, please contact us for more information.</Trans>
             </Alert>
           )}
         </Box>

package/components/AddressFields/AddressAddition.tsx

@@ -1,6 +1,6 @@
 import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { AddressFieldsOptions } from './useAddressFieldsForm'
 import { useAddressFieldsForm } from './useAddressFieldsForm'
 
@@ -13,12 +13,13 @@ export function AddressAddition<
 
   return (
     <TextFieldElement
+      {...props}
       control={control}
       name={name.addition}
       variant='outlined'
       type='text'
       required={required[name.addition]}
-      label={<Trans id='Addition' />}
+      label={<Trans>Addition</Trans>}
       autoComplete='address-line3'
       showValid
       InputProps={{ readOnly }}

package/components/AddressFields/AddressCity.tsx

@@ -1,6 +1,6 @@
 import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { AddressFieldsOptions } from './useAddressFieldsForm'
 import { useAddressFieldsForm } from './useAddressFieldsForm'
 
@@ -13,12 +13,13 @@ export function AddressCity<
 
   return (
     <TextFieldElement
+      {...props}
       control={control}
       name={name.city}
       variant='outlined'
       type='text'
       required={required[name.city]}
-      label={<Trans id='City' />}
+      label={<Trans>City</Trans>}
       showValid
       InputProps={{ readOnly }}
     />

package/components/AddressFields/AddressCountryRegion.tsx

@@ -3,7 +3,7 @@ import { SelectElement, TextFieldElement, useWatch } from '@graphcommerce/ecomme
 import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys, FormRow } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { useMemo } from 'react'
 import type { AddressFieldsOptions } from './useAddressFieldsForm'
 import { useAddressFieldsForm } from './useAddressFieldsForm'
@@ -52,7 +52,7 @@ export function AddressCountryRegionBase(props: AddressFieldsOptions) {
     return (
       <FormRow>
         <TextFieldElement
-          label={<Trans id='Country' />}
+          label={<Trans>Country</Trans>}
           control={control}
           required={required[name.countryCode]}
           name={name.countryCode}
@@ -70,7 +70,7 @@ export function AddressCountryRegionBase(props: AddressFieldsOptions) {
         name={name.countryCode}
         SelectProps={{ autoWidth: true }}
         variant='outlined'
-        label={<Trans id='Country' />}
+        label={<Trans>Country</Trans>}
         required={required[name.countryCode]}
         showValid
         InputProps={{ readOnly }}
@@ -85,7 +85,7 @@ export function AddressCountryRegionBase(props: AddressFieldsOptions) {
           control={control}
           name={name.regionId}
           variant='outlined'
-          label={<Trans id='Region' />}
+          label={<Trans>Region</Trans>}
           required
           showValid
           InputProps={{ readOnly }}

package/components/AddressFields/AddressHouseNumber.tsx

@@ -1,7 +1,7 @@
 import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
 import { houseNumberPattern, TextFieldElement } from '@graphcommerce/ecommerce-ui'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import type { AddressFieldsOptions } from './useAddressFieldsForm'
 import { useAddressFieldsForm } from './useAddressFieldsForm'
 
@@ -13,18 +13,19 @@ export function AddressHousenumber<
   const { control, name, readOnly, required } = form
   return (
     <TextFieldElement
+      {...props}
       control={control}
       name={name.houseNumber}
       required={required[name.houseNumber]}
       rules={{
         pattern: {
           value: houseNumberPattern,
-          message: i18n._(/* i18n */ 'Please provide a valid house number'),
+          message: t`Please provide a valid house number`,
         },
       }}
       variant='outlined'
       type='text'
-      label={<Trans id='Housenumber' />}
+      label={<Trans>Housenumber</Trans>}
       autoComplete='address-line2'
       showValid
       InputProps={{ readOnly }}

package/components/AddressFields/AddressPostcode.tsx

@@ -1,6 +1,6 @@
 import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { AddressFieldsOptions } from './useAddressFieldsForm'
 import { useAddressFieldsForm } from './useAddressFieldsForm'
 
@@ -13,6 +13,7 @@ export function AddressPostcode<
 
   return (
     <TextFieldElement
+      {...props}
       control={control}
       name={name.postcode}
       variant='outlined'

package/components/AddressFields/AddressStreet.tsx

@@ -1,6 +1,6 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import type { FieldPath, FieldValues } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { AddressFieldsOptions } from './useAddressFieldsForm'
 import { useAddressFieldsForm } from './useAddressFieldsForm'
 
@@ -12,12 +12,13 @@ export function AddressStreet<
   const { control, name, readOnly, required } = form
   return (
     <TextFieldElement
+      {...props}
       variant='outlined'
       control={control}
       required={required[name.street]}
       name={name.street}
       type='text'
-      label={<Trans id='Street' />}
+      label={<Trans>Street</Trans>}
       autoComplete='address-line1'
       showValid
       InputProps={{ readOnly }}

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -1,7 +1,7 @@
 import type { ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
 import { ApolloErrorAlert } from '@graphcommerce/ecommerce-ui'
 import { Button } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
 
 export type ApolloCustomerErrorAlertProps = ApolloErrorAlertProps
@@ -19,7 +19,7 @@ export function ApolloCustomerErrorAlert(props: ApolloCustomerErrorAlertProps) {
           <>
             {graphqlErrorAlertProps?.action}
             <Button href='/account/signin' color='error' size='small'>
-              <Trans id='Sign in' />
+              <Trans>Sign in</Trans>
             </Button>
           </>
         ) : (

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -1,7 +1,7 @@
 import type { ApolloErrorFullPageProps } from '@graphcommerce/ecommerce-ui'
 import { ApolloErrorFullPage } from '@graphcommerce/ecommerce-ui'
 import { iconPerson, IconSvg } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Button } from '@mui/material'
 import type { SetOptional } from 'type-fest'
 import { useCustomerAccountCanSignUp } from '../../hooks'
@@ -27,7 +27,7 @@ export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPagePr
       button={
         unauthorized ? (
           <Button href='/account/signin' variant='pill' color='primary' size='large'>
-            {canSignUp ? <Trans id='Sign in or create an account!' /> : <Trans id='Sign in' />}
+            {canSignUp ? <Trans>Sign in or create an account!</Trans> : <Trans>Sign in</Trans>}
           </Button>
         ) : (
           button

package/components/ApolloCustomerError/ApolloCustomerErrorSnackbar.tsx

@@ -1,6 +1,6 @@
 import type { ApolloErrorSnackbarProps } from '@graphcommerce/ecommerce-ui'
 import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Button } from '@mui/material'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
@@ -19,7 +19,7 @@ export function ApolloCustomerErrorSnackbar(props: ApolloCustomerErrorSnackbarPr
       action={
         unauthorized ? (
           <Button href='/account/signin' variant='pill' color='secondary'>
-            {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
+            {token ? <Trans>Sign in</Trans> : <Trans>Create Account</Trans>}
           </Button>
         ) : (
           action

package/components/ApolloCustomerError/useAuthorizationErrorMasked.ts

@@ -1,17 +1,15 @@
 import type { ApolloError } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 
-export function useAuthorizationErrorMasked(error?: ApolloError) {
+export function useAuthorizationErrorMasked(error?: ApolloError | null) {
   const { token } = useCustomerSession()
 
   return graphqlErrorByCategory({
     category: 'graphql-authorization',
     error,
-    mask: token
-      ? i18n._(/* i18n */ 'Please reauthenticate and try again')
-      : i18n._(/* i18n */ 'You must be signed in to continue'),
+    mask: token ? t`Please reauthenticate and try again` : t`You must be signed in to continue`,
     extract: false,
   })
 }

package/components/CancelOrder/CancelOrderForm.tsx

@@ -10,7 +10,7 @@ import {
   IconSvg,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { AccordionProps } from '@mui/material'
 import { Accordion, AccordionDetails, AccordionSummary, Alert, Box } from '@mui/material'
 import { canCancelOrder } from '../../utils'

package/components/ChangeNameForm/ChangeNameForm.tsx

@@ -1,6 +1,6 @@
 import { Button, Form, FormActions, FormDivider, MessageSnackbar } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { NameFields } from '../NameFields/NameFields'
 import { UpdateCustomerNameDocument } from './UpdateCustomerName.gql'
@@ -42,7 +42,7 @@ export function ChangeNameForm(props: ChangeNameFormProps) {
             size='large'
             loading={formState.isSubmitting}
           >
-            <Trans id='Save changes' />
+            <Trans>Save changes</Trans>
           </Button>
         </FormActions>
         <ApolloCustomerErrorAlert error={error} />
@@ -52,7 +52,7 @@ export function ChangeNameForm(props: ChangeNameFormProps) {
         variant='pill'
         severity='success'
       >
-        <Trans id='Successfully saved changes' />
+        <Trans>Successfully saved changes</Trans>
       </MessageSnackbar>
     </>
   )

package/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -13,7 +13,7 @@ import {
   MessageSnackbar,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 import type { ChangePasswordMutation, ChangePasswordMutationVariables } from './ChangePassword.gql'
 import { ChangePasswordDocument } from './ChangePassword.gql'
@@ -45,7 +45,7 @@ export function ChangePasswordForm() {
           name='currentPassword'
           variant='outlined'
           autoComplete='current-password'
-          label={<Trans id='Current Password' />}
+          label={<Trans>Current Password</Trans>}
           required={required.currentPassword}
           disabled={formState.isSubmitting}
           error={Boolean(authenticationError)}
@@ -59,7 +59,7 @@ export function ChangePasswordForm() {
           name='newPassword'
           variant='outlined'
           autoComplete='new-password'
-          label={<Trans id='New password' />}
+          label={<Trans>New password</Trans>}
           required={required.newPassword}
           disabled={formState.isSubmitting}
           error={Boolean(inputError)}
@@ -71,7 +71,7 @@ export function ChangePasswordForm() {
           passwordFieldName='newPassword'
           autoComplete='new-password'
           variant='outlined'
-          label={<Trans id='Confirm password' />}
+          label={<Trans>Confirm password</Trans>}
           required
           disabled={formState.isSubmitting}
         />
@@ -87,7 +87,7 @@ export function ChangePasswordForm() {
           variant='pill'
           size='large'
         >
-          <Trans id='Save new password' />
+          <Trans>Save new password</Trans>
         </Button>
       </FormActions>
 
@@ -95,7 +95,7 @@ export function ChangePasswordForm() {
 
       {showSuccess && (
         <MessageSnackbar open={showSuccess} sticky variant='pill' severity='success'>
-          <Trans id='Successfully changed password' />
+          <Trans>Successfully changed password</Trans>
         </MessageSnackbar>
       )}
     </Form>