@W-20073841: Fixed intermittent issues with bonus product modal selection and add to cart (#3445)

* fixed issues on add to cart and showing bonus product modal

* Lint error

Author: ddiazccrz

packages/template-retail-react-app/app/components/bonus-product-view-modal/index.jsx

@@ -170,8 +170,11 @@ const BonusProductViewModal = ({
                     // addItemToNewOrExistingBasket returns the basket directly
                     const updatedBasket = result
 
-                    // Check if there are still remaining bonus products available
-                    const hasRemainingBonusProducts = checkForRemainingBonusProducts(updatedBasket)
+                    // Check if there are still remaining bonus products available for THIS promotion
+                    const hasRemainingBonusProducts = checkForRemainingBonusProducts(
+                        updatedBasket,
+                        promotionId
+                    )
 
                     if (hasRemainingBonusProducts && onReturnToSelection) {
                         // Return to SelectBonusProductModal if there are remaining bonus products

packages/template-retail-react-app/app/components/bonus-product-view-modal/index.test.js

@@ -320,10 +320,11 @@ describe('BonusProductViewModal - Return to Selection Flow', () => {
         const user = userEvent.setup()
 
         // Mock successful add to cart with remaining bonus products
+        // The promotionId must match what's passed to BonusProductViewModal
         const updatedBasket = {
             bonusDiscountLineItems: [
-                {id: 'bonus-1', maxBonusItems: 2},
-                {id: 'bonus-2', maxBonusItems: 1}
+                {id: 'bonus-1', promotionId: 'test-promo', maxBonusItems: 2},
+                {id: 'bonus-2', promotionId: 'test-promo', maxBonusItems: 1}
             ],
             productItems: [
                 {
@@ -362,10 +363,11 @@ describe('BonusProductViewModal - Return to Selection Flow', () => {
         const user = userEvent.setup()
 
         // Mock successful add to cart with no remaining bonus products
+        // All bonusDiscountLineItems for this promotion are fully allocated
         const updatedBasket = {
             bonusDiscountLineItems: [
-                {id: 'bonus-1', maxBonusItems: 2},
-                {id: 'bonus-2', maxBonusItems: 1}
+                {id: 'bonus-1', promotionId: 'test-promo', maxBonusItems: 2},
+                {id: 'bonus-2', promotionId: 'test-promo', maxBonusItems: 1}
             ],
             productItems: [
                 {

packages/template-retail-react-app/app/components/bonus-product-view-modal/utils.js

@@ -83,15 +83,21 @@ export const createGetRemainingBonusQuantity = (
  * This function examines the bonus discount line items to see if any still have capacity.
  *
  * @param {Object} updatedBasket - The updated basket object after adding items
+ * @param {string} promotionId - Optional promotion ID to check only bonusDiscountLineItems for a specific promotion
  * @returns {boolean} - True if there are remaining bonus products available, false otherwise
  */
-export const checkForRemainingBonusProducts = (updatedBasket) => {
+export const checkForRemainingBonusProducts = (updatedBasket, promotionId) => {
     if (!updatedBasket?.bonusDiscountLineItems) {
         return false
     }
 
+    // Filter bonus discount line items by promotionId if provided
+    const bonusItemsToCheck = promotionId
+        ? updatedBasket.bonusDiscountLineItems.filter((item) => item.promotionId === promotionId)
+        : updatedBasket.bonusDiscountLineItems
+
     // Check if any bonus discount line items still have available capacity
-    return updatedBasket.bonusDiscountLineItems.some((discountItem) => {
+    return bonusItemsToCheck.some((discountItem) => {
         const maxBonusItems = discountItem.maxBonusItems || 0
 
         // Calculate how many bonus products are already in cart for this specific discount item

packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js

@@ -4,7 +4,7 @@
  * 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, {useContext, useState, useEffect} from 'react'
+import React, {useContext, useState, useEffect, useMemo} from 'react'
 import {useLocation} from 'react-router-dom'
 import PropTypes from 'prop-types'
 import {useIntl, FormattedMessage} from 'react-intl'
@@ -91,6 +91,19 @@ export const AddToCartModal = () => {
     // Port v4 logic: Check for bonus discount line items and calculate remaining capacity
     const {bonusDiscountLineItems = []} = basket || {}
 
+    // Build a map of selected bonus products per bonusDiscountLineItem for efficient lookup
+    // This avoids repeated filtering through productItems for each bonusDiscountLineItem
+    const bonusSelectionMap = useMemo(() => {
+        const map = {}
+        basket?.productItems?.forEach((cartItem) => {
+            if (cartItem.bonusProductLineItem && cartItem.bonusDiscountLineItemId) {
+                const id = cartItem.bonusDiscountLineItemId
+                map[id] = (map[id] || 0) + (cartItem.quantity || 0)
+            }
+        })
+        return map
+    }, [basket?.productItems])
+
     if (!isOpen) {
         return null
     }
@@ -361,11 +374,16 @@ export const AddToCartModal = () => {
                                         ruleBasedQualifyingProductsMap
                                     )
 
-                                    // Find the first bonusDiscountLineItem that matches any of the promotionIds
+                                    // Find a bonusDiscountLineItem that has remaining capacity
+                                    // This ensures we don't pass a fully-allocated bonusDiscountLineItem to SelectBonusProductsCard
                                     const matchingBonusDiscountLineItem =
-                                        basket?.bonusDiscountLineItems?.find((bli) =>
-                                            promotionIds.includes(bli.promotionId)
-                                        )
+                                        basket?.bonusDiscountLineItems?.find((bli) => {
+                                            return (
+                                                promotionIds.includes(bli.promotionId) &&
+                                                (bonusSelectionMap[bli.id] || 0) <
+                                                    (bli.maxBonusItems || 0)
+                                            )
+                                        })
 
                                     // If no matching bonusDiscountLineItem found, don't render
                                     if (!matchingBonusDiscountLineItem) {

packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.test.js

@@ -1013,3 +1013,91 @@ test('renders SelectBonusProductsCard with hideSelectionCounter=true in add-to-c
     expect(bonusProductsCard).toBeInTheDocument()
     expect(bonusProductsCard).toHaveAttribute('data-hide-selection-counter', 'true')
 })
+
+test('selects bonusDiscountLineItem with remaining capacity when first one is fully allocated', () => {
+    // This test covers the specific bug fix where adding the same qualifying product
+    // multiple times should find a bonusDiscountLineItem with remaining capacity
+    const MOCK_PRODUCT_WITH_BONUS = {
+        ...MOCK_PRODUCT,
+        id: 'test-product-123',
+        productPromotions: [
+            {
+                promotionId: 'promo-123',
+                calloutMsg: "Buy one men's suit, get 2 free ties"
+            }
+        ]
+    }
+
+    const MOCK_DATA_WITH_BONUS = {
+        product: MOCK_PRODUCT_WITH_BONUS,
+        itemsAdded: [
+            {
+                product: MOCK_PRODUCT_WITH_BONUS,
+                variant: MOCK_PRODUCT.variants[0],
+                quantity: 1
+            }
+        ]
+    }
+
+    // Mock basket with multiple bonusDiscountLineItems for same promotion
+    // The first one is fully allocated (2/2), the second has capacity (0/2)
+    const mockBasketWithMultipleBonusItems = {
+        data: {
+            bonusDiscountLineItems: [
+                {
+                    id: 'bonus-line-item-1',
+                    promotionId: 'promo-123',
+                    maxBonusItems: 2
+                },
+                {
+                    id: 'bonus-line-item-2',
+                    promotionId: 'promo-123',
+                    maxBonusItems: 2
+                }
+            ],
+            productItems: [
+                // Two bonus products selected for the first bonusDiscountLineItem
+                {
+                    productId: 'bonus-product-1',
+                    bonusProductLineItem: true,
+                    bonusDiscountLineItemId: 'bonus-line-item-1',
+                    quantity: 1
+                },
+                {
+                    productId: 'bonus-product-2',
+                    bonusProductLineItem: true,
+                    bonusDiscountLineItemId: 'bonus-line-item-1',
+                    quantity: 1
+                }
+                // No bonus products selected for bonus-line-item-2 yet
+            ],
+            productSubTotal: 191.99,
+            currency: 'USD'
+        },
+        derivedData: {
+            totalItems: 3
+        },
+        currency: 'USD'
+    }
+
+    mockUseCurrentBasket.mockReturnValue(mockBasketWithMultipleBonusItems)
+
+    renderWithProviders(
+        <AddToCartModalContext.Provider
+            value={{
+                isOpen: true,
+                data: MOCK_DATA_WITH_BONUS,
+                onClose: jest.fn()
+            }}
+        >
+            <AddToCartModal />
+        </AddToCartModalContext.Provider>
+    )
+
+    // Verify that the SelectBonusProductsCard is still rendered
+    // This proves that the component found bonus-line-item-2 (which has capacity)
+    // instead of stopping at bonus-line-item-1 (which is fully allocated)
+    const bonusProductsCard = screen.getByTestId('select-bonus-products-card')
+    expect(bonusProductsCard).toBeInTheDocument()
+    expect(bonusProductsCard).toHaveAttribute('data-hide-selection-counter', 'true')
+})