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

package/app/components/product-view/index.test.js

@@ -0,0 +1,224 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import {fireEvent, screen, waitFor} from '@testing-library/react'
+import mockProductDetail from '@salesforce/retail-react-app/app/mocks/variant-750518699578M'
+import mockProductSet from '@salesforce/retail-react-app/app/mocks/product-set-winter-lookM'
+import ProductView from '@salesforce/retail-react-app/app/components/product-view'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import userEvent from '@testing-library/user-event'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+
+const MockComponent = (props) => {
+    const {data: customer} = useCurrentCustomer()
+    return (
+        <div>
+            <div>customer: {customer?.authType}</div>
+            <ProductView {...props} />
+        </div>
+    )
+}
+
+MockComponent.propTypes = {
+    product: PropTypes.object,
+    addToCart: PropTypes.func,
+    addToWishlist: PropTypes.func,
+    updateWishlist: PropTypes.func
+}
+
+// Set up and clean up
+beforeEach(() => {
+    // Since we're testing some navigation logic, we are using a simple Router
+    // around our component. We need to initialize the default route/path here.
+    window.history.pushState({}, 'Account', '/en/account')
+})
+afterEach(() => {
+    jest.resetModules()
+    localStorage.clear()
+    sessionStorage.clear()
+})
+
+test('ProductView Component renders properly', async () => {
+    const addToCart = jest.fn()
+    await renderWithProviders(<MockComponent product={mockProductDetail} addToCart={addToCart} />)
+
+    expect(screen.getAllByText(/Black Single Pleat Athletic Fit Wool Suit/i)).toHaveLength(2)
+    expect(screen.getAllByText(/299.99/)).toHaveLength(2)
+    expect(screen.getAllByText(/Add to cart/i)).toHaveLength(2)
+    expect(screen.getAllByRole('radiogroup')).toHaveLength(3)
+    expect(screen.getAllByText(/add to cart/i)).toHaveLength(2)
+})
+
+test('ProductView Component renders with addToCart event handler', async () => {
+    const addToCart = jest.fn()
+    await renderWithProviders(<MockComponent product={mockProductDetail} addToCart={addToCart} />)
+
+    const addToCartButton = screen.getAllByText(/add to cart/i)[0]
+    fireEvent.click(addToCartButton)
+
+    await waitFor(() => {
+        expect(addToCart).toHaveBeenCalledTimes(1)
+    })
+})
+
+test('ProductView Component renders with addToWishList event handler', async () => {
+    const addToWishlist = jest.fn()
+
+    await renderWithProviders(
+        <MockComponent product={mockProductDetail} addToWishlist={addToWishlist} />
+    )
+
+    await waitFor(() => {
+        expect(screen.getByText(/customer: registered/)).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
+        const addToWishListButton = screen.getAllByText(/Add to wishlist/i)[0]
+
+        fireEvent.click(addToWishListButton)
+        expect(addToWishlist).toHaveBeenCalledTimes(1)
+    })
+})
+
+test('ProductView Component renders with updateWishlist event handler', async () => {
+    const updateWishlist = jest.fn()
+
+    await renderWithProviders(
+        <MockComponent product={mockProductDetail} updateWishlist={updateWishlist} />
+    )
+
+    await waitFor(() => {
+        expect(screen.getByText(/customer: registered/)).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
+        const updateWishlistButton = screen.getAllByText(/Update/i)[0]
+
+        fireEvent.click(updateWishlistButton)
+        expect(updateWishlist).toHaveBeenCalledTimes(1)
+    })
+})
+
+test('Product View can update quantity', async () => {
+    const user = userEvent.setup()
+    const addToCart = jest.fn()
+    await renderWithProviders(<MockComponent product={mockProductDetail} addToCart={addToCart} />)
+
+    let quantityBox
+    await waitFor(() => {
+        quantityBox = screen.getByRole('spinbutton')
+    })
+
+    await waitFor(() => {
+        expect(quantityBox).toHaveValue('1')
+    })
+
+    // update item quantity
+    await user.type(quantityBox, '{backspace}3')
+
+    await waitFor(() => {
+        expect(quantityBox).toHaveValue('3')
+    })
+})
+
+test('renders a product set properly - parent item', () => {
+    const parent = mockProductSet
+    renderWithProviders(
+        <MockComponent product={parent} addToCart={() => {}} addToWishlist={() => {}} />
+    )
+
+    // NOTE: there can be duplicates of the same element, due to mobile and desktop views
+    // (they're hidden with display:none style)
+
+    const startingAtLabel = screen.getAllByText(/starting at/i)[0]
+    const addSetToCartButton = screen.getAllByRole('button', {name: /add set to cart/i})[0]
+    const addSetToWishlistButton = screen.getAllByRole('button', {name: /add set to wishlist/i})[0]
+    const variationAttributes = screen.queryAllByRole('radiogroup') // e.g. sizes, colors
+    const quantityPicker = screen.queryByRole('spinbutton', {name: /quantity:/i})
+
+    // What should exist:
+    expect(startingAtLabel).toBeInTheDocument()
+    expect(addSetToCartButton).toBeInTheDocument()
+    expect(addSetToWishlistButton).toBeInTheDocument()
+
+    // What should _not_ exist:
+    expect(variationAttributes).toHaveLength(0)
+    expect(quantityPicker).toBeNull()
+})
+
+test('renders a product set properly - child item', () => {
+    const child = mockProductSet.setProducts[0]
+    renderWithProviders(
+        <MockComponent product={child} addToCart={() => {}} addToWishlist={() => {}} />
+    )
+
+    // NOTE: there can be duplicates of the same element, due to mobile and desktop views
+    // (they're hidden with display:none style)
+
+    const addToCartButton = screen.getAllByRole('button', {name: /add to cart/i})[0]
+    const addToWishlistButton = screen.getAllByRole('button', {name: /add to wishlist/i})[0]
+    const variationAttributes = screen.getAllByRole('radiogroup') // e.g. sizes, colors
+    const quantityPicker = screen.getByRole('spinbutton', {name: /quantity:/i})
+    const startingAtLabels = screen.queryAllByText(/starting at/i)
+
+    // What should exist:
+    expect(addToCartButton).toBeInTheDocument()
+    expect(addToWishlistButton).toBeInTheDocument()
+    expect(variationAttributes).toHaveLength(2)
+    expect(quantityPicker).toBeInTheDocument()
+
+    // What should _not_ exist:
+    expect(startingAtLabels).toHaveLength(0)
+})
+
+test('validateOrderability callback is called when adding a set to cart', async () => {
+    const user = userEvent.setup()
+
+    const parent = mockProductSet
+    const validateOrderability = jest.fn()
+
+    renderWithProviders(
+        <MockComponent
+            product={parent}
+            validateOrderability={validateOrderability}
+            addToCart={() => {}}
+            addToWishlist={() => {}}
+        />
+    )
+
+    const button = screen.getByRole('button', {name: /add set to cart/i})
+    await user.click(button)
+
+    await waitFor(() => {
+        expect(validateOrderability).toHaveBeenCalledTimes(1)
+    })
+})
+
+test('onVariantSelected callback is called after successfully selected a variant', async () => {
+    const user = userEvent.setup()
+
+    const onVariantSelected = jest.fn()
+    const child = mockProductSet.setProducts[0]
+
+    renderWithProviders(
+        <MockComponent
+            product={child}
+            onVariantSelected={onVariantSelected}
+            addToCart={() => {}}
+            addToWishlist={() => {}}
+        />
+    )
+
+    const size = screen.getByRole('radio', {name: /xl/i})
+    await user.click(size)
+
+    await waitFor(() => {
+        expect(onVariantSelected).toHaveBeenCalledTimes(1)
+    })
+})

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

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import {Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay} from '@chakra-ui/react'
+import ProductView from '@salesforce/retail-react-app/app/components/product-view'
+import {useProductViewModal} from '@salesforce/retail-react-app/app/hooks/use-product-view-modal'
+
+/**
+ * A Modal that contains Product View
+ */
+const ProductViewModal = ({product, isOpen, onClose, ...props}) => {
+    const productViewModalData = useProductViewModal(product)
+    return (
+        <Modal size="4xl" isOpen={isOpen} onClose={onClose}>
+            <ModalOverlay />
+            <ModalContent containerProps={{'data-testid': 'product-view-modal'}}>
+                <ModalCloseButton />
+                <ModalBody pb={8} bg="white" paddingBottom={6} marginTop={6}>
+                    <ProductView
+                        showFullLink={true}
+                        imageSize="sm"
+                        product={productViewModalData.product}
+                        isLoading={productViewModalData.isFetching}
+                        {...props}
+                    />
+                </ModalBody>
+            </ModalContent>
+        </Modal>
+    )
+}
+
+ProductViewModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpen: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    product: PropTypes.object,
+    isLoading: PropTypes.bool,
+    actionButtons: PropTypes.node,
+    onModalClose: PropTypes.func
+}
+
+export default ProductViewModal

package/app/components/product-view-modal/index.test.js

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import ProductViewModal from '@salesforce/retail-react-app/app/components/product-view-modal/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {fireEvent, screen} from '@testing-library/react'
+import {useDisclosure} from '@chakra-ui/react'
+import mockProductDetail from '@salesforce/retail-react-app/app/mocks/variant-750518699578M'
+import {prependHandlersToServer} from '@salesforce/retail-react-app/jest-setup'
+
+const MockComponent = ({updateCart}) => {
+    const {isOpen, onOpen, onClose} = useDisclosure()
+
+    return (
+        <div>
+            <button onClick={onOpen}>Open Modal</button>
+            <ProductViewModal
+                updateCart={updateCart}
+                onOpen={onOpen}
+                onClose={onClose}
+                isOpen={isOpen}
+                product={mockProductDetail}
+            />
+        </div>
+    )
+}
+
+MockComponent.propTypes = {
+    updateCart: PropTypes.func
+}
+
+beforeEach(() => {
+    prependHandlersToServer([
+        {
+            path: '*/products/:productId',
+            res: () => {
+                return mockProductDetail
+            }
+        }
+    ])
+})
+
+test('renders product view modal by default', () => {
+    renderWithProviders(<MockComponent />)
+
+    // open the modal
+    const trigger = screen.getByText(/open modal/i)
+    fireEvent.click(trigger)
+
+    expect(screen.getAllByText(/Black Single Pleat Athletic Fit Wool Suit/i)).toHaveLength(2)
+})
+
+test('renders product view modal with handleUpdateCart handler', () => {
+    const handleUpdateCart = jest.fn()
+    renderWithProviders(<MockComponent updateCart={handleUpdateCart} />)
+
+    // open the modal
+    const trigger = screen.getByText(/open modal/i)
+    fireEvent.click(trigger)
+
+    // click on update
+    const updateButton = screen.getAllByText(/Update/)[0]
+    fireEvent.click(updateButton)
+
+    expect(handleUpdateCart).toHaveBeenCalledTimes(1)
+})

package/app/components/promo-code/index.jsx

@@ -0,0 +1,162 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React, {useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import {FormattedMessage, useIntl} from 'react-intl'
+import {
+    Box,
+    Button,
+    Accordion,
+    AccordionButton,
+    AccordionItem,
+    AccordionPanel,
+    useToast
+} from '@chakra-ui/react'
+import {useForm} from 'react-hook-form'
+import {ChevronDownIcon, ChevronUpIcon} from '@salesforce/retail-react-app/app/components/icons'
+import PromoCodeFields from '@salesforce/retail-react-app/app/components/forms/promo-code-fields'
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+import {useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+
+export const usePromoCode = () => {
+    const {formatMessage} = useIntl()
+    const {data: basket} = useCurrentBasket()
+    const form = useForm()
+    const toast = useToast()
+
+    const applyPromoCodeMutation = useShopperBasketsMutation('addCouponToBasket')
+    const removePromoCodeMutation = useShopperBasketsMutation('removeCouponFromBasket')
+
+    const submitPromoCode = async ({code}) => {
+        applyPromoCodeMutation.mutate(
+            {
+                parameters: {basketId: basket?.basketId},
+                body: {
+                    code
+                }
+            },
+            {
+                onSuccess: () => {
+                    form.reset({code: ''})
+                    toast({
+                        title: formatMessage({
+                            defaultMessage: 'Promotion applied',
+                            id: 'use_promocode.info.promo_applied'
+                        }),
+                        status: 'success',
+                        position: 'top-right',
+                        isClosable: true
+                    })
+                },
+                onError: () => {
+                    form.setError('code', {
+                        type: 'manual',
+                        message: formatMessage({
+                            defaultMessage:
+                                'Check the code and try again, it may already be applied or the promo has expired.',
+                            id: 'use_promocode.error.check_the_code'
+                        })
+                    })
+                }
+            }
+        )
+    }
+
+    const removePromoCode = async (couponItemId) => {
+        removePromoCodeMutation.mutate(
+            {
+                parameters: {basketId: basket?.basketId, couponItemId}
+            },
+            {
+                onSuccess: () => {
+                    toast({
+                        title: formatMessage({
+                            defaultMessage: 'Promotion removed',
+                            id: 'use_promocode.info.promo_removed'
+                        }),
+                        status: 'success',
+                        position: 'top-right',
+                        isClosable: true
+                    })
+                },
+                onError: () => {
+                    toast({
+                        title: formatMessage(API_ERROR_MESSAGE),
+                        status: 'error',
+                        position: 'top-right',
+                        isClosable: true
+                    })
+                }
+            }
+        )
+    }
+
+    return {form, submitPromoCode, removePromoCode}
+}
+
+export const PromoCode = ({form, submitPromoCode, itemProps}) => {
+    const [isOpen, setOpen] = useState()
+
+    useEffect(() => {
+        if (form.formState.isSubmitSuccessful) {
+            setOpen(false)
+        }
+    }, [form.formState.isSubmitSuccessful])
+
+    return (
+        <Accordion allowToggle index={isOpen ? 0 : -1} onChange={() => setOpen(!isOpen)}>
+            <AccordionItem {...itemProps}>
+                {({isExpanded}) => (
+                    <>
+                        <AccordionButton
+                            as={Button}
+                            justifyContent="flex-start"
+                            variant="link"
+                            fontSize="sm"
+                            rightIcon={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                            onClick={() => form.reset()}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Do you have a promo code?"
+                                id="promocode.accordion.button.have_promocode"
+                            />
+                        </AccordionButton>
+
+                        <AccordionPanel px={0} mb={4}>
+                            <Box
+                                data-testid="promo-code-form"
+                                as="form"
+                                p={4}
+                                background="white"
+                                border="1px solid"
+                                borderColor="gray.100"
+                                borderRadius="base"
+                                onSubmit={form.handleSubmit(submitPromoCode)}
+                            >
+                                <PromoCodeFields form={form} maxWidth="350px" />
+                            </Box>
+                        </AccordionPanel>
+                    </>
+                )}
+            </AccordionItem>
+        </Accordion>
+    )
+}
+
+PromoCode.propTypes = {
+    /** The form object returned from `usePromoCode` hook */
+    form: PropTypes.object.isRequired,
+
+    /** The submit callback returned from `usePromoCode` hook */
+    submitPromoCode: PropTypes.func.isRequired,
+
+    /** Props applied to inner AccordionItem. Useful for style overrides. */
+    itemProps: PropTypes.object
+}
+
+export default PromoCode

package/app/components/promo-popover/index.jsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+    Box,
+    IconButton,
+    Popover,
+    PopoverArrow,
+    PopoverBody,
+    PopoverCloseButton,
+    PopoverContent,
+    PopoverHeader,
+    PopoverTrigger,
+    Portal,
+    Text
+} from '@chakra-ui/react'
+import {InfoIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {FormattedMessage} from 'react-intl'
+
+/**
+ * This component renders a small info icon and displays a popover when hovered. It could be adapted
+ * to handle any kind of popover if needed, but for now its been set up to be used/shared for displaying
+ * promotions applied to products and/or orders on cart, checkout, order confirmation and order history.
+ */
+const PromoPopover = ({header, children, ...props}) => {
+    return (
+        <Box position="relative" {...props}>
+            <Popover isLazy placement="top" boundary="scrollParent" trigger="hover" variant="small">
+                <PopoverTrigger>
+                    <IconButton
+                        icon={
+                            <InfoIcon
+                                display="block"
+                                boxSize="18px"
+                                mt="-2px"
+                                ml="-1px"
+                                color="gray.600"
+                            />
+                        }
+                        display="block"
+                        size="xs"
+                        height="14px"
+                        width="14px"
+                        minWidth="auto"
+                        position="relative"
+                        variant="unstyled"
+                    />
+                </PopoverTrigger>
+                <Portal>
+                    <PopoverContent border="none" borderRadius="base">
+                        <Box boxShadow="lg" zIndex="-1">
+                            <PopoverArrow />
+                            <PopoverCloseButton />
+                            <PopoverHeader borderBottom="none">
+                                {header || (
+                                    <Text fontWeight="bold" fontSize="md">
+                                        <FormattedMessage
+                                            defaultMessage="Promotions Applied"
+                                            id="promo_popover.heading.promo_applied"
+                                        />
+                                    </Text>
+                                )}
+                            </PopoverHeader>
+                            <PopoverBody pt={0}>{children}</PopoverBody>
+                        </Box>
+                    </PopoverContent>
+                </Portal>
+            </Popover>
+        </Box>
+    )
+}
+
+PromoPopover.propTypes = {
+    header: PropTypes.any,
+    children: PropTypes.any
+}
+
+export default PromoPopover

package/app/components/quantity-picker/index.jsx

@@ -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 {Button, HStack, Input, useNumberInput} from '@chakra-ui/react'
+
+/**
+ * This is the mobile implementation of the Chakra NumberInput. This simple component essentially
+ * is a helper so we don't have to reuse the hooks every time we need a number input since design dictates
+ * we use the moobile variation on all screens.
+ *
+ * NOTE: We can optionally put global logic we see if in here, and various styling decisions in this single
+ * component.
+ *
+ * @param {*} props
+ * @returns
+ */
+const QuantityPicker = (props) => {
+    const {getInputProps, getIncrementButtonProps, getDecrementButtonProps} = useNumberInput({
+        ...props,
+        // Defaults
+        focusInputOnChange: false,
+        onFocus: (e) => {
+            // eslint-disable-next-line react/prop-types
+            const {onFocus} = props
+
+            // This is useful for mobile devices, this allows the user to pop open the keyboard and set the
+            // new quantity with one click.
+            e.target.select()
+
+            // If there is a `onFocus` property define, call it with the event captured.
+            // eslint-disable-next-line react/prop-types
+            onFocus && onFocus.call(this, e)
+        }
+    })
+
+    const inc = getIncrementButtonProps({variant: 'outline'})
+    const dec = getDecrementButtonProps({variant: 'outline'})
+    const input = getInputProps({maxWidth: '44px', textAlign: 'center'})
+
+    return (
+        <HStack>
+            <Button data-testid="quantity-decrement" {...dec}>
+                -
+            </Button>
+            <Input {...input} />
+            <Button data-testid="quantity-increment" {...inc}>
+                +
+            </Button>
+        </HStack>
+    )
+}
+
+export default QuantityPicker