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

package/app/pages/account/wishlist/partials/wishlist-primary-action.test.js

@@ -0,0 +1,99 @@
+/*
+ * 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 {mockWishListDetails} from '@salesforce/retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action.mock'
+import ItemVariantProvider from '@salesforce/retail-react-app/app/components/item-variant'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import WishlistPrimaryAction from '@salesforce/retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action'
+import {screen, waitFor} from '@testing-library/react'
+import PropTypes from 'prop-types'
+import {rest} from 'msw'
+import {basketWithProductSet} from '@salesforce/retail-react-app/app/pages/product-detail/index.mock'
+
+const MockedComponent = ({variant}) => {
+    return (
+        <ItemVariantProvider variant={variant}>
+            <WishlistPrimaryAction />
+        </ItemVariantProvider>
+    )
+}
+MockedComponent.propTypes = {
+    variant: PropTypes.object
+}
+
+jest.mock('../../../../hooks/use-current-basket', () => {
+    return {
+        useCurrentBasket: () => {
+            return {
+                data: {basketId: 'basket_id'},
+                derivedData: {totalItems: 5}
+            }
+        }
+    }
+})
+
+beforeEach(() => {
+    jest.resetModules()
+
+    global.server.use(
+        // For adding items to basket
+        rest.post('*/baskets/:basketId/items', (req, res, ctx) => {
+            return res(ctx.json(basketWithProductSet))
+        })
+    )
+})
+
+test('the Add To Cart button', async () => {
+    const variant = mockWishListDetails.data[3]
+    const {user} = renderWithProviders(<MockedComponent variant={variant} />)
+
+    const addToCartButton = await screen.findByRole('button', {
+        name: /add to cart/i
+    })
+    await user.click(addToCartButton)
+
+    await waitFor(() => {
+        expect(screen.getByText(/1 item added to cart/i)).toBeInTheDocument()
+    })
+})
+
+test('the Add Set To Cart button', async () => {
+    const productSetWithoutVariants = mockWishListDetails.data[1]
+    const {user} = renderWithProviders(<MockedComponent variant={productSetWithoutVariants} />)
+
+    const button = await screen.findByRole('button', {name: /add set to cart/i})
+    await user.click(button)
+
+    await waitFor(() => {
+        expect(screen.getByText(/2 items added to cart/i)).toBeInTheDocument()
+    })
+})
+
+test('the View Full Details button', async () => {
+    const productSetWithVariants = mockWishListDetails.data[0]
+    renderWithProviders(<MockedComponent variant={productSetWithVariants} />)
+
+    const link = await screen.findByRole('link', {name: /view full details/i})
+    expect(link).toBeInTheDocument()
+})
+
+test('the View Options button', async () => {
+    const masterProduct = mockWishListDetails.data[2]
+    const {user} = renderWithProviders(<MockedComponent variant={masterProduct} />)
+
+    const button = await screen.findByRole('button', {name: /view options/i})
+    await user.click(button)
+
+    await waitFor(
+        () => {
+            const modal = screen.getByTestId('product-view-modal')
+            expect(modal).toBeVisible()
+        },
+        // Seems like rendering the modal takes a bit more time
+        {timeout: 5000}
+    )
+}, 30000)

package/app/pages/account/wishlist/partials/wishlist-secondary-button-group.jsx

@@ -0,0 +1,120 @@
+/*
+ * 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 {Button, ButtonGroup, useDisclosure} from '@chakra-ui/react'
+import {useIntl, defineMessage, FormattedMessage} from 'react-intl'
+import {useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
+
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import {useWishList} from '@salesforce/retail-react-app/app/hooks/use-wish-list'
+
+import ConfirmationModal from '@salesforce/retail-react-app/app/components/confirmation-modal/index'
+import {useItemVariant} from '@salesforce/retail-react-app/app/components/item-variant'
+import {noop} from '@salesforce/retail-react-app/app/utils/utils'
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+
+export const REMOVE_WISHLIST_ITEM_CONFIRMATION_DIALOG_CONFIG = {
+    dialogTitle: defineMessage({
+        defaultMessage: 'Confirm Remove Item',
+        id: 'confirmation_modal.remove_wishlist_item.title.confirm_remove'
+    }),
+    confirmationMessage: defineMessage({
+        defaultMessage: 'Are you sure you want to remove this item from your wishlist?',
+        id: 'confirmation_modal.remove_wishlist_item.message.sure_to_remove'
+    }),
+    primaryActionLabel: defineMessage({
+        defaultMessage: 'Yes, remove item',
+        id: 'confirmation_modal.remove_wishlist_item.action.yes'
+    }),
+    alternateActionLabel: defineMessage({
+        defaultMessage: 'No, keep item',
+        id: 'confirmation_modal.remove_wishlist_item.action.no'
+    }),
+    onPrimaryAction: noop
+}
+
+/**
+ * Renders secondary actions on a product-item card in the form of a button group.
+ * Represents other actions you want the user to perform with the product-item (eg.: Remove or Edit)
+ */
+const WishlistSecondaryButtonGroup = ({productListItemId, onClick = noop}) => {
+    const variant = useItemVariant()
+    const {data: customer} = useCurrentCustomer()
+    const {data: wishList} = useWishList()
+    const modalProps = useDisclosure()
+    const toast = useToast()
+    const {formatMessage} = useIntl()
+
+    const showRemoveItemConfirmation = () => {
+        modalProps.onOpen()
+    }
+
+    const deleteCustomerProductListItem = useShopperCustomersMutation(
+        'deleteCustomerProductListItem'
+    )
+
+    const handleItemRemove = async () => {
+        try {
+            const promise = deleteCustomerProductListItem.mutateAsync({
+                parameters: {
+                    customerId: customer.customerId,
+                    listId: wishList?.id,
+                    itemId: productListItemId
+                }
+            })
+            onClick(variant.id, promise)
+
+            await promise
+
+            toast({
+                title: formatMessage({
+                    defaultMessage: 'Item removed from wishlist',
+                    id: 'wishlist_secondary_button_group.info.item_removed'
+                }),
+                status: 'success'
+            })
+        } catch {
+            toast({title: formatMessage(API_ERROR_MESSAGE), status: 'error'})
+        }
+    }
+
+    return (
+        <>
+            <ButtonGroup spacing="6">
+                <Button
+                    variant="link"
+                    size="sm"
+                    onClick={showRemoveItemConfirmation}
+                    data-testid={`sf-wishlist-remove-${productListItemId}`}
+                >
+                    <FormattedMessage
+                        defaultMessage="Remove"
+                        id="wishlist_secondary_button_group.action.remove"
+                    />
+                </Button>
+                {/* <Button variant="link" size="sm" onClick={onItemEdit}>
+            <FormattedMessage defaultMessage="Edit" />
+        </Button> */}
+            </ButtonGroup>
+
+            <ConfirmationModal
+                {...REMOVE_WISHLIST_ITEM_CONFIRMATION_DIALOG_CONFIG}
+                onPrimaryAction={handleItemRemove}
+                {...modalProps}
+            />
+        </>
+    )
+}
+
+WishlistSecondaryButtonGroup.propTypes = {
+    productListItemId: PropTypes.string,
+    onClick: PropTypes.func
+}
+
+export default WishlistSecondaryButtonGroup

package/app/pages/account/wishlist/partials/wishlist-secondary-button-group.test.js

@@ -0,0 +1,391 @@
+/*
+ * 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 ItemVariantProvider from '@salesforce/retail-react-app/app/components/item-variant'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import WishlistSecondaryButtonGroup from '@salesforce/retail-react-app/app/pages/account/wishlist/partials/wishlist-secondary-button-group'
+import {screen, waitFor} from '@testing-library/react'
+import user from '@testing-library/user-event'
+import {rest} from 'msw'
+import {
+    mockedProductLists,
+    mockedWishListProducts
+} from '@salesforce/retail-react-app/app/pages/account/wishlist/index.mock'
+
+const mockData = {
+    creationDate: '2021-09-13T23:29:23.396Z',
+    customerProductListItems: [
+        {
+            id: '98ca9a3a9c8ee803543dc45cdc',
+            priority: 1,
+            productId: '25518837M',
+            public: false,
+            purchasedQuantity: 0,
+            quantity: 4,
+            type: 'product',
+            product: {
+                currency: 'GBP',
+                id: '25518837M',
+                imageGroups: [
+                    {
+                        images: [
+                            {
+                                alt: 'Ruffle Front V-Neck Cardigan, , large',
+                                disBaseLink:
+                                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg',
+                                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4cd0a798/images/large/PG.10216885.JJ169XX.PZ.jpg',
+                                title: 'Ruffle Front V-Neck Cardigan, '
+                            },
+                            {
+                                alt: 'Ruffle Front V-Neck Cardigan, , large',
+                                disBaseLink:
+                                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwf67d39ef/images/large/PG.10216885.JJ169XX.BZ.jpg',
+                                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwf67d39ef/images/large/PG.10216885.JJ169XX.BZ.jpg',
+                                title: 'Ruffle Front V-Neck Cardigan, '
+                            }
+                        ],
+                        viewType: 'large'
+                    },
+                    {
+                        images: [
+                            {
+                                alt: 'Ruffle Front V-Neck Cardigan, , medium',
+                                disBaseLink:
+                                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwc31527c1/images/medium/PG.10216885.JJ169XX.PZ.jpg',
+                                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwc31527c1/images/medium/PG.10216885.JJ169XX.PZ.jpg',
+                                title: 'Ruffle Front V-Neck Cardigan, '
+                            },
+                            {
+                                alt: 'Ruffle Front V-Neck Cardigan, , medium',
+                                disBaseLink:
+                                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw3b11511c/images/medium/PG.10216885.JJ169XX.BZ.jpg',
+                                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw3b11511c/images/medium/PG.10216885.JJ169XX.BZ.jpg',
+                                title: 'Ruffle Front V-Neck Cardigan, '
+                            }
+                        ],
+                        viewType: 'medium'
+                    },
+                    {
+                        images: [
+                            {
+                                alt: 'Ruffle Front V-Neck Cardigan, , small',
+                                disBaseLink:
+                                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4ada76e4/images/small/PG.10216885.JJ169XX.PZ.jpg',
+                                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw4ada76e4/images/small/PG.10216885.JJ169XX.PZ.jpg',
+                                title: 'Ruffle Front V-Neck Cardigan, '
+                            },
+                            {
+                                alt: 'Ruffle Front V-Neck Cardigan, , small',
+                                disBaseLink:
+                                    'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw5c3e4bf4/images/small/PG.10216885.JJ169XX.BZ.jpg',
+                                link: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw5c3e4bf4/images/small/PG.10216885.JJ169XX.BZ.jpg',
+                                title: 'Ruffle Front V-Neck Cardigan, '
+                            }
+                        ],
+                        viewType: 'small'
+                    }
+                ],
+                inventory: {
+                    ats: 1597,
+                    backorderable: false,
+                    id: 'inventory_m',
+                    orderable: true,
+                    preorderable: false,
+                    stockLevel: 1597
+                },
+                longDescription:
+                    "This flirty ruffle cardigan can take you from day to night. Don't leave home with out a great pair of Commerce Cloud Store earrings.",
+                master: {
+                    masterId: '25518837M',
+                    orderable: true,
+                    price: 26.23
+                },
+                minOrderQuantity: 1,
+                name: 'Ruffle Front V-Neck Cardigan',
+                pageDescription:
+                    "This flirty ruffle cardigan can take you from day to night. Don't leave home with out a great pair of Commerce Cloud Store earrings.",
+                pageTitle: 'Ruffle Front V-Neck Cardigan',
+                price: 26.23,
+                pricePerUnit: 26.23,
+                primaryCategoryId: 'womens-clothing-tops',
+                productPromotions: [
+                    {
+                        calloutMsg: '$50 Fixed Products Amount Above 100',
+                        promotionId: '$50FixedProductsAmountAbove100'
+                    },
+                    {
+                        calloutMsg: 'Buy one Long Center Seam Skirt and get 2 tops',
+                        promotionId: 'ChoiceOfBonusProdect-ProductLevel-ruleBased'
+                    }
+                ],
+                shortDescription:
+                    "This flirty ruffle cardigan can take you from day to night. Don't leave home with out a great pair of Commerce Cloud Store earrings.",
+                stepQuantity: 1,
+                type: {
+                    master: true
+                },
+                validFrom: {
+                    default: '2010-11-18T05:00:00.000Z'
+                },
+                variants: [
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873211M',
+                        variationValues: {
+                            color: 'JJ169XX',
+                            size: '9LG'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873334M',
+                        variationValues: {
+                            color: 'JJ908XX',
+                            size: '9LG'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873297M',
+                        variationValues: {
+                            color: 'JJ8UTXX',
+                            size: '9LG'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873372M',
+                        variationValues: {
+                            color: 'JJI15XX',
+                            size: '9LG'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873402M',
+                        variationValues: {
+                            color: 'JJI15XX',
+                            size: '9XL'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873303M',
+                        variationValues: {
+                            color: 'JJ8UTXX',
+                            size: '9MD'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873310M',
+                        variationValues: {
+                            color: 'JJ8UTXX',
+                            size: '9SM'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873228M',
+                        variationValues: {
+                            color: 'JJ169XX',
+                            size: '9MD'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873235M',
+                        variationValues: {
+                            color: 'JJ169XX',
+                            size: '9SM'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873396M',
+                        variationValues: {
+                            color: 'JJI15XX',
+                            size: '9SM'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873389M',
+                        variationValues: {
+                            color: 'JJI15XX',
+                            size: '9MD'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873327M',
+                        variationValues: {
+                            color: 'JJ8UTXX',
+                            size: '9XL'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873341M',
+                        variationValues: {
+                            color: 'JJ908XX',
+                            size: '9MD'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873358M',
+                        variationValues: {
+                            color: 'JJ908XX',
+                            size: '9SM'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873365M',
+                        variationValues: {
+                            color: 'JJ908XX',
+                            size: '9XL'
+                        }
+                    },
+                    {
+                        orderable: true,
+                        price: 26.23,
+                        productId: '701642873242M',
+                        variationValues: {
+                            color: 'JJ169XX',
+                            size: '9XL'
+                        }
+                    }
+                ],
+                variationAttributes: [
+                    {
+                        id: 'color',
+                        name: 'Colour',
+                        values: [
+                            {
+                                name: 'Black',
+                                orderable: true,
+                                value: 'JJ169XX'
+                            },
+                            {
+                                name: 'Icy Mint',
+                                orderable: true,
+                                value: 'JJ8UTXX'
+                            },
+                            {
+                                name: 'Grey Heather',
+                                orderable: true,
+                                value: 'JJ908XX'
+                            },
+                            {
+                                name: 'White',
+                                orderable: true,
+                                value: 'JJI15XX'
+                            }
+                        ]
+                    },
+                    {
+                        id: 'size',
+                        name: 'Size',
+                        values: [
+                            {
+                                name: 'S',
+                                orderable: true,
+                                value: '9SM'
+                            },
+                            {
+                                name: 'M',
+                                orderable: true,
+                                value: '9MD'
+                            },
+                            {
+                                name: 'L',
+                                orderable: true,
+                                value: '9LG'
+                            },
+                            {
+                                name: 'XL',
+                                orderable: true,
+                                value: '9XL'
+                            }
+                        ]
+                    }
+                ],
+                c_isNewtest: true,
+                c_isSale: true
+            }
+        }
+    ],
+    event: {},
+    id: 'eba7a6682031bfa931949708d7',
+    lastModified: '2021-09-14T00:47:12.612Z',
+    name: 'PWA wishlist',
+    public: false,
+    type: 'wish_list'
+}
+
+const MockedComponent = (props) => {
+    const product = mockData.customerProductListItems[0].product
+    return (
+        <ItemVariantProvider variant={{...product, productName: product.name}}>
+            <WishlistSecondaryButtonGroup productListItemId="some_id" {...props} />
+        </ItemVariantProvider>
+    )
+}
+
+beforeEach(() => {
+    jest.resetModules()
+
+    global.server.use(
+        // For `useWishList`
+        rest.get('*/products', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedWishListProducts))
+        }),
+        rest.get('*/customers/:customerId/product-lists', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedProductLists))
+        }),
+        rest.delete(
+            '*/customers/:customerId/product-lists/:listId/items/:itemId',
+            (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(204))
+            }
+        )
+    )
+})
+
+test('can remove item', async () => {
+    const mockedHandler = jest.fn()
+    renderWithProviders(<MockedComponent onClick={mockedHandler} />)
+
+    const removeButton = await screen.findByRole('button', {
+        name: /remove/i
+    })
+    user.click(removeButton)
+
+    const confirmButton = await screen.findByRole('button', {name: /yes, remove item/i})
+    user.click(confirmButton)
+
+    await waitFor(() => {
+        expect(mockedHandler).toHaveBeenCalled()
+    })
+})