@graphcommerce/magento-cart 8.0.3-canary.4 → 8.1.0-canary.2

package/CHANGELOG.md

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

package/components/CartItemSummary/CartItemSummary.tsx

@@ -38,7 +38,10 @@ type OrderSummaryProps = ActionCardLayoutProps & {
 
 export function CartItemSummary(props: OrderSummaryProps) {
   const { sx = [], size, layout = 'list', itemProps, ...cardLayout } = props
-  const { data } = useCartQuery(CartItemSummaryDocument, { fetchPolicy: 'cache-only' })
+  const { data } = useCartQuery(CartItemSummaryDocument, {
+    allowUrl: true,
+    fetchPolicy: 'cache-only',
+  })
 
   if (!data?.cart) return null
 
@@ -82,7 +85,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)
+  const { data } = useCartQuery(GetCartTotalsDocument, { allowUrl: true })
   const { containerMargin, additionalSubtotals, additionalTotals, sx = [] } = props
 
   const classes = withState({ containerMargin })

package/hooks/CurrentCartId.graphql

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

package/hooks/CurrentCartId.graphqls

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

package/hooks/CustomerCart.graphql

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

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

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

package/hooks/useAssignCurrentCartId.ts

@@ -8,26 +8,11 @@ export const CART_ID_COOKIE = 'cart'
 export function writeCartId(cache: ApolloCache<object>, id: string | null = null) {
   cache.writeQuery({
     query: CurrentCartIdDocument,
-    data: { currentCartId: { __typename: 'CurrentCartId', locked: false, id } },
+    data: { currentCartId: { __typename: 'CurrentCartId', 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,14 +1,16 @@
 import { useApolloClient } from '@graphcommerce/graphql'
 import { i18n } from '@lingui/core'
 import { CreateEmptyCartDocument } from './CreateEmptyCart.gql'
-import { readCartId, useAssignCurrentCartId } from './useAssignCurrentCartId'
+import { CurrentCartIdDocument } from './CurrentCartId.gql'
+import { useAssignCurrentCartId } from './useAssignCurrentCartId'
 
 export function useCartIdCreate() {
   const client = useApolloClient()
   const assignCurrentCartId = useAssignCurrentCartId()
 
   return async (): Promise<string> => {
-    const currentCartId = readCartId(client.cache)?.id
+    const currentCartId = client.cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId
+      ?.id
 
     if (currentCartId) return currentCartId
 

package/hooks/useCartQuery.ts

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

package/hooks/useClearCurrentCartId.ts

@@ -1,12 +1,20 @@
 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 () => {
-    cache.evict({ fieldName: 'currentCartId', broadcast: true })
+    const id = cache.readQuery({ query: CurrentCartIdDocument })?.currentCartId?.id
+    if (!id) return
+
+    cache.writeQuery({
+      query: CurrentCartIdDocument,
+      data: { currentCartId: { __typename: 'CurrentCartId', id: null } },
+      broadcast: true,
+    })
     cookie(CART_ID_COOKIE, null)
   }
 }

package/hooks/useCurrentCartId.ts

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

package/hooks/useMergeCustomerCart.ts

@@ -1,6 +1,43 @@
+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'
+
 /**
- * @deprecated Is replaced by the useSignInFormMergeCart plugin.
+ * - Automatically assign the customer cart as the current cart
+ * - Merge the guest cart into the customer cart
  */
 export function useMergeCustomerCart() {
-  return null
+  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])
 }

package/package.json

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

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 { readCartId, writeCartId } from './hooks'
+import { CurrentCartIdDocument } from './hooks/CurrentCartId.gql'
 
 export const cartTypePolicies: StrictTypedTypePolicies = {
   CurrentCartId: { keyFields: [] },
@@ -53,10 +53,11 @@ export const migrateCart = (
   oldCache: ApolloCache<NormalizedCacheObject>,
   newCache: ApolloCache<NormalizedCacheObject>,
 ) => {
-  const cartId = readCartId(oldCache)?.id
+  const currentCartId = oldCache.readQuery({ query: CurrentCartIdDocument })
+  const cartId = currentCartId?.currentCartId?.id
 
   if (cartId) {
-    writeCartId(newCache, cartId)
+    newCache.writeQuery({ query: CurrentCartIdDocument, data: currentCartId, broadcast: true })
 
     // We have special handling for the CartFab because it tries to load data only from the cache.
     const cartFab = oldCache.readQuery({ query: CartFabDocument })

package/plugins/useSignInFormMergeCart.ts

@@ -1,50 +0,0 @@
-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