@salesforce/retail-react-app 8.1.0-preview.4 → 8.1.0

package/CHANGELOG.md

@@ -1,4 +1,4 @@
-## v8.1.0-preview.4 (Sep 23, 2025)
+## v8.1.0 (Sep 25, 2025)
 - Updated search UX - prices, images, suggestions new layout [#3271](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3271)
 - Updated the UI for StoreDisplay component which displays pickup in-store information on different pages. [#3248](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3248)
 - Added warning modal for guest users when toggling between multi ship and ship to one address. [#3280](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3280) [#3302](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3302)

package/app/components/bonus-product-view-modal/index.jsx

@@ -44,7 +44,6 @@ const BonusProductViewModal = ({
     product,
     isOpen,
     onClose,
-    bonusDiscountLineItemId,
     promotionId,
     onReturnToSelection,
     ...props
@@ -70,6 +69,22 @@ const BonusProductViewModal = ({
     const {data: basket} = useCurrentBasket()
     const navigate = useNavigation()
 
+    // Extract available bonus product IDs from basket for variant filtering
+    const availableBonusProductIds = useMemo(() => {
+        if (!basket?.bonusDiscountLineItems || !promotionId) return []
+
+        return basket.bonusDiscountLineItems
+            .filter((item) => item.promotionId === promotionId)
+            .flatMap((item) => item.bonusProducts || [])
+            .map((bonusProduct) => bonusProduct.productId)
+            .filter(Boolean)
+    }, [basket, promotionId])
+
+    // Check if we have promotion data to work with
+    const hasPromotionData = useMemo(() => {
+        return !!promotionId
+    }, [promotionId])
+
     const intl = useIntl()
     const {formatMessage} = intl
     const showToast = useToast()
@@ -222,31 +237,135 @@ const BonusProductViewModal = ({
         [messages.viewCart, handleViewCart]
     )
 
-    // Clean product data but preserve variation attributes for size/color selectors
+    // Clean product data and pre-filter variants based on available bonus products
     const productToRender = useMemo(() => {
         const baseProduct = productViewModalData.product || safeProduct
-        return {
+
+        // Always provide a fallback product for testing scenarios
+        if (!baseProduct) {
+            return null
+        }
+
+        // If no promotion data, just return the basic product without filtering
+        if (!hasPromotionData) {
+            return {
+                ...baseProduct,
+                variationAttributes: baseProduct.variationAttributes,
+                variants: baseProduct.variants,
+                variationParams: baseProduct.variationParams,
+                selectedVariationAttributes: baseProduct.selectedVariationAttributes,
+                type: baseProduct.type,
+                inventory: {
+                    ...baseProduct.inventory,
+                    orderable: true,
+                    stockLevel: 999
+                },
+                minOrderQuantity: 1,
+                stepQuantity: 1,
+                orderable: true,
+                rating: baseProduct.rating,
+                reviewCount: baseProduct.reviewCount
+            }
+        }
+
+        // If no bonus products are available, still render but with original product
+        if (availableBonusProductIds.length === 0) {
+            return {
+                ...baseProduct,
+                variationAttributes: baseProduct.variationAttributes,
+                variants: baseProduct.variants,
+                variationParams: baseProduct.variationParams,
+                selectedVariationAttributes: baseProduct.selectedVariationAttributes,
+                type: baseProduct.type,
+                inventory: {
+                    ...baseProduct.inventory,
+                    orderable: true,
+                    stockLevel: 999
+                },
+                minOrderQuantity: 1,
+                stepQuantity: 1,
+                orderable: true,
+                rating: baseProduct.rating,
+                reviewCount: baseProduct.reviewCount
+            }
+        }
+
+        // Check if we should filter variants
+        // Only treat it as base product ID if it's NOT found in the variants array
+        const isBaseProductId = !baseProduct.variants?.some((v) => v.productId === baseProduct.id)
+        const hasBaseProductId =
+            isBaseProductId && availableBonusProductIds.includes(baseProduct.id)
+        const hasVariantIds = availableBonusProductIds.some((id) =>
+            baseProduct.variants?.some((v) => v.productId === id)
+        )
+
+        let filteredVariants = baseProduct.variants || []
+        let filteredVariationAttributes = baseProduct.variationAttributes || []
+
+        // If we have specific variant IDs (not base product), filter variants and variation attributes
+        if (hasVariantIds && !hasBaseProductId) {
+            // Filter variants to only include available ones
+            filteredVariants =
+                baseProduct.variants?.filter((variant) =>
+                    availableBonusProductIds.includes(variant.productId)
+                ) || []
+
+            // Filter variation attribute values to only show available combinations
+            filteredVariationAttributes =
+                baseProduct.variationAttributes
+                    ?.map((attr) => {
+                        const availableValues =
+                            attr.values?.filter((value) => {
+                                // Check if this value leads to an available variant
+                                return filteredVariants.some(
+                                    (variant) => variant.variationValues?.[attr.id] === value.value
+                                )
+                            }) || []
+
+                        return {
+                            ...attr,
+                            values: availableValues
+                        }
+                    })
+                    .filter((attr) => attr.values.length > 0) || []
+        }
+
+        // KEY FIX: Ensure the correct variant is pre-selected to prevent flash
+        // When we have only one available variant, make sure it's the selected one
+        let finalProduct = {
             ...baseProduct,
-            variationAttributes: baseProduct.variationAttributes,
-            variants: baseProduct.variants,
+            variationAttributes: filteredVariationAttributes,
+            variants: filteredVariants,
             variationParams: baseProduct.variationParams,
             selectedVariationAttributes: baseProduct.selectedVariationAttributes,
             type: baseProduct.type,
-            // Ensure proper inventory and quantity defaults for bonus products
             inventory: {
                 ...baseProduct.inventory,
                 orderable: true,
-                stockLevel: 999 // High stock level for bonus products
+                stockLevel: 999
             },
             minOrderQuantity: 1,
             stepQuantity: 1,
-            // Ensure the product is orderable
             orderable: true,
-            // Add review data for display
             rating: baseProduct.rating,
             reviewCount: baseProduct.reviewCount
         }
-    }, [productViewModalData.product, safeProduct])
+
+        // If we filtered to only one variant, ensure it's pre-selected
+        if (filteredVariants.length === 1 && filteredVariants[0].variationValues) {
+            const selectedVariant = filteredVariants[0]
+            finalProduct = {
+                ...finalProduct,
+                // Override the product ID to be the selected variant
+                id: selectedVariant.productId,
+                // Pre-set the variation values to match the selected variant
+                selectedVariant,
+                variationValues: selectedVariant.variationValues
+            }
+        }
+
+        return finalProduct
+    }, [productViewModalData.product, safeProduct, hasPromotionData, availableBonusProductIds])
 
     // Calculate max order quantity for UI
     const maxOrderQuantity = getRemainingBonusQuantity()
@@ -308,7 +427,8 @@ const BonusProductViewModal = ({
                     }
                     pb={productViewModalTheme.layout.body.paddingBottom}
                 >
-                    {productViewModalData.isFetching && !productViewModalData.product ? (
+                    {(productViewModalData.isFetching && !productViewModalData.product) ||
+                    !productToRender ? (
                         <Box p={8} textAlign="center">
                             <Text>Loading product details...</Text>
                         </Box>
@@ -348,7 +468,6 @@ BonusProductViewModal.propTypes = {
     onClose: PropTypes.func.isRequired,
     product: PropTypes.object,
     isLoading: PropTypes.bool,
-    bonusDiscountLineItemId: PropTypes.string, // The 'id' from bonusDiscountLineItems
     promotionId: PropTypes.string, // The promotion ID to filter promotions in PromoCallout
     onReturnToSelection: PropTypes.func // Callback to return to SelectBonusProductModal
 }

package/app/components/bonus-product-view-modal/index.test.js

@@ -1019,3 +1019,170 @@ describe('BonusProductViewModal - Quantity Distribution Across Multiple BonusDis
         })
     })
 })
+
+describe('BonusProductViewModal - Variant Filtering Integration Tests', () => {
+    const mockOnClose = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+
+        // Setup default working mocks that don't conflict with our tests
+        useShopperBasketsMutationHelper.mockReturnValue({
+            addItemToNewOrExistingBasket: jest.fn()
+        })
+
+        useBonusProductCounts.mockReturnValue({
+            finalSelectedBonusItems: 1,
+            finalMaxBonusItems: 3
+        })
+
+        getRemainingAvailableBonusProductsForProduct.mockReturnValue(2)
+    })
+
+    test('renders modal successfully with variant filtering enabled', () => {
+        // Basic integration test: Modal renders without errors with filtering logic
+        const mockBasket = {
+            bonusDiscountLineItems: [
+                {
+                    promotionId: 'test-promo',
+                    bonusProducts: [
+                        {productId: '793775370033M'} // Specific variant
+                    ]
+                }
+            ],
+            productItems: []
+        }
+
+        const mockProduct = {
+            id: '793775370033',
+            name: 'Test Product',
+            variants: [
+                {productId: '793775370033M', variationValues: {color: 'turquoise'}},
+                {productId: '793775370033R', variationValues: {color: 'red'}}
+            ],
+            variationAttributes: [
+                {
+                    id: 'color',
+                    values: [
+                        {value: 'turquoise', name: 'Turquoise'},
+                        {value: 'red', name: 'Red'}
+                    ]
+                }
+            ]
+        }
+
+        useCurrentBasket.mockReturnValue({data: mockBasket, derivedData: {totalItems: 0}})
+        useProductViewModal.mockReturnValue({product: mockProduct, isFetching: false})
+
+        expect(() => {
+            renderWithProviders(
+                <BonusProductViewModal
+                    product={mockProduct}
+                    isOpen={true}
+                    onClose={mockOnClose}
+                    promotionId="test-promo"
+                />
+            )
+        }).not.toThrow()
+
+        // Verify modal renders
+        expect(screen.getByTestId('bonus-product-view-modal')).toBeInTheDocument()
+    })
+
+    test('handles edge cases without errors', () => {
+        // Edge case test: No bonus products available
+        const mockBasket = {
+            bonusDiscountLineItems: [
+                {
+                    promotionId: 'different-promo',
+                    bonusProducts: []
+                }
+            ],
+            productItems: []
+        }
+
+        const mockProduct = {
+            id: '793775370033',
+            name: 'Test Product',
+            variants: [],
+            variationAttributes: []
+        }
+
+        useCurrentBasket.mockReturnValue({data: mockBasket, derivedData: {totalItems: 0}})
+        useProductViewModal.mockReturnValue({product: mockProduct, isFetching: false})
+
+        expect(() => {
+            renderWithProviders(
+                <BonusProductViewModal
+                    product={mockProduct}
+                    isOpen={true}
+                    onClose={mockOnClose}
+                    promotionId="test-promo"
+                />
+            )
+        }).not.toThrow()
+
+        expect(screen.getByTestId('bonus-product-view-modal')).toBeInTheDocument()
+    })
+
+    test('handles missing bonus data gracefully', () => {
+        // Edge case test: No bonusDiscountLineItems
+        const mockBasket = {productItems: []}
+        const mockProduct = {id: '123', name: 'Test'}
+
+        useCurrentBasket.mockReturnValue({data: mockBasket, derivedData: {totalItems: 0}})
+        useProductViewModal.mockReturnValue({product: mockProduct, isFetching: false})
+
+        expect(() => {
+            renderWithProviders(
+                <BonusProductViewModal
+                    product={mockProduct}
+                    isOpen={true}
+                    onClose={mockOnClose}
+                    promotionId="test-promo"
+                />
+            )
+        }).not.toThrow()
+    })
+
+    test('filtering logic processes complex variant scenarios', () => {
+        // Complex scenario test: Mixed base and variant IDs
+        const mockBasket = {
+            bonusDiscountLineItems: [
+                {
+                    promotionId: 'test-promo',
+                    bonusProducts: [
+                        {productId: '793775370033'}, // Base product
+                        {productId: '793775370033M'}, // Variant
+                        {productId: '793775370033R'} // Another variant
+                    ]
+                }
+            ]
+        }
+
+        const mockProduct = {
+            id: '793775370033',
+            variants: [
+                {productId: '793775370033M', variationValues: {color: 'turquoise'}},
+                {productId: '793775370033R', variationValues: {color: 'red'}},
+                {productId: '793775370033B', variationValues: {color: 'blue'}}
+            ],
+            variationAttributes: [{id: 'color', values: []}]
+        }
+
+        useCurrentBasket.mockReturnValue({data: mockBasket, derivedData: {totalItems: 0}})
+        useProductViewModal.mockReturnValue({product: mockProduct, isFetching: false})
+
+        // Should handle complex filtering without errors
+        expect(() => {
+            renderWithProviders(
+                <BonusProductViewModal
+                    product={mockProduct}
+                    isOpen={true}
+                    onClose={mockOnClose}
+                    promotionId="test-promo"
+                />
+            )
+        }).not.toThrow()
+    })
+})

package/app/components/product-item/index.jsx

@@ -74,10 +74,14 @@ const ProductItem = ({
                                         </Box>
                                     </HideOnDesktop>
                                 </Stack>
-                                {deliveryActions && <HideOnMobile>{deliveryActions}</HideOnMobile>}
+                                {deliveryActions && !product.bonusProductLineItem && (
+                                    <HideOnMobile>{deliveryActions}</HideOnMobile>
+                                )}
                             </Flex>
 
-                            {deliveryActions && <HideOnDesktop>{deliveryActions}</HideOnDesktop>}
+                            {deliveryActions && !product.bonusProductLineItem && (
+                                <HideOnDesktop>{deliveryActions}</HideOnDesktop>
+                            )}
 
                             <Flex align="flex-end" justify="space-between">
                                 <Stack spacing={1}>

package/app/components/product-item/index.test.js

@@ -103,4 +103,41 @@ describe('ProductItem Component', () => {
         expect(screen.getByText(/Quantity:/i)).toBeInTheDocument()
         expect(screen.queryByRole('spinbutton')).not.toBeInTheDocument()
     })
+
+    test('does not render delivery actions for bonus products', () => {
+        renderWithProviders(
+            <MockedComponent
+                product={mockBonusProduct}
+                deliveryActions={<button>Delivery Action</button>}
+            />
+        )
+
+        expect(screen.queryByText(/Delivery Action/i)).not.toBeInTheDocument()
+    })
+
+    test('renders delivery actions for regular products but not bonus products', () => {
+        // Test regular product first
+        const {unmount} = renderWithProviders(
+            <MockedComponent
+                product={mockProduct}
+                deliveryActions={<button>Delivery Action</button>}
+            />
+        )
+
+        // Regular product should show delivery actions (appears twice - mobile and desktop)
+        expect(screen.getAllByText(/Delivery Action/i)).toHaveLength(2)
+
+        // Cleanup completely
+        unmount()
+
+        // Test bonus product with fresh render
+        renderWithProviders(
+            <MockedComponent
+                product={mockBonusProduct}
+                deliveryActions={<button>Delivery Action</button>}
+            />
+        )
+
+        expect(screen.queryAllByText(/Delivery Action/i)).toHaveLength(0)
+    })
 })

package/app/components/search/index.jsx

@@ -42,6 +42,12 @@ import {
 } from '@salesforce/retail-react-app/app/utils/url'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import {getCommerceAgentConfig} from '@salesforce/retail-react-app/app/utils/config-utils'
+import {useUsid} from '@salesforce/commerce-sdk-react'
+import {useLocation} from 'react-router-dom'
+import useRefreshToken from '@salesforce/retail-react-app/app/hooks/use-refresh-token'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import {useAppOrigin} from '@salesforce/retail-react-app/app/hooks/use-app-origin'
+import {normalizeLocaleToSalesforce} from '@salesforce/retail-react-app/app/hooks/use-miaw'
 
 const onClient = typeof window !== 'undefined'
 
@@ -106,6 +112,15 @@ const formatSuggestions = (searchSuggestions) => {
  */
 const Search = (props) => {
     const config = getConfig()
+
+    // Add new hooks for chat functionality
+    const {locale, siteId, commerceOrgId, buildUrl} = useMultiSite()
+    const {usid} = useUsid()
+    const refreshToken = useRefreshToken()
+    const location = useLocation()
+    const appOrigin = useAppOrigin()
+    const sfLanguage = normalizeLocaleToSalesforce(locale.id)
+
     const askAgentOnSearchEnabled = useMemo(() => {
         const {enabled, askAgentOnSearch} = getCommerceAgentConfig()
         return isAskAgentOnSearchEnabled(enabled, askAgentOnSearch)
@@ -183,6 +198,26 @@ const Search = (props) => {
         setIsOpen(false)
     }
 
+    // Function to set pre-chat fields only when launching a new chat session
+    const setPrechatFieldsForNewSession = () => {
+        // Only set pre-chat fields if this is a new chat launch (not already launched)
+        if (!miawChatRef.current.newChatLaunched) {
+            if (window.embeddedservice_bootstrap?.prechatAPI) {
+                window.embeddedservice_bootstrap.prechatAPI.setHiddenPrechatFields({
+                    SiteId: siteId,
+                    Locale: locale.id,
+                    OrganizationId: commerceOrgId,
+                    UsId: usid,
+                    IsCartMgmtSupported: 'true',
+                    RefreshToken: refreshToken,
+                    Currency: locale.preferredCurrency,
+                    Language: sfLanguage,
+                    DomainUrl: `${appOrigin}${buildUrl(location.pathname)}`
+                })
+            }
+        }
+    }
+
     useEffect(() => {
         const handleEmbeddedMessageSent = (e) => {
             if (!miawChatRef.current.hasFired && miawChatRef.current.newChatLaunched) {
@@ -209,6 +244,9 @@ const Search = (props) => {
         }
     }, [])
     const launchChat = () => {
+        // Set pre-chat fields only for new sessions
+        setPrechatFieldsForNewSession()
+
         if (window.embeddedservice_bootstrap?.settings) {
             window.embeddedservice_bootstrap.settings.disableStreamingResponses = true
             window.embeddedservice_bootstrap.settings.enableUserInputForConversationWithBot = false