feat(GCOM-1446): cleanup, replace FullPageMessage with ApolloCartErro…

…rFullPage error handling

examples/magento-graphcms/components/Layout/Footer.tsx

@@ -10,7 +10,7 @@ export type FooterProps = FooterQueryFragment
 
 export function Footer(props: FooterProps) {
   const { footer } = props
-  const enabled = useCheckoutGuestEnabled()
+  const cartEnabled = useCheckoutGuestEnabled()
 
   return (
     <FooterBase
@@ -48,7 +48,7 @@ export function Footer(props: FooterProps) {
               {link.title}
             </Link>
           ))}
-          {import.meta.graphCommerce.magentoVersion >= 247 && enabled && (
+          {import.meta.graphCommerce.magentoVersion >= 247 && cartEnabled && (
             <Link href='/guest/orderstatus' color='textPrimary' underline='always'>
               <Trans>Order status</Trans>
             </Link>

examples/magento-graphcms/pages/cart.tsx

@@ -68,7 +68,6 @@ function CartPage() {
           )}
         </LayoutTitle>
       </LayoutOverlayHeader>
-
       <WaitForQueries
         waitFor={cart}
         fallback={

examples/magento-graphcms/pages/checkout/index.tsx

@@ -13,7 +13,6 @@ import {
   EmptyCart,
   getCheckoutIsDisabled,
   useCartQuery,
-  useCheckoutShouldLoginToContinue,
 } from '@graphcommerce/magento-cart'
 import { ShippingPageDocument } from '@graphcommerce/magento-cart-checkout'
 import { EmailForm } from '@graphcommerce/magento-cart-email'
@@ -23,7 +22,6 @@ import {
 } from '@graphcommerce/magento-cart-shipping-address'
 import { ShippingMethodForm } from '@graphcommerce/magento-cart-shipping-method'
 import { CustomerDocument, useCustomerQuery } from '@graphcommerce/magento-customer'
-import { UnauthenticatedFullPageMessage } from '@graphcommerce/magento-customer/components/WaitForCustomer/UnauthenticatedFullPageMessage'
 import { PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
   FormActions,
@@ -54,8 +52,6 @@ function ShippingPage() {
     typeof shippingPage.data?.cart !== 'undefined' &&
     (shippingPage.data.cart?.items?.length ?? 0) > 0
 
-  if (useCheckoutShouldLoginToContinue()) return <UnauthenticatedFullPageMessage />
-
   return (
     <>
       <PageMeta title={i18n._(/* i18n */ 'Shipping')} metaRobots={['noindex']} />

examples/magento-graphcms/pages/checkout/payment.tsx

@@ -9,7 +9,6 @@ import {
   EmptyCart,
   getCheckoutIsDisabled,
   useCartQuery,
-  useCheckoutShouldLoginToContinue,
 } from '@graphcommerce/magento-cart'
 import { BillingPageDocument } from '@graphcommerce/magento-cart-checkout'
 import { CouponAccordion } from '@graphcommerce/magento-cart-coupon'
@@ -20,7 +19,6 @@ import {
   PaymentMethodActionCardListForm,
   PaymentMethodContextProvider,
 } from '@graphcommerce/magento-cart-payment-method'
-import { UnauthenticatedFullPageMessage } from '@graphcommerce/magento-customer/components/WaitForCustomer/UnauthenticatedFullPageMessage'
 import { SubscribeToNewsletter } from '@graphcommerce/magento-newsletter'
 import { PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
@@ -49,8 +47,6 @@ function PaymentPage() {
   const cartExists =
     typeof billingPage.data?.cart !== 'undefined' && (billingPage.data.cart?.items?.length ?? 0) > 0
 
-  if (useCheckoutShouldLoginToContinue()) return <UnauthenticatedFullPageMessage />
-
   return (
     <ComposedForm>
       <PageMeta title={i18n._(/* i18n */ 'Payment')} metaRobots={['noindex']} />

packages/magento-cart/hooks/useCartQuery.ts

@@ -45,14 +45,12 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
     skip: queryOptions.skip || !cartId || shouldLoginToContinue,
   })
 
-  // Heeft dit voorkeur over het openen van de login overlay?
   if (shouldLoginToContinue && !queryOptions?.skip) {
-    console.log(document)
     return {
       ...query,
       error: new ApolloError({
         graphQLErrors: [
-          new GraphQLError('oepsie', {
+          new GraphQLError('Action can not be performed by the current user', {
             extensions: { category: 'graphql-authorization' },
           }),
         ],

packages/magento-cart/hooks/useFormGqlMutationCart.ts

@@ -10,10 +10,10 @@ import {
   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'
-import { isProtectedCartOperation } from '../link/isProtectedCartOperation'
 
 export function useFormGqlMutationCart<
   Q extends Record<string, unknown>,
@@ -57,12 +57,11 @@ export function useFormGqlMutationCart<
   )
 
   if (shouldLoginToContinue && result.formState.isSubmitted && shouldBlockOperation) {
-    console.log(document)
     return {
       ...result,
       error: new ApolloError({
         graphQLErrors: [
-          new GraphQLError('oepsie', {
+          new GraphQLError('Action can not be performed by the current user', {
             extensions: { category: 'graphql-authorization' },
           }),
         ],

packages/magento-customer/components/WaitForCustomer/WaitForCustomer.tsx

@@ -1,11 +1,10 @@
 import { mergeErrors, WaitForQueries, WaitForQueriesProps } from '@graphcommerce/ecommerce-ui'
-import { FullPageMessage, FullPageMessageProps } from '@graphcommerce/next-ui'
+import { FullPageMessage, FullPageMessageProps, iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { CircularProgress } from '@mui/material'
+import { Button, CircularProgress } from '@mui/material'
 import React from 'react'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { ApolloCustomerErrorFullPage } from '../ApolloCustomerError/ApolloCustomerErrorFullPage'
-import { UnauthenticatedFullPageMessage } from './UnauthenticatedFullPageMessage'
 
 type WaitForCustomerProps = Omit<WaitForQueriesProps, 'fallback' | 'waitFor'> &
   Pick<FullPageMessageProps, 'disableMargin'> & {
@@ -65,7 +64,22 @@ export function WaitForCustomer(props: WaitForCustomerProps) {
       }
     >
       {!session.loggedIn &&
-        (unauthenticated ?? <UnauthenticatedFullPageMessage disableMargin={disableMargin} />)}
+        (unauthenticated ?? (
+          <FullPageMessage
+            icon={<IconSvg src={iconPerson} size='xxl' />}
+            title={<Trans id='You must sign in to continue' />}
+            button={
+              <Button href='/account/signin' variant='pill' color='secondary' size='large'>
+                {!session.valid ? (
+                  <Trans id='Sign in' />
+                ) : (
+                  <Trans id='Sign in or create an account!' />
+                )}
+              </Button>
+            }
+            disableMargin={disableMargin}
+          />
+        ))}
       {session.loggedIn && error && <ApolloCustomerErrorFullPage error={error} />}
       {session.loggedIn && !error && children}
     </WaitForQueries>

packages/magento-customer/link/customerLink.ts

@@ -12,7 +12,7 @@ import { NextRouter } from 'next/router'
 import { signOut } from '../components/SignOutForm/signOut'
 import { CustomerTokenDocument } from '../hooks'
 
-export type PushRouter = Pick<NextRouter, 'push' | 'events' | 'locale'>
+export type PushRouter = Pick<NextRouter, 'push' | 'events'>
 
 declare module '@apollo/client' {
   interface DefaultContext {
@@ -128,8 +128,5 @@ const customerErrorLink = (router: PushRouter) =>
     })
   })
 
-export const customerLink = (router: PushRouter) => {
-  const links = [addTokenHeader, customerErrorLink(router)]
-
-  return ApolloLink.from(links)
-}
+export const customerLink = (router: PushRouter) =>
+  ApolloLink.from([addTokenHeader, customerErrorLink(router)])

packages/magento-customer/plugins/MagentoCustomerGraphqlProvider.tsx

@@ -17,8 +17,8 @@ export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
   const push = useEventCallback<NextRouter['push']>((...args) => router.push(...args))
 
   const customerLinkMemo = useMemo(
-    () => customerLink({ push, events: router.events, locale: router.locale }),
-    [push, router.events, router.locale],
+    () => customerLink({ push, events: router.events }),
+    [push, router.events],
   )
 
   return (

packages/magento-customer/tsconfig.json

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

packages/magento-graphql/graphqlErrorByCategory.ts

@@ -36,6 +36,7 @@ export function graphqlErrorByCategory(
   props: GraphQLErrorByCategoryProps | GraphQLErrorByCategoryPropsNoExtract,
 ): [ApolloError | undefined, GraphQLError | undefined] {
   const { category, error, extract = true, mask } = props
+
   if (!error) return [error, undefined]
 
   const newError = new ApolloError({
@@ -47,7 +48,6 @@ export function graphqlErrorByCategory(
 
   const graphqlError = error.graphQLErrors.find((err) => err?.extensions?.category === category)
   if (mask && graphqlError) {
-    if (graphqlError.extensions?.category) graphqlError.extensions.category = 'masked'
     graphqlError.message = mask
   }
 

packages/magento-product/components/AddProductsToCart/AddProductsToCartFab.tsx

@@ -1,9 +1,7 @@
-import { useCartEnabled, useCartShouldLoginToContinue } from '@graphcommerce/magento-cart'
+import { useCartEnabled } from '@graphcommerce/magento-cart'
 import { Fab, FabProps, iconShoppingBag, iconCheckmark } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
 import { t } from '@lingui/macro'
 import { SxProps, Theme } from '@mui/material'
-import { useRouter } from 'next/router'
 import {
   useAddProductsToCartAction,
   UseAddProductsToCartActionProps,
@@ -19,27 +17,11 @@ export function AddProductsToCartFab(props: AddProductsToCartFabProps) {
   const { icon = iconShoppingBag, product, sku, ...rest } = props
   const { showSuccess, ...action } = useAddProductsToCartAction(props)
 
-  const router = useRouter()
   const cartEnabled = useCartEnabled()
-  const shouldLoginToContinue = useCartShouldLoginToContinue()
 
   if (!cartEnabled) return null
 
-  return shouldLoginToContinue ? (
-    <Fab
-      icon={showSuccess && !action.loading ? iconCheckmark : icon}
-      aria-label={i18n._(/* i18n*/ `Add to Cart`)}
-      onClick={async (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        await router.push('/account/signin')
-      }}
-      onMouseDown={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-    />
-  ) : (
+  return (
     <Fab
       type='submit'
       {...rest}

packagesDev/next-config/src/withGraphCommerce.ts

@@ -42,7 +42,6 @@ function domains(config: GraphCommerceConfig): DomainLocale[] {
  */
 export function withGraphCommerce(nextConfig: NextConfig, cwd: string): NextConfig {
   graphcommerceConfig ??= loadConfig(cwd)
-
   const importMetaPaths = configToImportMeta(graphcommerceConfig)
 
   const { storefront } = graphcommerceConfig