@graphcommerce/magento-cart 8.1.0-canary.2 → 8.1.0-canary.22

package/CHANGELOG.md

@@ -1,6 +1,134 @@
 # Change Log
 
-## 8.1.0-canary.2
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+## 8.1.0-canary.8
+
+### Patch Changes
+
+- [#2247](https://github.com/graphcommerce-org/graphcommerce/pull/2247) [`a56a7c6`](https://github.com/graphcommerce-org/graphcommerce/commit/a56a7c67cf27dfb91bf763a873beeec562ab3156) - Solve an issue where the cart would be sometimes undefined, but Partial was too eleborate
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
+## 8.1.0-canary.5
+
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+## 8.0.5
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+## 8.0.5-canary.7
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+## 8.0.5-canary.2
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+## 8.0.4
+
+### Patch Changes
+
+- [#2221](https://github.com/graphcommerce-org/graphcommerce/pull/2221) [`0ba1fdc`](https://github.com/graphcommerce-org/graphcommerce/commit/0ba1fdc9a2d005f47cd1725fe723e77da4cc5b9d) - After a user just logged in the checkout, the useFormGqlMutationCart would still run even though the cart was locked.
+  ([@paales](https://github.com/paales))
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+### Patch Changes
+
+- [#2221](https://github.com/graphcommerce-org/graphcommerce/pull/2221) [`0ba1fdc`](https://github.com/graphcommerce-org/graphcommerce/commit/0ba1fdc9a2d005f47cd1725fe723e77da4cc5b9d) - After a user just logged in the checkout, the useFormGqlMutationCart would still run even though the cart was locked.
+  ([@paales](https://github.com/paales))
+
+## 8.0.3
+
+### Patch Changes
+
+- [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`d67c89d`](https://github.com/graphcommerce-org/graphcommerce/commit/d67c89d464a60f0e2618dab670b63a39f6291341) - Deprecate the allowUrl option for useCartQuery, it was already enabled by default and should never be set to false.
+  ([@paales](https://github.com/paales))
+
+- [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`3fbf3da`](https://github.com/graphcommerce-org/graphcommerce/commit/3fbf3da8a67f2fbaa7fa974a37cbbf34613844e4) - Solve an issue where the user would be presented with the Session expired dialog when the user would be logging in during the checkout process.
+  ([@paales](https://github.com/paales))
+
+- [#2207](https://github.com/graphcommerce-org/graphcommerce/pull/2207) [`9876b13`](https://github.com/graphcommerce-org/graphcommerce/commit/9876b139b2c12c860a16af97eddea761d1059110) - Remove redundant query on the success page for logged in customers
+  ([@paales](https://github.com/paales))
+
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+## 8.0.3-canary.4
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
+
+### Patch Changes
+
+- [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`d67c89d`](https://github.com/graphcommerce-org/graphcommerce/commit/d67c89d464a60f0e2618dab670b63a39f6291341) - Deprecate the allowUrl option for useCartQuery, it was already enabled by default and should never be set to false.
+  ([@paales](https://github.com/paales))
+
+- [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`3fbf3da`](https://github.com/graphcommerce-org/graphcommerce/commit/3fbf3da8a67f2fbaa7fa974a37cbbf34613844e4) - Solve an issue where the user would be presented with the Session expired dialog when the user would be logging in during the checkout process.
+  ([@paales](https://github.com/paales))
 
 ## 8.0.3-canary.1
 

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -2,10 +2,10 @@ import { CheckboxElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { extendableComponent, FormDiv } from '@graphcommerce/next-ui'
 import {
+  FormPersist,
   useForm,
   useFormCompose,
   UseFormComposeOptions,
-  useFormPersist,
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Box, Link, SxProps, Theme } from '@mui/material'
@@ -39,8 +39,6 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
     console.log(values)
   })
 
-  useFormPersist({ form, name: 'PaymentAgreementsForm' })
-
   useFormCompose({ form, step, submit, key: 'PaymentAgreementsForm' })
 
   if (data?.checkoutAgreements?.length === 0) return null
@@ -50,6 +48,7 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
       className={classes.form}
       sx={[(theme) => ({ pt: theme.spacings.md }), ...(Array.isArray(sx) ? sx : [sx])]}
     >
+      <FormPersist form={form} name='PaymentAgreementsForm' />
       <form noValidate onSubmit={submit} name='cartAgreements'>
         <Box className={classes.formInner} sx={{ typography: 'body1', display: 'inline-block' }}>
           {data?.checkoutAgreements &&

package/components/CartDebugger/CartDebugger.tsx

@@ -1,6 +1,6 @@
 import { useApolloClient } from '@graphcommerce/graphql'
 import { Button } from '@mui/material'
-import { CurrentCartIdDocument } from '../../hooks/CurrentCartId.gql'
+import { readCartId, writeCartId } from '../../hooks'
 
 export function CartDebugger() {
   const client = useApolloClient()
@@ -12,24 +12,14 @@ export function CartDebugger() {
         variant='text'
         size='small'
         onClick={() => {
-          const currentCardId = client.readQuery({ query: CurrentCartIdDocument })
-          if (!currentCardId?.currentCartId) {
+          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`)
-
-            client.writeQuery({
-              query: CurrentCartIdDocument,
-              data: {
-                currentCartId: {
-                  ...currentCardId.currentCartId,
-                  id: `${Math.random().toString(36).slice(2)}random-cardId`,
-                },
-              },
-              broadcast: true,
-            })
+            writeCartId(client.cache, `${Math.random().toString(36).slice(2)}random-cardId`)
           }
         }}
       >

package/components/CartItemSummary/CartItemSummary.tsx

@@ -38,10 +38,7 @@ type OrderSummaryProps = ActionCardLayoutProps & {
 
 export function CartItemSummary(props: OrderSummaryProps) {
   const { sx = [], size, layout = 'list', itemProps, ...cardLayout } = props
-  const { data } = useCartQuery(CartItemSummaryDocument, {
-    allowUrl: true,
-    fetchPolicy: 'cache-only',
-  })
+  const { data } = useCartQuery(CartItemSummaryDocument, { fetchPolicy: 'cache-only' })
 
   if (!data?.cart) return null
 
@@ -85,7 +82,7 @@ export function CartItemSummary(props: OrderSummaryProps) {
             className={classes.scrollerContainer}
             {...cardLayout}
           >
-            {items?.filter(nonNullable).map((item) => (
+            {(items ?? []).filter(nonNullable).map((item) => (
               <CartItemActionCard
                 readOnly
                 key={item.uid}

package/components/CartStartCheckout/CartStartCheckout.graphql

@@ -4,7 +4,6 @@ fragment CartStartCheckout on Cart @injectable {
       ...Money
     }
   }
-
   items {
     errors {
       message

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -5,12 +5,16 @@ import { Box, Button, ButtonProps, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
-export type CartStartCheckoutProps = CartStartCheckoutFragment & {
+export type CartStartCheckoutProps = {
   children?: React.ReactNode
   sx?: SxProps<Theme>
   buttonProps?: ButtonProps<'button'>
   disabled?: boolean
-  onStart?: (e: React.MouseEvent<HTMLButtonElement>, cart: CartStartCheckoutFragment) => void
+  cart?: CartStartCheckoutFragment | null | undefined
+  onStart?: (
+    e: React.MouseEvent<HTMLButtonElement>,
+    cart: CartStartCheckoutFragment | null | undefined,
+  ) => void
 }
 
 const name = 'CartStartCheckout' as const
@@ -29,11 +33,11 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
     buttonProps: { onClick, ...buttonProps } = {},
     disabled,
     sx = [],
-    ...cart
+    cart,
   } = props
 
-  const hasTotals = (cart.prices?.grand_total?.value ?? 0) > 0
-  const hasErrors = cart.items?.some((item) => (item?.errors?.length ?? 0) > 0)
+  const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
+  const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
   return (
     <Box
@@ -71,7 +75,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
         </Box>{' '}
         {hasTotals && (
           <span className={classes.checkoutMoney}>
-            <Money {...cart.prices?.grand_total} />
+            <Money {...cart?.prices?.grand_total} />
           </span>
         )}
       </Button>

package/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -4,13 +4,14 @@ import { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
-export type CartStartCheckoutLinkOrButtonProps = CartStartCheckoutFragment & {
+export type CartStartCheckoutLinkOrButtonProps = {
   children?: React.ReactNode
   sx?: SxProps<Theme>
   disabled?: boolean
+  cart?: CartStartCheckoutFragment | null | undefined
   onStart?: (
     e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement>,
-    cart: CartStartCheckoutFragment,
+    cart: CartStartCheckoutFragment | null | undefined,
   ) => void
   linkOrButtonProps?: LinkOrButtonProps
 }
@@ -21,11 +22,11 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
     onStart,
     disabled,
     linkOrButtonProps: { onClick, button, ...linkOrButtonProps } = {},
-    ...cart
+    cart,
   } = props
 
-  const hasTotals = (cart.prices?.grand_total?.value ?? 0) > 0
-  const hasErrors = cart.items?.some((item) => (item?.errors?.length ?? 0) > 0)
+  const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
+  const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
   return (
     <LinkOrButton

package/components/CartSummary/CartSummary.tsx

@@ -21,7 +21,7 @@ const { classes } = extendableComponent<OwnerState, typeof compName, typeof part
 export function CartSummary(props: CartSummaryProps) {
   const { children, editable, sx = [] } = props
 
-  const { data } = useCartQuery(GetCartSummaryDocument, { allowUrl: true })
+  const { data } = useCartQuery(GetCartSummaryDocument)
   const { href: historyHref, onClick: historyOnClick } = useHistoryLink({
     href: '/checkout',
   })

package/components/CartTotals/CartTotals.graphql

@@ -11,7 +11,7 @@ fragment CartTotals on Cart
         ...Money
       }
     }
-    # https://github.com/magento/magento2/pull/31322
+    # todo: https://github.com/magento/magento2/pull/31322
     available_shipping_methods {
       carrier_code
       method_code

package/components/CartTotals/CartTotals.tsx

@@ -31,7 +31,7 @@ const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>
  * @see https://github.com/magento/magento2/issues/33848
  */
 export function CartTotals(props: CartTotalsProps) {
-  const { data } = useCartQuery(GetCartTotalsDocument, { allowUrl: true })
+  const { data } = useCartQuery(GetCartTotalsDocument)
   const { containerMargin, additionalSubtotals, additionalTotals, sx = [] } = props
 
   const classes = withState({ containerMargin })

package/hooks/CurrentCartId.graphql

@@ -2,5 +2,6 @@ query CurrentCartId {
   currentCartId @client {
     __typename
     id
+    locked
   }
 }

package/hooks/CurrentCartId.graphqls

@@ -4,6 +4,7 @@ extend type Query {
 
 type CurrentCartId {
   id: String
+  locked: Boolean
 }
 
 input RegisterCartIdInput {

package/hooks/CustomerCart.graphql

@@ -2,6 +2,5 @@ query CustomerCart {
   customerCart {
     id
     __typename
-    ...CartItemCountChanged
   }
 }

package/hooks/{UseMergeCustomerCart.graphql → MergeCarts.graphql}

@@ -1,7 +1,6 @@
-mutation UseMergeCustomerCart($sourceCartId: String!, $destinationCartId: String!) {
+mutation MergeCarts($sourceCartId: String!, $destinationCartId: String!) {
   mergeCarts(source_cart_id: $sourceCartId, destination_cart_id: $destinationCartId) {
     __typename
     id
-    ...CartItemCountChanged
   }
 }

package/hooks/useAssignCurrentCartId.ts

@@ -8,11 +8,26 @@ export const CART_ID_COOKIE = 'cart'
 export function writeCartId(cache: ApolloCache<object>, id: string | null = null) {
   cache.writeQuery({
     query: CurrentCartIdDocument,
-    data: { currentCartId: { __typename: 'CurrentCartId', id } },
+    data: { currentCartId: { __typename: 'CurrentCartId', locked: false, id } },
     broadcast: true,
   })
 }
 
+export function readCartId(cache: ApolloCache<object>) {
+  return cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId
+}
+
+export function cartLock(cache: ApolloCache<object>, locked: boolean) {
+  const currentCartId = cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId
+  if (currentCartId?.id && currentCartId.locked !== locked) {
+    cache.writeQuery({
+      query: CurrentCartIdDocument,
+      data: { currentCartId: { ...currentCartId, locked } },
+      broadcast: true,
+    })
+  }
+}
+
 export function useAssignCurrentCartId() {
   const { cache } = useApolloClient()
 

package/hooks/useCartIdCreate.ts

@@ -1,16 +1,14 @@
 import { useApolloClient } from '@graphcommerce/graphql'
 import { i18n } from '@lingui/core'
 import { CreateEmptyCartDocument } from './CreateEmptyCart.gql'
-import { CurrentCartIdDocument } from './CurrentCartId.gql'
-import { useAssignCurrentCartId } from './useAssignCurrentCartId'
+import { readCartId, useAssignCurrentCartId } from './useAssignCurrentCartId'
 
 export function useCartIdCreate() {
   const client = useApolloClient()
   const assignCurrentCartId = useAssignCurrentCartId()
 
   return async (): Promise<string> => {
-    const currentCartId = client.cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId
-      ?.id
+    const currentCartId = readCartId(client.cache)?.id
 
     if (currentCartId) return currentCartId
 

package/hooks/useCartQuery.ts

@@ -15,18 +15,21 @@ 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
   } = {},
 ) {
-  const { allowUrl = true, ...queryOptions } = options
+  const { allowUrl, ...queryOptions } = options
   const router = useRouter()
-  const { currentCartId } = useCurrentCartId()
+  const { currentCartId, locked } = useCurrentCartId()
 
   const urlCartId = router.query.cart_id
-  const usingUrl = allowUrl && typeof urlCartId === 'string'
+  const usingUrl = typeof urlCartId === 'string'
   const cartId = usingUrl ? urlCartId : currentCartId
 
-  if (usingUrl) queryOptions.fetchPolicy = 'cache-first'
+  if (usingUrl || locked) queryOptions.fetchPolicy = 'cache-only'
 
   if (usingUrl && typeof queryOptions.returnPartialData === 'undefined')
     queryOptions.returnPartialData = true
@@ -34,10 +37,5 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
   queryOptions.variables = { cartId, ...options?.variables } as V
   queryOptions.skip = queryOptions?.skip || !cartId
 
-  const result = useQuery(document, queryOptions as QueryHookOptions<Q, V>)
-
-  return {
-    ...result,
-    // error: called && !currentCartId ? noCartError : result.error,
-  }
+  return useQuery(document, queryOptions as QueryHookOptions<Q, V>)
 }

package/hooks/useClearCurrentCartId.ts

@@ -1,20 +1,12 @@
 import { useApolloClient } from '@graphcommerce/graphql'
 import { cookie } from '@graphcommerce/next-ui'
-import { CurrentCartIdDocument } from './CurrentCartId.gql'
 import { CART_ID_COOKIE } from './useAssignCurrentCartId'
 
 export function useClearCurrentCartId() {
   const { cache } = useApolloClient()
 
   return () => {
-    const id = cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId?.id
-    if (!id) return
-
-    cache.writeQuery({
-      query: CurrentCartIdDocument,
-      data: { currentCartId: { __typename: 'CurrentCartId', id: null } },
-      broadcast: true,
-    })
+    cache.evict({ fieldName: 'currentCartId', broadcast: true })
     cookie(CART_ID_COOKIE, null)
   }
 }

package/hooks/useCurrentCartId.ts

@@ -10,5 +10,10 @@ export function useCurrentCartId<
   V extends CurrentCartIdQueryVariables,
 >(options: QueryHookOptions<Q, V> = {}) {
   const queryResults = useQuery<Q, V>(CurrentCartIdDocument, options)
-  return { currentCartId: queryResults.data?.currentCartId?.id || '', ...queryResults }
+
+  return {
+    currentCartId: queryResults.data?.currentCartId?.id || '',
+    locked: queryResults.data?.currentCartId?.locked || false,
+    ...queryResults,
+  }
 }

package/hooks/useFormGqlMutationCart.ts

@@ -1,9 +1,10 @@
-import { MutationHookOptions, TypedDocumentNode } from '@graphcommerce/graphql'
+import { MutationHookOptions, TypedDocumentNode, useApolloClient } from '@graphcommerce/graphql'
 import {
   useFormGqlMutation,
   UseFormGqlMutationReturn,
   UseFormGraphQlOptions,
 } from '@graphcommerce/react-hook-form'
+import { CurrentCartIdDocument } from './CurrentCartId.gql'
 import { useCartIdCreate } from './useCartIdCreate'
 
 export function useFormGqlMutationCart<
@@ -11,18 +12,28 @@ export function useFormGqlMutationCart<
   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 onBeforeSubmit = async (variables: V) => {
-    const vars = { ...variables, cartId: await cartId() }
-    return options.onBeforeSubmit ? options.onBeforeSubmit(vars) : vars
-  }
   const result = useFormGqlMutation<Q, V>(
     document,
-    { ...options, onBeforeSubmit },
+    {
+      ...options,
+      onBeforeSubmit: async (variables) => {
+        const vars = { ...variables, cartId: await cartId() }
+
+        const res = client.cache.readQuery({ query: CurrentCartIdDocument })
+        if (!options.submitWhileLocked && res?.currentCartId?.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 },
   )
 

package/hooks/useMergeCustomerCart.ts

@@ -1,43 +1,6 @@
-import { useMutation } from '@graphcommerce/graphql'
-import { useCustomerQuery } from '@graphcommerce/magento-customer'
-import { useEffect } from 'react'
-import { CustomerCartDocument } from './CustomerCart.gql'
-import { UseMergeCustomerCartDocument } from './UseMergeCustomerCart.gql'
-import { useAssignCurrentCartId } from './useAssignCurrentCartId'
-import { useCurrentCartId } from './useCurrentCartId'
-
 /**
- * - Automatically assign the customer cart as the current cart
- * - Merge the guest cart into the customer cart
+ * @deprecated Is replaced by the useSignInFormMergeCart plugin.
  */
 export function useMergeCustomerCart() {
-  const { currentCartId } = useCurrentCartId()
-  const assignCurrentCartId = useAssignCurrentCartId()
-  const [merge] = useMutation(UseMergeCustomerCartDocument, { errorPolicy: 'all' })
-
-  const destinationCartId = useCustomerQuery(CustomerCartDocument, { fetchPolicy: 'network-only' })
-    ?.data?.customerCart.id
-
-  useEffect(() => {
-    // If we don't have a customer cart, we're done
-    // If the vistor cart is the same as the customer cart, we're done
-    if (!destinationCartId || currentCartId === destinationCartId) return
-
-    // If the visitor has a guest cart, try merging it into the customer cart
-    if (currentCartId) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      merge({ variables: { sourceCartId: currentCartId, destinationCartId } })
-        // We're not handling exceptions here:
-        // If the merge returns an error, we'll use the customer cart without merging the guest cart.
-        .catch((e) => {
-          console.error('Error merging carts', e)
-        })
-        .finally(() => {
-          // Assign the customer cart as the new cart id
-          assignCurrentCartId(destinationCartId)
-        })
-    } else {
-      assignCurrentCartId(destinationCartId)
-    }
-  }, [assignCurrentCartId, destinationCartId, merge, currentCartId])
+  return null
 }

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.2",
+  "version": "8.1.0-canary.22",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.2",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.2",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.2",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.2",
-    "@graphcommerce/graphql": "^8.1.0-canary.2",
-    "@graphcommerce/image": "^8.1.0-canary.2",
-    "@graphcommerce/magento-customer": "^8.1.0-canary.2",
-    "@graphcommerce/magento-graphql": "^8.1.0-canary.2",
-    "@graphcommerce/magento-store": "^8.1.0-canary.2",
-    "@graphcommerce/next-ui": "^8.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.2",
+    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.22",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.22",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.22",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.22",
+    "@graphcommerce/framer-utils": "^8.1.0-canary.22",
+    "@graphcommerce/graphql": "^8.1.0-canary.22",
+    "@graphcommerce/image": "^8.1.0-canary.22",
+    "@graphcommerce/magento-customer": "^8.1.0-canary.22",
+    "@graphcommerce/magento-graphql": "^8.1.0-canary.22",
+    "@graphcommerce/magento-store": "^8.1.0-canary.22",
+    "@graphcommerce/next-ui": "^8.1.0-canary.22",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.22",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.22",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.22",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/MagentoCartGraphqlProvider.tsx

@@ -1,12 +1,14 @@
 import { GraphQLProviderProps } from '@graphcommerce/graphql'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { cartErrorLink } from '../link/createCartErrorLink'
 import { cartTypePolicies, migrateCart } from '../typePolicies'
 
-export const component = 'GraphQLProvider'
-export const exported = '@graphcommerce/graphql'
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/graphql',
+}
 
-function MagentoCartGraphqlProvider(props: PluginProps<GraphQLProviderProps>) {
+export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
   const { Prev, links = [], policies = [], migrations = [], ...rest } = props
   return (
     <Prev
@@ -17,5 +19,3 @@ function MagentoCartGraphqlProvider(props: PluginProps<GraphQLProviderProps>) {
     />
   )
 }
-
-export const Plugin = MagentoCartGraphqlProvider

package/plugins/useSignInFormMergeCart.ts

@@ -0,0 +1,50 @@
+import { useApolloClient } from '@graphcommerce/graphql'
+import type { useSignInForm } from '@graphcommerce/magento-customer'
+import type { MethodPlugin } from '@graphcommerce/next-config'
+import { cartLock, readCartId, useAssignCurrentCartId } from '../hooks'
+import { CustomerCartDocument } from '../hooks/CustomerCart.gql'
+import { MergeCartsDocument } from '../hooks/MergeCarts.gql'
+
+export const func = 'useSignInForm'
+export const exported = '@graphcommerce/magento-customer'
+
+const useSignInFormMergeCart: MethodPlugin<typeof useSignInForm> = (useSignInForm, options) => {
+  const client = useApolloClient()
+  const assignCurrentCartId = useAssignCurrentCartId()
+
+  return useSignInForm({
+    ...options,
+    onComplete: async (data, variables) => {
+      await options.onComplete?.(data, variables)
+
+      cartLock(client.cache, true)
+
+      const destinationCartId = (
+        await client.query({
+          query: CustomerCartDocument,
+          fetchPolicy: 'network-only',
+        })
+      ).data.customerCart.id
+
+      try {
+        const sourceCartId = readCartId(client.cache)?.id
+        if (sourceCartId && sourceCartId !== destinationCartId) {
+          await client.mutate({
+            mutation: MergeCartsDocument,
+            variables: { sourceCartId, destinationCartId },
+          })
+        }
+      } catch (error) {
+        console.error(
+          'Error merging carts, continuing without merging, this might cause issues.',
+          error,
+        )
+      } finally {
+        // Assign the customer cart as the new cart id
+        assignCurrentCartId(destinationCartId)
+      }
+    },
+  })
+}
+
+export const plugin = useSignInFormMergeCart

package/typePolicies.ts

@@ -2,13 +2,16 @@ import { ApolloCache, NormalizedCacheObject } from '@graphcommerce/graphql'
 import type { StrictTypedTypePolicies } from '@graphcommerce/graphql'
 import type { CartPrices, QuerycartArgs, ShippingCartAddress } from '@graphcommerce/graphql-mesh'
 import { CartFabDocument } from './components/CartFab/CartFab.gql'
-import { CurrentCartIdDocument } from './hooks/CurrentCartId.gql'
+import { readCartId, writeCartId } from './hooks'
 
 export const cartTypePolicies: StrictTypedTypePolicies = {
   CurrentCartId: { keyFields: [] },
   CartPrices: {
     merge: (exiting, incoming, { mergeObjects }) => mergeObjects(exiting, incoming),
   },
+  CartItemPrices: {
+    merge: (exiting, incoming, { mergeObjects }) => mergeObjects(exiting, incoming),
+  },
   Cart: {
     fields: {
       shipping_addresses: {
@@ -21,6 +24,7 @@ export const cartTypePolicies: StrictTypedTypePolicies = {
           return merged ? [merged] : []
         },
       },
+      items: { merge: (_, incoming) => incoming },
       prices: {
         merge: (existing: CartPrices[] | undefined, incoming: CartPrices[], options) =>
           options.mergeObjects(existing ?? {}, incoming),
@@ -53,11 +57,10 @@ export const migrateCart = (
   oldCache: ApolloCache<NormalizedCacheObject>,
   newCache: ApolloCache<NormalizedCacheObject>,
 ) => {
-  const currentCartId = oldCache.readQuery({ query: CurrentCartIdDocument })
-  const cartId = currentCartId?.currentCartId?.id
+  const cartId = readCartId(oldCache)?.id
 
   if (cartId) {
-    newCache.writeQuery({ query: CurrentCartIdDocument, data: currentCartId, broadcast: true })
+    writeCartId(newCache, cartId)
 
     // We have special handling for the CartFab because it tries to load data only from the cache.
     const cartFab = oldCache.readQuery({ query: CartFabDocument })