@graphcommerce/magento-cart 9.0.0-canary.81 → 9.0.0-canary.82

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 9.0.0-canary.82
+
+### Minor Changes
+
+- [#2366](https://github.com/graphcommerce-org/graphcommerce/pull/2366) [`3612c99`](https://github.com/graphcommerce-org/graphcommerce/commit/3612c994b80bb3b1bc02de10668f69a332402dc4) - Add `permissions` config so the website or store can be configurated to run in different modes. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
 ## 9.0.0-canary.81
 
 ## 9.0.0-canary.80

package/Config.graphqls

@@ -1,3 +1,20 @@
+enum CartPermissions {
+  ENABLED
+  CUSTOMER_ONLY
+  DISABLED
+}
+
+extend input GraphCommercePermissions {
+  """
+  Changes the availability of the add to cart buttons and the cart page to either customer only or completely disables it.
+  """
+  cart: CartPermissions
+  """
+  Changes the availability of the checkout to either customer only or completely disables it.
+  """
+  checkout: CartPermissions
+}
+
 extend input GraphCommerceStorefrontConfig {
   """
   Due to a limitation of the GraphQL API it is not possible to determine if a cart should be displayed including or excluding tax.

package/components/ApolloCartError/ApolloCartErrorAlert.tsx

@@ -1,55 +1,10 @@
-import { useQuery } from '@graphcommerce/graphql'
 import {
   ApolloCustomerErrorAlert,
   ApolloCustomerErrorAlertProps,
-  CustomerDocument,
 } from '@graphcommerce/magento-customer'
-import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
-import { Button } from '@mui/material'
-import { useClearCurrentCartId } from '../../hooks'
 
 export type ApolloCartErrorAlertProps = ApolloCustomerErrorAlertProps
 
 export function ApolloCartErrorAlert(props: ApolloCartErrorAlertProps) {
-  const { error, graphqlErrorAlertProps } = props
-
-  const email = useQuery(CustomerDocument, { fetchPolicy: 'cache-only' }).data?.customer?.email
-
-  const [newError, unauthorized] = graphqlErrorByCategory({
-    category: 'graphql-authorization',
-    error,
-    mask: email
-      ? i18n._(
-          /* i18n */ 'This cart is assigned to {email}. Please sign in to continue shopping.',
-          { email },
-        )
-      : undefined,
-    extract: false,
-  })
-
-  const clear = useClearCurrentCartId()
-
-  return (
-    <ApolloCustomerErrorAlert
-      {...props}
-      error={newError}
-      graphqlErrorAlertProps={{
-        action: unauthorized ? (
-          <>
-            {graphqlErrorAlertProps?.action}
-            <Button onClick={clear} color='error' size='small'>
-              <Trans id='Sign out' />
-            </Button>
-            <Button href='/account/signin' color='error' size='small'>
-              <Trans id='Sign in' />
-            </Button>
-          </>
-        ) : (
-          graphqlErrorAlertProps?.action
-        ),
-      }}
-    />
-  )
+  return <ApolloCustomerErrorAlert {...props} />
 }

package/components/CartFab/CartFab.tsx

@@ -11,6 +11,7 @@ import { i18n } from '@lingui/core'
 import { alpha, Fab, FabProps, styled, useTheme, Box, SxProps, Theme } 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'
@@ -100,7 +101,12 @@ function CartFabContent(props: CartFabContentProps) {
 }
 
 export function CartFab(props: CartFabProps) {
-  const cartQuery = useCartQuery(CartFabDocument)
+  const cartEnabled = useCartEnabled()
+  const shouldLoginToContinue = useCartShouldLoginToContinue()
+  const cartQuery = useCartQuery(CartFabDocument, {
+    skip: shouldLoginToContinue,
+  })
+  if (!cartEnabled) return null
 
   return (
     <WaitForQueries waitFor={cartQuery} fallback={<CartFabContent {...props} total_quantity={0} />}>

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,8 +1,9 @@
 import { Money } from '@graphcommerce/magento-store'
 import { iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
-import { Box, Button, ButtonProps, SxProps, Theme } from '@mui/material'
+import { Trans } from '@lingui/macro'
+import { Box, Button, ButtonProps, Link, SxProps, Theme } from '@mui/material'
 import React from 'react'
+import { useCheckoutShouldLoginToContinue } from '../../hooks'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutProps = {
@@ -17,12 +18,13 @@ export type CartStartCheckoutProps = {
   ) => void
 }
 
-const name = 'CartStartCheckout' as const
+const name = 'CartStartCheckout'
 const parts = [
   'checkoutButtonContainer',
   'checkoutButton',
   'checkoutButtonTotal',
   'checkoutMoney',
+  'loginContainer',
 ] as const
 const { classes } = extendableComponent(name, parts)
 
@@ -36,6 +38,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
     cart,
   } = props
 
+  const shouldLoginToContinue = useCheckoutShouldLoginToContinue()
   const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
   const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
@@ -43,10 +46,21 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
     <Box
       className={classes.checkoutButtonContainer}
       sx={[
-        (theme) => ({ textAlign: 'center', my: theme.spacings.md }),
+        (theme) => ({
+          textAlign: 'center',
+          my: theme.spacings.md,
+        }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
+      {shouldLoginToContinue && (
+        <Box sx={{ mb: 1 }} className={classes.loginContainer}>
+          <Link href='/account/signin'>
+            <Trans>You must first login before you can continue</Trans>
+          </Link>
+        </Box>
+      )}
+
       <Button
         href='/checkout'
         id='cart-start-checkout'
@@ -60,7 +74,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
           onStart?.(e, cart)
           return onClick?.(e)
         }}
-        disabled={disabled || !hasTotals || hasErrors}
+        disabled={disabled || !hasTotals || hasErrors || shouldLoginToContinue}
         {...buttonProps}
       >
         <Box
@@ -71,7 +85,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
             '& ~ span.MuiButton-endIcon': { marginLeft: '6px' },
           })}
         >
-          <Trans id='Start Checkout' />
+          <Trans>Start Checkout</Trans>
         </Box>{' '}
         {hasTotals && (
           <span className={classes.checkoutMoney}>
@@ -84,7 +98,9 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
 
       {hasErrors && (
         <Box sx={(theme) => ({ color: 'error.main', mt: theme.spacings.xs })}>
-          <Trans id='Some items in your cart contain errors, please update or remove them, then try again.' />
+          <Trans>
+            Some items in your cart contain errors, please update or remove them, then try again.
+          </Trans>
         </Box>
       )}
     </Box>

package/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -2,6 +2,7 @@ import { iconChevronRight, IconSvg, LinkOrButton, LinkOrButtonProps } from '@gra
 import { Trans } from '@lingui/react'
 import { SxProps, Theme } from '@mui/material'
 import React from 'react'
+import { useCheckoutShouldLoginToContinue } from '../../hooks'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
 export type CartStartCheckoutLinkOrButtonProps = {
@@ -18,13 +19,14 @@ export type CartStartCheckoutLinkOrButtonProps = {
 
 export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButtonProps) {
   const {
-    children,
     onStart,
     disabled,
     linkOrButtonProps: { onClick, button, ...linkOrButtonProps } = {},
     cart,
   } = props
 
+  const shouldLoginToContinue = useCheckoutShouldLoginToContinue()
+
   const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
   const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
@@ -38,7 +40,7 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
         onStart?.(e, cart)
       }}
       button={{ variant: 'pill', ...button }}
-      disabled={disabled || !hasTotals || hasErrors}
+      disabled={disabled || !hasTotals || hasErrors || shouldLoginToContinue}
       color='secondary'
       endIcon={<IconSvg src={iconChevronRight} />}
       {...linkOrButtonProps}

package/components/InlineAccount/InlineAccount.tsx

@@ -3,6 +3,7 @@ import {
   IsEmailAvailableDocument,
   useCustomerSession,
   useGuestQuery,
+  useCustomerAccountCanSignIn,
 } from '@graphcommerce/magento-customer'
 import { Button, FormRow, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
@@ -21,13 +22,15 @@ export type InlineAccountProps = {
   sx?: SxProps<Theme>
 }
 
-const name = 'InlineAccount' as const
+const name = 'InlineAccount'
 const parts = ['root', 'innerContainer', 'form', 'button', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 
 export function InlineAccount(props: InlineAccountProps) {
   const { title, description, sx = [] } = props
 
+  const canLogin = useCustomerAccountCanSignIn()
+
   const [toggled, setToggled] = useState<boolean>(false)
 
   const { loading, data } = useCartQuery(InlineAccountDocument)
@@ -42,7 +45,7 @@ export function InlineAccount(props: InlineAccountProps) {
   const { firstname, lastname } = cart?.shipping_addresses?.[0] ?? {}
   const canSignUp = isEmailAvailableData?.isEmailAvailable?.is_email_available === true
 
-  if (loggedIn || !canSignUp) return null
+  if (loggedIn || !canSignUp || !canLogin) return null
 
   return (
     <div>

package/hooks/index.ts

@@ -1,8 +1,10 @@
 export * from './useAssignCurrentCartId'
-export * from './useCurrentCartId'
+export * from './useCartIdCreate'
+export * from './useCartPermissions'
 export * from './useCartQuery'
+export * from './useCheckoutPermissions'
 export * from './useClearCurrentCartId'
-export * from './useCartIdCreate'
+export * from './useCurrentCartId'
+export * from './useDisplayInclTax'
 export * from './useFormGqlMutationCart'
 export * from './useMergeCustomerCart'
-export * from './useDisplayInclTax'

package/hooks/useCartPermissions.ts

@@ -0,0 +1,21 @@
+import { useCustomerSession } from '@graphcommerce/magento-customer/hooks/useCustomerSession'
+import { useStorefrontConfig } from '@graphcommerce/next-ui'
+
+function useCartPermissions() {
+  return (
+    useStorefrontConfig().permissions?.cart ??
+    import.meta.graphCommerce.permissions?.cart ??
+    'ENABLED'
+  )
+}
+
+export function useCartEnabled() {
+  return useCartPermissions() !== 'DISABLED'
+}
+
+export function useCartShouldLoginToContinue() {
+  const { loggedIn } = useCustomerSession()
+  const permission = useCartPermissions()
+  if (permission === 'ENABLED') return false
+  return !loggedIn
+}

package/hooks/useCartQuery.ts

@@ -1,5 +1,7 @@
-import { useQuery, TypedDocumentNode, QueryHookOptions } from '@graphcommerce/graphql'
+import { useQuery, TypedDocumentNode, QueryHookOptions, ApolloError } from '@graphcommerce/graphql'
+import { GraphQLError } from 'graphql'
 import { useRouter } from 'next/router'
+import { useCartShouldLoginToContinue } from './useCartPermissions'
 import { useCurrentCartId } from './useCurrentCartId'
 
 /**
@@ -22,12 +24,14 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
   } = {},
 ) {
   const { allowUrl, ...queryOptions } = options
+
   const router = useRouter()
   const { currentCartId, locked } = useCurrentCartId()
 
   const urlCartId = router.query.cart_id
   const usingUrl = typeof urlCartId === 'string'
   const cartId = usingUrl ? urlCartId : currentCartId
+  const shouldLoginToContinue = useCartShouldLoginToContinue()
 
   if (usingUrl || locked) queryOptions.fetchPolicy = 'cache-only'
 
@@ -35,7 +39,24 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
     queryOptions.returnPartialData = true
 
   queryOptions.variables = { cartId, ...options?.variables } as V
-  queryOptions.skip = queryOptions?.skip || !cartId
 
-  return useQuery(document, queryOptions as QueryHookOptions<Q, V>)
+  const query = useQuery(document, {
+    ...(queryOptions as QueryHookOptions<Q, V>),
+    skip: queryOptions.skip || !cartId || shouldLoginToContinue,
+  })
+
+  if (shouldLoginToContinue && !queryOptions?.skip) {
+    return {
+      ...query,
+      error: new ApolloError({
+        graphQLErrors: [
+          new GraphQLError('Action can not be performed by the current user', {
+            extensions: { category: 'graphql-authorization' },
+          }),
+        ],
+      }),
+    }
+  }
+
+  return query
 }

package/hooks/useCheckoutPermissions.ts

@@ -0,0 +1,21 @@
+import { useCustomerSession } from '@graphcommerce/magento-customer/hooks/useCustomerSession'
+import { useStorefrontConfig } from '@graphcommerce/next-ui'
+
+function useCheckoutPermission() {
+  return (
+    useStorefrontConfig().permissions?.checkout ??
+    import.meta.graphCommerce.permissions?.checkout ??
+    'ENABLED'
+  )
+}
+
+export function useCheckoutGuestEnabled() {
+  return useCheckoutPermission() === 'ENABLED'
+}
+
+export function useCheckoutShouldLoginToContinue() {
+  const { loggedIn } = useCustomerSession()
+  const permission = useCheckoutPermission()
+  if (permission === 'ENABLED') return false
+  return !loggedIn
+}

package/hooks/useFormGqlMutationCart.ts

@@ -1,11 +1,19 @@
-import { MutationHookOptions, TypedDocumentNode, useApolloClient } from '@graphcommerce/graphql'
+import {
+  ApolloError,
+  MutationHookOptions,
+  TypedDocumentNode,
+  useApolloClient,
+} from '@graphcommerce/graphql'
 import {
   useFormGqlMutation,
   UseFormGqlMutationReturn,
   UseFormGraphQlOptions,
 } from '@graphcommerce/react-hook-form'
+import { GraphQLError, Kind } from 'graphql'
+import { isProtectedCartOperation } from '../link/isProtectedCartOperation'
 import { CurrentCartIdDocument } from './CurrentCartId.gql'
 import { useCartIdCreate } from './useCartIdCreate'
+import { useCartShouldLoginToContinue } from './useCartPermissions'
 
 export function useFormGqlMutationCart<
   Q extends Record<string, unknown>,
@@ -17,18 +25,30 @@ export function useFormGqlMutationCart<
 ): UseFormGqlMutationReturn<Q, V> {
   const cartId = useCartIdCreate()
   const client = useApolloClient()
+  const shouldLoginToContinue = useCartShouldLoginToContinue()
+
+  let shouldBlockOperation = false
+  document.definitions.forEach((defenition) => {
+    if (defenition.kind === Kind.OPERATION_DEFINITION) {
+      shouldBlockOperation = !isProtectedCartOperation(defenition.name?.value ?? '')
+    }
+  })
 
   const result = useFormGqlMutation<Q, V>(
     document,
     {
       ...options,
       onBeforeSubmit: async (variables) => {
+        if (shouldLoginToContinue && shouldBlockOperation) {
+          return false
+        }
         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
+          throw Error('Could not submit form, cart is locked')
+          // console.log('Could not submit form, cart is locked', res.currentCartId.locked)
+          // return false
         }
 
         return options.onBeforeSubmit ? options.onBeforeSubmit(vars) : vars
@@ -37,5 +57,18 @@ export function useFormGqlMutationCart<
     { errorPolicy: 'all', ...operationOptions },
   )
 
+  if (shouldLoginToContinue && result.formState.isSubmitted && shouldBlockOperation) {
+    return {
+      ...result,
+      error: new ApolloError({
+        graphQLErrors: [
+          new GraphQLError('Action can not be performed by the current user', {
+            extensions: { category: 'graphql-authorization' },
+          }),
+        ],
+      }),
+    }
+  }
+
   return result
 }

package/index.ts

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

package/link/{createCartErrorLink.ts → cartLink.ts}

@@ -1,9 +1,14 @@
 import { fromPromise, globalApolloClient, Operation } from '@graphcommerce/graphql'
-import { onError } from '@graphcommerce/graphql/apollo'
+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 { GraphQLError } from 'graphql'
+import { t } from '@lingui/macro'
+import { GraphQLError } from 'graphql'
 import { writeCartId } from '../hooks'
 import { CreateEmptyCartDocument } from '../hooks/CreateEmptyCart.gql'
+import { getCartEnabledForUser } from '../utils'
+import { isProtectedCartOperation } from './isProtectedCartOperation'
 
 type CartOperation = Operation & { variables: { cartId: string } }
 function isCartOperation(operation: Operation): operation is CartOperation {
@@ -15,7 +20,7 @@ function errorIsIncluded(errorPath: readonly (string | number)[] | undefined, ke
   return keys.some((value) => value === error)
 }
 
-export const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
+const cartErrorLink = onError(({ graphQLErrors, operation, forward }) => {
   if (!globalApolloClient.current) return undefined
 
   const client = globalApolloClient.current
@@ -68,4 +73,55 @@ export const cartErrorLink = onError(({ graphQLErrors, operation, forward }) =>
     })
 })
 
-export const createCartErrorLink = () => cartErrorLink
+const cartPermissionLink = (router: PushRouter) =>
+  new ApolloLink((operation, forward) => {
+    const { locale } = router
+    const { cache } = operation.getContext()
+
+    if (!isProtectedCartOperation(operation.operationName)) return forward(operation)
+
+    const check = () => Boolean(cache?.readQuery({ query: CustomerTokenDocument }))
+    if (getCartEnabledForUser(locale, check)) return forward(operation)
+
+    if (!getCustomerAccountCanSignIn(locale))
+      throw new Error(
+        'Permission error: permissions.customerAccount is DISABLED, while permissions.cart is set to CUSTOMER_ONLY',
+      )
+
+    const oldHeaders = operation.getContext().headers
+    const signInAgainPromise = pushWithPromise(router, '/account/signin')
+
+    return fromPromise(signInAgainPromise).flatMap(() => {
+      const tokenQuery = cache?.readQuery({ query: CustomerTokenDocument })
+
+      if (tokenQuery?.customerToken?.valid) {
+        // Customer is authenticated, retrying request.
+        operation.setContext({
+          headers: {
+            ...oldHeaders,
+            authorization: `Bearer ${tokenQuery?.customerToken?.token}`,
+          },
+        })
+        return forward(operation)
+      }
+
+      return Observable.of({
+        data: null,
+        errors: [
+          new GraphQLError(t`Please login to add products to your cart`, {
+            extensions: { category: 'graphql-authorization' },
+          }),
+        ],
+      })
+    })
+  })
+
+export const cartLink = (router: PushRouter) => {
+  const links = [cartErrorLink]
+
+  if (!(import.meta.graphCommerce.permissions?.cart === 'ENABLED')) {
+    links.push(cartPermissionLink(router))
+  }
+
+  return ApolloLink.from(links)
+}

package/link/isProtectedCartOperation.ts

@@ -0,0 +1,5 @@
+export function isProtectedCartOperation(name: string): boolean {
+  /* Todo: Determine what operations should be added here */
+  const mutations = ['AddProductsToCart', 'CreateEmptyCart']
+  return mutations.includes(name)
+}

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.81",
+  "version": "9.0.0-canary.82",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,25 +12,26 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.81",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.81",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.81",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.81",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.81",
-    "@graphcommerce/graphql": "^9.0.0-canary.81",
-    "@graphcommerce/image": "^9.0.0-canary.81",
-    "@graphcommerce/magento-customer": "^9.0.0-canary.81",
-    "@graphcommerce/magento-graphql": "^9.0.0-canary.81",
-    "@graphcommerce/magento-store": "^9.0.0-canary.81",
-    "@graphcommerce/next-ui": "^9.0.0-canary.81",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.81",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.81",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.81",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.82",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.82",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.82",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.82",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.82",
+    "@graphcommerce/graphql": "^9.0.0-canary.82",
+    "@graphcommerce/image": "^9.0.0-canary.82",
+    "@graphcommerce/magento-customer": "^9.0.0-canary.82",
+    "@graphcommerce/magento-graphql": "^9.0.0-canary.82",
+    "@graphcommerce/magento-store": "^9.0.0-canary.82",
+    "@graphcommerce/next-ui": "^9.0.0-canary.82",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.82",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.82",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.82",
     "@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",
+    "graphql": "^16.0.0",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/plugins/MagentoCartGraphqlProvider.tsx

@@ -1,6 +1,9 @@
 import { GraphQLProviderProps } from '@graphcommerce/graphql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { cartErrorLink } from '../link/createCartErrorLink'
+import { useEventCallback } from '@mui/material'
+import { NextRouter } from 'next/router'
+import { useMemo } from 'react'
+import { cartLink } from '../link/cartLink'
 import { cartTypePolicies, migrateCart } from '../typePolicies'
 
 export const config: PluginConfig = {
@@ -9,11 +12,20 @@ export const config: PluginConfig = {
 }
 
 export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
-  const { Prev, links = [], policies = [], migrations = [], ...rest } = props
+  const { Prev, router, links = [], policies = [], migrations = [], ...rest } = props
+
+  const push = useEventCallback<NextRouter['push']>((...args) => router.push(...args))
+
+  const cartLinkMemo = useMemo(
+    () => cartLink({ push, events: router.events, locale: router.locale }),
+    [push, router.events, router.locale],
+  )
+
   return (
     <Prev
       {...rest}
-      links={[...links, cartErrorLink]}
+      router={router}
+      links={[...links, cartLinkMemo]}
       policies={[...policies, cartTypePolicies]}
       migrations={[...migrations, migrateCart]}
     />

package/utils/cartPermissions.ts

@@ -0,0 +1,23 @@
+import { storefrontConfig } from '@graphcommerce/next-ui'
+
+function getCartPermissions(locale: string | undefined) {
+  return (
+    storefrontConfig(locale)?.permissions?.cart ??
+    import.meta.graphCommerce.permissions?.cart ??
+    'ENABLED'
+  )
+}
+
+export function getCartDisabled(locale: string | undefined) {
+  return getCartPermissions(locale) === 'DISABLED'
+}
+
+export function getCartGuestEnabled(locale: string | undefined) {
+  return getCartPermissions(locale) === 'ENABLED'
+}
+
+export function getCartEnabledForUser(locale: string | undefined, loggedIn: () => boolean) {
+  if (getCartGuestEnabled(locale)) return true
+  if (getCartDisabled(locale)) return false
+  return !!loggedIn()
+}

package/utils/checkoutPermissions.ts

@@ -0,0 +1,13 @@
+import { storefrontConfig } from '@graphcommerce/next-ui'
+
+function getCheckoutPermission(locale: string | undefined) {
+  return (
+    storefrontConfig(locale)?.permissions?.checkout ??
+    import.meta.graphCommerce.permissions?.checkout ??
+    'ENABLED'
+  )
+}
+
+export function getCheckoutIsDisabled(locale: string | undefined) {
+  return getCheckoutPermission(locale) === 'DISABLED'
+}

package/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './cartPermissions'
+export * from './checkoutPermissions'