@graphcommerce/magento-customer 9.1.0-canary.55 → 10.0.0-canary.57

package/components/CompanyFields/CompanyVAT.tsx

@@ -1,7 +1,7 @@
 import type { FieldPath, FieldValues } from '@graphcommerce/ecommerce-ui'
 import { TextFieldElement, useWatch } from '@graphcommerce/ecommerce-ui'
 import type { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { CompanyFieldsOptions } from './useCompanyFieldsForm'
 import { useCompanyFieldsForm } from './useCompanyFieldsForm'
 
@@ -27,7 +27,7 @@ export function CompanyVAT<
       variant='outlined'
       type='text'
       required={required ? !optional?.includes(countryCode) : optional?.includes(countryCode)}
-      label={<Trans id='VAT Number' />}
+      label={<Trans>VAT Number</Trans>}
       showValid
       InputProps={{ readOnly }}
     />

package/components/ConfirmCustomer/ConfirmCustomerForm.tsx

@@ -1,6 +1,6 @@
 import { EmailElement, useFormGqlMutation } from '@graphcommerce/ecommerce-ui'
 import { Button, FormRow, iconPerson, LayoutTitle } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Alert, Box, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError'
@@ -28,25 +28,25 @@ export function ConfirmCustomerForm() {
 
   const signInButton = (
     <Button variant='text' size='small' href={`/account/signin?email=${submittedVariables?.email}`}>
-      <Trans id='Sign in' />
+      <Trans>Sign in</Trans>
     </Button>
   )
 
   return (
     <Box component='form' onSubmit={submitHandler}>
       <LayoutTitle icon={iconPerson}>
-        <Trans id='Account confirmation' />
+        <Trans>Account confirmation</Trans>
       </LayoutTitle>
 
       {!key && (
         <Alert severity='error' sx={(theme) => ({ my: theme.spacings.xxs })}>
-          <Trans id='You can only confirm you account by clicking on the link in your email.' />
+          <Trans>You can only confirm you account by clicking on the link in your email.</Trans>
         </Alert>
       )}
       {key && (
         <>
           <Typography variant='h6' textAlign='center'>
-            <Trans id='Fill in your email to confirm registration' />
+            <Trans>Fill in your email to confirm registration</Trans>
           </Typography>
 
           <FormRow>
@@ -69,7 +69,7 @@ export function ConfirmCustomerForm() {
               size='large'
               disabled={isSubmitSuccessful}
             >
-              <Trans id='Confirm registration' />
+              <Trans>Confirm registration</Trans>
             </Button>
           </FormRow>
 
@@ -85,7 +85,7 @@ export function ConfirmCustomerForm() {
               sx={(theme) => ({ my: theme.spacings.xxs })}
               action={signInButton}
             >
-              <Trans id='Account confirmed. You can now proceed to sign in.' />
+              <Trans>Account confirmed. You can now proceed to sign in.</Trans>
             </Alert>
           )}
         </>

package/components/ContactForm/ContactForm.tsx

@@ -6,7 +6,7 @@ import {
 } from '@graphcommerce/ecommerce-ui'
 import { Button, Form, FormRow, MessageSnackbar } from '@graphcommerce/next-ui'
 import { FormPersist, useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { CustomerQuery } from '../../hooks'
 import { CustomerDocument, useCustomerQuery } from '../../hooks'
 import type { ContactUsMutationVariables } from './ContactUsMutation.gql'

package/components/CreateCustomerAddressForm/CreateCustomerAddressForm.tsx

@@ -4,7 +4,7 @@ import type { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
 import { CountryRegionsDocument, StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, Form, FormActions, FormRow, MessageSnackbar } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { useRouter } from 'next/router'
 import { AddressFields } from '../AddressFields/AddressFields'
 import { CompanyFields } from '../CompanyFields'
@@ -88,12 +88,12 @@ export function CreateCustomerAddressForm() {
             size='large'
             loading={formState.isSubmitting}
           >
-            <Trans id='Save changes' />
+            <Trans>Save changes</Trans>
           </Button>
         </FormActions>
       </Form>
       <MessageSnackbar open={Boolean(data) && !error} variant='pill' severity='success'>
-        <Trans id='Your address has been added' components={{ 0: <strong /> }} />
+        <Trans>Your address has been added</Trans>
       </MessageSnackbar>
 
       <ApolloErrorSnackbar error={error} />

package/components/CreditMemo/CreditMemoCard.tsx

@@ -1,6 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, iconChevronRight, IconSvg, NextLink, sxx } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, lighten } from '@mui/material'
 import type { CreditMemoCardFragment } from './CreditMemoCard.gql'

package/components/CreditMemo/CreditMemoDetails.tsx

@@ -4,7 +4,7 @@ import {
   extendableComponent,
   SectionContainer,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, lighten, Typography } from '@mui/material'
 import type { CreditMemoFragment } from './CreditMemo.gql'

package/components/CreditMemo/CreditMemoItem.tsx

@@ -1,7 +1,7 @@
 import { Image } from '@graphcommerce/image'
 import { Money, PriceModifiersList, type PriceModifier } from '@graphcommerce/magento-store'
 import { ActionCard, actionCardImageSizes, type ActionCardProps } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Box } from '@mui/material'
 import type { CreditMemoItemFragment } from './CreditMemoItem.gql'
 
@@ -111,7 +111,7 @@ export function CreditMemoItem(props: CreditMemoItemProps) {
         <>
           {priceModifiers && priceModifiers.length > 0 && (
             <PriceModifiersList
-              label={<Trans id='Base Price'>Base price</Trans>}
+              label={<Trans>Base price</Trans>}
               modifiers={[...priceModifiers]}
               total={product_sale_price.value ?? 0}
               currency={product_sale_price.currency}

package/components/CreditMemo/CreditMemoItems.tsx

@@ -5,7 +5,7 @@ import {
   nonNullable,
   SectionContainer,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { CreditMemoFragment } from './CreditMemo.gql'

package/components/CreditMemo/CreditMemoTotals.tsx

@@ -1,6 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Divider, lighten, Typography } from '@mui/material'
 import type { CreditMemoFragment } from './CreditMemo.gql'

package/components/CustomerFab/CustomerFab.tsx

@@ -4,7 +4,7 @@ import {
   iconPerson,
   IconSvg,
 } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { BadgeProps, FabProps as FabPropsType, SxProps, Theme } from '@mui/material'
 import { Fab } from '@mui/material'
 import React from 'react'
@@ -33,7 +33,7 @@ function CustomerFabContent(props: CustomerFabContentProps) {
       href={session?.loggedIn ? authHref : guestHref}
       color='inherit'
       id='account'
-      aria-label={i18n._(/* i18n */ 'Account')}
+      aria-label={t`Account`}
       size='large'
       className={classes.root}
       {...FabProps}

package/components/CustomerForms/CustomerAttributeField.tsx

@@ -3,7 +3,7 @@ import type { CustomAttributeMetadata } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
 import { ActionCard, filterNonNullableKeys, sxx } from '@graphcommerce/next-ui'
 import type { Control, FieldPath, FieldValues } from '@graphcommerce/react-hook-form'
-import { t } from '@lingui/macro'
+import { t } from '@lingui/core/macro'
 import { MenuItem, type SxProps, type Theme } from '@mui/material'
 import {
   customerAttributeInputType,
@@ -54,7 +54,7 @@ export function CustomerAttributeField<TFieldValues extends FieldValues = FieldV
             shrink: frontendInput === 'DATE' || frontendInput === 'DATETIME',
           }}
           disabled={disabled}
-          helperText={is_unique ? t`${label} must be unique` : helperText}
+          helperText={is_unique && label ? t`${label} must be unique` : helperText}
           sx={sxx(sx, { gridArea })}
           data-field={gridArea}
         >

package/components/CustomerForms/CustomerUpdateForm.tsx

@@ -4,7 +4,7 @@ import {
   type AttributeFormAutoLayoutProps,
 } from '@graphcommerce/magento-store'
 import { Button, FormActions, type ButtonProps } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { styled } from '@mui/material'
 import type { ComponentProps } from 'react'
 import { CustomerAttributeField } from './CustomerAttributeField'
@@ -56,7 +56,7 @@ export function CustomerUpdateForm(props: CustomerUpdateFormProps) {
           loading={formState.isSubmitting}
           {...slotProps?.button}
         >
-          <Trans id='Save changes' />
+          <Trans>Save changes</Trans>
         </Button>
       </FormActions>
       <ApolloErrorSnackbar error={error} />

package/components/CustomerForms/customerAttributeFieldHelpers.ts

@@ -1,7 +1,7 @@
 import type { CustomAttributeMetadata } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import type { ControllerProps, FieldPath, FieldValues } from '@graphcommerce/react-hook-form'
-import { t } from '@lingui/macro'
+import { t } from '@lingui/core/macro'
 import type { HTMLInputTypeAttribute } from 'react'
 
 export type InputValidationValue =

package/components/CustomerForms/nameFieldset.tsx

@@ -3,7 +3,7 @@ import {
   type AttributeFormAutoLayoutFieldset,
   type CustomAttributeMetadata,
 } from '@graphcommerce/magento-store'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 
 export function nameFieldset(
   attributes: CustomAttributeMetadata[],
@@ -20,7 +20,7 @@ export function nameFieldset(
   const additional = extractAttributes(attributes, ['dob', 'gender'])[0].map((f) => f.code)
 
   return {
-    label: withLabel ? <Trans id='Name'>Name</Trans> : undefined,
+    label: withLabel ? <Trans>Name</Trans> : undefined,
     gridAreas: [...nameFields, ...additional],
     // xs is shown in one column by default
     sx: {

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/react'
+import { Trans } from '@lingui/react/macro'
 import { Button } from '@mui/material'
 import { DeleteCustomerAddressFormDocument } from './DeleteCustomerAddressForm.gql'
 
@@ -22,7 +22,7 @@ export function DeleteCustomerAddressForm(props: DeleteCustomerAddressFormProps)
   return (
     <form onSubmit={submitHandler} noValidate>
       <Button type='submit' variant='text' color='primary'>
-        <Trans id='Delete this address' />
+        <Trans>Delete this address</Trans>
       </Button>
       <ApolloErrorSnackbar error={error} />
     </form>

package/components/EditAddressForm/EditAddressForm.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
 import type { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
@@ -105,7 +105,7 @@ export function EditAddressForm(props: EditAddressFormProps) {
             size='large'
             loading={formState.isSubmitting}
           >
-            <Trans id='Save changes' />
+            <Trans>Save changes</Trans>
           </Button>
         </FormActions>
       </Form>

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -1,8 +1,8 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 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'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import type { SxProps, Theme } from '@mui/material'
 import { Alert } from '@mui/material'
@@ -32,7 +32,7 @@ export function ForgotPasswordForm(props: ForgotPasswordFormProps) {
           marginBottom: theme.spacings.sm,
         })}
       >
-        <Trans id='We’ve send a password reset link to your email address!' />
+        <Trans>We’ve send a password reset link to your email address!</Trans>
       </Alert>
     )
   }
@@ -44,12 +44,12 @@ export function ForgotPasswordForm(props: ForgotPasswordFormProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.email}
-          label={<Trans id='Email' />}
+          label={<Trans>Email</Trans>}
           required={required.email}
           name='email'
           control={control}
           rules={{
-            pattern: { value: emailPattern, message: i18n._(/* i18n */ 'Invalid email address') },
+            pattern: { value: emailPattern, message: t`Invalid email address` },
           }}
           helperText={formState.errors.email?.message}
           disabled={formState.isSubmitting}
@@ -68,7 +68,7 @@ export function ForgotPasswordForm(props: ForgotPasswordFormProps) {
           size='large'
           {...buttonProps}
         >
-          <Trans id='Send password reset email' />
+          <Trans>Send password reset email</Trans>
         </Button>
       </FormActions>
     </Form>

package/components/GuestOrderOverview/GuestOrder.graphql

@@ -1,5 +1,5 @@
-query GuestOrder($orderNumber: String!, $email: String!, $postcode: String!) {
-  guestOrder(input: { number: $orderNumber, email: $email, postcode: $postcode }) {
+query GuestOrder($input: OrderInformationInput!) {
+  guestOrder(input: $input) {
     ...OrderDetails
     ...OrderItems
   }

package/components/GuestOrderOverview/GuestOrderOverviewForm.tsx

@@ -9,7 +9,7 @@ import {
   useUrlQuery,
 } from '@graphcommerce/next-ui'
 import { useFormGqlQuery } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import { Box, Typography } from '@mui/material'
 import { useMemo } from 'react'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError'
@@ -18,16 +18,16 @@ import type { GuestOrderQueryVariables } from './GuestOrder.gql'
 import { GuestOrderDocument } from './GuestOrder.gql'
 
 export function GuestOrderOverviewForm() {
-  const [urlQuery, setUrlQuery] = useUrlQuery<Partial<GuestOrderQueryVariables>>(true)
+  const [urlQuery, setUrlQuery] = useUrlQuery<Partial<GuestOrderQueryVariables['input']>>(true)
 
   const form = useFormGqlQuery(GuestOrderDocument, {
-    defaultValues: urlQuery,
+    defaultValues: { input: urlQuery },
     onBeforeSubmit: (variables) => {
-      variables.orderNumber = variables.orderNumber.replace(/^#/, '')
+      variables.input.number = variables.input.number.replace(/^#/, '')
       return variables
     },
     onComplete: async (data, variables) => {
-      await setUrlQuery(variables)
+      await setUrlQuery(variables.input)
     },
   })
 
@@ -57,17 +57,17 @@ export function GuestOrderOverviewForm() {
           <FormRow>
             <TextFieldElement
               control={control}
-              name='orderNumber'
-              required={required.orderNumber}
+              name='input.number'
+              required
               label={<Trans>Order number</Trans>}
             />
           </FormRow>
           <FormRow>
-            <EmailElement control={control} name='email' required={required.email} />
+            <EmailElement control={control} name='input.email' required />
             <TextFieldElement
               control={control}
-              name='postcode'
-              required={required.postcode}
+              name='input.postcode'
+              required
               label={<Trans>Postcode</Trans>}
               autoComplete='postal_code'
             />

package/components/Invoice/InvoiceCard.tsx

@@ -1,6 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, iconChevronRight, IconSvg, NextLink, sxx } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, lighten } from '@mui/material'
 import type { InvoiceCardFragment } from './InvoiceCard.gql'

package/components/Invoice/InvoiceDetails.tsx

@@ -4,7 +4,7 @@ import {
   extendableComponent,
   SectionContainer,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, lighten, Typography } from '@mui/material'
 import type { InvoiceFragment } from './Invoice.gql'

package/components/Invoice/InvoiceItem.tsx

@@ -1,7 +1,7 @@
 import { Image } from '@graphcommerce/image'
 import { Money, PriceModifiersList, type PriceModifier } from '@graphcommerce/magento-store'
 import { ActionCard, actionCardImageSizes, type ActionCardProps } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Box } from '@mui/material'
 import type { InvoiceItemFragment } from './InvoiceItem.gql'
 
@@ -111,7 +111,7 @@ export function InvoiceItem(props: InvoiceItemProps) {
         <>
           {priceModifiers && priceModifiers.length > 0 && (
             <PriceModifiersList
-              label={<Trans id='Base Price'>Base price</Trans>}
+              label={<Trans>Base price</Trans>}
               modifiers={[...priceModifiers]}
               total={product_sale_price.value ?? 0}
               currency={product_sale_price.currency}

package/components/Invoice/InvoiceItems.tsx

@@ -5,7 +5,7 @@ import {
   nonNullable,
   SectionContainer,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { InvoiceFragment } from './Invoice.gql'

package/components/Invoice/InvoiceTotals.tsx

@@ -1,6 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Divider, lighten, Typography } from '@mui/material'
 import type { InvoiceFragment } from './Invoice.gql'

package/components/NameFields/NameFields.tsx

@@ -7,8 +7,8 @@ import type {
   UseFormReturn,
 } from '@graphcommerce/react-hook-form'
 import { assertFormGqlOperation } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 
@@ -27,9 +27,9 @@ export type NameFieldProps<TFieldValues extends FieldValues = FieldValues> = {
 export function NameFields<TFieldValues extends FieldValues = FieldValues>(
   props: NameFieldProps<TFieldValues>,
 ) {
-  const mr = i18n._(/* i18n */ 'Mr')
-  const mrs = i18n._(/* i18n */ 'Mrs')
-  const other = i18n._(/* i18n */ 'Other')
+  const mr = t`Mr`
+  const mrs = t`Mrs`
+  const other = t`Other`
 
   const {
     form,
@@ -56,7 +56,7 @@ export function NameFields<TFieldValues extends FieldValues = FieldValues>(
             control={control}
             required={required.prefix}
             name={names.prefix}
-            label={<Trans id='Prefix' />}
+            label={<Trans>Prefix</Trans>}
             showValid
             InputProps={{ readOnly }}
             options={prefixes.map((option) => ({ id: option, label: option }))}
@@ -70,7 +70,7 @@ export function NameFields<TFieldValues extends FieldValues = FieldValues>(
           required={required.firstname}
           variant='outlined'
           type='text'
-          label={<Trans id='First Name' />}
+          label={<Trans>First Name</Trans>}
           InputProps={{ readOnly }}
           showValid
         />
@@ -80,7 +80,7 @@ export function NameFields<TFieldValues extends FieldValues = FieldValues>(
           required={required.lastname}
           variant='outlined'
           type='text'
-          label={<Trans id='Last Name' />}
+          label={<Trans>Last Name</Trans>}
           InputProps={{ readOnly }}
           showValid
         />

package/components/NoOrdersFound/NoOrdersFound.tsx

@@ -1,5 +1,5 @@
 import { extendableComponent, iconBox, IconHeader } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 
@@ -16,7 +16,7 @@ export function NoOrdersFound(props: NoOrdersFoundProps) {
       sx={[(theme) => ({ marginTop: theme.spacings.sm }), ...(Array.isArray(sx) ? sx : [sx])]}
     >
       <IconHeader src={iconBox} size='small'>
-        <Trans id='No orders found' />
+        <Trans>No orders found</Trans>
       </IconHeader>
     </Box>
   )

package/components/Order/OrderCard/OrderCard.tsx

@@ -10,7 +10,7 @@ import {
   NextLink,
   sxx,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Avatar, Box, lighten, Paper, Skeleton } from '@mui/material'
 import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
@@ -140,11 +140,11 @@ export function OrderCard(props: OrderCardProps) {
         </Box>
         <Box sx={{ typography: 'body1', color: 'text.secondary' }}>#{number}</Box>
         <Box>
-          <Trans id='Grand total'>Grand Total</Trans>: <Money {...total?.grand_total} />
+          <Trans>Grand Total</Trans>: <Money {...total?.grand_total} />
         </Box>
 
         <Box>
-          <Trans id='Status'>Status</Trans>:{' '}
+          <Trans>Status</Trans>:{' '}
           <OrderStateLabel {...props} status={status} sx={{ typography: 'body1' }} short />
         </Box>
       </Box>

package/components/Order/OrderDetails/OrderDetails.tsx

@@ -4,7 +4,7 @@ import {
   extendableComponent,
   SectionContainer,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, lighten, Typography } from '@mui/material'
 import { AddressMultiLine } from '../../AddressMultiLine/AddressMultiLine'

package/components/Order/OrderItem/OrderItem.tsx

@@ -6,7 +6,7 @@ import {
   filterNonNullableKeys,
   type ActionCardProps,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Box } from '@mui/material'
 import type { OrderItemFragment } from './OrderItem.gql'
 
@@ -130,7 +130,7 @@ export function OrderItem(props: OrderItemProps) {
         <>
           {priceModifiers && priceModifiers.length > 0 && (
             <PriceModifiersList
-              label={<Trans id='Base Price'>Base price</Trans>}
+              label={<Trans>Base price</Trans>}
               modifiers={priceModifiers}
               total={product_sale_price.value ?? 0}
               currency={product_sale_price.currency}

package/components/Order/OrderItems/OrderItems.tsx

@@ -5,7 +5,7 @@ import {
   nonNullable,
   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 } from '@mui/material'
 import type { OrderItemProps } from '../OrderItem/OrderItem'
@@ -50,7 +50,7 @@ export function OrderItems(props: OrderItemsProps) {
     >
       <SectionContainer
         sx={{ '& .SectionHeader-root': { mt: 0 } }}
-        labelLeft={<Trans id='Ordered items' />}
+        labelLeft={<Trans>Ordered items</Trans>}
         variantLeft='h6'
         className={classes.items}
       >

package/components/Order/OrderStateLabel/OrderStateLabel.tsx

@@ -1,5 +1,5 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { OrderState, OrderStateProps } from '../../../utils'