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

sf-shikhar-prasoon · 2025-08-04T13:59:56Z

Description

Adding a foundation for bonus product selection functionality with proper modal management and integration with the existing add-to-cart flow.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

Created a new bonus product modal system with context provider, modal component, and custom hook
Added tests coverage for the bonus product modal functionality
Enhanced the add-to-cart modal to integrate with bonus products by:
- Fetching and displaying promotion details
- Adding a "Select Bonus Products" button that opens the bonus modal
- Passing relevant data between modals
Updated app layout to include the new bonus product modal provider

Screen.Recording.2025-08-04.at.9.19.18.AM.mov

How to Test-Drive This PR

deployed to MRT env: https://cc-sharks-shikhar-edit-btn.mobify-storefront-staging.com
visit a product > Add to cart > click the "Select Bonus Products" button > see the new modal

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

cc-prodsec · 2025-08-04T14:00:07Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

…168138/add-new-modal/main change: new modal theme by Constantin

…168138/add-new-modal/main

sf-cboscenco · 2025-08-06T20:15:33Z

For clarity can we rename the use-bonus-product-modal to use-bonus-product-selection-modal (also in other places where we use BonusProductModal=>BonusProductSelectionModal).

sf-kyle-wright

LSTM

sf-cboscenco · 2025-08-11T16:20:46Z

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

-                                    </Button>
+                                    {bonusDiscountLineItems &&
+                                        bonusDiscountLineItems.length > 0 && (
+                                            <>


Can we refactor this button into a new SelectBonusProductsButton component?

This would be preferable

ddiazccrz · 2025-08-11T16:52:33Z

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

+        return null
+    }
+
+    // todo: this component will be replaced in the next work item. The component will display bonus products available for selection.


This is still accurate correct?

Yes, it's being removed in the next PR where I've added the products. It's in draft PR state and I shared it on Friday.
I think we should leave this comment here in this PR. And when the next one is merged it'll be removed with that.

sf-emmyzhang · 2025-08-11T19:28:06Z

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

+
+    const {pathname} = useLocation()
+    useEffect(() => {
+        if (state.isOpen) {


This modal state logic could probably be extracted into a reusable hook?

sf-emmyzhang · 2025-08-11T19:36:07Z

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

+            <Dialog.Backdrop />
+            <Dialog.Positioner>
+                <Dialog.Content>
+                    <Dialog.Body bgColor="white" padding="8">


prefer p={8} for consistency and token usage

Did you mean padding={8}?
I see that in the code. But no p={8}

kevinxh · 2025-08-12T16:00:57Z

I'm curious did you encounter there any ux / accessibility issues with modal nested inside another modal? when you click the outside area, does both modal gets closed? This is an interesting UX pattern that we don't have a precedence.

…168138/add-new-modal/main merge conflict in packages/template-chakra-storefront/src/hooks/index.js where the recently added line "export {useManualBonusProducts} from './use-manual-bonus-products'" was not being used as the file doesn't exist. I removed it

…168138/add-new-modal/main

sf-shikhar-prasoon · 2025-08-15T17:26:34Z

These PR checks are not failing due to the changes in this PR 1. The same tests are failing in a test PR i made with just one comment change https://github.com//pull/3105 2. The 2nd last commit had no test failures. The last commit was only a merge back into this branch

These tests are failing from some changes already in the feature branch

add a new modal

8109de6

sf-shikhar-prasoon added ready for review PR is ready to be reviewed skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated and removed ready for review PR is ready to be reviewed labels Aug 4, 2025

lint fix

b2607ac

sf-shikhar-prasoon marked this pull request as ready for review August 4, 2025 14:15

sf-shikhar-prasoon requested a review from a team as a code owner August 4, 2025 14:15

sf-shikhar-prasoon requested a review from a team August 4, 2025 14:16

sf-shikhar-prasoon added ready for review PR is ready to be reviewed and removed ready for review PR is ready to be reviewed labels Aug 4, 2025

update tests

a625b64

sf-shikhar-prasoon added the ready for review PR is ready to be reviewed label Aug 4, 2025

sf-shikhar-prasoon added 2 commits August 5, 2025 12:44

Merge branch 'feature/manual-bonus-products-v4' into t/cc-sharks/W-19…

881997f

…168138/add-new-modal/main change: new modal theme by Constantin

Merge branch 'feature/manual-bonus-products-v4' into t/cc-sharks/W-19…

54f9f98

…168138/add-new-modal/main

sf-kyle-wright reviewed Aug 11, 2025

View reviewed changes

ddiazccrz approved these changes Aug 11, 2025

View reviewed changes

sf-cboscenco reviewed Aug 11, 2025

View reviewed changes

ddiazccrz reviewed Aug 11, 2025

View reviewed changes

sf-emmyzhang reviewed Aug 11, 2025

View reviewed changes

sf-shikhar-prasoon added 5 commits August 13, 2025 12:42

renamed to BonusProductSelectionModal

c1b7f13

extract out button

10958a8

color and padding fix

606f912

extract reusable custom hook

90b1c1a

sf-shikhar-prasoon force-pushed the t/cc-sharks/W-19168138/add-new-modal/main branch from c5b280a to 407faa9 Compare August 14, 2025 17:30

sf-shikhar-prasoon requested a review from sf-emmyzhang August 15, 2025 07:15

sf-shikhar-prasoon requested a review from sf-cboscenco August 15, 2025 07:15

sf-shikhar-prasoon added 2 commits August 15, 2025 03:50

fix data flow

7c993a5

Merge branch 'feature/manual-bonus-products-v4' into t/cc-sharks/W-19…

f7252c9

…168138/add-new-modal/main

sf-shikhar-prasoon merged commit 17a7bf6 into feature/manual-bonus-products-v4 Aug 15, 2025
13 of 63 checks passed

sf-shikhar-prasoon deleted the t/cc-sharks/W-19168138/add-new-modal/main branch August 15, 2025 17:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

sf-shikhar-prasoon commented Aug 4, 2025 •

edited

Loading

Uh oh!

cc-prodsec commented Aug 4, 2025 •

edited

Loading

Uh oh!

sf-cboscenco commented Aug 6, 2025

Uh oh!

sf-kyle-wright left a comment

Uh oh!

sf-cboscenco Aug 11, 2025

Uh oh!

ddiazccrz Aug 11, 2025

Uh oh!

ddiazccrz Aug 11, 2025

Uh oh!

sf-shikhar-prasoon Aug 11, 2025

Uh oh!

sf-emmyzhang Aug 11, 2025

Uh oh!

sf-emmyzhang Aug 11, 2025

Uh oh!

sf-shikhar-prasoon Aug 14, 2025

Uh oh!

kevinxh commented Aug 12, 2025

Uh oh!

sf-shikhar-prasoon commented Aug 15, 2025

Uh oh!

Uh oh!

Uh oh!

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

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

Uh oh!

Conversation

sf-shikhar-prasoon commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

Uh oh!

sf-cboscenco commented Aug 6, 2025

Uh oh!

sf-kyle-wright left a comment

Choose a reason for hiding this comment

Uh oh!

sf-cboscenco Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

ddiazccrz Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

ddiazccrz Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

sf-shikhar-prasoon Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

sf-emmyzhang Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

sf-emmyzhang Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

sf-shikhar-prasoon Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

kevinxh commented Aug 12, 2025

Uh oh!

sf-shikhar-prasoon commented Aug 15, 2025

Uh oh!

Uh oh!

Uh oh!

sf-shikhar-prasoon commented Aug 4, 2025 •

edited

Loading

cc-prodsec commented Aug 4, 2025 •

edited

Loading