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 4 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
1 change: 1 addition & 0 deletions packages/extension-chakra-storefront/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ module.exports = {
createTestGlob('components/icons'),
createTestGlob('components/image-gallery'),
createTestGlob('components/drawer-menu'),
createTestGlob('components/error'),
createTestGlob('components/header'),
createTestGlob('components/links-list'),
createTestGlob('components/locale-selector'),
Expand Down
3 changes: 1 addition & 2 deletions packages/extension-chakra-storefront/src/components/drawer-menu/drawer-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,10 @@ import {
Button,
Center,
CloseButton,
Separator,
Dialog,
HStack,
IconButton,
Flex,
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.

unused

Separator,
Spinner,
Text,
VStack,
Expand Down
47 changes: 25 additions & 22 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 @@ -23,11 +23,10 @@ import {withChakraUI} from '../with-chakra-ui'

const Error = (props) => {
const {message, stack} = props
const history = useHistory()

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 +35,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 +109,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
5 changes: 2 additions & 3 deletions packages/extension-chakra-storefront/src/components/with-layout/with-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,9 @@ import {useCategory, useShopperBasketsMutation} from '@salesforce/commerce-sdk-r
import {
Box,
Center,
Button,
Flex,
Heading,
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.

unused components

Spinner,

// hooks
useDisclosure,
useSlotRecipe,
useToken
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
4 changes: 1 addition & 3 deletions packages/extension-chakra-storefront/src/pages/product-list/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,7 @@ const ProductList = (props) => {
const {
pages: {ProductList: productListConfig},
maxCacheAge: MAX_CACHE_AGE,
staleWhileRevalidate: STALE_WHILE_REVALIDATE,
search: searchConfig
Copy link
Contributor

@vcua-mobify vcua-mobify Jul 10, 2025

Choose a reason for hiding this comment

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

I take it we weren't using this searchConfig?

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.

yes, we don't need this data in this page anymore

staleWhileRevalidate: STALE_WHILE_REVALIDATE
} = useExtensionConfig()
/**************** Page State ****************/
const [filtersLoading, setFiltersLoading] = useState(false)
Expand Down Expand Up @@ -221,7 +220,6 @@ const ProductList = (props) => {
// Get urls to be used for pagination, page size changes, and sorting.
const pageUrls = usePageUrls({total})
const sortUrls = useSortUrls({options: sortingOptions})
const limitUrls = useLimitUrls()

/**************** Action Handlers ****************/
const {data: wishlist} = useWishList()
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/pages/product-list/partials/radio-refinements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {useIntl} from 'react-intl'
import {RadioGroup, Stack} from '@chakra-ui/react'
import {ADD_FILTER, REMOVE_FILTER} from '../../../pages/product-list/partials/refinements-utils'

const RadioRefinement = ({filter, value, toggleFilter, isSelected}) => {
const RadioRefinement = ({value, isSelected}) => {
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 are not using filter and toggleFilter props in the code

const {formatMessage} = useIntl()
// Because choosing a refinement is equivalent to a form submission, the best semantic choice
// for the refinement is a button or a link, rather than a radio input. The radio element here
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/pages/product-list/partials/refinements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React from 'react'
import {Heading, Stack, Separator, Accordion} from '@chakra-ui/react'
import {Heading, Stack, Accordion} from '@chakra-ui/react'
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.

removed unused Component

import PropTypes from 'prop-types'
import ColorRefinements from '../../../pages/product-list/partials/color-refinements'
import SizeRefinements from '../../../pages/product-list/partials/size-refinements'
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
Loading