@graphcommerce/magento-cart 9.0.0-canary.98 → 9.0.0

package/Config.graphqls

@@ -30,3 +30,10 @@ extend input GraphCommerceConfig {
   """
   cartDisplayPricesInclTax: Boolean
 }
+
+extend input GraphCommerceDebugConfig {
+  """
+  Enable debugging interface to debug sessions
+  """
+  cart: Boolean
+}

package/components/ApolloCartError/ApolloCartErrorAlert.tsx

@@ -1,7 +1,5 @@
-import {
-  ApolloCustomerErrorAlert,
-  ApolloCustomerErrorAlertProps,
-} from '@graphcommerce/magento-customer'
+import type { ApolloCustomerErrorAlertProps } from '@graphcommerce/magento-customer'
+import { ApolloCustomerErrorAlert } from '@graphcommerce/magento-customer'
 
 export type ApolloCartErrorAlertProps = ApolloCustomerErrorAlertProps
 

package/components/ApolloCartError/ApolloCartErrorFullPage.tsx

@@ -1,8 +1,6 @@
-import {
-  ApolloCustomerErrorFullPage,
-  ApolloCustomerErrorFullPageProps,
-} from '@graphcommerce/magento-customer'
-import { iconShoppingBag, IconSvg } from '@graphcommerce/next-ui'
+import type { ApolloCustomerErrorFullPageProps } from '@graphcommerce/magento-customer'
+import { ApolloCustomerErrorFullPage } from '@graphcommerce/magento-customer'
+import { IconSvg, iconShoppingBag } from '@graphcommerce/next-ui'
 
 export type ApolloCartErrorFullPageProps = Omit<ApolloCustomerErrorFullPageProps, 'icon'>
 

package/components/ApolloCartError/ApolloCartErrorSnackbar.tsx

@@ -1,7 +1,5 @@
-import {
-  ApolloCustomerErrorSnackbar,
-  ApolloCustomerErrorSnackbarProps,
-} from '@graphcommerce/magento-customer'
+import type { ApolloCustomerErrorSnackbarProps } from '@graphcommerce/magento-customer'
+import { ApolloCustomerErrorSnackbar } from '@graphcommerce/magento-customer'
 
 export type ApolloCartErrorSnackbarProps = ApolloCustomerErrorSnackbarProps
 

package/components/CartAddressMultiLine/CartAddressMultiLine.tsx

@@ -1,7 +1,7 @@
 import type { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
 import { AddressMultiLine } from '@graphcommerce/magento-customer'
 import React from 'react'
-import { CartAddressFragment } from '../CartAddress/CartAddress.gql'
+import type { CartAddressFragment } from '../CartAddress/CartAddress.gql'
 
 export type CartAddressMultiLineProps = Partial<CartAddressFragment>
 

package/components/CartAddressSingleLine/CartAddressSingleLine.tsx

@@ -1,10 +1,11 @@
 import type { CountryCodeEnum } from '@graphcommerce/graphql-mesh'
 import { AddressSingleLine } from '@graphcommerce/magento-customer'
 import React from 'react'
-import { CartAddressFragment } from '../CartAddress/CartAddress.gql'
+import type { CartAddressFragment } from '../CartAddress/CartAddress.gql'
 
 export type CartAddressSingleLineProps = CartAddressFragment & { locale?: CountryCodeEnum }
 
+/** @public */
 export function CartAddressSingleLine(props: CartAddressSingleLineProps) {
   const { locale } = props
   return <AddressSingleLine {...props} country_code={locale} />

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -1,20 +1,17 @@
 import { CheckboxElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
-import { extendableComponent, FormDiv } from '@graphcommerce/next-ui'
-import {
-  FormPersist,
-  useForm,
-  useFormCompose,
-  UseFormComposeOptions,
-} from '@graphcommerce/react-hook-form'
+import { FormDiv, extendableComponent } 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 { Box, Link, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import React from 'react'
 import { CartAgreementsDocument } from './CartAgreements.gql'
 
 export type CartAgreementsFormProps = Pick<UseFormComposeOptions, 'step'> & { sx?: SxProps<Theme> }
 
-const componentName = 'CartAgreementsForm' as const
+const componentName = 'CartAgreementsForm'
 const parts = ['form', 'formInner', 'formControlRoot', 'manualCheck'] as const
 const { classes } = extendableComponent(componentName, parts)
 
@@ -117,7 +114,7 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
                       label={labelContent}
                     />
                   ) : (
-                    <Box className={classes.manualCheck} sx={{ padding: `9px 0` }}>
+                    <Box className={classes.manualCheck} sx={{ padding: '9px 0' }}>
                       {labelContent}
                     </Box>
                   )}

package/components/CartFab/CartFab.tsx

@@ -1,31 +1,33 @@
 import { WaitForQueries } from '@graphcommerce/ecommerce-ui'
 import {
-  extendableComponent,
-  iconShoppingBag,
   DesktopHeaderBadge,
   IconSvg,
-  useScrollY,
+  extendableComponent,
+  iconShoppingBag,
   useFabSize,
+  useScrollY,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
-import { alpha, Fab, FabProps, styled, useTheme, Box, SxProps, Theme } from '@mui/material'
+import type { BadgeProps, FabProps, SxProps, Theme } from '@mui/material'
+import { Box, Fab, alpha, styled, useTheme } 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'
+import type { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
 
 export type CartFabProps = {
   icon?: React.ReactNode
   sx?: SxProps<Theme>
+  BadgeProps?: BadgeProps
 } & Pick<FabProps, 'color' | 'size' | 'variant'>
 
-type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
+export type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
 
 const MotionDiv = styled(m.div)({})
 
-const MotionFab = m(
+const MotionFab = m.create(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   React.forwardRef<any, Omit<FabProps, 'style' | 'onDrag'>>((props, ref) => (
     <Fab {...props} ref={ref} />
@@ -35,7 +37,7 @@ const MotionFab = m(
 const { classes } = extendableComponent('CartFab', ['root', 'cart', 'shadow'] as const)
 
 function CartFabContent(props: CartFabContentProps) {
-  const { total_quantity, icon, sx = [], ...fabProps } = props
+  const { total_quantity, icon, sx = [], BadgeProps, ...fabProps } = props
 
   const theme2 = useTheme()
   const scrollY = useScrollY()
@@ -75,6 +77,7 @@ function CartFabContent(props: CartFabContentProps) {
           variant='dot'
           overlap='circular'
           badgeContent={total_quantity}
+          {...BadgeProps}
         >
           {cartIcon}
         </DesktopHeaderBadge>

package/components/CartItemSummary/CartItemSummary.tsx

@@ -1,19 +1,21 @@
-import { CartItemActionCard, CartItemActionCardProps } from '@graphcommerce/magento-cart-items'
+import type { CartItemActionCardProps } from '@graphcommerce/magento-cart-items'
+import { CartItemActionCard } from '@graphcommerce/magento-cart-items'
+import type { ActionCardLayoutProps } from '@graphcommerce/next-ui'
 import {
+  ActionCardLayout,
   SectionContainer,
-  extendableComponent,
   breakpointVal,
+  extendableComponent,
   nonNullable,
-  ActionCardLayoutProps,
-  ActionCardLayout,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Divider, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Divider } from '@mui/material'
 import { useCartQuery } from '../../hooks'
 import { CartTotals } from '../CartTotals/CartTotals'
 import { CartItemSummaryDocument } from './GetCartItemSummary.gql'
 
-const name = 'CartItemSummary' as const
+const name = 'CartItemSummary'
 const parts = [
   'root',
   'imageScrollerContainer',
@@ -28,7 +30,7 @@ const parts = [
 ] as const
 const { classes } = extendableComponent(name, parts)
 
-type OrderSummaryProps = ActionCardLayoutProps & {
+export type OrderSummaryProps = ActionCardLayoutProps & {
   sx?: SxProps<Theme>
   itemProps?: Omit<
     CartItemActionCardProps,

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,10 +1,11 @@
 import { Money } from '@graphcommerce/magento-store'
-import { iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
+import { IconSvg, extendableComponent, iconChevronRight } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Box, Button, ButtonProps, Link, SxProps, Theme } from '@mui/material'
+import type { ButtonProps, SxProps, Theme } from '@mui/material'
+import { Box, Button, Link } from '@mui/material'
 import React from 'react'
 import { useCheckoutShouldLoginToContinue } from '../../hooks'
-import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
+import type { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutProps = {
   children?: React.ReactNode

package/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -1,9 +1,10 @@
-import { iconChevronRight, IconSvg, LinkOrButton, LinkOrButtonProps } from '@graphcommerce/next-ui'
+import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { IconSvg, LinkOrButton, iconChevronRight } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { useCheckoutShouldLoginToContinue } from '../../hooks'
-import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
+import type { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutLinkOrButtonProps = {
   children?: React.ReactNode

package/components/CartSummary/CartSummary.tsx

@@ -1,7 +1,8 @@
 import { useHistoryLink } from '@graphcommerce/framer-next-pages'
-import { SectionContainer, extendableComponent, breakpointVal } from '@graphcommerce/next-ui'
+import { SectionContainer, breakpointVal, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Link, SxProps, Theme, Typography, lighten } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link, Typography, lighten } from '@mui/material'
 import React from 'react'
 import { useCartQuery } from '../../hooks'
 import { CartAddressMultiLine } from '../CartAddressMultiLine/CartAddressMultiLine'
@@ -14,7 +15,7 @@ export type CartSummaryProps = {
 
 type OwnerState = { editable?: boolean }
 
-const compName = 'CartSummary' as const
+const compName = 'CartSummary'
 const parts = ['root', 'detailsContainer', 'sectionHeaderWrapper'] as const
 const { classes } = extendableComponent<OwnerState, typeof compName, typeof parts>(compName, parts)
 
@@ -77,9 +78,9 @@ export function CartSummary(props: CartSummaryProps) {
           padding: theme.spacings.sm,
           gridColumnGap: theme.spacings.xxl,
           gridRowGap: theme.spacings.sm,
-          display: `grid`,
+          display: 'grid',
           [theme.breakpoints.up('sm')]: {
-            gridTemplateColumns: `1fr 1fr`,
+            gridTemplateColumns: '1fr 1fr',
             marginTop: theme.spacings.xxs,
           },
         })}

package/components/CartTotals/CartTotals.tsx

@@ -1,7 +1,8 @@
 import { Money } from '@graphcommerce/magento-store'
-import { extendableComponent, breakpointVal } from '@graphcommerce/next-ui'
+import { breakpointVal, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Divider, lighten, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Divider, lighten } from '@mui/material'
 import { useCartQuery, useDisplayInclTax } from '../../hooks'
 import { GetCartTotalsDocument } from './GetCartTotals.gql'
 
@@ -12,7 +13,7 @@ export type CartTotalsProps = OwnerProps & {
 }
 
 type OwnerProps = { containerMargin?: boolean }
-const name = 'CartTotals' as const
+const name = 'CartTotals'
 const parts = [
   'root',
   'costsDivider',
@@ -156,7 +157,7 @@ export function CartTotals(props: CartTotalsProps) {
       {additionalSubtotals}
 
       <Box key='divider'>
-        <Divider className={classes.costsDivider} sx={{ margin: `1em 0` }} />
+        <Divider className={classes.costsDivider} sx={{ margin: '1em 0' }} />
       </Box>
 
       {prices?.grand_total && (

package/components/EmptyCart/EmptyCart.tsx

@@ -1,14 +1,11 @@
-import {
-  FullPageMessage,
-  IconSvg,
-  iconShoppingBag,
-  FullPageMessageProps,
-} from '@graphcommerce/next-ui'
+import type { FullPageMessageProps } from '@graphcommerce/next-ui'
+import { FullPageMessage, IconSvg, iconShoppingBag } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Button, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Button } from '@mui/material'
 import React from 'react'
 
-type EmptyCartProps = {
+export type EmptyCartProps = {
   children?: React.ReactNode
   sx?: SxProps<Theme>
 } & Pick<FullPageMessageProps, 'button' | 'disableMargin'>

package/components/InlineAccount/InlineAccount.tsx

@@ -1,13 +1,14 @@
 import {
-  SignUpFormInline,
   IsEmailAvailableDocument,
+  SignUpFormInline,
+  useCustomerAccountCanSignIn,
   useCustomerSession,
   useGuestQuery,
-  useCustomerAccountCanSignIn,
 } from '@graphcommerce/magento-customer'
 import { Button, FormRow, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, TextField, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, TextField, Typography } from '@mui/material'
 import React, { useState } from 'react'
 import { useCartQuery } from '../../hooks/useCartQuery'
 import { InlineAccountDocument } from './InlineAccount.gql'
@@ -15,10 +16,6 @@ import { InlineAccountDocument } from './InlineAccount.gql'
 export type InlineAccountProps = {
   title?: React.ReactNode
   description?: React.ReactNode
-  /**
-   * @deprecated This is not used anymore.
-   */
-  accountHref: string
   sx?: SxProps<Theme>
 }
 

package/hooks/useAssignCurrentCartId.ts

@@ -1,4 +1,5 @@
-import { ApolloCache, useApolloClient } from '@graphcommerce/graphql'
+import type { ApolloCache } from '@graphcommerce/graphql'
+import { useApolloClient } from '@graphcommerce/graphql'
 import { cookie } from '@graphcommerce/next-ui'
 import { useCallback } from 'react'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'

package/hooks/useCartQuery.ts

@@ -1,4 +1,5 @@
-import { useQuery, TypedDocumentNode, QueryHookOptions, ApolloError } from '@graphcommerce/graphql'
+import type { QueryHookOptions, TypedDocumentNode } from '@graphcommerce/graphql'
+import { ApolloError, useQuery } from '@graphcommerce/graphql'
 import { GraphQLError } from 'graphql'
 import { useRouter } from 'next/router'
 import { useCartShouldLoginToContinue } from './useCartPermissions'
@@ -16,14 +17,9 @@ import { useCurrentCartId } from './useCurrentCartId'
  */
 export function useCartQuery<Q, V extends { cartId: string; [index: string]: unknown }>(
   document: TypedDocumentNode<Q, V>,
-  options: QueryHookOptions<Q, Omit<V, 'cartId'>> & {
-    /**
-     * @deprecated Not used anymore, when the cart_id is in the URL, it will always be used.
-     */
-    allowUrl?: boolean
-  } = {},
+  options: QueryHookOptions<Q, Omit<V, 'cartId'>> = {},
 ) {
-  const { allowUrl, ...queryOptions } = options
+  const { ...queryOptions } = options
 
   const router = useRouter()
   const { currentCartId, locked } = useCurrentCartId()

package/hooks/useCurrentCartId.ts

@@ -1,9 +1,7 @@
-import { QueryHookOptions, useQuery } from '@graphcommerce/graphql'
-import {
-  CurrentCartIdDocument,
-  CurrentCartIdQuery,
-  CurrentCartIdQueryVariables,
-} from './CurrentCartId.gql'
+import type { QueryHookOptions } from '@graphcommerce/graphql'
+import { useQuery } from '@graphcommerce/graphql'
+import type { CurrentCartIdQuery, CurrentCartIdQueryVariables } from './CurrentCartId.gql'
+import { CurrentCartIdDocument } from './CurrentCartId.gql'
 
 export function useCurrentCartId<
   Q extends CurrentCartIdQuery,

package/hooks/useFormGqlMutationCart.ts

@@ -1,14 +1,10 @@
-import {
-  ApolloError,
-  MutationHookOptions,
-  TypedDocumentNode,
-  useApolloClient,
-} from '@graphcommerce/graphql'
-import {
-  useFormGqlMutation,
+import type { MutationHookOptions, TypedDocumentNode } from '@graphcommerce/graphql'
+import { ApolloError, useApolloClient } from '@graphcommerce/graphql'
+import type {
   UseFormGqlMutationReturn,
   UseFormGraphQlOptions,
 } from '@graphcommerce/react-hook-form'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { GraphQLError, Kind } from 'graphql'
 import { isProtectedCartOperation } from '../link/isProtectedCartOperation'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'

package/hooks/useMergeCustomerCart.ts

@@ -1,5 +1,6 @@
 /**
  * @deprecated Is replaced by the useSignInFormMergeCart plugin.
+ * @public
  */
 export function useMergeCustomerCart() {
   return null

package/index.ts

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

package/link/cartLink.ts

@@ -1,9 +1,12 @@
-import { fromPromise, globalApolloClient, Operation } from '@graphcommerce/graphql'
+import type { Operation } from '@graphcommerce/graphql'
+import { fromPromise, globalApolloClient } from '@graphcommerce/graphql'
 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 { 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 type { GraphQLFormattedError } from 'graphql'
 import { GraphQLError } from 'graphql'
 import { writeCartId } from '../hooks'
 import { CreateEmptyCartDocument } from '../hooks/CreateEmptyCart.gql'
@@ -28,10 +31,10 @@ const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
 
   if (!isCartOperation(operation) || !graphQLErrors) return undefined
 
-  const isErrorCategory = (err: GraphQLError, category: ErrorCategory) =>
+  const isErrorCategory = (err: GraphQLFormattedError, category: ErrorCategory) =>
     err.extensions?.category === category
 
-  const isNoSuchEntityError = (err: GraphQLError) =>
+  const isNoSuchEntityError = (err: GraphQLFormattedError) =>
     isErrorCategory(err, 'graphql-no-such-entity') &&
     errorIsIncluded(err.path, [
       'cart',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.98",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,25 +12,25 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.98",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.98",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.98",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.98",
-    "@graphcommerce/graphql": "^9.0.0-canary.98",
-    "@graphcommerce/image": "^9.0.0-canary.98",
-    "@graphcommerce/magento-customer": "^9.0.0-canary.98",
-    "@graphcommerce/magento-graphql": "^9.0.0-canary.98",
-    "@graphcommerce/magento-store": "^9.0.0-canary.98",
-    "@graphcommerce/next-ui": "^9.0.0-canary.98",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.98",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.98",
+    "@graphcommerce/ecommerce-ui": "^9.0.0",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/framer-next-pages": "^9.0.0",
+    "@graphcommerce/framer-scroller": "^9.0.0",
+    "@graphcommerce/framer-utils": "^9.0.0",
+    "@graphcommerce/graphql": "^9.0.0",
+    "@graphcommerce/image": "^9.0.0",
+    "@graphcommerce/magento-customer": "^9.0.0",
+    "@graphcommerce/magento-graphql": "^9.0.0",
+    "@graphcommerce/magento-store": "^9.0.0",
+    "@graphcommerce/next-ui": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/react-hook-form": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@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",
+    "framer-motion": "^11.0.0",
     "graphql": "^16.0.0",
     "next": "*",
     "react": "^18.2.0",

package/plugins/CartDebuggerPlugin.tsx

@@ -0,0 +1,42 @@
+import type { PagesProps } from '@graphcommerce/framer-next-pages'
+import { useApolloClient } from '@graphcommerce/graphql/apollo'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { Button } from '@mui/material'
+import { readCartId, writeCartId } from '../hooks/useAssignCurrentCartId'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/framer-next-pages',
+  ifConfig: 'debug.cart',
+}
+
+export function FramerNextPages(props: PluginProps<PagesProps>) {
+  const { Prev, ...rest } = props
+  const client = useApolloClient()
+
+  return (
+    <>
+      <Prev {...rest} />
+      <div style={{ position: 'fixed', bottom: 20, right: 0, zIndex: 1, opacity: 0.3 }}>
+        <Button
+          type='button'
+          variant='text'
+          size='small'
+          onClick={() => {
+            const currentCartId = readCartId(client.cache)
+            if (!currentCartId) {
+              // eslint-disable-next-line no-console
+              console.log('No customerToken available, nothing to break')
+            } else {
+              // eslint-disable-next-line no-console
+              console.log('Changing current token to a random one')
+              writeCartId(client.cache, `${Math.random().toString(36).slice(2)}random-cardId`)
+            }
+          }}
+        >
+          break cart token
+        </Button>
+      </div>
+    </>
+  )
+}

package/plugins/MagentoCartGraphqlProvider.tsx

@@ -1,7 +1,7 @@
-import { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { GraphQLProviderProps } from '@graphcommerce/graphql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useEventCallback } from '@mui/material'
-import { NextRouter } from 'next/router'
+import type { NextRouter } from 'next/router'
 import { useMemo } from 'react'
 import { cartLink } from '../link/cartLink'
 import { cartTypePolicies, migrateCart } from '../typePolicies'

package/plugins/useSignInFormMergeCart.ts

@@ -10,11 +10,11 @@ export const config: PluginConfig = {
   module: '@graphcommerce/magento-customer',
 }
 
-export const useSignInForm: FunctionPlugin<typeof useSignInFormType> = (useSignInForm, options) => {
+export const useSignInForm: FunctionPlugin<typeof useSignInFormType> = (useSignIn, options) => {
   const client = useApolloClient()
   const assignCurrentCartId = useAssignCurrentCartId()
 
-  return useSignInForm({
+  return useSignIn({
     ...options,
     onComplete: async (data, variables) => {
       await options.onComplete?.(data, variables)

package/test/fillCartAgreementsForm.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
-import { Page } from '@playwright/test'
+import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import type { Page } from '@playwright/test'
 import { CartAgreementsDocument } from '../components/CartAgreementsForm/CartAgreements.gql'
 
 export async function fillCartAgreementsForm(

package/typePolicies.ts

@@ -1,5 +1,8 @@
-import { ApolloCache, NormalizedCacheObject } from '@graphcommerce/graphql'
-import type { StrictTypedTypePolicies } from '@graphcommerce/graphql'
+import type {
+  ApolloCache,
+  NormalizedCacheObject,
+  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'
@@ -64,11 +67,13 @@ export const migrateCart = (
 
     // We have special handling for the CartFab because it tries to load data only from the cache.
     const cartFab = oldCache.readQuery({ query: CartFabDocument })
-    newCache.writeQuery({
-      query: CartFabDocument,
-      data: cartFab,
-      variables: { cartId },
-      broadcast: true,
-    })
+    if (cartFab) {
+      newCache.writeQuery({
+        query: CartFabDocument,
+        data: cartFab,
+        variables: { cartId },
+        broadcast: true,
+      })
+    }
   }
 }