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

package/app/hooks/use-toast.test.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {Button} from '@chakra-ui/react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {screen, waitFor} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+jest.setTimeout(60000)
+const MockedComponent = (props) => {
+    const showToast = useToast()
+
+    const renderToast = () => {
+        showToast({
+            ...props,
+            title: 'Demo Notification',
+            status: 'success',
+            duration: 1000,
+            variant: 'subtle'
+        })
+    }
+    return (
+        <>
+            <Button onClick={renderToast}>show toast</Button>
+        </>
+    )
+}
+
+// Set up and clean up
+beforeEach(() => {
+    jest.resetModules()
+})
+
+test('renders toast with action', async () => {
+    const user = userEvent.setup()
+    const handleActionClick = jest.fn()
+    const toastAction = <Button onClick={handleActionClick}>action</Button>
+
+    renderWithProviders(<MockedComponent action={toastAction} />)
+
+    const toastTrigger = await screen.findByRole('button', {name: /show toast/i})
+    await user.click(toastTrigger)
+
+    await waitFor(() => {
+        // Chakra UI renders multiple elements with toast title in DOM for accessibility.
+        // We need to assert the actual text within the alert
+        expect(screen.getByRole('alert')).toHaveTextContent(/demo notification/i)
+    })
+
+    const toastActionTrigger = await screen.findByRole('button', {name: /action/i})
+    await user.click(toastActionTrigger)
+    expect(handleActionClick).toHaveBeenCalledTimes(1)
+})

package/app/hooks/use-variant.js

@@ -0,0 +1,32 @@
+/*
+ * 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
+ */
+
+// Hooks
+import {useVariationParams} from '@salesforce/retail-react-app/app/hooks/use-variation-params'
+
+/**
+ * This hook returns the currently selected
+ * variant or undefined. NOTE: All attributes must be selected before a variant
+ * will be returned.
+ *
+ * @param {Object} product
+ * @returns {Object} the currently selected `Variant` object.
+ */
+export const useVariant = (product = {}, isProductPartOfSet = false) => {
+    const {variants = []} = product
+    const variationParams = useVariationParams(product, isProductPartOfSet)
+
+    // Get a filtered array of variants. The resulting array will only have variants
+    // which have all the current variation params values set.
+    const filteredVariants = variants.filter(({variationValues}) =>
+        // A single liner that will return true if the current variation has all the
+        // same attribute values as the passing in params.
+        Object.keys(variationParams).every((key) => variationValues[key] === variationParams[key])
+    )
+
+    return filteredVariants.length === 1 ? filteredVariants[0] : undefined
+}

package/app/hooks/use-variant.test.js

@@ -0,0 +1,81 @@
+/*
+ * 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 {useVariant} from '@salesforce/retail-react-app/app/hooks/use-variant'
+
+// Below is a partial product used for mocking purposes. Note: only the properties
+// that are used in the hook at defined.
+const MockProduct = {
+    variationAttributes: [
+        {id: 'color', name: 'Color', values: []},
+        {id: 'size', name: 'Size', values: []}
+    ],
+    variants: [
+        {
+            orderable: true,
+            price: 195,
+            productId: '883360352473M',
+            variationValues: {
+                color: 'B9W',
+                size: '34'
+            }
+        },
+        {
+            orderable: true,
+            price: 195,
+            productId: '883360492148M',
+            variationValues: {
+                color: 'DKL',
+                size: '34'
+            }
+        }
+    ]
+}
+
+const MockComponent = () => {
+    const variant = useVariant(MockProduct)
+    return (
+        <script data-testid="variant" type="application/json">
+            {JSON.stringify(variant)}
+        </script>
+    )
+}
+
+describe('The useVariant', () => {
+    test('returns undefined when a single variant cannot be deduced from the location search params.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path?size=34')
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('variant').text).toBe('')
+    })
+
+    test('returns the correct variant when one can be deduced from the location search params.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path?size=34&color=DKL')
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('variant').text).toBe(
+            '{"orderable":true,"price":195,"productId":"883360492148M","variationValues":{"color":"DKL","size":"34"}}'
+        )
+    })
+})

package/app/hooks/use-variation-attributes.js

@@ -0,0 +1,138 @@
+/*
+ * 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'
+
+// Other Hooks
+import {useVariationParams} from '@salesforce/retail-react-app/app/hooks/use-variation-params'
+
+// Utils
+import {updateSearchParams} from '@salesforce/retail-react-app/app/utils/url'
+import {usePDPSearchParams} from '@salesforce/retail-react-app/app/hooks/use-pdp-search-params'
+
+/**
+ * Return the first image in the `swatch` type image group for a given
+ * variation value of a product.
+ *
+ * @param {Object} product
+ * @param {Object} variationValue
+ * @returns {Object} image
+ */
+const getVariantValueSwatch = (product, variationValue) => {
+    const {imageGroups = []} = product
+
+    const imageGroup = imageGroups
+        .filter(({viewType}) => viewType === 'swatch')
+        .find(({variationAttributes = []}) => {
+            const colorAttribute = variationAttributes.find(({id}) => id === 'color')
+            const colorValues = colorAttribute?.values || []
+
+            // A single image can represent multiple variation values, so we only need
+            // ensure the variation values appears in once of the images represented values.
+            return colorValues.some(({value}) => value === variationValue.value)
+        })
+
+    return imageGroup?.images?.[0]
+}
+
+/**
+ * Build a product href
+ *
+ * @param {Object} product
+ * @param {Object} params
+ * @param {Object} location
+ * @returns {String} a product url for the current variation value.
+ */
+const buildVariantValueHref = ({
+    pathname,
+    existingParams,
+    newParams,
+    productId,
+    isProductPartOfSet
+}) => {
+    const [allParams, productParams] = existingParams
+
+    if (isProductPartOfSet) {
+        updateSearchParams(productParams, newParams)
+        allParams.set(productId, productParams.toString())
+    } else {
+        updateSearchParams(allParams, newParams)
+    }
+
+    return `${pathname}?${allParams.toString()}`
+}
+
+/**
+ * Determine if a products variant attribute value is orderable without having to
+ * load the variant in question, but filtering the list of variants with the
+ * passed in attribute values.
+ *
+ * @param {Object} product
+ * @param {Object} variationParams
+ * @returns
+ */
+const isVariantValueOrderable = (product, variationParams) => {
+    return product.variants
+        .filter(({variationValues}) =>
+            Object.keys(variationParams).every(
+                (key) => variationValues[key] === variationParams[key]
+            )
+        )
+        .some(({orderable}) => orderable)
+}
+
+/**
+ * Use a decorated version of a product variation attributes. This version
+ * will have the following additions: which variation attribute is selected,
+ * each value will have a product url, the swatch image if there is one, and
+ * an updated orderable flag.
+ *
+ * @param {Object} product
+ * @returns {Array} a decorated variation attributes list.
+ *
+ */
+export const useVariationAttributes = (product = {}, isProductPartOfSet = false) => {
+    const {variationAttributes = []} = product
+    const location = useLocation()
+    const variationParams = useVariationParams(product, isProductPartOfSet)
+
+    const existingParams = usePDPSearchParams(product.id)
+
+    return useMemo(
+        () =>
+            variationAttributes.map((variationAttribute) => ({
+                ...variationAttribute,
+                selectedValue: {
+                    name: variationAttribute.values.find(
+                        ({value}) => value === variationParams?.[variationAttribute.id]
+                    )?.name,
+                    value: variationParams?.[variationAttribute.id]
+                },
+                values: variationAttribute.values.map((value) => {
+                    const params = {
+                        ...variationParams,
+                        [variationAttribute.id]: value.value
+                    }
+
+                    return {
+                        ...value,
+                        image: getVariantValueSwatch(product, value),
+                        href: buildVariantValueHref({
+                            pathname: location.pathname,
+                            existingParams,
+                            newParams: params,
+                            productId: product.id,
+                            isProductPartOfSet
+                        }),
+                        orderable: isVariantValueOrderable(product, params)
+                    }
+                })
+            })),
+        [location.search, product]
+    )
+}

package/app/hooks/use-variation-attributes.test.js

@@ -0,0 +1,119 @@
+/*
+ * 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 {useVariationAttributes} from '@salesforce/retail-react-app/app/hooks/use-variation-attributes'
+
+// Below is a partial product used for mocking purposes. Note: only the properties
+// that are used in the hook at defined.
+const MockProduct = {
+    master: {
+        masterId: '73910532M',
+        orderable: true,
+        price: 195
+    },
+    imageGroups: [
+        {
+            images: [
+                {
+                    alt: 'Basic Leg Trousers, , swatch',
+                    disBaseLink:
+                        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw6cc11129/images/swatch/90011212_001_sw.jpg',
+                    link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw6cc11129/images/swatch/90011212_001_sw.jpg',
+                    title: 'Basic Leg Trousers, '
+                }
+            ],
+            viewType: 'swatch'
+        },
+        {
+            images: [
+                {
+                    alt: 'Basic Leg Trousers, Black, swatch',
+                    disBaseLink:
+                        'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw6cc11129/images/swatch/90011212_001_sw.jpg',
+                    link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw6cc11129/images/swatch/90011212_001_sw.jpg',
+                    title: 'Basic Leg Trousers, Black'
+                }
+            ],
+            variationAttributes: [
+                {
+                    id: 'color',
+                    values: [
+                        {
+                            value: '001'
+                        }
+                    ]
+                }
+            ],
+            viewType: 'swatch'
+        }
+    ],
+    variants: [
+        {
+            orderable: true,
+            price: 195,
+            productId: '883858858302M',
+            variationValues: {
+                color: '001',
+                size: '28'
+            }
+        }
+    ],
+    variationAttributes: [
+        {
+            id: 'color',
+            name: 'Color',
+            values: [
+                {
+                    name: 'Black',
+                    orderable: true,
+                    value: '001'
+                }
+            ]
+        },
+        {
+            id: 'size',
+            name: 'Size',
+            values: [
+                {
+                    name: '28',
+                    orderable: true,
+                    value: '28'
+                }
+            ]
+        }
+    ]
+}
+
+const MockComponent = () => {
+    const params = useVariationAttributes(MockProduct)
+
+    return (
+        <script data-testid="variationAttributes" type="application/json">
+            {JSON.stringify(params)}
+        </script>
+    )
+}
+
+describe('The useVariationAttributes', () => {
+    test('returns variation attributes decorated with hrefs and images.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path?color=blue&size=2')
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+        expect(wrapper.getByTestId('variationAttributes').text).toBe(
+            '[{"id":"color","name":"Color","values":[{"name":"Black","orderable":false,"value":"001","image":{"alt":"Basic Leg Trousers, Black, swatch","disBaseLink":"https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw6cc11129/images/swatch/90011212_001_sw.jpg","link":"https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw6cc11129/images/swatch/90011212_001_sw.jpg","title":"Basic Leg Trousers, Black"},"href":"/test/path?color=001&size=2"}],"selectedValue":{"value":"blue"}},{"id":"size","name":"Size","values":[{"name":"28","orderable":false,"value":"28","href":"/test/path?color=blue&size=28"}],"selectedValue":{"value":"2"}}]'
+        )
+    })
+})

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

@@ -0,0 +1,31 @@
+/*
+ * 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 {usePDPSearchParams} from '@salesforce/retail-react-app/app/hooks/use-pdp-search-params'
+
+/*
+ * This hook will return only the params that are also product attributes for the
+ * passed in product object.
+ */
+export const useVariationParams = (product = {}, isProductPartOfSet = false) => {
+    const {variationAttributes = [], variationValues = {}} = product
+
+    const [allParams, productParams] = usePDPSearchParams(product.id)
+    const params = isProductPartOfSet ? productParams : allParams
+
+    // Using all the variation attribute id from the array generated below, get
+    // the value if there is one from the location search params and add it to the
+    // accumulator.
+    const variationParams = variationAttributes
+        .map(({id}) => id)
+        .reduce((acc, key) => {
+            let value = params.get(`${key}`) || variationValues?.[key]
+            return value ? {...acc, [key]: value} : acc
+        }, {})
+
+    return variationParams
+}

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

@@ -0,0 +1,73 @@
+/*
+ * 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 {useVariationParams} from '@salesforce/retail-react-app/app/hooks/use-variation-params'
+
+// Below is a partial product used for mocking purposes. Note: only the properties
+// that are used in the hook at defined.
+const MockProduct = {
+    variationAttributes: [
+        {id: 'color', name: 'Color', values: []},
+        {id: 'size', name: 'Size', values: []}
+    ]
+}
+
+const MockComponent = () => {
+    const params = useVariationParams(MockProduct)
+
+    return (
+        <script data-testid="params" type="application/json">
+            {JSON.stringify(params)}
+        </script>
+    )
+}
+
+describe('The useVariationParams', () => {
+    test('returns correct params when there are no non-product params in the url.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path?color=blue&size=2')
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('params').text).toBe('{"color":"blue","size":"2"}')
+    })
+
+    test('returns correct params when there are non-product params in the url.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path?color=blue&size=2&nonproductattribute=true')
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('params').text).toBe('{"color":"blue","size":"2"}')
+    })
+
+    test('returns correct params when there is only a subset product params in the url.', () => {
+        const history = createMemoryHistory()
+        history.push('/test/path?color=blue')
+
+        const wrapper = render(
+            <Router history={history}>
+                <MockComponent />
+            </Router>
+        )
+
+        expect(wrapper.getByTestId('params').text).toBe('{"color":"blue"}')
+    })
+})

package/app/hooks/use-wish-list.js

@@ -0,0 +1,42 @@
+/*
+ * 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 {useCustomerProductLists, useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+const onClient = typeof window !== 'undefined'
+// TODO: remove `listId` input -> use the first list of type wish_list instead
+// (mimic the logic in the other older hook 'use-wishlist.js')
+export const useWishList = ({listId = ''} = {}) => {
+    const {data: customer} = useCurrentCustomer()
+    const {customerId} = customer
+    const createCustomerProductList = useShopperCustomersMutation('createCustomerProductList')
+    const {data: productLists, ...restOfQuery} = useCustomerProductLists(
+        {
+            parameters: {customerId}
+        },
+        {
+            onSuccess: (data) => {
+                if (!data.total) {
+                    createCustomerProductList.mutate({
+                        parameters: {customerId},
+                        // we only use one type of product lists for now
+                        body: {type: 'wish_list'}
+                    })
+                }
+            },
+            enabled: onClient && Boolean(customerId)
+        }
+    )
+
+    const wishLists = productLists?.data?.filter((list) => list.type === 'wish_list') || []
+    const currentWishlist = wishLists.find((list) => list.id === listId)
+
+    return {
+        data: !listId ? wishLists[0] : currentWishlist,
+        ...restOfQuery
+    }
+}

package/app/main.jsx

@@ -0,0 +1,14 @@
+/*
+ * 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 {start, registerServiceWorker} from '@salesforce/pwa-kit-react-sdk/ssr/browser/main'
+
+const main = () => {
+    // The path to your service worker should match what is set up in ssr.js
+    return Promise.all([start(), registerServiceWorker('/worker.js')])
+}
+
+main()