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

package/app/components/social-icons/index.jsx

@@ -0,0 +1,101 @@
+/*
+ * 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 {
+    Flex,
+    IconButton,
+
+    // Hooks
+    useMultiStyleConfig
+} from '@chakra-ui/react'
+
+// Icons
+import {
+    SocialFacebookIcon,
+    SocialInstagramIcon,
+    SocialPinterestIcon,
+    SocialTwitterIcon,
+    SocialYoutubeIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+
+/**
+ *
+ */
+const SocialIcons = ({variant, pinterestInnerColor = 'white', ...otherProps}) => {
+    const styles = useMultiStyleConfig('SocialIcons', {variant})
+
+    return (
+        <Flex
+            className="sf-social-icons"
+            {...styles.container}
+            sx={{'--pinterest-icon-inner': pinterestInnerColor}}
+            {...otherProps}
+        >
+            {/* Social Links */}
+            {[
+                {
+                    href: 'https://www.youtube.com/channel/UCSTGHqzR1Q9yAVbiS3dAFHg',
+                    icon: SocialYoutubeIcon,
+                    ariaLabel: 'YouTube'
+                },
+                {
+                    href: 'https://www.instagram.com/commercecloud/?hl=en',
+                    icon: SocialInstagramIcon,
+                    ariaLabel: 'Instagram'
+                },
+                {
+                    href: '/',
+                    icon: SocialPinterestIcon,
+                    ariaLabel: 'Pinterest'
+                },
+                {
+                    href: 'https://twitter.com/CommerceCloud',
+                    icon: SocialTwitterIcon,
+                    ariaLabel: 'Twitter'
+                },
+                {
+                    href: 'https://www.facebook.com/CommerceCloud/',
+                    icon: SocialFacebookIcon,
+                    ariaLabel: 'Facebook'
+                }
+            ].map(({href, icon, ariaLabel}) => (
+                <IconButton
+                    {...styles.item}
+                    key={href}
+                    icon={React.createElement(icon, styles.icon)}
+                    variant="unstyled"
+                    onClick={() => {
+                        window.open(href)
+                    }}
+                    aria-label={ariaLabel}
+                />
+            ))}
+        </Flex>
+    )
+}
+
+SocialIcons.displayName = 'SocialIcons'
+
+SocialIcons.propTypes = {
+    /**
+     * This component has 3 variants, 'flex', 'flex-start' and 'flex-end'.
+     * All will affect how the child icons are displayed. By default, it's
+     * value is `flex`.
+     */
+    variant: PropTypes.string,
+
+    /**
+     * The inverse color of Pinterest icon's `currentColor`. For example, if the pinterest icon is white, then its inner 'p' is black.
+     */
+    pinterestInnerColor: PropTypes.string
+}
+
+export default SocialIcons

package/app/components/social-icons/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 SocialIcons from '@salesforce/retail-react-app/app/components/social-icons/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {fireEvent} from '@testing-library/react'
+
+describe('Social Icons Component', () => {
+    test('Renders SocialIcons', () => {
+        renderWithProviders(<SocialIcons />)
+
+        const links = document.querySelectorAll('button')
+
+        expect(links.length).toBeGreaterThan(0)
+    })
+
+    test('should open a new windown when an icon is clicked', () => {
+        window.open = jest.fn()
+        renderWithProviders(<SocialIcons />)
+
+        const links = document.querySelectorAll('button')
+        // click the first link
+        fireEvent.click(links[0])
+        expect(global.open).toHaveBeenCalled()
+    })
+})

package/app/components/swatch-group/index.jsx

@@ -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 PropTypes from 'prop-types'
+import {Flex, Box, HStack, useStyleConfig} from '@chakra-ui/react'
+import {noop} from '@salesforce/retail-react-app/app/utils/utils'
+
+/**
+ * SwatchGroup allows you to create a list of swatches
+ * Each Swatch is a link with will direct to a href passed to them
+ */
+const SwatchGroup = (props) => {
+    const {
+        displayName,
+        children,
+        value: selectedValue,
+        label = '',
+        variant = 'square',
+        onChange = noop
+    } = props
+    const styles = useStyleConfig('SwatchGroup')
+    return (
+        <Flex {...styles.swatchGroup} role="radiogroup">
+            <HStack {...styles.swatchLabel}>
+                <Box fontWeight="semibold">{`${label}:`}</Box>
+                <Box>{displayName}</Box>
+            </HStack>
+            <Flex {...styles.swatchesWrapper}>
+                {React.Children.map(children, (child) => {
+                    const childValue = child.props.value
+
+                    return React.cloneElement(child, {
+                        selected: childValue === selectedValue,
+                        variant,
+                        onChange
+                    })
+                })}
+            </Flex>
+        </Flex>
+    )
+}
+
+SwatchGroup.displayName = 'SwatchGroup'
+
+SwatchGroup.propTypes = {
+    /**
+     * The attribute name of the swatch group. E.g color, size
+     */
+    label: PropTypes.string,
+    /**
+     * The selected Swatch value.
+     */
+    value: PropTypes.string,
+    /**
+     * The display value of the selected option
+     */
+    displayName: PropTypes.string,
+    /**
+     * The Swatch options to choose between
+     */
+    children: PropTypes.array,
+    /**
+     * The shape of the swatches
+     */
+    variant: PropTypes.oneOf(['square', 'circle']),
+    /**
+     * This function is called when a new option is selected
+     */
+    onChange: PropTypes.func
+}
+
+export default SwatchGroup

package/app/components/swatch-group/index.test.js

@@ -0,0 +1,136 @@
+/*
+ * 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, render, fireEvent, waitFor} from '@testing-library/react'
+import {Router, useHistory, useLocation} from 'react-router-dom'
+import SwatchGroup from '@salesforce/retail-react-app/app/components/swatch-group/index'
+import {Box} from '@chakra-ui/react'
+import Swatch from '@salesforce/retail-react-app/app/components/swatch-group/swatch'
+import {createMemoryHistory} from 'history'
+
+const data = {
+    id: 'color',
+    name: 'Color',
+    values: [
+        {
+            name: 'Black',
+            orderable: false,
+            value: 'BLACKFB',
+            href: '/en-GB/swatch-example?color=BLACKFB',
+            image: {
+                alt: 'Navy Single Pleat Wool Suit, Navy, swatch',
+                disBaseLink:
+                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwad8e7f28/images/swatch/PG.52002RUBN4Q.NAVYWL.CP.jpg',
+                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwad8e7f28/images/swatch/PG.52002RUBN4Q.NAVYWL.CP.jpg',
+                title: 'Navy Single Pleat Wool Suit, Navy'
+            }
+        },
+        {
+            name: 'Grey Heather',
+            orderable: true,
+            value: 'JJ2XNXX',
+            href: '/en-GB/swatch-example?color=JJ2XNXX',
+            image: {
+                alt: 'Long Sleeve Crew Neck, Grey Heather, swatch',
+                disBaseLink:
+                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw3238595c/images/swatch/PG.10219685.JJ2XNXX.CP.jpg',
+                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw3238595c/images/swatch/PG.10219685.JJ2XNXX.CP.jpg',
+                title: 'Long Sleeve Crew Neck, Grey Heather'
+            }
+        },
+        {
+            name: 'Meadow Violet',
+            orderable: true,
+            value: 'JJ3HDXX',
+            href: '/en-GB/swatch-example?color=JJ3HDXX',
+            image: {
+                alt: 'Long Sleeve Crew Neck, Meadow Violet, swatch',
+                disBaseLink:
+                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw7b40c85a/images/swatch/PG.10219685.JJ3HDXX.CP.jpg',
+                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw7b40c85a/images/swatch/PG.10219685.JJ3HDXX.CP.jpg',
+                title: 'Long Sleeve Crew Neck, Meadow Violet'
+            }
+        }
+    ]
+}
+
+const Page = () => {
+    const location = useLocation()
+    const history = useHistory()
+    const params = new URLSearchParams(location.search)
+    const selectedColor = data.values.find(({value}) => {
+        return value === params.get('color')
+    })
+
+    return (
+        <SwatchGroup
+            variant="circle"
+            key={data.id}
+            value={params.get('color')}
+            displayName={(selectedColor && selectedColor.name) || ''}
+            label={data.name}
+            name={data.name}
+            onChange={(_, href) => {
+                if (!href) return
+                history.replace(href)
+            }}
+        >
+            {data.values.map(({value, name, image, orderable, href}) => {
+                return (
+                    <Swatch
+                        href={href}
+                        key={value}
+                        image={image}
+                        disabled={!orderable}
+                        value={value}
+                        name={name}
+                    >
+                        <Box
+                            h="100%"
+                            w="100%"
+                            minW="32px"
+                            bgImage={image ? `url(${image.disBaseLink})` : ''}
+                        />
+                        <div>{value}</div>
+                    </Swatch>
+                )
+            })}
+        </SwatchGroup>
+    )
+}
+
+describe('Swatch Component', () => {
+    test('renders component', () => {
+        const history = createMemoryHistory()
+        history.push('/en-GB/swatch-example?color=JJ2XNXX')
+
+        render(
+            <Router history={history}>
+                <Page />
+            </Router>
+        )
+        expect(screen.getAllByRole('radio')).toHaveLength(data.values.length)
+    })
+
+    test('swatch can be selected', () => {
+        const history = createMemoryHistory()
+        history.push('/en-GB/swatch-example')
+
+        render(
+            <Router history={history}>
+                <Page />
+            </Router>
+        )
+
+        expect(screen.getAllByRole('radio')).toHaveLength(data.values.length)
+        const firstSwatch = screen.getAllByRole('radio')[0]
+        fireEvent.click(firstSwatch)
+        waitFor(() => {
+            expect(history.search).toBe('?color=BLACKFB')
+        })
+    })
+})

package/app/components/swatch-group/swatch.jsx

@@ -0,0 +1,94 @@
+/*
+ * 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 {Button, Box, Center, useMultiStyleConfig} from '@chakra-ui/react'
+import {Link as RouteLink} from 'react-router-dom'
+
+/**
+ * The Swatch Component displays item inside `SwatchGroup`
+ */
+const Swatch = (props) => {
+    const {
+        disabled,
+        selected,
+        label,
+        children,
+        href,
+        variant = 'square',
+        onChange,
+        value,
+        name
+    } = props
+    const styles = useMultiStyleConfig('SwatchGroup', {variant, disabled, selected})
+    return (
+        <Button
+            {...styles.swatch}
+            as={RouteLink}
+            to={href}
+            aria-label={name}
+            onClick={(e) => {
+                e.preventDefault()
+                onChange(value, href)
+            }}
+            aria-checked={selected}
+            variant="outline"
+            role="radio"
+        >
+            <Center {...styles.swatchButton}>
+                {children}
+                {label && <Box>{label}</Box>}
+            </Center>
+        </Button>
+    )
+}
+
+Swatch.displayName = 'Swatch'
+
+Swatch.propTypes = {
+    /**
+     * The children to be rendered within swatch item.
+     */
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    /**
+     * Indicates whether the option is disabled
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Indicates whether the option is selected.
+     * This props is provided internally by SwatchGroup
+     */
+    selected: PropTypes.bool,
+    /**
+     * The shape of the Swatch
+     */
+    variant: PropTypes.oneOf(['square', 'circle']),
+    /**
+     * The label of the option.
+     */
+    label: PropTypes.string,
+    /**
+     *  The url of this option
+     */
+    href: PropTypes.string,
+    /**
+     * This function is called whenever the user selects an option.
+     * It is passed the new value.
+     */
+    onChange: PropTypes.func,
+    /**
+     * The value for the option.
+     */
+    value: PropTypes.string,
+    /**
+     * The display value for each swatch
+     */
+    name: PropTypes.string
+}
+
+export default Swatch

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

@@ -0,0 +1,97 @@
+/*
+ * 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, {useContext, createContext} from 'react'
+import PropTypes from 'prop-types'
+import {FormattedMessage} from 'react-intl'
+import {Box, Button, Flex, Heading, Stack} from '@chakra-ui/react'
+import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
+
+const ToggleCardContext = createContext()
+
+/**
+ * A card-like box that renders one of two states: 'edit' and 'summary'. It takes a single
+ * `ToggleCardSummary` and `ToggleCardEdit` component as children and renders one or the
+ * other depending on the `editing` prop. See `app/pages/checkout` for example.
+ */
+export const ToggleCard = ({
+    id,
+    title,
+    editing,
+    disabled,
+    onEdit,
+    editLabel,
+    isLoading,
+    children,
+    ...props
+}) => {
+    return (
+        <ToggleCardContext.Provider value={{editing, disabled}}>
+            <Box
+                layerStyle="card"
+                rounded={[0, 0, 'base']}
+                px={[4, 4, 6]}
+                data-testid={`sf-toggle-card-${id}`}
+                position="relative"
+                {...props}
+            >
+                <Stack spacing={editing || (!editing && !disabled) ? 4 : 0}>
+                    <Flex justify="space-between">
+                        <Heading
+                            fontSize="lg"
+                            lineHeight="30px"
+                            color={disabled && !editing && 'gray.400'}
+                        >
+                            {title}
+                        </Heading>
+                        {!editing && !disabled && onEdit && (
+                            <Button variant="link" size="sm" onClick={onEdit}>
+                                {editLabel || (
+                                    <FormattedMessage
+                                        defaultMessage="Edit"
+                                        id="toggle_card.action.edit"
+                                    />
+                                )}
+                            </Button>
+                        )}
+                    </Flex>
+                    <Box data-testid={`sf-toggle-card-${id}-content`}>{children}</Box>
+                </Stack>
+
+                {isLoading && editing && <LoadingSpinner />}
+            </Box>
+        </ToggleCardContext.Provider>
+    )
+}
+
+export const ToggleCardEdit = ({children}) => {
+    const {editing} = useContext(ToggleCardContext)
+    return editing ? children : null
+}
+
+export const ToggleCardSummary = ({children}) => {
+    const {editing, disabled} = useContext(ToggleCardContext)
+    return !editing && !disabled ? children : null
+}
+
+ToggleCard.propTypes = {
+    id: PropTypes.string,
+    title: PropTypes.any,
+    editLabel: PropTypes.any,
+    editing: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onEdit: PropTypes.func,
+    children: PropTypes.any
+}
+
+ToggleCardEdit.propTypes = {
+    children: PropTypes.any
+}
+
+ToggleCardSummary.propTypes = {
+    children: PropTypes.any
+}

package/app/components/with-registration/index.jsx

@@ -0,0 +1,58 @@
+/*
+ * 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 {AuthModal, useAuthModal} from '@salesforce/retail-react-app/app/hooks/use-auth-modal'
+import PropTypes from 'prop-types'
+import {noop} from '@salesforce/retail-react-app/app/utils/utils'
+import {useIntl} from 'react-intl'
+import {useLocation} from 'react-router-dom'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+
+const withRegistration = (Component) => {
+    const WrappedComponent = ({onClick = noop, ...passThroughProps}) => {
+        const {data: customer} = useCurrentCustomer()
+        const authModal = useAuthModal()
+        const location = useLocation()
+        const {formatMessage, locale} = useIntl()
+        const isLoginPage = new RegExp(`^/${locale}/login$`).test(location.pathname)
+        const showToast = useToast()
+
+        const handleClick = (e) => {
+            e.preventDefault()
+            if (!customer.isRegistered) {
+                // Do not show auth modal if users is already on the login page
+                if (isLoginPage) {
+                    showToast({
+                        title: formatMessage({
+                            defaultMessage: 'Please sign in to continue!',
+                            id: 'with_registration.info.please_sign_in'
+                        }),
+                        status: 'info'
+                    })
+                } else {
+                    authModal.onOpen()
+                }
+            } else {
+                onClick()
+            }
+        }
+
+        return (
+            <React.Fragment>
+                <Component {...passThroughProps} onClick={handleClick} />
+                <AuthModal {...authModal} onLoginSuccess={onClick} />
+            </React.Fragment>
+        )
+    }
+    WrappedComponent.propTypes = {
+        onClick: PropTypes.func
+    }
+    return WrappedComponent
+}
+
+export default withRegistration

package/app/components/with-registration/index.test.js

@@ -0,0 +1,85 @@
+/*
+ * 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 {Button} from '@chakra-ui/react'
+import {screen, waitFor} from '@testing-library/react'
+import withRegistration from '@salesforce/retail-react-app/app/components/with-registration/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import userEvent from '@testing-library/user-event'
+import {rest} from 'msw'
+import {mockedGuestCustomer} from '@salesforce/retail-react-app/app/mocks/mock-data'
+
+const ButtonWithRegistration = withRegistration(Button)
+
+const MockedComponent = (props) => {
+    return (
+        <div>
+            <ButtonWithRegistration {...props}>Button</ButtonWithRegistration>
+        </div>
+    )
+}
+
+// Set up and clean up
+beforeAll(() => {
+    // 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', '/en-GB/account')
+})
+
+afterEach(() => {
+    jest.resetModules()
+    sessionStorage.clear()
+})
+
+describe('Registered users tests', function () {
+    test('should execute onClick for registered users', async () => {
+        const user = userEvent.setup()
+
+        const onClick = jest.fn()
+        renderWithProviders(<MockedComponent onClick={onClick} />)
+
+        const trigger = screen.getByText(/button/i)
+        expect(trigger).toBeInTheDocument()
+        await user.click(trigger)
+
+        await waitFor(() => {
+            expect(onClick).toHaveBeenCalledTimes(1)
+        })
+    })
+})
+
+describe('Guest user tests', function () {
+    beforeEach(() => {
+        global.server.use(
+            rest.get('*/customers/:customerId', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(200), ctx.json(mockedGuestCustomer))
+            })
+        )
+    })
+    test('should show login modal if user not registered', async () => {
+        const user = userEvent.setup()
+        const onClick = jest.fn()
+        renderWithProviders(
+            <ButtonWithRegistration onClick={onClick}>Button</ButtonWithRegistration>,
+            {
+                wrapperProps: {
+                    isGuest: true
+                }
+            }
+        )
+
+        const trigger = await screen.findByText(/button/i)
+        await user.click(trigger)
+
+        await waitFor(() => {
+            expect(screen.getByLabelText(/email/i)).toBeInTheDocument()
+            expect(screen.getByLabelText(/Password/)).toBeInTheDocument()
+            expect(screen.getByText(/forgot password/i)).toBeInTheDocument()
+            expect(screen.getByText(/sign in/i)).toBeInTheDocument()
+        })
+    })
+})