@W-19168138 add a new modal to be used for bonus product selection modal (#2988)

Author: sf-shikhar-prasoon

packages/template-chakra-storefront/src/components/_app/partials/app-layout.jsx

@@ -13,6 +13,7 @@ import ScrollToTop from '../../scroll-to-top'
 import OfflineBanner from '../../offline-banner'
 import OfflineBoundary from '../../offline-boundary'
 import {AddToCartModalProvider} from '../../../hooks/use-add-to-cart-modal'
+import {BonusProductSelectionModalProvider} from '../../../hooks/use-bonus-product-selection-modal'
 
 /**
  * AppLayout component that provides the main layout structure
@@ -37,33 +38,35 @@ const AppLayout = ({
                 {/* Offline Banner */}
                 {isOnline === false && <OfflineBanner isOnline={isOnline} />}
 
-                <AddToCartModalProvider>
-                    <SkipNavContent
-                        css={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            flex: 1,
-                            outline: 0
-                        }}
-                    >
-                        <Box
-                            as="main"
-                            id="app-main"
-                            role="main"
-                            display="flex"
-                            flexDirection="column"
-                            flex="1"
+                <BonusProductSelectionModalProvider>
+                    <AddToCartModalProvider>
+                        <SkipNavContent
+                            css={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flex: 1,
+                                outline: 0
+                            }}
                         >
-                            <OfflineBoundary isOnline={isOnline}>{children}</OfflineBoundary>
-                        </Box>
-                    </SkipNavContent>
+                            <Box
+                                as="main"
+                                id="app-main"
+                                role="main"
+                                display="flex"
+                                flexDirection="column"
+                                flex="1"
+                            >
+                                <OfflineBoundary isOnline={isOnline}>{children}</OfflineBoundary>
+                            </Box>
+                        </SkipNavContent>
 
-                    {/* Footer */}
-                    {footerComponent}
+                        {/* Footer */}
+                        {footerComponent}
 
-                    {/* Modals */}
-                    {modalsComponent}
-                </AddToCartModalProvider>
+                        {/* Modals */}
+                        {modalsComponent}
+                    </AddToCartModalProvider>
+                </BonusProductSelectionModalProvider>
             </Box>
         </>
     )

packages/template-chakra-storefront/src/components/select-bonus-products-button/index.jsx

@@ -0,0 +1,61 @@
+/*
+ * 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 from 'react'
+import PropTypes from 'prop-types'
+import {Button} from '@chakra-ui/react'
+import {useIntl} from 'react-intl'
+
+const SelectBonusProductsButton = ({
+    bonusDiscountLineItems,
+    product,
+    itemsAdded,
+    onOpenBonusModal,
+    onClose,
+    ...buttonProps
+}) => {
+    const intl = useIntl()
+
+    const handleClick = () => {
+        if (onOpenBonusModal) {
+            onOpenBonusModal({
+                bonusDiscountLineItems,
+                product,
+                itemsAdded
+            })
+        }
+        if (onClose) onClose()
+    }
+
+    return (
+        <Button
+            onClick={handleClick}
+            width="100%"
+            variant="outline-gray"
+            color="blue.600"
+            size="md"
+            height={9}
+            minWidth={11}
+            textStyle="sm"
+            {...buttonProps}
+        >
+            {intl.formatMessage({
+                defaultMessage: 'Select Bonus Products',
+                id: 'add_to_cart_modal.button.select_bonus_products'
+            })}
+        </Button>
+    )
+}
+
+SelectBonusProductsButton.propTypes = {
+    bonusDiscountLineItems: PropTypes.array,
+    product: PropTypes.object,
+    itemsAdded: PropTypes.array,
+    onOpenBonusModal: PropTypes.func,
+    onClose: PropTypes.func
+}
+
+export default SelectBonusProductsButton

packages/template-chakra-storefront/src/hooks/index.js

@@ -17,3 +17,8 @@ export {useDerivedProduct} from './use-derived-product'
 export {useCurrency} from './use-currency'
 export {useCurrentCustomer} from './use-current-customer'
 export {useCurrentBasket} from './use-current-basket'
+export {
+    BonusProductSelectionModalProvider,
+    useBonusProductSelectionModalContext,
+    useBonusProductSelectionModal
+} from './use-bonus-product-selection-modal'

packages/template-chakra-storefront/src/hooks/use-add-to-cart-modal.js

@@ -21,6 +21,7 @@ import {
     useBreakpointValue
 } from '@chakra-ui/react'
 import {useCurrentBasket} from './use-current-basket'
+import {usePromotions} from '@salesforce/commerce-sdk-react'
 import Link from '../components/link'
 import RecommendedProducts from '../components/recommended-products'
 import {LockIcon} from '../components/icons'
@@ -29,7 +30,10 @@ import {getPriceData, getDisplayVariationValues} from '../utils/product-utils'
 import {EINSTEIN_RECOMMENDERS} from '../../config/constants'
 import DisplayPrice from '../components/display-price'
 import SafePortal from '../components/safe-portal'
+import {useBonusProductSelectionModalContext} from './use-bonus-product-selection-modal'
 import {addToCartModalTheme} from '../theme/components/project/add-to-cart-modal'
+import SelectBonusProductsButton from '../components/select-bonus-products-button'
+import {useModalState} from './use-modal-state'
 
 /**
  * Local configuration for component-specific styling
@@ -69,8 +73,10 @@ AddToCartModalProvider.propTypes = {
 /**
  * Visual feedback (a modal) for adding item to the cart.
  */
-export const AddToCartModal = () => {
+export const AddToCartModal = ({onSelectBonusProductsClick}) => {
     const {isOpen, onClose, data} = useAddToCartModalContext()
+    const bonusProductContext = useBonusProductSelectionModalContext()
+    const {onOpen: onOpenBonusModal} = bonusProductContext || {}
     const {product, itemsAdded = [], selectedQuantity} = data || {}
     const isProductABundle = !!product?.type.bundle
 
@@ -80,6 +86,21 @@ export const AddToCartModal = () => {
         data: basket = {},
         derivedData: {totalItems}
     } = useCurrentBasket()
+
+    const {bonusDiscountLineItems = []} = basket || {}
+
+    // Extract unique promotion IDs
+    const promotionIds = [
+        ...new Set(bonusDiscountLineItems.map((item) => item.promotionId).filter(Boolean))
+    ]
+    // Fetch promotion details
+    const {data: promotions, isLoading: isPromotionsLoading} = usePromotions(
+        {parameters: {ids: promotionIds.join(',')}},
+        {enabled: promotionIds.length > 0}
+    )
+    // Get the first promotion's details
+    const promotionText = promotions?.data?.[0]?.details || ''
+
     const size = useBreakpointValue(addToCartModalTheme.modal.size)
     const {currency, productSubTotal} = basket
     const numberOfItemsAdded = isProductABundle
@@ -370,25 +391,26 @@ export const AddToCartModal = () => {
                                                 </Flex>
                                             )
                                         })}
-                                    {/* TODO: replace with text fetched from promotion */}
-                                    <Text mb={2} fontSize="md" fontWeight="normal" textAlign="left">
-                                        {'Bonus products available!'}
-                                    </Text>
-                                    <Button
-                                        as={Link}
-                                        to="/checkout"
-                                        width="100%"
-                                        variant="outline-gray"
-                                        size="md"
-                                        height={9}
-                                        minWidth={11}
-                                        textStyle="sm"
-                                    >
-                                        {intl.formatMessage({
-                                            defaultMessage: 'Select Bonus Products',
-                                            id: 'add_to_cart_modal.button.select_bonus_products'
-                                        })}
-                                    </Button>
+                                    {bonusDiscountLineItems &&
+                                        bonusDiscountLineItems.length > 0 && (
+                                            <>
+                                                <Text
+                                                    mb={2}
+                                                    fontSize="md"
+                                                    fontWeight="normal"
+                                                    textAlign="left"
+                                                >
+                                                    {promotionText}
+                                                </Text>
+                                                <SelectBonusProductsButton
+                                                    bonusDiscountLineItems={bonusDiscountLineItems}
+                                                    product={product}
+                                                    itemsAdded={itemsAdded}
+                                                    onOpenBonusModal={onOpenBonusModal}
+                                                    onClose={onClose}
+                                                />
+                                            </>
+                                        )}
                                 </Box>
                                 <Box
                                     display={['none', 'none', 'none', 'block']}
@@ -491,39 +513,14 @@ AddToCartModal.propTypes = {
     quantity: PropTypes.number,
     isOpen: PropTypes.bool,
     onClose: PropTypes.func,
+    onSelectBonusProductsClick: PropTypes.func,
     children: PropTypes.any
 }
 
 export const useAddToCartModal = () => {
-    const [state, setState] = useState({
-        isOpen: false,
-        data: null
+    const {isOpen, data, onOpen, onClose} = useModalState({
+        closeOnRouteChange: true,
+        resetDataOnClose: true
     })
-
-    const {pathname} = useLocation()
-    useEffect(() => {
-        if (state.isOpen) {
-            setState({
-                ...state,
-                isOpen: false
-            })
-        }
-    }, [pathname])
-
-    return {
-        isOpen: state.isOpen,
-        data: state.data,
-        onOpen: (data) => {
-            setState({
-                isOpen: true,
-                data
-            })
-        },
-        onClose: () => {
-            setState({
-                isOpen: false,
-                data: null
-            })
-        }
-    }
+    return {isOpen, data, onOpen, onClose}
 }

packages/template-chakra-storefront/src/hooks/use-add-to-cart-modal.test.js

@@ -601,6 +601,11 @@ test('Renders AddToCartModal properly', () => {
                 id: '701642811399M',
                 quantity: 22
             }
+        ],
+        bonusDiscountLineItems: [
+            {
+                promotionId: 'ChoiceOfBonusProdect-ProductLevel-ruleBased'
+            }
         ]
     }
 
@@ -621,9 +626,6 @@ test('Renders AddToCartModal properly', () => {
     const numOfRowsRendered = screen.getAllByTestId('product-added').length
     expect(numOfRowsRendered).toEqual(MOCK_DATA.itemsAdded.length)
 
-    // Check that the promotional message is displayed
-    expect(screen.getByText('Bonus products available!')).toBeInTheDocument() //todo: update tests after static text is removed
-
     // Check that the "Select Bonus Products" button is displayed
     expect(screen.getByText('Select Bonus Products')).toBeInTheDocument()
 })

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

@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2025, 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, {useContext, useState, useEffect} from 'react'
+import {useLocation} from 'react-router-dom'
+import PropTypes from 'prop-types'
+import {Dialog, Button, Text, Box, useBreakpointValue} from '@chakra-ui/react'
+import {useModalState} from './use-modal-state'
+
+/**
+ * Context for managing the BonusProductSelectionModal.
+ * Used in top level App component.
+ */
+export const BonusProductSelectionModalContext = React.createContext()
+export const useBonusProductSelectionModalContext = () =>
+    useContext(BonusProductSelectionModalContext)
+
+export const BonusProductSelectionModalProvider = ({children}) => {
+    const bonusProductSelectionModal = useBonusProductSelectionModal()
+    return (
+        <BonusProductSelectionModalContext.Provider value={bonusProductSelectionModal}>
+            {children}
+            <BonusProductSelectionModal />
+        </BonusProductSelectionModalContext.Provider>
+    )
+}
+
+BonusProductSelectionModalProvider.propTypes = {
+    children: PropTypes.node.isRequired
+}
+
+/**
+ * Modal for selecting from available bonus products.
+ */
+export const BonusProductSelectionModal = () => {
+    const {isOpen, onClose, data} = useBonusProductSelectionModalContext()
+    const size = useBreakpointValue({base: 'full', lg: 'lg', xl: 'xl'})
+
+    if (!isOpen) {
+        return null
+    }
+
+    // todo: this component will be replaced in the next work item. The component will display bonus products available for selection.
+    return (
+        <Dialog.Root
+            size={size}
+            open={isOpen}
+            onOpenChange={onClose}
+            scrollBehavior="inside"
+            placement="center"
+        >
+            <Dialog.Backdrop />
+            <Dialog.Positioner>
+                <Dialog.Content>
+                    <Dialog.Body bgColor="white" padding={8}>
+                        <Text fontSize="md" mb="4">
+                            Bonus Product Modal
+                        </Text>
+                        {data && (
+                            <Box p="4" bg="gray.100" borderRadius="md" mb="4">
+                                <Text fontSize="sm" fontWeight="bold" mb="2">
+                                    Received Data:
+                                </Text>
+                                <Text fontSize="xs" fontFamily="mono">
+                                    {JSON.stringify(data, null, 2)}
+                                </Text>
+                            </Box>
+                        )}
+                    </Dialog.Body>
+                    <Dialog.Footer bgColor="white" padding={8}>
+                        <Button onClick={onClose} variant="solid" width="100%">
+                            Close
+                        </Button>
+                    </Dialog.Footer>
+                </Dialog.Content>
+            </Dialog.Positioner>
+        </Dialog.Root>
+    )
+}
+
+export const useBonusProductSelectionModal = () => {
+    const {isOpen, data, onOpen, onClose} = useModalState({
+        closeOnRouteChange: true,
+        resetDataOnClose: true
+    })
+    return {isOpen, data, onOpen, onClose}
+}