Skip to content

@W-18672751: Migrate Account Details Page to Chakra V3 #2789

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
unandyala merged 20 commits into from
Jul 14, 2025
Merged

@W-18672751: Migrate Account Details Page to Chakra V3 #2789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
48b2aa4
Apply initial changes
vcua-mobify Jun 26, 2025
6b15b70
Radio card changes
vcua-mobify Jun 27, 2025
fb713be
More radio card adjustments
vcua-mobify Jun 27, 2025
94c4d15
Fix shipping option selection
vcua-mobify Jun 27, 2025
cd86efb
Use value instead of selectedAddress for isSelected
vcua-mobify Jun 27, 2025
a77cb42
Lint
vcua-mobify Jun 27, 2025
37dfee0
Merge branch 'feature/chakra-ui-upgrade-v3' into vc/checkout-shipping…
unandyala Jun 30, 2025
5cf7750
add test
unandyala Jul 2, 2025
660eca6
merge from feature branch
unandyala Jul 2, 2025
f64e11a
fix test
unandyala Jul 2, 2025
53d8298
fix test
unandyala Jul 2, 2025
a017eb9
Revert billing address default
vcua-mobify Jul 3, 2025
10be294
Merge branch 'feature/chakra-ui-upgrade-v3' into unadyala.fix-billing…
vcua-mobify Jul 8, 2025
d24941e
add default address values
unandyala Jul 9, 2025
57fe6ae
Upgrade Account Details page
unandyala Jul 10, 2025
f0b4232
merge from feature branch
unandyala Jul 11, 2025
7f69877
enable account details
unandyala Jul 11, 2025
4ebbebe
Fix test
unandyala Jul 14, 2025
daf147e
use string literals for spacing
unandyala Jul 14, 2025
86a2656
Merge branch 'feature/chakra-ui-upgrade-v3' into unandyala.account-de…
unandyala Jul 14, 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 @@ -63,6 +63,7 @@ module.exports = {
'<rootDir>/src/pages/checkout/partials/contact-info.test.js',
'<rootDir>/src/pages/checkout/partials/login-state.test.js',
'<rootDir>/src/pages/account/orders.test.js',
'<rootDir>/src/pages/account/profile.test.js',
'<rootDir>/src/utils/responsive-image.test.js',
'<rootDir>/src/hooks/use-errors.test.js',
'<rootDir>/src/hooks/use-toast.test.js',
Expand Down
4 changes: 2 additions & 2 deletions packages/extension-chakra-storefront/src/components/forms/profile-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const ProfileFields = ({form, prefix = ''}) => {
})

return (
<Stack spacing={5} aria-label={intl.formatMessage(formTitleAriaLabel)}>
<SimpleGrid columns={[1, 1, 1, 2]} spacing={5}>
<Stack gap="5" aria-label={intl.formatMessage(formTitleAriaLabel)}>
<SimpleGrid columns={[1, 1, 1, 2]} gap="5">
<Field {...fields.firstName} />
<Field {...fields.lastName} />
</SimpleGrid>
Expand Down
8 changes: 4 additions & 4 deletions packages/extension-chakra-storefront/src/pages/account/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
import Seo from '../../components/seo'
import Link from '../../components/link'
import {ChevronDownIcon, SignoutIcon} from '../../components/icons'
// import AccountDetail from '../../pages/account/profile'
import AccountDetail from '../../pages/account/profile'
import AccountAddresses from '../../pages/account/addresses'
import AccountOrders from '../../pages/account/orders'
// import AccountWishlist from '../../pages/account/wishlist/index'
Expand Down Expand Up @@ -218,9 +218,9 @@ const Account = () => {
</Flex>
</Stack>
<Switch>
{/*<Route exact path={path}>*/}
{/* <AccountDetail />*/}
{/*</Route>*/}
<Route exact path={path}>
<AccountDetail />
</Route>
{/*<Route exact path={`${path}/wishlist`}>*/}
{/* <AccountWishlist />*/}
{/*</Route>*/}
Expand Down
56 changes: 32 additions & 24 deletions packages/extension-chakra-storefront/src/pages/account/profile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import useToast from '../../hooks/use-toast'
*/
// eslint-disable-next-line react/prop-types
const Skeleton = forwardRef(({children, height, width, ...rest}, ref) => {
const {data: customer} = useCurrentCustomer()
Copy link
Contributor

@alexvuong alexvuong Jul 11, 2025

Choose a reason for hiding this comment

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

it should be isPending. React query 5 has changed isLoading to isPending. TanStack/query#6297

const {data: customer, isPending} = useCurrentCustomer()
const {isRegistered} = customer
const size = !isRegistered
? {
Expand All @@ -50,7 +50,7 @@ const Skeleton = forwardRef(({children, height, width, ...rest}, ref) => {
}
: {}
return (
<ChakraSkeleton ref={ref} isLoaded={!customer.isLoading} {...rest} {...size}>
<ChakraSkeleton ref={ref} loading={isPending} {...rest} {...size}>
{children}
</ChakraSkeleton>
)
Expand Down Expand Up @@ -146,14 +146,18 @@ const ProfileCard = ({allowPasswordChange = false}) => {
<ToggleCardEdit>
<Container variant="form">
<form onSubmit={form.handleSubmit(submit)}>
<Stack spacing={6}>
<Stack gap="6">
{form.formState.errors?.global && (
<Alert status="error">
<AlertIcon color="red.500" boxSize={4} />
<Text fontSize="sm" ml={3}>
{form.formState.errors.global.message}
</Text>
</Alert>
<Alert.Root status="error">
<Alert.Indicator>
<AlertIcon color="red.500" boxSize="4" />
</Alert.Indicator>
<Alert.Content>
<Text fontSize="sm">
{form.formState.errors.global.message}
</Text>
</Alert.Content>
</Alert.Root>
)}
<ProfileFields form={form} />
<FormActionButtons
Expand All @@ -168,9 +172,9 @@ const ProfileCard = ({allowPasswordChange = false}) => {
</Container>
</ToggleCardEdit>
<ToggleCardSummary>
<SimpleGrid columns={{base: 1, lg: 3}} spacing={4}>
<SimpleGrid columns={{base: 1, lg: 3}} gap="4">
<Box>
<Skeleton height="21px" width="84px" marginBottom={2}>
<Skeleton height="21px" width="84px" marginBottom="2">
<Text fontSize="sm" fontWeight="bold">
<FormattedMessage
defaultMessage="Full Name"
Expand All @@ -186,7 +190,7 @@ const ProfileCard = ({allowPasswordChange = false}) => {
</Skeleton>
</Box>
<Box>
<Skeleton height="21px" width="120px" marginBottom={2}>
<Skeleton height="21px" width="120px" marginBottom="2">
<Text fontSize="sm" fontWeight="bold">
<FormattedMessage
defaultMessage="Email"
Expand All @@ -200,7 +204,7 @@ const ProfileCard = ({allowPasswordChange = false}) => {
</Skeleton>
</Box>
<Box>
<Skeleton height="21px" width="80px" marginBottom={2}>
<Skeleton height="21px" width="80px" marginBottom="2">
<Text fontSize="sm" fontWeight="bold">
<FormattedMessage
defaultMessage="Phone Number"
Expand Down Expand Up @@ -285,14 +289,18 @@ const PasswordCard = () => {
<ToggleCardEdit>
<Container variant="form">
<form onSubmit={form.handleSubmit(submit)}>
<Stack spacing={6}>
<Stack gap="6">
{form.formState.errors?.root?.global && (
<Alert data-testid="password-update-error" status="error">
<AlertIcon color="red.500" boxSize={4} />
<Text fontSize="sm" ml={3}>
{form.formState.errors.root.global.message}
</Text>
</Alert>
<Alert.Root data-testid="password-update-error" status="error">
<Alert.Indicator>
<AlertIcon color="red.500" boxSize="4" />
</Alert.Indicator>
<Alert.Content>
<Text fontSize="sm">
{form.formState.errors.root.global.message}
</Text>
</Alert.Content>
</Alert.Root>
)}
<UpdatePasswordFields form={form} />
<FormActionButtons
Expand All @@ -307,9 +315,9 @@ const PasswordCard = () => {
</Container>
</ToggleCardEdit>
<ToggleCardSummary>
<SimpleGrid columns={{base: 1, lg: 3}} spacing={4}>
<SimpleGrid columns={{base: 1, lg: 3}} gap="4">
<Box>
<Skeleton height="21px" width="84px" marginBottom={2}>
<Skeleton height="21px" width="84px" marginBottom="2">
<Text fontSize="sm" fontWeight="bold">
<FormattedMessage
defaultMessage="Password"
Expand Down Expand Up @@ -340,15 +348,15 @@ const AccountDetail = () => {
const {isExternal} = useCustomerType()

return (
<Stack data-testid="account-detail-page" spacing={6}>
<Stack data-testid="account-detail-page" gap="6">
<Heading as="h1" fontSize="24px" tabIndex="0" ref={headingRef}>
<FormattedMessage
defaultMessage="Account Details"
id="account_detail.title.account_details"
/>
</Heading>

<Stack spacing={4}>
<Stack gap="4">
<ProfileCard allowPasswordChange={!isExternal} />
{!isExternal && <PasswordCard />}
</Stack>
Expand Down
18 changes: 12 additions & 6 deletions packages/extension-chakra-storefront/src/pages/account/profile.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,22 @@ import {createPathWithDefaults, renderWithProviders} from '../../utils/test-util
import {rest} from 'msw'
import AccountDetail from '../../pages/account/profile'
import {mockedRegisteredCustomerWithNoNumber, mockedRegisteredCustomer} from '../../mocks/mock-data'
import Toaster, {toaster} from '../../components/toaster'

import {Route, Switch} from 'react-router-dom'
import mockConfig from '../../mock-config'
import * as sdk from '@salesforce/commerce-sdk-react'

const MockedComponent = () => {
return (
<Switch>
<Route path={createPathWithDefaults('/account')}>
<AccountDetail />
</Route>
</Switch>
<>
<Switch>
<Route path={createPathWithDefaults('/account')}>
<AccountDetail />
</Route>
</Switch>
<Toaster toaster={toaster} />
</>
)
}

Expand Down Expand Up @@ -78,10 +82,12 @@ test('Allows customer to edit phone number', async () => {
res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
)
)

await user.click(screen.getByText(/^Save$/i))

await waitFor(() => {
expect(screen.getByText(/Profile updated/i)).toBeInTheDocument()
// Toast messages are rendered in a portal, so we need to search within document.body
expect(within(document.body).getByText(/Profile updated/i)).toBeInTheDocument()
expect(screen.getByText(/555-1234/i)).toBeInTheDocument()
})
})
Expand Down
Loading