@graphcommerce/magento-cart 10.0.0-canary.67 → 10.0.0-canary.72

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
+## 10.0.0-canary.68
+
+### Major Changes
+
+- [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
+
+  This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
+
 ## 10.0.0-canary.67
 
 ### Patch Changes

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -1,6 +1,6 @@
 import { CheckboxElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
-import { extendableComponent, FormDiv } from '@graphcommerce/next-ui'
+import { extendableComponent, FormDiv, sxx } from '@graphcommerce/next-ui'
 import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
 import { FormPersist, useForm, useFormCompose } from '@graphcommerce/react-hook-form'
 import { t } from '@lingui/core/macro'
@@ -50,10 +50,7 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
   if (data?.checkoutAgreements?.length === 0) return null
 
   return (
-    <FormDiv
-      className={classes.form}
-      sx={[(theme) => ({ pt: theme.spacings.md }), ...(Array.isArray(sx) ? sx : [sx])]}
-    >
+    <FormDiv className={classes.form} sx={sxx((theme) => ({ pt: theme.spacings.md }), sx)}>
       <form noValidate onSubmit={submit} name='cartAgreements'>
         <Box className={classes.formInner} sx={{ typography: 'body1', display: 'inline-block' }}>
           {data?.checkoutAgreements &&
@@ -64,7 +61,6 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
               // check if the agreement text contains an anchor tag
               const containsLink = containsAnchorTag(agreement.checkbox_text)
               let labelContent: React.ReactNode
-
               if (containsLink) {
                 labelContent = (
                   <Typography

package/components/CartFab/CartFab.tsx

@@ -3,12 +3,13 @@ import {
   extendableComponent,
   iconShoppingBag,
   IconSvg,
+  sxx,
   useFabSize,
   useScrollY,
 } from '@graphcommerce/next-ui'
 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 { Box, Fab, styled, useTheme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import { useCartEnabled, useCartShouldLoginToContinue } from '../../hooks'
@@ -42,8 +43,8 @@ function CartFabContent(props: CartFabContentProps) {
   const scrollY = useScrollY()
   const opacity = useTransform(scrollY, [50, 60], [0, 1])
 
-  const paper0 = alpha(theme2.palette.background.paper, 0)
-  const paper1 = alpha(theme2.palette.background.paper, 1)
+  const paper0 = theme2.alpha(theme2.palette.background.paper, 0)
+  const paper1 = theme2.alpha(theme2.palette.background.paper, 1)
   const backgroundColor = useTransform(scrollY, [0, 10], [paper0, paper1])
 
   const cartIcon = icon ?? <IconSvg src={iconShoppingBag} size='large' />
@@ -52,10 +53,7 @@ function CartFabContent(props: CartFabContentProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
-        { position: 'relative', width: fabIconSize, height: fabIconSize },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+      sx={sxx({ position: 'relative', width: fabIconSize, height: fabIconSize }, sx)}
     >
       <MotionFab
         href='/cart'
@@ -66,7 +64,7 @@ function CartFabContent(props: CartFabContentProps) {
         style={{ backgroundColor }}
         sx={(theme) => ({
           [theme.breakpoints.down('md')]: {
-            backgroundColor: `${theme.palette.background.paper} !important`,
+            backgroundColor: `${theme.vars.palette.background.paper} !important`,
           },
         })}
         {...fabProps}

package/components/CartItemSummary/CartItemSummary.tsx

@@ -7,6 +7,7 @@ import {
   extendableComponent,
   nonNullable,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
@@ -38,10 +39,10 @@ export function CartItemSummary(props: OrderSummaryProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
-          border: `1px ${theme.palette.divider} solid`,
+          border: `1px ${theme.vars.palette.divider} solid`,
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -49,8 +50,8 @@ export function CartItemSummary(props: OrderSummaryProps) {
             theme.breakpoints.values,
           ),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <SectionContainer
         sx={{ '& .SectionHeader-root': { mt: 0 } }}

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,6 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import type { ButtonProps } from '@graphcommerce/next-ui'
-import { Button, extendableComponent, iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, iconChevronRight, IconSvg, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
@@ -49,13 +49,13 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
   return (
     <Box
       className={classes.checkoutButtonContainer}
-      sx={[
+      sx={sxx(
         (theme) => ({
           textAlign: 'center',
           my: theme.spacings.md,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {shouldLoginToContinue && (
         <Box sx={{ mb: 1 }} className={classes.loginContainer}>

package/components/CartSummary/CartSummary.tsx

@@ -1,9 +1,9 @@
 import { useHistoryLink } from '@graphcommerce/framer-next-pages'
 import { useBillingAddressPermission } from '@graphcommerce/magento-customer'
-import { breakpointVal, extendableComponent, SectionContainer } from '@graphcommerce/next-ui'
+import { breakpointVal, extendableComponent, SectionContainer, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten, Link, Typography } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import React from 'react'
 import { useCartQuery } from '../../hooks'
 import { CartAddressMultiLine } from '../CartAddressMultiLine/CartAddressMultiLine'
@@ -37,7 +37,7 @@ export function CartSummary(props: CartSummaryProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           margin: `${theme.spacings.sm} 0`,
           '& > div:last-of-type': {
@@ -56,8 +56,8 @@ export function CartSummary(props: CartSummaryProps) {
             ),
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={classes.detailsContainer}
@@ -74,10 +74,7 @@ export function CartSummary(props: CartSummaryProps) {
             theme.shape.borderRadius * 3,
             theme.breakpoints.values,
           ),
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.lighten(theme.vars.palette.background.default, 0.15),
           padding: theme.spacings.sm,
           gridColumnGap: theme.spacings.xxl,
           gridRowGap: theme.spacings.sm,
@@ -86,6 +83,9 @@ export function CartSummary(props: CartSummaryProps) {
             gridTemplateColumns: '1fr 1fr',
             marginTop: theme.spacings.xxs,
           },
+          ...theme.applyStyles('light', {
+            background: theme.vars.palette.background.default,
+          }),
         })}
       >
         <Box>

package/components/CartTotals/CartTotals.tsx

@@ -3,7 +3,7 @@ import { magentoVersion } from '@graphcommerce/next-config/config'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, Divider, lighten } from '@mui/material'
+import { Box, Divider } from '@mui/material'
 import { useCartQuery, useDisplayInclTax } from '../../hooks'
 import { GetCartTotalsDocument } from './GetCartTotals.gql'
 
@@ -71,12 +71,11 @@ export function CartTotals(props: CartTotalsProps) {
             theme.shape.borderRadius * 5,
             theme.breakpoints.values,
           ),
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
-
           '&.containerMargin': {
             marginTop: theme.spacings.md,
             px: theme.spacings.xs,
@@ -132,7 +131,9 @@ export function CartTotals(props: CartTotalsProps) {
           sx={{ display: 'flex', justifyContent: 'space-between' }}
         >
           <Box>
-            <Trans>Shipping ({shippingMethod.carrier_title} {shippingMethod.method_title})</Trans>
+            <Trans>
+              Shipping ({shippingMethod.carrier_title} {shippingMethod.method_title})
+            </Trans>
           </Box>
           <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
             <Money
@@ -171,7 +172,7 @@ export function CartTotals(props: CartTotalsProps) {
           sx={(theme) => ({
             display: 'flex',
             justifyContent: 'space-between',
-            color: theme.palette.primary.main,
+            color: theme.vars.palette.primary.main,
           })}
         >
           <Box>

package/components/EditBillingAddressForm/EditBillingAddressForm.tsx

@@ -74,7 +74,6 @@ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
         <CompanyFields<SetBillingAddressMutationVariables> form={form} />
         <NameFields form={form} prefix />
         <AddressFields<SetBillingAddressMutationVariables> form={form} />
-
         <FormRow>
           <TelephoneElement
             variant='outlined'
@@ -85,9 +84,7 @@ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
             showValid
           />
         </FormRow>
-
         <FormDivider />
-
         <FormActions sx={{ paddingBottom: 0 }}>
           <Button
             type='submit'
@@ -100,7 +97,6 @@ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
           </Button>
         </FormActions>
       </Form>
-
       <ApolloCustomerErrorAlert error={error} />
     </>
   )

package/components/EmptyCart/EmptyCart.tsx

@@ -30,11 +30,7 @@ export function EmptyCart(props: EmptyCartProps) {
       }
       {...rest}
     >
-      {children ?? (
-        <Trans>
-          Discover our collection and add items to your cart!
-        </Trans>
-      )}
+      {children ?? <Trans>Discover our collection and add items to your cart!</Trans>}
     </FullPageMessage>
   )
 }

package/components/InlineAccount/InlineAccount.tsx

@@ -5,7 +5,7 @@ import {
   useCustomerSession,
   useGuestQuery,
 } from '@graphcommerce/magento-customer'
-import { Button, extendableComponent, FormRow } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, FormRow, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, TextField, Typography } from '@mui/material'
@@ -48,15 +48,15 @@ export function InlineAccount(props: InlineAccountProps) {
     <div>
       <Box
         className={classes.root}
-        sx={[
+        sx={sxx(
           (theme) => ({
             borderRadius: '4px',
-            border: `1px solid ${theme.palette.divider}`,
+            border: `1px solid ${theme.vars.palette.divider}`,
             padding: theme.spacings.md,
             marginTop: theme.spacings.sm,
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         <Box
           className={classes.innerContainer}
@@ -101,8 +101,10 @@ export function InlineAccount(props: InlineAccountProps) {
                 variant='outlined'
                 label={<Trans>Email address</Trans>}
                 value={cart?.email}
-                InputProps={{
-                  readOnly: true,
+                slotProps={{
+                  input: {
+                    readOnly: true,
+                  },
                 }}
               />
             </FormRow>

package/hooks/useAssignCurrentCartId.ts

@@ -6,7 +6,7 @@ import { CurrentCartIdDocument } from './CurrentCartId.gql'
 
 export const CART_ID_COOKIE = 'cart'
 
-export function writeCartId(cache: ApolloCache<object>, id: string | null = null) {
+export function writeCartId(cache: ApolloCache, id: string | null = null) {
   cache.writeQuery({
     query: CurrentCartIdDocument,
     data: { currentCartId: { __typename: 'CurrentCartId', locked: false, id } },
@@ -14,11 +14,11 @@ export function writeCartId(cache: ApolloCache<object>, id: string | null = null
   })
 }
 
-export function readCartId(cache: ApolloCache<object>) {
+export function readCartId(cache: ApolloCache) {
   return cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId
 }
 
-export function cartLock(cache: ApolloCache<object>, locked: boolean) {
+export function cartLock(cache: ApolloCache, locked: boolean) {
   const currentCartId = cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId
   if (currentCartId?.id && currentCartId.locked !== locked) {
     cache.writeQuery({

package/hooks/useCartQuery.ts

@@ -1,10 +1,23 @@
-import type { QueryHookOptions, TypedDocumentNode } from '@graphcommerce/graphql'
-import { ApolloError, useQuery } from '@graphcommerce/graphql'
+import type {
+  OperationVariables,
+  TypedDocumentNode,
+  WatchQueryFetchPolicy,
+} from '@graphcommerce/graphql'
+import { useQuery } from '@graphcommerce/graphql'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
+import type { useQuery as useQueryType } from '@apollo/client/react'
 import { GraphQLError } from 'graphql'
 import { useRouter } from 'next/router'
 import { useCartShouldLoginToContinue } from './useCartPermissions'
 import { useCurrentCartId } from './useCurrentCartId'
 
+type CartQueryOptions<Q, V extends OperationVariables> = Omit<
+  useQueryType.Options<Q, V>,
+  'variables'
+> & {
+  variables?: Omit<V, 'cartId'>
+}
+
 /**
  * Requires the query to have a `$cartId: String!` argument. It will automatically inject the
  * currently active cart_id.
@@ -15,12 +28,10 @@ import { useCurrentCartId } from './useCurrentCartId'
  * const { data } = useCartQuery(CartFabQueryDocument)
  * ```
  */
-export function useCartQuery<Q, V extends { cartId: string; [index: string]: unknown }>(
-  document: TypedDocumentNode<Q, V>,
-  options: QueryHookOptions<Q, Omit<V, 'cartId'>> = {},
-) {
-  const { ...queryOptions } = options
-
+export function useCartQuery<
+  Q,
+  V extends OperationVariables & { cartId: string; [index: string]: unknown },
+>(document: TypedDocumentNode<Q, V>, options?: CartQueryOptions<Q, V>) {
   const router = useRouter()
   const { currentCartId, locked } = useCurrentCartId()
 
@@ -29,23 +40,27 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
   const cartId = usingUrl ? urlCartId : currentCartId
   const shouldLoginToContinue = useCartShouldLoginToContinue()
 
-  if (usingUrl || locked) queryOptions.fetchPolicy = 'cache-only'
+  let fetchPolicy: WatchQueryFetchPolicy | undefined = options?.fetchPolicy
+  let returnPartialData: boolean | undefined = options?.returnPartialData
 
-  if (usingUrl && typeof queryOptions.returnPartialData === 'undefined')
-    queryOptions.returnPartialData = true
+  if (usingUrl || locked) fetchPolicy = 'cache-only'
+  if (usingUrl && typeof returnPartialData === 'undefined') returnPartialData = true
 
-  queryOptions.variables = { cartId, ...options?.variables } as V
+  const variables = { cartId, ...options?.variables } as V
 
   const query = useQuery(document, {
-    ...(queryOptions as QueryHookOptions<Q, V>),
-    skip: queryOptions.skip || !cartId || shouldLoginToContinue,
+    ...options,
+    fetchPolicy,
+    returnPartialData,
+    variables,
+    skip: options?.skip || !cartId || shouldLoginToContinue,
   })
 
-  if (shouldLoginToContinue && !queryOptions?.skip) {
+  if (shouldLoginToContinue && !options?.skip) {
     return {
       ...query,
-      error: new ApolloError({
-        graphQLErrors: [
+      error: new CombinedGraphQLErrors({
+        errors: [
           new GraphQLError('Action can not be performed by the current user', {
             extensions: { category: 'graphql-authorization' },
           }),

package/hooks/useCurrentCartId.ts

@@ -1,4 +1,3 @@
-import type { QueryHookOptions } from '@graphcommerce/graphql'
 import { useQuery } from '@graphcommerce/graphql'
 import type { CurrentCartIdQuery, CurrentCartIdQueryVariables } from './CurrentCartId.gql'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'
@@ -6,8 +5,8 @@ import { CurrentCartIdDocument } from './CurrentCartId.gql'
 export function useCurrentCartId<
   Q extends CurrentCartIdQuery,
   V extends CurrentCartIdQueryVariables,
->(options: QueryHookOptions<Q, V> = {}) {
-  const queryResults = useQuery<Q, V>(CurrentCartIdDocument, options)
+>(options: Partial<useQuery.Options<Q, V>> = {}) {
+  const queryResults = useQuery<Q, V>(CurrentCartIdDocument, options as useQuery.Options<Q, V>)
 
   return {
     currentCartId: queryResults.data?.currentCartId?.id || '',

package/hooks/useFormGqlMutationCart.ts

@@ -1,5 +1,9 @@
-import type { MutationHookOptions, TypedDocumentNode } from '@graphcommerce/graphql'
-import { ApolloError, useApolloClient } from '@graphcommerce/graphql'
+import {
+  CombinedGraphQLErrors,
+  TypedDocumentNode,
+  useApolloClient,
+  useMutation,
+} from '@graphcommerce/graphql'
 import type {
   UseFormGqlMutationReturn,
   UseFormGraphQlOptions,
@@ -18,7 +22,7 @@ export function useFormGqlMutationCart<
 >(
   document: TypedDocumentNode<Q, V>,
   options: UseFormGraphQlOptions<Q, V> & { submitWhileLocked?: boolean } = {},
-  operationOptions?: MutationHookOptions<Q, V>,
+  operationOptions?: useMutation.Options<NoInfer<Q>, NoInfer<V>>,
 ): UseFormGqlMutationReturn<Q, V> {
   const cartIdCreate = useCartIdCreate()
   const cartIdFromContext = useCartIdContext()
@@ -63,8 +67,8 @@ export function useFormGqlMutationCart<
   if (shouldLoginToContinue && result.formState.isSubmitted && shouldBlockOperation) {
     return {
       ...result,
-      error: new ApolloError({
-        graphQLErrors: [
+      error: new CombinedGraphQLErrors({
+        errors: [
           new GraphQLError('Action can not be performed by the current user', {
             extensions: { category: 'graphql-authorization' },
           }),

package/link/cartLink.ts

@@ -1,6 +1,6 @@
-import type { Operation } from '@graphcommerce/graphql'
-import { fromPromise, globalApolloClient } from '@graphcommerce/graphql'
-import { ApolloLink, Observable, onError } from '@graphcommerce/graphql/apollo'
+import { globalApolloClient } from '@graphcommerce/graphql'
+import { ApolloLink, CombinedGraphQLErrors, ErrorLink } from '@graphcommerce/graphql/apollo'
+import { filter, from, of, switchMap } from '@graphcommerce/graphql/rxjs'
 import { CustomerTokenDocument, getCustomerAccountCanSignIn } from '@graphcommerce/magento-customer'
 import type { PushRouter } from '@graphcommerce/magento-customer/link/customerLink'
 import { pushWithPromise } from '@graphcommerce/magento-customer/link/customerLink'
@@ -14,8 +14,8 @@ 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 {
+type CartOperation = ApolloLink.Operation & { variables: { cartId: string } }
+function isCartOperation(operation: ApolloLink.Operation): operation is CartOperation {
   return typeof operation.variables.cartId === 'string'
 }
 
@@ -24,13 +24,16 @@ function errorIsIncluded(errorPath: readonly (string | number)[] | undefined, ke
   return keys.some((value) => value === error)
 }
 
-const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
+const cartErrorLink = new ErrorLink(({ error, operation, forward }) => {
   if (!globalApolloClient.current) return undefined
 
   const client = globalApolloClient.current
   const { cache } = client
 
-  if (!isCartOperation(operation) || !graphQLErrors) return undefined
+  // Check if this is a GraphQL error
+  if (!CombinedGraphQLErrors.is(error)) return undefined
+
+  if (!isCartOperation(operation)) return undefined
 
   const isErrorCategory = (err: GraphQLFormattedError, category: ErrorCategory) =>
     err.extensions?.category === category
@@ -54,7 +57,7 @@ const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
       // 'applyCouponToCart',
       // 'removeCouponFromCart'
     ])
-  const cartErr = graphQLErrors.find((err) => isNoSuchEntityError(err))
+  const cartErr = error.errors.find((err) => isNoSuchEntityError(err))
 
   if (!cartErr) return undefined
 
@@ -63,9 +66,9 @@ const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
     if (urlParams.get('cart_id')) return forward(operation)
   }
 
-  return fromPromise(client?.mutate({ mutation: CreateEmptyCartDocument }))
-    .filter((value) => Boolean(value))
-    .flatMap((cartData) => {
+  return from(client?.mutate({ mutation: CreateEmptyCartDocument })).pipe(
+    filter((value) => Boolean(value)),
+    switchMap((cartData) => {
       const cartId = cartData.data?.createEmptyCart
       if (!cartId) return forward(operation)
 
@@ -74,7 +77,8 @@ const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
 
       // retry the request, returning the new observable
       return forward(operation)
-    })
+    }),
+  )
 })
 
 const cartPermissionLink = (router: PushRouter) =>
@@ -82,7 +86,7 @@ const cartPermissionLink = (router: PushRouter) =>
     const { locale } = router
     const { cache } = operation.getContext()
 
-    if (!isProtectedCartOperation(operation.operationName)) return forward(operation)
+    if (!isProtectedCartOperation(operation.operationName ?? '')) return forward(operation)
 
     const check = () => Boolean(cache?.readQuery({ query: CustomerTokenDocument }))
     if (getCartEnabledForUser(locale, check)) return forward(operation)
@@ -95,33 +99,35 @@ const cartPermissionLink = (router: PushRouter) =>
     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 from(signInAgainPromise).pipe(
+      switchMap(() => {
+        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 of({
+          data: null,
+          errors: [
+            new GraphQLError(t`Please login to add products to your cart`, {
+              extensions: { category: 'graphql-authorization' },
+            }),
+          ],
         })
-        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]
+  const links: ApolloLink[] = [cartErrorLink]
 
   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": "10.0.0-canary.67",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -20,24 +20,24 @@
     "./plugins/useSignInFormMergeCart": "./plugins/useSignInFormMergeCart.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/framer-next-pages": "^10.0.0-canary.67",
-    "@graphcommerce/framer-scroller": "^10.0.0-canary.67",
-    "@graphcommerce/framer-utils": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/magento-customer": "^10.0.0-canary.67",
-    "@graphcommerce/magento-graphql": "^10.0.0-canary.67",
-    "@graphcommerce/magento-store": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.72",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.72",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.72",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/magento-customer": "^10.0.0-canary.72",
+    "@graphcommerce/magento-graphql": "^10.0.0-canary.72",
+    "@graphcommerce/magento-store": "^10.0.0-canary.72",
+    "@graphcommerce/next-ui": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "graphql": "^16.0.0",
     "next": "*",

package/plugins/useSignInFormMergeCart.ts

@@ -22,12 +22,12 @@ export const useSignInForm: FunctionPlugin<typeof useSignInFormType> = (useSignI
 
       cartLock(client.cache, true)
 
-      const destinationCartId = (
-        await client.query({
-          query: CustomerCartDocument,
-          fetchPolicy: 'network-only',
-        })
-      ).data.customerCart.id
+      const customerCartResult = await client.query({
+        query: CustomerCartDocument,
+        fetchPolicy: 'network-only',
+      })
+      const destinationCartId = customerCartResult.data?.customerCart?.id
+      if (!destinationCartId) return
 
       try {
         const sourceCartId = readCartId(client.cache)?.id

package/test/fillCartAgreementsForm.ts

@@ -3,10 +3,7 @@ import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql
 import type { Page } from '@playwright/test'
 import { CartAgreementsDocument } from '../components/CartAgreementsForm/CartAgreements.gql'
 
-export async function fillCartAgreementsForm(
-  page: Page,
-  client: ApolloClient<NormalizedCacheObject>,
-) {
+export async function fillCartAgreementsForm(page: Page, client: ApolloClient) {
   const res = (await client.query({ query: CartAgreementsDocument })).data
 
   for await (const agreement of res.checkoutAgreements ?? []) {

package/typePolicies.ts

@@ -1,8 +1,4 @@
-import type {
-  ApolloCache,
-  NormalizedCacheObject,
-  StrictTypedTypePolicies,
-} from '@graphcommerce/graphql'
+import type { ApolloCache, StrictTypedTypePolicies } from '@graphcommerce/graphql'
 import type { CartPrices, QuerycartArgs, ShippingCartAddress } from '@graphcommerce/graphql-mesh'
 import { CartFabDocument } from './components/CartFab/CartFab.gql'
 import { readCartId, writeCartId } from './hooks'
@@ -57,10 +53,7 @@ export const cartTypePolicies: StrictTypedTypePolicies = {
   },
 }
 
-export const migrateCart = (
-  oldCache: ApolloCache<NormalizedCacheObject>,
-  newCache: ApolloCache<NormalizedCacheObject>,
-) => {
+export const migrateCart = (oldCache: ApolloCache, newCache: ApolloCache) => {
   const cartId = readCartId(oldCache)?.id
 
   if (cartId) {