Merge pull request #2474 from graphcommerce-org/fix/success-page

fix: prevent rendering "You have not placed an order" before the router resolves. (GCOM-1549)
graphcommerce-org · Jan 13, 2025 · 438fc34 · 438fc34
2 parents a69cce9 + 9161c1a
commit 438fc34
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/.changeset/cold-readers-design.md b/.changeset/cold-readers-design.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-cart-checkout': patch
+---
+
+Prevent rendering "You have not placed an order" before the router resolves.
diff --git a/examples/magento-graphcms/pages/checkout/success.tsx b/examples/magento-graphcms/pages/checkout/success.tsx
@@ -19,7 +19,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Button, Box, Container, Typography } from '@mui/material'
+import { Button, Box, Container, Typography, CircularProgress } from '@mui/material'
 import { useRouter } from 'next/router'
 import {
   LayoutDocument,
@@ -28,26 +28,24 @@ import {
   LayoutMinimalProps,
 } from '../../components'
 import { graphqlSsrClient, graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
+import { WaitForQueries } from '@graphcommerce/ecommerce-ui'
 
 type Props = Record<string, unknown>
 type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, Props>
 
 function OrderSuccessPage() {
-  const hasCartId = !!useRouter().query.cart_id
-
-  const orderNumber = useRouter().query.order_number
+  const router = useRouter()
+  const { cart_id, order_number } = router.query ?? {}
+  const hasCartId = !!cart_id
 
   return (
     <>
       <PageMeta title={i18n._(/* i18n */ 'Checkout summary')} metaRobots={['noindex']} />
-      <LayoutHeader floatingMd disableBackNavigation>
-        {hasCartId && (
-          <LayoutTitle size='small' icon={iconParty}>
-            <Trans id='Thank you for your order!' />
-          </LayoutTitle>
-        )}
-      </LayoutHeader>
-      <Container maxWidth='md'>
+
+      <WaitForQueries
+        waitFor={router.isReady}
+        fallback={<FullPageMessage icon={<CircularProgress />} title={<Trans id='Loading' />} />}
+      >
         {!hasCartId && (
           <FullPageMessage
             title={<Trans id='You have not placed an order' />}
@@ -61,29 +59,36 @@ function OrderSuccessPage() {
             <Trans id='Discover our collection and add items to your cart!' />
           </FullPageMessage>
         )}
+
         {hasCartId && (
-          <>
+          <LayoutHeader floatingMd disableBackNavigation>
+            <LayoutTitle size='small' icon={iconParty}>
+              <Trans id='Thank you for your order!' />
+            </LayoutTitle>
+          </LayoutHeader>
+        )}
+
+        {hasCartId && (
+          <Container maxWidth='md'>
             <LayoutTitle icon={iconParty} sx={{ flexDirection: { md: 'column' } }}>
               <Box sx={{ display: 'grid', columns: 1, justifyItems: 'center' }}>
                 <Trans id='Thank you for your order!' />
-                {orderNumber && <Typography variant='subtitle1'>#{orderNumber}</Typography>}
+                {order_number && <Typography variant='subtitle1'>#{order_number}</Typography>}
               </Box>
             </LayoutTitle>
             <CartSummary />
             <CartItemSummary />
-
             <SignupNewsletter />
-
             <InlineAccount />
 
             <Box textAlign='center' m={8}>
               <Button href='/' color='primary' variant='pill' size='large' id='back-to-home'>
                 <Trans id='Back to home' />
               </Button>
             </Box>
-          </>
+          </Container>
         )}
-      </Container>
+      </WaitForQueries>
     </>
   )
 }

diff --git a/examples/magento-open-source/pages/checkout/success.tsx b/examples/magento-open-source/pages/checkout/success.tsx
@@ -1,4 +1,5 @@
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
+import { WaitForQueries } from '@graphcommerce/ecommerce-ui'
+import { PageOptions } from '@graphcommerce/framer-next-pages'
 import { cacheFirst } from '@graphcommerce/graphql'
 import {
   CartItemSummary,
@@ -19,7 +20,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Box, Button, Container, Typography } from '@mui/material'
+import { Box, Button, CircularProgress, Container, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import type { LayoutMinimalProps, LayoutNavigationProps } from '../../components'
 import { LayoutDocument, LayoutMinimal } from '../../components'
@@ -29,21 +30,18 @@ type Props = Record<string, unknown>
 type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, Props>
 
 function OrderSuccessPage() {
-  const hasCartId = !!useRouter().query.cart_id
-
-  const orderNumber = useRouter().query.order_number
+  const router = useRouter()
+  const { cart_id, order_number } = router.query ?? {}
+  const hasCartId = !!cart_id
 
   return (
     <>
       <PageMeta title={i18n._(/* i18n */ 'Checkout summary')} metaRobots={['noindex']} />
-      <LayoutHeader floatingMd disableBackNavigation>
-        {hasCartId && (
-          <LayoutTitle size='small' icon={iconParty}>
-            <Trans id='Thank you for your order!' />
-          </LayoutTitle>
-        )}
-      </LayoutHeader>
-      <Container maxWidth='md'>
+
+      <WaitForQueries
+        waitFor={router.isReady}
+        fallback={<FullPageMessage icon={<CircularProgress />} title={<Trans id='Loading' />} />}
+      >
         {!hasCartId && (
           <FullPageMessage
             title={<Trans id='You have not placed an order' />}
@@ -57,12 +55,21 @@ function OrderSuccessPage() {
             <Trans id='Discover our collection and add items to your cart!' />
           </FullPageMessage>
         )}
+
+        {hasCartId && (
+          <LayoutHeader floatingMd disableBackNavigation>
+            <LayoutTitle size='small' icon={iconParty}>
+              <Trans id='Thank you for your order!' />
+            </LayoutTitle>
+          </LayoutHeader>
+        )}
+
         {hasCartId && (
-          <>
+          <Container maxWidth='md'>
             <LayoutTitle icon={iconParty} sx={{ flexDirection: { md: 'column' } }}>
               <Box sx={{ display: 'grid', columns: 1, justifyItems: 'center' }}>
                 <Trans id='Thank you for your order!' />
-                {orderNumber && <Typography variant='subtitle1'>#{orderNumber}</Typography>}
+                {order_number && <Typography variant='subtitle1'>#{order_number}</Typography>}
               </Box>
             </LayoutTitle>
             <CartSummary />
@@ -77,9 +84,9 @@ function OrderSuccessPage() {
                 <Trans id='Back to home' />
               </Button>
             </Box>
-          </>
+          </Container>
         )}
-      </Container>
+      </WaitForQueries>
     </>
   )
 }