@W-18597952 - Scroll bar implementation for bonus products in the modal

[sf-vrushal-kulkarni]

Screenshare.-.2025-06-27.1_00_50.PM.mp4

Description

• Show bonus products in a fixed length view port so there’s a scroll bar when necessary but no lazy loading or infinite scrolling
• Fixed bug related to horizontal scrolling on mobile
• Fixed accessiblity bug for the checkbox to have a label
• Refactored code to extract bonus product item sub-component

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

• Show bonus products in a fixed length view port so there’s a scroll bar when necessary but no lazy loading or infinite scrolling
• Fixed bug related to horizontal scrolling on mobile
• Fixed accessiblity bug for the checkbox to have a label
• Refactored code to extract bonus product item sub-component

How to Test-Drive This PR

• Add a product which has list based promotions and scrolling should work as expected both in desktop and mobile
• Add a product which has rule based promotions and scrolling should work as expected both in desktop and mobile. We should not see horizontal scrolling in the mobile view
• Accessiblity check - When using keyboard, the screen reader should indicate and announce both checkbox and what item it is

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]

🎉 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)