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

package/app/pages/product-list/index.test.js

@@ -0,0 +1,180 @@
+/*
+ * 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 {rest} from 'msw'
+import {
+    mockProductSearch,
+    mockedEmptyCustomerProductList
+} from '@salesforce/retail-react-app/app/mocks/mock-data'
+import {screen, waitFor} from '@testing-library/react'
+import {Route, Switch} from 'react-router-dom'
+import {
+    createPathWithDefaults,
+    renderWithProviders
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import ProductList from '.'
+import EmptySearchResults from '@salesforce/retail-react-app/app/pages/product-list/partials/empty-results'
+
+jest.setTimeout(60000)
+let mockProductListSearchResponse = mockProductSearch
+
+const MockedComponent = ({isLoading}) => {
+    return (
+        <Switch>
+            <Route
+                path={[
+                    createPathWithDefaults('/category/:categoryId'),
+                    createPathWithDefaults('/search')
+                ]}
+                render={(props) => (
+                    <div>
+                        <ProductList {...props} isLoading={isLoading} />
+                    </div>
+                )}
+            />
+        </Switch>
+    )
+}
+
+MockedComponent.propTypes = {
+    isLoading: PropTypes.bool
+}
+
+const MockedEmptyPage = () => {
+    return <EmptySearchResults searchQuery={'test'} category={undefined} />
+}
+
+beforeEach(() => {
+    global.server.use(
+        rest.get('*/product-search', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockProductListSearchResponse))
+        }),
+        rest.get('*/customers/:customerId/product-lists', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedEmptyCustomerProductList))
+        }),
+        rest.post('*/einstein/v3/personalization/*', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockProductListSearchResponse))
+        })
+    )
+})
+
+afterEach(() => {
+    mockProductListSearchResponse = mockProductSearch
+    jest.resetModules()
+    localStorage.clear()
+})
+
+test('should render product list page', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
+    renderWithProviders(<MockedComponent />)
+    expect(await screen.findByTestId('sf-product-list-page')).toBeInTheDocument()
+    await waitFor(() => {
+        expect(screen.getByText(/Classic Glen Plaid Pant/i)).toBeInTheDocument()
+    })
+})
+
+test('should render sort option list page', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
+    renderWithProviders(<MockedComponent />)
+    expect(await screen.findByTestId('sf-product-list-sort')).toBeInTheDocument()
+})
+
+test('should render skeleton', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
+    renderWithProviders(<MockedComponent isLoading />)
+    expect(screen.getAllByTestId('sf-product-tile-skeleton')).toHaveLength(25)
+})
+
+test('should render empty list page', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
+    renderWithProviders(<MockedEmptyPage />)
+    expect(await screen.findByTestId('sf-product-empty-list-page')).toBeInTheDocument()
+})
+
+test('pagination is rendered', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
+    renderWithProviders(<MockedComponent />)
+    expect(await screen.findByTestId('sf-pagination')).toBeInTheDocument()
+})
+
+test('should display Selected refinements as there are some in the response', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
+    renderWithProviders(<MockedComponent />)
+    const countOfRefinements = await screen.findAllByText('Black')
+    expect(countOfRefinements).toHaveLength(2)
+})
+
+// TODO: Fix flaky/broken test
+// eslint-disable-next-line jest/no-disabled-tests
+test.skip('show login modal when an unauthenticated user tries to add an item to wishlist', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
+    const {user} = renderWithProviders(<MockedComponent />)
+    expect(await screen.findAllByText('Black')).toBeInTheDocument()
+    const wishlistButton = await screen.getAllByLabelText('Wishlist')
+    expect(wishlistButton).toHaveLength(25)
+    await user.click(wishlistButton[0])
+    expect(await screen.findByText(/Email/)).toBeInTheDocument()
+    expect(await screen.findByText(/Password/)).toBeInTheDocument()
+})
+
+test('clicking a filter will change url', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/category/mens-clothing-jackets')
+    const {user} = renderWithProviders(<MockedComponent />, {
+        wrapperProps: {siteAlias: 'uk', locale: {id: 'en-GB'}}
+    })
+    // NOTE: Look for a better wait to wait an additional render.
+    await waitFor(() => !!screen.getByText(/Beige/i))
+
+    await user.click(screen.getByText(/Beige/i))
+    await waitFor(() =>
+        expect(window.location.search).toBe(
+            '?limit=25&refine=c_refinementColor%3DBeige&sort=best-matches'
+        )
+    )
+})
+
+test('click on Clear All should clear out all the filter in search params', async () => {
+    window.history.pushState(
+        {},
+        'ProductList',
+        '/uk/en-GB/category/mens-clothing-jackets?limit=25&refine=c_refinementColor%3DBeige&sort=best-matches'
+    )
+    const {user} = renderWithProviders(<MockedComponent />, {
+        wrapperProps: {siteAlias: 'uk', locale: {id: 'en-GB'}}
+    })
+    const clearAllButton = await screen.findAllByText(/Clear All/i)
+    await user.click(clearAllButton[0])
+    await waitFor(() => expect(window.location.search).toBe('?limit=25&offset=0&sort=best-matches'))
+})
+
+test('should display Search Results for when searching', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/search?q=test')
+    renderWithProviders(<MockedComponent />, {
+        wrapperProps: {siteAlias: 'uk', locale: {id: 'en-GB'}}
+    })
+    expect(await screen.findByTestId('sf-product-list-page')).toBeInTheDocument()
+})
+
+test('clicking a filter on search result will change url', async () => {
+    window.history.pushState({}, 'ProductList', '/uk/en-GB/search?q=dress')
+    const {user} = renderWithProviders(<MockedComponent />, {
+        wrapperProps: {siteAlias: 'uk', locale: {id: 'en-GB'}}
+    })
+
+    // NOTE: Look for a better wait to wait an additional render.
+    await waitFor(() => !!screen.getByText(/Beige/i))
+
+    await user.click(screen.getByText(/Beige/i))
+
+    await waitFor(() =>
+        expect(window.location.search).toBe(
+            '?limit=25&q=dress&refine=c_refinementColor%3DBeige&sort=best-matches'
+        )
+    )
+})

package/app/pages/product-list/partials/above-page-header.jsx

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023, Salesforce, 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
+ */
+
+const AbovePageHeader = () => null
+
+export default AbovePageHeader

package/app/pages/product-list/partials/checkbox-refinements.jsx

@@ -0,0 +1,41 @@
+/*
+ * 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 {Box, Checkbox, Stack} from '@chakra-ui/react'
+import PropTypes from 'prop-types'
+
+const CheckboxRefinements = ({filter, toggleFilter, selectedFilters}) => {
+    return (
+        <Stack spacing={1}>
+            {filter.values
+                ?.filter((refinementValue) => refinementValue.hitCount > 0)
+                .map((value) => {
+                    const isChecked = selectedFilters.includes(value.value)
+
+                    return (
+                        <Box key={value.value}>
+                            <Checkbox
+                                isChecked={isChecked}
+                                onChange={() => toggleFilter(value, filter.attributeId, isChecked)}
+                            >
+                                {value.label}
+                            </Checkbox>
+                        </Box>
+                    )
+                })}
+        </Stack>
+    )
+}
+
+CheckboxRefinements.propTypes = {
+    filter: PropTypes.object,
+    toggleFilter: PropTypes.func,
+    selectedFilters: PropTypes.array
+}
+
+export default CheckboxRefinements

package/app/pages/product-list/partials/checkbox-refinements.test.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2022, Salesforce, 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 CheckboxRefinements from '@salesforce/retail-react-app/app/pages/product-list/partials/checkbox-refinements'
+
+const data = {
+    attributeId: 'c_refinementColor',
+    label: 'Colour',
+    values: [
+        {
+            hitCount: 13,
+            label: 'Beige',
+            presentationId: 'beige',
+            value: 'Beige'
+        },
+        {
+            hitCount: 149,
+            label: 'Black',
+            presentationId: 'black',
+            value: 'Black'
+        },
+        {
+            hitCount: 109,
+            label: 'Blue',
+            presentationId: 'blue',
+            value: 'Blue'
+        }
+    ]
+}
+
+describe('Components', function () {
+    test('renders without crashing', async () => {
+        const onToggleFilter = jest.fn()
+        renderWithProviders(
+            <CheckboxRefinements
+                filter={data}
+                toggleFilter={onToggleFilter}
+                selectedFilters={['Blue', 'Beige']}
+            />
+        )
+        expect(screen.getByText(/beige/i)).toBeInTheDocument()
+
+        expect(screen.getByText(/blue/i)).toBeInTheDocument()
+    })
+})

package/app/pages/product-list/partials/color-refinements.jsx

@@ -0,0 +1,88 @@
+/*
+ * 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 {Box, SimpleGrid, HStack, Text, Button, Center, useMultiStyleConfig} from '@chakra-ui/react'
+import PropTypes from 'prop-types'
+import {cssColorGroups} from '@salesforce/retail-react-app/app/constants'
+
+const ColorRefinements = ({filter, toggleFilter, selectedFilters}) => {
+    const styles = useMultiStyleConfig('SwatchGroup', {
+        variant: 'circle',
+        disabled: false
+    })
+
+    return (
+        <SimpleGrid columns={2} spacing={2} mt={1}>
+            {filter.values
+                .filter((refinementValue) => refinementValue.hitCount > 0)
+                .map((value, idx) => {
+                    const isSelected = selectedFilters.includes(value.value)
+
+                    return (
+                        <Box key={idx}>
+                            <HStack
+                                onClick={() => toggleFilter(value, filter.attributeId, isSelected)}
+                                spacing={1}
+                                cursor="pointer"
+                            >
+                                <Button
+                                    {...styles.swatch}
+                                    color={isSelected ? 'black' : 'gray.200'}
+                                    border={isSelected ? '1px' : '0'}
+                                    aria-checked={isSelected}
+                                    variant="outline"
+                                    marginRight={0}
+                                    marginBottom="-1px"
+                                >
+                                    <Center
+                                        {...styles.swatchButton}
+                                        marginRight={0}
+                                        border={
+                                            value.label.toLowerCase() === 'white' &&
+                                            '1px solid black'
+                                        }
+                                    >
+                                        <Box
+                                            marginRight={0}
+                                            height="100%"
+                                            width="100%"
+                                            minWidth="32px"
+                                            backgroundRepeat="no-repeat"
+                                            backgroundSize="cover"
+                                            backgroundColor={
+                                                cssColorGroups[value.presentationId.toLowerCase()]
+                                            }
+                                            background={
+                                                value.presentationId.toLowerCase() ===
+                                                    'miscellaneous' &&
+                                                cssColorGroups[value.presentationId.toLowerCase()]
+                                            }
+                                        />
+                                    </Center>
+                                </Button>
+                                <Text
+                                    display="flex"
+                                    alignItems="center"
+                                    fontSize="sm"
+                                    marginBottom="1px"
+                                >{`${value.label} (${value.hitCount})`}</Text>
+                            </HStack>
+                        </Box>
+                    )
+                })}
+        </SimpleGrid>
+    )
+}
+
+ColorRefinements.propTypes = {
+    filter: PropTypes.object,
+    toggleFilter: PropTypes.func,
+    selectedFilters: PropTypes.array
+}
+
+export default ColorRefinements

package/app/pages/product-list/partials/empty-results.jsx

@@ -0,0 +1,118 @@
+/*
+ * 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 {Button, Text, Flex, Stack, Link} from '@chakra-ui/react'
+import PropTypes from 'prop-types'
+import {Link as RouteLink} from 'react-router-dom'
+import {defineMessage, FormattedMessage, useIntl} from 'react-intl'
+import {SearchIcon} from '@salesforce/retail-react-app/app/components/icons'
+import RecommendedProducts from '@salesforce/retail-react-app/app/components/recommended-products'
+import {EINSTEIN_RECOMMENDERS} from '@salesforce/retail-react-app/app/constants'
+
+const contactUsMessage = defineMessage({
+    id: 'empty_search_results.link.contact_us',
+    defaultMessage: 'Contact Us'
+})
+
+const EmptySearchResults = ({searchQuery, category}) => {
+    const intl = useIntl()
+    return (
+        <Flex
+            data-testid="sf-product-empty-list-page"
+            direction="column"
+            alignItems="center"
+            textAlign="center"
+            paddingTop={28}
+            paddingBottom={28}
+        >
+            <SearchIcon boxSize={[6, 12, 12, 12]} marginBottom={5} />
+            {!searchQuery ? (
+                <Fragment>
+                    {' '}
+                    <Text fontSize={['l', 'l', 'xl', '2xl']} fontWeight="700" marginBottom={2}>
+                        {intl.formatMessage(
+                            {
+                                id: 'empty_search_results.info.cant_find_anything_for_category',
+                                defaultMessage:
+                                    'We couldn’t find anything for {category}. Try searching for a product or {link}.'
+                            },
+                            {
+                                category: category.name,
+                                link: (
+                                    <Link as={RouteLink} to={'/'}>
+                                        {intl.formatMessage(contactUsMessage)}
+                                    </Link>
+                                )
+                            }
+                        )}
+                    </Text>{' '}
+                </Fragment>
+            ) : (
+                <Fragment>
+                    <Text fontSize={['lg', 'lg', 'xl', '3xl']} fontWeight="700" marginBottom={2}>
+                        {intl.formatMessage(
+                            {
+                                id: 'empty_search_results.info.cant_find_anything_for_query',
+                                defaultMessage: 'We couldn’t find anything for "{searchQuery}".'
+                            },
+                            {
+                                searchQuery: searchQuery
+                            }
+                        )}
+                    </Text>
+                    <Text fontSize={['md', 'md', 'md', 'md']} fontWeight="400">
+                        {intl.formatMessage(
+                            {
+                                id: 'empty_search_results.info.double_check_spelling',
+                                defaultMessage:
+                                    'Double-check your spelling and try again or {link}.'
+                            },
+                            {
+                                link: (
+                                    <Button variant="link" to={'/'}>
+                                        {intl.formatMessage(contactUsMessage)}
+                                    </Button>
+                                )
+                            }
+                        )}
+                    </Text>
+                    <Stack spacing={16} marginTop={32}>
+                        <RecommendedProducts
+                            title={
+                                <FormattedMessage
+                                    defaultMessage="Top Sellers"
+                                    id="empty_search_results.recommended_products.title.top_sellers"
+                                />
+                            }
+                            recommender={EINSTEIN_RECOMMENDERS.EMPTY_SEARCH_RESULTS_TOP_SELLERS}
+                            mx={{base: -4, md: -8, lg: 0}}
+                        />
+
+                        <RecommendedProducts
+                            title={
+                                <FormattedMessage
+                                    defaultMessage="Most Viewed"
+                                    id="empty_search_results.recommended_products.title.most_viewed"
+                                />
+                            }
+                            recommender={EINSTEIN_RECOMMENDERS.EMPTY_SEARCH_RESULTS_MOST_VIEWED}
+                            mx={{base: -4, md: -8, lg: 0}}
+                        />
+                    </Stack>
+                </Fragment>
+            )}
+        </Flex>
+    )
+}
+
+EmptySearchResults.propTypes = {
+    searchQuery: PropTypes.string,
+    category: PropTypes.object
+}
+
+export default EmptySearchResults

package/app/pages/product-list/partials/link-refinements.jsx

@@ -0,0 +1,38 @@
+/*
+ * 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 {Stack, Text} from '@chakra-ui/react'
+import PropTypes from 'prop-types'
+import Link from '@salesforce/retail-react-app/app/components/link'
+
+const LinkRefinements = ({filter}) => {
+    return (
+        <Stack spacing={1}>
+            {filter.values.map((value) => {
+                return (
+                    <Link
+                        display="flex"
+                        alignItems="center"
+                        lineHeight={{base: '44px', lg: '24px'}}
+                        key={value.value}
+                        href={`/category/${value.value}`}
+                        useNavLink
+                    >
+                        <Text fontSize="sm">{value.label}</Text>
+                    </Link>
+                )
+            })}
+        </Stack>
+    )
+}
+
+LinkRefinements.propTypes = {
+    filter: PropTypes.object
+}
+
+export default LinkRefinements

package/app/pages/product-list/partials/page-header.jsx

@@ -0,0 +1,42 @@
+/*
+ * 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 {Box, Heading, Flex, Text, Fade} from '@chakra-ui/react'
+
+// Project Components
+import Breadcrumb from '@salesforce/retail-react-app/app/components/breadcrumb'
+
+const PageHeader = ({category, productSearchResult, isLoading, searchQuery, ...otherProps}) => {
+    return (
+        <Box {...otherProps} data-testid="sf-product-list-breadcrumb">
+            {/* Breadcrumb */}
+            {category && <Breadcrumb categories={category.parentCategoryTree} />}
+            {searchQuery && <Text>Search Results for</Text>}
+            {/* Category Title */}
+            <Flex>
+                <Heading as="h2" size="lg" marginRight={2}>
+                    {`${category?.name || searchQuery || ''}`}
+                </Heading>
+                <Heading as="h2" size="lg" marginRight={2}>
+                    {!isLoading && <Fade in={true}>({productSearchResult?.total})</Fade>}
+                </Heading>
+            </Flex>
+        </Box>
+    )
+}
+
+PageHeader.propTypes = {
+    category: PropTypes.object,
+    productSearchResult: PropTypes.object,
+    isLoading: PropTypes.bool,
+    searchQuery: PropTypes.string
+}
+
+export default PageHeader

package/app/pages/product-list/partials/radio-refinements.jsx

@@ -0,0 +1,60 @@
+/*
+ * 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 {Box, Text, Radio, RadioGroup, Stack} from '@chakra-ui/react'
+import PropTypes from 'prop-types'
+
+const RadioRefinements = ({filter, toggleFilter, selectedFilters}) => {
+    return (
+        <Box>
+            <RadioGroup
+                // The following `false` fallback is required to avoid the radio group
+                // from switching to "uncontrolled mode" when `selectedFilters` is empty.
+                value={selectedFilters[0] ?? false}
+            >
+                <Stack spacing={1}>
+                    {filter.values
+                        .filter((refinementValue) => refinementValue.hitCount > 0)
+                        .map((value) => {
+                            return (
+                                <Box key={value.value}>
+                                    <Radio
+                                        display="flex"
+                                        alignItems="center"
+                                        height={{base: '44px', lg: '24px'}}
+                                        value={value.value}
+                                        onChange={() =>
+                                            toggleFilter(
+                                                value,
+                                                filter.attributeId,
+                                                selectedFilters.includes(value.value),
+                                                false
+                                            )
+                                        }
+                                        fontSize="sm"
+                                    >
+                                        <Text marginLeft={-1} fontSize="sm">
+                                            {value.label}
+                                        </Text>
+                                    </Radio>
+                                </Box>
+                            )
+                        })}
+                </Stack>
+            </RadioGroup>
+        </Box>
+    )
+}
+
+RadioRefinements.propTypes = {
+    filter: PropTypes.object,
+    toggleFilter: PropTypes.func,
+    selectedFilters: PropTypes.array
+}
+
+export default RadioRefinements