@W-18771949 Get rule based bonus products from API by sf-madhuri-uppu · Pull Request #2641 · SalesforceCommerceCloud/pwa-kit

sf-madhuri-uppu · 2025-06-25T07:31:39Z

Description

Fetch rule based bonus products by calling product search API. Handle scenarios where a product can qualify for multiple rule based and list based promotions (sometimes both too). Formatted the response of rule based promotions to look like list based response so that modal's logic need not differentiate between the 2 kinds.

Screen.Recording.2025-06-27.at.12.57.55.AM.mov

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

(step1)

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-06-25T07:31:50Z

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

packages/template-retail-react-app/app/hooks/use-bonus-product-search.js

packages/template-retail-react-app/app/components/product-view/index.jsx

sf-vrushal-kulkarni

Is this also handling the the modal on the cart page? Can see only the list based bonus products on cart page

sf-vrushal-kulkarni

I am not able to see any bonus products either for rule based or list based. I was able to see the rule based bonus products after adding the product 2 - 3 times to cart

sf-madhuri-uppu · 2025-06-27T05:21:26Z

@sf-vrushal-kulkarni I made changes to product view component so we will not able to see rule based promotions on cart page. I can see list based promotions on the bonus modal on PDP. Let me look into why we are seeing rule based promotion after adding the item to cart for the second time.

Screen.Recording.2025-06-26.at.10.11.57.PM.mov

sf-madhuri-uppu · 2025-06-27T08:01:44Z

https://github.com/user-attachments/assets/8cea3bda-c01c-4ece-9023-0d2d2dd63ae9
@sf-vrushal-kulkarni Fixed the rule based promotion render issue. They will now be seen in the modal after the first add to cart itself

alexvuong · 2025-06-30T17:38:04Z

packages/template-retail-react-app/app/components/product-view/index.jsx

+        const [promotionIdToSearch, setPromotionIdToSearch] = useState(null)
+        const {data: bonusProductSearchResult} = useBonusProductSearch(promotionIdToSearch)
+
+        // State to track all promotion IDs and their results


The business logic here seems to be isolated to bonus products only. Is it possibel to extract it out into a hook to reduce code in this component? E.g useBonusProduct()

alexvuong · 2025-06-30T17:39:14Z

packages/template-retail-react-app/app/components/product-view/index.jsx

+                    maxBonusItems:
+                        bonusItemsForModal?.promotionIdToMaxBonusItemsMap?.[promotionIdToSearch]
+                }
+                ruleBasedPromotionsRef.current.push(currentPromotionResult)


For React ref, we are re-assigning current

ruleBasedPromotionsRef.current = currentPromotionResult

alexvuong · 2025-06-30T17:43:51Z

packages/template-retail-react-app/app/components/product-view/index.jsx

+                        productId: bonusProduct.productId,
+                        productName: bonusProduct.productName,
+                        c_productUrl: bonusProduct.c_productUrl
+                    }


If this is the data structure we are dealing for bonus product. You can avoid doing this here by taking advantage of react-query select data transformation during useBonusProductSearch hook. then the data returns will always have this shape.

https://tanstack.com/query/v4/docs/framework/react/reference/useQuery
See useProductViewModal for an example

P/s: You can definitely create promotion id map from here as well if that is more convenient and reduce the amount of data transformation logic in the handleAddToCart

alexvuong · 2025-06-30T17:45:33Z

packages/template-retail-react-app/app/components/product-view/index.jsx

+                if (pendingPromotionIds.length > 0) {
+                    const nextPromotionId = pendingPromotionIds[0]
+                    setPendingPromotionIds((prev) => prev.slice(1))
+                    setPromotionIdToSearch(nextPromotionId)


Can we filter out any pending promotion from useBonusProducts hook select transformation step so all promotions returned are always valid promotion.
//pseu-do code

const {data: bonusProd} = useBonusProductSearch(args, { enabdle: !! promotionId, select: (res) => { const validPromo = res.hits.map(promo => !promo.isPending) return res.hits.map (promo => ({ id: ..., name: ... }) } } )

alexvuong · 2025-06-30T17:53:01Z

packages/template-retail-react-app/app/components/product-view/index.jsx

+                            let listBasedBonusProducts = newBonusItems.filter(
+                                (item) => item.bonusProducts
+                            )
+                            // Collect all promotion IDs for rule-based promotions


Let's clean up comment here unless it is necessary. Too much comments accumulated over time can affect bundle size if every line of code has one comment explaining what it does

alexvuong · 2025-06-30T18:00:49Z

packages/template-retail-react-app/app/hooks/use-bonus-product-modal.js

        isOpen: false,
        data: {},
-        bonusProducts: basket?.bonusDiscountLineItems || []
+        existingBonusProducts: basket?.bonusDiscountLineItems || []


why changing it to existingBonusProducts? What made it different from bonusProd. from this hook POV, it only cares about basket.bonusDiscountLineItems as bonusProd. What is the non-existingBonusProd if we take this name?
So any un-added/un-set items from outside that is not added to cart is irrelavent

alexvuong · 2025-06-30T18:01:39Z

packages/template-retail-react-app/app/components/product-view/index.jsx

+                                .filter(Boolean)
+
+                            //create maps of promotionId to id and maxBonusItems for rule based promotions
+                            const {promotionIdToIdMap, promotionIdToMaxBonusItemsMap} =


Can we reduce this logic here if we take advantage of useProductSearch hook select for data transformation?

Get rule based bonus products from API

d35d40f

sf-madhuri-uppu requested a review from a team as a code owner June 25, 2025 07:31

sf-madhuri-uppu added 2 commits June 25, 2025 00:36

nit

37abf08

nit

36006e4

sf-madhuri-uppu changed the base branch from feature/bonus-products to feature/rule-based-bonus-products June 26, 2025 19:07

sf-madhuri-uppu added 2 commits June 26, 2025 12:36

removed console statements

0c0350f

skip changelog

d1136a0

sf-madhuri-uppu requested a review from a team June 26, 2025 19:49

sf-madhuri-uppu added skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated ready for review PR is ready to be reviewed labels Jun 26, 2025

sf-jhalak-maheshwari reviewed Jun 26, 2025

View reviewed changes

packages/template-retail-react-app/app/hooks/use-bonus-product-search.js Show resolved Hide resolved

sf-jhalak-maheshwari reviewed Jun 26, 2025

View reviewed changes

packages/template-retail-react-app/app/components/product-view/index.jsx Show resolved Hide resolved

sf-jhalak-maheshwari reviewed Jun 26, 2025

View reviewed changes

packages/template-retail-react-app/app/components/product-view/index.jsx Outdated Show resolved Hide resolved

sf-jhalak-maheshwari reviewed Jun 26, 2025

View reviewed changes

packages/template-retail-react-app/app/components/product-view/index.jsx Outdated Show resolved Hide resolved

Addressed pr comments

b2d0d0a

sf-madhuri-uppu requested a review from sf-jhalak-maheshwari June 26, 2025 21:17

sf-madhuri-uppu added 3 commits June 26, 2025 15:02

fixed a test

b02f97e

handling multiple rule based and list based promotions

037675e

fixed test

cd91851

sf-vrushal-kulkarni approved these changes Jun 27, 2025

View reviewed changes

sf-vrushal-kulkarni reviewed Jun 27, 2025

View reviewed changes

sf-vrushal-kulkarni self-requested a review June 27, 2025 02:38

addressed pr comments

77c9779

added maxBonusItems

814c9ff

sf-madhuri-uppu mentioned this pull request Jun 27, 2025

@W-18903896 do not trigger bonus modal for rule based promotions - MVP #2674

Merged

12 tasks

sf-vrushal-kulkarni approved these changes Jun 27, 2025

View reviewed changes

alexvuong reviewed Jun 30, 2025

View reviewed changes

sf-madhuri-uppu closed this Sep 12, 2025

Conversation

sf-madhuri-uppu commented Jun 25, 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 Jun 25, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sf-vrushal-kulkarni left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sf-vrushal-kulkarni left a comment

Choose a reason for hiding this comment

Uh oh!

sf-madhuri-uppu commented Jun 27, 2025

Uh oh!

sf-madhuri-uppu commented Jun 27, 2025

Uh oh!

alexvuong Jun 30, 2025

Choose a reason for hiding this comment

Uh oh!

alexvuong Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexvuong Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexvuong Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexvuong Jun 30, 2025

Choose a reason for hiding this comment

Uh oh!

alexvuong Jun 30, 2025

Choose a reason for hiding this comment

Uh oh!

alexvuong Jun 30, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

sf-madhuri-uppu commented Jun 25, 2025 •

edited

Loading

cc-prodsec commented Jun 25, 2025 •

edited

Loading

sf-vrushal-kulkarni left a comment •

edited

Loading

alexvuong Jun 30, 2025 •

edited

Loading

alexvuong Jun 30, 2025 •

edited

Loading

alexvuong Jun 30, 2025 •

edited

Loading