@graphcommerce/magento-cart 4.2.11 → 4.2.14

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # Change Log
 
+## 4.2.14
+
+### Patch Changes
+
+- Updated dependencies [[`c30893857`](https://github.com/graphcommerce-org/graphcommerce/commit/c3089385791291e812a48c2691a39a2325ee0439)]:
+  - @graphcommerce/magento-store@4.2.3
+  - @graphcommerce/magento-customer@4.2.12
+
+## 4.2.13
+
+### 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/framer-scroller@2.1.10
+  - @graphcommerce/magento-customer@4.2.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.12
+
+### Patch Changes
+
+- Updated dependencies [[`7618f86da`](https://github.com/graphcommerce-org/graphcommerce/commit/7618f86da930929b10b6baf145646356b1bb3793)]:
+  - @graphcommerce/magento-graphql@3.0.11
+  - @graphcommerce/magento-customer@4.2.10
+
 ## 4.2.11
 
 ### Patch Changes

package/components/ApolloCartError/ApolloCartErrorAlert.tsx

@@ -2,7 +2,8 @@ import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/ecommerc
 import { useQuery } from '@graphcommerce/graphql'
 import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import Link from 'next/link'
 import { useClearCurrentCartId } from '../../hooks/useClearCurrentCartId'
@@ -22,14 +23,16 @@ export function ApolloCartErrorAlert(props: ApolloCartErrorAlertProps) {
   const [, authorizationError] = graphqlErrorByCategory({
     category: 'graphql-authorization',
     error,
-    mask: token?.token ? t`Please reauthenticate and try again` : t`You must sign in to continue`,
+    mask: token?.token
+      ? i18n._(/* i18n */ `Please reauthenticate and try again`)
+      : i18n._(/* i18n */ `You must sign in to continue`),
   })
 
   action =
     authorizationError && clear ? (
       <Link href='/account/signin' passHref>
         <Button>
-          <Trans>Sign in</Trans>
+          <Trans id='Sign in' />
         </Button>
       </Link>
     ) : (

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -7,7 +7,7 @@ import {
   UseFormComposeOptions,
   useFormPersist,
 } from '@graphcommerce/react-hook-form'
-import { t } from '@lingui/macro'
+import { i18n } from '@lingui/core'
 import {
   Box,
   Checkbox,
@@ -72,7 +72,7 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
                       name={`agreement[${agreement.agreement_id}]`}
                       control={control}
                       rules={{
-                        required: t`You have to agree in order to proceed`,
+                        required: i18n._(/* i18n */ `You have to agree in order to proceed`),
                       }}
                       render={({
                         field: { onChange, value, name, ref, onBlur },

package/components/CartFab/CartFab.tsx

@@ -6,7 +6,7 @@ import {
   useScrollY,
   useFabSize,
 } from '@graphcommerce/next-ui'
-import { t } from '@lingui/macro'
+import { i18n } from '@lingui/core'
 import { alpha, Fab, FabProps, NoSsr, styled, useTheme, Box, SxProps, Theme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import PageLink from 'next/link'
@@ -58,7 +58,7 @@ function CartFabContent(props: CartFabContentProps) {
       <PageLink href='/cart' passHref>
         <MotionFab
           className={classes.cart}
-          aria-label={t`Cart`}
+          aria-label={i18n._(/* i18n */ `Cart`)}
           color='inherit'
           size='responsive'
           style={{ backgroundColor }}

package/components/CartItemSummary/CartItemSummary.tsx

@@ -8,7 +8,7 @@ import {
   IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Box, Divider, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { useCartQuery } from '../../hooks'
@@ -54,7 +54,7 @@ export function CartItemSummary(props: OrderSummaryProps) {
     >
       <SectionContainer
         sx={{ '& .SectionHeader': { mt: 0 } }}
-        labelLeft={<Trans>Order summary</Trans>}
+        labelLeft={<Trans id='Order summary' />}
         // labelRight={
         //   <PageLink href='/download' passHref>
         //     <Link color='secondary'>Download invoice</Link>

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,6 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import { iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Box, Button, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
@@ -53,7 +53,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
               '& ~ span.MuiButton-endIcon': { marginLeft: '6px' },
             })}
           >
-            <Trans>Start Checkout</Trans>
+            <Trans id='Start Checkout' />
           </Box>{' '}
           {hasTotals && (
             <span className={classes.checkoutMoney}>

package/components/CartSummary/CartSummary.tsx

@@ -1,6 +1,7 @@
 import { useHistoryLink } from '@graphcommerce/framer-next-pages'
 import { SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
@@ -59,7 +60,7 @@ export function CartSummary(props: CartSummaryProps) {
         <Box>
           <SectionContainer
             variantLeft='h5'
-            labelLeft={t`Confirmation + Track & trace`}
+            labelLeft={<Trans id='Confirmation + Track & trace' />}
             sx={{ '& .SectionHeader': { marginTop: 0, paddingBottom: '8px' } }}
           />
           <Typography variant='body1'>{email || ''}</Typography>
@@ -67,7 +68,7 @@ export function CartSummary(props: CartSummaryProps) {
         <Box>
           <SectionContainer
             variantLeft='h5'
-            labelLeft={t`Shipping method`}
+            labelLeft={<Trans id='Shipping method' />}
             sx={{ '& .SectionHeader': { marginTop: 0, paddingBottom: '8px' } }}
           />
           <Typography variant='body1'>
@@ -80,7 +81,7 @@ export function CartSummary(props: CartSummaryProps) {
             <Box>
               <SectionContainer
                 variantLeft='h5'
-                labelLeft={t`Shipping address`}
+                labelLeft={<Trans id='Shipping address' />}
                 sx={{ '& .SectionHeader': { marginTop: 0, paddingBottom: '8px' } }}
                 labelRight={
                   editable ? (
@@ -91,7 +92,7 @@ export function CartSummary(props: CartSummaryProps) {
                         onClick={historyOnClick}
                         underline='hover'
                       >
-                        <Trans>Edit</Trans>
+                        <Trans id='Edit' />
                       </Link>
                     </PageLink>
                   ) : undefined
@@ -102,13 +103,13 @@ export function CartSummary(props: CartSummaryProps) {
             <Box>
               <SectionContainer
                 variantLeft='h5'
-                labelLeft={t`Billing address`}
+                labelLeft={<Trans id='Billing address' />}
                 sx={{ '& .SectionHeader': { marginTop: 0, paddingBottom: '8px' } }}
                 labelRight={
                   editable ? (
                     <PageLink href='/checkout/edit/billing-address' passHref>
                       <Link color='secondary' variant='body2' underline='hover'>
-                        <Trans>Edit</Trans>
+                        <Trans id='Edit' />
                       </Link>
                     </PageLink>
                   ) : undefined

package/components/CartTotals/CartTotals.tsx

@@ -1,6 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import { AnimatedRow, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Box, Divider, lighten, SxProps, Theme } from '@mui/material'
 import { AnimatePresence } from 'framer-motion'
 import { useCartQuery, useDisplayInclTax } from '../../hooks'
@@ -74,7 +74,7 @@ export function CartTotals(props: CartTotalsProps) {
             sx={{ display: 'flex', justifyContent: 'space-between', typography: 'subtitle1' }}
           >
             <Box>
-              <Trans>Products</Trans>
+              <Trans id='Products' />
             </Box>
             <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
               <Money
@@ -116,9 +116,10 @@ export function CartTotals(props: CartTotalsProps) {
             sx={{ display: 'flex', justifyContent: 'space-between', typography: 'subtitle1' }}
           >
             <Box>
-              <Trans>
-                Shipping ({shippingMethod.carrier_title} {shippingMethod.method_title})
-              </Trans>
+              <Trans
+                id='Shipping ({0} {1})'
+                values={{ 0: shippingMethod.carrier_title, 1: shippingMethod.method_title }}
+              />
             </Box>
             <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
               <Money
@@ -160,7 +161,7 @@ export function CartTotals(props: CartTotalsProps) {
             })}
           >
             <Box>
-              <Trans>Grand total</Trans>
+              <Trans id='Grand total' />
             </Box>
             <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
               <Money {...prices.grand_total} />
@@ -182,7 +183,7 @@ export function CartTotals(props: CartTotalsProps) {
               }}
             >
               <Box>
-                <Trans>Including {tax?.label}</Trans>
+                <Trans id='Including {0}' values={{ 0: tax?.label }} />
               </Box>
               <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
                 <Money {...tax?.amount} />

package/components/EmptyCart/EmptyCart.tsx

@@ -1,5 +1,5 @@
 import { FullPageMessage, IconSvg, iconShoppingBag } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import Link from 'next/link'
 import React from 'react'
@@ -10,17 +10,17 @@ export function EmptyCart(props: EmptyCartProps) {
 
   return (
     <FullPageMessage
-      title={<Trans>Your cart is empty</Trans>}
+      title={<Trans id='Your cart is empty' />}
       icon={<IconSvg src={iconShoppingBag} size='xxl' />}
       button={
         <Link href='/' passHref>
           <Button variant='pill' color='secondary' size='large'>
-            <Trans>Continue shopping</Trans>
+            <Trans id='Continue shopping' />
           </Button>
         </Link>
       }
     >
-      {children ?? <Trans>Discover our collection and add items to your cart!</Trans>}
+      {children ?? <Trans id='Discover our collection and add items to your cart!' />}
     </FullPageMessage>
   )
 }

package/components/InlineAccount/InlineAccount.tsx

@@ -5,7 +5,7 @@ import {
   IsEmailAvailableDocument,
 } from '@graphcommerce/magento-customer'
 import { Button, FormRow, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Box, SxProps, TextField, Theme, Typography } from '@mui/material'
 import React, { useState } from 'react'
 import { useCartQuery } from '../../hooks/useCartQuery'
@@ -75,9 +75,9 @@ export function InlineAccount(props: InlineAccountProps) {
             >
               <div>
                 <Typography variant='h4' className={classes.title} sx={{ paddingBottom: '8px' }}>
-                  {title ?? <Trans>No account yet?</Trans>}
+                  {title ?? <Trans id='No account yet?' />}
                 </Typography>
-                {description ?? <Trans>You can track your order status and much more!</Trans>}
+                {description ?? <Trans id='You can track your order status and much more!' />}
               </div>
               <div>
                 {!toggled && (
@@ -89,7 +89,7 @@ export function InlineAccount(props: InlineAccountProps) {
                     className={classes.button}
                     sx={{ minWidth: 160 }}
                   >
-                    <Trans>Create an account</Trans>
+                    <Trans id='Create an account' />
                   </Button>
                 )}
               </div>
@@ -122,9 +122,9 @@ export function InlineAccount(props: InlineAccountProps) {
           <Box className={classes.innerContainer}>
             <div>
               <Typography variant='h4' className={classes.title}>
-                {title ?? <Trans>Have an account?</Trans>}
+                {title ?? <Trans id='Have an account?' />}
               </Typography>
-              {description ?? <Trans>You can find your order history in your account!</Trans>}
+              {description ?? <Trans id='You can find your order history in your account!' />}
             </div>
             <div>
               <Button
@@ -133,7 +133,7 @@ export function InlineAccount(props: InlineAccountProps) {
                 href={accountHref}
                 className={classes.button}
               >
-                <Trans>Account</Trans>
+                <Trans id='Account' />
               </Button>
             </div>
           </Box>

package/hooks/useCartIdCreate.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@graphcommerce/graphql'
-import { t } from '@lingui/macro'
+import { i18n } from '@lingui/core'
 import { CreateEmptyCartDocument } from './CreateEmptyCart.gql'
 import { useAssignCurrentCartId } from './useAssignCurrentCartId'
 import { useCurrentCartId } from './useCurrentCartId'
@@ -13,7 +13,7 @@ export function useCartIdCreate() {
     if (cartId) return cartId
 
     const { data } = await create()
-    if (!data?.createEmptyCart) throw Error(t`Could not create an empty cart`)
+    if (!data?.createEmptyCart) throw Error(i18n._(/* i18n */ `Could not create an empty cart`))
 
     // We store the cartId that is returned as the currentCartId result
     assignCurrentCartId(data.createEmptyCart)

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.2.11",
+  "version": "4.2.14",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,25 +12,26 @@
     }
   },
   "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/ecommerce-ui": "1.0.11",
     "@graphcommerce/framer-next-pages": "3.2.1",
-    "@graphcommerce/framer-scroller": "2.1.9",
-    "@graphcommerce/graphql": "3.1.2",
+    "@graphcommerce/framer-scroller": "2.1.10",
+    "@graphcommerce/graphql": "3.1.3",
     "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/magento-customer": "4.2.9",
-    "@graphcommerce/magento-graphql": "3.0.10",
-    "@graphcommerce/magento-store": "4.2.1",
-    "@graphcommerce/next-ui": "4.7.1",
-    "@graphcommerce/react-hook-form": "3.1.2"
+    "@graphcommerce/magento-customer": "4.2.12",
+    "@graphcommerce/magento-graphql": "3.0.12",
+    "@graphcommerce/magento-store": "4.2.3",
+    "@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",