W-18672755 - W-18397045 - Chakra UI order history and order detail by alexvuong · Pull Request #2730 · SalesforceCommerceCloud/pwa-kit

alexvuong · 2025-07-04T00:15:46Z

Description

Order History

Order Detail

DNT modal

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

(change1)

How to Test-Drive This PR

Check out code
Run typescript minimal to load storefront
Log in
Go to account order and order history

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

cc-prodsec · 2025-07-04T00:15:56Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

alexvuong · 2025-07-04T00:16:40Z

packages/extension-chakra-storefront/src/theme/components/base/heading.js

+
+export default defineRecipe({
+    base: {
+        fontWeight: 'bold'


Chakra v3 has changed default fontWeight from bold to semobold for all heading. We modified it here to match current design on pwa kit v3

alexvuong · 2025-07-04T00:17:10Z

packages/extension-chakra-storefront/src/components/header/index.jsx

                                            <Popover.Header pb={1}>
                                                <Popover.Title>
-                                                    <Heading as="h2" fontWeight={700} size="lg">
+                                                    <Heading as="h2" size="lg">


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

alexvuong · 2025-07-04T00:17:28Z

packages/extension-chakra-storefront/src/components/header/index.jsx

-                                                                        useNavLink={true}
-                                                                        to={`/account${link.path}`}
+                                                                <List.Item key={link.name}>
+                                                                    <Button


Reapply Button to make use of current variant menu-link

alexvuong · 2025-07-04T00:19:03Z

packages/extension-chakra-storefront/src/components/header/index.jsx

+                                                                    <Button
+                                                                        asChild
+                                                                        variant="menu-link"
                                                                        css={styles.menuAccountLink}


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

alexvuong · 2025-07-04T00:31:13Z

packages/extension-chakra-storefront/src/pages/account/order-detail.jsx

                                </Text>
-                                <Badge colorScheme="green">{order.status}</Badge>
+                                <Badge colorPalette="green" fontWeight="bold">
+                                    {order.status?.toUpperCase()}


Badge no longer bold and uppercase. https://www.chakra-ui.com/docs/components/badge

alexvuong · 2025-07-04T00:35:12Z

packages/extension-chakra-storefront/src/components/header/index.jsx

                            onMouseOver={isDesktop ? onAccountMenuOpen : noop}
                        >
-                            <AccountIcon boxSize={6} />
+                            <AccountIcon boxSize="6" />


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.

alexvuong · 2025-07-04T00:54:09Z

packages/extension-chakra-storefront/src/theme/foundations/layerStyles.js

        backgroundColor: 'white',
        rounded: 'base',
-        boxShadow: 'base'
+        boxShadow: 'xs'


there is no 'base' for box shadown, replace with xs https://chakra-ui.com/docs/theming/shadows

alexvuong · 2025-07-04T00:56:35Z

packages/extension-chakra-storefront/src/theme/components/project/header.js

+            fontWeight: 'semibold',
+            borderLeftWidth: '4px',
+            borderLeftStyle: 'solid',
+            borderLeftColor: 'transparent'


This will help all items are align vertically when there is an active item. An active item will have a gray left border

vcua-mobify · 2025-07-04T23:04:04Z

The chevron down on the account button for the header is off compared to the demo store

alexvuong · 2025-07-04T23:34:44Z

packages/extension-chakra-storefront/src/components/header/index.jsx

-                            <AccountIcon boxSize={6} />
-                        </IconButtonWithRegistration>
-                    )}
+                    <IconButtonWithRegistration


I am reverting the code we have for v3 because moving this icon into popover trigger causes the navigation to account onSuccessLogin failed.

alexvuong · 2025-07-04T23:35:07Z

packages/extension-chakra-storefront/src/theme/components/base/drawer.js

            paddingBottom: 1,
            paddingLeft: [4, 4, 6, 6],
-            boxShadow: 'base'
+            boxShadow: 'sm'


Chakra v3 does not have base for boxShadown anymore

alexvuong · 2025-07-04T23:35:37Z

packages/extension-chakra-storefront/src/theme/components/project/header.js

+import {defineSlotRecipe} from '@chakra-ui/react'

-export default defineRecipe({
+export default defineSlotRecipe({


Header is slotRecipe, I missed this when refactoring the header

vcua-mobify · 2025-07-04T23:36:22Z

packages/extension-chakra-storefront/src/components/with-layout/with-layout.tsx

-                                            isOpen={open}
-                                            onClose={onClose}
+                                            isOpen={isDrawerMenuOpen}
+                                            onClose={onDrawerMenuClose}


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

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

alexvuong · 2025-07-08T20:08:25Z

packages/extension-chakra-storefront/src/components/field/index.jsx

                const _inputProps =
                    typeof inputProps === 'function' ? inputProps({value, onChange}) : inputProps

+                const {endElement, ...restOfInputProps} = _inputProps || {}


This will address the warning.

console.error Warning: React does not recognize the `endElement` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `endelement` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

vcua-mobify · 2025-07-08T20:16:02Z

The account drop down chevron is now in the expected location

vcua-mobify

The order details, order history, and dnt banner all look good to me.

The account drop down now being an onClick is also working

packages/extension-chakra-storefront/src/pages/account/index.jsx

adamraya · 2025-07-10T20:52:04Z

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

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"

packages/extension-chakra-storefront/src/pages/account/index.jsx

adamraya · 2025-07-10T20:59:56Z

packages/extension-chakra-storefront/src/pages/account/index.jsx

+                            _active={{background: 'gray.100'}}
+                            _expanded={{background: 'transparent'}}
+                        >
+                            <Flex align="center" justify="center" width="full">


Suggested change

<Flex align="center" justify="center" width="full">

<Flex alignItems="center" justify="center" width="full">

align should still work, see here: https://www.chakra-ui.com/docs/components/flex#props

adamraya · 2025-07-10T21:01:41Z

packages/extension-chakra-storefront/src/pages/account/order-detail.jsx

                                borderColor="gray.100"
                                borderRadius="base"
                            >
                                <Flex width="full" align="flex-start">


Suggested change

<Flex width="full" align="flex-start">

<Flex width="full" alignItems="flex-start">

sf-jie-dai · 2025-07-16T14:34:12Z

packages/extension-chakra-storefront/src/theme/components/base/button.js

                    textDecorationColor: 'gray.900'
                },
-                _activeLink: {
+                '&.active': {


Glad to see this method works!

…2730) * Order history and order detail

Order history and order detail

0fba8c8

alexvuong requested a review from a team as a code owner July 4, 2025 00:15

alexvuong commented Jul 4, 2025

View reviewed changes

minor adjustment

58a5946

alexvuong commented Jul 4, 2025

View reviewed changes

minor adjustment

5c11ae7

alexvuong commented Jul 4, 2025

View reviewed changes

revert checkout

a753372

alexvuong commented Jul 4, 2025

View reviewed changes

alexvuong added 9 commits July 3, 2025 17:57

fix style

78fd619

fix style

e570c77

fix style

9484e4c

Fix dnt modal

8fe2d25

Fix dnt modal

3fd98c4

remove console

483bb8e

fix dnt

94055f0

Fix dnt tests

9ce187a

fix header theme

4994899

fix header behavior

accded0

alexvuong commented Jul 4, 2025

View reviewed changes

vcua-mobify reviewed Jul 4, 2025

View reviewed changes

fix header behavior

cc033c2

alexvuong added 8 commits July 4, 2025 16:43

fix header behavior

6b5d9ed

use onClick on header

db3edec

Merge branch 'feature/chakra-ui-upgrade-v3' into chakra-ui-order-history

b939c68

minor fix

d2b105a

fix tests

5251e1c

fix tests

c34d898

fix invalid props React warning

74c405c

remove only

90de11f

alexvuong commented Jul 8, 2025

View reviewed changes

vcua-mobify approved these changes Jul 8, 2025

View reviewed changes

packages/extension-chakra-storefront/src/pages/account/index.jsx Outdated Show resolved Hide resolved

alexvuong added 2 commits July 8, 2025 15:56

enable account addresses

4291e2f

Merge branch 'feature/chakra-ui-upgrade-v3' into chakra-ui-order-history

10538d4

adamraya reviewed Jul 10, 2025

View reviewed changes

packages/extension-chakra-storefront/src/pages/account/index.jsx Outdated Show resolved Hide resolved

adamraya reviewed Jul 10, 2025

View reviewed changes

adamraya approved these changes Jul 10, 2025

View reviewed changes

alexvuong added 4 commits July 10, 2025 14:41

PR feedback

1ed07c5

clean up

10ac07d

PR feedback

6f1ba24

Merge branch 'feature/chakra-ui-upgrade-v3' into chakra-ui-order-history

2cd1e65

alexvuong merged commit d0eeacd into feature/chakra-ui-upgrade-v3 Jul 10, 2025
4 checks passed

sf-jie-dai reviewed Jul 16, 2025

View reviewed changes

alexvuong added a commit that referenced this pull request Jul 16, 2025

W-18672755 - W-18397045 - Chakra UI order history and order detail (#…

339f739

…2730) * Order history and order detail

alexvuong deleted the chakra-ui-order-history branch July 16, 2025 22:13

	<Flex align="center" justify="center" width="full">
	<Flex alignItems="center" justify="center" width="full">

	<Flex width="full" align="flex-start">
	<Flex width="full" alignItems="flex-start">

Conversation

alexvuong commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vcua-mobify commented Jul 4, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vcua-mobify commented Jul 8, 2025

Uh oh!

vcua-mobify left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

alexvuong commented Jul 4, 2025 •

edited

Loading

cc-prodsec commented Jul 4, 2025 •

edited

Loading