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

package/app/components/login/index.jsx

@@ -0,0 +1,96 @@
+/*
+ * 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, {Fragment} from 'react'
+import PropTypes from 'prop-types'
+import {FormattedMessage} from 'react-intl'
+import {Alert, Box, Button, Stack, Text} from '@chakra-ui/react'
+import {AlertIcon, BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
+import LoginFields from '@salesforce/retail-react-app/app/components/forms/login-fields'
+import {noop} from '@salesforce/retail-react-app/app/utils/utils'
+
+const LoginForm = ({submitForm, clickForgotPassword = noop, clickCreateAccount = noop, form}) => {
+    return (
+        <Fragment>
+            <Stack justify="center" align="center" spacing={8} marginBottom={8}>
+                <BrandLogo width="60px" height="auto" />
+                <Text align="center" fontSize="xl" fontWeight="semibold">
+                    <FormattedMessage
+                        defaultMessage="Welcome Back"
+                        id="login_form.message.welcome_back"
+                    />
+                </Text>
+            </Stack>
+            <form
+                id="login-form"
+                onSubmit={form.handleSubmit(submitForm)}
+                data-testid="sf-auth-modal-form"
+            >
+                <Stack spacing={8} paddingLeft={4} paddingRight={4}>
+                    {form.formState.errors?.global && (
+                        <Alert status="error">
+                            <AlertIcon color="red.500" boxSize={4} />
+                            <Text fontSize="sm" ml={3}>
+                                {form.formState.errors.global.message}
+                            </Text>
+                        </Alert>
+                    )}
+                    <Stack>
+                        <LoginFields form={form} />
+
+                        <Box>
+                            <Button variant="link" size="sm" onClick={clickForgotPassword}>
+                                <FormattedMessage
+                                    defaultMessage="Forgot password?"
+                                    id="login_form.link.forgot_password"
+                                />
+                            </Button>
+                        </Box>
+                    </Stack>
+                    <Stack spacing={6}>
+                        <Button
+                            type="submit"
+                            onClick={() => {
+                                form.clearErrors('global')
+                            }}
+                            isLoading={form.formState.isSubmitting}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Sign In"
+                                id="login_form.button.sign_in"
+                            />
+                        </Button>
+
+                        <Stack direction="row" spacing={1} justify="center">
+                            <Text fontSize="sm">
+                                <FormattedMessage
+                                    defaultMessage="Don't have an account?"
+                                    id="login_form.message.dont_have_account"
+                                />
+                            </Text>
+                            <Button variant="link" size="sm" onClick={clickCreateAccount}>
+                                <FormattedMessage
+                                    defaultMessage="Create account"
+                                    id="login_form.action.create_account"
+                                />
+                            </Button>
+                        </Stack>
+                    </Stack>
+                </Stack>
+            </form>
+        </Fragment>
+    )
+}
+
+LoginForm.propTypes = {
+    submitForm: PropTypes.func,
+    clickForgotPassword: PropTypes.func,
+    clickCreateAccount: PropTypes.func,
+    form: PropTypes.object
+}
+
+export default LoginForm

package/app/components/nested-accordion/index.jsx

@@ -0,0 +1,185 @@
+/*
+ * 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'
+
+// Components
+import {
+    Accordion,
+    AccordionItem,
+    AccordionButton,
+    AccordionPanel,
+    Text,
+
+    // Hooks
+    useStyleConfig
+} from '@chakra-ui/react'
+import Link from '@salesforce/retail-react-app/app/components/link'
+// Icons
+import {ChevronDownIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+/**
+ * The nested accordion allows you to create, as the name suggest, a nests
+ * accordion given a hierarchical data structure. Each nests accordion will
+ * be indented to further enhance the hierary view.
+ */
+const NestedAccordion = (props) => {
+    const styles = useStyleConfig('NestedAccordion')
+    const {
+        item,
+        initialDepth = 0,
+        itemsFilter = () => true,
+        itemsAfter,
+        itemsBefore,
+        itemsKey = 'items',
+        fontWeights = [],
+        fontSizes = [],
+        urlBuilder = (item) => `/${item.id}`,
+        ...rest
+    } = props
+
+    const depth = initialDepth
+    const items = item[itemsKey] || []
+
+    // Handle filters in the folr of a function or a object key string.
+    const filter = (item) =>
+        typeof itemsFilter === 'function' ? itemsFilter(item) : !!item[itemsFilter]
+
+    return (
+        <Accordion className="sf-nested-accordion" {...rest}>
+            {/* Optional accordion items before others in items list.  */}
+            {typeof itemsBefore === 'function' ? itemsBefore({item, depth}) : itemsBefore}
+
+            {items.filter(filter).map((item) => {
+                const {id, name} = item
+                const items = item[itemsKey]
+
+                return (
+                    <AccordionItem key={id} border="none">
+                        {({isExpanded}) => (
+                            <>
+                                {/* Heading */}
+                                <h2>
+                                    {/* Show item as a leaf node if it has no visible child items. */}
+                                    {items && items.filter(filter).length > 0 ? (
+                                        <AccordionButton {...styles.internalButton}>
+                                            {/* Replace default expanded/collapsed icons. */}
+                                            {isExpanded ? (
+                                                <ChevronDownIcon {...styles.internalButtonIcon} />
+                                            ) : (
+                                                <ChevronRightIcon {...styles.internalButtonIcon} />
+                                            )}
+
+                                            <Text
+                                                fontSize={fontSizes[depth]}
+                                                fontWeight={fontWeights[depth]}
+                                            >
+                                                {name}
+                                            </Text>
+                                        </AccordionButton>
+                                    ) : (
+                                        <AccordionButton
+                                            {...styles.leafButton}
+                                            as={Link}
+                                            to={urlBuilder(item)}
+                                        >
+                                            <Text
+                                                fontSize={fontSizes[depth]}
+                                                fontWeight={fontWeights[depth]}
+                                            >
+                                                {name}
+                                            </Text>
+                                        </AccordionButton>
+                                    )}
+                                </h2>
+
+                                {/* Child Items */}
+                                {items && (
+                                    <AccordionPanel {...styles.panel}>
+                                        <NestedAccordion
+                                            {...styles.nestedAccordion}
+                                            {...props}
+                                            item={item}
+                                            initialDepth={depth + 1}
+                                        />
+                                    </AccordionPanel>
+                                )}
+                            </>
+                        )}
+                    </AccordionItem>
+                )
+            })}
+
+            {/* Optional accordion items after others in items list.  */}
+            {typeof itemsAfter === 'function' ? itemsAfter({item, depth}) : itemsAfter}
+        </Accordion>
+    )
+}
+
+NestedAccordion.displayName = 'NestedAccordion'
+
+NestedAccordion.propTypes = {
+    /**
+     * A POJO consistening of an id, name, and items array of object with
+     * similarly specified properties.
+     */
+    item: PropTypes.object.isRequired,
+    /**
+     * An array of `AccordionItem` components that will be displayed after all
+     * of the child items. Alternatively you can pass a function that will recieve
+     * the current item and it's depth, your should return an `AccordionItem` or
+     * array of `AccordionItem`'s.
+     */
+    itemsAfter: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+    /**
+     * An array of `AccordionItem` components that will be displayed before all
+     * of the child items. Alternatively you can pass a function that will recieve
+     * the current item and it's depth, your should return an `AccordionItem` or
+     * array of `AccordionItem`'s.
+     */
+    itemsBefore: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+    /**
+     * This is an internally used property used to pass the updated depth of the
+     * child accordion. This is used to access specfic styl data for accodions
+     * based on their depth.
+     */
+    initialDepth: PropTypes.number,
+    /**
+     * By default child items are keyed at `items` but if your data differs you
+     * can specify a custom key name for chile items. (e.g. children)
+     */
+    itemsKey: PropTypes.string,
+    /**
+     * Programatically filter out items that you do not want to show. You can do this by
+     * supplying a string that will be used to access an items value, the the value is truthy
+     * the item will be displayed. Otherwise you can pass a function, this function will be passed
+     * the item to be filtered, its return is expected to be true or false.
+     */
+    itemsFilter: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /**
+     * An array of font size strings, the position in the array will
+     * indicate at what depth that size is applied.
+     * TODO: Think about making this optionally a string value to make it behave like
+     * chakra-ui responsive properties.
+     */
+    fontSizes: PropTypes.array,
+    /**
+     * An array of font weight strings, the position in the array will
+     * indicate at what depth that weight is applied.
+     * TODO: Think about making this optionally a string value to make it behave like
+     * chakra-ui responsive properties.
+     */
+    fontWeights: PropTypes.array,
+    /**
+     * This function builds the urls for leaf items. It accepts
+     * the current item, and returns a string.
+     */
+    urlBuilder: PropTypes.func
+}
+
+export default NestedAccordion

package/app/components/nested-accordion/index.test.js

@@ -0,0 +1,98 @@
+/*
+ * 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 NestedAccordion from '@salesforce/retail-react-app/app/components/nested-accordion/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+const mockItem = {
+    id: 't1',
+    name: 'Test One',
+    items: [
+        {
+            id: 't1-1',
+            name: 'Test One One'
+        },
+        {
+            id: 't1-2',
+            name: 'Test One Two',
+            items: [
+                {
+                    id: 't1-2-1',
+                    name: 'Test One Two One'
+                },
+                {
+                    id: 't1-2-2',
+                    name: 'Test One Two Two'
+                }
+            ]
+        }
+    ]
+}
+test('Renders NestedAccordion', () => {
+    renderWithProviders(<NestedAccordion item={mockItem} />)
+
+    const accordions = document.querySelectorAll('.sf-nested-accordion')
+
+    expect(accordions).toHaveLength(2)
+})
+
+test('Renders NestedAccordion with items elements before and after', () => {
+    renderWithProviders(
+        <NestedAccordion
+            item={mockItem}
+            itemsBefore={[
+                <div className="itemsBefore" key="before">
+                    before
+                </div>
+            ]}
+            itemsAfter={[
+                <div className="itemsAfter" key="after">
+                    before
+                </div>
+            ]}
+        />
+    )
+
+    const itemBefore = document.querySelector('.itemsBefore')
+    const itemAfter = document.querySelector('.itemsAfter')
+
+    expect(itemBefore).toBeInTheDocument()
+    expect(itemAfter).toBeInTheDocument()
+})
+
+test('Renders NestedAccordion with items functions before and after', () => {
+    const onItemsBefore = jest.fn(() => [
+        <div className="itemsBefore" key="before">
+            before
+        </div>
+    ])
+    const onItemsAfter = jest.fn(() => [
+        <div className="itemsAfter" key="after">
+            after
+        </div>
+    ])
+
+    renderWithProviders(
+        <NestedAccordion item={mockItem} itemsBefore={onItemsBefore} itemsAfter={onItemsAfter} />
+    )
+
+    const itemBefore = document.querySelector('.itemsBefore')
+    const itemAfter = document.querySelector('.itemsAfter')
+
+    expect(onItemsBefore).toHaveBeenCalled()
+    expect(onItemsAfter).toHaveBeenCalled()
+    expect(itemBefore).toBeInTheDocument()
+    expect(itemAfter).toBeInTheDocument()
+})
+
+test('Renders NestedAccordion with custom url builder', () => {
+    const mockPath = '/mock-path'
+    renderWithProviders(<NestedAccordion item={mockItem} urlBuilder={() => mockPath} />)
+
+    const firstLeafLink = document.querySelector('.sf-nested-accordion a')
+    expect(firstLeafLink.href.endsWith(mockPath)).toBe(true)
+})

package/app/components/offline-banner/index.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 React from 'react'
+import {useIntl} from 'react-intl'
+
+// Components
+import {
+    Alert,
+    Text,
+
+    // Hooks
+    useStyleConfig
+} from '@chakra-ui/react'
+
+// Icons
+import {AlertIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+const OfflineBanner = () => {
+    const intl = useIntl()
+    const style = useStyleConfig('OfflineBanner')
+
+    return (
+        <Alert status="info" {...style.container}>
+            <AlertIcon {...style.icon} />
+            <Text {...style.message}>
+                {intl.formatMessage({
+                    id: 'offline_banner.description.browsing_offline_mode',
+                    defaultMessage: "You're currently browsing in offline mode"
+                })}
+            </Text>
+        </Alert>
+    )
+}
+
+export default OfflineBanner

package/app/components/offline-banner/index.test.js

@@ -0,0 +1,15 @@
+/*
+ * 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 {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import OfflineBanner from '@salesforce/retail-react-app/app/components/offline-banner/index'
+import {screen} from '@testing-library/react'
+
+test('OfflineBanner component is rendered appropriately', () => {
+    renderWithProviders(<OfflineBanner />)
+    expect(screen.getByText("You're currently browsing in offline mode")).toBeInTheDocument()
+})

package/app/components/offline-boundary/index.jsx

@@ -0,0 +1,104 @@
+/*
+ * 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 {withRouter} from 'react-router-dom'
+import {Button} from '@chakra-ui/react'
+import {AlertIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+// import Button from '@salesforce/pwa-kit-react-sdk/components/button'
+// import Icon from '@salesforce/pwa-kit-react-sdk/components/icon'
+
+/**
+ * OfflineBoundary is a React Error boundary that catches errors thrown when
+ * dynamically loading pages and renders a fallback.
+ */
+class OfflineBoundary extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            chunkLoadError: false
+        }
+    }
+
+    componentDidCatch(e) {
+        // Only catch errors loading components with @loadable/components. Everything
+        // else should bubble up the component tree to the built-in root error boundary.
+        if (e.name !== 'ChunkLoadError') {
+            throw e
+        }
+    }
+
+    static getDerivedStateFromError() {
+        return {chunkLoadError: true}
+    }
+
+    componentDidUpdate(previousProps) {
+        const {location: previousLocation, isOnline: wasOnline} = previousProps
+        const {location, isOnline} = this.props
+
+        const cameOnline = !wasOnline && isOnline
+
+        const locationChanged = ['pathname', 'search'].some(
+            (k) => (previousLocation || {})[k] !== (location || {})[k]
+        )
+
+        const shouldClear = cameOnline || locationChanged
+
+        if (shouldClear) {
+            this.clearError()
+        }
+    }
+
+    clearError() {
+        // Use an updater in order to only re-render if the state needs to change
+        this.setState((prevState) => {
+            return prevState.chunkLoadError ? {chunkLoadError: false} : null
+        })
+    }
+
+    render() {
+        const {children} = this.props
+        const {chunkLoadError} = this.state
+
+        return (
+            <React.Fragment>
+                {chunkLoadError ? (
+                    <div className="c-offline-boundary u-direction-column u-text-align-center u-padding-top u-padding-bottom">
+                        <AlertIcon />
+
+                        <h1 className="u-margin-bottom-md u-text-family">
+                            You are currently offline
+                        </h1>
+
+                        <p className="u-margin-bottom-lg">
+                            {"We couldn't load the next page on this connection. Please try again."}
+                        </p>
+
+                        <Button
+                            className="u-width-block-full pw--primary qa-retry-button"
+                            onClick={() => this.clearError()}
+                        >
+                            Retry Connection
+                        </Button>
+                    </div>
+                ) : (
+                    children
+                )}
+            </React.Fragment>
+        )
+    }
+}
+
+OfflineBoundary.propTypes = {
+    isOnline: PropTypes.bool.isRequired,
+    location: PropTypes.object,
+    children: PropTypes.node
+}
+
+export {OfflineBoundary as UnwrappedOfflineBoundary}
+export default withRouter(OfflineBoundary)

package/app/components/offline-boundary/index.test.js

@@ -0,0 +1,123 @@
+/*
+ * 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 {screen} from '@testing-library/react'
+// import userEvent from '@testing-library/user-event'
+
+import OfflineBoundary from '@salesforce/retail-react-app/app/components/offline-boundary/index'
+import {renderWithRouter} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+// class ChunkLoadError extends Error {
+//     constructor(...params) {
+//         // Pass remaining arguments (including vendor specific ones) to parent constructor
+//         super(...params)
+//         this.name = 'ChunkLoadError'
+//     }
+// }
+
+describe('The OfflineBoundary', () => {
+    beforeEach(() => {
+        // React's logging is noisey even when an Error Boundary catches. Silence
+        // the distracting logs during tests, since they are expected in any event.
+        jest.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+        console.error.mockRestore()
+    })
+
+    test('should render its children', () => {
+        renderWithRouter(
+            <OfflineBoundary isOnline={true}>
+                <div id="child">child</div>
+            </OfflineBoundary>
+        )
+
+        expect(screen.getByText(/child/i)).toBeInTheDocument()
+    })
+
+    // TODO: Fix flaky/broken test
+    // eslint-disable-next-line jest/no-commented-out-tests
+    // test('should render the error splash when a child throws a chunk load error', () => {
+    //     const ThrowingComponent = () => {
+    //         throw new ChunkLoadError()
+    //     }
+    //     renderWithRouter(
+    //         <OfflineBoundary isOnline={true}>
+    //             <div>
+    //                 <ThrowingComponent />
+    //                 <div id="child">child</div>
+    //             </div>
+    //         </OfflineBoundary>
+    //     )
+
+    //     expect(screen.getByRole('img', {name: /offline cloud/i})).toBeInTheDocument()
+    //     expect(
+    //         screen.getByRole('heading', {name: /you are currently offline/i})
+    //     ).toBeInTheDocument()
+    //     expect(screen.queryByText(/child/i)).not.toBeInTheDocument()
+    // })
+
+    // TODO: Fix flaky/broken test
+    // eslint-disable-next-line jest/no-commented-out-tests
+    // test('should re-throw errors that are not chunk load errors', () => {
+    //     const ThrowingComponent = () => {
+    //         throw new Error('Anything else')
+    //     }
+    //     expect(() => {
+    //         renderWithRouter(
+    //             <OfflineBoundary isOnline={true}>
+    //                 <div>
+    //                     <ThrowingComponent />
+    //                     <div id="child">child</div>
+    //                 </div>
+    //             </OfflineBoundary>
+    //         )
+    //     }).toThrow()
+    // })
+
+    // TODO: Fix flaky/broken test
+    // eslint-disable-next-line jest/no-commented-out-tests
+    // test('should attempt to reload the page when the user clicks retry', () => {
+    //     let firstRender = true
+    //     const ThrowingOnceComponent = () => {
+    //         if (firstRender) {
+    //             firstRender = false
+    //             throw new ChunkLoadError()
+    //         } else {
+    //             return <div id="child">child</div>
+    //         }
+    //     }
+    //     renderWithRouter(
+    //         <OfflineBoundary isOnline={true}>
+    //             <ThrowingOnceComponent />
+    //         </OfflineBoundary>
+    //     )
+
+    //     expect(screen.getByRole('img', {name: /offline cloud/i})).toBeInTheDocument()
+    //     expect(
+    //         screen.getByRole('heading', {name: /you are currently offline/i})
+    //     ).toBeInTheDocument()
+    //     expect(screen.queryByText(/child/i)).not.toBeInTheDocument()
+
+    //     userEvent.click(screen.getByRole('button', {name: /retry connection/i}))
+    //     expect(screen.getByText(/child/i)).toBeInTheDocument()
+    //     expect(screen.queryByRole('img', {name: /offline cloud/i})).not.toBeInTheDocument()
+    //     expect(
+    //         screen.queryByRole('heading', {name: /you are currently offline/i})
+    //     ).not.toBeInTheDocument()
+    // })
+
+    // TODO: Fix flaky/broken test
+    // eslint-disable-next-line jest/no-commented-out-tests
+    // test('should derive state from a chunk load error', () => {
+    //     const derived = UnwrappedOfflineBoundary.getDerivedStateFromError(
+    //         new ChunkLoadError('test')
+    //     )
+    //     expect(derived).toEqual({chunkLoadError: true})
+    // })
+})