Skip to content

Commit 3f3cec7

Browse files
sf-henry-semagandasf-henry-semaganda
committed
prep uplift if address page to chakra v3
1 parent b894ac5 commit 3f3cec7

File tree

7 files changed

+71
-139
lines changed

7 files changed

+71
-139
lines changed

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
IconButton,
1313
Input,
1414
InputGroup,
15-
NativeSelect,
15+
Select,
1616
Checkbox
1717
} from '@chakra-ui/react'
1818
import {VisibilityIcon, VisibilityOffIcon, AlertIcon} from '../icons'
@@ -109,22 +109,22 @@ const Field = ({
109109

110110
{type === 'select' && (
111111
<>
112-
<NativeSelect.Root ref={ref} value={value} {..._inputProps}>
113-
<NativeSelect.Field
112+
<Select.Root ref={ref} value={value} {..._inputProps}>
113+
<Select.Field
114114
onChange={onChange}
115115
placeholder={placeholder}
116116
>
117117
{options.map((opt) => (
118-
<option
118+
<Select.Option
119119
key={`${opt.label}-${opt.value}`}
120120
value={opt.value}
121121
>
122122
{opt.label}
123-
</option>
123+
</Select.Option>
124124
))}
125-
</NativeSelect.Field>
126-
<NativeSelect.Indicator />
127-
</NativeSelect.Root>
125+
</Select.Field>
126+
<Select.Indicator />
127+
</Select.Root>
128128
{children}
129129
</>
130130
)}

‎packages/extension-chakra-storefront/src/pages/account/addresses.jsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,12 @@ const ShippingAddressForm = ({form, hasAddresses, selectedAddressId, toggleEdit,
9393
<form onSubmit={form.handleSubmit(submitForm)}>
9494
<Stack spacing={6}>
9595
{form.formState.errors?.global && (
96-
<Alert status="error">
96+
<Alert.Root status="error">
9797
<AlertIcon color="red.600" boxSize={4} />
9898
<Text fontSize="sm" ml={3}>
9999
{form.formState.errors.global.message}
100100
</Text>
101-
</Alert>
101+
</Alert.Root>
102102
)}
103103
<AddressFields form={form} />
104104
<FormActionButtons onCancel={toggleEdit} />
@@ -348,19 +348,21 @@ const AccountAddresses = () => {
348348
removeBtnLabel={removeLabel}
349349
>
350350
{address.preferred && (
351-
<Badge
351+
<Badge.Root
352352
position="absolute"
353353
fontSize="xs"
354354
right={4}
355355
variant="solid"
356356
bg="gray.100"
357357
color="gray.900"
358358
>
359-
<FormattedMessage
360-
defaultMessage="Default"
361-
id="account_addresses.badge.default"
362-
/>
363-
</Badge>
359+
<Badge.Label>
360+
<FormattedMessage
361+
defaultMessage="Default"
362+
id="account_addresses.badge.default"
363+
/>
364+
</Badge.Label>
365+
</Badge.Root>
364366
)}
365367
<AddressDisplay address={address} />
366368
{isEditing && address.addressId === selectedAddressId && (

‎packages/extension-chakra-storefront/src/pages/account/constant.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ export const navLinks = [
2121
path: '',
2222
icon: AccountIcon
2323
},
24-
{
25-
name: 'wishlist',
26-
path: '/wishlist',
27-
icon: HeartIcon
28-
},
24+
// {
25+
// name: 'wishlist',
26+
// path: '/wishlist',
27+
// icon: HeartIcon
28+
// },
2929
{
3030
name: 'orders',
3131
path: '/orders',

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

Lines changed: 30 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,25 @@
55
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
66
*/
77

8-
import React, {useEffect, useState} from 'react'
8+
import React, {useState} from 'react'
99
import PropTypes from 'prop-types'
1010
import {FormattedMessage, useIntl} from 'react-intl'
11-
import {Route, Switch, Redirect, useLocation, useRouteMatch} from 'react-router-dom'
11+
import {Redirect, useLocation, useRouteMatch} from 'react-router-dom'
12+
import {Route, Switch} from 'react-router-dom'
1213
import {
13-
Accordion,
14-
AccordionButton,
15-
AccordionItem,
16-
AccordionPanel,
1714
Box,
1815
Button,
1916
Flex,
2017
Grid,
2118
Heading,
2219
Stack,
23-
Text,
24-
Divider
20+
Text
2521
} from '@chakra-ui/react'
2622
import Seo from '../../components/seo'
2723
import Link from '../../components/link'
28-
import {ChevronDownIcon, ChevronUpIcon, SignoutIcon} from '../../components/icons'
29-
import AccountDetail from '../../pages/account/profile'
3024
import AccountAddresses from '../../pages/account/addresses'
31-
import AccountOrders from '../../pages/account/orders'
32-
import AccountWishlist from '../../pages/account/wishlist/index'
33-
3425
import {messages, navLinks} from '../../pages/account/constant'
3526
import useNavigation from '../../hooks/use-navigation'
36-
import LoadingSpinner from '../../components/loading-spinner'
3727
import useMultiSite from '../../hooks/use-multi-site'
3828
import useEinstein from '../../hooks/use-einstein'
3929
import useDataCloud from '../../hooks/use-datacloud'
@@ -81,7 +71,8 @@ const Account = () => {
8171
const {formatMessage} = useIntl()
8272
const {data: customer} = useCurrentCustomer()
8373
const {isRegistered, customerType} = customer
84-
74+
const {buildUrl} = useMultiSite()
75+
8576
const logout = useAuthHelper(AuthHelpers.Logout)
8677
const location = useLocation()
8778
const navigate = useNavigation()
@@ -92,27 +83,23 @@ const Account = () => {
9283
const einstein = useEinstein()
9384
const dataCloud = useDataCloud()
9485

95-
const {buildUrl} = useMultiSite()
96-
/**************** Einstein ****************/
97-
useEffect(() => {
86+
React.useEffect(() => {
9887
einstein.sendViewPage(location.pathname)
9988
dataCloud.sendViewPage(location.pathname)
10089
}, [location])
10190

10291
const onSignoutClick = async () => {
10392
setShowLoading(true)
104-
await logout.mutateAsync()
105-
navigate('/login')
93+
// await logout.mutateAsync()
94+
// navigate('/login')
10695
}
10796

10897
// If we have customer data and they are not registered, push to login page
109-
// Using Redirect allows us to store the directed page to location
110-
// so we can direct users back after they are successfully log in
11198
if (customerType !== null && !isRegistered && onClient) {
11299
const path = buildUrl('/login')
113100
return <Redirect to={{pathname: path, state: {directedFrom: '/account'}}} />
114101
}
115-
102+
116103
return (
117104
<Box
118105
data-testid={isRegistered && isHydrated() ? 'account-page' : 'account-page-skeleton'}
@@ -121,85 +108,14 @@ const Account = () => {
121108
>
122109
<Seo title="My Account" description="Customer Account Page" />
123110
<Grid templateColumns={{base: '1fr', lg: '320px 1fr'}} gap={{base: 10, lg: 24}}>
124-
{/* small screen nav accordion */}
125-
<Accordion
126-
display={{base: 'block', lg: 'none'}}
127-
allowToggle={true}
128-
reduceMotion={true}
129-
index={mobileNavIndex}
130-
onChange={setMobileNavIndex}
131-
>
132-
<AccordionItem border="none" background="gray.50" borderRadius="base">
133-
{({isExpanded}) => (
134-
<>
135-
<AccordionButton
136-
as={Button}
137-
height={16}
138-
paddingLeft={8}
139-
variant="ghost"
140-
color="black"
141-
_active={{background: 'gray.100'}}
142-
_expanded={{background: 'transparent'}}
143-
>
144-
<Flex align="center" justify="center">
145-
<Heading as="h2" fontSize="16px">
146-
<FormattedMessage
147-
defaultMessage="My Account"
148-
id="account.accordion.button.my_account"
149-
/>
150-
</Heading>
151-
{isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
152-
</Flex>
153-
</AccordionButton>
154-
<AccordionPanel px={4} paddingBottom={4}>
155-
<Flex as="nav" spacing={0} direction="column">
156-
<Stack spacing={0} as="ul" data-testid="account-nav">
157-
{navLinks.map((link) => (
158-
<Box
159-
align="center"
160-
key={link.name}
161-
as="li"
162-
listStyleType="none"
163-
>
164-
<Button
165-
as={Link}
166-
to={`/account${link.path}`}
167-
useNavLink={true}
168-
variant="menu-link-mobile"
169-
justifyContent="center"
170-
fontSize="md"
171-
fontWeight="normal"
172-
width="100%"
173-
onClick={() => setMobileNavIndex(-1)}
174-
>
175-
{formatMessage(messages[link.name])}
176-
</Button>
177-
</Box>
178-
))}
179-
180-
<LogoutButton
181-
justify="center"
182-
onClick={onSignoutClick}
183-
/>
184-
</Stack>
185-
</Flex>
186-
</AccordionPanel>
187-
</>
188-
)}
189-
</AccordionItem>
190-
</Accordion>
191-
192-
{/* large screen nav sidebar */}
111+
{/* Navigation Sidebar */}
193112
<Stack display={{base: 'none', lg: 'flex'}} spacing={4}>
194-
{showLoading && <LoadingSpinner wrapperStyles={{height: '100vh'}} />}
195-
196113
<Heading as="h2" fontSize="18px">
197114
<FormattedMessage
198115
defaultMessage="My Account"
199116
id="account.heading.my_account"
200117
/>
201118
</Heading>
202-
203119
<Flex spacing={0} as="nav" data-testid="account-detail-nav" direction="column">
204120
{navLinks.map((link) => {
205121
const LinkIcon = link.icon
@@ -216,24 +132,27 @@ const Account = () => {
216132
</Button>
217133
)
218134
})}
219-
<LogoutButton onClick={onSignoutClick} />
220135
</Flex>
136+
<Button onClick={onSignoutClick}>Logout</Button>
221137
</Stack>
222138

223-
<Switch>
224-
<Route exact path={path}>
225-
<AccountDetail />
226-
</Route>
227-
<Route exact path={`${path}/wishlist`}>
228-
<AccountWishlist />
229-
</Route>
230-
<Route exact path={`${path}/addresses`}>
231-
<AccountAddresses />
232-
</Route>
233-
<Route path={`${path}/orders`}>
234-
<AccountOrders />
235-
</Route>
236-
</Switch>
139+
{/* Main Content */}
140+
<Box>
141+
<Heading>Account Page</Heading>
142+
<Text>Path: {path}</Text>
143+
<Text>Registered: {isRegistered ? 'Yes' : 'No'}</Text>
144+
<Text>Customer Type: {customerType}</Text>
145+
146+
<Switch>
147+
<Route path={`${path}/addresses`} component={AccountAddresses} />
148+
<Route exact path={path}>
149+
<Box>
150+
<Heading>Account Profile</Heading>
151+
<Text>This is the account profile page</Text>
152+
</Box>
153+
</Route>
154+
</Switch>
155+
</Box>
237156
</Grid>
238157
</Box>
239158
)
@@ -245,4 +164,4 @@ Account.propTypes = {
245164
match: PropTypes.object
246165
}
247166

248-
export default Account
167+
export default Account

‎packages/extension-chakra-storefront/src/pages/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {Skeleton} from '@chakra-ui/react'
1616
const fallback = <Skeleton height="75vh" width="100%" />
1717

1818
// Page Loadables
19-
// const Account = loadable(() => import('overridable!./account'), {fallback})
19+
const Account = loadable(() => import('overridable!./account'), {fallback})
2020
const Cart = loadable(() => import('overridable!./cart'), {fallback})
2121
const Checkout = loadable(() => import('overridable!./checkout'), {
2222
fallback
@@ -49,7 +49,7 @@ const PageNotFound = loadable(() => import('overridable!./page-not-found'), {
4949
// NOTE: Apply "displayName" for easy filtering. This is a widely use pattern to allow filtering without
5050
// triggering the loadable logic. Please note that we want to keep these in aligned with name in the
5151
// component itself.
52-
// Account.displayName = 'Account'
52+
Account.displayName = 'Account'
5353
// Cart.displayName = 'Cart'
5454
Checkout.displayName = 'Checkout'
5555
// CheckoutConfirmation.displayName = 'CheckoutConfirmation'
@@ -64,7 +64,7 @@ SocialLoginRedirect.displayName = 'SocialLoginRedirect'
6464
PageNotFound.displayName = 'PageNotFound'
6565

6666
export {
67-
// Account,
67+
Account,
6868
Cart,
6969
Checkout,
7070
// CheckoutConfirmation,

‎packages/extension-chakra-storefront/src/setup-app.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@ class ChakraStorefront extends ApplicationExtension<Config> {
8282
// component: Pages.ResetPassword,
8383
// exact: true
8484
// },
85-
// {
86-
// path: config.pages.Account && config.pages.Account.path,
87-
// component: Pages.Account
88-
// },
85+
{
86+
path: config.pages.Account && config.pages.Account.path,
87+
component: Pages.Account
88+
},
8989
{
9090
path: config.pages.Checkout && config.pages.Checkout.path,
9191
component: Pages.Checkout,

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,17 @@ import {defineRecipe} from '@chakra-ui/react'
99
export default defineRecipe({
1010
variants: {
1111
variant: {
12+
solid: {
13+
display: 'inline-flex',
14+
alignItems: 'center',
15+
justifyContent: 'center',
16+
borderRadius: 'md',
17+
fontWeight: 'medium',
18+
fontSize: 'xs',
19+
lineHeight: '1.2',
20+
textTransform: 'uppercase',
21+
letterSpacing: 'wider'
22+
},
1223
notification: {
1324
display: 'inline-flex',
1425
justifyContent: 'center',

0 commit comments

Comments
 (0)