@salesforce/retail-react-app 8.1.0-preview.1 → 8.1.0-preview.3

package/CHANGELOG.md

@@ -1,4 +1,4 @@
-## v8.1.0-dev (Sep 04, 2025)
+## v8.1.0-preview.3 (Sep 23, 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)
@@ -6,6 +6,7 @@
 - Enhanced the shopping assistant that integrates Salesforce Embedded Messaging Service with PWA Kit applications, adding comprehensive context support, localization capabilities, and improved user experience features. [#3259](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3259)
 - Removed domainUrl, locale, basetId properties as part off the ShopperAgent during initialization. [#3259](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3259)
 - Only show option to deliver to multiple addresses if there are multiple items in the basket. [#3336](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3336)
+- Added support for Choice of Bonus Products feature. Users can now select from available bonus products when they qualify for the associated promotion. The bonus product selection flow can be entered from either the "Item Added to Cart" modal (when adding the qualifying product to the cart) or from the cart page. [#3292] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3292)
 
 ## v8.0.0 (Sep 04, 2025)
 - Add support for environment level base paths on /mobify routes [#2892](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2892)
@@ -36,7 +37,7 @@
 - Support saving default shipping address on user registration from order confirmation [#2706](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2706)
 - Minor updates to support BOPIS E2E tests [#2716](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2716)
 - Provide conditional support for partial hydration (feature flag `PARTIAL_HYDRATION_ENABLED`) [#2696](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2696) [#2846](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2846)
-- Show Automatic Bonus Products on Cart Page [#2704](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2704) [#2760](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2760) [#2815](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2815) 
+- Show Automatic Bonus Products on Cart Page [#2704](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2704) [#2760](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2760) [#2815](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2815)
 - [Breaking] Support Standard Products [2697](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2697)
 - Introduce store locator [#2542](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2542)
 - Fix passwordless race conditions in form submission [#2758](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2758)

package/app/components/_app/index.jsx

@@ -58,6 +58,7 @@ import {
     useDntNotification
 } from '@salesforce/retail-react-app/app/hooks/use-dnt-notification'
 import {AddToCartModalProvider} from '@salesforce/retail-react-app/app/hooks/use-add-to-cart-modal'
+import {BonusProductSelectionModalProvider} from '@salesforce/retail-react-app/app/hooks/use-bonus-product-selection-modal'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
@@ -430,34 +431,36 @@ const App = (props) => {
                             </Island>
                             {!isOnline && <OfflineBanner />}
                             <AddToCartModalProvider>
-                                <SkipNavContent
-                                    style={{
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        flex: 1,
-                                        outline: 0
-                                    }}
-                                >
-                                    <Box
-                                        as="main"
-                                        id="app-main"
-                                        role="main"
-                                        display="flex"
-                                        flexDirection="column"
-                                        flex="1"
+                                <BonusProductSelectionModalProvider>
+                                    <SkipNavContent
+                                        style={{
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            flex: 1,
+                                            outline: 0
+                                        }}
                                     >
-                                        <OfflineBoundary isOnline={false}>
-                                            {children}
-                                        </OfflineBoundary>
-                                    </Box>
-                                </SkipNavContent>
-
-                                <Island hydrateOn={'visible'}>
-                                    {!isCheckout ? <Footer /> : <CheckoutFooter />}
-                                </Island>
-
-                                <AuthModal {...authModal} />
-                                <DntNotification {...dntNotification} />
+                                        <Box
+                                            as="main"
+                                            id="app-main"
+                                            role="main"
+                                            display="flex"
+                                            flexDirection="column"
+                                            flex="1"
+                                        >
+                                            <OfflineBoundary isOnline={false}>
+                                                {children}
+                                            </OfflineBoundary>
+                                        </Box>
+                                    </SkipNavContent>
+
+                                    <Island hydrateOn={'visible'}>
+                                        {!isCheckout ? <Footer /> : <CheckoutFooter />}
+                                    </Island>
+
+                                    <AuthModal {...authModal} />
+                                    <DntNotification {...dntNotification} />
+                                </BonusProductSelectionModalProvider>
                             </AddToCartModalProvider>
                         </Box>
                     </CurrencyProvider>

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

@@ -0,0 +1,356 @@
+/*
+ * 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, {useMemo, useCallback} from 'react'
+import PropTypes from 'prop-types'
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalBody,
+    ModalCloseButton,
+    Button,
+    Box,
+    Text,
+    Heading
+} from '@salesforce/retail-react-app/app/components/shared/ui'
+import ProductView from '@salesforce/retail-react-app/app/components/product-view'
+import {useProductViewModal} from '@salesforce/retail-react-app/app/hooks/use-product-view-modal'
+import {useIntl} from 'react-intl'
+import {useShopperBasketsMutationHelper} from '@salesforce/commerce-sdk-react'
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+import {getRemainingAvailableBonusProductsForProduct} from '@salesforce/retail-react-app/app/utils/bonus-product'
+import {processProductsForBonusCart} from '@salesforce/retail-react-app/app/utils/bonus-product/cart'
+import {useBonusProductCounts} from '@salesforce/retail-react-app/app/utils/bonus-product/hooks'
+import {
+    createGetRemainingBonusQuantity,
+    checkForRemainingBonusProducts
+} from '@salesforce/retail-react-app/app/components/bonus-product-view-modal/utils'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import {productViewModalTheme} from '@salesforce/retail-react-app/app/theme/components/project/product-view-modal'
+import {bonusProductViewModalTheme} from '@salesforce/retail-react-app/app/theme/components/project/bonus-product-view-modal'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
+
+/**
+ * A Modal that contains Bonus Product View
+ */
+const BonusProductViewModal = ({
+    product,
+    isOpen,
+    onClose,
+    bonusDiscountLineItemId,
+    promotionId,
+    onReturnToSelection,
+    ...props
+}) => {
+    // Ensure a safe product shape for the modal hook
+    const safeProduct = useMemo(() => {
+        if (!product) return {productId: undefined, variants: [], variationAttributes: []}
+        const id = product.productId || product.id
+        return {
+            productId: id,
+            id,
+            variants: product.variants || [],
+            variationAttributes: product.variationAttributes || [],
+            imageGroups: product.imageGroups || [],
+            type: product.type || {set: false, bundle: false},
+            price: product.price,
+            name: product.name || product.productName
+        }
+    }, [product])
+
+    const productViewModalData = useProductViewModal(safeProduct)
+    const {addItemToNewOrExistingBasket} = useShopperBasketsMutationHelper()
+    const {data: basket} = useCurrentBasket()
+    const navigate = useNavigation()
+
+    const intl = useIntl()
+    const {formatMessage} = intl
+    const showToast = useToast()
+
+    // Calculate bonus counts using promotionId and custom hook
+    const {finalSelectedBonusItems, finalMaxBonusItems} = useBonusProductCounts(basket, promotionId)
+
+    const messages = useMemo(
+        () => ({
+            modalLabel: formatMessage(
+                {
+                    id: 'bonus_product_view_modal.modal_label',
+                    defaultMessage: 'Bonus product selection modal for {productName}'
+                },
+                {productName: productViewModalData?.product?.name}
+            ),
+            viewCart: formatMessage({
+                id: 'bonus_product_view_modal.button.view_cart',
+                defaultMessage: 'View Cart'
+            }),
+            backToSelection: formatMessage({
+                id: 'bonus_product_view_modal.button.back_to_selection',
+                defaultMessage: '← Back to Selection'
+            })
+        }),
+        [intl]
+    )
+
+    // Create getRemainingBonusQuantity function using the factory
+    const getRemainingBonusQuantity = useMemo(
+        () =>
+            createGetRemainingBonusQuantity(
+                basket,
+                product,
+                getRemainingAvailableBonusProductsForProduct
+            ),
+        [basket, product]
+    )
+
+    // Custom addToCart handler for bonus products that includes bonusDiscountLineItemId
+    const handleAddToCart = useCallback(
+        async (products) => {
+            try {
+                // Process products using the extracted helper function
+                const productItems = processProductsForBonusCart(
+                    products,
+                    basket,
+                    promotionId,
+                    product,
+                    getRemainingBonusQuantity
+                )
+
+                if (productItems.length === 0) {
+                    return null
+                }
+
+                const result = await addItemToNewOrExistingBasket(productItems)
+
+                // Check for remaining bonus products after successful add to cart
+                if (result) {
+                    // Show success toast notification
+                    showToast({
+                        title: formatMessage({
+                            id: 'bonus_product_view_modal.toast.item_added',
+                            defaultMessage: 'Bonus item added to cart'
+                        }),
+                        status: 'success'
+                    })
+
+                    // Get updated basket data to check for remaining bonus products
+                    // addItemToNewOrExistingBasket returns the basket directly
+                    const updatedBasket = result
+
+                    // Check if there are still remaining bonus products available
+                    const hasRemainingBonusProducts = checkForRemainingBonusProducts(updatedBasket)
+
+                    if (hasRemainingBonusProducts && onReturnToSelection) {
+                        // Return to SelectBonusProductModal if there are remaining bonus products
+                        onReturnToSelection()
+                        // Return null to prevent AddToCartModal from opening
+                        return null
+                    } else {
+                        // Navigate to cart page if no remaining bonus products or no callback provided
+                        onClose()
+                        // Always use a delay to ensure modal closes cleanly
+                        setTimeout(() => {
+                            navigate('/cart', 'push')
+                        }, 200)
+                        // Return null to prevent AddToCartModal from opening
+                        return null
+                    }
+                }
+
+                // For bonus products, don't open add-to-cart modal - just return null
+                return null
+            } catch (error) {
+                console.error('Error adding bonus product to cart:', error)
+                return null
+            }
+        },
+        [
+            addItemToNewOrExistingBasket,
+            basket,
+            promotionId,
+            product,
+            getRemainingBonusQuantity,
+            onClose,
+            navigate,
+            onReturnToSelection,
+            showToast,
+            formatMessage
+        ]
+    )
+
+    // Custom buttons for the ProductView
+    const handleViewCart = useCallback(() => {
+        // Close modal immediately and navigate with proper delay
+        onClose()
+        // Always use a delay to ensure modal closes cleanly
+        setTimeout(() => {
+            navigate('/cart', 'push')
+        }, 200)
+    }, [onClose, navigate])
+
+    // Reusable Back to Selection button component
+    const BackToSelectionButton = useMemo(
+        () => (
+            <Text
+                as="button"
+                color="blue.600"
+                cursor="pointer"
+                onClick={onReturnToSelection}
+                fontSize={{base: 'lg', lg: 'md'}}
+                _hover={{
+                    color: 'blue.700'
+                }}
+            >
+                {messages.backToSelection}
+            </Text>
+        ),
+        [messages.backToSelection, onReturnToSelection]
+    )
+
+    const customButtons = useMemo(
+        () => [
+            <Button key="view-cart" variant="outline" onClick={handleViewCart}>
+                {messages.viewCart}
+            </Button>
+        ],
+        [messages.viewCart, handleViewCart]
+    )
+
+    // Clean product data but preserve variation attributes for size/color selectors
+    const productToRender = useMemo(() => {
+        const baseProduct = productViewModalData.product || safeProduct
+        return {
+            ...baseProduct,
+            variationAttributes: baseProduct.variationAttributes,
+            variants: baseProduct.variants,
+            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
+            },
+            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])
+
+    // Calculate max order quantity for UI
+    const maxOrderQuantity = getRemainingBonusQuantity()
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            size={productViewModalTheme.modal.size}
+            closeOnOverlayClick={true}
+            closeOnEsc={true}
+            isCentered
+            motionPreset="slideInBottom"
+            preserveScrollBarGap={true}
+        >
+            <ModalOverlay />
+            <ModalContent
+                data-testid="bonus-product-view-modal"
+                aria-label={messages.modalLabel}
+                margin={productViewModalTheme.layout.content.margin}
+                borderRadius={productViewModalTheme.layout.content.borderRadius}
+                bg={productViewModalTheme.layout.content.background}
+                maxHeight={bonusProductViewModalTheme.layout.content.maxHeight}
+                overflowY={productViewModalTheme.layout.content.overflowY}
+            >
+                <ModalHeader
+                    bg={productViewModalTheme.colors.contentBackground}
+                    pb={onReturnToSelection ? {base: 1, lg: 6} : 6}
+                    px={6}
+                    pt={6}
+                >
+                    <Heading size="md">
+                        {formatMessage(
+                            {
+                                id: 'bonus_product_view_modal.title',
+                                defaultMessage:
+                                    'Select bonus product ({selected} of {max} selected)'
+                            },
+                            {selected: finalSelectedBonusItems, max: finalMaxBonusItems}
+                        )}
+                    </Heading>
+                    {/* Mobile-only Back to Selection button */}
+                    {onReturnToSelection && (
+                        <HideOnDesktop>
+                            <Box mt={2} mb={0}>
+                                {BackToSelectionButton}
+                            </Box>
+                        </HideOnDesktop>
+                    )}
+                </ModalHeader>
+
+                <ModalBody
+                    bg={productViewModalTheme.layout.body.background}
+                    px={productViewModalTheme.layout.body.padding}
+                    pt={
+                        onReturnToSelection
+                            ? {base: 1, lg: productViewModalTheme.layout.body.padding}
+                            : productViewModalTheme.layout.body.padding
+                    }
+                    pb={productViewModalTheme.layout.body.paddingBottom}
+                >
+                    {productViewModalData.isFetching && !productViewModalData.product ? (
+                        <Box p={8} textAlign="center">
+                            <Text>Loading product details...</Text>
+                        </Box>
+                    ) : (
+                        <ProductView
+                            showFullLink={false}
+                            imageSize="sm"
+                            showImageGallery={true}
+                            product={productToRender}
+                            isLoading={false}
+                            addToCart={handleAddToCart}
+                            isProductLoading={false}
+                            customButtons={customButtons}
+                            promotionId={promotionId}
+                            maxOrderQuantity={maxOrderQuantity}
+                            showReviews={true}
+                            showVariationAttributes={true}
+                            alignItems="stretch"
+                            imageGalleryFooter={
+                                onReturnToSelection ? (
+                                    <HideOnMobile>{BackToSelectionButton}</HideOnMobile>
+                                ) : null
+                            }
+                            {...props}
+                        />
+                    )}
+                </ModalBody>
+                <ModalCloseButton size="sm" />
+            </ModalContent>
+        </Modal>
+    )
+}
+
+BonusProductViewModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpen: PropTypes.func,
+    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
+}
+
+export default BonusProductViewModal