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

package/app/components/product-tile/index.test.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 React from 'react'
+import ProductTile, {Skeleton} from '@salesforce/retail-react-app/app/components/product-tile/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+const mockProductSearchItem = {
+    currency: 'USD',
+    image: {
+        alt: 'Charcoal Single Pleat Wool Suit, , large',
+        disBaseLink:
+            'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4de8166b/images/large/PG.33698RUBN4Q.CHARCWL.PZ.jpg'
+    },
+    price: 299.99,
+    productName: 'Charcoal Single Pleat Wool Suit'
+}
+
+const mockProductSet = {
+    currency: 'GBP',
+    hitType: 'set',
+    image: {
+        alt: 'Winter Look, , large',
+        disBaseLink:
+            'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwe1c4cd52/images/large/PG.10205921.JJ5FUXX.PZ.jpg',
+        link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwe1c4cd52/images/large/PG.10205921.JJ5FUXX.PZ.jpg',
+        title: 'Winter Look, '
+    },
+    orderable: true,
+    price: 44.16,
+    priceMax: 71.03,
+    pricePerUnit: 44.16,
+    pricePerUnitMax: 71.03,
+    productId: 'winter-lookM',
+    productName: 'Winter Look',
+    productType: {
+        set: true
+    },
+    representedProduct: {
+        id: '701642853695M'
+    },
+    representedProducts: [
+        {id: '701642853695M'},
+        {id: '701642853718M'},
+        {id: '701642853725M'},
+        {id: '701642853701M'},
+        {id: '740357357531M'},
+        {id: '740357358095M'},
+        {id: '740357357623M'},
+        {id: '740357357609M'},
+        {id: '740357358156M'},
+        {id: '740357358132M'},
+        {id: '740357358101M'},
+        {id: '740357357562M'},
+        {id: '740357357548M'},
+        {id: '740357358187M'},
+        {id: '740357357593M'},
+        {id: '740357357555M'},
+        {id: '740357357524M'},
+        {id: '740357358149M'},
+        {id: '740357358088M'},
+        {id: '701642867098M'},
+        {id: '701642867111M'},
+        {id: '701642867104M'},
+        {id: '701642867128M'},
+        {id: '701642867135M'}
+    ]
+}
+
+test('Renders links and images', () => {
+    const {getAllByRole} = renderWithProviders(<ProductTile product={mockProductSearchItem} />)
+
+    const link = getAllByRole('link')
+    const img = getAllByRole('img')
+
+    expect(link).toBeDefined()
+    expect(img).toBeDefined()
+})
+
+test('Renders Skeleton', () => {
+    const {getAllByTestId} = renderWithProviders(<Skeleton />)
+
+    const skeleton = getAllByTestId('sf-product-tile-skeleton')
+
+    expect(skeleton).toBeDefined()
+})
+
+test('Product set - renders the appropriate price label', async () => {
+    const {getByTestId} = renderWithProviders(<ProductTile product={mockProductSet} />)
+
+    const container = getByTestId('product-tile-price')
+    expect(container).toHaveTextContent(/starting at/i)
+})

package/app/components/product-view/index.jsx

@@ -0,0 +1,538 @@
+/*
+ * 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, {forwardRef, useEffect, useRef, useState} from 'react'
+import PropTypes from 'prop-types'
+import {useHistory, useLocation} from 'react-router-dom'
+import {useIntl} from 'react-intl'
+
+import {Flex, Heading, Button, Skeleton, Box, Text, VStack, Fade, useTheme} from '@chakra-ui/react'
+import {useDerivedProduct} from '@salesforce/retail-react-app/app/hooks'
+import {useAddToCartModalContext} from '@salesforce/retail-react-app/app/hooks/use-add-to-cart-modal'
+
+// project components
+import SwatchGroup from '@salesforce/retail-react-app/app/components/swatch-group'
+import Swatch from '@salesforce/retail-react-app/app/components/swatch-group/swatch'
+import ImageGallery from '@salesforce/retail-react-app/app/components/image-gallery'
+import Breadcrumb from '@salesforce/retail-react-app/app/components/breadcrumb'
+import Link from '@salesforce/retail-react-app/app/components/link'
+import withRegistration from '@salesforce/retail-react-app/app/components/with-registration'
+import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
+import {Skeleton as ImageGallerySkeleton} from '@salesforce/retail-react-app/app/components/image-gallery'
+import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
+import QuantityPicker from '@salesforce/retail-react-app/app/components/quantity-picker'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+
+const ProductViewHeader = ({name, price, currency, category, productType}) => {
+    const intl = useIntl()
+    const {currency: activeCurrency} = useCurrency()
+    const isProductASet = productType?.set
+
+    return (
+        <VStack mr={4} spacing={2} align="flex-start" marginBottom={[4, 4, 4, 0, 0]}>
+            {category && (
+                <Skeleton isLoaded={category} minWidth={64}>
+                    <Breadcrumb categories={category} />
+                </Skeleton>
+            )}
+
+            {/* Title */}
+            <Skeleton isLoaded={name}>
+                <Heading fontSize="2xl">{`${name}`}</Heading>
+            </Skeleton>
+
+            {/* Price */}
+            <Skeleton isLoaded={price} minWidth={32}>
+                <Text fontWeight="bold" fontSize="md" aria-label="price">
+                    {isProductASet &&
+                        `${intl.formatMessage({
+                            id: 'product_view.label.starting_at_price',
+                            defaultMessage: 'Starting at'
+                        })} `}
+                    {intl.formatNumber(price, {
+                        style: 'currency',
+                        currency: currency || activeCurrency
+                    })}
+                </Text>
+            </Skeleton>
+        </VStack>
+    )
+}
+
+ProductViewHeader.propTypes = {
+    name: PropTypes.string,
+    price: PropTypes.number,
+    currency: PropTypes.string,
+    category: PropTypes.array,
+    productType: PropTypes.object
+}
+
+const ButtonWithRegistration = withRegistration(Button)
+
+/**
+ * Render a product detail view that includes name, image gallery, price,
+ * variant selections, action buttons
+ */
+
+const ProductView = forwardRef(
+    (
+        {
+            product,
+            category,
+            showFullLink = false,
+            imageSize = 'md',
+            isWishlistLoading = false,
+            addToCart,
+            updateCart,
+            addToWishlist,
+            updateWishlist,
+            isProductLoading,
+            isProductPartOfSet = false,
+            onVariantSelected = () => {},
+            validateOrderability = (variant, quantity, stockLevel) =>
+                !isProductLoading && variant?.orderable && quantity > 0 && quantity <= stockLevel
+        },
+        ref
+    ) => {
+        const showToast = useToast()
+        const intl = useIntl()
+        const history = useHistory()
+        const location = useLocation()
+        const {
+            isOpen: isAddToCartModalOpen,
+            onOpen: onAddToCartModalOpen,
+            onClose: onAddToCartModalClose
+        } = useAddToCartModalContext()
+        const theme = useTheme()
+        const [showOptionsMessage, toggleShowOptionsMessage] = useState(false)
+        const {
+            showLoading,
+            showInventoryMessage,
+            inventoryMessage,
+            quantity,
+            minOrderQuantity,
+            setQuantity,
+            variant,
+            variationParams,
+            variationAttributes,
+            stockLevel,
+            stepQuantity
+        } = useDerivedProduct(product, isProductPartOfSet)
+        const canAddToWishlist = !isProductLoading
+        const isProductASet = product?.type.set
+        const errorContainerRef = useRef(null)
+
+        const validateAndShowError = (opts = {}) => {
+            const {scrollErrorIntoView = true} = opts
+            // Validate that all attributes are selected before proceeding.
+            const hasValidSelection = validateOrderability(variant, quantity, stockLevel)
+            const showError = !isProductASet && !hasValidSelection
+            const scrollToError = showError && scrollErrorIntoView
+
+            toggleShowOptionsMessage(showError)
+
+            if (scrollToError) {
+                errorContainerRef.current.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                })
+            }
+
+            return hasValidSelection
+        }
+
+        const renderActionButtons = () => {
+            const buttons = []
+            const buttonText = {
+                update: intl.formatMessage({
+                    defaultMessage: 'Update',
+                    id: 'product_view.button.update'
+                }),
+                addToCart: intl.formatMessage({
+                    defaultMessage: 'Add to Cart',
+                    id: 'product_view.button.add_to_cart'
+                }),
+                addSetToCart: intl.formatMessage({
+                    defaultMessage: 'Add Set to Cart',
+                    id: 'product_view.button.add_set_to_cart'
+                }),
+                addToWishlist: intl.formatMessage({
+                    defaultMessage: 'Add to Wishlist',
+                    id: 'product_view.button.add_to_wishlist'
+                }),
+                addSetToWishlist: intl.formatMessage({
+                    defaultMessage: 'Add Set to Wishlist',
+                    id: 'product_view.button.add_set_to_wishlist'
+                })
+            }
+
+            const showError = () => {
+                showToast({
+                    title: intl.formatMessage(API_ERROR_MESSAGE),
+                    status: 'error'
+                })
+            }
+
+            const handleCartItem = async () => {
+                const hasValidSelection = validateAndShowError()
+
+                if (!hasValidSelection) {
+                    return null
+                }
+
+                if (!addToCart && !updateCart) return null
+                if (updateCart) {
+                    await updateCart(variant, quantity)
+                    return
+                }
+                try {
+                    const itemsAdded = await addToCart(variant, quantity)
+                    // Open modal only when `addToCart` returns some data
+                    // It's possible that the item has been added to cart, but we don't want to open the modal.
+                    // See wishlist_primary_action for example.
+                    if (itemsAdded) {
+                        onAddToCartModalOpen({
+                            product,
+                            itemsAdded
+                        })
+                    }
+                } catch (e) {
+                    showError()
+                }
+            }
+
+            const handleWishlistItem = async () => {
+                if (!updateWishlist && !addToWishlist) return null
+                if (updateWishlist) {
+                    updateWishlist(product, variant, quantity)
+                    return
+                }
+                addToWishlist(product, variant, quantity)
+            }
+
+            if (addToCart || updateCart) {
+                buttons.push(
+                    <Button
+                        key="cart-button"
+                        onClick={handleCartItem}
+                        disabled={showInventoryMessage}
+                        width="100%"
+                        variant="solid"
+                        marginBottom={4}
+                    >
+                        {updateCart
+                            ? buttonText.update
+                            : isProductASet
+                            ? buttonText.addSetToCart
+                            : buttonText.addToCart}
+                    </Button>
+                )
+            }
+
+            if (addToWishlist || updateWishlist) {
+                buttons.push(
+                    <ButtonWithRegistration
+                        key="wishlist-button"
+                        onClick={handleWishlistItem}
+                        disabled={isWishlistLoading || !canAddToWishlist}
+                        isLoading={isWishlistLoading}
+                        width="100%"
+                        variant="outline"
+                        marginBottom={4}
+                    >
+                        {updateWishlist
+                            ? buttonText.update
+                            : isProductASet
+                            ? buttonText.addSetToWishlist
+                            : buttonText.addToWishlist}
+                    </ButtonWithRegistration>
+                )
+            }
+
+            return buttons
+        }
+
+        // Bind the reference with our `scope` that includes the internal validate function for this component.
+        // Other values can be added to this scope as required.
+        if (typeof ref === 'function') {
+            ref = ref.bind({validateOrderability: validateAndShowError})
+        }
+
+        useEffect(() => {
+            if (isAddToCartModalOpen) {
+                onAddToCartModalClose()
+            }
+        }, [location.pathname])
+
+        useEffect(() => {
+            if (!isProductASet && validateOrderability(variant, quantity, stockLevel)) {
+                toggleShowOptionsMessage(false)
+            }
+        }, [variationParams])
+
+        useEffect(() => {
+            if (variant) {
+                onVariantSelected(product, variant, quantity)
+            }
+        }, [variant?.productId, quantity])
+
+        return (
+            <Flex direction={'column'} data-testid="product-view" ref={ref}>
+                {/* Basic information etc. title, price, breadcrumb*/}
+                <Box display={['block', 'block', 'block', 'none']}>
+                    <ProductViewHeader
+                        name={product?.name}
+                        price={product?.price}
+                        productType={product?.type}
+                        currency={product?.currency}
+                        category={category}
+                    />
+                </Box>
+                <Flex direction={['column', 'column', 'column', 'row']}>
+                    <Box flex={1} mr={[0, 0, 0, 6, 6]}>
+                        {product ? (
+                            <>
+                                <ImageGallery
+                                    size={imageSize}
+                                    imageGroups={product.imageGroups}
+                                    selectedVariationAttributes={variationParams}
+                                    lazy={isProductPartOfSet}
+                                />
+                                <HideOnMobile>
+                                    {showFullLink && product && (
+                                        <Link to={`/product/${product.master.masterId}`}>
+                                            <Text color="blue.600">
+                                                {intl.formatMessage({
+                                                    defaultMessage: 'See full details',
+                                                    id: 'product_view.link.full_details'
+                                                })}
+                                            </Text>
+                                        </Link>
+                                    )}
+                                </HideOnMobile>
+                            </>
+                        ) : (
+                            <ImageGallerySkeleton />
+                        )}
+                    </Box>
+
+                    {/* Variations & Quantity Selector & CTA buttons */}
+                    <VStack align="stretch" spacing={8} flex={1}>
+                        <Box display={['none', 'none', 'none', 'block']}>
+                            <ProductViewHeader
+                                name={product?.name}
+                                price={product?.price}
+                                productType={product?.type}
+                                currency={product?.currency}
+                                category={category}
+                            />
+                        </Box>
+                        <VStack align="stretch" spacing={4}>
+                            {/*
+                                Customize the skeletons shown for attributes to suit your needs. At the point
+                                that we show the skeleton we do not know how many variations are selectable. So choose
+                                a a skeleton that will meet most of your needs.
+                            */}
+                            {showLoading ? (
+                                <>
+                                    {/* First Attribute Skeleton */}
+                                    <Skeleton height={6} width={32} />
+                                    <Skeleton height={20} width={64} />
+
+                                    {/* Second Attribute Skeleton */}
+                                    <Skeleton height={6} width={32} />
+                                    <Skeleton height={20} width={64} />
+                                </>
+                            ) : (
+                                <>
+                                    {/* Attribute Swatches */}
+                                    {variationAttributes.map((variationAttribute) => {
+                                        const {
+                                            id,
+                                            name,
+                                            selectedValue,
+                                            values = []
+                                        } = variationAttribute
+                                        return (
+                                            <SwatchGroup
+                                                key={id}
+                                                onChange={(_, href) => {
+                                                    if (!href) return
+                                                    history.replace(href)
+                                                }}
+                                                variant={id === 'color' ? 'circle' : 'square'}
+                                                value={selectedValue?.value}
+                                                displayName={selectedValue?.name || ''}
+                                                label={name}
+                                            >
+                                                {values.map(
+                                                    ({href, name, image, value, orderable}) => (
+                                                        <Swatch
+                                                            key={value}
+                                                            href={href}
+                                                            disabled={!orderable}
+                                                            value={value}
+                                                            name={name}
+                                                        >
+                                                            {image ? (
+                                                                <Box
+                                                                    height="100%"
+                                                                    width="100%"
+                                                                    minWidth="32px"
+                                                                    backgroundRepeat="no-repeat"
+                                                                    backgroundSize="cover"
+                                                                    backgroundColor={name.toLowerCase()}
+                                                                    backgroundImage={
+                                                                        image
+                                                                            ? `url(${
+                                                                                  image.disBaseLink ||
+                                                                                  image.link
+                                                                              })`
+                                                                            : ''
+                                                                    }
+                                                                />
+                                                            ) : (
+                                                                name
+                                                            )}
+                                                        </Swatch>
+                                                    )
+                                                )}
+                                            </SwatchGroup>
+                                        )
+                                    })}
+                                </>
+                            )}
+
+                            {/* Quantity Selector */}
+                            {!isProductASet && (
+                                <VStack align="stretch" maxWidth={'200px'}>
+                                    <Box fontWeight="bold">
+                                        <label htmlFor="quantity">
+                                            {intl.formatMessage({
+                                                defaultMessage: 'Quantity',
+                                                id: 'product_view.label.quantity'
+                                            })}
+                                            :
+                                        </label>
+                                    </Box>
+
+                                    <QuantityPicker
+                                        id="quantity"
+                                        step={stepQuantity}
+                                        value={quantity}
+                                        min={minOrderQuantity}
+                                        onChange={(stringValue, numberValue) => {
+                                            // Set the Quantity of product to value of input if value number
+                                            if (numberValue >= 0) {
+                                                setQuantity(numberValue)
+                                            } else if (stringValue === '') {
+                                                // We want to allow the use to clear the input to start a new input so here we set the quantity to '' so NAN is not displayed
+                                                // User will not be able to add '' qauntity to the cart due to the add to cart button enablement rules
+                                                setQuantity(stringValue)
+                                            }
+                                        }}
+                                        onBlur={(e) => {
+                                            // Default to 1the `minOrderQuantity` if a user leaves the box with an invalid value
+                                            const value = e.target.value
+                                            if (parseInt(value) < 0 || value === '') {
+                                                setQuantity(minOrderQuantity)
+                                            }
+                                        }}
+                                        onFocus={(e) => {
+                                            // This is useful for mobile devices, this allows the user to pop open the keyboard and set the
+                                            // new quantity with one click. NOTE: This is something that can be refactored into the parent
+                                            // component, potentially as a prop called `selectInputOnFocus`.
+                                            e.target.select()
+                                        }}
+                                    />
+                                </VStack>
+                            )}
+                            <Box ref={errorContainerRef}>
+                                {!showLoading && showOptionsMessage && (
+                                    <Fade in={true}>
+                                        <Text color="orange.600" fontWeight={600} marginBottom={8}>
+                                            {intl.formatMessage({
+                                                defaultMessage:
+                                                    'Please select all your options above'
+                                            })}
+                                        </Text>
+                                    </Fade>
+                                )}
+                            </Box>
+                            <HideOnDesktop>
+                                {showFullLink && product && (
+                                    <Link to={`/product/${product.master.masterId}`}>
+                                        <Text color="blue.600">
+                                            {intl.formatMessage({
+                                                defaultMessage: 'See full details',
+                                                id: 'product_view.link.full_details'
+                                            })}
+                                        </Text>
+                                    </Link>
+                                )}
+                            </HideOnDesktop>
+                            {isProductASet && <p>{product?.shortDescription}</p>}
+                        </VStack>
+
+                        <Box>
+                            {!showLoading && showInventoryMessage && (
+                                <Fade in={true}>
+                                    <Text color="orange.600" fontWeight={600} marginBottom={8}>
+                                        {inventoryMessage}
+                                    </Text>
+                                </Fade>
+                            )}
+                            <Box
+                                display={
+                                    isProductPartOfSet ? 'block' : ['none', 'none', 'none', 'block']
+                                }
+                            >
+                                {renderActionButtons()}
+                            </Box>
+                        </Box>
+                    </VStack>
+                </Flex>
+
+                {/* Sticky call-to-action buttons for mobile and certain product types */}
+                <Box
+                    position="fixed"
+                    bg="white"
+                    width="100%"
+                    display={isProductPartOfSet ? 'none' : ['block', 'block', 'block', 'none']}
+                    p={[4, 4, 6]}
+                    left={0}
+                    bottom={0}
+                    zIndex={2}
+                    boxShadow={theme.shadows.top}
+                >
+                    {renderActionButtons()}
+                </Box>
+            </Flex>
+        )
+    }
+)
+
+ProductView.displayName = 'ProductView'
+
+ProductView.propTypes = {
+    product: PropTypes.object,
+    isProductPartOfSet: PropTypes.bool,
+    category: PropTypes.array,
+    isProductLoading: PropTypes.bool,
+    isWishlistLoading: PropTypes.bool,
+    addToCart: PropTypes.func,
+    addToWishlist: PropTypes.func,
+    updateCart: PropTypes.func,
+    updateWishlist: PropTypes.func,
+    showFullLink: PropTypes.bool,
+    imageSize: PropTypes.oneOf(['sm', 'md']),
+    onVariantSelected: PropTypes.func,
+    validateOrderability: PropTypes.func
+}
+
+export default ProductView