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

package/app/pages/product-detail/index.mock.js

@@ -0,0 +1,197 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+export const basketWithProductSet = {
+    _v: '21.3',
+    _type: 'basket',
+    _resource_state: '9fdc9a8aeaea84a84a9dfed115ad37a0a32c86df4693cc7a9f62afc3395527c7',
+    _flash: [
+        {
+            _type: 'flash',
+            type: 'PaymentMethodRequired',
+            message:
+                'No payment method ID was specified. Please provide a valid payment method ID.',
+            path: '$.payment_instruments[0].payment_method_id'
+        },
+        {
+            _type: 'flash',
+            type: 'BillingAddressRequired',
+            message: 'No billing address was specified. Please provide a valid billing address.',
+            path: '$.billing_address'
+        },
+        {
+            _type: 'flash',
+            type: 'OrderTotalNotSet',
+            message: 'Order total missing, calculation failed.',
+            path: '$.order_total'
+        },
+        {
+            _type: 'flash',
+            type: 'ShippingAddressRequired',
+            message: 'No shipping address was specified. Please provide a valid shipping address.',
+            path: '$.shipments[0].shipping_address',
+            details: {
+                shipmentId: 'me'
+            }
+        },
+        {
+            _type: 'flash',
+            type: 'ShippingMethodRequired',
+            message:
+                'No shipping method ID was specified. Please provide a valid shipping method ID.',
+            path: '$.shipments[0].shipping_method',
+            details: {
+                shipmentId: 'me'
+            }
+        },
+        {
+            _type: 'flash',
+            type: 'ShippingItemAdjustedPriceNotSet',
+            message: "Price missing for shipping item ''5fb887a2999303b33676e0d3a5''.",
+            path: '$.shipping_items[0].adjusted_price'
+        }
+    ],
+    adjusted_merchandize_total_tax: 17.01,
+    adjusted_shipping_total_tax: null,
+    agent_basket: false,
+    basket_id: '437113007d685eab389f1cd229',
+    channel_type: 'storefront',
+    creation_date: '2023-02-22T21:47:29.585Z',
+    currency: 'GBP',
+    customer_info: {
+        _type: 'customer_info',
+        customer_id: 'abkHtKmulJkKgRmrkVwqYYkHBI',
+        email: ''
+    },
+    last_modified: '2023-02-22T22:15:41.482Z',
+    merchandize_total_tax: 17.01,
+    notes: {
+        _type: 'simple_link',
+        link: 'https://zzrf-001.dx.commercecloud.salesforce.com/s/RefArchGlobal/dw/shop/v21_3/baskets/437113007d685eab389f1cd229/notes'
+    },
+    order_total: null,
+    product_items: [
+        {
+            _type: 'product_item',
+            adjusted_tax: 6.76,
+            base_price: 71.03,
+            bonus_product_line_item: false,
+            gift: false,
+            item_id: '5060f31486572338f05d04fc56',
+            item_text: 'Quilted Jacket',
+            price: 142.06,
+            price_after_item_discount: 142.06,
+            price_after_order_discount: 142.06,
+            product_id: '701642853695M',
+            product_name: 'Quilted Jacket',
+            quantity: 2,
+            shipment_id: 'me',
+            tax: 6.76,
+            tax_basis: 142.06,
+            tax_class_id: 'standard',
+            tax_rate: 0.05
+        },
+        {
+            _type: 'product_item',
+            adjusted_tax: 4.21,
+            base_price: 44.16,
+            bonus_product_line_item: false,
+            gift: false,
+            item_id: '9a8003bebeea153d112083f2bd',
+            item_text: 'Pull On Pant',
+            price: 88.32,
+            price_after_item_discount: 88.32,
+            price_after_order_discount: 88.32,
+            product_id: '701642867104M',
+            product_name: 'Pull On Pant',
+            quantity: 2,
+            shipment_id: 'me',
+            tax: 4.21,
+            tax_basis: 88.32,
+            tax_class_id: 'standard',
+            tax_rate: 0.05
+        },
+        {
+            _type: 'product_item',
+            adjusted_tax: 3.02,
+            base_price: 63.36,
+            bonus_product_line_item: false,
+            gift: false,
+            item_id: '1cda01244dc449d9b245577378',
+            item_text: 'Zerrick',
+            price: 63.36,
+            price_after_item_discount: 63.36,
+            price_after_order_discount: 63.36,
+            product_id: '740357358101M',
+            product_name: 'Zerrick',
+            quantity: 1,
+            shipment_id: 'me',
+            tax: 3.02,
+            tax_basis: 63.36,
+            tax_class_id: 'standard',
+            tax_rate: 0.05
+        },
+        {
+            _type: 'product_item',
+            adjusted_tax: 3.02,
+            base_price: 63.36,
+            bonus_product_line_item: false,
+            gift: false,
+            item_id: '1007d8db121aa4331836f8f934',
+            item_text: 'Zerrick',
+            price: 63.36,
+            price_after_item_discount: 63.36,
+            price_after_order_discount: 63.36,
+            product_id: '740357358095M',
+            product_name: 'Zerrick',
+            quantity: 1,
+            shipment_id: 'me',
+            tax: 3.02,
+            tax_basis: 63.36,
+            tax_class_id: 'standard',
+            tax_rate: 0.05
+        }
+    ],
+    product_sub_total: 357.1,
+    product_total: 357.1,
+    shipments: [
+        {
+            _type: 'shipment',
+            adjusted_merchandize_total_tax: 17.01,
+            adjusted_shipping_total_tax: null,
+            gift: false,
+            merchandize_total_tax: 17.01,
+            product_sub_total: 357.1,
+            product_total: 357.1,
+            shipment_id: 'me',
+            shipment_total: null,
+            shipping_status: 'not_shipped',
+            shipping_total: null,
+            shipping_total_tax: null,
+            tax_total: null
+        }
+    ],
+    shipping_items: [
+        {
+            _type: 'shipping_item',
+            adjusted_tax: null,
+            base_price: null,
+            item_id: '5fb887a2999303b33676e0d3a5',
+            item_text: 'Shipping',
+            price: null,
+            price_after_item_discount: null,
+            shipment_id: 'me',
+            tax: null,
+            tax_basis: null,
+            tax_class_id: null,
+            tax_rate: 0.05
+        }
+    ],
+    shipping_total: null,
+    shipping_total_tax: null,
+    taxation: 'gross',
+    tax_total: null
+}

package/app/pages/product-detail/index.test.js

@@ -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 from 'react'
+import {fireEvent, screen, waitFor, within} from '@testing-library/react'
+import {
+    mockCustomerBaskets,
+    mockedCustomerProductLists,
+    productsResponse
+} from '@salesforce/retail-react-app/app/mocks/mock-data'
+import {Route, Switch} from 'react-router-dom'
+import {rest} from 'msw'
+import ProductDetail from '.'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {basketWithProductSet} from '@salesforce/retail-react-app/app/pages/product-detail/index.mock'
+import mockedProductSet from '@salesforce/retail-react-app/app/mocks/product-set-winter-lookM'
+
+jest.setTimeout(60000)
+
+jest.useFakeTimers()
+
+const MockedComponent = () => {
+    return (
+        <Switch>
+            <Route
+                path="/en-GB/product/:productId"
+                render={(props) => <ProductDetail {...props} />}
+            />
+        </Switch>
+    )
+}
+
+beforeEach(() => {
+    jest.resetModules()
+
+    global.server.use(
+        // By default, the page will be rendered with a product set
+        rest.get('*/products/:productId', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedProductSet))
+        }),
+        rest.get('*/customers/:customerId/baskets', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockCustomerBaskets))
+        }),
+        rest.get('*/customers/:customerId/product-lists', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedCustomerProductLists))
+        })
+    )
+
+    // 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({}, 'ProductDetail', '/en-GB/product/test-product')
+})
+
+afterEach(() => {
+    jest.resetModules()
+})
+
+test('should render product details page', async () => {
+    global.server.use(
+        // Use a single product (and not a product set)
+        rest.get('*/products/:productId', (req, res, ctx) => {
+            return res(ctx.json(productsResponse.data[0]))
+        })
+    )
+
+    renderWithProviders(<MockedComponent />)
+
+    expect(await screen.findByTestId('product-details-page')).toBeInTheDocument()
+    await waitFor(() => {
+        expect(screen.getAllByText(/Long Sleeve Crew Neck/)).toHaveLength(2)
+        expect(screen.getAllByText(/14.99/)).toHaveLength(2)
+        expect(screen.getAllByText(/Add to Cart/)).toHaveLength(2)
+        expect(screen.getAllByText(/Add to Wishlist/)).toHaveLength(2)
+        expect(screen.getAllByTestId('product-view')).toHaveLength(1)
+    })
+})
+
+describe('product set', () => {
+    beforeEach(() => {
+        global.server.use(
+            // For adding items to basket
+            rest.post('*/baskets/:basketId/items', (req, res, ctx) => {
+                return res(ctx.json(basketWithProductSet))
+            })
+        )
+    })
+
+    test('render multi-product layout', async () => {
+        renderWithProviders(<MockedComponent />)
+
+        await waitFor(
+            () => {
+                expect(screen.getAllByTestId('product-view')).toHaveLength(4) // 1 parent + 3 children
+            },
+            {timeout: 5000}
+        )
+    })
+
+    test('add the set to cart successfully', async () => {
+        const urlPathAfterSelectingAllVariants =
+            '/en-GB/product/winter-lookM?25518447M=color%3DJJ5FUXX%26size%3D9MD&25518704M=color%3DJJ2XNXX%26size%3D9MD&25772717M=color%3DTAUPETX%26size%3D070%26width%3DM'
+        window.history.pushState({}, 'ProductDetail', urlPathAfterSelectingAllVariants)
+
+        // Initial basket is necessary to add items to it
+        const initialBasket = {basketId: 'valid_id'}
+        renderWithProviders(<MockedComponent />, {wrapperProps: {initialBasket}})
+
+        await waitFor(
+            () => {
+                expect(screen.getAllByText('Winter Look')[0]).toBeInTheDocument()
+            },
+            {timeout: 5000}
+        )
+
+        const buttons = await screen.findAllByText(/add set to cart/i)
+        fireEvent.click(buttons[0])
+
+        await waitFor(
+            () => {
+                const modal = screen.getByTestId('add-to-cart-modal')
+                expect(within(modal).getByText(/items added to cart/i)).toBeInTheDocument()
+            },
+            // Seems like rendering the modal takes a bit more time
+            {timeout: 10000}
+        )
+    }, 30000)
+
+    test('add the set to cart with error messages', async () => {
+        renderWithProviders(<MockedComponent />)
+
+        await waitFor(
+            () => {
+                expect(screen.getAllByText('Winter Look')[0]).toBeInTheDocument()
+            },
+            {timeout: 5000}
+        )
+
+        const buttons = await screen.findAllByText(/add set to cart/i)
+        fireEvent.click(buttons[0])
+
+        await waitFor(() => {
+            // Show error when users have not selected all the variants yet
+            // 1 error for each child product
+            const errorMessages = screen.getAllByText(/Please select all your options above/i)
+            expect(errorMessages).toHaveLength(3)
+        })
+    })
+
+    test("child products' images are lazy loaded", async () => {
+        renderWithProviders(<MockedComponent />)
+
+        const childProducts = await screen.findAllByTestId('child-product')
+
+        childProducts.forEach((child) => {
+            const heroImage = within(child).getAllByRole('img')[0]
+            expect(heroImage.getAttribute('loading')).toBe('lazy')
+        })
+    })
+})

package/app/pages/product-detail/partials/information-accordion.jsx

@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+    Accordion,
+    AccordionItem,
+    AccordionButton,
+    AccordionPanel,
+    AccordionIcon,
+    Box,
+    Stack
+} from '@chakra-ui/react'
+import {useIntl} from 'react-intl'
+
+const InformationAccordion = ({product}) => {
+    const {formatMessage} = useIntl()
+
+    return (
+        <Stack direction="row" spacing={[0, 0, 0, 16]}>
+            <Accordion allowMultiple maxWidth={'896px'} flex={[1, 1, 1, 5]}>
+                {/* Details */}
+                <AccordionItem>
+                    <h2>
+                        <AccordionButton height="64px">
+                            <Box flex="1" textAlign="left" fontWeight="bold" fontSize="lg">
+                                {formatMessage({
+                                    defaultMessage: 'Product Detail',
+                                    id: 'product_detail.accordion.button.product_detail'
+                                })}
+                            </Box>
+                            <AccordionIcon />
+                        </AccordionButton>
+                    </h2>
+                    <AccordionPanel mb={6} mt={4}>
+                        <div
+                            dangerouslySetInnerHTML={{
+                                __html: product?.longDescription
+                            }}
+                        />
+                    </AccordionPanel>
+                </AccordionItem>
+
+                {/* Size & Fit */}
+                <AccordionItem>
+                    <h2>
+                        <AccordionButton height="64px">
+                            <Box flex="1" textAlign="left" fontWeight="bold" fontSize="lg">
+                                {formatMessage({
+                                    defaultMessage: 'Size & Fit',
+                                    id: 'product_detail.accordion.button.size_fit'
+                                })}
+                            </Box>
+                            <AccordionIcon />
+                        </AccordionButton>
+                    </h2>
+                    <AccordionPanel mb={6} mt={4}>
+                        {formatMessage({
+                            defaultMessage: 'Coming Soon',
+                            id: 'product_detail.accordion.message.coming_soon'
+                        })}
+                    </AccordionPanel>
+                </AccordionItem>
+
+                {/* Reviews */}
+                <AccordionItem>
+                    <h2>
+                        <AccordionButton height="64px">
+                            <Box flex="1" textAlign="left" fontWeight="bold" fontSize="lg">
+                                {formatMessage({
+                                    defaultMessage: 'Reviews',
+                                    id: 'product_detail.accordion.button.reviews'
+                                })}
+                            </Box>
+                            <AccordionIcon />
+                        </AccordionButton>
+                    </h2>
+                    <AccordionPanel mb={6} mt={4}>
+                        {formatMessage({
+                            defaultMessage: 'Coming Soon',
+                            id: 'product_detail.accordion.message.coming_soon'
+                        })}
+                    </AccordionPanel>
+                </AccordionItem>
+
+                {/* Questions */}
+                <AccordionItem>
+                    <h2>
+                        <AccordionButton height="64px">
+                            <Box flex="1" textAlign="left" fontWeight="bold" fontSize="lg">
+                                {formatMessage({
+                                    defaultMessage: 'Questions',
+                                    id: 'product_detail.accordion.button.questions'
+                                })}
+                            </Box>
+                            <AccordionIcon />
+                        </AccordionButton>
+                    </h2>
+                    <AccordionPanel mb={6} mt={4}>
+                        {formatMessage({
+                            defaultMessage: 'Coming Soon',
+                            id: 'product_detail.accordion.message.coming_soon'
+                        })}
+                    </AccordionPanel>
+                </AccordionItem>
+            </Accordion>
+            <Box display={['none', 'none', 'none', 'block']} flex={4}></Box>
+        </Stack>
+    )
+}
+
+InformationAccordion.propTypes = {
+    product: PropTypes.object
+}
+
+export default InformationAccordion