Skip to content

@W-18672776 feat: PageNotFound chakra v3 upgrade #2639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sf-henry-semaganda merged 6 commits into from
Jun 27, 2025
Merged

@W-18672776 feat: PageNotFound chakra v3 upgrade #2639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
696b3bc
prepping chakra v3 upgrade
sf-henry-semaganda Jun 24, 2025
b1de0da
fix linting
sf-henry-semaganda Jun 26, 2025
d3fdbb6
set up page not found
alexvuong Jun 26, 2025
27a4030
Merge remote-tracking branch 'origin/W-18672776_page_not_found' into …
alexvuong Jun 26, 2025
b7628a6
set up page not found
alexvuong Jun 26, 2025
bb13544
Merge branch 'feature/chakra-ui-upgrade-v3' into W-18672776_page_not_…
sf-henry-semaganda Jun 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/extension-chakra-storefront/config/default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,9 @@
"ProductDetail": {
"path": "/product/:productId"
},
"PageNotFound": {
"path": "/test"
Copy link
Contributor

@patricksullivansf patricksullivansf Jun 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this looks odd...

},
"ProductList": {
"path": ["/search", "/category/:categoryId"],
"imageViewType": "large",
Expand Down
6 changes: 6 additions & 0 deletions packages/extension-chakra-storefront/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
// })
Expand All @@ -57,6 +61,7 @@ LoginRedirect.displayName = 'LoginRedirect'
ProductDetail.displayName = 'ProductDetail'
ProductList.displayName = 'ProductList'
SocialLoginRedirect.displayName = 'SocialLoginRedirect'
PageNotFound.displayName = 'PageNotFound'

export {
// Account,
Expand All @@ -70,5 +75,6 @@ export {
LoginRedirect,
ProductDetail,
ProductList,
PageNotFound,
SocialLoginRedirect
}
19 changes: 12 additions & 7 deletions packages/extension-chakra-storefront/src/pages/page-not-found/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'
Expand All @@ -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'
Expand Down
10 changes: 10 additions & 0 deletions packages/extension-chakra-storefront/src/setup-app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
Loading