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

package/app/components/_app-config/index.test.js

@@ -0,0 +1,77 @@
+/*
+ * 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 {render, waitFor} from '@testing-library/react'
+import AppConfig from '@salesforce/retail-react-app/app/components/_app-config/index.jsx'
+
+import {CorrelationIdProvider} from '@salesforce/pwa-kit-react-sdk/ssr/universal/contexts'
+import {uuidv4} from '@salesforce/pwa-kit-react-sdk/utils/uuidv4.client'
+import {StaticRouter} from 'react-router-dom'
+
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {rest} from 'msw'
+import {registerUserToken} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+describe('AppConfig', () => {
+    beforeAll(() => {
+        jest.spyOn(window.localStorage, 'setItem')
+        global.fetch = jest.fn().mockImplementation(() => mockConfig.mockFetchOCAPISessions)
+    })
+
+    beforeEach(() => {
+        window.localStorage.setItem.mockClear()
+
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid',
+                        access_token: registerUserToken,
+                        refresh_token: 'testrefeshtoken',
+                        usid: 'testusid',
+                        enc_user_id: 'testEncUserId',
+                        id_token: 'testIdToken'
+                    })
+                )
+            )
+        )
+    })
+
+    afterAll(() => {
+        window.localStorage.setItem.mockRestore()
+        global.fetch.mockClear()
+        delete global.fetch
+    })
+
+    test('renders', async () => {
+        const locals = {
+            appConfig: mockConfig.app
+        }
+        const {container} = render(
+            <StaticRouter>
+                <CorrelationIdProvider correlationId={() => uuidv4()}>
+                    <AppConfig locals={locals} />
+                </CorrelationIdProvider>
+            </StaticRouter>
+        )
+        expect(container).toBeDefined()
+
+        // Wait for access token to be saved
+        // Otherwise, the test would end prematurely before our component has finished its business
+        // (for example: commerce-sdk-react Provider needs to finish its useEffect for `auth.ready()`)
+        await waitFor(() => {
+            expect(window.localStorage.setItem).toHaveBeenCalled()
+        })
+    })
+
+    test('AppConfig static methods behave as expected', () => {
+        expect(AppConfig.restore()).toBeUndefined()
+        expect(AppConfig.restore({frozen: 'any values here'})).toBeUndefined()
+        expect(AppConfig.freeze()).toBeUndefined()
+    })
+})

package/app/components/_error/index.jsx

@@ -0,0 +1,142 @@
+/*
+ * 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 {Helmet} from 'react-helmet'
+import {Box, Button, Flex, Heading, IconButton, Stack, Text} from '@chakra-ui/react'
+
+import {BrandLogo, FileIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {useHistory} from 'react-router-dom'
+
+// <Error> is rendered when:
+//
+// 1. A user requests a page that is not routable from `app/routes.jsx`.
+// 2. A routed component throws an error in `getProps()`.
+// 3. A routed component throws an error in `render()`.
+//
+// It must not throw an error. Keep it as simple as possible.
+
+const Error = (props) => {
+    const {message, stack} = props
+    const history = useHistory()
+
+    const title = "This page isn't working"
+    return (
+        <Flex id="sf-app" flex={1} direction="column" minWidth={'375px'}>
+            <Helmet>
+                <title>{title}</title>
+            </Helmet>
+            <Box as="header" width="full" boxShadow="base" backgroundColor="white">
+                <Box
+                    maxWidth="container.xxxl"
+                    marginLeft="auto"
+                    marginRight="auto"
+                    px={[4, 4, 6, 8]}
+                    paddingTop={[1, 1, 2, 4]}
+                    paddingBottom={[3, 3, 2, 4]}
+                >
+                    <IconButton
+                        aria-label="logo"
+                        icon={<BrandLogo width={[8, 8, 8, 12]} height={[6, 6, 6, 8]} />}
+                        marginBottom={[1, 1, 2, 0]}
+                        variant="unstyled"
+                        onClick={() => history.push('/')}
+                    />
+                </Box>
+            </Box>
+            <Box
+                as="main"
+                id="app-main"
+                role="main"
+                layerStyle="page"
+                padding={{lg: 8, md: 6, sm: 0, base: 0}}
+                flex={1}
+            >
+                <Flex
+                    direction={'column'}
+                    justify="center"
+                    px={{base: 4, md: 6, lg: 50}}
+                    py={{base: 20, md: 24}}
+                >
+                    <Flex align="center" direction="column">
+                        <FileIcon boxSize={['30px', '32px']} mb={8} />
+                        <Heading as="h2" fontSize={['xl', '2xl', '2xl', '3xl']} mb={2}>
+                            {title}
+                        </Heading>
+                        <Box maxWidth="440px" marginBottom={8}>
+                            <Text align="center">
+                                An error has occurred. Try refreshing the page or if you need
+                                immediate help please contact support.
+                            </Text>
+                            {message && (
+                                <Box
+                                    as="pre"
+                                    mt={4}
+                                    fontSize="sm"
+                                    background="gray.50"
+                                    borderColor="gray.200"
+                                    borderStyle="solid"
+                                    borderWidth="1px"
+                                    overflow="auto"
+                                    padding={4}
+                                >
+                                    {message}
+                                </Box>
+                            )}
+                        </Box>
+                        <Stack direction={['column', 'row']} spacing={4} width={['100%', 'auto']}>
+                            <Button
+                                variant="outline"
+                                bg="white"
+                                as="a"
+                                borderColor={'gray.200'}
+                                target="_blank"
+                                href="https://help.salesforce.com/s/support"
+                            >
+                                Contact Support
+                            </Button>
+                            <Button onClick={() => window.location.reload()}>
+                                Refresh the page
+                            </Button>
+                        </Stack>
+                    </Flex>
+                    {stack && (
+                        <Box marginTop={20}>
+                            <Text fontWeight="bold" fontSize="md">
+                                Stack Trace
+                            </Text>
+                            <Box
+                                as="pre"
+                                mt={4}
+                                fontSize="sm"
+                                background="gray.50"
+                                borderColor="gray.200"
+                                borderStyle="solid"
+                                borderWidth="1px"
+                                overflow="auto"
+                                padding={4}
+                            >
+                                {stack}
+                            </Box>
+                        </Box>
+                    )}
+                </Flex>
+            </Box>
+        </Flex>
+    )
+}
+
+Error.propTypes = {
+    // JavaScript error stack trace: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack
+    stack: PropTypes.string,
+    // HTTP status code: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
+    status: PropTypes.number,
+    // A description of the error, if available
+    message: PropTypes.string
+}
+
+export default Error

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

@@ -0,0 +1,25 @@
+/*
+ * 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 {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import Error from '@salesforce/retail-react-app/app/components/_error/index'
+
+test('Error renders without errors', () => {
+    expect(renderWithProviders(<Error />)).toBeDefined()
+})
+
+test('Error status 500', () => {
+    renderWithProviders(<Error status={500} />)
+    expect(screen.getByRole('heading', {level: 2})).toHaveTextContent("This page isn't working")
+})
+
+test('Error status 500 with stack trace', () => {
+    renderWithProviders(<Error status={500} stack={'Stack trace error message'} />)
+    expect(screen.getByRole('heading', {level: 2})).toHaveTextContent("This page isn't working")
+    expect(screen.getByText(/stack trace error message/i)).toBeInTheDocument()
+})

package/app/components/action-card/index.jsx

@@ -0,0 +1,75 @@
+/*
+ * 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, {useState} from 'react'
+import PropTypes from 'prop-types'
+import {Stack, Box, Button} from '@chakra-ui/react'
+import {FormattedMessage} from 'react-intl'
+import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
+
+/**
+ * Renders a card-style box with optional edit and remove buttons. Used for
+ * lists of addresses, payment methods, or any other list-type content.
+ * The provided `onRemove` callback triggers a loading spinner internally
+ * if given a promise.
+ */
+const ActionCard = ({children, onEdit, onRemove, ...props}) => {
+    const [showLoading, setShowLoading] = useState(false)
+
+    const handleRemove = async () => {
+        setShowLoading(true)
+        try {
+            return await Promise.resolve(onRemove())
+        } finally {
+            setShowLoading(false)
+        }
+    }
+
+    return (
+        <Box
+            spacing={4}
+            p={4}
+            position="relative"
+            border="1px solid"
+            borderColor="gray.100"
+            borderRadius="base"
+            {...props}
+        >
+            {showLoading && <LoadingSpinner />}
+            <Stack spacing={3}>
+                <Box>{children}</Box>
+                <Stack direction="row" spacing={4}>
+                    {onEdit && (
+                        <Button onClick={onEdit} variant="link" size="sm">
+                            <FormattedMessage defaultMessage="Edit" id="action_card.action.edit" />
+                        </Button>
+                    )}
+                    {onRemove && (
+                        <Button variant="link" size="sm" colorScheme="red" onClick={handleRemove}>
+                            <FormattedMessage
+                                defaultMessage="Remove"
+                                id="action_card.action.remove"
+                            />
+                        </Button>
+                    )}
+                </Stack>
+            </Stack>
+        </Box>
+    )
+}
+
+ActionCard.propTypes = {
+    /** Callback fired on edit */
+    onEdit: PropTypes.func,
+
+    /** Callback fired on remove click (if promise, will toggle loading spinner) */
+    onRemove: PropTypes.func,
+
+    /** Content rendered in card */
+    children: PropTypes.node
+}
+
+export default ActionCard

package/app/components/address-display/index.jsx

@@ -0,0 +1,30 @@
+/*
+ * 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 {Box, Text} from '@chakra-ui/react'
+
+const AddressDisplay = ({address}) => {
+    return (
+        <Box>
+            <Text>
+                {address.firstName} {address.lastName}
+            </Text>
+            <Text>{address.address1}</Text>
+            <Text>
+                {address.city}, {address.stateCode} {address.postalCode}
+            </Text>
+            <Text>{address.countryCode}</Text>
+        </Box>
+    )
+}
+
+AddressDisplay.propTypes = {
+    address: PropTypes.object
+}
+
+export default AddressDisplay

package/app/components/basic-tile/index.jsx

@@ -0,0 +1,65 @@
+/*
+ * 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 {Box, Img, Text, AspectRatio, useTheme} from '@chakra-ui/react'
+import {Link} from 'react-router-dom'
+
+import {ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+/**
+ * BasicTile component is used on content pages like home page.
+ * This component is used to promote categories, it consistents
+ * of an image and a category title link.
+ */
+const BasicTile = ({img, href, title, ...props}) => {
+    const {src, alt} = img
+    const theme = useTheme()
+    return (
+        <Box {...props}>
+            <Box paddingBottom="4">
+                <Link to={href}>
+                    <AspectRatio ratio={3 / 4}>
+                        <Img
+                            alt={alt}
+                            src={src}
+                            borderRadius="base"
+                            bgGradient={theme.gradients.imageBackground}
+                        />
+                    </AspectRatio>
+                </Link>
+            </Box>
+            <Box>
+                <Link to={href}>
+                    <Text
+                        fontWeight="bold"
+                        _hover={{
+                            textDecoration: 'underline'
+                        }}
+                    >
+                        {title}
+                        <ChevronRightIcon />
+                    </Text>
+                </Link>
+            </Box>
+        </Box>
+    )
+}
+
+BasicTile.displayName = 'BasicTile'
+
+BasicTile.propTypes = {
+    href: PropTypes.string.isRequired,
+    img: PropTypes.shape({
+        src: PropTypes.string,
+        alt: PropTypes.string
+    }).isRequired,
+    title: PropTypes.string.isRequired
+}
+
+export default BasicTile

package/app/components/basic-tile/index.test.js

@@ -0,0 +1,23 @@
+/*
+ * 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 BasicTile from '@salesforce/retail-react-app/app/components/basic-tile/index'
+
+test('BasicTile renders without errors', () => {
+    const data = {
+        title: 'title',
+        href: '/category/womens-outfits',
+        img: {
+            src: 'src',
+            alt: 'alt'
+        }
+    }
+    const {getByText} = renderWithProviders(<BasicTile {...data} />)
+
+    expect(getByText('title')).toBeInTheDocument()
+})

package/app/components/breadcrumb/index.jsx

@@ -0,0 +1,67 @@
+/*
+ * 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 {Link as RouteLink} from 'react-router-dom'
+import {useIntl} from 'react-intl'
+
+// Components
+import {
+    Breadcrumb as ChakraBreadcrumb,
+    BreadcrumbItem as ChakraBreadcrumbItem,
+    BreadcrumbLink as ChakraBreadcrumbLink,
+    // Hooks
+    useStyleConfig
+} from '@chakra-ui/react'
+
+// Icons
+import {ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+// Others
+import {categoryUrlBuilder} from '@salesforce/retail-react-app/app/utils/url'
+
+/**
+ * A simplification of the Chakra `Breadcrumb` component for our project needs. Given
+ * a list of categories, display a breadcrumb and it's items.
+ */
+const Breadcrumb = ({categories, ...rest}) => {
+    const intl = useIntl()
+    const styles = useStyleConfig('Breadcrumb')
+
+    return (
+        <ChakraBreadcrumb
+            className="sf-breadcrumb"
+            {...styles.container}
+            separator={<ChevronRightIcon {...styles.icon} />}
+            {...rest}
+        >
+            {categories.map((category) => (
+                <ChakraBreadcrumbItem key={category.id} data-testid="sf-crumb-item">
+                    <ChakraBreadcrumbLink
+                        as={RouteLink}
+                        to={categoryUrlBuilder(category, intl.locale)}
+                        {...styles.linkTest}
+                    >
+                        {category.name}
+                    </ChakraBreadcrumbLink>
+                </ChakraBreadcrumbItem>
+            ))}
+        </ChakraBreadcrumb>
+    )
+}
+
+Breadcrumb.displayName = 'Breadcrumb'
+
+Breadcrumb.propTypes = {
+    /**
+     * The categories to be displayed in this breadcrumb.
+     */
+    categories: PropTypes.array
+}
+
+export default Breadcrumb

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

@@ -0,0 +1,30 @@
+/*
+ * 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 Breadcrumb from '@salesforce/retail-react-app/app/components/breadcrumb/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+const mockCategories = [
+    {
+        id: 1,
+        name: 'Category 1'
+    },
+    {
+        id: 2,
+        name: 'Category 2'
+    },
+    {
+        id: 3,
+        name: 'Category 3'
+    }
+]
+
+test('Renders Breadcrum', () => {
+    const {getAllByTestId} = renderWithProviders(<Breadcrumb categories={mockCategories} />)
+
+    expect(getAllByTestId('sf-crumb-item')).toHaveLength(mockCategories.length)
+})

package/app/components/confirmation-modal/index.jsx

@@ -0,0 +1,111 @@
+/*
+ * 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 {noop} from '@salesforce/retail-react-app/app/utils/utils'
+import {
+    Button,
+    AlertDialog,
+    AlertDialogBody,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogContent,
+    AlertDialogOverlay,
+    Text
+} from '@chakra-ui/react'
+
+import PropTypes from 'prop-types'
+import {CONFIRMATION_DIALOG_DEFAULT_CONFIG} from '@salesforce/retail-react-app/app/pages/account/constant'
+import {useIntl} from 'react-intl'
+
+const ConfirmationModal = ({
+    dialogTitle = CONFIRMATION_DIALOG_DEFAULT_CONFIG.dialogTitle,
+    confirmationMessage = CONFIRMATION_DIALOG_DEFAULT_CONFIG.confirmationMessage,
+    primaryActionLabel = CONFIRMATION_DIALOG_DEFAULT_CONFIG.primaryActionLabel,
+    alternateActionLabel = CONFIRMATION_DIALOG_DEFAULT_CONFIG.alternateActionLabel,
+    onPrimaryAction = noop,
+    onAlternateAction = noop,
+    ...props
+}) => {
+    const {formatMessage} = useIntl()
+
+    const handleConfirmClick = () => {
+        onPrimaryAction()
+        props.onClose()
+    }
+
+    const handleAlternateActionClick = () => {
+        onAlternateAction()
+        props.onClose()
+    }
+
+    return (
+        <AlertDialog
+            isOpen={props.isOpen}
+            isCentered
+            onClose={handleAlternateActionClick}
+            {...props}
+        >
+            <AlertDialogOverlay />
+            <AlertDialogContent>
+                <AlertDialogHeader>{formatMessage(dialogTitle)}</AlertDialogHeader>
+                <AlertDialogBody>
+                    <Text>{formatMessage(confirmationMessage)}</Text>
+                </AlertDialogBody>
+
+                <AlertDialogFooter>
+                    <Button variant="ghost" mr={3} onClick={handleAlternateActionClick}>
+                        {formatMessage(alternateActionLabel)}
+                    </Button>
+                    <Button variant="solid" onClick={handleConfirmClick}>
+                        {formatMessage(primaryActionLabel)}
+                    </Button>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    )
+}
+
+ConfirmationModal.propTypes = {
+    /**
+     * Prop to check if modal is open
+     */
+    isOpen: PropTypes.bool.isRequired,
+    /**
+     * Callback invoked to open the modal
+     */
+    onOpen: PropTypes.func.isRequired,
+    /**
+     * Callback invoked to close the modal
+     */
+    onClose: PropTypes.func.isRequired,
+    /**
+     * Text to be displayed as modal header
+     */
+    dialogTitle: PropTypes.object,
+    /**
+     * Text to display in confirmation modal prompting user to pick an action
+     */
+    confirmationMessage: PropTypes.object,
+    /**
+     * Button Label for primary action in confirmation modal
+     */
+    primaryActionLabel: PropTypes.object,
+    /**
+     * Button Label for alternate or secondary action in confirmation modal
+     */
+    alternateActionLabel: PropTypes.object,
+    /**
+     * Action to execute if user selects primary action
+     */
+    onPrimaryAction: PropTypes.func,
+    /**
+     * Action to execute if user selects alternate or secondary action
+     */
+    onAlternateAction: PropTypes.func
+}
+
+export default ConfirmationModal