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

package/app/hooks/use-pdp-search-params.js

@@ -0,0 +1,16 @@
+/*
+ * 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
+ */
+import {useLocation} from 'react-router-dom'
+
+export const usePDPSearchParams = (productId) => {
+    const {search} = useLocation()
+
+    const allParams = new URLSearchParams(search)
+    const productParams = new URLSearchParams(allParams.get(productId) || '')
+
+    return [allParams, productParams]
+}

package/app/hooks/use-pdp-search-params.test.js

@@ -0,0 +1,52 @@
+/*
+ * 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
+ */
+
+import React from 'react'
+import {screen} from '@testing-library/react'
+import PropTypes from 'prop-types'
+import {usePDPSearchParams} from '@salesforce/retail-react-app/app/hooks/use-pdp-search-params'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+const MockComponent = ({productId} = {}) => {
+    const [allParams, productParams] = usePDPSearchParams(productId)
+
+    return (
+        <>
+            <div data-testid="all-params">{allParams.toString()}</div>
+            <div data-testid="product-params">{productParams.toString()}</div>{' '}
+        </>
+    )
+}
+MockComponent.propTypes = {
+    productId: PropTypes.string
+}
+
+test('product set', () => {
+    const url =
+        // The parent's id is `winter-lookM`, while the children's are `25518447M` and `25518704M`
+        '/global/en-GB/product/winter-lookM?25518447M=color%3DJJ5FUXX%26size%3D9XL&25518704M=color%3DJJ2XNXX%26size%3D9MD'
+    window.history.pushState({}, '', url)
+
+    renderWithProviders(<MockComponent productId="25518704M" />)
+
+    expect(screen.getByTestId('all-params')).toHaveTextContent(
+        /^25518447M=color%3DJJ5FUXX%26size%3D9XL&25518704M=color%3DJJ2XNXX%26size%3D9MD$/
+    )
+    expect(screen.getByTestId('product-params')).toHaveTextContent(/^color=JJ2XNXX&size=9MD$/)
+})
+
+test('regular product with variant', () => {
+    const url = '/global/en-GB/product/25502228M?color=JJ0NLD0&size=9MD&pid=701642889830M'
+    window.history.pushState({}, '', url)
+
+    renderWithProviders(<MockComponent />)
+
+    expect(screen.getByTestId('all-params')).toHaveTextContent(
+        /^color=JJ0NLD0&size=9MD&pid=701642889830M$/
+    )
+    expect(screen.getByTestId('product-params')).toHaveTextContent(/^$/)
+})

package/app/hooks/use-previous.js

@@ -0,0 +1,17 @@
+/*
+ * 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 {useEffect, useRef} from 'react'
+export const usePrevious = (value) => {
+    const ref = useRef()
+
+    useEffect(() => {
+        ref.current = value
+    }, [value])
+
+    return ref.current
+}

package/app/hooks/use-product-view-modal.js

@@ -0,0 +1,93 @@
+/*
+ * 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 {useEffect, useState} from 'react'
+import {
+    rebuildPathWithParams,
+    removeQueryParamsFromPath
+} from '@salesforce/retail-react-app/app/utils/url'
+import {useHistory, useLocation} from 'react-router-dom'
+import {useVariant} from '@salesforce/retail-react-app/app/hooks/use-variant'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {useIntl} from 'react-intl'
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+import {useProduct} from '@salesforce/commerce-sdk-react'
+
+/**
+ * This hook is responsible for fetching a product detail based on the variation selection
+ * and managing the variation params on the url when the modal is open/close
+ * @param initialProduct - the initial product when the modal is first open
+ * @returns object
+ */
+export const useProductViewModal = (initialProduct) => {
+    const location = useLocation()
+    const history = useHistory()
+    const intl = useIntl()
+    const toast = useToast()
+    const [product, setProduct] = useState(initialProduct)
+    const variant = useVariant(product)
+
+    const {isFetching} = useProduct(
+        {parameters: {id: variant?.productId}},
+        {
+            placeholderData: initialProduct,
+            select: (data) => {
+                // if the product id is the same as the initial product id,
+                // then merge the data with the initial product to be able to show correct quantity in the modal
+                if (data.id === initialProduct.productId) {
+                    return {
+                        ...initialProduct,
+                        ...data
+                    }
+                }
+                return data
+            },
+            onSuccess: (data) => {
+                setProduct(data)
+            },
+            onError: () => {
+                toast({
+                    title: intl.formatMessage(API_ERROR_MESSAGE),
+                    status: 'error'
+                })
+            }
+        }
+    )
+    const cleanUpVariantParams = () => {
+        const paramToRemove = [...(product?.variationAttributes?.map(({id}) => id) ?? []), 'pid']
+        const updatedParams = removeQueryParamsFromPath(`${location.search}`, paramToRemove)
+
+        history.replace({search: updatedParams})
+    }
+
+    useEffect(() => {
+        // when the modal is first mounted,
+        // clean up the params in case there are variant params not related to current product
+        cleanUpVariantParams()
+        return () => {
+            cleanUpVariantParams()
+        }
+    }, [])
+
+    useEffect(() => {
+        if (variant) {
+            const {variationValues} = variant
+            // update the url with the new product id and variation values when the variant changes
+            const updatedUrl = rebuildPathWithParams(`${location.pathname}${location.search}`, {
+                ...variationValues,
+                pid: variant.productId
+            })
+            history.replace(updatedUrl)
+        }
+    }, [variant])
+
+    return {
+        product,
+        variant,
+        isFetching
+    }
+}

package/app/hooks/use-product-view-modal.test.js

@@ -0,0 +1,172 @@
+/*
+ * 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 {Router} from 'react-router-dom'
+import PropTypes from 'prop-types'
+import {screen, fireEvent, waitFor} from '@testing-library/react'
+import {createMemoryHistory} from 'history'
+import {IntlProvider} from 'react-intl'
+
+import mockProductDetail from '@salesforce/retail-react-app/app/mocks/variant-750518699578M'
+import {useProductViewModal} from '@salesforce/retail-react-app/app/hooks/use-product-view-modal'
+import {
+    DEFAULT_LOCALE,
+    renderWithProviders
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import messages from '@salesforce/retail-react-app/translations/compiled/en-GB.json'
+import {rest} from 'msw'
+
+jest.mock('@salesforce/commerce-sdk-react', () => {
+    const originalModule = jest.requireActual('@salesforce/commerce-sdk-react')
+    return {
+        ...originalModule,
+        useProduct: jest.fn().mockReturnValue({isFetching: false})
+    }
+})
+
+const mockProduct = {
+    ...mockProductDetail,
+    id: '750518699660M',
+    variationValues: {
+        color: 'BLACKFB',
+        size: '050',
+        width: 'V'
+    },
+    c_color: 'BLACKFB',
+    c_isNew: true,
+    c_refinementColor: 'black',
+    c_size: '050',
+    c_width: 'V'
+}
+
+const MockComponent = ({product}) => {
+    const productViewModalData = useProductViewModal(product)
+    const [isShown, setIsShown] = React.useState(false)
+
+    return (
+        <div>
+            <button onClick={() => setIsShown(!isShown)}>Toggle the content</button>
+            {isShown && (
+                <>
+                    <div>{productViewModalData.product.id}</div>
+                    <div data-testid="variant">{JSON.stringify(productViewModalData.variant)}</div>
+                    <div>{`isFetching: ${productViewModalData.isFetching}`}</div>
+                </>
+            )}
+        </div>
+    )
+}
+
+MockComponent.propTypes = {
+    product: PropTypes.object
+}
+
+beforeEach(() => {
+    global.server.use(
+        rest.get('*/products/:productId', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.json(mockProduct))
+        })
+    )
+})
+
+describe('useProductViewModal hook', () => {
+    test('return proper data', async () => {
+        const history = createMemoryHistory()
+        history.push('/test/path')
+        renderWithProviders(<MockComponent product={mockProductDetail} />)
+
+        const toggleButton = screen.getByText(/Toggle the content/)
+        fireEvent.click(toggleButton)
+
+        await waitFor(() => {
+            expect(screen.getByText('750518699578M')).toBeInTheDocument()
+            expect(screen.getByText(/isFetching: false/i)).toBeInTheDocument()
+            expect(screen.getByTestId('variant')).toHaveTextContent(
+                '{"orderable":true,"price":299.99,"productId":"750518699578M","variationValues":{"color":"BLACKFB","size":"038","width":"V"}}'
+            )
+        })
+    })
+
+    test("update product's related url param when the product content is shown", () => {
+        const history = createMemoryHistory()
+        history.push('/test/path?color=BLACKFB')
+
+        renderWithProviders(
+            <Router history={history}>
+                <IntlProvider
+                    locale={DEFAULT_LOCALE}
+                    defaultLocale={DEFAULT_LOCALE}
+                    messages={messages}
+                >
+                    <MockComponent product={mockProductDetail} />
+                </IntlProvider>
+            </Router>
+        )
+        const toggleButton = screen.getByText(/Toggle the content/)
+        fireEvent.click(toggleButton)
+        expect(history.location.pathname).toBe('/test/path')
+        const searchParams = new URLSearchParams(history.location.search)
+        expect(searchParams.get('color')).toBe('BLACKFB')
+        expect(searchParams.get('width')).toBe('V')
+        expect(searchParams.get('pid')).toBe('750518699578M')
+    })
+
+    test("clean up product's related url param when unmounting product content", () => {
+        const history = createMemoryHistory()
+        history.push('/test/path')
+
+        renderWithProviders(
+            <Router history={history}>
+                <IntlProvider
+                    locale={DEFAULT_LOCALE}
+                    defaultLocale={DEFAULT_LOCALE}
+                    messages={messages}
+                >
+                    <MockComponent product={mockProductDetail} />
+                </IntlProvider>
+            </Router>
+        )
+        const toggleButton = screen.getByText(/Toggle the content/)
+        // show the content
+        fireEvent.click(toggleButton)
+        expect(history.location.pathname).toBe('/test/path')
+
+        // hide the content
+        fireEvent.click(toggleButton)
+        const searchParams = new URLSearchParams(history.location.search.toString())
+        waitFor(() => {
+            expect(searchParams.get('color')).toBeUndefined()
+            expect(searchParams.get('width')).toBeUndefined()
+            expect(searchParams.get('pid')).toBeUndefined()
+        })
+    })
+
+    test('load new variant on variant selection', async () => {
+        const history = createMemoryHistory()
+        history.push('/test/path')
+
+        renderWithProviders(
+            <Router history={history}>
+                <IntlProvider locale={DEFAULT_LOCALE} defaultLocale={DEFAULT_LOCALE}>
+                    <MockComponent product={mockProductDetail} />
+                </IntlProvider>
+            </Router>
+        )
+
+        const toggleButton = screen.getByText(/Toggle the content/)
+        fireEvent.click(toggleButton)
+        expect(screen.getByText('750518699578M')).toBeInTheDocument()
+
+        history.push('/test/path?color=BLACKFB&size=050&width=V&pid=750518699660M')
+        await waitFor(() => {
+            expect(screen.getByTestId('variant')).toHaveTextContent(
+                '{"orderable":true,"price":299.99,"productId":"750518699660M","variationValues":{"color":"BLACKFB","size":"050","width":"V"}}'
+            )
+        })
+    })
+})

package/app/hooks/use-search-params.js

@@ -0,0 +1,96 @@
+/*
+ * 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 {useLocation} from 'react-router-dom'
+import queryString from 'query-string'
+
+// Constants
+import {DEFAULT_SEARCH_PARAMS} from '@salesforce/retail-react-app/app/constants'
+
+const PARSE_OPTIONS = {
+    parseBooleans: true,
+    parseNumbers: true
+}
+
+/*
+ * This hook will return all the location search params pertinant
+ * to the product list page.
+ */
+export const useSearchParams = (searchParams = DEFAULT_SEARCH_PARAMS, parseRefine = true) => {
+    const {search} = useLocation()
+
+    // Encode the search query, including preset values.
+    const searchParamsObject = {
+        ...searchParams,
+        ...parse(search.substring(1), parseRefine)
+    }
+
+    return [searchParamsObject, {stringify, parse}]
+}
+
+/**
+ * Encode's the provided search parameters object, paying special attention to ensure
+ * that the child `refine` object is alway encoded correctly.
+ *
+ * @param {Object} searchParamsObj
+ * @returns
+ */
+export const stringify = (searchParamsObj) => {
+    let searchParamsObjCopy = {...searchParamsObj}
+
+    // Remove our copy of the original refinement value so it's not stringified.
+    delete searchParamsObjCopy._refine
+
+    // "stringify" the nested refinements
+    searchParamsObjCopy.refine = Object.keys(searchParamsObjCopy.refine).map((key) =>
+        queryString.stringify(
+            {[key]: searchParamsObjCopy.refine[key]},
+            {
+                arrayFormat: 'separator',
+                arrayFormatSeparator: '|',
+                encode: false
+            }
+        )
+    )
+
+    // "stringify" the entire object
+    searchParamsObjCopy = queryString.stringify(searchParamsObjCopy)
+    return searchParamsObjCopy
+}
+
+/**
+ * Decode's the provided query string representation of a search parameter object, paying
+ * special attention to also decode the 'refine' object.
+ *
+ * @param {Object} searchParamsStr
+ * @param {Boolean} parseRefine - opt out of parsing the inner refine object.
+ * @returns
+ */
+export const parse = (searchParamsStr, parseRefine = true) => {
+    const params = queryString.parse(searchParamsStr, PARSE_OPTIONS)
+
+    // Ensure the refinments is an array (make it easier to manipulate).
+    params.refine = Array.isArray(params.refine) ? params.refine : [params.refine].filter(Boolean)
+
+    // Parse the nested refinement entries.
+    if (parseRefine) {
+        params._refine = params.refine
+        params.refine = params.refine.reduce((acc, curr) => {
+            return {
+                ...acc,
+                ...queryString.parse(curr, {
+                    ...PARSE_OPTIONS,
+                    parseNumbers: false,
+                    arrayFormat: 'separator',
+                    arrayFormatSeparator: '|'
+                })
+            }
+        }, {})
+    }
+
+    return params
+}

package/app/hooks/use-search-params.test.js

@@ -0,0 +1,91 @@
+/*
+ * 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 {Router} from 'react-router'
+
+import {render} from '@testing-library/react'
+import {createMemoryHistory} from 'history'
+import {
+    useSearchParams,
+    stringify,
+    parse
+} from '@salesforce/retail-react-app/app/hooks/use-search-params'
+
+const MockComponent = () => {
+    const [params] = useSearchParams()
+
+    return (
+        <script data-testid="limits" type="application/json">
+            {JSON.stringify(params)}
+        </script>
+    )
+}
+
+describe('The useSearchParams', () => {
+    test('returns an object with the default search params when none are present in the url.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path')
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('limits').text).toBe(
+            '{"limit":25,"offset":0,"sort":"best-matches","refine":{},"_refine":[]}'
+        )
+    })
+
+    test('returns an object with the parsed search params.', () => {
+        const history = createMemoryHistory()
+        history.push(
+            '/test/path?limit=25&offset=0&refine=c_refinementColor%3DBlack%7CPurple&sort=best-matches'
+        )
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('limits').text).toBe(
+            '{"limit":25,"offset":0,"sort":"best-matches","refine":{"c_refinementColor":["Black","Purple"]},"_refine":["c_refinementColor=Black|Purple"]}'
+        )
+    })
+
+    test('stringy method', () => {
+        const objectToStringify = {
+            limit: '25',
+            offset: '0',
+            refine: {
+                c_refinementColor: ['Black', 'Purple']
+            },
+            sort: 'best-matches'
+        }
+
+        const stringifiedObject = stringify(objectToStringify)
+        expect(stringifiedObject).toBe(
+            'limit=25&offset=0&refine=c_refinementColor%3DBlack%7CPurple&sort=best-matches'
+        )
+    })
+
+    test('parse method', () => {
+        const stringToParse =
+            'limit=25&offset=0&refine=c_refinementColor%3DBlack%7CPurple&sort=best-matches'
+
+        const parsedString = parse(stringToParse)
+        expect(parsedString).toEqual({
+            _refine: ['c_refinementColor=Black|Purple'],
+            limit: 25,
+            offset: 0,
+            refine: {c_refinementColor: ['Black', 'Purple']},
+            sort: 'best-matches'
+        })
+    })
+})

package/app/hooks/use-sort-urls.js

@@ -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 {useMemo} from 'react'
+import {useLocation} from 'react-router-dom'
+
+// Utils
+import {buildUrlSet} from '@salesforce/retail-react-app/app/utils/url'
+
+/*
+ * Generate a memoized list of page size urls. Chaning the page size will reset
+ * the offset to zero to simplify things.
+ */
+export const useSortUrls = ({options = []}) => {
+    const location = useLocation()
+
+    return useMemo(
+        () =>
+            buildUrlSet(
+                `${location.pathname}${location.search}`,
+                'sort',
+                options.map(({id}) => id),
+                {
+                    offset: 0
+                }
+            ),
+        [location.pathname, location.search, options]
+    )
+}

package/app/hooks/use-sort-urls.test.js

@@ -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 {Router} from 'react-router'
+
+import {render} from '@testing-library/react'
+import {createMemoryHistory} from 'history'
+import {useSortUrls} from '@salesforce/retail-react-app/app/hooks/use-sort-urls'
+
+const MOCK_SORT_OPTIONS = [{id: 'high-to-low'}, {id: 'low-to-high'}]
+
+const MockComponent = () => {
+    const urls = useSortUrls({options: MOCK_SORT_OPTIONS})
+
+    return (
+        <script data-testid="limits" type="application/json">
+            {JSON.stringify(urls)}
+        </script>
+    )
+}
+
+describe('The useSortUrls', () => {
+    test('returns an array of urls, one values for each sort value.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path')
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('limits').text).toBe(
+            '["/test/path?sort=high-to-low&offset=0","/test/path?sort=low-to-high&offset=0"]'
+        )
+    })
+})

package/app/hooks/use-toast.js

@@ -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 {
+    Alert,
+    AlertIcon,
+    AlertTitle,
+    CloseButton,
+    Spacer,
+    useToast as useChakraToast
+} from '@chakra-ui/react'
+
+/**
+ * Display a toast message on the screen.
+ * This is a custom hook to handle showing toasts in the app, preventing duplicate toasts and to add action elements
+ * to toasts when required. It supports all props supported by Chakra toast.
+ *
+ * @param {string} title Message text to be displayed in toast
+ * @param {string} id - id provided to the toast to avoid duplicate toast ids, use it if multiple toasts are needed
+ * @param {string} status Semantic state of the toast - success | error | info | warning
+ * @param {node} action Optional component to be displayed in the toast (eg. Button to allow user to perform action)
+ * @param {string} position The placement of the toast on screen
+ * @param {number} duration The delay before the toast hides (in milliseconds)
+ */
+export function useToast() {
+    const toast = useChakraToast()
+
+    return ({
+        title,
+        status,
+        action,
+        position = 'top-right',
+        duration = 5000,
+        variant = 'subtle',
+        isClosable = true
+    }) => {
+        let toastConfig = {
+            title,
+            status,
+            isClosable,
+            position,
+            duration,
+            variant
+        }
+
+        if (action) {
+            toastConfig = {
+                ...toastConfig,
+
+                render: ({onClose}) => (
+                    <Alert status={status} variant="subtle" borderRadius="md" py={3} width="sm">
+                        <AlertIcon />
+                        <AlertTitle> {title} </AlertTitle>
+                        <Spacer />
+                        {action}
+                        <Spacer />
+                        <CloseButton onClick={onClose} />
+                    </Alert>
+                )
+            }
+        }
+        toast(toastConfig)
+    }
+}