@graphcommerce/magento-cart 8.1.0-canary.8 → 9.0.0-canary.100

package/components/CartFab/CartFab.tsx

@@ -11,6 +11,7 @@ import { i18n } from '@lingui/core'
 import { alpha, Fab, FabProps, styled, useTheme, Box, SxProps, Theme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
+import { useCartEnabled, useCartShouldLoginToContinue } from '../../hooks'
 import { useCartQuery } from '../../hooks/useCartQuery'
 import { CartFabDocument } from './CartFab.gql'
 import { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
@@ -100,7 +101,12 @@ function CartFabContent(props: CartFabContentProps) {
 }
 
 export function CartFab(props: CartFabProps) {
-  const cartQuery = useCartQuery(CartFabDocument)
+  const cartEnabled = useCartEnabled()
+  const shouldLoginToContinue = useCartShouldLoginToContinue()
+  const cartQuery = useCartQuery(CartFabDocument, {
+    skip: shouldLoginToContinue,
+  })
+  if (!cartEnabled) return null
 
   return (
     <WaitForQueries waitFor={cartQuery} fallback={<CartFabContent {...props} total_quantity={0} />}>

package/components/CartStartCheckout/CartStartCheckout.graphql

@@ -1,4 +1,4 @@
-fragment CartStartCheckout on Cart @injectable {
+fragment CartStartCheckout on Cart {
   prices {
     grand_total {
       ...Money

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,8 +1,9 @@
 import { Money } from '@graphcommerce/magento-store'
 import { iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
-import { Box, Button, ButtonProps, SxProps, Theme } from '@mui/material'
+import { Trans } from '@lingui/macro'
+import { Box, Button, ButtonProps, Link, SxProps, Theme } from '@mui/material'
 import React from 'react'
+import { useCheckoutShouldLoginToContinue } from '../../hooks'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutProps = {
@@ -17,12 +18,13 @@ export type CartStartCheckoutProps = {
   ) => void
 }
 
-const name = 'CartStartCheckout' as const
+const name = 'CartStartCheckout'
 const parts = [
   'checkoutButtonContainer',
   'checkoutButton',
   'checkoutButtonTotal',
   'checkoutMoney',
+  'loginContainer',
 ] as const
 const { classes } = extendableComponent(name, parts)
 
@@ -36,6 +38,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
     cart,
   } = props
 
+  const shouldLoginToContinue = useCheckoutShouldLoginToContinue()
   const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
   const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
@@ -43,10 +46,21 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
     <Box
       className={classes.checkoutButtonContainer}
       sx={[
-        (theme) => ({ textAlign: 'center', my: theme.spacings.md }),
+        (theme) => ({
+          textAlign: 'center',
+          my: theme.spacings.md,
+        }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
+      {shouldLoginToContinue && (
+        <Box sx={{ mb: 1 }} className={classes.loginContainer}>
+          <Link href='/account/signin'>
+            <Trans>You must first login before you can continue</Trans>
+          </Link>
+        </Box>
+      )}
+
       <Button
         href='/checkout'
         id='cart-start-checkout'
@@ -60,7 +74,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
           onStart?.(e, cart)
           return onClick?.(e)
         }}
-        disabled={disabled || !hasTotals || hasErrors}
+        disabled={disabled || !hasTotals || hasErrors || shouldLoginToContinue}
         {...buttonProps}
       >
         <Box
@@ -71,7 +85,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
             '& ~ span.MuiButton-endIcon': { marginLeft: '6px' },
           })}
         >
-          <Trans id='Start Checkout' />
+          <Trans>Start Checkout</Trans>
         </Box>{' '}
         {hasTotals && (
           <span className={classes.checkoutMoney}>
@@ -84,7 +98,9 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
 
       {hasErrors && (
         <Box sx={(theme) => ({ color: 'error.main', mt: theme.spacings.xs })}>
-          <Trans id='Some items in your cart contain errors, please update or remove them, then try again.' />
+          <Trans>
+            Some items in your cart contain errors, please update or remove them, then try again.
+          </Trans>
         </Box>
       )}
     </Box>

package/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -2,6 +2,7 @@ import { iconChevronRight, IconSvg, LinkOrButton, LinkOrButtonProps } from '@gra
 import { Trans } from '@lingui/react'
 import { SxProps, Theme } from '@mui/material'
 import React from 'react'
+import { useCheckoutShouldLoginToContinue } from '../../hooks'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutLinkOrButtonProps = {
@@ -18,13 +19,14 @@ export type CartStartCheckoutLinkOrButtonProps = {
 
 export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButtonProps) {
   const {
-    children,
     onStart,
     disabled,
     linkOrButtonProps: { onClick, button, ...linkOrButtonProps } = {},
     cart,
   } = props
 
+  const shouldLoginToContinue = useCheckoutShouldLoginToContinue()
+
   const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
   const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
@@ -38,7 +40,7 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
         onStart?.(e, cart)
       }}
       button={{ variant: 'pill', ...button }}
-      disabled={disabled || !hasTotals || hasErrors}
+      disabled={disabled || !hasTotals || hasErrors || shouldLoginToContinue}
       color='secondary'
       endIcon={<IconSvg src={iconChevronRight} />}
       {...linkOrButtonProps}

package/components/CartTotals/CartTotals.graphql

@@ -1,6 +1,4 @@
-fragment CartTotals on Cart
-@injectable
-@inject(into: ["CartItemCountChanged", "PaymentMethodUpdated"]) {
+fragment CartTotals on Cart @inject(into: ["CartItemCountChanged", "PaymentMethodUpdated"]) {
   shipping_addresses {
     selected_shipping_method {
       carrier_code
@@ -10,8 +8,14 @@ fragment CartTotals on Cart
       amount {
         ...Money
       }
+      price_excl_tax {
+        ...Money
+      }
+      price_incl_tax {
+        ...Money
+      }
     }
-    # todo: https://github.com/magento/magento2/pull/31322
+    # todo: When 245 is not supported anymore, remove available_shipping_methods from fragment.
     available_shipping_methods {
       carrier_code
       method_code

package/components/CartTotals/CartTotals.tsx

@@ -42,12 +42,15 @@ export function CartTotals(props: CartTotalsProps) {
   const { shipping_addresses, prices } = data.cart
   const shippingMethod = shipping_addresses?.[0]?.selected_shipping_method
 
-  const shippingMethodPrices = shipping_addresses?.[0]?.available_shipping_methods?.find(
-    (avail) =>
-      (shippingMethod?.amount?.value ?? 0) > 0 &&
-      avail?.carrier_code === shippingMethod?.carrier_code &&
-      avail?.method_code === shippingMethod?.method_code,
-  )
+  const shippingMethodPrices =
+    import.meta.graphCommerce.magentoVersion >= 246
+      ? shippingMethod
+      : shipping_addresses?.[0]?.available_shipping_methods?.find(
+          (avail) =>
+            (shippingMethod?.amount?.value ?? 0) > 0 &&
+            avail?.carrier_code === shippingMethod?.carrier_code &&
+            avail?.method_code === shippingMethod?.method_code,
+        )
 
   return (
     <Box

package/components/EmptyCart/EmptyCart.tsx

@@ -5,16 +5,19 @@ import {
   FullPageMessageProps,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Button } from '@mui/material'
+import { Button, SxProps, Theme } from '@mui/material'
 import React from 'react'
 
-type EmptyCartProps = { children?: React.ReactNode } & Pick<FullPageMessageProps, 'button'>
+type EmptyCartProps = {
+  children?: React.ReactNode
+  sx?: SxProps<Theme>
+} & Pick<FullPageMessageProps, 'button' | 'disableMargin'>
+
 export function EmptyCart(props: EmptyCartProps) {
-  const { children, button } = props
+  const { children, button, ...rest } = props
 
   return (
     <FullPageMessage
-      sx={(theme) => ({ mt: { md: theme.spacings.md } })}
       title={<Trans id='Your cart is empty' />}
       icon={<IconSvg src={iconShoppingBag} size='xxl' />}
       button={
@@ -24,6 +27,7 @@ export function EmptyCart(props: EmptyCartProps) {
           </Button>
         )
       }
+      {...rest}
     >
       {children ?? <Trans id='Discover our collection and add items to your cart!' />}
     </FullPageMessage>

package/components/InlineAccount/InlineAccount.tsx

@@ -1,13 +1,12 @@
-import { useQuery } from '@graphcommerce/graphql'
 import {
   SignUpFormInline,
   IsEmailAvailableDocument,
   useCustomerSession,
   useGuestQuery,
+  useCustomerAccountCanSignIn,
 } from '@graphcommerce/magento-customer'
 import { Button, FormRow, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, SxProps, TextField, Theme, Typography } from '@mui/material'
 import React, { useState } from 'react'
 import { useCartQuery } from '../../hooks/useCartQuery'
@@ -23,13 +22,15 @@ export type InlineAccountProps = {
   sx?: SxProps<Theme>
 }
 
-const name = 'InlineAccount' as const
+const name = 'InlineAccount'
 const parts = ['root', 'innerContainer', 'form', 'button', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 
 export function InlineAccount(props: InlineAccountProps) {
   const { title, description, sx = [] } = props
 
+  const canLogin = useCustomerAccountCanSignIn()
+
   const [toggled, setToggled] = useState<boolean>(false)
 
   const { loading, data } = useCartQuery(InlineAccountDocument)
@@ -44,7 +45,7 @@ export function InlineAccount(props: InlineAccountProps) {
   const { firstname, lastname } = cart?.shipping_addresses?.[0] ?? {}
   const canSignUp = isEmailAvailableData?.isEmailAvailable?.is_email_available === true
 
-  if (loggedIn || !canSignUp) return null
+  if (loggedIn || !canSignUp || !canLogin) return null
 
   return (
     <div>
@@ -101,8 +102,7 @@ export function InlineAccount(props: InlineAccountProps) {
             <FormRow>
               <TextField
                 variant='outlined'
-                type='email'
-                label='Email'
+                label={<Trans id='Email address' />}
                 value={cart?.email}
                 InputProps={{
                   readOnly: true,

package/components/OrderSucces/OrderSuccesPage.graphql

@@ -1,4 +1,4 @@
-fragment OrderSuccesPage on Cart @injectable {
+fragment OrderSuccesPage on Cart {
   ...CartItems
   ...CartTotals
 }

package/hooks/index.ts

@@ -1,8 +1,10 @@
 export * from './useAssignCurrentCartId'
-export * from './useCurrentCartId'
+export * from './useCartIdCreate'
+export * from './useCartPermissions'
 export * from './useCartQuery'
+export * from './useCheckoutPermissions'
 export * from './useClearCurrentCartId'
-export * from './useCartIdCreate'
+export * from './useCurrentCartId'
+export * from './useDisplayInclTax'
 export * from './useFormGqlMutationCart'
 export * from './useMergeCustomerCart'
-export * from './useDisplayInclTax'

package/hooks/useCartPermissions.ts

@@ -0,0 +1,21 @@
+import { useCustomerSession } from '@graphcommerce/magento-customer/hooks/useCustomerSession'
+import { useStorefrontConfig } from '@graphcommerce/next-ui'
+
+function useCartPermissions() {
+  return (
+    useStorefrontConfig().permissions?.cart ??
+    import.meta.graphCommerce.permissions?.cart ??
+    'ENABLED'
+  )
+}
+
+export function useCartEnabled() {
+  return useCartPermissions() !== 'DISABLED'
+}
+
+export function useCartShouldLoginToContinue() {
+  const { loggedIn } = useCustomerSession()
+  const permission = useCartPermissions()
+  if (permission === 'ENABLED') return false
+  return !loggedIn
+}

package/hooks/useCartQuery.ts

@@ -1,5 +1,7 @@
-import { useQuery, TypedDocumentNode, QueryHookOptions } from '@graphcommerce/graphql'
+import { useQuery, TypedDocumentNode, QueryHookOptions, ApolloError } from '@graphcommerce/graphql'
+import { GraphQLError } from 'graphql'
 import { useRouter } from 'next/router'
+import { useCartShouldLoginToContinue } from './useCartPermissions'
 import { useCurrentCartId } from './useCurrentCartId'
 
 /**
@@ -22,12 +24,14 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
   } = {},
 ) {
   const { allowUrl, ...queryOptions } = options
+
   const router = useRouter()
   const { currentCartId, locked } = useCurrentCartId()
 
   const urlCartId = router.query.cart_id
   const usingUrl = typeof urlCartId === 'string'
   const cartId = usingUrl ? urlCartId : currentCartId
+  const shouldLoginToContinue = useCartShouldLoginToContinue()
 
   if (usingUrl || locked) queryOptions.fetchPolicy = 'cache-only'
 
@@ -35,7 +39,24 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
     queryOptions.returnPartialData = true
 
   queryOptions.variables = { cartId, ...options?.variables } as V
-  queryOptions.skip = queryOptions?.skip || !cartId
 
-  return useQuery(document, queryOptions as QueryHookOptions<Q, V>)
+  const query = useQuery(document, {
+    ...(queryOptions as QueryHookOptions<Q, V>),
+    skip: queryOptions.skip || !cartId || shouldLoginToContinue,
+  })
+
+  if (shouldLoginToContinue && !queryOptions?.skip) {
+    return {
+      ...query,
+      error: new ApolloError({
+        graphQLErrors: [
+          new GraphQLError('Action can not be performed by the current user', {
+            extensions: { category: 'graphql-authorization' },
+          }),
+        ],
+      }),
+    }
+  }
+
+  return query
 }

package/hooks/useCheckoutPermissions.ts

@@ -0,0 +1,21 @@
+import { useCustomerSession } from '@graphcommerce/magento-customer/hooks/useCustomerSession'
+import { useStorefrontConfig } from '@graphcommerce/next-ui'
+
+function useCheckoutPermission() {
+  return (
+    useStorefrontConfig().permissions?.checkout ??
+    import.meta.graphCommerce.permissions?.checkout ??
+    'ENABLED'
+  )
+}
+
+export function useCheckoutGuestEnabled() {
+  return useCheckoutPermission() === 'ENABLED'
+}
+
+export function useCheckoutShouldLoginToContinue() {
+  const { loggedIn } = useCustomerSession()
+  const permission = useCheckoutPermission()
+  if (permission === 'ENABLED') return false
+  return !loggedIn
+}

package/hooks/useFormGqlMutationCart.ts

@@ -1,37 +1,74 @@
-import { MutationHookOptions, TypedDocumentNode, useApolloClient } from '@graphcommerce/graphql'
+import {
+  ApolloError,
+  MutationHookOptions,
+  TypedDocumentNode,
+  useApolloClient,
+} from '@graphcommerce/graphql'
 import {
   useFormGqlMutation,
   UseFormGqlMutationReturn,
   UseFormGraphQlOptions,
 } from '@graphcommerce/react-hook-form'
+import { GraphQLError, Kind } from 'graphql'
+import { isProtectedCartOperation } from '../link/isProtectedCartOperation'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'
 import { useCartIdCreate } from './useCartIdCreate'
+import { useCartShouldLoginToContinue } from './useCartPermissions'
 
 export function useFormGqlMutationCart<
   Q extends Record<string, unknown>,
   V extends { cartId: string; [index: string]: unknown },
 >(
   document: TypedDocumentNode<Q, V>,
-  options: UseFormGraphQlOptions<Q, V> = {},
+  options: UseFormGraphQlOptions<Q, V> & { submitWhileLocked?: boolean } = {},
   operationOptions?: MutationHookOptions<Q, V>,
 ): UseFormGqlMutationReturn<Q, V> {
   const cartId = useCartIdCreate()
   const client = useApolloClient()
+  const shouldLoginToContinue = useCartShouldLoginToContinue()
+
+  let shouldBlockOperation = false
+  document.definitions.forEach((defenition) => {
+    if (defenition.kind === Kind.OPERATION_DEFINITION) {
+      shouldBlockOperation = !isProtectedCartOperation(defenition.name?.value ?? '')
+    }
+  })
 
   const result = useFormGqlMutation<Q, V>(
     document,
     {
       ...options,
       onBeforeSubmit: async (variables) => {
+        if (shouldLoginToContinue && shouldBlockOperation) {
+          return false
+        }
         const vars = { ...variables, cartId: await cartId() }
 
         const res = client.cache.readQuery({ query: CurrentCartIdDocument })
-        if (res?.currentCartId?.locked) return false
+        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
+        }
+
         return options.onBeforeSubmit ? options.onBeforeSubmit(vars) : vars
       },
     },
     { errorPolicy: 'all', ...operationOptions },
   )
 
+  if (shouldLoginToContinue && result.formState.isSubmitted && shouldBlockOperation) {
+    return {
+      ...result,
+      error: new ApolloError({
+        graphQLErrors: [
+          new GraphQLError('Action can not be performed by the current user', {
+            extensions: { category: 'graphql-authorization' },
+          }),
+        ],
+      }),
+    }
+  }
+
   return result
 }

package/index.ts

@@ -1,6 +1,7 @@
 export * from './Api/CartItemCountChanged.gql'
-export * from './hooks'
 export * from './components'
-export * from './typePolicies'
-export * from './link/createCartErrorLink'
 export * from './components/CartDebugger/CartDebugger'
+export * from './hooks'
+export * from './link/cartLink'
+export * from './typePolicies'
+export * from './utils'

package/link/{createCartErrorLink.ts → cartLink.ts}

@@ -1,9 +1,14 @@
 import { fromPromise, globalApolloClient, Operation } from '@graphcommerce/graphql'
-import { onError } from '@graphcommerce/graphql/apollo'
+import { ApolloLink, Observable, onError } from '@graphcommerce/graphql/apollo'
+import { CustomerTokenDocument, getCustomerAccountCanSignIn } from '@graphcommerce/magento-customer'
+import { PushRouter, pushWithPromise } from '@graphcommerce/magento-customer/link/customerLink'
 import { ErrorCategory } from '@graphcommerce/magento-graphql'
-import type { GraphQLError } from 'graphql'
+import { t } from '@lingui/macro'
+import { GraphQLError } from 'graphql'
 import { writeCartId } from '../hooks'
 import { CreateEmptyCartDocument } from '../hooks/CreateEmptyCart.gql'
+import { getCartEnabledForUser } from '../utils'
+import { isProtectedCartOperation } from './isProtectedCartOperation'
 
 type CartOperation = Operation & { variables: { cartId: string } }
 function isCartOperation(operation: Operation): operation is CartOperation {
@@ -15,7 +20,7 @@ function errorIsIncluded(errorPath: readonly (string | number)[] | undefined, ke
   return keys.some((value) => value === error)
 }
 
-export const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
+const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
   if (!globalApolloClient.current) return undefined
 
   const client = globalApolloClient.current
@@ -68,4 +73,55 @@ export const cartErrorLink = onError(({ graphQLErrors, operation, forward }) =>
     })
 })
 
-export const createCartErrorLink = () => cartErrorLink
+const cartPermissionLink = (router: PushRouter) =>
+  new ApolloLink((operation, forward) => {
+    const { locale } = router
+    const { cache } = operation.getContext()
+
+    if (!isProtectedCartOperation(operation.operationName)) return forward(operation)
+
+    const check = () => Boolean(cache?.readQuery({ query: CustomerTokenDocument }))
+    if (getCartEnabledForUser(locale, check)) return forward(operation)
+
+    if (!getCustomerAccountCanSignIn(locale))
+      throw new Error(
+        'Permission error: permissions.customerAccount is DISABLED, while permissions.cart is set to CUSTOMER_ONLY',
+      )
+
+    const oldHeaders = operation.getContext().headers
+    const signInAgainPromise = pushWithPromise(router, '/account/signin')
+
+    return fromPromise(signInAgainPromise).flatMap(() => {
+      const tokenQuery = cache?.readQuery({ query: CustomerTokenDocument })
+
+      if (tokenQuery?.customerToken?.valid) {
+        // Customer is authenticated, retrying request.
+        operation.setContext({
+          headers: {
+            ...oldHeaders,
+            authorization: `Bearer ${tokenQuery?.customerToken?.token}`,
+          },
+        })
+        return forward(operation)
+      }
+
+      return Observable.of({
+        data: null,
+        errors: [
+          new GraphQLError(t`Please login to add products to your cart`, {
+            extensions: { category: 'graphql-authorization' },
+          }),
+        ],
+      })
+    })
+  })
+
+export const cartLink = (router: PushRouter) => {
+  const links = [cartErrorLink]
+
+  if (!(import.meta.graphCommerce.permissions?.cart === 'ENABLED')) {
+    links.push(cartPermissionLink(router))
+  }
+
+  return ApolloLink.from(links)
+}

package/link/isProtectedCartOperation.ts

@@ -0,0 +1,5 @@
+export function isProtectedCartOperation(name: string): boolean {
+  /* Todo: Determine what operations should be added here */
+  const mutations = ['AddProductsToCart', 'CreateEmptyCart']
+  return mutations.includes(name)
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.8",
+  "version": "9.0.0-canary.100",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,25 +12,26 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.8",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.8",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.8",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.8",
-    "@graphcommerce/graphql": "^8.1.0-canary.8",
-    "@graphcommerce/image": "^8.1.0-canary.8",
-    "@graphcommerce/magento-customer": "^8.1.0-canary.8",
-    "@graphcommerce/magento-graphql": "^8.1.0-canary.8",
-    "@graphcommerce/magento-store": "^8.1.0-canary.8",
-    "@graphcommerce/next-ui": "^8.1.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.8",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.100",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.100",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.100",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.100",
+    "@graphcommerce/graphql": "^9.0.0-canary.100",
+    "@graphcommerce/image": "^9.0.0-canary.100",
+    "@graphcommerce/magento-customer": "^9.0.0-canary.100",
+    "@graphcommerce/magento-graphql": "^9.0.0-canary.100",
+    "@graphcommerce/magento-store": "^9.0.0-canary.100",
+    "@graphcommerce/next-ui": "^9.0.0-canary.100",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.100",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.100",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
     "framer-motion": "^10.0.0",
+    "graphql": "^16.0.0",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/plugins/MagentoCartGraphqlProvider.tsx

@@ -1,6 +1,9 @@
 import { GraphQLProviderProps } from '@graphcommerce/graphql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { cartErrorLink } from '../link/createCartErrorLink'
+import { useEventCallback } from '@mui/material'
+import { NextRouter } from 'next/router'
+import { useMemo } from 'react'
+import { cartLink } from '../link/cartLink'
 import { cartTypePolicies, migrateCart } from '../typePolicies'
 
 export const config: PluginConfig = {
@@ -9,11 +12,20 @@ export const config: PluginConfig = {
 }
 
 export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
-  const { Prev, links = [], policies = [], migrations = [], ...rest } = props
+  const { Prev, router, links = [], policies = [], migrations = [], ...rest } = props
+
+  const push = useEventCallback<NextRouter['push']>((...args) => router.push(...args))
+
+  const cartLinkMemo = useMemo(
+    () => cartLink({ push, events: router.events, locale: router.locale }),
+    [push, router.events, router.locale],
+  )
+
   return (
     <Prev
       {...rest}
-      links={[...links, cartErrorLink]}
+      router={router}
+      links={[...links, cartLinkMemo]}
       policies={[...policies, cartTypePolicies]}
       migrations={[...migrations, migrateCart]}
     />