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

package/CHANGELOG.md

@@ -1,5 +1,101 @@
 # 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) [`cf44b1f`](https://github.com/graphcommerce-org/graphcommerce/commit/cf44b1f723b7f2073a21abd6821768427cb95315) - Added hideTotals to MultiCartStartCheckout ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`af4463d`](https://github.com/graphcommerce-org/graphcommerce/commit/af4463dcbc6903241c8804ffba2f43b2b8e1a00b) - When running a cart mutation and the cartId is already passed to the form we use that value instead of retrieving the current cart again. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`415f9fb`](https://github.com/graphcommerce-org/graphcommerce/commit/415f9fb50454fb20cb533235969dd9ab4ffc134b) - Allow setting the cartId in the form for useFormGqlMutationCart by setting the cartId in the form AND allow setting the cartId for a whole context by wrapping with CartIdProvider ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`4e3f3f2`](https://github.com/graphcommerce-org/graphcommerce/commit/4e3f3f2df58638ba8ffc68ee9f274cdd6c45d6d4) - Allow setting the redirect value in the AddProductsToCartForm as a form value. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`af4463d`](https://github.com/graphcommerce-org/graphcommerce/commit/af4463dcbc6903241c8804ffba2f43b2b8e1a00b) - Solve issue where if the onBeforeSubmit would return false, it would still error if submitted while the cart is locked. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`1a06135`](https://github.com/graphcommerce-org/graphcommerce/commit/1a061357f4ccb430dd13194f755815474e140520) - Allow awaitable async requests for onStart on checkout button ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.54
 
 ## 9.1.0-canary.53

package/components/CartAdded/useCrosssellItems.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@graphcommerce/graphql'
+import { crossSellsHideCartItems } from '@graphcommerce/next-config/config'
 import { nonNullable } from '@graphcommerce/next-ui'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
@@ -6,8 +7,6 @@ import { useCartQuery } from '../../hooks'
 import { CartAddedDocument } from './CartAdded.gql'
 import { CrosssellsDocument } from './Crosssells.gql'
 
-const crossSellsHideCartItems = Boolean(import.meta.graphCommerce.crossSellsHideCartItems)
-
 export function useCrosssellItems() {
   const cartAdded = useCartQuery(CartAddedDocument)
   const items = (cartAdded.data?.cart?.items ?? []).filter(nonNullable)

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@graphcommerce/graphql'
 import { extendableComponent, FormDiv } from '@graphcommerce/next-ui'
 import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
 import { FormPersist, useForm, useFormCompose } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link, Typography } from '@mui/material'
 import React from 'react'
@@ -110,7 +110,7 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
                       formControl={{ sx: { display: 'block' } }}
                       name={`agreement${agreement.agreement_id}`}
                       rules={{
-                        required: i18n._(/* i18n */ 'You have to agree in order to proceed'),
+                        required: t`You have to agree in order to proceed`,
                       }}
                       label={labelContent}
                     />

package/components/CartFab/CartFab.tsx

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

package/components/CartIdContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+
+export const CartIdContext = createContext<string | null>(null)
+
+/**
+ * By default we use the currently selected cartId.
+ *
+ * However in a MultiCart scenario we need to be able to switch the cartId in certain contexts.
+ */
+export function CartIdProvider(props: {
+  children: React.ReactNode
+  cartId: string | null | undefined
+}) {
+  const { children, cartId } = props
+  return <CartIdContext.Provider value={cartId ?? null}>{children}</CartIdContext.Provider>
+}
+
+export function useCartIdContext() {
+  return useContext(CartIdContext)
+}

package/components/CartItemSummary/CartItemSummary.tsx

@@ -8,7 +8,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, Divider } from '@mui/material'
 import { useCartQuery } from '../../hooks'
@@ -54,7 +54,7 @@ export function CartItemSummary(props: OrderSummaryProps) {
     >
       <SectionContainer
         sx={{ '& .SectionHeader-root': { mt: 0 } }}
-        labelLeft={<Trans id='Order summary' />}
+        labelLeft={<Trans>Order summary</Trans>}
         variantLeft='h6'
         className={classes.items}
       >

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,8 +1,9 @@
 import { Money } from '@graphcommerce/magento-store'
-import { extendableComponent, iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
-import type { ButtonProps, SxProps, Theme } from '@mui/material'
-import { Box, Button, Link } from '@mui/material'
+import type { ButtonProps } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link } from '@mui/material'
 import React from 'react'
 import { useCheckoutShouldLoginToContinue } from '../../hooks'
 import type { CartStartCheckoutFragment } from './CartStartCheckout.gql'
@@ -12,11 +13,12 @@ export type CartStartCheckoutProps = {
   sx?: SxProps<Theme>
   buttonProps?: ButtonProps<'button'>
   disabled?: boolean
+  hideTotal?: boolean
   cart?: CartStartCheckoutFragment | null | undefined
   onStart?: (
-    e: React.MouseEvent<HTMLButtonElement>,
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     cart: CartStartCheckoutFragment | null | undefined,
-  ) => void
+  ) => Promise<void>
 }
 
 const name = 'CartStartCheckout'
@@ -35,6 +37,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
     onStart,
     buttonProps: { onClick, ...buttonProps } = {},
     disabled,
+    hideTotal = false,
     sx = [],
     cart,
   } = props
@@ -70,10 +73,9 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
         size='large'
         className={classes.checkoutButton}
         endIcon={<IconSvg src={iconChevronRight} />}
-        onClick={(e) => {
+        onClick={async (e) => {
           onClick?.(e)
-          onStart?.(e, cart)
-          return onClick?.(e)
+          await onStart?.(e, cart)
         }}
         disabled={disabled || !hasTotals || hasErrors || shouldLoginToContinue}
         {...buttonProps}
@@ -88,7 +90,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
         >
           <Trans>Start Checkout</Trans>
         </Box>{' '}
-        {hasTotals && (
+        {hasTotals && !hideTotal && (
           <span className={classes.checkoutMoney}>
             <Money {...cart?.prices?.grand_total} />
           </span>

package/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -1,6 +1,6 @@
 import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
-import { iconChevronRight, IconSvg, LinkOrButton } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { iconChevronRight, IconSvg, LinkOrButton, sxx } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { useCheckoutShouldLoginToContinue } from '../../hooks'
@@ -8,13 +8,12 @@ import type { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutLinkOrButtonProps = {
   children?: React.ReactNode
-  sx?: SxProps<Theme>
   disabled?: boolean
   cart?: CartStartCheckoutFragment | null | undefined
   onStart?: (
     e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement>,
     cart: CartStartCheckoutFragment | null | undefined,
-  ) => void
+  ) => Promise<void>
   linkOrButtonProps?: LinkOrButtonProps
 }
 
@@ -24,6 +23,7 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
     disabled,
     linkOrButtonProps: { onClick, button, ...linkOrButtonProps } = {},
     cart,
+    children,
   } = props
 
   const shouldLoginToContinue = useCheckoutShouldLoginToContinue()
@@ -34,11 +34,11 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
   return (
     <LinkOrButton
       href='/checkout'
-      onClick={(
+      onClick={async (
         e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement, MouseEvent>,
       ) => {
         onClick?.(e)
-        onStart?.(e, cart)
+        await onStart?.(e, cart)
       }}
       button={{ variant: 'pill', ...button }}
       disabled={disabled || !hasTotals || hasErrors || shouldLoginToContinue}
@@ -46,7 +46,7 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
       endIcon={<IconSvg src={iconChevronRight} />}
       {...linkOrButtonProps}
     >
-      <Trans id='Next' />
+      {children ?? <Trans>Next</Trans>}
     </LinkOrButton>
   )
 }

package/components/CartSummary/CartSummary.tsx

@@ -1,6 +1,6 @@
 import { useHistoryLink } from '@graphcommerce/framer-next-pages'
 import { breakpointVal, extendableComponent, 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, lighten, Link, Typography } from '@mui/material'
 import React from 'react'
@@ -89,7 +89,7 @@ export function CartSummary(props: CartSummaryProps) {
           <SectionContainer
             variantLeft='h5'
             labelLeft={
-              is_virtual ? <Trans id='Confirmation' /> : <Trans id='Confirmation + Track & trace' />
+              is_virtual ? <Trans>Confirmation</Trans> : <Trans>Confirmation + Track & trace</Trans>
             }
             sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '8px' } }}
           />
@@ -99,7 +99,7 @@ export function CartSummary(props: CartSummaryProps) {
           <Box>
             <SectionContainer
               variantLeft='h5'
-              labelLeft={<Trans id='Shipping method' />}
+              labelLeft={<Trans>Shipping method</Trans>}
               sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '8px' } }}
             />
             <Typography variant='body1'>
@@ -112,7 +112,7 @@ export function CartSummary(props: CartSummaryProps) {
           <Box>
             <SectionContainer
               variantLeft='h5'
-              labelLeft={<Trans id='Shipping address' />}
+              labelLeft={<Trans>Shipping address</Trans>}
               sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '8px' } }}
               labelRight={
                 editable ? (
@@ -123,7 +123,7 @@ export function CartSummary(props: CartSummaryProps) {
                     onClick={historyOnClick}
                     underline='hover'
                   >
-                    <Trans id='Edit' />
+                    <Trans>Edit</Trans>
                   </Link>
                 ) : undefined
               }
@@ -134,7 +134,7 @@ export function CartSummary(props: CartSummaryProps) {
         <Box>
           <SectionContainer
             variantLeft='h5'
-            labelLeft={<Trans id='Billing address' />}
+            labelLeft={<Trans>Billing address</Trans>}
             sx={{ '& .SectionHeader-root': { marginTop: 0, paddingBottom: '8px' } }}
             labelRight={
               editable ? (
@@ -144,7 +144,7 @@ export function CartSummary(props: CartSummaryProps) {
                   variant='body2'
                   underline='hover'
                 >
-                  <Trans id='Edit' />
+                  <Trans>Edit</Trans>
                 </Link>
               ) : undefined
             }

package/components/CartTotals/CartTotals.tsx

@@ -1,6 +1,7 @@
 import { Money } from '@graphcommerce/magento-store'
+import { magentoVersion } from '@graphcommerce/next-config/config'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Divider, lighten } from '@mui/material'
 import { useCartQuery, useDisplayInclTax } from '../../hooks'
@@ -50,7 +51,7 @@ export function CartTotals(props: CartTotalsProps) {
   const shippingMethod = shipping_addresses?.[0]?.selected_shipping_method
 
   const shippingMethodPrices =
-    import.meta.graphCommerce.magentoVersion >= 246
+    magentoVersion >= 246
       ? shippingMethod
       : shipping_addresses?.[0]?.available_shipping_methods?.find(
           (avail) =>
@@ -92,7 +93,7 @@ export function CartTotals(props: CartTotalsProps) {
           sx={{ display: 'flex', justifyContent: 'space-between' }}
         >
           <Box>
-            <Trans id='Products' />
+            <Trans>Products</Trans>
           </Box>
           <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
             <Money {...(inclTax ? prices.subtotal_including_tax : prices.subtotal_excluding_tax)} />
@@ -131,10 +132,7 @@ export function CartTotals(props: CartTotalsProps) {
           sx={{ display: 'flex', justifyContent: 'space-between' }}
         >
           <Box>
-            <Trans
-              id='Shipping ({0} {1})'
-              values={{ 0: shippingMethod.carrier_title, 1: shippingMethod.method_title }}
-            />
+            <Trans>Shipping ({shippingMethod.carrier_title} {shippingMethod.method_title})</Trans>
           </Box>
           <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
             <Money
@@ -177,7 +175,7 @@ export function CartTotals(props: CartTotalsProps) {
           })}
         >
           <Box>
-            <Trans id='Grand total' />
+            <Trans>Grand total</Trans>
           </Box>
           <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
             <Money {...prices.grand_total} />
@@ -198,7 +196,7 @@ export function CartTotals(props: CartTotalsProps) {
             }}
           >
             <Box>
-              <Trans id='Including {0}' values={{ 0: tax?.label }} />
+              <Trans>Including {tax?.label}</Trans>
             </Box>
             <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
               <Money {...tax?.amount} />

package/components/EditBillingAddressForm/EditBillingAddressForm.tsx

@@ -13,7 +13,7 @@ import {
 } from '@graphcommerce/magento-customer'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import { Button, Form, FormActions, FormDivider, FormRow } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { GetBillingAddressDocument } from '../../graphql'
 import { useCartQuery, useFormGqlMutationCart } from '../../hooks'
@@ -96,7 +96,7 @@ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
             size='large'
             loading={formState.isSubmitting}
           >
-            <Trans id='Save changes' />
+            <Trans>Save changes</Trans>
           </Button>
         </FormActions>
       </Form>

package/components/EmptyCart/EmptyCart.tsx

@@ -1,8 +1,12 @@
 import type { FullPageMessageProps } from '@graphcommerce/next-ui'
-import { FullPageMessage, iconShoppingBag, IconSvg } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import {
+  FullPageMessage,
+  iconShoppingBag,
+  IconSvg,
+  OverlayCloseButton,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Button } from '@mui/material'
 import React from 'react'
 
 export type EmptyCartProps = {
@@ -15,18 +19,22 @@ export function EmptyCart(props: EmptyCartProps) {
 
   return (
     <FullPageMessage
-      title={<Trans id='Your cart is empty' />}
+      title={<Trans>Your cart is empty</Trans>}
       icon={<IconSvg src={iconShoppingBag} size='xxl' />}
       button={
         button || (
-          <Button href='/' variant='pill' color='secondary' size='large'>
-            <Trans id='Continue shopping' />
-          </Button>
+          <OverlayCloseButton variant='pill' color='secondary' size='large'>
+            <Trans>Continue shopping</Trans>
+          </OverlayCloseButton>
         )
       }
       {...rest}
     >
-      {children ?? <Trans id='Discover our collection and add items to your cart!' />}
+      {children ?? (
+        <Trans>
+          Discover our collection and add items to your cart!
+        </Trans>
+      )}
     </FullPageMessage>
   )
 }

package/components/InlineAccount/InlineAccount.tsx

@@ -6,7 +6,7 @@ import {
   useGuestQuery,
 } from '@graphcommerce/magento-customer'
 import { Button, extendableComponent, FormRow } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, TextField, Typography } from '@mui/material'
 import React, { useState } from 'react'
@@ -75,9 +75,9 @@ export function InlineAccount(props: InlineAccountProps) {
         >
           <div>
             <Typography variant='h4' className={classes.title} sx={{ paddingBottom: '8px' }}>
-              {title ?? <Trans id='No account yet?' />}
+              {title ?? <Trans>No account yet?</Trans>}
             </Typography>
-            {description ?? <Trans id='You can track your order status and much more!' />}
+            {description ?? <Trans>You can track your order status and much more!</Trans>}
           </div>
           <div>
             {!toggled && (
@@ -89,7 +89,7 @@ export function InlineAccount(props: InlineAccountProps) {
                 className={classes.button}
                 sx={{ minWidth: 160 }}
               >
-                <Trans id='Create an account' />
+                <Trans>Create an account</Trans>
               </Button>
             )}
           </div>
@@ -99,7 +99,7 @@ export function InlineAccount(props: InlineAccountProps) {
             <FormRow>
               <TextField
                 variant='outlined'
-                label={<Trans id='Email address' />}
+                label={<Trans>Email address</Trans>}
                 value={cart?.email}
                 InputProps={{
                   readOnly: true,

package/components/index.ts

@@ -1,15 +1,17 @@
 export * from './ApolloCartError'
 export * from './CartAdded'
+export * from './CartAddress/CartAddress.gql'
 export * from './CartAddressMultiLine/CartAddressMultiLine'
 export * from './CartAddressSingleLine/CartAddressSingleLine'
 export * from './CartAgreementsForm/CartAgreements.gql'
 export * from './CartAgreementsForm/CartAgreementsForm'
 export * from './CartFab/CartFab'
+export * from './CartIdContext'
 export * from './CartItemSummary/CartItemSummary'
 export * from './CartStartCheckout'
 export * from './CartSummary/CartSummary'
 export * from './CartSummary/CartSummary.gql'
 export * from './CartTotals/CartTotals'
+export * from './EditBillingAddressForm/EditBillingAddressForm'
 export * from './EmptyCart/EmptyCart'
 export * from './InlineAccount/InlineAccount'
-export * from './EditBillingAddressForm/EditBillingAddressForm'

package/hooks/useCartIdCreate.ts

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

package/hooks/useCartPermissions.ts

@@ -1,12 +1,9 @@
 import { useCustomerSession } from '@graphcommerce/magento-customer/hooks/useCustomerSession'
+import { permissions } from '@graphcommerce/next-config/config'
 import { useStorefrontConfig } from '@graphcommerce/next-ui'
 
 function useCartPermissions() {
-  return (
-    useStorefrontConfig().permissions?.cart ??
-    import.meta.graphCommerce.permissions?.cart ??
-    'ENABLED'
-  )
+  return useStorefrontConfig().permissions?.cart ?? permissions?.cart ?? 'ENABLED'
 }
 
 export function useCartEnabled() {

package/hooks/useCheckoutPermissions.ts

@@ -1,12 +1,9 @@
 import { useCustomerSession } from '@graphcommerce/magento-customer/hooks/useCustomerSession'
+import { permissions } from '@graphcommerce/next-config/config'
 import { useStorefrontConfig } from '@graphcommerce/next-ui'
 
 function useCheckoutPermission() {
-  return (
-    useStorefrontConfig().permissions?.checkout ??
-    import.meta.graphCommerce.permissions?.checkout ??
-    'ENABLED'
-  )
+  return useStorefrontConfig().permissions?.checkout ?? permissions?.checkout ?? 'ENABLED'
 }
 
 export function useCheckoutGuestEnabled() {

package/hooks/useDisplayInclTax.ts

@@ -1,6 +1,5 @@
+import { cartDisplayPricesInclTax } from '@graphcommerce/next-config/config'
 import { useStorefrontConfig } from '@graphcommerce/next-ui'
 
 export const useDisplayInclTax = () =>
-  useStorefrontConfig().cartDisplayPricesInclTax ??
-  import.meta.graphCommerce.cartDisplayPricesInclTax ??
-  true
+  useStorefrontConfig().cartDisplayPricesInclTax ?? cartDisplayPricesInclTax ?? true

package/hooks/useFormGqlMutationCart.ts

@@ -6,6 +6,7 @@ import type {
 } from '@graphcommerce/react-hook-form'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { GraphQLError, Kind } from 'graphql'
+import { useCartIdContext } from '../components/CartIdContext'
 import { isProtectedCartOperation } from '../link/isProtectedCartOperation'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'
 import { useCartIdCreate } from './useCartIdCreate'
@@ -19,7 +20,8 @@ export function useFormGqlMutationCart<
   options: UseFormGraphQlOptions<Q, V> & { submitWhileLocked?: boolean } = {},
   operationOptions?: MutationHookOptions<Q, V>,
 ): UseFormGqlMutationReturn<Q, V> {
-  const cartId = useCartIdCreate()
+  const cartIdCreate = useCartIdCreate()
+  const cartIdFromContext = useCartIdContext()
   const client = useApolloClient()
   const shouldLoginToContinue = useCartShouldLoginToContinue()
 
@@ -34,20 +36,25 @@ export function useFormGqlMutationCart<
     document,
     {
       ...options,
-      onBeforeSubmit: async (variables) => {
-        if (shouldLoginToContinue && shouldBlockOperation) {
-          return false
-        }
-        const vars = { ...variables, cartId: await cartId() }
+      onBeforeSubmit: async (incoming) => {
+        const variables = options.onBeforeSubmit ? await options.onBeforeSubmit(incoming) : incoming
+        if (variables === false) return false
+        if (shouldLoginToContinue && shouldBlockOperation) return false
 
         const res = client.cache.readQuery({ query: CurrentCartIdDocument })
-        if (!options.submitWhileLocked && res?.currentCartId?.locked) {
-          throw Error('Could not submit form, cart is locked')
-          // console.log('Could not submit form, cart is locked', res.currentCartId.locked)
-          // return false
+        const cartId = cartIdFromContext ?? incoming.cartId ?? (await cartIdCreate())
+
+        if (
+          cartId === res?.currentCartId?.id &&
+          res?.currentCartId?.locked &&
+          !options.submitWhileLocked
+        ) {
+          throw Error(
+            'Could not submit form, cart is locked. This is a bug. You may never submit a form while the cart is locked.',
+          )
         }
 
-        return options.onBeforeSubmit ? options.onBeforeSubmit(vars) : vars
+        return { ...variables, cartId }
       },
     },
     { errorPolicy: 'all', ...operationOptions },

package/link/cartLink.ts

@@ -5,7 +5,8 @@ import { CustomerTokenDocument, getCustomerAccountCanSignIn } from '@graphcommer
 import type { PushRouter } from '@graphcommerce/magento-customer/link/customerLink'
 import { pushWithPromise } from '@graphcommerce/magento-customer/link/customerLink'
 import type { ErrorCategory } from '@graphcommerce/magento-graphql'
-import { t } from '@lingui/macro'
+import { permissions } from '@graphcommerce/next-config/config'
+import { t } from '@lingui/core/macro'
 import type { GraphQLFormattedError } from 'graphql'
 import { GraphQLError } from 'graphql'
 import { writeCartId } from '../hooks'
@@ -122,7 +123,7 @@ const cartPermissionLink = (router: PushRouter) =>
 export const cartLink = (router: PushRouter) => {
   const links = [cartErrorLink]
 
-  if (!(import.meta.graphCommerce.permissions?.cart === 'ENABLED')) {
+  if (!(permissions?.cart === 'ENABLED')) {
     links.push(cartPermissionLink(router))
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.54",
+  "version": "10.0.0-canary.56",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,29 +11,37 @@
       "project": "./tsconfig.json"
     }
   },
+  "exports": {
+    ".": "./index.ts",
+    "./components/CartAdded/useCrosssellItems": "./components/CartAdded/useCrosssellItems.ts",
+    "./hooks": "./hooks/index.ts",
+    "./plugins/CartDebuggerPlugin": "./plugins/CartDebuggerPlugin.tsx",
+    "./plugins/MagentoCartGraphqlProvider": "./plugins/MagentoCartGraphqlProvider.tsx",
+    "./plugins/useSignInFormMergeCart": "./plugins/useSignInFormMergeCart.ts"
+  },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.54",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.54",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.54",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.54",
-    "@graphcommerce/graphql": "^9.1.0-canary.54",
-    "@graphcommerce/image": "^9.1.0-canary.54",
-    "@graphcommerce/magento-customer": "^9.1.0-canary.54",
-    "@graphcommerce/magento-graphql": "^9.1.0-canary.54",
-    "@graphcommerce/magento-store": "^9.1.0-canary.54",
-    "@graphcommerce/next-ui": "^9.1.0-canary.54",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/react-hook-form": "^9.1.0-canary.54",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.54",
-    "@lingui/core": "^4.2.1",
-    "@lingui/macro": "^4.2.1",
-    "@lingui/react": "^4.2.1",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.56",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.56",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.56",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.56",
+    "@graphcommerce/graphql": "^10.0.0-canary.56",
+    "@graphcommerce/image": "^10.0.0-canary.56",
+    "@graphcommerce/magento-customer": "^10.0.0-canary.56",
+    "@graphcommerce/magento-graphql": "^10.0.0-canary.56",
+    "@graphcommerce/magento-store": "^10.0.0-canary.56",
+    "@graphcommerce/next-ui": "^10.0.0-canary.56",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.56",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.56",
+    "@lingui/core": "^5",
+    "@lingui/macro": "^5",
+    "@lingui/react": "^5",
     "@mui/material": "^5.10.16",
     "framer-motion": "^11.0.0",
     "graphql": "^16.0.0",
     "next": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   }
 }

package/utils/cartPermissions.ts

@@ -1,12 +1,9 @@
+import { permissions } from '@graphcommerce/next-config/config'
 import { storefrontConfig } from '@graphcommerce/next-ui'
 
 /** @public */
 function getCartPermissions(locale: string | undefined) {
-  return (
-    storefrontConfig(locale)?.permissions?.cart ??
-    import.meta.graphCommerce.permissions?.cart ??
-    'ENABLED'
-  )
+  return storefrontConfig(locale)?.permissions?.cart ?? permissions?.cart ?? 'ENABLED'
 }
 
 /** @public */

package/utils/checkoutPermissions.ts

@@ -1,11 +1,8 @@
+import { permissions } from '@graphcommerce/next-config/config'
 import { storefrontConfig } from '@graphcommerce/next-ui'
 
 function getCheckoutPermission(locale: string | undefined) {
-  return (
-    storefrontConfig(locale)?.permissions?.checkout ??
-    import.meta.graphCommerce.permissions?.checkout ??
-    'ENABLED'
-  )
+  return storefrontConfig(locale)?.permissions?.checkout ?? permissions?.checkout ?? 'ENABLED'
 }
 
 export function getCheckoutIsDisabled(locale: string | undefined) {