From 3f3cec712ec4f402a8e466d43f06f4ae402e0fc0 Mon Sep 17 00:00:00 2001 From: Henry Semaganda Date: Tue, 1 Jul 2025 12:46:01 -0700 Subject: [PATCH 1/4] prep uplift if address page to chakra v3 --- .../src/components/field/index.jsx | 16 +- .../src/pages/account/addresses.jsx | 18 ++- .../src/pages/account/constant.js | 10 +- .../src/pages/account/index.jsx | 141 ++++-------------- .../src/pages/index.tsx | 6 +- .../src/setup-app.tsx | 8 +- .../src/theme/components/base/badge.js | 11 ++ 7 files changed, 71 insertions(+), 139 deletions(-) diff --git a/packages/extension-chakra-storefront/src/components/field/index.jsx b/packages/extension-chakra-storefront/src/components/field/index.jsx index f7c87893b0..63a60ec95d 100644 --- a/packages/extension-chakra-storefront/src/components/field/index.jsx +++ b/packages/extension-chakra-storefront/src/components/field/index.jsx @@ -12,7 +12,7 @@ import { IconButton, Input, InputGroup, - NativeSelect, + Select, Checkbox } from '@chakra-ui/react' import {VisibilityIcon, VisibilityOffIcon, AlertIcon} from '../icons' @@ -109,22 +109,22 @@ const Field = ({ {type === 'select' && ( <> - - + {options.map((opt) => ( - + ))} - - - + + + {children} )} diff --git a/packages/extension-chakra-storefront/src/pages/account/addresses.jsx b/packages/extension-chakra-storefront/src/pages/account/addresses.jsx index be018dd40b..8a2e1db47b 100644 --- a/packages/extension-chakra-storefront/src/pages/account/addresses.jsx +++ b/packages/extension-chakra-storefront/src/pages/account/addresses.jsx @@ -93,12 +93,12 @@ const ShippingAddressForm = ({form, hasAddresses, selectedAddressId, toggleEdit,
{form.formState.errors?.global && ( - + {form.formState.errors.global.message} - + )} @@ -348,7 +348,7 @@ const AccountAddresses = () => { removeBtnLabel={removeLabel} > {address.preferred && ( - { bg="gray.100" color="gray.900" > - - + + + + )} {isEditing && address.addressId === selectedAddressId && ( diff --git a/packages/extension-chakra-storefront/src/pages/account/constant.js b/packages/extension-chakra-storefront/src/pages/account/constant.js index 817e2dacad..da12b31ddd 100644 --- a/packages/extension-chakra-storefront/src/pages/account/constant.js +++ b/packages/extension-chakra-storefront/src/pages/account/constant.js @@ -21,11 +21,11 @@ export const navLinks = [ path: '', icon: AccountIcon }, - { - name: 'wishlist', - path: '/wishlist', - icon: HeartIcon - }, + // { + // name: 'wishlist', + // path: '/wishlist', + // icon: HeartIcon + // }, { name: 'orders', path: '/orders', diff --git a/packages/extension-chakra-storefront/src/pages/account/index.jsx b/packages/extension-chakra-storefront/src/pages/account/index.jsx index 156f6e937b..2b48a19909 100644 --- a/packages/extension-chakra-storefront/src/pages/account/index.jsx +++ b/packages/extension-chakra-storefront/src/pages/account/index.jsx @@ -5,35 +5,25 @@ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause */ -import React, {useEffect, useState} from 'react' +import React, {useState} from 'react' import PropTypes from 'prop-types' import {FormattedMessage, useIntl} from 'react-intl' -import {Route, Switch, Redirect, useLocation, useRouteMatch} from 'react-router-dom' +import {Redirect, useLocation, useRouteMatch} from 'react-router-dom' +import {Route, Switch} from 'react-router-dom' import { - Accordion, - AccordionButton, - AccordionItem, - AccordionPanel, Box, Button, Flex, Grid, Heading, Stack, - Text, - Divider + Text } from '@chakra-ui/react' import Seo from '../../components/seo' import Link from '../../components/link' -import {ChevronDownIcon, ChevronUpIcon, SignoutIcon} from '../../components/icons' -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' - import {messages, navLinks} from '../../pages/account/constant' import useNavigation from '../../hooks/use-navigation' -import LoadingSpinner from '../../components/loading-spinner' import useMultiSite from '../../hooks/use-multi-site' import useEinstein from '../../hooks/use-einstein' import useDataCloud from '../../hooks/use-datacloud' @@ -81,7 +71,8 @@ const Account = () => { const {formatMessage} = useIntl() const {data: customer} = useCurrentCustomer() const {isRegistered, customerType} = customer - + const {buildUrl} = useMultiSite() + const logout = useAuthHelper(AuthHelpers.Logout) const location = useLocation() const navigate = useNavigation() @@ -92,27 +83,23 @@ const Account = () => { const einstein = useEinstein() const dataCloud = useDataCloud() - const {buildUrl} = useMultiSite() - /**************** Einstein ****************/ - useEffect(() => { + React.useEffect(() => { einstein.sendViewPage(location.pathname) dataCloud.sendViewPage(location.pathname) }, [location]) const onSignoutClick = async () => { setShowLoading(true) - await logout.mutateAsync() - navigate('/login') + // await logout.mutateAsync() + // navigate('/login') } // If we have customer data and they are not registered, push to login page - // Using Redirect allows us to store the directed page to location - // so we can direct users back after they are successfully log in if (customerType !== null && !isRegistered && onClient) { const path = buildUrl('/login') return } - + return ( { > - {/* small screen nav accordion */} - - - {({isExpanded}) => ( - <> - - - - - - {isExpanded ? : } - - - - - - {navLinks.map((link) => ( - - - - ))} - - - - - - - )} - - - - {/* large screen nav sidebar */} + {/* Navigation Sidebar */} - {showLoading && } - - {navLinks.map((link) => { const LinkIcon = link.icon @@ -216,24 +132,27 @@ const Account = () => { ) })} - + - - - - - - - - - - - - - - + {/* Main Content */} + + Account Page + Path: {path} + Registered: {isRegistered ? 'Yes' : 'No'} + Customer Type: {customerType} + + + + + + Account Profile + This is the account profile page + + + + ) @@ -245,4 +164,4 @@ Account.propTypes = { match: PropTypes.object } -export default Account +export default Account \ No newline at end of file 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, diff --git a/packages/extension-chakra-storefront/src/theme/components/base/badge.js b/packages/extension-chakra-storefront/src/theme/components/base/badge.js index aa228448c1..3df02b9563 100644 --- a/packages/extension-chakra-storefront/src/theme/components/base/badge.js +++ b/packages/extension-chakra-storefront/src/theme/components/base/badge.js @@ -9,6 +9,17 @@ import {defineRecipe} from '@chakra-ui/react' export default defineRecipe({ variants: { variant: { + solid: { + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 'md', + fontWeight: 'medium', + fontSize: 'xs', + lineHeight: '1.2', + textTransform: 'uppercase', + letterSpacing: 'wider' + }, notification: { display: 'inline-flex', justifyContent: 'center', From 0d11b7ec9dd33c66334985c80ecf15c582269806 Mon Sep 17 00:00:00 2001 From: Henry Semaganda Date: Wed, 2 Jul 2025 09:53:04 -0700 Subject: [PATCH 2/4] fix errors on page --- .../src/components/field/index.jsx | 16 +++++++------- .../src/pages/account/addresses.jsx | 22 +++++++++---------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/extension-chakra-storefront/src/components/field/index.jsx b/packages/extension-chakra-storefront/src/components/field/index.jsx index 63a60ec95d..f7c87893b0 100644 --- a/packages/extension-chakra-storefront/src/components/field/index.jsx +++ b/packages/extension-chakra-storefront/src/components/field/index.jsx @@ -12,7 +12,7 @@ import { IconButton, Input, InputGroup, - Select, + NativeSelect, Checkbox } from '@chakra-ui/react' import {VisibilityIcon, VisibilityOffIcon, AlertIcon} from '../icons' @@ -109,22 +109,22 @@ const Field = ({ {type === 'select' && ( <> - - + {options.map((opt) => ( - {opt.label} - + ))} - - - + + + {children} )} diff --git a/packages/extension-chakra-storefront/src/pages/account/addresses.jsx b/packages/extension-chakra-storefront/src/pages/account/addresses.jsx index 8a2e1db47b..8ae6bb3f15 100644 --- a/packages/extension-chakra-storefront/src/pages/account/addresses.jsx +++ b/packages/extension-chakra-storefront/src/pages/account/addresses.jsx @@ -94,10 +94,12 @@ const ShippingAddressForm = ({form, hasAddresses, selectedAddressId, toggleEdit, {form.formState.errors?.global && ( - - + + + + {form.formState.errors.global.message} - + )} @@ -348,7 +350,7 @@ const AccountAddresses = () => { removeBtnLabel={removeLabel} > {address.preferred && ( - { bg="gray.100" color="gray.900" > - - - - + + )} {isEditing && address.addressId === selectedAddressId && ( From 55028caad7b224e0ae2f4f9ef09b3f7375eafb57 Mon Sep 17 00:00:00 2001 From: Henry Semaganda Date: Wed, 2 Jul 2025 10:01:30 -0700 Subject: [PATCH 3/4] revert unncecessary change --- .../src/pages/account/constant.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/extension-chakra-storefront/src/pages/account/constant.js b/packages/extension-chakra-storefront/src/pages/account/constant.js index da12b31ddd..817e2dacad 100644 --- a/packages/extension-chakra-storefront/src/pages/account/constant.js +++ b/packages/extension-chakra-storefront/src/pages/account/constant.js @@ -21,11 +21,11 @@ export const navLinks = [ path: '', icon: AccountIcon }, - // { - // name: 'wishlist', - // path: '/wishlist', - // icon: HeartIcon - // }, + { + name: 'wishlist', + path: '/wishlist', + icon: HeartIcon + }, { name: 'orders', path: '/orders', From c89210f2725038cd585cafd9d969ad37c533c528 Mon Sep 17 00:00:00 2001 From: Henry Semaganda Date: Wed, 2 Jul 2025 10:23:29 -0700 Subject: [PATCH 4/4] fix error on save address --- .../src/pages/account/addresses.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/extension-chakra-storefront/src/pages/account/addresses.jsx b/packages/extension-chakra-storefront/src/pages/account/addresses.jsx index 8ae6bb3f15..e52ad66e95 100644 --- a/packages/extension-chakra-storefront/src/pages/account/addresses.jsx +++ b/packages/extension-chakra-storefront/src/pages/account/addresses.jsx @@ -11,7 +11,6 @@ import PropTypes from 'prop-types' import { Alert, - AlertIcon, Badge, Box, Button, @@ -27,7 +26,7 @@ import {useForm} from 'react-hook-form' import useToast from '../../hooks/use-toast' import LoadingSpinner from '../../components/loading-spinner' -import {LocationIcon, PlusIcon} from '../../components/icons' +import {LocationIcon, PlusIcon, AlertIcon} from '../../components/icons' import ActionCard from '../../components/action-card' import AddressFields from '../../components/forms/address-fields' import AddressDisplay from '../../components/address-display'