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

package/app/components/search/index.jsx

@@ -0,0 +1,279 @@
+/*
+ * 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, {useEffect, useMemo, useRef, useState} from 'react'
+import {useSearchSuggestions} from '@salesforce/commerce-sdk-react'
+import {
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Popover,
+    PopoverTrigger,
+    PopoverContent,
+    Button,
+    Box,
+    Flex,
+    HStack,
+    Spinner
+} from '@chakra-ui/react'
+import SearchSuggestions from '@salesforce/retail-react-app/app/components/search/partials/search-suggestions'
+import {SearchIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {
+    capitalize,
+    boldString,
+    getSessionJSONItem,
+    setSessionJSONItem
+} from '@salesforce/retail-react-app/app/utils/utils'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
+import {FormattedMessage} from 'react-intl'
+import debounce from 'lodash/debounce'
+import {
+    RECENT_SEARCH_KEY,
+    RECENT_SEARCH_LIMIT,
+    RECENT_SEARCH_MIN_LENGTH
+} from '@salesforce/retail-react-app/app/constants'
+import {
+    productUrlBuilder,
+    searchUrlBuilder,
+    categoryUrlBuilder
+} from '@salesforce/retail-react-app/app/utils/url'
+
+const formatSuggestions = (searchSuggestions, input) => {
+    return {
+        categorySuggestions: searchSuggestions?.categorySuggestions?.categories?.map(
+            (suggestion) => {
+                return {
+                    type: 'category',
+                    id: suggestion.id,
+                    link: categoryUrlBuilder({id: suggestion.id}),
+                    name: boldString(suggestion.name, capitalize(input))
+                }
+            }
+        ),
+        productSuggestions: searchSuggestions?.productSuggestions?.products?.map((product) => {
+            return {
+                type: 'product',
+                currency: product.currency,
+                price: product.price,
+                productId: product.productId,
+                name: boldString(product.productName, capitalize(input)),
+                link: productUrlBuilder({id: product.productId})
+            }
+        }),
+        phraseSuggestions: searchSuggestions?.categorySuggestions?.suggestedPhrases?.map(
+            (phrase) => {
+                return {
+                    type: 'phrase',
+                    name: boldString(phrase.phrase, capitalize(input)),
+                    link: searchUrlBuilder(phrase.phrase)
+                }
+            }
+        )
+    }
+}
+
+/**
+ * The SearchInput component is a stylized
+ * text input made specifically for use in
+ * the application header.
+ * @param  {object} props
+ * @param  {object} ref reference to the input element
+ * @return  {React.ReactElement} - SearchInput component
+ */
+const Search = (props) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const [searchQuery, setSearchQuery] = useState('')
+    const navigate = useNavigation()
+    const searchSuggestion = useSearchSuggestions(
+        {
+            parameters: {
+                q: searchQuery
+            }
+        },
+        {
+            enabled: searchQuery?.length >= RECENT_SEARCH_MIN_LENGTH
+        }
+    )
+    const searchInputRef = useRef()
+    const recentSearches = getSessionJSONItem(RECENT_SEARCH_KEY)
+    const searchSuggestions = useMemo(
+        () => formatSuggestions(searchSuggestion.data, searchInputRef?.current?.value),
+        [searchSuggestion]
+    )
+
+    // check if popover should open if we have suggestions
+    useEffect(() => {
+        shouldOpenPopover()
+    }, [searchQuery, searchSuggestion.data])
+
+    const searchSuggestionsAvailable =
+        searchSuggestions &&
+        (searchSuggestions?.categorySuggestions?.length ||
+            searchSuggestions?.phraseSuggestions?.length)
+
+    const saveRecentSearch = (searchText) => {
+        // Get recent searches or an empty array if undefined.
+        let searches = getSessionJSONItem(RECENT_SEARCH_KEY) || []
+
+        // Check if term is already in the saved searches
+        searches = searches.filter((savedSearchTerm) => {
+            return searchText.toLowerCase() !== savedSearchTerm.toLowerCase()
+        })
+
+        // Create a new array consisting of the search text and up to 4 other resent searches.
+        // I'm assuming the order is newest to oldest.
+        searches = [searchText, ...searches].slice(0, RECENT_SEARCH_LIMIT)
+
+        // Replace the save resent search with the updated value.
+        setSessionJSONItem(RECENT_SEARCH_KEY, searches)
+    }
+
+    const debouncedSearch = debounce((input) => {
+        debouncedSearch.cancel()
+        setSearchQuery(input)
+    }, 300)
+
+    const onSearchChange = async (e) => {
+        const input = e.target.value
+        if (input.length >= RECENT_SEARCH_MIN_LENGTH) {
+            debouncedSearch(input)
+        } else {
+            setSearchQuery('')
+        }
+    }
+
+    const clearInput = () => {
+        searchInputRef.current.blur()
+        setIsOpen(false)
+    }
+
+    const onSubmitSearch = (e) => {
+        e.preventDefault()
+        // Avoid blank spaces to be searched
+        let searchText = searchInputRef.current.value.trim()
+        // Avoid empty string searches
+        if (searchText.length < 1) {
+            return
+        }
+        saveRecentSearch(searchText)
+        clearInput()
+        navigate(searchUrlBuilder(searchText))
+    }
+
+    const closeAndNavigate = (link) => {
+        if (!link) {
+            clearInput()
+            setIsOpen(false)
+        } else {
+            clearInput()
+            setIsOpen(false)
+            navigate(link)
+        }
+    }
+
+    const shouldOpenPopover = () => {
+        // As per design we only want to show the popover if the input is focused and we have recent searches saved
+        // or we have search suggestions available and have inputed some text (empty text in this scenario should show recent searches)
+        if (
+            (document.activeElement.id === 'search-input' && recentSearches?.length > 0) ||
+            (searchSuggestionsAvailable && searchInputRef.current.value.length > 0)
+        ) {
+            setIsOpen(true)
+        } else {
+            setIsOpen(false)
+        }
+    }
+
+    const onSearchInputChange = (e) => {
+        onSearchChange(e)
+        shouldOpenPopover()
+    }
+
+    return (
+        <Box>
+            <Popover isOpen={isOpen} isLazy initialFocusRef={searchInputRef}>
+                <PopoverTrigger>
+                    <form onSubmit={onSubmitSearch}>
+                        <HStack>
+                            <InputGroup>
+                                <InputLeftElement pointerEvents="none">
+                                    <SearchIcon />
+                                </InputLeftElement>
+                                <Input
+                                    autoComplete="off"
+                                    id="search-input"
+                                    onChange={(e) => onSearchInputChange(e)}
+                                    onFocus={() => shouldOpenPopover()}
+                                    onBlur={() => setIsOpen(false)}
+                                    type="search"
+                                    ref={searchInputRef}
+                                    {...props}
+                                    variant="filled"
+                                />
+                            </InputGroup>
+                            <HideOnDesktop>
+                                <Button
+                                    display={isOpen ? 'block' : 'none'}
+                                    variant="link"
+                                    size="sm"
+                                    onMouseDown={() => closeAndNavigate(false)}
+                                >
+                                    <FormattedMessage
+                                        defaultMessage="Cancel"
+                                        id="search.action.cancel"
+                                    />
+                                </Button>
+                            </HideOnDesktop>
+                        </HStack>
+                    </form>
+                </PopoverTrigger>
+
+                <HideOnMobile>
+                    <PopoverContent data-testid="sf-suggestion-popover">
+                        <SearchSuggestions
+                            closeAndNavigate={closeAndNavigate}
+                            recentSearches={recentSearches}
+                            searchSuggestions={searchSuggestions}
+                        />
+                    </PopoverContent>
+                </HideOnMobile>
+            </Popover>
+            <HideOnDesktop>
+                <Flex
+                    display={isOpen || searchInputRef?.value?.length > 0 ? 'block' : 'none'}
+                    postion="absolute"
+                    background="white"
+                    left={0}
+                    right={0}
+                    height="100vh"
+                >
+                    {searchSuggestion.isLoading ? (
+                        <Spinner
+                            position="absolute"
+                            top="50%"
+                            left="50%"
+                            opacity={0.85}
+                            color="blue.600"
+                            zIndex="9999"
+                            margin="-25px 0 0 -25px"
+                        />
+                    ) : (
+                        <SearchSuggestions
+                            closeAndNavigate={closeAndNavigate}
+                            recentSearches={recentSearches}
+                            searchSuggestions={searchSuggestions}
+                        />
+                    )}
+                </Flex>
+            </HideOnDesktop>
+        </Box>
+    )
+}
+
+Search.displayName = 'SearchInput'
+
+export default Search

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

@@ -0,0 +1,127 @@
+/*
+ * 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,
+    createPathWithDefaults
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import userEvent from '@testing-library/user-event'
+import {screen, waitFor, within} from '@testing-library/react'
+import SearchInput from '@salesforce/retail-react-app/app/components/search/index'
+import Suggestions from '@salesforce/retail-react-app/app/components/search/partials/suggestions'
+import {
+    clearSessionJSONItem,
+    getSessionJSONItem,
+    setSessionJSONItem,
+    noop
+} from '@salesforce/retail-react-app/app/utils/utils'
+import {RECENT_SEARCH_KEY, RECENT_SEARCH_LIMIT} from '@salesforce/retail-react-app/app/constants'
+import mockSearchResults from '@salesforce/retail-react-app/app/mocks/searchResults'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {rest} from 'msw'
+import {mockCustomerBaskets} from '@salesforce/retail-react-app/app/mocks/mock-data'
+
+beforeEach(() => {
+    clearSessionJSONItem(RECENT_SEARCH_KEY)
+    jest.resetModules()
+    global.server.use(
+        rest.get('*/search-suggestions', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockSearchResults))
+        }),
+        rest.get('*/customers/:customerId/baskets', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockCustomerBaskets))
+        })
+    )
+})
+
+test('renders SearchInput', () => {
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+    expect(searchInput).toBeInTheDocument()
+})
+
+test('changes url when enter is pressed', async () => {
+    const user = userEvent.setup()
+
+    renderWithProviders(<SearchInput />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
+    const searchInput = document.querySelector('input[type="search"]')
+    await user.type(searchInput, 'Dresses{enter}')
+    await waitFor(() => {
+        expect(window.location.pathname).toEqual(createPathWithDefaults('/search'))
+        expect(window.location.search).toBe('?q=Dresses')
+        const suggestionPopoverEl = screen.getByTestId('sf-suggestion-popover')
+        expect(suggestionPopoverEl).toBeInTheDocument()
+    })
+})
+
+test('shows previously searched items when focused', async () => {
+    const user = userEvent.setup()
+
+    setSessionJSONItem(RECENT_SEARCH_KEY, ['Dresses', 'Suits', 'Tops'])
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+    await user.clear(searchInput)
+    await searchInput.focus()
+    const suggestionPopoverEl = await screen.getByTestId('sf-suggestion-popover')
+    const recentSearchesEl = await within(suggestionPopoverEl).getByTestId('sf-suggestion-recent')
+    expect(recentSearchesEl).toBeInTheDocument()
+    expect(
+        document.querySelectorAll('[data-testid=sf-suggestion-popover] button[name=recent-search]')
+    ).toHaveLength(3)
+})
+
+test('saves recent searches on submit', async () => {
+    const user = userEvent.setup()
+    setSessionJSONItem(RECENT_SEARCH_KEY, ['Dresses', 'Suits', 'Tops'])
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+    await user.type(searchInput, 'Gloves{enter}')
+    expect(getSessionJSONItem(RECENT_SEARCH_KEY)).toHaveLength(4)
+})
+
+test('limits number of saved recent searches', async () => {
+    const user = userEvent.setup()
+
+    setSessionJSONItem(RECENT_SEARCH_KEY, ['Dresses', 'Suits', 'Tops', 'Gloves', 'Bracelets'])
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+    await user.type(searchInput, 'Ties{enter}')
+    expect(getSessionJSONItem(RECENT_SEARCH_KEY)).toHaveLength(RECENT_SEARCH_LIMIT)
+})
+
+test('suggestions render when there are some', async () => {
+    const user = userEvent.setup()
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+    await user.type(searchInput, 'Dress')
+    expect(searchInput.value).toBe('Dress')
+    const suggestionPopoverEl = await screen.getByTestId('sf-suggestion-popover')
+    await waitFor(() => {
+        const suggestionsEl = within(suggestionPopoverEl).getByTestId('sf-suggestion')
+        expect(suggestionsEl.querySelector('button').textContent).toBe('Dresses')
+    })
+})
+
+test('clicking clear searches clears recent searches', async () => {
+    const user = userEvent.setup()
+    setSessionJSONItem(RECENT_SEARCH_KEY, ['Dresses', 'Suits', 'Tops'])
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+    await searchInput.focus()
+    const clearSearch = document.getElementById('clear-search')
+    await user.click(clearSearch)
+    expect(getSessionJSONItem(RECENT_SEARCH_KEY)).toBeUndefined()
+})
+
+test('passing undefined to Suggestions returns undefined', async () => {
+    const suggestions = renderWithProviders(
+        <Suggestions suggestions={undefined} closeAndNavigate={noop} />
+    )
+    expect(suggestions.innerHTML).toBeUndefined()
+})

package/app/components/search/partials/recent-searches.jsx

@@ -0,0 +1,76 @@
+/*
+ * 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 {Text, Button, Box} from '@chakra-ui/react'
+
+import {clearSessionJSONItem} from '@salesforce/retail-react-app/app/utils/utils'
+import {RECENT_SEARCH_KEY} from '@salesforce/retail-react-app/app/constants'
+
+import {FormattedMessage} from 'react-intl'
+import {searchUrlBuilder} from '@salesforce/retail-react-app/app/utils/url'
+
+const RecentSearches = ({recentSearches, closeAndNavigate}) => {
+    const clearSearches = () => {
+        clearSessionJSONItem(RECENT_SEARCH_KEY)
+        closeAndNavigate(false)
+    }
+    return (
+        <Box>
+            {recentSearches?.length > 0 && (
+                <Box>
+                    <Text fontWeight="700" fontSize={'md'} data-testid="sf-suggestion-recent">
+                        <FormattedMessage
+                            defaultMessage="Recent Searches"
+                            id="recent_searches.heading.recent_searches"
+                        />
+                    </Text>
+                    <Box mx={'-16px'}>
+                        {recentSearches.map((recentSearch, idx) => (
+                            <Button
+                                width="full"
+                                role="button"
+                                name="recent-search"
+                                fontSize={'md'}
+                                key={idx}
+                                onMouseDown={() => {
+                                    closeAndNavigate(searchUrlBuilder(recentSearch))
+                                }}
+                                variant="menu-link"
+                            >
+                                <Text fontWeight="400">{recentSearch}</Text>
+                            </Button>
+                        ))}
+                        <Button
+                            data-testid="sf-clear-search"
+                            id="clear-search"
+                            width="full"
+                            onMouseDown={() => {
+                                clearSearches()
+                            }}
+                            variant="menu-link"
+                        >
+                            <Text fontWeight="400" color="blue.600" fontSize={'md'}>
+                                <FormattedMessage
+                                    defaultMessage="Clear recent searches"
+                                    id="recent_searches.action.clear_searches"
+                                />
+                            </Text>
+                        </Button>
+                    </Box>
+                </Box>
+            )}
+        </Box>
+    )
+}
+
+RecentSearches.propTypes = {
+    recentSearches: PropTypes.array,
+    closeAndNavigate: PropTypes.func
+}
+
+export default RecentSearches

package/app/components/search/partials/search-suggestions.jsx

@@ -0,0 +1,45 @@
+/*
+ * 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 {Stack} from '@chakra-ui/react'
+import RecentSearches from '@salesforce/retail-react-app/app/components/search/partials/recent-searches'
+import Suggestions from '@salesforce/retail-react-app/app/components/search/partials/suggestions'
+
+const SearchSuggestions = ({recentSearches, searchSuggestions, closeAndNavigate}) => {
+    const useSuggestions = searchSuggestions && searchSuggestions?.categorySuggestions?.length
+    return (
+        <Stack padding={6} spacing={0}>
+            {useSuggestions ? (
+                <Fragment>
+                    <Suggestions
+                        closeAndNavigate={closeAndNavigate}
+                        suggestions={searchSuggestions?.categorySuggestions}
+                    />
+                    {/* <Suggestions
+                        closeAndNavigate={closeAndNavigate}
+                        suggestions={searchSuggestions?.phraseSuggestions}
+                    /> */}
+                    {/* <Suggestions suggestions={searchSuggestions.productSuggestions} /> */}
+                </Fragment>
+            ) : (
+                <RecentSearches
+                    recentSearches={recentSearches}
+                    closeAndNavigate={closeAndNavigate}
+                />
+            )}
+        </Stack>
+    )
+}
+
+SearchSuggestions.propTypes = {
+    recentSearches: PropTypes.array,
+    searchSuggestions: PropTypes.object,
+    closeAndNavigate: PropTypes.func
+}
+
+export default SearchSuggestions

package/app/components/search/partials/suggestions.jsx

@@ -0,0 +1,43 @@
+/*
+ * 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 {Text, Button, Stack, Box} from '@chakra-ui/react'
+
+const Suggestions = ({suggestions, closeAndNavigate}) => {
+    if (!suggestions) {
+        return null
+    }
+    return (
+        <Stack spacing={0} data-testid="sf-suggestion">
+            <Box mx={'-16px'}>
+                {suggestions.map((suggestion, idx) => (
+                    <Button
+                        width="full"
+                        onMouseDown={() => closeAndNavigate(suggestion.link)}
+                        fontSize={'md'}
+                        key={idx}
+                        marginTop={0}
+                        variant="menu-link"
+                    >
+                        <Text
+                            fontWeight="400"
+                            dangerouslySetInnerHTML={{__html: suggestion.name}}
+                        />
+                    </Button>
+                ))}
+            </Box>
+        </Stack>
+    )
+}
+
+Suggestions.propTypes = {
+    suggestions: PropTypes.array,
+    closeAndNavigate: PropTypes.func
+}
+
+export default Suggestions

package/app/components/section/index.jsx

@@ -0,0 +1,68 @@
+/*
+ * 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, Heading, Stack, Text, Container} from '@chakra-ui/react'
+
+/**
+ * Section component used on content pages like home page.
+ * This component helps with creating a consistent layout and
+ * consistent typography styles for section headings.
+ */
+const Section = ({title, subtitle, actions, maxWidth, children, ...props}) => {
+    const sectionMaxWidth = maxWidth || '3xl'
+    return (
+        <Box as={'section'} paddingBottom="16" {...props}>
+            <Stack spacing={4} as={Container} maxW={sectionMaxWidth} textAlign={'center'}>
+                {title && (
+                    <Heading as="h2" fontSize={40} textAlign="center">
+                        {title}
+                    </Heading>
+                )}
+                {subtitle && (
+                    <Text color={'gray.700'} fontWeight={600}>
+                        {subtitle}
+                    </Text>
+                )}
+                {actions && (
+                    <Box paddingTop="2" width={{base: 'full', md: 'auto'}}>
+                        {actions}
+                    </Box>
+                )}
+            </Stack>
+            {children}
+        </Box>
+    )
+}
+
+Section.displayName = 'Section'
+
+Section.propTypes = {
+    /**
+     * Section component main title
+     */
+    title: PropTypes.string,
+    /**
+     * Section component subtitle
+     */
+    subtitle: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.node]),
+    /**
+     * Section children node(s)
+     */
+    children: PropTypes.node,
+    /**
+     * Call to action component(s)
+     */
+    actions: PropTypes.element,
+    /**
+     * Section maximum width
+     */
+    maxWidth: PropTypes.string
+}
+
+export default Section

package/app/components/seo/index.jsx

@@ -0,0 +1,33 @@
+/*
+ * 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 {DEFAULT_SITE_TITLE} from '@salesforce/retail-react-app/app/constants'
+
+const Seo = ({title, description, noIndex, children, ...props}) => {
+    const fullTitle = title ? `${title} | ${DEFAULT_SITE_TITLE}` : DEFAULT_SITE_TITLE
+
+    return (
+        <Helmet {...props}>
+            <title>{fullTitle}</title>
+            {description && <meta name="description" content={description} />}
+            {noIndex && <meta name="robots" content="noindex" />}
+            {children}
+        </Helmet>
+    )
+}
+
+Seo.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    noIndex: PropTypes.bool,
+    children: PropTypes.node
+}
+
+export default Seo