W-19151166 fix product view modal cart (#2924)

* fix product view modal on cart page

Author: alexvuong

packages/template-chakra-storefront/CHANGELOG.md

@@ -1,9 +1,7 @@
 ## 0.1.0-extensibility-preview.5
-- Fix failing tests in pages folder [#2872](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2872)
-- Fix component tests in storefront template [#2878](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2878)
 - Migrate directory structure from `app/*` to `src/*` [#2693](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2693)
-- Upgrade to Chakra UI v3 [2839](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2839)
-  - Create a safe version of `<Portal>` that won't break the SSR rendering [#2785](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2785)
+- Upgrade to Chakra UI v3 and Decomposition on Cart, PLP, PDP and Cart [2839](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2839), [#2872](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2872), [#2878](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2878), [#2924](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2924)
+- Create a safe version of `<Portal>` that won't break the SSR rendering [#2785](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2785)
 
 ## 0.1.0-extensibility-preview.4
 - Fix hreflang alternate links [#2269](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2269)

packages/template-chakra-storefront/src/components/loading-spinner/index.jsx

@@ -17,6 +17,7 @@ const LoadingSpinner = ({wrapperStyles = {}, spinnerStyles = {}}) => {
             left="0"
             right="0"
             bottom="0"
+            data-testid="loading-spinner"
             background="whiteAlpha.800"
             {...wrapperStyles}
         >

packages/template-chakra-storefront/src/components/product-view-modal/bundle.jsx

@@ -1,21 +1,25 @@
 /*
- * Copyright (c) 2023, Salesforce, Inc.
+ * Copyright (c) 2025, 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, {useState, useRef} from 'react'
 import PropTypes from 'prop-types'
-import {Dialog, Flex, Box, VStack, useBreakpointValue} from '@chakra-ui/react'
+import {useIntl} from 'react-intl'
+import {Box, CloseButton, Dialog, Flex, VStack, useBreakpointValue} from '@chakra-ui/react'
 import {keepPreviousData} from '@tanstack/react-query'
+import {useProducts} from '@salesforce/commerce-sdk-react'
+
+// Project Components
 import ProductView from '../../components/product-view'
-import {useProductViewModal} from '../../hooks/use-product-view-modal'
 import SafePortal from '../safe-portal'
-import {useProducts} from '@salesforce/commerce-sdk-react'
 import ImageGallery, {Skeleton as ImageGallerySkeleton} from '../../components/image-gallery'
+
+// Project hooks
+import {useProductViewModal} from '../../hooks/use-product-view-modal'
 import {useDerivedProduct} from '../../hooks'
-import {useIntl} from 'react-intl'
 
 /**
  * A Dialog that contains Product View for product bundle
@@ -58,16 +62,16 @@ const BundleProductViewModal = ({product: bundle, isOpen, onClose, updateCart, .
 
     return (
         <Dialog.Root
+            lazyMount
             open={isOpen}
             onOpenChange={() => onClose()}
-            size="4xl"
+            size="xl"
             closeOnInteractOutside={false}
         >
             <SafePortal>
                 <Dialog.Backdrop />
                 <Dialog.Positioner>
                     <Dialog.Content data-testid="product-view-modal" aria-label={label}>
-                        <Dialog.CloseTrigger />
                         <Dialog.Body pb={8} bg="white" paddingBottom={6} marginTop={6}>
                             <Flex direction={['column', 'column', 'column', 'row']}>
                                 {/* Due to desktop layout, we'll need to render the image gallery separately, from outside the ProductView */}
@@ -169,6 +173,9 @@ const BundleProductViewModal = ({product: bundle, isOpen, onClose, updateCart, .
                                 </VStack>
                             </Flex>
                         </Dialog.Body>
+                        <Dialog.CloseTrigger asChild>
+                            <CloseButton size="sm" />
+                        </Dialog.CloseTrigger>
                     </Dialog.Content>
                 </Dialog.Positioner>
             </SafePortal>

packages/template-chakra-storefront/src/components/product-view-modal/bundle.test.js

@@ -16,7 +16,7 @@ import {
     mockProductBundleWithVariants,
     mockProductBundle
 } from '../../../mocks/product-bundle'
-import {rest} from 'msw'
+import {prependHandlersToServer} from '../../../jest-setup'
 
 const MockComponent = ({updateCart}) => {
     const {open, onOpen, onClose} = useDisclosure()
@@ -40,40 +40,46 @@ MockComponent.propTypes = {
 }
 
 beforeEach(() => {
-    global.server.use(
-        rest.get('*/products/:productId', (req, res, ctx) => {
-            return res(ctx.delay(0), ctx.status(200), ctx.json(mockProductBundle))
-        }),
-        rest.get('*/products', (req, res, ctx) => {
-            const swingTankBlackMediumVariantId = '701643473915M'
-            const swingTankBlackLargeVariantId = '701643473908M'
-            if (req.url.toString().includes(swingTankBlackMediumVariantId)) {
-                mockProductBundleWithVariants.data[1].inventory = {
-                    ...mockProductBundleWithVariants.data[1].inventory,
-                    stockLevel: 0
-                }
-            } else if (req.url.toString().includes(swingTankBlackLargeVariantId)) {
-                mockProductBundleWithVariants.data[1].inventory = {
-                    ...mockProductBundleWithVariants.data[1].inventory,
-                    stockLevel: 1
+    prependHandlersToServer([
+        {
+            path: '*/products/:productId',
+            method: 'get',
+            res: () => mockProductBundle
+        },
+        {
+            path: '*/products',
+            method: 'get',
+            res: (req) => {
+                const swingTankBlackMediumVariantId = '701643473915M'
+                const swingTankBlackLargeVariantId = '701643473908M'
+                if (req.url.toString().includes(swingTankBlackMediumVariantId)) {
+                    mockProductBundleWithVariants.data[1].inventory = {
+                        ...mockProductBundleWithVariants.data[1].inventory,
+                        stockLevel: 0
+                    }
+                } else if (req.url.toString().includes(swingTankBlackLargeVariantId)) {
+                    mockProductBundleWithVariants.data[1].inventory = {
+                        ...mockProductBundleWithVariants.data[1].inventory,
+                        stockLevel: 1
+                    }
                 }
+                return mockProductBundleWithVariants
             }
-            return res(ctx.json(mockProductBundleWithVariants))
-        })
-    )
+        }
+    ])
 })
 
 afterEach(() => {
     jest.resetModules()
     jest.restoreAllMocks()
 })
-//TODO: fix failed tests
-test.skip('renders bundle product view modal', async () => {
-    renderWithProviders(<MockComponent />)
+
+test('renders bundle product view modal', async () => {
+    const {user} = renderWithProviders(<MockComponent />)
     await waitFor(async () => {
         const trigger = screen.getByText(/open modal/i)
         await act(async () => {
-            fireEvent.click(trigger)
+            user.click(trigger)
         })
     })
 
@@ -92,15 +98,14 @@ test.skip('renders bundle product view modal', async () => {
     })
 })
 
-test.skip('renders bundle product view modal with handleUpdateCart handler', async () => {
+test('renders bundle product view modal with handleUpdateCart handler', async () => {
     const handleUpdateCart = jest.fn()
-    renderWithProviders(<MockComponent updateCart={handleUpdateCart} />)
+    const {user} = renderWithProviders(<MockComponent updateCart={handleUpdateCart} />)
 
-    // open the modal
     await waitFor(async () => {
         const trigger = screen.getByText(/open modal/i)
         await act(async () => {
-            fireEvent.click(trigger)
+            user.click(trigger)
         })
     })
 
@@ -115,12 +120,12 @@ test.skip('renders bundle product view modal with handleUpdateCart handler', asy
     expect(handleUpdateCart).toHaveBeenCalledTimes(1)
 })
 
-test.skip('bundle product view modal disables update button when child is out of stock', async () => {
-    renderWithProviders(<MockComponent />)
+test('bundle product view modal disables update button when child is out of stock', async () => {
+    const {user} = renderWithProviders(<MockComponent />)
     await waitFor(async () => {
         const trigger = screen.getByText(/open modal/i)
         await act(async () => {
-            fireEvent.click(trigger)
+            user.click(trigger)
         })
     })
 
@@ -151,13 +156,13 @@ test.skip('bundle product view modal disables update button when child is out of
         expect(screen.getByText('Out of stock')).toBeInTheDocument()
     })
 })
-
+//TODO: fix this failing test
 test.skip('bundle product view modal disables update button when quantity exceeds child inventory', async () => {
-    renderWithProviders(<MockComponent />)
+    const {user} = renderWithProviders(<MockComponent />)
     await waitFor(async () => {
         const trigger = screen.getByText(/open modal/i)
         await act(async () => {
-            fireEvent.click(trigger)
+            user.click(trigger)
         })
     })
 

packages/template-chakra-storefront/src/components/product-view-modal/index.jsx

@@ -39,7 +39,6 @@ const ProductViewModal = ({product, isOpen, onClose, ...props}) => {
                 <Dialog.Backdrop />
                 <Dialog.Positioner>
                     <Dialog.Content data-testid="product-view-modal" aria-label={label}>
-                        <Dialog.CloseTrigger />
                         <Dialog.Body pb={8} bg="white" paddingBottom={6} marginTop={6}>
                             <ProductView
                                 showFullLink={true}

packages/template-chakra-storefront/src/hooks/use-product-view-modal.js

@@ -13,6 +13,7 @@ import useToast from './use-toast'
 import {useIntl} from 'react-intl'
 import {API_ERROR_MESSAGE} from '../../config/constants'
 import {useProduct} from '@salesforce/commerce-sdk-react'
+import {keepPreviousData} from '@tanstack/react-query'
 
 /**
  * This hook is responsible for fetching a product detail based on the variation selection
@@ -35,7 +36,7 @@ export const useProductViewModal = (initialProduct) => {
     } = useProduct(
         {parameters: {id: (variant || product)?.productId}},
         {
-            placeholderData: initialProduct,
+            placeholderData: keepPreviousData,
             select: (data) => {
                 // if the product id is the same as the initial product id,
                 // then merge the data with the initial product to be able to show correct quantity in the modal

packages/template-chakra-storefront/src/pages/cart/hooks/use-cart-operations.js

@@ -11,6 +11,7 @@ import {useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
 import useToast from '../../../hooks/use-toast'
 import {TOAST_MESSAGE_REMOVED_ITEM_FROM_CART} from '../../../../config/constants'
 import {getUpdateBundleChildArray} from '../../../utils/product-utils'
+import {useDisclosure} from '@chakra-ui/react'
 
 const DEBOUNCE_WAIT = 750
 
@@ -26,6 +27,9 @@ export const useCartOperations = (basket, productsByItemId, showError) => {
     const [localQuantity, setLocalQuantity] = useState({})
     const [isCartItemLoading, setCartItemLoading] = useState(false)
 
+    // Modal state and actions
+    const {open: isOpen, onOpen, onClose} = useDisclosure()
+
     const {formatMessage} = useIntl()
     const toast = useToast()
 
@@ -39,6 +43,8 @@ export const useCartOperations = (basket, productsByItemId, showError) => {
         // using try-catch is better than using onError callback since we have many mutation calls logic here
         try {
             setCartItemLoading(true)
+            // close the modal before performing any actions on cart item
+            onClose()
             const productIds = basket.productItems.map(({productId}) => productId)
 
             // The user is selecting different variant, and it has not existed in basket
@@ -88,6 +94,8 @@ export const useCartOperations = (basket, productsByItemId, showError) => {
     const handleUpdateBundle = async (bundle, bundleQuantity, childProducts) => {
         try {
             setCartItemLoading(true)
+            // close the modal before performing any actions on cart item
+            onClose()
             const itemsToBeUpdated = getUpdateBundleChildArray(bundle, childProducts)
 
             // We only update the parent bundle when the quantity changes
@@ -221,6 +229,9 @@ export const useCartOperations = (basket, productsByItemId, showError) => {
     }
 
     return {
+        isOpen,
+        onClose,
+        onOpen,
         selectedItem,
         setSelectedItem,
         localQuantity,

packages/template-chakra-storefront/src/pages/cart/index.jsx

@@ -38,6 +38,9 @@ const Cart = () => {
 
     // Cart operations
     const {
+        isOpen: isProductViewModalOpen,
+        onClose: onProductViewModalClose,
+        onOpen: onProductViewModalOpen,
         selectedItem,
         setSelectedItem,
         localQuantity,
@@ -65,18 +68,15 @@ const Cart = () => {
     // Shipping
     useCartDefaultShipping(basket)
 
-    // Modal state
-    const {open: isOpen, onOpen, onClose} = useDisclosure()
-
     // Handle edit click
     const handleEditClick = (product) => {
         setSelectedItem(product)
-        onOpen()
+        onProductViewModalOpen()
     }
 
     // Handle modal close
     const handleModalClose = () => {
-        onClose()
+        onProductViewModalClose()
         setSelectedItem(undefined)
     }
 
@@ -137,8 +137,8 @@ const Cart = () => {
 
             {/* Modals */}
             <CartModals
-                isOpen={isOpen}
-                onOpen={onOpen}
+                isOpen={isProductViewModalOpen}
+                onOpen={onProductViewModalOpen}
                 onClose={handleModalClose}
                 selectedItem={selectedItem}
                 handleUpdateCart={handleUpdateCart}

packages/template-chakra-storefront/src/pages/cart/index.test.js

@@ -259,6 +259,8 @@ describe('Product view tests', function () {
             {
                 path: '*/baskets/*/items/*',
                 method: 'patch',
+                // give a bit of delay to get the loading spinner shows up
+                delay: 500,
                 res: () => {
                     // Return updated basket with incremented quantity
                     return {
@@ -306,6 +308,16 @@ describe('Product view tests', function () {
             `sf-cart-item-${mockCustomerBaskets.baskets[0].productItems[0].productId}`
         )
 
+        // Check for loading spinner appearing
+        await waitFor(() => {
+            expect(screen.getByTestId('loading-spinner')).toBeInTheDocument()
+        })
+
+        // Check for loading spinner disappearing
+        await waitFor(() => {
+            expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument()
+        })
+
         await waitFor(() => {
             expect(within(updatedCartItem).getByDisplayValue('3')).toBeInTheDocument()
         })

packages/template-chakra-storefront/src/pages/cart/partials/cart-modals.jsx

@@ -38,8 +38,7 @@ const CartModals = ({
     basket,
     handleUnavailableProducts
 }) => {
-    const modalProps = useDisclosure()
-
+    const confirmationModalProps = useDisclosure()
     return (
         <Box>
             {/* Product View Modals */}
@@ -71,7 +70,7 @@ const CartModals = ({
                     handleRemoveItem(selectedItem)
                 }}
                 onAlternateAction={() => {}}
-                {...modalProps}
+                {...confirmationModalProps}
             />
 
             {/* Unavailable Product Confirmation Modal */}