Skip to content

@W-18407137 Trigger a modal if new bonus products exist in AddToCart response #2541

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sf-madhuri-uppu merged 19 commits into from
Jun 12, 2025
Merged

@W-18407137 Trigger a modal if new bonus products exist in AddToCart response #2541

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
968f1bb
@W-18670270 update unit test
yhsieh1 Jun 9, 2025
4259a1b
skip changelog
yhsieh1 Jun 9, 2025
58ad8fe
remove un-needed assertion
yhsieh1 Jun 9, 2025
8c44ea7
Merge pull request #2538 from SalesforceCommerceCloud/t/commerce/W-18…
yhsieh1 Jun 9, 2025
802b9d3
Trigger a modal if bonus products exist in AddToCart response
sf-madhuri-uppu Jun 9, 2025
790a72b
skip changelog
sf-madhuri-uppu Jun 9, 2025
c2021fa
skip changelog
sf-madhuri-uppu Jun 9, 2025
0aadd8b
fixed import issue
sf-madhuri-uppu Jun 9, 2025
83b1dbb
removed localstorage and updated bonus products info from current basket
sf-madhuri-uppu Jun 10, 2025
0a697ef
removed unnecessary code
sf-madhuri-uppu Jun 10, 2025
4a0950c
nit space
sf-madhuri-uppu Jun 10, 2025
afb7dc9
fixed 2 failing tests
sf-madhuri-uppu Jun 10, 2025
bd8f645
fixed a unit test
sf-madhuri-uppu Jun 10, 2025
392c52f
fixed lint errors
sf-madhuri-uppu Jun 10, 2025
9414838
Addressed PR comments
sf-madhuri-uppu Jun 11, 2025
f8fd65e
use current basket query
sf-madhuri-uppu Jun 11, 2025
e441ee9
nit
sf-madhuri-uppu Jun 11, 2025
4848f14
removed unnecessary code
sf-madhuri-uppu Jun 12, 2025
9f6cfe5
fixed infinite re-render issue
sf-madhuri-uppu Jun 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 26 additions & 25 deletions packages/template-retail-react-app/app/components/_app/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {SkipNavLink, SkipNavContent} from '@chakra-ui/skip-nav'

// Contexts
import {CurrencyProvider} from '@salesforce/retail-react-app/app/contexts'
import {BonusProductModalProvider} from '@salesforce/retail-react-app/app/hooks/use-bonus-product-modal'

// Local Project Components
import Header from '@salesforce/retail-react-app/app/components/header'
Expand Down Expand Up @@ -413,32 +414,32 @@ const App = (props) => {
</Box>
{!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"
<BonusProductModalProvider basket={basket}>
<SkipNavContent
style={{
display: 'flex',
flexDirection: 'column',
flex: 1,
outline: 0
}}
>
<OfflineBoundary isOnline={false}>
{children}
</OfflineBoundary>
</Box>
</SkipNavContent>

{!isCheckout ? <Footer /> : <CheckoutFooter />}

<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>
{!isCheckout ? <Footer /> : <CheckoutFooter />}
<AuthModal {...authModal} />
<DntNotification {...dntNotification} />
</BonusProductModalProvider>
</AddToCartModalProvider>
</Box>
</CurrencyProvider>
Expand Down
64 changes: 54 additions & 10 deletions packages/template-retail-react-app/app/components/product-view/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
} from '@salesforce/retail-react-app/app/components/shared/ui'
import {useCurrency, useDerivedProduct} from '@salesforce/retail-react-app/app/hooks'
import {useAddToCartModalContext} from '@salesforce/retail-react-app/app/hooks/use-add-to-cart-modal'
import {useBonusProductModalContext} from '@salesforce/retail-react-app/app/hooks/use-bonus-product-modal'

// project components
import ImageGallery from '@salesforce/retail-react-app/app/components/image-gallery'
Expand Down Expand Up @@ -131,6 +132,13 @@ const ProductView = forwardRef(
onOpen: onAddToCartModalOpen,
onClose: onAddToCartModalClose
} = useAddToCartModalContext()
const {
isOpen: isBonusProductModalOpen,
onOpen: onBonusProductModalOpen,
onClose: onBonusProductModalClose,
bonusProducts,
addBonusProducts
} = useBonusProductModalContext()
const theme = useTheme()
const [showOptionsMessage, toggleShowOptionsMessage] = useState(false)
const {
Expand Down Expand Up @@ -272,16 +280,46 @@ const ProductView = forwardRef(
return
}
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,
selectedQuantity: quantity
})
const addToCartResponse = await addToCart(variant, quantity)

// For regular products: addToCartResponse has productSelectionValues and possibly bonusDiscountLineItems
// For product bundles: addToCartResponse is just the childProductSelections array
const itemsAdded =
addToCartResponse?.productSelectionValues || addToCartResponse
const isValidResponse =
itemsAdded && (Array.isArray(itemsAdded) || itemsAdded.length > 0)

// Compare existing bonus products with new bonus discount line items
// Only regular products (not bundles) can have bonusDiscountLineItems
const newBonusItems =
addToCartResponse?.bonusDiscountLineItems?.filter(
(newItem) =>
Copy link
Contributor

@sf-jhalak-maheshwari sf-jhalak-maheshwari Jun 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change name to bonusItem?

Copy link
Contributor

@kzheng-sfdc kzheng-sfdc Jun 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can move this to within the "isValidResponse" check, right?

!bonusProducts.some(
(existingItem) => existingItem.id === newItem.id
)
) || []

if (isValidResponse) {
// Show bonus product modal first if there are bonus items
if (newBonusItems?.length > 0) {
// Update bonusProducts list with the new bonus items
addBonusProducts(newBonusItems)
onBonusProductModalOpen({
newBonusItems,
allBonusItems: addToCartResponse.bonusDiscountLineItems,
openAddToCartModalIfNeeded: true,
product,
itemsAdded,
selectedQuantity: quantity
})
} else {
// If no bonus items, just show add to cart modal
onAddToCartModalOpen({
product,
itemsAdded,
selectedQuantity: quantity
})
}
}
} catch (e) {
showError()
Expand Down Expand Up @@ -366,6 +404,12 @@ const ProductView = forwardRef(
}
}, [location.pathname])

useEffect(() => {
if (isBonusProductModalOpen) {
onBonusProductModalClose()
}
}, [location.pathname])

useEffect(() => {
if (
!isProductASet &&
Expand Down
72 changes: 57 additions & 15 deletions packages/template-retail-react-app/app/components/product-view/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,13 @@ afterEach(() => {
sessionStorage.clear()
})

const mockBasket = {bonusDiscountLineItems: []}

test('ProductView Component renders properly', async () => {
const addToCart = jest.fn()
renderWithProviders(<MockComponent product={mockProductDetail} addToCart={addToCart} />)
renderWithProviders(<MockComponent product={mockProductDetail} addToCart={addToCart} />, {
wrapperProps: {basket: mockBasket}
})
expect(screen.getAllByText(/Black Single Pleat Athletic Fit Wool Suit/i)).toHaveLength(2)
expect(screen.getAllByText(/299\.99/)).toHaveLength(4)
expect(screen.getAllByText(/Add to cart/i)).toHaveLength(2)
Expand All @@ -58,7 +62,9 @@ test('ProductView Component renders properly', async () => {

test('ProductView Component renders with addToCart event handler', async () => {
const addToCart = jest.fn()
await renderWithProviders(<MockComponent product={mockProductDetail} addToCart={addToCart} />)
await renderWithProviders(<MockComponent product={mockProductDetail} addToCart={addToCart} />, {
wrapperProps: {basket: mockBasket}
})

const addToCartButton = screen.getAllByText(/add to cart/i)[0]
fireEvent.click(addToCartButton)
Expand All @@ -72,7 +78,10 @@ test('ProductView Component renders with addToWishList event handler', async ()
const addToWishlist = jest.fn()

await renderWithProviders(
<MockComponent product={mockProductDetail} addToWishlist={addToWishlist} />
<MockComponent product={mockProductDetail} addToWishlist={addToWishlist} />,
{
wrapperProps: {basket: mockBasket}
}
)

await waitFor(() => {
Expand All @@ -91,7 +100,10 @@ test('ProductView Component renders with updateWishlist event handler', async ()
const updateWishlist = jest.fn()

await renderWithProviders(
<MockComponent product={mockProductDetail} updateWishlist={updateWishlist} />
<MockComponent product={mockProductDetail} updateWishlist={updateWishlist} />,
{
wrapperProps: {basket: mockBasket}
}
)

await waitFor(() => {
Expand All @@ -109,7 +121,9 @@ test('ProductView Component renders with updateWishlist event handler', async ()
test('Product View can update quantity', async () => {
const user = userEvent.setup()
const addToCart = jest.fn()
await renderWithProviders(<MockComponent product={mockProductDetail} addToCart={addToCart} />)
await renderWithProviders(<MockComponent product={mockProductDetail} addToCart={addToCart} />, {
wrapperProps: {basket: mockBasket}
})

let quantityBox
await waitFor(() => {
Expand All @@ -132,7 +146,9 @@ test('Product View handles invalid quantity inputs', async () => {
const user = userEvent.setup()

// Any invalid input should be reset to minOrderQuantity
await renderWithProviders(<MockComponent product={mockProductDetail} />)
await renderWithProviders(<MockComponent product={mockProductDetail} />, {
wrapperProps: {basket: mockBasket}
})

const quantityInput = screen.getByRole('spinbutton', {name: /quantity/i})
const minQuantity = mockProductDetail.minOrderQuantity.toString()
Expand All @@ -156,7 +172,9 @@ test('Product View handles invalid quantity inputs', async () => {
describe('ProductView Component', () => {
test('increases quantity when increment button is clicked', async () => {
const user = userEvent.setup()
renderWithProviders(<ProductView product={mockProductDetail} />)
renderWithProviders(<ProductView product={mockProductDetail} />, {
wrapperProps: {basket: mockBasket}
})

const quantityInput = await screen.findByRole('spinbutton')
const incrementButton = screen.getByTestId('quantity-increment')
Expand All @@ -179,7 +197,10 @@ describe('ProductView Component', () => {
test('renders a product set properly - parent item', () => {
const parent = mockProductSet
renderWithProviders(
<MockComponent product={parent} addToCart={() => {}} addToWishlist={() => {}} />
<MockComponent product={parent} addToCart={() => {}} addToWishlist={() => {}} />,
{
wrapperProps: {basket: mockBasket}
}
)

// NOTE: there can be duplicates of the same element, due to mobile and desktop views
Expand All @@ -204,7 +225,10 @@ test('renders a product set properly - parent item', () => {
test('renders a product set properly - child item', () => {
const child = mockProductSet.setProducts[0]
renderWithProviders(
<MockComponent product={child} addToCart={() => {}} addToWishlist={() => {}} />
<MockComponent product={child} addToCart={() => {}} addToWishlist={() => {}} />,
{
wrapperProps: {basket: mockBasket}
}
Copy link
Contributor

@sf-jhalak-maheshwari sf-jhalak-maheshwari Jun 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seeing this getting reused in every test case, if possible, can we move this to beforeEach?

)

// NOTE: there can be duplicates of the same element, due to mobile and desktop views
Expand Down Expand Up @@ -239,7 +263,10 @@ test('validateOrderability callback is called when adding a set to cart', async
validateOrderability={validateOrderability}
addToCart={() => {}}
addToWishlist={() => {}}
/>
/>,
{
wrapperProps: {basket: mockBasket}
}
)

const button = screen.getByRole('button', {name: /add set to cart/i})
Expand All @@ -262,7 +289,10 @@ test('onVariantSelected callback is called after successfully selected a variant
onVariantSelected={onVariantSelected}
addToCart={() => {}}
addToWishlist={() => {}}
/>
/>,
{
wrapperProps: {basket: mockBasket}
}
)

const size = screen.getByRole('radio', {name: /xl/i})
Expand All @@ -280,7 +310,10 @@ describe('add to cart button loading tests', () => {
product={mockProductDetail}
addToCart={() => {}}
isBasketLoading={true}
/>
/>,
{
wrapperProps: {basket: mockBasket}
}
)
expect(screen.getByRole('button', {name: /add to cart/i})).toBeDisabled()
})
Expand All @@ -291,7 +324,10 @@ describe('add to cart button loading tests', () => {
product={mockProductDetail}
addToCart={() => {}}
isBasketLoading={false}
/>
/>,
{
wrapperProps: {basket: mockBasket}
}
)
expect(screen.getByRole('button', {name: /add to cart/i})).toBeEnabled()
})
Expand All @@ -300,7 +336,10 @@ describe('add to cart button loading tests', () => {
test('renders a product bundle properly - parent item', () => {
const parent = mockProductBundle
renderWithProviders(
<MockComponent product={parent} addToCart={() => {}} addToWishlist={() => {}} />
<MockComponent product={parent} addToCart={() => {}} addToWishlist={() => {}} />,
{
wrapperProps: {basket: mockBasket}
}
)

// NOTE: there can be duplicates of the same element, due to mobile and desktop views
Expand Down Expand Up @@ -330,7 +369,10 @@ test('renders a product bundle properly - child item', () => {
addToWishlist={() => {}}
isProductPartOfBundle={true}
setChildProductOrderability={() => {}}
/>
/>,
{
wrapperProps: {basket: mockBasket}
}
)

const addToCartButton = screen.queryByRole('button', {name: /add to cart/i})
Expand Down
Loading