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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 8.1.0-canary.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))
+
 ## 8.1.0-canary.2
 
 ## 8.0.3-canary.1

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/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/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.3",
   "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.3",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.3",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.3",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.3",
+    "@graphcommerce/framer-utils": "^8.1.0-canary.3",
+    "@graphcommerce/graphql": "^8.1.0-canary.3",
+    "@graphcommerce/image": "^8.1.0-canary.3",
+    "@graphcommerce/magento-customer": "^8.1.0-canary.3",
+    "@graphcommerce/magento-graphql": "^8.1.0-canary.3",
+    "@graphcommerce/magento-store": "^8.1.0-canary.3",
+    "@graphcommerce/next-ui": "^8.1.0-canary.3",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.3",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.3",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.3",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/useSignInFormMergeCart.ts

@@ -0,0 +1,50 @@
+import { useApolloClient } from '@graphcommerce/graphql'
+import type { useSignInForm } from '@graphcommerce/magento-customer/hooks/useSignInForm'
+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/hooks/useSignInForm'
+
+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,7 +2,7 @@ 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: [] },
@@ -53,11 +53,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 })