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

package/app/pages/product-list/index.jsx

@@ -0,0 +1,735 @@
+/*
+ * 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, {useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import {useHistory, useLocation, useParams} from 'react-router-dom'
+import {FormattedMessage, useIntl} from 'react-intl'
+import {Helmet} from 'react-helmet'
+import {
+    useCategory,
+    useCustomerId,
+    useProductSearch,
+    useShopperCustomersMutation
+} from '@salesforce/commerce-sdk-react'
+import {useServerContext} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
+
+// Components
+import {
+    Box,
+    Flex,
+    SimpleGrid,
+    Grid,
+    Select,
+    Text,
+    FormControl,
+    Stack,
+    useDisclosure,
+    Button,
+    Modal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    ModalContent,
+    ModalCloseButton,
+    ModalOverlay,
+    Drawer,
+    DrawerBody,
+    DrawerHeader,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerCloseButton
+} from '@chakra-ui/react'
+
+// Project Components
+import Pagination from '@salesforce/retail-react-app/app/components/pagination'
+import ProductTile, {
+    Skeleton as ProductTileSkeleton
+} from '@salesforce/retail-react-app/app/components/product-tile'
+import {HideOnDesktop} from '@salesforce/retail-react-app/app/components/responsive'
+import Refinements from '@salesforce/retail-react-app/app/pages/product-list/partials/refinements'
+import SelectedRefinements from '@salesforce/retail-react-app/app/pages/product-list/partials/selected-refinements'
+import EmptySearchResults from '@salesforce/retail-react-app/app/pages/product-list/partials/empty-results'
+import PageHeader from '@salesforce/retail-react-app/app/pages/product-list/partials/page-header'
+import AbovePageHeader from '@salesforce/retail-react-app/app/pages/product-list/partials/above-page-header'
+
+// Icons
+import {FilterIcon, ChevronDownIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+// Hooks
+import {
+    useLimitUrls,
+    usePageUrls,
+    useSortUrls,
+    useSearchParams
+} from '@salesforce/retail-react-app/app/hooks'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+// import {parse as parseSearchParams} from '../../hooks/use-search-params'
+import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+
+// Others
+import {HTTPNotFound, HTTPError} from '@salesforce/pwa-kit-react-sdk/ssr/universal/errors'
+
+// Constants
+import {
+    DEFAULT_LIMIT_VALUES,
+    API_ERROR_MESSAGE,
+    MAX_CACHE_AGE,
+    TOAST_ACTION_VIEW_WISHLIST,
+    TOAST_MESSAGE_ADDED_TO_WISHLIST,
+    TOAST_MESSAGE_REMOVED_FROM_WISHLIST
+} from '@salesforce/retail-react-app/app/constants'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
+import {useWishList} from '@salesforce/retail-react-app/app/hooks/use-wish-list'
+import {isHydrated} from '@salesforce/retail-react-app/app/utils/utils'
+
+// NOTE: You can ignore certain refinements on a template level by updating the below
+// list of ignored refinements.
+const REFINEMENT_DISALLOW_LIST = ['c_isNew']
+
+/*
+ * This is a simple product listing page. It displays a paginated list
+ * of product hit objects. Allowing for sorting and filtering based on the
+ * allowable filters and sort refinements.
+ */
+const ProductList = (props) => {
+    // Using destructuring to omit properties; we must rename `isLoading` because we use a different
+    // `isLoading` later in this function.
+    // eslint-disable-next-line react/prop-types, @typescript-eslint/no-unused-vars
+    const {isLoading: _unusedIsLoading, staticContext, ...rest} = props
+    const {isOpen, onOpen, onClose} = useDisclosure()
+    const {formatMessage} = useIntl()
+    const navigate = useNavigation()
+    const history = useHistory()
+    const params = useParams()
+    const location = useLocation()
+    const toast = useToast()
+    const einstein = useEinstein()
+    const {res} = useServerContext()
+    const customerId = useCustomerId()
+    const [searchParams, {stringify: stringifySearchParams}] = useSearchParams()
+
+    /**************** Page State ****************/
+    const [filtersLoading, setFiltersLoading] = useState(false)
+    const [wishlistLoading, setWishlistLoading] = useState([])
+    const [sortOpen, setSortOpen] = useState(false)
+
+    const urlParams = new URLSearchParams(location.search)
+    let searchQuery = urlParams.get('q')
+    const isSearch = !!searchQuery
+
+    if (params.categoryId) {
+        searchParams._refine.push(`cgid=${params.categoryId}`)
+    }
+
+    /**************** Mutation Actions ****************/
+    const {mutateAsync: createCustomerProductListItem} = useShopperCustomersMutation(
+        'createCustomerProductListItem'
+    )
+    const {mutateAsync: deleteCustomerProductListItem} = useShopperCustomersMutation(
+        'deleteCustomerProductListItem'
+    )
+
+    /**************** Query Actions ****************/
+    const {
+        isLoading,
+        isRefetching,
+        data: productSearchResult
+    } = useProductSearch(
+        {
+            parameters: {
+                ...searchParams,
+                refine: searchParams._refine
+            }
+        },
+        {
+            keepPreviousData: true
+        }
+    )
+
+    const {error, data: category} = useCategory(
+        {
+            parameters: {
+                id: params.categoryId
+            }
+        },
+        {
+            enabled: !isSearch && !!params.categoryId
+        }
+    )
+
+    // Apply disallow list to refinements.
+    if (productSearchResult?.refinements) {
+        productSearchResult.refinements = productSearchResult.refinements.filter(
+            ({attributeId}) => !REFINEMENT_DISALLOW_LIST.includes(attributeId)
+        )
+    }
+
+    /**************** Error Handling ****************/
+    const errorStatus = error?.response?.status
+    switch (errorStatus) {
+        case undefined:
+            // No Error.
+            break
+        case 404:
+            throw new HTTPNotFound('Category Not Found.')
+        default:
+            throw new HTTPError(`HTTP Error ${errorStatus} occurred.`)
+    }
+
+    /**************** Response Handling ****************/
+    if (res) {
+        res.set('Cache-Control', `max-age=${MAX_CACHE_AGE}`)
+    }
+
+    // Reset scroll position when `isRefetching` becomes `true`.
+    useEffect(() => {
+        isRefetching && window.scrollTo(0, 0)
+        setFiltersLoading(isRefetching)
+    }, [isRefetching])
+
+    /**************** Render Variables ****************/
+    const basePath = `${location.pathname}${location.search}`
+    const showNoResults = !isLoading && productSearchResult && !productSearchResult?.hits
+    const {total, sortingOptions} = productSearchResult || {}
+    const selectedSortingOptionLabel =
+        sortingOptions?.find(
+            (option) => option.id === productSearchResult?.selectedSortingOption
+        ) ?? sortingOptions?.[0]
+
+    // Get urls to be used for pagination, page size changes, and sorting.
+    const pageUrls = usePageUrls({total})
+    const sortUrls = useSortUrls({options: sortingOptions})
+    const limitUrls = useLimitUrls()
+
+    /**************** Action Handlers ****************/
+    const {data: wishlist} = useWishList()
+    const addItemToWishlist = async (product) => {
+        setWishlistLoading([...wishlistLoading, product.productId])
+
+        // TODO: This wishlist object is from an old API, we need to replace it with the new one.
+        const listId = wishlist.id
+        await createCustomerProductListItem(
+            {
+                parameters: {customerId, listId},
+                body: {
+                    quantity: 1,
+                    public: false,
+                    priority: 1,
+                    type: 'product',
+                    productId: product.productId
+                }
+            },
+            {
+                onError: () => {
+                    toast({
+                        title: formatMessage(API_ERROR_MESSAGE),
+                        status: 'error'
+                    })
+                },
+                onSuccess: () => {
+                    toast({
+                        title: formatMessage(TOAST_MESSAGE_ADDED_TO_WISHLIST, {quantity: 1}),
+                        status: 'success',
+                        action: (
+                            // it would be better if we could use <Button as={Link}>
+                            // but unfortunately the Link component is not compatible
+                            // with Chakra Toast, since the ToastManager is rendered via portal
+                            // and the toast doesn't have access to intl provider, which is a
+                            // requirement of the Link component.
+                            <Button variant="link" onClick={() => navigate('/account/wishlist')}>
+                                {formatMessage(TOAST_ACTION_VIEW_WISHLIST)}
+                            </Button>
+                        )
+                    })
+                },
+                onSettled: () => {
+                    setWishlistLoading(wishlistLoading.filter((id) => id !== product.productId))
+                }
+            }
+        )
+    }
+
+    const removeItemFromWishlist = async (product) => {
+        setWishlistLoading([...wishlistLoading, product.productId])
+
+        const listId = wishlist.id
+        const itemId = wishlist.customerProductListItems.find(
+            (i) => i.productId === product.productId
+        ).id
+
+        await deleteCustomerProductListItem(
+            {
+                body: {},
+                parameters: {customerId, listId, itemId}
+            },
+            {
+                onError: () => {
+                    toast({
+                        title: formatMessage(API_ERROR_MESSAGE),
+                        status: 'error'
+                    })
+                },
+                onSuccess: () => {
+                    toast({
+                        title: formatMessage(TOAST_MESSAGE_REMOVED_FROM_WISHLIST),
+                        status: 'success'
+                    })
+                },
+                onSettled: () => {
+                    setWishlistLoading(wishlistLoading.filter((id) => id !== product.productId))
+                }
+            }
+        )
+    }
+
+    // Toggles filter on and off
+    const toggleFilter = (value, attributeId, selected, allowMultiple = true) => {
+        const searchParamsCopy = {...searchParams}
+
+        // Remove the `offset` search param if present.
+        delete searchParamsCopy.offset
+
+        // If we aren't allowing for multiple selections, simply clear any value set for the
+        // attribute, and apply a new one if required.
+        if (!allowMultiple) {
+            const previousValue = searchParamsCopy.refine[attributeId]
+            delete searchParamsCopy.refine[attributeId]
+
+            // Note the loose comparison, for "string != number" checks.
+            if (!selected && value.value != previousValue) {
+                searchParamsCopy.refine[attributeId] = value.value
+            }
+        } else {
+            // Get the attibute value as an array.
+            let attributeValue = searchParamsCopy.refine[attributeId] || []
+
+            // Ensure that the value is still converted into an array if it's a `string` or `number`.
+            if (typeof attributeValue === 'string') {
+                attributeValue = attributeValue.split('|')
+            } else if (typeof attributeValue === 'number') {
+                attributeValue = [attributeValue]
+            }
+
+            // Either set the value, or filter the value out.
+            if (!selected) {
+                attributeValue.push(value.value)
+            } else {
+                // Note the loose comparison, for "string != number" checks.
+                attributeValue = attributeValue?.filter((v) => v != value.value)
+            }
+
+            // Update the attribute value in the new search params.
+            searchParamsCopy.refine[attributeId] = attributeValue
+
+            // If the update value is an empty array, remove the current attribute key.
+            if (searchParamsCopy.refine[attributeId].length === 0) {
+                delete searchParamsCopy.refine[attributeId]
+            }
+        }
+
+        if (isSearch) {
+            navigate(`/search?${stringifySearchParams(searchParamsCopy)}`)
+        } else {
+            navigate(`/category/${params.categoryId}?${stringifySearchParams(searchParamsCopy)}`)
+        }
+    }
+
+    // Clears all filters
+    const resetFilters = () => {
+        const newSearchParams = {
+            ...searchParams,
+            refine: []
+        }
+        const newPath = isSearch
+            ? `/search?${stringifySearchParams(newSearchParams)}`
+            : `/category/${params.categoryId}?${stringifySearchParams(newSearchParams)}`
+
+        navigate(newPath)
+    }
+
+    /**************** Einstein ****************/
+    useEffect(() => {
+        if (productSearchResult) {
+            isSearch
+                ? einstein.sendViewSearch(searchQuery, productSearchResult)
+                : einstein.sendViewCategory(category, productSearchResult)
+        }
+    }, [productSearchResult])
+
+    return (
+        <Box
+            className="sf-product-list-page"
+            data-testid="sf-product-list-page"
+            layerStyle="page"
+            paddingTop={{base: 6, lg: 8}}
+            {...rest}
+        >
+            <Helmet>
+                <title>{category?.pageTitle}</title>
+                <meta name="description" content={category?.pageDescription} />
+                <meta name="keywords" content={category?.pageKeywords} />
+            </Helmet>
+            {showNoResults ? (
+                <EmptySearchResults searchQuery={searchQuery} category={category} />
+            ) : (
+                <>
+                    <AbovePageHeader />
+                    {/* Header */}
+                    <Stack
+                        display={{base: 'none', lg: 'flex'}}
+                        direction="row"
+                        justify="flex-start"
+                        align="flex-start"
+                        spacing={4}
+                        marginBottom={6}
+                    >
+                        <Flex align="left" width="287px">
+                            <PageHeader
+                                searchQuery={searchQuery}
+                                category={category}
+                                productSearchResult={productSearchResult}
+                                isLoading={isLoading}
+                            />
+                        </Flex>
+
+                        <Box flex={1} paddingTop={'45px'}>
+                            <SelectedRefinements
+                                filters={productSearchResult?.refinements}
+                                toggleFilter={toggleFilter}
+                                handleReset={() => resetFilters()}
+                                selectedFilterValues={productSearchResult?.selectedRefinements}
+                            />
+                        </Box>
+                        <Box paddingTop={'45px'}>
+                            <Sort
+                                sortUrls={sortUrls}
+                                productSearchResult={productSearchResult}
+                                basePath={basePath}
+                            />
+                        </Box>
+                    </Stack>
+
+                    <HideOnDesktop>
+                        <Stack spacing={6}>
+                            <PageHeader
+                                searchQuery={searchQuery}
+                                category={category}
+                                productSearchResult={productSearchResult}
+                                isLoading={isLoading}
+                            />
+                            <Stack
+                                display={{base: 'flex', md: 'none'}}
+                                direction="row"
+                                justify="flex-start"
+                                align="center"
+                                spacing={1}
+                                height={12}
+                                borderColor="gray.100"
+                            >
+                                <Flex align="center">
+                                    <Button
+                                        fontSize="sm"
+                                        colorScheme="black"
+                                        variant="outline"
+                                        marginRight={2}
+                                        display="inline-flex"
+                                        leftIcon={<FilterIcon boxSize={5} />}
+                                        onClick={onOpen}
+                                    >
+                                        <FormattedMessage
+                                            defaultMessage="Filter"
+                                            id="product_list.button.filter"
+                                        />
+                                    </Button>
+                                </Flex>
+                                <Flex align="center">
+                                    <Button
+                                        maxWidth="245px"
+                                        fontSize="sm"
+                                        marginRight={2}
+                                        colorScheme="black"
+                                        variant="outline"
+                                        display="inline-flex"
+                                        rightIcon={<ChevronDownIcon boxSize={5} />}
+                                        onClick={() => setSortOpen(true)}
+                                    >
+                                        {formatMessage(
+                                            {
+                                                id: 'product_list.button.sort_by',
+                                                defaultMessage: 'Sort By: {sortOption}'
+                                            },
+                                            {
+                                                sortOption: selectedSortingOptionLabel?.label
+                                            }
+                                        )}
+                                    </Button>
+                                </Flex>
+                            </Stack>
+                        </Stack>
+                        <Box marginBottom={4}>
+                            <SelectedRefinements
+                                filters={productSearchResult?.refinements}
+                                toggleFilter={toggleFilter}
+                                selectedFilterValues={productSearchResult?.selectedRefinements}
+                            />
+                        </Box>
+                    </HideOnDesktop>
+
+                    {/* Body  */}
+                    <Grid templateColumns={{base: '1fr', md: '280px 1fr'}} columnGap={6}>
+                        <Stack display={{base: 'none', md: 'flex'}}>
+                            <Refinements
+                                isLoading={filtersLoading}
+                                toggleFilter={toggleFilter}
+                                filters={productSearchResult?.refinements}
+                                selectedFilters={searchParams.refine}
+                            />
+                        </Stack>
+                        <Box>
+                            <SimpleGrid
+                                columns={[2, 2, 3, 3]}
+                                spacingX={4}
+                                spacingY={{base: 12, lg: 16}}
+                            >
+                                {isHydrated() && (isRefetching || !productSearchResult)
+                                    ? new Array(searchParams.limit)
+                                          .fill(0)
+                                          .map((value, index) => (
+                                              <ProductTileSkeleton key={index} />
+                                          ))
+                                    : productSearchResult.hits.map((productSearchItem) => {
+                                          const productId = productSearchItem.productId
+                                          const isInWishlist =
+                                              !!wishlist?.customerProductListItems?.find(
+                                                  (item) => item.productId === productId
+                                              )
+
+                                          return (
+                                              <ProductTile
+                                                  data-testid={`sf-product-tile-${productSearchItem.productId}`}
+                                                  key={productSearchItem.productId}
+                                                  product={productSearchItem}
+                                                  enableFavourite={true}
+                                                  isFavourite={isInWishlist}
+                                                  onClick={() => {
+                                                      if (searchQuery) {
+                                                          einstein.sendClickSearch(
+                                                              searchQuery,
+                                                              productSearchItem
+                                                          )
+                                                      } else if (category) {
+                                                          einstein.sendClickCategory(
+                                                              category,
+                                                              productSearchItem
+                                                          )
+                                                      }
+                                                  }}
+                                                  onFavouriteToggle={(isFavourite) => {
+                                                      const action = isFavourite
+                                                          ? addItemToWishlist
+                                                          : removeItemFromWishlist
+                                                      return action(productSearchItem)
+                                                  }}
+                                                  dynamicImageProps={{
+                                                      widths: [
+                                                          '50vw',
+                                                          '50vw',
+                                                          '20vw',
+                                                          '20vw',
+                                                          '25vw'
+                                                      ]
+                                                  }}
+                                              />
+                                          )
+                                      })}
+                            </SimpleGrid>
+                            {/* Footer */}
+                            <Flex
+                                justifyContent={['center', 'center', 'flex-start']}
+                                paddingTop={8}
+                            >
+                                <Pagination currentURL={basePath} urls={pageUrls} />
+
+                                {/*
+                            Our design doesn't call for a page size select. Show this element if you want
+                            to add one to your design.
+                        */}
+                                <Select
+                                    display="none"
+                                    value={basePath}
+                                    onChange={({target}) => {
+                                        history.push(target.value)
+                                    }}
+                                >
+                                    {limitUrls.map((href, index) => (
+                                        <option key={href} value={href}>
+                                            {DEFAULT_LIMIT_VALUES[index]}
+                                        </option>
+                                    ))}
+                                </Select>
+                            </Flex>
+                        </Box>
+                    </Grid>
+                </>
+            )}
+            <Modal
+                isOpen={isOpen}
+                onClose={onClose}
+                size="full"
+                motionPreset="slideInBottom"
+                scrollBehavior="inside"
+            >
+                <ModalOverlay />
+                <ModalContent top={0} marginTop={0}>
+                    <ModalHeader>
+                        <Text fontWeight="bold" fontSize="2xl">
+                            <FormattedMessage
+                                defaultMessage="Filter"
+                                id="product_list.modal.title.filter"
+                            />
+                        </Text>
+                    </ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody py={4}>
+                        {filtersLoading && <LoadingSpinner />}
+                        <Refinements
+                            toggleFilter={toggleFilter}
+                            filters={productSearchResult?.refinements}
+                            selectedFilters={productSearchResult?.selectedRefinements}
+                        />
+                    </ModalBody>
+
+                    <ModalFooter
+                        // justify="space-between"
+                        display="block"
+                        width="full"
+                        borderTop="1px solid"
+                        borderColor="gray.100"
+                        paddingBottom={10}
+                    >
+                        <Stack>
+                            <Button width="full" onClick={onClose}>
+                                {formatMessage(
+                                    {
+                                        id: 'product_list.modal.button.view_items',
+                                        defaultMessage: 'View {prroductCount} items'
+                                    },
+                                    {
+                                        prroductCount: productSearchResult?.total
+                                    }
+                                )}
+                            </Button>
+                            <Button width="full" variant="outline" onClick={resetFilters}>
+                                <FormattedMessage
+                                    defaultMessage="Clear Filters"
+                                    id="product_list.modal.button.clear_filters"
+                                />
+                            </Button>
+                        </Stack>
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+            <Drawer
+                placement="bottom"
+                isOpen={sortOpen}
+                onClose={() => setSortOpen(false)}
+                size="sm"
+                motionPreset="slideInBottom"
+                scrollBehavior="inside"
+                isFullHeight={false}
+                height="50%"
+            >
+                <DrawerOverlay />
+                <DrawerContent marginTop={0}>
+                    <DrawerHeader boxShadow="none">
+                        <Text fontWeight="bold" fontSize="2xl">
+                            <FormattedMessage
+                                defaultMessage="Sort By"
+                                id="product_list.drawer.title.sort_by"
+                            />
+                        </Text>
+                    </DrawerHeader>
+                    <DrawerCloseButton />
+                    <DrawerBody>
+                        {sortUrls.map((href, idx) => (
+                            <Button
+                                width="full"
+                                onClick={() => {
+                                    setSortOpen(false)
+                                    history.push(href)
+                                }}
+                                fontSize={'md'}
+                                key={idx}
+                                marginTop={0}
+                                variant="menu-link"
+                            >
+                                <Text
+                                    as={
+                                        selectedSortingOptionLabel?.label ===
+                                            productSearchResult?.sortingOptions[idx]?.label && 'u'
+                                    }
+                                >
+                                    {productSearchResult?.sortingOptions[idx]?.label}
+                                </Text>
+                            </Button>
+                        ))}
+                    </DrawerBody>
+                </DrawerContent>
+            </Drawer>
+        </Box>
+    )
+}
+
+ProductList.getTemplateName = () => 'product-list'
+
+ProductList.propTypes = {
+    onAddToWishlistClick: PropTypes.func,
+    onRemoveWishlistClick: PropTypes.func,
+    category: PropTypes.object
+}
+
+export default ProductList
+
+const Sort = ({sortUrls, productSearchResult, basePath, ...otherProps}) => {
+    const intl = useIntl()
+    const history = useHistory()
+
+    return (
+        <FormControl data-testid="sf-product-list-sort" id="page_sort" width="auto" {...otherProps}>
+            <Select
+                value={basePath.replace(/(offset)=(\d+)/i, '$1=0')}
+                onChange={({target}) => {
+                    history.push(target.value)
+                }}
+                height={11}
+                width="240px"
+            >
+                {sortUrls.map((href, index) => (
+                    <option key={href} value={href}>
+                        {intl.formatMessage(
+                            {
+                                id: 'product_list.select.sort_by',
+                                defaultMessage: 'Sort By: {sortOption}'
+                            },
+                            {
+                                sortOption: productSearchResult?.sortingOptions[index]?.label
+                            }
+                        )}
+                    </option>
+                ))}
+            </Select>
+        </FormControl>
+    )
+}
+
+Sort.propTypes = {
+    sortUrls: PropTypes.array,
+    productSearchResult: PropTypes.object,
+    basePath: PropTypes.string
+}