Prevent modal to open when it fails to add an item to cart (#1053)

* prevent modal to open when it fails to add an item to cart * Update comment --------- Co-authored-by: Alex Vuong <[email protected]>
SalesforceCommerceCloud · Mar 13, 2023 · 9f3bc9e · 9f3bc9e
1 parent 92c156e
commit 9f3bc9e
Showing 1 changed file with 24 additions and 6 deletions.
diff --git a/packages/template-retail-react-app/app/partials/product-view/index.jsx b/packages/template-retail-react-app/app/partials/product-view/index.jsx
@@ -25,6 +25,8 @@ import {useCurrency} from '../../hooks'
 import {Skeleton as ImageGallerySkeleton} from '../../components/image-gallery'
 import {HideOnDesktop, HideOnMobile} from '../../components/responsive'
 import QuantityPicker from '../../components/quantity-picker'
+import {useToast} from '../../hooks/use-toast'
+import {API_ERROR_MESSAGE} from '../../constants'
 
 const ProductViewHeader = ({name, price, currency, category, productType}) => {
     const intl = useIntl()
@@ -167,6 +169,14 @@ const ProductView = forwardRef(
                 })
             }
 
+            const showToast = useToast()
+            const showError = () => {
+                showToast({
+                    title: intl.formatMessage(API_ERROR_MESSAGE),
+                    status: 'error'
+                })
+            }
+
             const handleCartItem = async () => {
                 const hasValidSelection = validateAndShowError()
 
@@ -179,12 +189,20 @@ const ProductView = forwardRef(
                     await updateCart(variant, quantity)
                     return
                 }
-                const itemsAdded = await addToCart(variant, quantity)
-
-                onAddToCartModalOpen({
-                    product,
-                    itemsAdded
-                })
+                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 () => {