Skip to content

W-18672755 - W-18397045 - Chakra UI order history and order detail #2730

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

W-18672755 - W-18397045 - Chakra UI order history and order detail #2730

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
0fba8c8
Order history and order detail
alexvuong Jul 4, 2025
58a5946
minor adjustment
alexvuong Jul 4, 2025
5c11ae7
minor adjustment
alexvuong Jul 4, 2025
a753372
revert checkout
alexvuong Jul 4, 2025
78fd619
fix style
alexvuong Jul 4, 2025
e570c77
fix style
alexvuong Jul 4, 2025
9484e4c
fix style
alexvuong Jul 4, 2025
8fe2d25
Fix dnt modal
alexvuong Jul 4, 2025
3fd98c4
Fix dnt modal
alexvuong Jul 4, 2025
483bb8e
remove console
alexvuong Jul 4, 2025
94055f0
fix dnt
alexvuong Jul 4, 2025
9ce187a
Fix dnt tests
alexvuong Jul 4, 2025
4994899
fix header theme
alexvuong Jul 4, 2025
accded0
fix header behavior
alexvuong Jul 4, 2025
cc033c2
fix header behavior
alexvuong Jul 4, 2025
6b5d9ed
fix header behavior
alexvuong Jul 4, 2025
db3edec
use onClick on header
alexvuong Jul 8, 2025
b939c68
Merge branch 'feature/chakra-ui-upgrade-v3' into chakra-ui-order-history
alexvuong Jul 8, 2025
d2b105a
minor fix
alexvuong Jul 8, 2025
5251e1c
fix tests
alexvuong Jul 8, 2025
c34d898
fix tests
alexvuong Jul 8, 2025
74c405c
fix invalid props React warning
alexvuong Jul 8, 2025
90de11f
remove only
alexvuong Jul 8, 2025
4291e2f
enable account addresses
alexvuong Jul 8, 2025
10538d4
Merge branch 'feature/chakra-ui-upgrade-v3' into chakra-ui-order-history
alexvuong Jul 10, 2025
1ed07c5
PR feedback
alexvuong Jul 10, 2025
10ac07d
clean up
alexvuong Jul 10, 2025
6f1ba24
PR feedback
alexvuong Jul 10, 2025
2cd1e65
Merge branch 'feature/chakra-ui-upgrade-v3' into chakra-ui-order-history
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
3 changes: 2 additions & 1 deletion packages/extension-chakra-storefront/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@ module.exports = {
'<rootDir>/src/hooks/use-toast.test.js',
'<rootDir>/src/pages/product-detail/metadata.test.js',
'<rootDir>/src/pages/product-list/metadata.test.js',
'<rootDir>/src/hooks/use-toast.test.js'
'<rootDir>/src/hooks/use-toast.test.js',
'<rootDir>/src/hooks/use-dnt-notification.test.js'
// '<rootDir>/src/hooks/use-auth-modal.test.js' // TODO: enable after Account page has been migrated
],
moduleNameMapper: {
Expand Down
52 changes: 27 additions & 25 deletions packages/extension-chakra-storefront/src/components/header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ const Header = ({
onClick={onMyAccountClick}
onMouseOver={isDesktop ? onAccountMenuOpen : noop}
>
<AccountIcon boxSize={6} />
<AccountIcon boxSize="6" />
Copy link
Contributor Author

@alexvuong alexvuong Jul 4, 2025

Choose a reason for hiding this comment

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

Better to use string instead of {} because the design token system is optimized to work with string values, ensuring more reliable processing by the styling engine.

</IconButtonWithRegistration>
)}

Expand All @@ -235,7 +235,7 @@ const Header = ({
ref={popoverTriggerRef}
onKeyDown={handleKeyDown}
>
<AccountIcon boxSize={6} onClick={onMyAccountClick} />
<AccountIcon boxSize="6" onClick={onMyAccountClick} />
<HideOnMobile>
<ChevronDownIcon />
</HideOnMobile>
Expand All @@ -257,15 +257,15 @@ const Header = ({
<Popover.Body css={styles.dropdownMenuBody}>
<Popover.Header pb={1}>
<Popover.Title>
<Heading as="h2" fontWeight={700} size="lg">
<Heading as="h2" size="lg">
Copy link
Contributor Author

@alexvuong alexvuong Jul 4, 2025

Choose a reason for hiding this comment

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

Heading is now default to fontWeight: bold, no need to customise from the component

{intl.formatMessage({
defaultMessage: 'My Account',
id: 'header.popover.title.my_account'
})}
</Heading>
</Popover.Title>
</Popover.Header>
<Box asChild px={3}>
<Box asChild px="3">
<nav>
<List.Root
variant="plain"
Expand All @@ -275,40 +275,42 @@ const Header = ({
{navLinks.map((link) => {
const LinkIcon = link.icon
return (
<List.Item
key={link.name}
value={link.name}
>
<Link
useNavLink={true}
to={`/account${link.path}`}
<List.Item key={link.name}>
<Button
Copy link
Contributor Author

@alexvuong alexvuong Jul 4, 2025

Choose a reason for hiding this comment

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

Reapply Button to make use of current variant menu-link

asChild
variant="menu-link"
css={styles.menuAccountLink}
Copy link
Contributor Author

@alexvuong alexvuong Jul 4, 2025

Choose a reason for hiding this comment

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

This will allow customised style from parent and not affect all buttons of this variant

>
<LinkIcon
boxSize={5}
mr={3}
/>
{intl.formatMessage(
messages[link.name]
)}
</Link>
<Link
to={`/account${link.path}`}
useNavLink={true}
>
<LinkIcon
boxSize="5"
mr="2"
/>
{intl.formatMessage(
messages[link.name]
)}
</Link>
</Button>
</List.Item>
)
})}
</List.Root>
</nav>
</Box>
<Separator mx={3} my={2} />
<Separator mx="3" my="2" />

<Popover.Footer px={3} py={0}>
<Popover.Footer px="3" py="0">
<Button
variant="ghost"
css={styles.signoutButton}
onClick={onSignoutClick}
>
<SignoutIcon
aria-hidden={true}
boxSize={5}
boxSize="5"
css={styles.signoutIcon}
/>
<Text as="span" css={styles.signoutText}>
Expand All @@ -335,7 +337,7 @@ const Header = ({
// uncomment when we fix wishlist
// onClick={onWishlistClick}
>
<HeartIcon boxSize={6} />
<HeartIcon boxSize="6" />
</IconButtonWithRegistration>
{isStoreLocatorEnabled && (
<IconButton
Expand All @@ -349,7 +351,7 @@ const Header = ({
openModal()
}}
>
<StoreIcon boxSize={6} />
<StoreIcon boxSize="6" />
</IconButton>
)}
<IconButton
Expand All @@ -365,7 +367,7 @@ const Header = ({
onClick={onMyCartClick}
>
<>
<BasketIcon boxSize={6} />
<BasketIcon boxSize="6" />
{basket && totalItems > 0 && (
<Badge variant="notification">{totalItems}</Badge>
)}
Expand Down
33 changes: 16 additions & 17 deletions packages/extension-chakra-storefront/src/components/order-summary/index.jsx
View file
Open in desktop
Copy link
Contributor

@adamraya adamraya Jul 10, 2025

Choose a reason for hiding this comment

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

I noticed a typo, it should be colorPalette="red"

pwa-kit/packages/extension-chakra-storefront/src/components/order-summary/index.jsx

Line 307 in d2b105a

colorPallete="red"

Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const CartItems = ({basket}) => {
return (
<Accordion.Root w="full" collapsible>
<Accordion.Item>
<Accordion.ItemTrigger px={0} py={4}>
<Accordion.ItemTrigger px="0" py="4">
<Box as="span" flex="1" textAlign="left" fontSize="md" fontWeight="bold">
<BasketIcon display="inline" mr={2} />
<FormattedMessage
Expand All @@ -57,8 +57,8 @@ const CartItems = ({basket}) => {
</Box>
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<Accordion.ItemContent px={0} py={4}>
<Stack gap={5} align="flex-start" separator={<Separator />}>
<Accordion.ItemContent px="0" py="4">
<Stack gap="5" alignItems="flex-start" separator={<Separator w="full" />}>
{basket.productItems?.map((product, idx) => {
const variant = {
...product,
Expand All @@ -72,8 +72,8 @@ const CartItems = ({basket}) => {
variant={variant}
>
<Flex width="full" alignItems="flex-start">
<CartItemVariantImage width="80px" mr={2} />
<Stack width="full" gap={1} marginTop="-3px">
<CartItemVariantImage width="80px" mr="2" />
<Stack width="full" gap="1" marginTop="-3px">
<CartItemVariantName />
<CartItemVariantAttributes includeQuantity />
<CartItemVariantPrice
Expand All @@ -86,11 +86,13 @@ const CartItems = ({basket}) => {
)
})}

<Button as={Link} to="/cart" variant="link-blue" width="full">
<FormattedMessage
defaultMessage="Edit cart"
id="order_summary.cart_items.link.edit_cart"
/>
<Button asChild to="/cart" variant="link-blue" width="full">
<Link>
<FormattedMessage
defaultMessage="Edit cart"
id="order_summary.cart_items.link.edit_cart"
/>
</Link>
</Button>
</Stack>
</Accordion.ItemContent>
Expand Down Expand Up @@ -120,16 +122,14 @@ const OrderSummary = ({

return (
<Stack data-testid="sf-order-summary" gap={5}>
<Heading fontSize={fontSize} pt={1} id="order-summary-heading">
<Heading fontSize={fontSize} pt="1" id="order-summary-heading">
<FormattedMessage
defaultMessage="Order Summary"
id="order_summary.heading.order_summary"
/>
</Heading>

<Stack gap={4} align="flex-start" role="region" aria-labelledby="order-summary-heading">
<Stack gap="4" align="flex-start" role="region" aria-labelledby="order-summary-heading">
{showCartItems && <CartItems basket={basket} />}

<Stack w="full">
<Flex justifyContent="space-between" aria-live="polite" aria-atomic="true">
<Text fontWeight="bold" fontSize={fontSize}>
Expand Down Expand Up @@ -246,9 +246,8 @@ const OrderSummary = ({
<PromoCode {...promoCodeProps} />
</Box>
) : (
<Separator />
<Separator w="full" />
)}

<Stack gap={4} w="full">
<Flex
w="full"
Expand Down Expand Up @@ -282,7 +281,7 @@ const OrderSummary = ({

{basket.couponItems?.length > 0 && (
<Stack
p={4}
p="4"
border="1px solid"
borderColor="gray.100"
borderRadius="base"
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/section/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Section = ({title, subtitle, actions, maxWidth, children, ...props}) => {
<Box as="section" paddingBottom="16" {...props}>
<Stack gap={6} as={Container} maxW={sectionMaxWidth} textAlign="center">
{title && (
<Heading as="h2" fontSize={40} textAlign="center" fontWeight="bold">
<Heading as="h2" fontSize={40} textAlign="center">
{title}
</Heading>
)}
Expand Down
26 changes: 16 additions & 10 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 @@ -26,6 +26,8 @@ import {
Flex,
Heading,
Spinner,

//hooks
useDisclosure,
useSlotRecipe,
useToken
Expand Down Expand Up @@ -55,7 +57,7 @@ import {useExtensionConfig, useCurrentCustomer, useCurrentBasket} from '../../ho
import {watchOnlineStatus, flatten} from '../../utils/utils'
import useActiveData from '../../hooks/use-active-data'
import useMultiSite from '../../hooks/use-multi-site'
// import {DntNotification, useDntNotification} from '../../hooks/use-dnt-notification'
import {DntNotification, useDntNotification} from '../../hooks/use-dnt-notification'

import {UserConfig} from '../../types/config'

Expand Down Expand Up @@ -118,13 +120,17 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
const history = useHistory()
const location = useLocation()
const authModal = useAuthModal()
// const dntNotification = useDntNotification()
const dntNotification = useDntNotification()
const {site, locale, buildUrl} = useMultiSite()
const [isOnline, setIsOnline] = useState<boolean>(true)

// https://www.chakra-ui.com/docs/theming/overview#tokens-1
const [themeColor] = useToken('colors.blue', '600')
const {open, onOpen, onClose} = useDisclosure()
const {
open: isDrawerMenuOpen,
onOpen: onDrawerMenuOpen,
onClose: onDrawerMenuClose
} = useDisclosure()

// Used to conditionally render header/footer for checkout page
const isCheckout = /\/checkout$/.test(location?.pathname)
Expand Down Expand Up @@ -179,7 +185,7 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
useEffect(() => {
// Lets automatically close the mobile navigation when the
// location path is changed.
onClose()
onDrawerMenuClose()
}, [location])

const onLogoClick = () => {
Expand All @@ -191,15 +197,15 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
history.push(path)

// Close the drawer.
onClose()
onDrawerMenuClose()
}

const onCartClick = () => {
const path = buildUrl('/cart', site.id, locale.id)
history.push(path)

// Close the drawer.
onClose()
onDrawerMenuClose()
}

const onAccountClick = () => {
Expand Down Expand Up @@ -283,7 +289,7 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
<>
<AboveHeader />
<Header
onMenuClick={onOpen}
onMenuClick={onDrawerMenuOpen}
onLogoClick={onLogoClick}
onMyCartClick={onCartClick}
onMyAccountClick={onAccountClick}
Expand All @@ -292,8 +298,8 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
{/* TODO: mobile menu */}
<HideOnDesktop>
<DrawerMenu
isOpen={open}
onClose={onClose}
isOpen={isDrawerMenuOpen}
onClose={onDrawerMenuClose}
Copy link
Contributor

@vcua-mobify vcua-mobify Jul 4, 2025

Choose a reason for hiding this comment

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

open and onClose were set above so I think this part can remain unchanged?

Copy link
Contributor Author

@alexvuong alexvuong Jul 4, 2025

Choose a reason for hiding this comment

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

I changed the name to make it clearer since we have a lot open/close state on the _app config.

onLogoClick={onLogoClick}
root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
itemsKey="categories"
Expand Down Expand Up @@ -343,7 +349,7 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)

{!isCheckout ? <Footer /> : <CheckoutFooter />}
<AuthModal {...(authModal as any)} />
{/*<DntNotification {...dntNotification} />*/}
<DntNotification {...dntNotification} />
</AddToCartModalProvider>
</Box>
{(config.activeDataEnabled as boolean) && (
Expand Down
Loading
Loading