@graphcommerce/magento-cart 3.0.1

package/hooks/useMergeCustomerCart.ts

@@ -0,0 +1,49 @@
+import { useMutation, useQuery } from '@apollo/client'
+import { CustomerTokenDocument, useExtractCustomerErrors } from '@graphcommerce/magento-customer'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+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
+ *
+ * @todo: Implement the assignCustomerToGuestCart when available: https://github.com/magento/magento2/pull/33106
+ */
+export function useMergeCustomerCart() {
+  const sourceCartId = useCurrentCartId()
+  const assignCurrentCartId = useAssignCurrentCartId()
+  const [merge, { error }] = useMutation(UseMergeCustomerCartDocument, { errorPolicy: 'all' })
+
+  useExtractCustomerErrors({ error })
+  const customerToken = useQuery(CustomerTokenDocument)?.data?.customerToken
+  const destinationCartId = useQuery(CustomerCartDocument, {
+    skip: !(customerToken?.token && customerToken.valid),
+  })?.data?.customerCart.id
+
+  useEffect(() => {
+    // If we don't have a customer cart, we're done
+    if (!destinationCartId) return
+
+    // If the vistor cart is the same as the customer cart, we're done
+    if (sourceCartId === destinationCartId) return
+
+    // If there is no visitor cart, assign the customer cart as the current cart
+    if (!sourceCartId) {
+      assignCurrentCartId(destinationCartId)
+      return
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      const result = await merge({ variables: { sourceCartId, destinationCartId } })
+
+      if (!result.data?.mergeCarts.id) return
+
+      assignCurrentCartId(result.data?.mergeCarts.id)
+    })()
+  }, [assignCurrentCartId, sourceCartId, destinationCartId, merge])
+}

package/index.ts

@@ -0,0 +1,4 @@
+export * from './Api/CartItemCountChanged.gql'
+export * from './hooks'
+export * from './components'
+export * from './typePolicies'

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@graphcommerce/magento-cart",
+  "version": "3.0.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/framer-scroller": "^0.2.1",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/magento-cart-address": "^2.103.1",
+    "@graphcommerce/magento-customer": "^3.0.1",
+    "@graphcommerce/magento-graphql": "^2.103.1",
+    "@graphcommerce/magento-store": "^3.0.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphcommerce/react-hook-form": "^2.102.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "clsx": "^1.1.1",
+    "framer-motion": "^4.1.17",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}

package/typePolicies.ts

@@ -0,0 +1,56 @@
+import { ApolloCache, NormalizedCacheObject } from '@apollo/client'
+import type { QueryCartArgs, ShippingCartAddress, TypedTypePolicies } from '@graphcommerce/graphql'
+import { CartPrices } from '@graphcommerce/graphql/generated/types'
+import { CartFabDocument } from './components/CartFab/CartFab.gql'
+import { CurrentCartIdDocument } from './hooks/CurrentCartId.gql'
+
+export const cartTypePolicies: TypedTypePolicies = {
+  CurrentCartId: { keyFields: [] },
+  CartPrices: {
+    merge: (exiting, incomming, { mergeObjects }) => mergeObjects(exiting, incomming),
+  },
+  Cart: {
+    fields: {
+      shipping_addresses: {
+        merge: (
+          existing: ShippingCartAddress[] | undefined,
+          incoming: ShippingCartAddress[],
+          options,
+        ) => [options.mergeObjects(existing?.[0] ?? {}, incoming[0])],
+      },
+      prices: {
+        merge: (existing: CartPrices[] | undefined, incoming: CartPrices[], options) =>
+          options.mergeObjects(existing ?? {}, incoming),
+      },
+    },
+  },
+
+  Query: {
+    fields: {
+      currentCartId: (_, { toReference }) => toReference({ __typename: 'CurrentCartId' }),
+      cart: (_, { args, toReference }) =>
+        toReference({ __typename: 'Cart', id: (args as QueryCartArgs)?.cart_id }),
+    },
+  },
+}
+
+export const migrateCart = (
+  oldCache: ApolloCache<NormalizedCacheObject>,
+  newCache: ApolloCache<NormalizedCacheObject>,
+) => {
+  const currentCartId = oldCache.readQuery({ query: CurrentCartIdDocument })
+  const cartId = currentCartId?.currentCartId?.id
+
+  if (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 })
+    newCache.writeQuery({
+      query: CartFabDocument,
+      data: cartFab,
+      variables: { cartId },
+      broadcast: true,
+    })
+  }
+}