Skip to content

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

Merged
sf-madhuri-uppu merged 19 commits intofeature/bonus-productsfrom
t/cc-shark/W-18407137V2
Jun 12, 2025
Merged

@W-18407137 Trigger a modal if new bonus products exist in AddToCart response#2541
sf-madhuri-uppu merged 19 commits intofeature/bonus-productsfrom
t/cc-shark/W-18407137V2

Conversation

@sf-madhuri-uppu
Copy link
Contributor

@sf-madhuri-uppu sf-madhuri-uppu commented Jun 9, 2025 •
edited
Loading

Screen.Recording.2025-06-10.at.12.31.06.PM.mov

Description

Modal is triggered to open when there are new bonus products in AddToCart response
AddToCart modal will be triggered when the user closes bonus modal.
Persisting existing bonus products information using context and local storage in browser

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

  • (change1)

How to Test-Drive This PR

  1. Closing the modal should trigger AddToCart modal which displays the cart contents and view cart, checkout buttons.
  2. Adding a product should trigger Bonus modal to open if there are new bonus products in the AddToCart response.
  3. Add a product which contains bonus products from PDP, close the bonus modal, refresh the page and add the same product. If there are new bonus products, modal should be triggered.
  4. Add a product which contains bonus products from PDP, close the bonus modal, select view cart button from the next AddToCart modal, go to cart page and come back to the same PDP. Add it again. Bonus modal should be triggered if there are new bonus products in AddToCart response.

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...

Localization

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

@sf-madhuri-uppu sf-madhuri-uppu requested a review from a team as a code owner June 9, 2025 21:53
@cc-prodsec
Copy link
Collaborator

cc-prodsec commented Jun 9, 2025 •
edited
Loading

🎉 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 sf-madhuri-uppu changed the base branch from develop to feature/bonus-products June 9, 2025 21:54
@sf-madhuri-uppu sf-madhuri-uppu added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Jun 9, 2025
sf-jhalak-maheshwari
sf-jhalak-maheshwari reviewed Jun 9, 2025
View reviewed changes
packages/template-retail-react-app/app/components/product-view/index.jsx
// Compare existing bonus products with new bonus discount line items
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?

ddiazccrz
ddiazccrz reviewed Jun 10, 2025
View reviewed changes
packages/template-retail-react-app/app/pages/product-detail/index.test.js
@@ -55,6 +55,8 @@ jest.mock('@salesforce/retail-react-app/app/constants', () => {
}
})

Copy link
Contributor

@ddiazccrz ddiazccrz Jun 10, 2025

Choose a reason for hiding this comment

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

Same here, do we need a bonus product test in this file?

@sf-madhuri-uppu sf-madhuri-uppu added the ready for review PR is ready to be reviewed label Jun 10, 2025
@sf-madhuri-uppu sf-madhuri-uppu changed the title @W-18407137 Trigger a modal if bonus products exist in AddToCart response @W-18407137 Trigger a modal if new bonus products exist in AddToCart response Jun 10, 2025
@alexvuong
Copy link
Contributor

alexvuong commented Jun 11, 2025

May I have the design link for this? If I understand correctly, we are aiming to have 2 modal open back to back if there is a bonus item? one is bonus and the other is the existing addToCart modal? It does not look like a good UX experience for shopper.

alexvuong
alexvuong reviewed Jun 11, 2025
View reviewed changes
packages/template-retail-react-app/app/utils/test-utils.js Outdated
isGuest = false,
bypassAuth = true
bypassAuth = true,
basket = {bonusDiscountLineItems: []}
Copy link
Contributor

@alexvuong alexvuong Jun 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

IMO, TestProviders should be agnostic of the storefront data, and be as generic as possible

sf-jhalak-maheshwari
sf-jhalak-maheshwari reviewed Jun 11, 2025
View reviewed changes
packages/template-retail-react-app/app/components/product-view/index.test.js Outdated
Comment on lines +228 to +231
<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?

@sf-madhuri-uppu
Copy link
Contributor Author

sf-madhuri-uppu commented Jun 11, 2025

May I have the design link for this? If I understand correctly, we are aiming to have 2 modal open back to back if there is a bonus item? one is bonus and the other is the existing addToCart modal? It does not look like a good UX experience for shopper.
@alexvuong I had a discussion with our UX designers regarding this and Felipe suggested to keep the second modal to let the customer know that the parent product was added to the cart so we are keeping it for now
https://salesforce-internal.slack.com/archives/C08THQHN1H8/p1749665864201229

yunakim714
yunakim714 reviewed Jun 12, 2025
View reviewed changes
packages/template-retail-react-app/app/hooks/use-bonus-product-modal.js
children: PropTypes.node.isRequired
}

export const BonusProductModal = () => {
Copy link
Collaborator

@yunakim714 yunakim714 Jun 12, 2025

Choose a reason for hiding this comment

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

I would move components to the component directory

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.

Let's break this down into two parts - the hook for business logic (keep it under hooks) and component for presentation (under components)

Copy link
Contributor Author

@sf-madhuri-uppu sf-madhuri-uppu Jun 13, 2025

Choose a reason for hiding this comment

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

@kzheng-sfdc Sure. This PR was already merged by the time this comment was made. @sf-vrushal-kulkarni will be making this change in his PR

@sf-vrushal-kulkarni
Copy link
Contributor

sf-vrushal-kulkarni commented Jun 12, 2025

@alexvuong can you please review this as we are dependent on this PR for other WIs?
cc @ddiazccrz

@sf-madhuri-uppu sf-madhuri-uppu merged commit 06f0de5 into feature/bonus-products Jun 12, 2025
35 checks passed
@sf-vrushal-kulkarni sf-vrushal-kulkarni mentioned this pull request Jun 13, 2025
Merged
12 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@yunakim714 yunakim714 yunakim714 left review comments

@sf-jhalak-maheshwari sf-jhalak-maheshwari sf-jhalak-maheshwari left review comments

@ddiazccrz ddiazccrz ddiazccrz approved these changes

@alexvuong alexvuong alexvuong approved these changes

@kzheng-sfdc kzheng-sfdc Awaiting requested review from kzheng-sfdc

@jeremy-jung1 jeremy-jung1 Awaiting requested review from jeremy-jung1

Assignees

No one assigned

Labels

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

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

9 participants

@sf-madhuri-uppu @cc-prodsec @alexvuong @sf-vrushal-kulkarni @kzheng-sfdc @ddiazccrz @yunakim714 @sf-jhalak-maheshwari @yhsieh1