Skip to content

W-18672586 - Update Error Component with Chakra v3 #2776

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
alexvuong merged 5 commits into from
Jul 10, 2025
Merged

W-18672586 - Update Error Component with Chakra v3 #2776

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d9bfb66
Update Error component with chakra v3
alexvuong Jul 10, 2025
80d87e1
Re-enable Reset password page
alexvuong Jul 10, 2025
cf7c442
remove error in typescript
alexvuong Jul 10, 2025
9475ebe
lint
alexvuong Jul 10, 2025
23f6e5f
Merge branch 'feature/chakra-ui-upgrade-v3' into fix-chakra-ui-v3-err…
alexvuong Jul 10, 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
46 changes: 25 additions & 21 deletions packages/extension-chakra-storefront/src/components/error/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Error = (props) => {

const title = "This page isn't working"
return (
<Flex id="sf-app" flex={1} direction="column" minWidth={'375px'}>
<Flex id="sf-app" flex="1" direction="column" minWidth="375px">
<Helmet>
<title>{title}</title>
</Helmet>
Expand All @@ -36,60 +36,64 @@ const Error = (props) => {
maxWidth="container.xxxl"
marginLeft="auto"
marginRight="auto"
px={[4, 4, 6, 8]}
paddingTop={[1, 1, 2, 4]}
paddingBottom={[3, 3, 2, 4]}
px={['4', '4', '6', '8']}
paddingTop={['1', '1', '2', '4']}
paddingBottom={['3', '3', '2', '4']}
>
<IconButton
aria-label="logo"
icon={<BrandLogo width={[8, 8, 8, 12]} height={[6, 6, 6, 8]} />}
marginBottom={[1, 1, 2, 0]}
marginBottom={['1', '1', '2', '0']}
variant="unstyled"
onClick={() => history.push('/')}
/>
// We need to use window.location.href here rather than history
Copy link
Contributor

@unandyala unandyala Jul 10, 2025

Choose a reason for hiding this comment

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

Make sense to me. Just curious, was it working before?

Copy link
Contributor Author

@alexvuong alexvuong Jul 10, 2025

Choose a reason for hiding this comment

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

you meant if history was working before? I suppose it was not, so we changed to use window.location.

// as the application is in an error state. We need to force a
// hard navigation to get back to the normal state.
onClick={() => (window.location.href = '/')}
>
<BrandLogo width={{base: '8', lg: '12'}} height={{base: '6', lg: '8'}} />
</IconButton>
</Box>
</Box>
<Box
as="main"
id="app-main"
role="main"
layerStyle="page"
padding={{lg: 8, md: 6, sm: 0, base: 0}}
flex={1}
padding={{lg: '8', md: '6', sm: '0', base: '0'}}
flex="1"
>
<Flex
direction={'column'}
justify="center"
px={{base: 4, md: 6, lg: 50}}
py={{base: 20, md: 24}}
px={{base: '4', md: '6', lg: '50'}}
py={{base: '20', md: '24'}}
>
<Flex align="center" direction="column">
<FileIcon boxSize={['30px', '32px']} mb={8} />
<Heading as="h2" fontSize={['xl', '2xl', '2xl', '3xl']} mb={2}>
<FileIcon boxSize={['30px', '32px']} mb="8" />
<Heading as="h2" fontSize={['xl', '2xl', '2xl', '3xl']} mb="2">
{title}
</Heading>
<Box maxWidth="440px" marginBottom={8}>
<Box maxWidth="440px" marginBottom="8">
<Text align="center">
An error has occurred. Try refreshing the page or if you need
immediate help please contact support.
</Text>
{message && (
<Box
as="pre"
mt={4}
mt="4"
padding="4"
fontSize="sm"
background="gray.50"
borderColor="gray.200"
borderStyle="solid"
borderWidth="1px"
overflow="auto"
padding={4}
>
{message}
</Box>
)}
</Box>
<Stack direction={['column', 'row']} spacing={4} width={['100%', 'auto']}>
<Stack direction={['column', 'row']} gap="4" width={['100%', 'auto']}>
<Button
variant="outline"
bg="white"
Expand All @@ -106,20 +110,20 @@ const Error = (props) => {
</Stack>
</Flex>
{stack && (
<Box marginTop={20}>
<Box marginTop="20">
<Text fontWeight="bold" fontSize="md">
Stack Trace
</Text>
<Box
as="pre"
mt={4}
mt="4"
fontSize="sm"
background="gray.50"
borderColor="gray.200"
borderStyle="solid"
borderWidth="1px"
overflow="auto"
padding={4}
padding="4"
>
{stack}
</Box>
Expand Down
4 changes: 2 additions & 2 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 @@ -29,7 +29,7 @@ const Login = loadable(() => import('overridable!./login'), {fallback})
const Registration = loadable(() => import('overridable!./registration'), {
fallback
})
// const ResetPassword = loadable(() => import('overridable!./reset-password'), {fallback})
const ResetPassword = loadable(() => import('overridable!./reset-password'), {fallback})
const LoginRedirect = loadable(() => import('overridable!./login-redirect'), {fallback})
const ProductDetail = loadable(() => import('overridable!./product-detail'), {fallback})
const ProductList = loadable(() => import('overridable!./product-list'), {
Expand Down Expand Up @@ -71,7 +71,7 @@ export {
Home,
Login,
Registration,
// ResetPassword,
ResetPassword,
LoginRedirect,
ProductDetail,
ProductList,
Expand Down
16 changes: 8 additions & 8 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 @@ -74,14 +74,14 @@ class ChakraStorefront extends ApplicationExtension<Config> {
component: Pages.Registration,
exact: true
},
// {
// path: [
// config.pages.ResetPassword && config.pages.ResetPassword.path,
// config.login.resetPassword && config.login.resetPassword.landingPath
// ].filter(Boolean),
// component: Pages.ResetPassword,
// exact: true
// },
{
path: [
config.pages.ResetPassword && config.pages.ResetPassword.path,
Copy link
Contributor Author

@alexvuong alexvuong Jul 10, 2025

Choose a reason for hiding this comment

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

We've fixed this page, I re-enabled it

config.login.resetPassword && config.login.resetPassword.landingPath
].filter(Boolean),
component: Pages.ResetPassword,
exact: true
},
// {
// path: config.pages.Account && config.pages.Account.path,
// component: Pages.Account
Expand Down
3 changes: 3 additions & 0 deletions packages/template-typescript-minimal/app/components/_error/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Error from '@salesforce/extension-chakra-storefront/components/error'

export default Error
Loading