From 48b2aa41e473f2dc6b374b9e551f8c7470404391 Mon Sep 17 00:00:00 2001 From: vcua-mobify Date: Thu, 26 Jun 2025 16:38:04 -0700 Subject: [PATCH 01/15] Apply initial changes --- .../src/components/action-card/index.jsx | 4 +- .../src/components/field/index.jsx | 5 +- .../src/components/forms/address-fields.jsx | 2 +- .../components/forms/form-action-buttons.jsx | 2 +- .../src/components/radio-card/index.jsx | 84 ++++++++----------- .../partials/shipping-address-selection.jsx | 12 +-- .../checkout/partials/shipping-address.jsx | 13 ++- .../checkout/partials/shipping-options.jsx | 45 +++++----- .../theme/components/base/native-select.js | 5 +- .../src/theme/components/project/footer.js | 4 + 10 files changed, 87 insertions(+), 89 deletions(-) diff --git a/packages/extension-chakra-storefront/src/components/action-card/index.jsx b/packages/extension-chakra-storefront/src/components/action-card/index.jsx index 86b84a506e..c2e26d8e0c 100644 --- a/packages/extension-chakra-storefront/src/components/action-card/index.jsx +++ b/packages/extension-chakra-storefront/src/components/action-card/index.jsx @@ -53,7 +53,7 @@ const ActionCard = ({ {onEdit && ( - - ))} - - - - - - - )} - - + + + {({expanded}) => ( + <> + + + + + + + + {activeNavLinks.map((link) => ( + + + + ))} + + {/* */} + + + + + + )} + + + {/* large screen nav sidebar */} - + {showLoading && } @@ -200,8 +203,8 @@ const Account = () => { /> - - {navLinks.map((link) => { + + {activeNavLinks.map((link) => { const LinkIcon = link.icon return ( ) })} - + {/* */} @@ -224,7 +227,8 @@ const Account = () => { - + {/* Commented out other routes during Chakra UI v3 migration */} + {/* @@ -232,7 +236,7 @@ const Account = () => { - + */} diff --git a/packages/extension-chakra-storefront/src/pages/account/profile.jsx b/packages/extension-chakra-storefront/src/pages/account/profile.jsx index 961c02aa2c..0321bb765b 100644 --- a/packages/extension-chakra-storefront/src/pages/account/profile.jsx +++ b/packages/extension-chakra-storefront/src/pages/account/profile.jsx @@ -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() + const {data: customer, isLoading} = useCurrentCustomer() const {isRegistered} = customer const size = !isRegistered ? { @@ -50,7 +50,7 @@ const Skeleton = forwardRef(({children, height, width, ...rest}, ref) => { } : {} return ( - + {children} ) @@ -146,14 +146,18 @@ const ProfileCard = ({allowPasswordChange = false}) => {
- + {form.formState.errors?.global && ( - - - - {form.formState.errors.global.message} - - + + + + + + + {form.formState.errors.global.message} + + + )} { - + @@ -285,14 +289,18 @@ const PasswordCard = () => { - + {form.formState.errors?.root?.global && ( - - - - {form.formState.errors.root.global.message} - - + + + + + + + {form.formState.errors.root.global.message} + + + )} { - + @@ -340,7 +348,7 @@ const AccountDetail = () => { const {isExternal} = useCustomerType() return ( - + { /> - + {!isExternal && } diff --git a/packages/extension-chakra-storefront/src/pages/index.tsx b/packages/extension-chakra-storefront/src/pages/index.tsx index 1063e515dd..ed06bdf818 100644 --- a/packages/extension-chakra-storefront/src/pages/index.tsx +++ b/packages/extension-chakra-storefront/src/pages/index.tsx @@ -16,7 +16,7 @@ import {Skeleton} from '@chakra-ui/react' const fallback = // Page Loadables -// const Account = loadable(() => import('overridable!./account'), {fallback}) +const Account = loadable(() => import('overridable!./account'), {fallback}) const Cart = loadable(() => import('overridable!./cart'), {fallback}) const Checkout = loadable(() => import('overridable!./checkout'), { fallback @@ -49,7 +49,7 @@ const PageNotFound = loadable(() => import('overridable!./page-not-found'), { // NOTE: Apply "displayName" for easy filtering. This is a widely use pattern to allow filtering without // triggering the loadable logic. Please note that we want to keep these in aligned with name in the // component itself. -// Account.displayName = 'Account' +Account.displayName = 'Account' // Cart.displayName = 'Cart' Checkout.displayName = 'Checkout' // CheckoutConfirmation.displayName = 'CheckoutConfirmation' @@ -64,7 +64,7 @@ SocialLoginRedirect.displayName = 'SocialLoginRedirect' PageNotFound.displayName = 'PageNotFound' export { - // Account, + Account, Cart, Checkout, // CheckoutConfirmation, diff --git a/packages/extension-chakra-storefront/src/setup-app.tsx b/packages/extension-chakra-storefront/src/setup-app.tsx index ab78779f32..a2bb623569 100644 --- a/packages/extension-chakra-storefront/src/setup-app.tsx +++ b/packages/extension-chakra-storefront/src/setup-app.tsx @@ -82,10 +82,10 @@ class ChakraStorefront extends ApplicationExtension { // component: Pages.ResetPassword, // exact: true // }, - // { - // path: config.pages.Account && config.pages.Account.path, - // component: Pages.Account - // }, + { + path: config.pages.Account && config.pages.Account.path, + component: Pages.Account + }, { path: config.pages.Checkout && config.pages.Checkout.path, component: Pages.Checkout, From 7f69877cb7e5d8bae492d481027e57950c650c7e Mon Sep 17 00:00:00 2001 From: unandyala Date: Fri, 11 Jul 2025 15:52:41 -0400 Subject: [PATCH 13/15] enable account details --- packages/extension-chakra-storefront/jest.config.js | 1 + .../src/pages/account/index.jsx | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/extension-chakra-storefront/jest.config.js b/packages/extension-chakra-storefront/jest.config.js index 87b3604a01..4271bb17d3 100644 --- a/packages/extension-chakra-storefront/jest.config.js +++ b/packages/extension-chakra-storefront/jest.config.js @@ -61,6 +61,7 @@ module.exports = { '/src/pages/checkout/partials/contact-info.test.js', '/src/pages/checkout/partials/login-state.test.js', '/src/pages/account/orders.test.js', + '/src/pages/account/profile.test.js', '/src/utils/responsive-image.test.js', '/src/hooks/use-errors.test.js', '/src/hooks/use-toast.test.js', diff --git a/packages/extension-chakra-storefront/src/pages/account/index.jsx b/packages/extension-chakra-storefront/src/pages/account/index.jsx index 81c807d511..4e0ad0dabe 100644 --- a/packages/extension-chakra-storefront/src/pages/account/index.jsx +++ b/packages/extension-chakra-storefront/src/pages/account/index.jsx @@ -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' @@ -218,9 +218,9 @@ const Account = () => { - {/**/} - {/* */} - {/**/} + + + {/**/} {/* */} {/**/} From 4ebbebe3146abac46a7ace5f768e708e5b08c00c Mon Sep 17 00:00:00 2001 From: unandyala Date: Mon, 14 Jul 2025 11:25:49 -0400 Subject: [PATCH 14/15] Fix test --- .../src/pages/account/profile.test.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/extension-chakra-storefront/src/pages/account/profile.test.js b/packages/extension-chakra-storefront/src/pages/account/profile.test.js index ff5f529308..d1a1c9a567 100644 --- a/packages/extension-chakra-storefront/src/pages/account/profile.test.js +++ b/packages/extension-chakra-storefront/src/pages/account/profile.test.js @@ -10,6 +10,7 @@ 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' @@ -17,11 +18,14 @@ import * as sdk from '@salesforce/commerce-sdk-react' const MockedComponent = () => { return ( - - - - - + <> + + + + + + + ) } @@ -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() }) }) From daf147e291af4c413bbf608e6b88017b9266a30b Mon Sep 17 00:00:00 2001 From: unandyala Date: Mon, 14 Jul 2025 15:48:19 -0400 Subject: [PATCH 15/15] use string literals for spacing --- .../src/components/forms/profile-fields.jsx | 4 +-- .../src/pages/account/profile.jsx | 28 +++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/extension-chakra-storefront/src/components/forms/profile-fields.jsx b/packages/extension-chakra-storefront/src/components/forms/profile-fields.jsx index 5b9b87c46c..77e6eb6d93 100644 --- a/packages/extension-chakra-storefront/src/components/forms/profile-fields.jsx +++ b/packages/extension-chakra-storefront/src/components/forms/profile-fields.jsx @@ -20,8 +20,8 @@ const ProfileFields = ({form, prefix = ''}) => { }) return ( - - + + diff --git a/packages/extension-chakra-storefront/src/pages/account/profile.jsx b/packages/extension-chakra-storefront/src/pages/account/profile.jsx index 0321bb765b..3f658d493b 100644 --- a/packages/extension-chakra-storefront/src/pages/account/profile.jsx +++ b/packages/extension-chakra-storefront/src/pages/account/profile.jsx @@ -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, isLoading} = useCurrentCustomer() + const {data: customer, isPending} = useCurrentCustomer() const {isRegistered} = customer const size = !isRegistered ? { @@ -50,7 +50,7 @@ const Skeleton = forwardRef(({children, height, width, ...rest}, ref) => { } : {} return ( - + {children} ) @@ -146,11 +146,11 @@ const ProfileCard = ({allowPasswordChange = false}) => { - + {form.formState.errors?.global && ( - + @@ -172,9 +172,9 @@ const ProfileCard = ({allowPasswordChange = false}) => { - + - + { - + { - + { - + {form.formState.errors?.root?.global && ( - + @@ -315,9 +315,9 @@ const PasswordCard = () => { - + - + { const {isExternal} = useCustomerType() return ( - + { /> - + {!isExternal && }