@graphcommerce/magento-customer 4.2.10 → 4.2.11

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Change Log
 
+## 4.2.11
+
+### Patch Changes
+
+- [#1451](https://github.com/graphcommerce-org/graphcommerce/pull/1451) [`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061) Thanks [@paales](https://github.com/paales)! - Removed all occurences of @lingui/macro and moved to @lingui/macro / @lingui/core in preparation to move to swc.
+
+  Since we've removed @lingui/macro, all occurences need to be replaced with @lingui/core and @lingui/react.
+
+  All occurences of `<Trans>` and `t` need to be replaced:
+
+  ```tsx
+  import { Trans, t } from '@lingui/macro'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={t`Account ${foo}`}>
+        <Trans>My Translation {foo}</Trans>
+      </div>
+    )
+  }
+  ```
+
+  Needs to be replaced with:
+
+  ```tsx
+  import { Trans } from '@lingui/react'
+  import { i18n } from '@lingui/core'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
+        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+      </div>
+    )
+  }
+  ```
+
+  [More examples for Trans](https://lingui.js.org/ref/macro.html#examples-of-jsx-macros) and [more examples for `t`](https://lingui.js.org/ref/macro.html#examples-of-js-macros)
+
+- Updated dependencies [[`50188e378`](https://github.com/graphcommerce-org/graphcommerce/commit/50188e378b4c77561ebc600958ea11cd114fa61a), [`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061)]:
+  - @graphcommerce/react-hook-form@3.1.3
+  - @graphcommerce/ecommerce-ui@1.0.11
+  - @graphcommerce/magento-store@4.2.2
+  - @graphcommerce/next-ui@4.7.2
+  - @graphcommerce/graphql@3.1.3
+  - @graphcommerce/magento-graphql@3.0.12
+
 ## 4.2.10
 
 ### Patch Changes

package/components/AccountAddress/AccountAddress.tsx

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

package/components/AccountAddresses/AccountAddresses.tsx

@@ -5,7 +5,7 @@ import {
   IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Skeleton, Button, Box, Theme, SxProps } from '@mui/material'
 import Link from 'next/link'
 import { AccountAddress } from '../AccountAddress/AccountAddress'
@@ -46,7 +46,7 @@ export function AccountAddresses(props: AccountAddressesProps) {
             margin: `${theme.spacings.md} auto`,
           })}
         >
-          <Trans>Add new address</Trans>
+          <Trans id='Add new address' />
         </Button>
       </SectionContainer>
     )
@@ -56,12 +56,12 @@ export function AccountAddresses(props: AccountAddressesProps) {
     <>
       {((addresses && addresses.length === 0) || !addresses) && (
         <FullPageMessage
-          title={<Trans>You have no addresses saved yet</Trans>}
+          title={<Trans id='You have no addresses saved yet' />}
           icon={<IconSvg src={iconHome} size='xxl' />}
           button={
             <Link href='/account/addresses/add' passHref>
               <Button size='large' variant='contained' color='primary'>
-                <Trans>Add new address</Trans>
+                <Trans id='Add new address' />
               </Button>
             </Link>
           }
@@ -91,7 +91,7 @@ export function AccountAddresses(props: AccountAddressesProps) {
                 margin: `${theme.spacings.md} auto`,
               })}
             >
-              <Trans>Add new address</Trans>
+              <Trans id='Add new address' />
             </Button>
           </Link>
         </SectionContainer>

package/components/AddressFields/AddressFields.tsx

@@ -6,7 +6,8 @@ import {
   houseNumberPattern,
   UseFormReturn,
 } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { TextField } from '@mui/material'
 import React, { useMemo } from 'react'
 
@@ -58,7 +59,7 @@ export function AddressFields(props: AddressFieldsProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.street}
-          label={<Trans>Street</Trans>}
+          label={<Trans id='Street' />}
           autoComplete='address-line1'
           required={!!required?.street}
           {...muiRegister('street', { required: required?.street })}
@@ -72,12 +73,15 @@ export function AddressFields(props: AddressFieldsProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.houseNumber}
-          label={<Trans>Housenumber</Trans>}
+          label={<Trans id='Housenumber' />}
           autoComplete='address-line2'
           required={!!required?.houseNumber}
           {...muiRegister('houseNumber', {
             required: required?.houseNumber,
-            pattern: { value: houseNumberPattern, message: t`Please provide a valid house number` },
+            pattern: {
+              value: houseNumberPattern,
+              message: i18n._(/* i18n */ `Please provide a valid house number`),
+            },
           })}
           helperText={formState.isSubmitted && formState.errors.houseNumber?.message}
           InputProps={{
@@ -90,7 +94,7 @@ export function AddressFields(props: AddressFieldsProps) {
           type='text'
           error={!!formState.errors.addition}
           required={!!required?.addition}
-          label={<Trans>Addition</Trans>}
+          label={<Trans id='Addition' />}
           autoComplete='address-line3'
           {...muiRegister('addition', { required: required?.addition })}
           helperText={formState.isSubmitted && formState.errors.addition?.message}
@@ -106,7 +110,7 @@ export function AddressFields(props: AddressFieldsProps) {
           type='text'
           error={!!formState.errors.postcode}
           required={!!required?.postcode}
-          label={<Trans>Postcode</Trans>}
+          label={<Trans id='Postcode' />}
           {...muiRegister('postcode', { required: required?.postcode })}
           helperText={formState.isSubmitted && formState.errors.postcode?.message}
           InputProps={{
@@ -119,7 +123,7 @@ export function AddressFields(props: AddressFieldsProps) {
           type='text'
           error={!!formState.errors.city}
           required={!!required?.city}
-          label={<Trans>City</Trans>}
+          label={<Trans id='City' />}
           {...muiRegister('city', { required: required?.city })}
           helperText={formState.isSubmitted && formState.errors.city?.message}
           InputProps={{
@@ -135,7 +139,7 @@ export function AddressFields(props: AddressFieldsProps) {
           {...muiRegister('countryCode', { required: required.countryCode })}
           variant='outlined'
           error={!!formState.errors.countryCode}
-          label={<Trans>Country</Trans>}
+          label={<Trans id='Country' />}
           required={!!required?.countryCode}
           helperText={formState.errors.countryCode?.message}
           // onBlur={onBlur}
@@ -162,7 +166,7 @@ export function AddressFields(props: AddressFieldsProps) {
             SelectProps={{ native: true, displayEmpty: true }}
             variant='outlined'
             error={!!formState.errors.regionId}
-            label={<Trans>Region</Trans>}
+            label={<Trans id='Region' />}
             {...muiRegister('regionId', {
               required: true,
               shouldUnregister: true,

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -1,5 +1,5 @@
 import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Link } from '@mui/material'
 import NextLink from 'next/link'
 import { useExtractCustomerErrors } from '../../hooks/useExtractCustomerErrors'
@@ -12,7 +12,7 @@ export function ApolloCustomerErrorAlert(props: MagentoErrorAlertProps) {
   const action = unauthorized && (
     <NextLink href='/account/signin' passHref>
       <Link underline='hover'>
-        <Trans>Create Account</Trans> / <Trans>Sign in</Trans>
+        <Trans id='Create Account' /> / <Trans id='Sign in' />
       </Link>
     </NextLink>
   )

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -1,6 +1,6 @@
 import { ApolloErrorFullPage, ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
 import { iconPerson, IconSvg } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import PageLink from 'next/link'
 import { useExtractCustomerErrors } from '../../hooks/useExtractCustomerErrors'
@@ -22,7 +22,7 @@ export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPagePr
         unauthorized ? (
           <PageLink href={signInHref} passHref>
             <Button variant='contained' color='primary' size='large'>
-              <Trans>Log in</Trans>
+              <Trans id='Log in' />
             </Button>
           </PageLink>
         ) : undefined
@@ -31,7 +31,7 @@ export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPagePr
         unauthorized ? (
           <PageLink href={signUpHref} passHref>
             <Button variant='text' color='primary'>
-              <Trans>Or create an account</Trans>
+              <Trans id='Or create an account' />
             </Button>
           </PageLink>
         ) : undefined

package/components/ChangeNameForm/ChangeNameForm.tsx

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

package/components/ChangePasswordForm/ChangePasswordForm.tsx

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

package/components/CreateCustomerAddressForm/CreateCustomerAddressForm.tsx

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

package/components/CustomerFab/CustomerFab.tsx

@@ -5,7 +5,7 @@ import {
   IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
-import { t } from '@lingui/macro'
+import { i18n } from '@lingui/core'
 import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
@@ -32,7 +32,7 @@ function CustomerFabContent(props: CustomerFabContentProps) {
       <Fab
         color='inherit'
         id='account'
-        aria-label={t`Account`}
+        aria-label={i18n._(/* i18n */ `Account`)}
         size='large'
         className={classes.root}
         {...FabProps}

package/components/DeleteCustomerAddressForm/DeleteCustomerAddressForm.tsx

@@ -1,6 +1,6 @@
 import { ApolloErrorSnackbar } from '@graphcommerce/ecommerce-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { DeleteCustomerAddressFormDocument } from './DeleteCustomerAddressForm.gql'
 
@@ -20,7 +20,7 @@ export function DeleteCustomerAddressForm(props: DeleteCustomerAddressFormProps)
   return (
     <form onSubmit={submitHandler} noValidate>
       <Button type='submit' variant='text' color='primary'>
-        <Trans>Delete this address</Trans>
+        <Trans id='Delete this address' />
       </Button>
       <ApolloErrorSnackbar error={error} />
     </form>

package/components/EditAddressForm/EditAddressForm.tsx

@@ -9,7 +9,8 @@ import {
   InputCheckmark,
 } from '@graphcommerce/next-ui'
 import { phonePattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { SxProps, TextField, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
 import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
@@ -84,10 +85,10 @@ export function EditAddressForm(props: EditAddressFormProps) {
             type='text'
             error={!!formState.errors.telephone}
             required={required.telephone}
-            label={<Trans>Telephone</Trans>}
+            label={<Trans id='Telephone' />}
             {...muiRegister('telephone', {
               required: required.telephone,
-              pattern: { value: phonePattern, message: t`Invalid phone number` },
+              pattern: { value: phonePattern, message: i18n._(/* i18n */ `Invalid phone number`) },
             })}
             helperText={formState.isSubmitted && formState.errors.telephone?.message}
             disabled={formState.isSubmitting}
@@ -105,7 +106,7 @@ export function EditAddressForm(props: EditAddressFormProps) {
             size='large'
             loading={formState.isSubmitting}
           >
-            <Trans>Save changes</Trans>
+            <Trans id='Save changes' />
           </Button>
         </FormActions>
       </Form>

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -1,6 +1,7 @@
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { TextField, Alert, SxProps, Theme } from '@mui/material'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import {
@@ -27,7 +28,7 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
           marginBottom: theme.spacings.sm,
         })}
       >
-        <Trans>We’ve send a password reset link to your email address!</Trans>
+        <Trans id='We’ve send a password reset link to your email address!' />
       </Alert>
     )
   }
@@ -39,11 +40,11 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
           variant='outlined'
           type='text'
           error={!!formState.errors.email}
-          label={<Trans>Email</Trans>}
+          label={<Trans id='Email' />}
           required={required.email}
           {...muiRegister('email', {
             required: required.email,
-            pattern: { value: emailPattern, message: t`Invalid email address` },
+            pattern: { value: emailPattern, message: i18n._(/* i18n */ `Invalid email address`) },
           })}
           helperText={formState.errors.email?.message}
           disabled={formState.isSubmitting}
@@ -60,7 +61,7 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
           variant='contained'
           size='large'
         >
-          <Trans>Send password reset email</Trans>
+          <Trans id='Send password reset email' />
         </Button>
       </FormActions>
     </Form>

package/components/NameFields/NameFields.tsx

@@ -1,6 +1,7 @@
 import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import { assertFormGqlOperation, Controller, UseFormReturn } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { MenuItem, TextField } from '@mui/material'
 import React from 'react'
 
@@ -19,7 +20,11 @@ type NameFieldProps = {
 }
 
 export function NameFields(props: NameFieldProps) {
-  const { prefix, form, readOnly, prefixes = [t`Mr`, t`Mrs`, t`Other`] } = props
+  const mr = i18n._(/* i18n */ `Mr`)
+  const mrs = i18n._(/* i18n */ `Mrs`)
+  const other = i18n._(/* i18n */ `Other`)
+
+  const { prefix, form, readOnly, prefixes = [mr, mrs, other] } = props
   assertFormGqlOperation<NameFieldValues>(form)
 
   const { control, formState, muiRegister, required, valid } = form
@@ -37,7 +42,7 @@ export function NameFields(props: NameFieldProps) {
                 variant='outlined'
                 select
                 error={!!fieldState.error}
-                label={<Trans>Prefix</Trans>}
+                label={<Trans id='Prefix' />}
                 required={!!required?.prefix}
                 helperText={fieldState.error?.message}
                 onChange={(e) => onChange(e.target.value)}
@@ -63,7 +68,7 @@ export function NameFields(props: NameFieldProps) {
         <TextField
           variant='outlined'
           type='text'
-          label={<Trans>First Name</Trans>}
+          label={<Trans id='First Name' />}
           required={!!required}
           error={!!formState.errors.firstname}
           helperText={formState.isSubmitted && formState.errors.firstname?.message}
@@ -77,7 +82,7 @@ export function NameFields(props: NameFieldProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.lastname}
-          label={<Trans>Last Name</Trans>}
+          label={<Trans id='Last Name' />}
           required={!!required?.lastname}
           helperText={formState.isSubmitted && formState.errors.lastname?.message}
           InputProps={{

package/components/ResetPasswordForm/ResetPasswordForm.tsx

@@ -1,6 +1,6 @@
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { TextField } from '@mui/material'
 import { useRouter } from 'next/router'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
@@ -44,7 +44,7 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
           variant='outlined'
           type='email'
           error={!!formState.errors.email}
-          label={<Trans>Email</Trans>}
+          label={<Trans id='Email' />}
           required={required.email}
           {...muiRegister('email', { required: required.email })}
           helperText={formState.errors.email?.message}
@@ -56,7 +56,7 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
           variant='outlined'
           type='password'
           error={!!formState.errors.newPassword}
-          label={<Trans>New password</Trans>}
+          label={<Trans id='New password' />}
           required={required.newPassword}
           {...muiRegister('newPassword', { required: required.newPassword })}
           helperText={formState.errors.newPassword?.message}
@@ -68,7 +68,7 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
           variant='outlined'
           type='password'
           error={!!formState.errors.confirmPassword}
-          label={<Trans>Confirm password</Trans>}
+          label={<Trans id='Confirm password' />}
           required
           {...muiRegister('confirmPassword', {
             required: true,
@@ -89,7 +89,7 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
           variant='contained'
           size='large'
         >
-          <Trans>Save new password</Trans>
+          <Trans id='Save new password' />
         </Button>
       </FormActions>
     </Form>

package/components/SignInForm/SignInForm.tsx

@@ -1,7 +1,7 @@
 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/macro'
+import { Trans } from '@lingui/react'
 import { Box, FormControl, Link, SxProps, TextField, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
@@ -32,7 +32,7 @@ export function SignInForm(props: SignInFormProps) {
           variant='outlined'
           type='password'
           error={!!formState.errors.password || !!authError}
-          label={<Trans>Password</Trans>}
+          label={<Trans id='Password' />}
           autoFocus
           autoComplete='current-password'
           id='current-password'
@@ -42,7 +42,7 @@ export function SignInForm(props: SignInFormProps) {
             endAdornment: (
               <PageLink href='/account/forgot-password' key='forgot-password' passHref>
                 <Link underline='hover' sx={{ whiteSpace: 'nowrap' }}>
-                  <Trans>Forgot password?</Trans>
+                  <Trans id='Forgot password?' />
                 </Link>
               </PageLink>
             ),
@@ -63,7 +63,7 @@ export function SignInForm(props: SignInFormProps) {
             variant='contained'
             size='large'
           >
-            <Trans>Log in</Trans>
+            <Trans id='Log in' />
           </Button>
         </FormControl>
       </FormActions>

package/components/SignInForm/SignInFormInline.tsx

@@ -1,6 +1,6 @@
 import { Button, extendableComponent } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Box, SxProps, TextField, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import { PropsWithChildren } from 'react'
@@ -44,7 +44,7 @@ export function SignInFormInline(props: PropsWithChildren<InlineSignInFormProps>
         variant='outlined'
         type='password'
         error={!!formState.errors.password || !!error?.message}
-        label={<Trans>Password</Trans>}
+        label={<Trans id='Password' />}
         autoFocus
         autoComplete='current-password'
         id='current-password'
@@ -61,14 +61,14 @@ export function SignInFormInline(props: PropsWithChildren<InlineSignInFormProps>
                 className={classes.button}
                 sx={{ minWidth: 'max-content' }}
               >
-                <Trans>Forgot password?</Trans>
+                <Trans id='Forgot password?' />
               </Button>
             </PageLink>
           ),
         }}
       />
       <Button type='submit' loading={formState.isSubmitting} color='secondary' variant='pill'>
-        <Trans>Sign in</Trans>
+        <Trans id='Sign in' />
       </Button>
     </Box>
   )

package/components/SignUpForm/SignUpForm.tsx

@@ -3,7 +3,8 @@ 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 { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { Alert, FormControlLabel, Switch, TextField } from '@mui/material'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
 import { NameFields } from '../NameFields/NameFields'
@@ -37,7 +38,7 @@ export function SignUpForm(props: SignUpFormProps) {
   if (requireEmailValidation && form.formState.isSubmitSuccessful) {
     return (
       <Alert>
-        <Trans>Please check your inbox to validate your email ({email})</Trans>
+        <Trans id='Please check your inbox to validate your email ({email})' values={{ email }} />
       </Alert>
     )
   }
@@ -49,7 +50,7 @@ export function SignUpForm(props: SignUpFormProps) {
           variant='outlined'
           type='password'
           error={!!formState.errors.password || !!inputError}
-          label={<Trans>Password</Trans>}
+          label={<Trans id='Password' />}
           autoFocus
           autoComplete='new-password'
           required={required.password}
@@ -57,7 +58,7 @@ export function SignUpForm(props: SignUpFormProps) {
             required: required.password,
             minLength: {
               value: Number(storeConfig?.minimum_password_length ?? 8),
-              message: t`Password must have at least 8 characters`,
+              message: i18n._(/* i18n */ `Password must have at least 8 characters`),
             },
           })}
           helperText={formState.errors.password?.message || inputError?.message}
@@ -67,12 +68,13 @@ export function SignUpForm(props: SignUpFormProps) {
           variant='outlined'
           type='password'
           error={!!formState.errors.confirmPassword}
-          label={<Trans>Confirm password</Trans>}
+          label={<Trans id='Confirm password' />}
           autoComplete='new-password'
           required
           {...muiRegister('confirmPassword', {
             required: true,
-            validate: (value) => value === watchPassword || t`Passwords don't match`,
+            validate: (value) =>
+              value === watchPassword || i18n._(/* i18n */ `Passwords don't match`),
           })}
           helperText={formState.errors.confirmPassword?.message}
           disabled={formState.isSubmitting}
@@ -85,7 +87,7 @@ export function SignUpForm(props: SignUpFormProps) {
         control={<Switch color='primary' />}
         {...muiRegister('isSubscribed', { required: required.isSubscribed })}
         disabled={formState.isSubmitting}
-        label={<Trans>Subscribe to newsletter</Trans>}
+        label={<Trans id='Subscribe to newsletter' />}
       />
 
       <ApolloCustomerErrorSnackbar error={remainingError} />
@@ -99,7 +101,7 @@ export function SignUpForm(props: SignUpFormProps) {
           size='large'
           loading={formState.isSubmitting}
         >
-          <Trans>Create Account</Trans>
+          <Trans id='Create Account' />
         </Button>
       </FormActions>
     </form>

package/components/SignUpForm/SignUpFormInline.tsx

@@ -2,7 +2,8 @@ import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { Box, TextField } from '@mui/material'
 import React, { PropsWithChildren } from 'react'
 import { SignUpMutationVariables, SignUpMutation, SignUpDocument } from './SignUp.gql'
@@ -55,7 +56,7 @@ export function SignUpFormInline({
           variant='outlined'
           type='password'
           error={!!formState.errors.password || !!error?.message}
-          label={<Trans>Password</Trans>}
+          label={<Trans id='Password' />}
           autoFocus
           autoComplete='new-password'
           id='new-password'
@@ -64,7 +65,7 @@ export function SignUpFormInline({
             required: required.password,
             minLength: {
               value: minPasswordLength,
-              message: t`Password must have at least 8 characters`,
+              message: i18n._(/* i18n */ `Password must have at least 8 characters`),
             },
           })}
           helperText={error?.message}

package/components/UpdateCustomerEmailForm/UpdateCustomerEmailForm.tsx

@@ -7,7 +7,8 @@ import {
   MessageSnackbar,
 } from '@graphcommerce/next-ui'
 import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { TextField } from '@mui/material'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import {
@@ -70,7 +71,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           autoFocus
           error={formState.isSubmitted && !!formState.errors.email}
           helperText={formState.isSubmitted && formState.errors.email?.message}
-          label={<Trans>New email</Trans>}
+          label={<Trans id='New email' />}
           required={required.email}
           {...muiRegister('email', {
             required: true,
@@ -85,11 +86,11 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           autoFocus
           error={formState.isSubmitted && !!formState.errors.confirmEmail}
           helperText={formState.isSubmitted && formState.errors.confirmEmail?.message}
-          label={<Trans>Confirm new email</Trans>}
+          label={<Trans id='Confirm new email' />}
           required
           {...muiRegister('confirmEmail', {
             required: true,
-            validate: (value) => value === watchNewEmail || t`Emails don't match`,
+            validate: (value) => value === watchNewEmail || i18n._(/* i18n */ `Emails don't match`),
           })}
         />
       </FormRow>
@@ -99,7 +100,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           variant='outlined'
           type='password'
           error={!!formState.errors.password}
-          label={<Trans>Password</Trans>}
+          label={<Trans id='Password' />}
           autoComplete='password'
           required={required.password}
           {...muiRegister('password', {
@@ -119,13 +120,13 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           size='large'
           loading={formState.isSubmitting}
         >
-          <Trans>Save changes</Trans>
+          <Trans id='Save changes' />
         </Button>
       </FormActions>
       <ApolloCustomerErrorAlert error={error} />
 
       <MessageSnackbar sticky open={formState.isSubmitSuccessful && !error}>
-        <Trans>Successfully updated email</Trans>
+        <Trans id='Successfully updated email' />
       </MessageSnackbar>
     </Form>
   )

package/components/UpdateDefaultAddressForm/UpdateDefaultAddressForm.tsx

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

package/hooks/useExtractCustomerErrors.tsx

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.2.10",
+  "version": "4.2.11",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,23 +12,24 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.6",
+    "@graphcommerce/eslint-config-pwa": "^4.1.7",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.2",
+    "@graphcommerce/typescript-config-pwa": "^4.0.3",
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.0.10",
-    "@graphcommerce/graphql": "3.1.2",
+    "@graphcommerce/ecommerce-ui": "1.0.11",
+    "@graphcommerce/graphql": "3.1.3",
     "@graphcommerce/graphql-mesh": "4.1.3",
     "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/magento-graphql": "3.0.11",
-    "@graphcommerce/magento-store": "4.2.1",
-    "@graphcommerce/next-ui": "4.7.1",
-    "@graphcommerce/react-hook-form": "3.1.2"
+    "@graphcommerce/magento-graphql": "3.0.12",
+    "@graphcommerce/magento-store": "4.2.2",
+    "@graphcommerce/next-ui": "4.7.2",
+    "@graphcommerce/react-hook-form": "3.1.3"
   },
   "peerDependencies": {
-    "@lingui/macro": "^3.13.2",
+    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
     "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
     "next": "12.1.2",