Show the Bonus Product in a Product View Modal to enable adding it to the cart

[sf-cboscenco]

Description

Show the Bonus Product in a Product View Modal after selecting a bonus product tile in the bonus products selection modal
-enabled the add to cart capability in the Product View Modal
-show the existing bonus product count in the title area
-navigate to the cart page after the product is added

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• [x ] 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

• modified the BonusProductModal component to switch from the bonus product selector to a ProductViewModal representing the selected bonus product
• modified the BonusProductModal component to show the preexisting bonus product count for the selected product
• configure the ProductViewModal to enable the add to cart functionality
• after adding the bonus product to the cart navigate to the cart page

How to Test-Drive This PR

• ensure bonus products are configured for a certain product
• on the storefront add to cart the product that has bonus products available
• the bonus product selection modal is shown after the main product is added to the cart
• select a bonus product
• a product view modal is shown
• add the bonus product to the cart
• the ProductViewModal is dismissed automatically and the cart page is shown with the bonus products added to the cart

Checklists

General

• [ x] 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)

[sf-madhuri-uppu]

Are we not going to show add to cart modal after the user selects bonus products? What if there is a case where user does not choose any bonus products and directly closes the bonus modal? Currently we are showing add to cart modal in that scenario.

[sf-cboscenco]

The bonus selection dialog is shown only after the main product has been added to the cart. If the user closes the bonus selection dialog the user is returned to the product detail page. If the user selects a bonus product on the bonus selectyion modal a product view modal is shown with the add to cart button. If the user closes the product view modal with the bonus product details than the user is returned to the bonus selection modal.

[sf-madhuri-uppu]

We can remove product, itemsAdded and selectedQuantity parameters too if we are not planning to show AddToCart modal. Those params are used inside AddToCart modal

[sf-cboscenco]

The changes in product view should be part of a future refactoring/clean-up work that is already being planned.