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

package/app/components/forms/useResetPasswordFields.jsx

@@ -0,0 +1,40 @@
+/*
+ * 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 {useIntl} from 'react-intl'
+
+export default function useResetPasswordFields({
+    form: {
+        control,
+        formState: {errors}
+    },
+    prefix = ''
+}) {
+    const {formatMessage} = useIntl()
+
+    const fields = {
+        email: {
+            name: `${prefix}email`,
+            label: formatMessage({
+                defaultMessage: 'Email',
+                id: 'use_reset_password_fields.label.email'
+            }),
+            placeholder: 'you@email.com',
+            defaultValue: '',
+            type: 'email',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter a valid email address.',
+                    id: 'use_reset_password_fields.error.required_email'
+                })
+            },
+            error: errors[`${prefix}email`],
+            control
+        }
+    }
+
+    return fields
+}

package/app/components/forms/useUpdatePasswordFields.jsx

@@ -0,0 +1,89 @@
+/*
+ * 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 {useIntl} from 'react-intl'
+import {validatePassword} from '@salesforce/retail-react-app/app/utils/password-utils'
+
+export default function useUpdatePasswordFields({
+    form: {
+        control,
+        formState: {errors}
+    },
+    prefix = ''
+}) {
+    const {formatMessage} = useIntl()
+
+    const fields = {
+        currentPassword: {
+            name: `${prefix}currentPassword`,
+            label: formatMessage({
+                defaultMessage: 'Current Password',
+                id: 'use_update_password_fields.label.current_password'
+            }),
+            defaultValue: '',
+            type: 'password',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please enter your password.',
+                    id: 'use_update_password_fields.error.required_password'
+                })
+            },
+            error: errors[`${prefix}currentPassword`],
+            control
+        },
+        password: {
+            name: `${prefix}password`,
+            label: formatMessage({
+                defaultMessage: 'New Password',
+                id: 'use_update_password_fields.label.new_password'
+            }),
+            type: 'password',
+            defaultValue: '',
+            rules: {
+                required: formatMessage({
+                    defaultMessage: 'Please provide a new password.',
+                    id: 'use_update_password_fields.error.required_new_password'
+                }),
+                validate: {
+                    hasMinChars: (val) =>
+                        validatePassword(val).hasMinChars ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least 8 characters.',
+                            id: 'use_update_password_fields.error.minimum_characters'
+                        }),
+                    hasUppercase: (val) =>
+                        validatePassword(val).hasUppercase ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least one uppercase letter.',
+                            id: 'use_update_password_fields.error.uppercase_letter'
+                        }),
+                    hasLowercase: (val) =>
+                        validatePassword(val).hasLowercase ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least one lowercase letter.',
+                            id: 'use_update_password_fields.error.lowercase_letter'
+                        }),
+                    hasNumber: (val) =>
+                        validatePassword(val).hasNumber ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least one number.',
+                            id: 'use_update_password_fields.error.contain_number'
+                        }),
+                    hasSpecialChar: (val) =>
+                        validatePassword(val).hasSpecialChar ||
+                        formatMessage({
+                            defaultMessage: 'Password must contain at least one special character.',
+                            id: 'use_update_password_fields.error.special_character'
+                        })
+                }
+            },
+            error: errors[`${prefix}password`],
+            control
+        }
+    }
+
+    return fields
+}

package/app/components/header/index.jsx

@@ -0,0 +1,290 @@
+/*
+ * 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, {useRef, useState} from 'react'
+import PropTypes from 'prop-types'
+import {useIntl} from 'react-intl'
+import {
+    useMultiStyleConfig,
+    Box,
+    Flex,
+    IconButton,
+    Badge,
+    Button,
+    Popover,
+    PopoverHeader,
+    PopoverTrigger,
+    PopoverContent,
+    PopoverBody,
+    PopoverFooter,
+    PopoverArrow,
+    Stack,
+    Text,
+    Divider,
+    useDisclosure,
+    useMediaQuery
+} from '@chakra-ui/react'
+import {AuthHelpers, useAuthHelper, useCustomerType} from '@salesforce/commerce-sdk-react'
+
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+
+import Link from '@salesforce/retail-react-app/app/components/link'
+import Search from '@salesforce/retail-react-app/app/components/search'
+import withRegistration from '@salesforce/retail-react-app/app/components/with-registration'
+import {
+    AccountIcon,
+    BrandLogo,
+    BasketIcon,
+    HamburgerIcon,
+    ChevronDownIcon,
+    HeartIcon,
+    SignoutIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+
+import {navLinks, messages} 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 {isHydrated, noop} from '@salesforce/retail-react-app/app/utils/utils'
+
+const ENTER_KEY = 'Enter'
+
+const IconButtonWithRegistration = withRegistration(IconButton)
+/**
+ * The header is the main source for accessing
+ * navigation, search, basket, and other
+ * important information and actions. It persists
+ * on the top of your application and will
+ * respond to changes in device size.
+ *
+ * To customize the styles, update the themes
+ * in theme/components/project/header.js
+ * @param  props
+ * @param   {func} props.onMenuClick click event handler for menu button
+ * @param   {func} props.onLogoClick click event handler for menu button
+ * @param   {object} props.searchInputRef reference of the search input
+ * @param   {func} props.onMyAccountClick click event handler for my account button
+ * @param   {func} props.onMyCartClick click event handler for my cart button
+ * @return  {React.ReactElement} - Header component
+ */
+const Header = ({
+    children,
+    onMenuClick = noop,
+    onMyAccountClick = noop,
+    onLogoClick = noop,
+    onMyCartClick = noop,
+    onWishlistClick = noop,
+    ...props
+}) => {
+    const intl = useIntl()
+    const {
+        derivedData: {totalItems},
+        data: basket
+    } = useCurrentBasket()
+    const {isRegistered} = useCustomerType()
+    const logout = useAuthHelper(AuthHelpers.Logout)
+    const navigate = useNavigation()
+    const {isOpen, onClose, onOpen} = useDisclosure()
+    const [isDesktop] = useMediaQuery('(min-width: 992px)')
+
+    const [showLoading, setShowLoading] = useState(false)
+    // tracking if users enter the popover Content,
+    // so we can decide whether to close the menu when users leave account icons
+    const hasEnterPopoverContent = useRef()
+
+    const styles = useMultiStyleConfig('Header')
+
+    const onSignoutClick = async () => {
+        setShowLoading(true)
+        await logout.mutateAsync()
+        navigate('/login')
+        setShowLoading(false)
+    }
+
+    const keyMap = {
+        Escape: () => onClose(),
+        Enter: () => onOpen()
+    }
+
+    const handleIconsMouseLeave = () => {
+        // don't close the menu if users enter the popover content
+        setTimeout(() => {
+            if (!hasEnterPopoverContent.current) onClose()
+        }, 100)
+    }
+    return (
+        <Box {...styles.container} {...props}>
+            <Box {...styles.content}>
+                {showLoading && <LoadingSpinner wrapperStyles={{height: '100vh'}} />}
+                <Flex wrap="wrap" alignItems={['baseline', 'baseline', 'baseline', 'center']}>
+                    <IconButton
+                        aria-label={intl.formatMessage({
+                            id: 'header.button.assistive_msg.menu',
+                            defaultMessage: 'Menu'
+                        })}
+                        icon={<HamburgerIcon />}
+                        variant="unstyled"
+                        display={{lg: 'none'}}
+                        {...styles.icons}
+                        onClick={onMenuClick}
+                    />
+                    <IconButton
+                        aria-label={intl.formatMessage({
+                            id: 'header.button.assistive_msg.logo',
+                            defaultMessage: 'Logo'
+                        })}
+                        icon={<BrandLogo {...styles.logo} />}
+                        {...styles.icons}
+                        variant="unstyled"
+                        onClick={onLogoClick}
+                    />
+                    <Box {...styles.bodyContainer}>{children}</Box>
+                    <Box {...styles.searchContainer}>
+                        <Search
+                            placeholder={intl.formatMessage({
+                                id: 'header.field.placeholder.search_for_products',
+                                defaultMessage: 'Search for products...'
+                            })}
+                            {...styles.search}
+                        />
+                    </Box>
+                    <AccountIcon
+                        {...styles.accountIcon}
+                        tabIndex={0}
+                        onMouseOver={isDesktop ? onOpen : noop}
+                        onKeyDown={(e) => {
+                            e.key === ENTER_KEY ? onMyAccountClick() : noop
+                        }}
+                        onClick={onMyAccountClick}
+                        aria-label={intl.formatMessage({
+                            id: 'header.button.assistive_msg.my_account',
+                            defaultMessage: 'My account'
+                        })}
+                    />
+
+                    {isRegistered && isHydrated() && (
+                        <Popover
+                            isLazy
+                            arrowSize={15}
+                            isOpen={isOpen}
+                            placement="bottom-end"
+                            onClose={onClose}
+                            onOpen={onOpen}
+                        >
+                            <PopoverTrigger>
+                                <ChevronDownIcon
+                                    aria-label="My account trigger"
+                                    onMouseLeave={handleIconsMouseLeave}
+                                    onKeyDown={(e) => {
+                                        keyMap[e.key]?.(e)
+                                    }}
+                                    {...styles.arrowDown}
+                                    onMouseOver={onOpen}
+                                    tabIndex={0}
+                                />
+                            </PopoverTrigger>
+
+                            <PopoverContent
+                                {...styles.popoverContent}
+                                onMouseLeave={() => {
+                                    hasEnterPopoverContent.current = false
+                                    onClose()
+                                }}
+                                onMouseOver={() => {
+                                    hasEnterPopoverContent.current = true
+                                }}
+                            >
+                                <PopoverArrow />
+                                <PopoverHeader>
+                                    <Text>
+                                        {intl.formatMessage({
+                                            defaultMessage: 'My Account',
+                                            id: 'header.popover.title.my_account'
+                                        })}
+                                    </Text>
+                                </PopoverHeader>
+                                <PopoverBody>
+                                    <Stack spacing={0} as="nav" data-testid="account-detail-nav">
+                                        {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} />}
+                                                >
+                                                    {intl.formatMessage(messages[link.name])}
+                                                </Button>
+                                            )
+                                        })}
+                                    </Stack>
+                                </PopoverBody>
+                                <PopoverFooter onClick={onSignoutClick} cursor="pointer">
+                                    <Divider colorScheme="gray" />
+                                    <Button variant="unstyled" {...styles.signout}>
+                                        <Flex>
+                                            <SignoutIcon boxSize={5} {...styles.signoutIcon} />
+                                            <Text as="span" {...styles.signoutText}>
+                                                {intl.formatMessage({
+                                                    defaultMessage: 'Log out',
+                                                    id: 'header.popover.action.log_out'
+                                                })}
+                                            </Text>
+                                        </Flex>
+                                    </Button>
+                                </PopoverFooter>
+                            </PopoverContent>
+                        </Popover>
+                    )}
+                    <IconButtonWithRegistration
+                        aria-label={intl.formatMessage({
+                            defaultMessage: 'Wishlist',
+                            id: 'header.button.assistive_msg.wishlist'
+                        })}
+                        icon={<HeartIcon />}
+                        variant="unstyled"
+                        {...styles.icons}
+                        onClick={onWishlistClick}
+                    />
+                    <IconButton
+                        aria-label={intl.formatMessage({
+                            id: 'header.button.assistive_msg.my_cart',
+                            defaultMessage: 'My cart'
+                        })}
+                        icon={
+                            <>
+                                <BasketIcon />
+                                {basket && totalItems > 0 && (
+                                    <Badge variant="notification">{totalItems}</Badge>
+                                )}
+                            </>
+                        }
+                        variant="unstyled"
+                        {...styles.icons}
+                        onClick={onMyCartClick}
+                    />
+                </Flex>
+            </Box>
+        </Box>
+    )
+}
+
+Header.propTypes = {
+    children: PropTypes.node,
+    onMenuClick: PropTypes.func,
+    onLogoClick: PropTypes.func,
+    onMyAccountClick: PropTypes.func,
+    onWishlistClick: PropTypes.func,
+    onMyCartClick: PropTypes.func,
+    searchInputRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({current: PropTypes.elementType})
+    ])
+}
+
+export default Header

package/app/components/header/index.test.js

@@ -0,0 +1,217 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import userEvent from '@testing-library/user-event'
+import {fireEvent, screen, waitFor, act} from '@testing-library/react'
+import Header from '@salesforce/retail-react-app/app/components/header/index'
+import {
+    renderWithProviders,
+    createPathWithDefaults
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {rest} from 'msw'
+import {createMemoryHistory} from 'history'
+import {
+    mockCustomerBaskets,
+    mockedRegisteredCustomer
+} from '@salesforce/retail-react-app/app/mocks/mock-data'
+
+jest.mock('@chakra-ui/react', () => {
+    const originalModule = jest.requireActual('@chakra-ui/react')
+    return {
+        ...originalModule,
+        useMediaQuery: jest.fn().mockReturnValue([true])
+    }
+})
+const MockedComponent = ({history}) => {
+    const onAccountClick = () => {
+        history.push(createPathWithDefaults('/account'))
+    }
+    const onWishlistClick = () => {
+        history.push(createPathWithDefaults('/account/wishlist'))
+    }
+    return (
+        <div>
+            <Header onMyAccountClick={onAccountClick} onWishlistClick={onWishlistClick} />
+        </div>
+    )
+}
+MockedComponent.propTypes = {
+    history: PropTypes.object
+}
+
+// Set up and clean up
+beforeEach(() => {
+    jest.resetModules()
+    global.server.use(
+        rest.get('*/customers/:customerId/baskets', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockCustomerBaskets))
+        })
+    )
+})
+afterEach(() => {
+    localStorage.clear()
+})
+test('renders Header', async () => {
+    renderWithProviders(<Header />)
+
+    await waitFor(() => {
+        const menu = document.querySelector('button[aria-label="Menu"]')
+        const logo = document.querySelector('button[aria-label="Logo"]')
+        const account = document.querySelector('svg[aria-label="My account"]')
+        const cart = document.querySelector('button[aria-label="My cart"]')
+        const wishlist = document.querySelector('button[aria-label="Wishlist"]')
+        const searchInput = document.querySelector('input[type="search"]')
+        expect(menu).toBeInTheDocument()
+        expect(logo).toBeInTheDocument()
+        expect(account).toBeInTheDocument()
+        expect(cart).toBeInTheDocument()
+        expect(wishlist).toBeInTheDocument()
+        expect(searchInput).toBeInTheDocument()
+    })
+})
+
+test('renders Header with event handlers', async () => {
+    const onMenuClick = jest.fn()
+    const onLogoClick = jest.fn()
+    const onMyAccountClick = jest.fn()
+    const onMyCartClick = jest.fn()
+    renderWithProviders(
+        <Header
+            onMenuClick={onMenuClick}
+            onLogoClick={onLogoClick}
+            onMyAccountClick={onMyAccountClick}
+            onMyCartClick={onMyCartClick}
+        />
+    )
+    await waitFor(() => {
+        const menu = document.querySelector('button[aria-label="Menu"]')
+        const logo = document.querySelector('button[aria-label="Logo"]')
+        const account = document.querySelector('svg[aria-label="My account"]')
+        const cart = document.querySelector('button[aria-label="My cart"]')
+        expect(menu).toBeInTheDocument()
+        fireEvent.click(menu)
+        expect(onMenuClick).toHaveBeenCalledTimes(1)
+        fireEvent.click(logo)
+        expect(onLogoClick).toHaveBeenCalledTimes(1)
+        fireEvent.click(account)
+        expect(onMyAccountClick).toHaveBeenCalledTimes(1)
+        fireEvent.click(cart)
+        expect(onMyCartClick).toHaveBeenCalledTimes(1)
+    })
+})
+
+/**
+ * The badge component on the cart that shows the number of items in the cart
+ * should only be displayed when there is a valid cart loaded.
+ */
+const testBaskets = [null, undefined, {total: 0}]
+
+test.each(testBaskets)(
+    `does not render cart badge when basket value is not defined`,
+    async (initialBasket) => {
+        global.server.use(
+            rest.get('*/customers/:customerId/baskets', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(200), ctx.json(initialBasket))
+            })
+        )
+        renderWithProviders(<Header />)
+
+        await waitFor(() => {
+            // Look for badge.
+            const badge = document.querySelector('button[aria-label="My cart"] .chakra-badge')
+            expect(badge).not.toBeInTheDocument()
+        })
+    }
+)
+
+test('renders cart badge when basket is loaded', async () => {
+    renderWithProviders(<Header />)
+
+    await waitFor(() => {
+        // Look for badge.
+        const badge = document.querySelector('button[aria-label="My cart"] .chakra-badge')
+        expect(badge).toBeInTheDocument()
+    })
+})
+
+test('route to account page when an authenticated users click on account icon', async () => {
+    const history = createMemoryHistory()
+    // mock push function
+    history.push = jest.fn()
+    renderWithProviders(<MockedComponent history={history} />)
+
+    await waitFor(() => {
+        // Look for account icon
+        const accountTrigger = document.querySelector('svg[aria-label="My account trigger"]')
+        expect(accountTrigger).toBeInTheDocument()
+    })
+    const accountIcon = document.querySelector('svg[aria-label="My account"]')
+    fireEvent.click(accountIcon)
+    await waitFor(() => {
+        expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account'))
+    })
+
+    fireEvent.keyDown(accountIcon, {key: 'Enter', code: 'Enter'})
+    await waitFor(() => {
+        expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account'))
+    })
+})
+
+test('route to wishlist page when an authenticated users click on wishlist icon', async () => {
+    const user = userEvent.setup()
+    const history = createMemoryHistory()
+    // mock push function
+    history.push = jest.fn()
+
+    renderWithProviders(<MockedComponent history={history} />)
+
+    await waitFor(() => {
+        // Look for account icon
+        const accountTrigger = document.querySelector('svg[aria-label="My account trigger"]')
+        expect(accountTrigger).toBeInTheDocument()
+    })
+    const wishlistIcon = screen.getByRole('button', {name: /wishlist/i})
+    await user.click(wishlistIcon)
+    await waitFor(() => {
+        expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account/wishlist'))
+    })
+})
+
+test('shows dropdown menu when an authenticated users hover on the account icon', async () => {
+    const user = userEvent.setup()
+    global.server.use(
+        rest.post('*/customers/action/login', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
+        })
+    )
+    const history = createMemoryHistory()
+    // mock push function
+    history.push = jest.fn()
+    await act(async () => {
+        renderWithProviders(<MockedComponent history={history} />)
+    })
+
+    await waitFor(() => {
+        // Look for account icon
+        const accountTrigger = document.querySelector('svg[aria-label="My account trigger"]')
+        expect(accountTrigger).toBeInTheDocument()
+    })
+    const accountIcon = document.querySelector('svg[aria-label="My account"]')
+    fireEvent.click(accountIcon)
+    await waitFor(() => {
+        expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account'))
+    })
+    await user.hover(accountIcon)
+
+    await waitFor(() => {
+        expect(screen.getByText(/account details/i)).toBeInTheDocument()
+        expect(screen.getByText(/addresses/i)).toBeInTheDocument()
+        expect(screen.getByText(/wishlist/i)).toBeInTheDocument()
+        expect(screen.getByText(/order history/i)).toBeInTheDocument()
+    })
+})