@salesforce/retail-react-app 1.0.0-preview.0

package/app/pages/account/index.jsx

@@ -0,0 +1,237 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * 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 PropTypes from 'prop-types'
+import {FormattedMessage, useIntl} from 'react-intl'
+import {Route, Switch, useRouteMatch, Redirect} from 'react-router'
+import {
+    Accordion,
+    AccordionButton,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    Button,
+    Flex,
+    Grid,
+    Heading,
+    Stack,
+    Text,
+    Divider
+} from '@chakra-ui/react'
+import Seo from '@salesforce/retail-react-app/app/components/seo'
+import Link from '@salesforce/retail-react-app/app/components/link'
+import {
+    ChevronDownIcon,
+    ChevronUpIcon,
+    SignoutIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+import AccountDetail from '@salesforce/retail-react-app/app/pages/account/profile'
+import AccountAddresses from '@salesforce/retail-react-app/app/pages/account/addresses'
+import AccountOrders from '@salesforce/retail-react-app/app/pages/account/orders'
+import AccountWishlist from '@salesforce/retail-react-app/app/pages/account/wishlist/index'
+import {useLocation} from 'react-router-dom'
+
+import {messages, navLinks} from '@salesforce/retail-react-app/app/pages/account/constant'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import {useAuthHelper, AuthHelpers} from '@salesforce/commerce-sdk-react'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import {isHydrated} from '@salesforce/retail-react-app/app/utils/utils'
+
+const onClient = typeof window !== 'undefined'
+const LogoutButton = ({onClick}) => {
+    const {formatMessage} = useIntl()
+    return (
+        <>
+            <Divider colorScheme={'gray'} marginTop={3} />
+            <Button
+                fontWeight="500"
+                onClick={onClick}
+                padding={4}
+                py={0}
+                variant="unstyled"
+                _hover={{background: 'gray.50'}}
+                marginTop={1}
+                borderRadius="4px"
+                cursor={'pointer'}
+                height={11}
+            >
+                <Flex justify={{base: 'center', lg: 'flex-start'}}>
+                    <SignoutIcon boxSize={5} mr={2} />
+                    <Text as="span" fontSize={['md', 'md', 'md', 'sm']} fontWeight="normal">
+                        {formatMessage({
+                            defaultMessage: 'Log Out',
+                            id: 'account.logout_button.button.log_out'
+                        })}
+                    </Text>
+                </Flex>
+            </Button>
+        </>
+    )
+}
+
+LogoutButton.propTypes = {
+    onClick: PropTypes.func.isRequired
+}
+const Account = () => {
+    const {path} = useRouteMatch()
+    const {formatMessage} = useIntl()
+    const {data: customer} = useCurrentCustomer()
+    const {isRegistered, customerType} = customer
+
+    const logout = useAuthHelper(AuthHelpers.Logout)
+    const location = useLocation()
+    const navigate = useNavigation()
+
+    const [mobileNavIndex, setMobileNavIndex] = useState(-1)
+    const [showLoading, setShowLoading] = useState(false)
+
+    const einstein = useEinstein()
+
+    const {buildUrl} = useMultiSite()
+    /**************** Einstein ****************/
+    useEffect(() => {
+        einstein.sendViewPage(location.pathname)
+    }, [location])
+
+    const onSignoutClick = async () => {
+        setShowLoading(true)
+        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
+    // we don't want redirect on server side
+    if (customerType !== null && !isRegistered && onClient) {
+        const path = buildUrl('/login')
+        return <Redirect to={{pathname: path, state: {directedFrom: '/account'}}} />
+    }
+    return (
+        <Box
+            data-testid={isRegistered && isHydrated() ? 'account-page' : 'account-page-skeleton'}
+            layerStyle="page"
+            paddingTop={[4, 4, 12, 12, 16]}
+        >
+            <Seo title="My Account" description="Customer Account Page" />
+            <Grid templateColumns={{base: '1fr', lg: '320px 1fr'}} gap={{base: 10, lg: 24}}>
+                {/* small screen nav accordion */}
+                <Accordion
+                    display={{base: 'block', lg: 'none'}}
+                    allowToggle={true}
+                    reduceMotion={true}
+                    index={mobileNavIndex}
+                    onChange={setMobileNavIndex}
+                >
+                    <AccordionItem border="none" background="gray.50" borderRadius="base">
+                        {({isExpanded}) => (
+                            <>
+                                <AccordionButton
+                                    as={Button}
+                                    height={16}
+                                    variant="ghost"
+                                    color="black"
+                                    _active={{background: 'gray.100'}}
+                                    _expanded={{background: 'transparent'}}
+                                >
+                                    <Flex align="center" justify="center">
+                                        <Text as="span" mr={2}>
+                                            <FormattedMessage
+                                                defaultMessage="My Account"
+                                                id="account.accordion.button.my_account"
+                                            />
+                                        </Text>
+                                        {isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                                    </Flex>
+                                </AccordionButton>
+                                <AccordionPanel px={4} paddingBottom={4}>
+                                    <Flex as="nav" spacing={0} direction="column">
+                                        {navLinks.map((link) => (
+                                            <Button
+                                                key={link.name}
+                                                as={Link}
+                                                to={`/account${link.path}`}
+                                                useNavLink={true}
+                                                variant="menu-link-mobile"
+                                                justifyContent="center"
+                                                fontSize="md"
+                                                fontWeight="normal"
+                                                onClick={() => setMobileNavIndex(-1)}
+                                            >
+                                                {formatMessage(messages[link.name])}
+                                            </Button>
+                                        ))}
+
+                                        <LogoutButton justify="center" onClick={onSignoutClick} />
+                                    </Flex>
+                                </AccordionPanel>
+                            </>
+                        )}
+                    </AccordionItem>
+                </Accordion>
+
+                {/* large screen nav sidebar */}
+                <Stack display={{base: 'none', lg: 'flex'}} spacing={4}>
+                    {showLoading && <LoadingSpinner wrapperStyles={{height: '100vh'}} />}
+
+                    <Heading as="h6" fontSize="18px">
+                        <FormattedMessage
+                            defaultMessage="My Account"
+                            id="account.heading.my_account"
+                        />
+                    </Heading>
+
+                    <Flex spacing={0} as="nav" data-testid="account-detail-nav" direction="column">
+                        {navLinks.map((link) => {
+                            const LinkIcon = link.icon
+                            return (
+                                <Button
+                                    key={link.name}
+                                    as={Link}
+                                    to={`/account${link.path}`}
+                                    useNavLink={true}
+                                    variant="menu-link"
+                                    leftIcon={<LinkIcon boxSize={5} />}
+                                >
+                                    {formatMessage(messages[link.name])}
+                                </Button>
+                            )
+                        })}
+                        <LogoutButton onClick={onSignoutClick} />
+                    </Flex>
+                </Stack>
+
+                <Switch>
+                    <Route exact path={path}>
+                        <AccountDetail />
+                    </Route>
+                    <Route exact path={`${path}/wishlist`}>
+                        <AccountWishlist />
+                    </Route>
+                    <Route exact path={`${path}/addresses`}>
+                        <AccountAddresses />
+                    </Route>
+                    <Route path={`${path}/orders`}>
+                        <AccountOrders />
+                    </Route>
+                </Switch>
+            </Grid>
+        </Box>
+    )
+}
+
+Account.getTemplateName = () => 'account'
+
+Account.propTypes = {
+    match: PropTypes.object
+}
+
+export default Account

package/app/pages/account/index.test.js

@@ -0,0 +1,188 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {Route, Switch} from 'react-router-dom'
+import {screen, waitFor, within} from '@testing-library/react'
+import {rest} from 'msw'
+import {
+    renderWithProviders,
+    createPathWithDefaults
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {
+    mockOrderHistory,
+    mockedGuestCustomer,
+    mockedRegisteredCustomer,
+    mockOrderProducts
+} from '@salesforce/retail-react-app/app/mocks/mock-data'
+import Account from '@salesforce/retail-react-app/app/pages/account/index'
+import Login from '@salesforce/retail-react-app/app/pages/login'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+
+const MockedComponent = () => {
+    return (
+        <Switch>
+            <Route
+                path={createPathWithDefaults('/account')}
+                render={(props) => <Account {...props} />}
+            />
+            <Route
+                path={createPathWithDefaults('/login')}
+                render={(props) => <Login {...props} />}
+            />
+        </Switch>
+    )
+}
+
+// Set up and clean up
+beforeEach(() => {
+    global.server.use(
+        rest.get('*/products', (req, res, ctx) => res(ctx.delay(0), ctx.json(mockOrderProducts))),
+        rest.get('*/customers/:customerId/orders', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.json(mockOrderHistory))
+        )
+    )
+
+    // Since we're testing some navigation logic, we are using a simple Router
+    // around our component. We need to initialize the default route/path here.
+    window.history.pushState({}, 'Account', createPathWithDefaults('/account'))
+})
+afterEach(() => {
+    jest.resetModules()
+    localStorage.clear()
+})
+
+const expectedBasePath = '/uk/en-GB'
+describe('Test redirects', function () {
+    beforeEach(() => {
+        global.server.use(
+            rest.get('*/customers/:customerId', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(200), ctx.json(mockedGuestCustomer))
+            })
+        )
+    })
+    test('Redirects to login page if the customer is not logged in', async () => {
+        const Component = () => {
+            return (
+                <Switch>
+                    <Route
+                        path={createPathWithDefaults('/account')}
+                        render={(props) => <Account {...props} />}
+                    />
+                </Switch>
+            )
+        }
+        renderWithProviders(<Component />, {
+            wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app, isGuest: true}
+        })
+        await waitFor(() => expect(window.location.pathname).toBe(`${expectedBasePath}/login`))
+    })
+})
+
+test('Provides navigation for subpages', async () => {
+    global.server.use(
+        rest.get('*/products', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.json(mockOrderProducts))
+        }),
+        rest.get('*/customers/:customerId/orders', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.json(mockOrderHistory))
+        })
+    )
+    const {user} = renderWithProviders(<MockedComponent />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
+    expect(await screen.findByTestId('account-page')).toBeInTheDocument()
+
+    const nav = within(screen.getByTestId('account-detail-nav'))
+    await user.click(nav.getByText('Addresses'))
+    await waitFor(() =>
+        expect(window.location.pathname).toBe(`${expectedBasePath}/account/addresses`)
+    )
+    await user.click(nav.getByText('Order History'))
+    await waitFor(() => expect(window.location.pathname).toBe(`${expectedBasePath}/account/orders`))
+})
+
+describe('Render and logs out', function () {
+    test('Renders account detail page by default for logged-in customer, and can log out', async () => {
+        const {user} = renderWithProviders(<MockedComponent />)
+
+        // Render user profile page
+        await waitFor(() => {
+            expect(window.location.pathname).toBe(`${expectedBasePath}/account`)
+            expect(screen.getByTestId('account-detail-page')).toBeInTheDocument()
+            expect(screen.getByText('Testing Tester')).toBeInTheDocument()
+            expect(screen.getByText('customer@test.com')).toBeInTheDocument()
+            expect(screen.getByText('(727) 555-1234')).toBeInTheDocument()
+        })
+
+        await user.click(screen.getAllByText(/Log Out/)[0])
+        await waitFor(() => {
+            expect(screen.getByTestId('login-page')).toBeInTheDocument()
+        })
+    })
+})
+
+describe('updating profile', function () {
+    beforeEach(() => {
+        global.server.use(
+            rest.patch('*/customers/:customerId', (req, res, ctx) => {
+                return res(
+                    ctx.json({
+                        ...mockedRegisteredCustomer,
+                        firstName: 'Geordi',
+                        phoneHome: '(567) 123-5585'
+                    })
+                )
+            })
+        )
+    })
+    test('Allows customer to edit profile details', async () => {
+        const {user} = renderWithProviders(<MockedComponent />)
+        expect(await screen.findByTestId('account-page')).toBeInTheDocument()
+        expect(await screen.findByTestId('account-detail-page')).toBeInTheDocument()
+        await waitFor(() => {
+            const firstName = screen.getByText(/Testing Tester/i)
+            expect(firstName).toBeInTheDocument()
+        })
+        const el = within(screen.getByTestId('sf-toggle-card-my-profile'))
+
+        await user.click(el.getByText(/edit/i))
+
+        await user.type(el.getByLabelText(/first name/i), 'Geordi')
+        await user.type(el.getByLabelText(/Phone Number/i), '5671235585')
+
+        await user.click(el.getByText(/save/i))
+
+        expect(await screen.findByText('Geordi Tester')).toBeInTheDocument()
+        expect(await screen.findByText('(567) 123-5585')).toBeInTheDocument()
+    })
+})
+
+describe('updating password', function () {
+    beforeEach(() => {
+        global.server.use(
+            rest.put('*/password', (req, res, ctx) => {
+                return res(ctx.json())
+            })
+        )
+    })
+    test('Allows customer to update password', async () => {
+        const {user} = renderWithProviders(<MockedComponent />)
+        expect(await screen.findByTestId('account-page')).toBeInTheDocument()
+        expect(await screen.findByTestId('account-detail-page')).toBeInTheDocument()
+
+        const el = within(screen.getByTestId('sf-toggle-card-password'))
+        await user.click(el.getByText(/edit/i))
+        await user.type(el.getByLabelText(/current password/i), 'Password!12345')
+        await user.type(el.getByLabelText(/new password/i), 'Password!98765')
+        await user.click(el.getByText(/Forgot password/i))
+
+        expect(await screen.findByTestId('account-detail-page')).toBeInTheDocument()
+
+        await user.click(el.getByText(/save/i))
+        expect(await screen.findByText('••••••••')).toBeInTheDocument()
+    })
+})