Merge pull request #2639 from SalesforceCommerceCloud/W-18672776_page_not_found

@W-18672776 feat: PageNotFound chakra v3 upgrade

Author: sf-henry-semaganda

config/default.json

@@ -89,6 +89,9 @@
         "ProductDetail": {
             "path": "/product/:productId"
         },
+        "PageNotFound": {
+            "path": "/test"
+        },
         "ProductList": {
             "path": ["/search", "/category/:categoryId"],
             "imageViewType": "large",

src/pages/index.tsx

@@ -38,6 +38,10 @@ const ProductList = loadable(() => import('overridable!./product-list'), {
 const SocialLoginRedirect = loadable(() => import('overridable!./social-login-redirect'), {
     fallback
 })
+
+const PageNotFound = loadable(() => import('overridable!./page-not-found'), {
+    fallback
+})
 // const Wishlist = loadable(() => import('overridable!./account/wishlist'), {
 //     fallback
 // })
@@ -57,6 +61,7 @@ LoginRedirect.displayName = 'LoginRedirect'
 ProductDetail.displayName = 'ProductDetail'
 ProductList.displayName = 'ProductList'
 SocialLoginRedirect.displayName = 'SocialLoginRedirect'
+PageNotFound.displayName = 'PageNotFound'
 
 export {
     // Account,
@@ -70,5 +75,6 @@ export {
     LoginRedirect,
     ProductDetail,
     ProductList,
+    PageNotFound,
     SocialLoginRedirect
 }

src/pages/page-not-found/index.jsx

@@ -27,8 +27,8 @@ const PageNotFound = () => {
         <Box
             layerStyle="page"
             className="page-not-found"
-            height={'100%'}
-            padding={{lg: 8, md: 6, sm: 0, base: 0}}
+            height="100%"
+            padding={{base: 0, sm: 0, md: 6, lg: 8}}
         >
             <Helmet>
                 <title>
@@ -47,8 +47,13 @@ const PageNotFound = () => {
                 px={{base: 5, md: 12}}
                 py={{base: 48, md: 60}}
             >
-                <SearchIcon boxSize={['30px', '32px']} mb={8} />
-                <Heading as="h2" fontSize={['xl', '2xl', '2xl', '3xl']} mb={2} align="center">
+                <SearchIcon boxSize={{base: '30px', md: '32px'}} mb={8} />
+                <Heading
+                    as="h2"
+                    fontSize={{base: 'xl', md: '2xl', lg: '3xl'}}
+                    mb={2}
+                    textAlign="center"
+                >
                     {intl.formatMessage({
                         defaultMessage: "The page you're looking for can't be found.",
                         id: 'page_not_found.title.page_cant_be_found'
@@ -63,19 +68,19 @@ const PageNotFound = () => {
                         })}
                     </Text>
                 </Box>
-                <Stack direction={['column', 'row']} width={['100%', 'auto']}>
+                <Stack direction={{base: 'column', md: 'row'}} width={{base: '100%', md: 'auto'}}>
                     <Button
                         variant="outline"
                         bg="white"
                         onClick={() => history.goBack()}
-                        borderColor={'gray.200'}
+                        borderColor="gray.200"
                     >
                         {intl.formatMessage({
                             defaultMessage: 'Back to previous page',
                             id: 'page_not_found.action.go_back'
                         })}
                     </Button>
-                    <Button as={Link} to={'/'}>
+                    <Button as={Link} to="/">
                         {intl.formatMessage({
                             defaultMessage: 'Go to home page',
                             id: 'page_not_found.link.homepage'

src/setup-app.tsx

@@ -117,6 +117,16 @@ class ChakraStorefront extends ApplicationExtension<Config> {
             {
                 path: config.pages.ProductList && config.pages.ProductList.path,
                 component: Pages.ProductList
+            },
+            {
+                path: config.pages.Checkout && config.pages.Checkout.path,
+                component: Pages.Checkout,
+                exact: true
+            },
+            {
+                path: config.pages.PageNotFound && config.pages.PageNotFound.path,
+                component: Pages.PageNotFound,
+                exact: true
             }
         ].filter((route) => route.path !== false)