[Product Tile] Promotion callout message (@W-13974753@) #1786

vmarta · 2024-05-15T00:20:12Z

This PR implements the default behaviour for promotion callout. It relies on Alex's display-price work in her PR #1760 .

If the rendered price is a promotional price, we'll also render that promo's callout message in the ProductTile. Otherwise, if the variant has promotions, we'll show the callout from the very first promotion.

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

Navigate to this PLP: /search?q=roll%20sleeve%20blouse
Verify the promo callout message to be "10$ Off roll sleeve blouse". 34.16 is a promotional price, and we're rendering the callout message of that promotion.

Also, try other kinds of products:

without promotions
no variants (for the first 3 results)
product set

Also, try other pages:

homepage
PDP (and its recommended products)

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)

… getPriceData

unandyala · 2024-05-21T13:54:25Z

packages/template-retail-react-app/app/components/product-tile/promo-callout.jsx

+
+    // NOTE: API inconsistency - with getProduct call, a variant does not have productPromotions
+    const promos = data.productPromotions ?? product.productPromotions ?? []
+    const promo = promos.find((promo) => promo.promotionalPrice === minPrice) ?? promos[0]


This seem to be repetitive code/execution. Can we return the applicable promotion as well in the findLowestPrice(product) method?

alexvuong · 2024-05-21T17:38:06Z

packages/template-retail-react-app/app/utils/product-utils.js

@@ -116,6 +91,28 @@ export const getPriceData = (product, opts = {}) => {
    }
 }

+export const findLowestPrice = (product) => {


Can you please add some jsx comment and unit tests for this function?

packages/template-retail-react-app/app/utils/product-utils.js

unandyala · 2024-05-22T13:24:46Z

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

@@ -82,7 +83,7 @@ const ProductTile = (props) => {
    //TODO variants needs to be filter according to selectedAttribute value
    const variants = product?.variants

-    const priceData = getPriceData({...product, variants})
+    const priceData = useMemo(() => getPriceData({...product, variants}), [product, variants])


Question - Do we need variants as a dependency along with product to memorize as variants is a property with in product ?

The variants is there because the TODO comment made me to anticipate variants to be updated in a later PR. And I don't know what it will look like later.

@vmarta Can you try to update your branch with the feature branch? I believe we have some new code merged in that may look different from that you have on your current branch for the variant TODO above

packages/template-retail-react-app/app/utils/product-utils.js

alexvuong · 2024-05-23T19:56:26Z

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

@@ -168,6 +172,12 @@ const ProductTile = (props) => {
        return labelsMap
    }, [product, badgeDetails])

+    const shouldShowPromoCallout = (product) => {


Should we move this function outside of the Component to avoid it being re-defined whenever the tile is re-render?

Agree. We can make it as a helper function (hasPromotions(product)) in the product utils file

unandyala · 2024-05-23T20:23:51Z

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

@@ -370,3 +380,9 @@ ProductTile.propTypes = {
 }

 export default ProductTile
+
+const shouldShowPromoCallout = (productWithFilteredVariants) => {


minor: make it a helper function hasPromotions(product) in product-utils?

I don't want to expose this particular function more globally. For example, due to the inconsistent API (productSearch vs getProduct), I should not be calling it on the Product Details page. So I'd rather constrain this function within ProductTile only.

alexvuong · 2024-05-23T20:23:55Z

packages/template-retail-react-app/app/utils/product-utils.js

-        .filter(Boolean)
-        .filter(Number)
-    return vals.length ? Math.min(...vals) : undefined
+    const filtered = arr.filter((item) => Boolean(item[key])).filter((item) => Number(item[key]))


Nit: shouldn't filter by Number() will rule out falsy value too? 🤔

In this case, I was following what's been done before: first filter with Boolean and then by Number.

ah gotcha, okay confirming that we don't need to filter by Boolean here since filter Number will already rule out falsy values. Checked in browser console.

const test = [null, undefined, 1, 2, 5] test.filter(Number) => [1, 2, 5]

@alexvuong thanks for confirming it. There's something else, however. It was possible to ignore 0 in the calculation.

Now in the latest commit, if 0 is one of the values, it will be included.

alexvuong · 2024-05-23T20:25:14Z

packages/template-retail-react-app/app/utils/product-utils.js

- * @param key
+ * @returns {Array} an array of such smallest value and the item containing this value
+ * @example
+ * const [value, itemContainingValue] = getSmallestValByProperty(array, key)
 */
 const getSmallestValByProperty = (arr, key) => {


Nice touch on this util 👍

alexvuong · 2024-05-23T20:38:42Z

packages/template-retail-react-app/app/components/product-tile/promo-callout.mock.js

+    // a hit from productSearch call
+    rollSleeveBlouse: {
+        currency: 'GBP',
+        hitType: 'master',


Do you want to remove any data that is not necessary for the promo call out test to reduce the file size? or you can reuse any data from app/mocks/product-search-hit-data.js?

Nah, we don't need to worry about the weight of the test files :) They will not be included in the bundle, right?

I didn't want to worry about consolidating the mocks too. What if I have a particular product that does not exist in app/mocks/product-search-hit-data.js ?

alexvuong

Minor comments, but LGTM overall

alexvuong and others added 30 commits April 23, 2024 17:51

strikethrough for PLP

f66b61a

add param for getProducts in useEinstein

50b3bce

PR feedback

249785e

Refactoring getDisplayPrice

ceddadf

remove unused variables

56f0736

remove unvalid param

ae1da47

take closest tiered price into account

5fc66c8

fix test

b2bbabb

put back recommendation section

87399dc

changing label

4672407

fix bundle size

2ae213c

fix tierPrices filter logic

67892d7

fix tierPrices filter logic

74df5ab

fix tierPrices filter logic

3c62c54

fix tierPrices filter logic

5025ed2

fix lint

1753373

add more cases for display price util

913110c

add more cases for display price util

5392f7e

fix logic in getDisplayPrice

809ca51

PR feedback

90bd3d0

PR feedback

906b521

fix tests

7a36794

Apply formattedmessage to display price, refactor price info logic in…

87fbc8b

… getPriceData

remove console

cf31976

guard the values

2afea83

fix tests

165c2db

adjust price display

cf51887

fix tests

7600f95

Promo callout: rough attempt at implementing it

364c685

Allow customization at both page and component levels

bb345e8

Add some test for the PDP

a702fbc

vmarta marked this pull request as ready for review May 17, 2024 20:49

vmarta requested a review from a team as a code owner May 17, 2024 20:49

unandyala reviewed May 21, 2024

View reviewed changes

alexvuong reviewed May 21, 2024

View reviewed changes

packages/template-retail-react-app/app/utils/product-utils.js Show resolved Hide resolved

alexvuong reviewed May 21, 2024

View reviewed changes

packages/template-retail-react-app/app/utils/product-utils.js Show resolved Hide resolved

vmarta added 2 commits May 21, 2024 17:52

findLowestPrice now also returns the applicable promotion object

724c357

Add jsdoc comments

50f7e14

unandyala reviewed May 22, 2024

View reviewed changes

vmarta added 2 commits May 22, 2024 16:43

Add more tests

87b1ec9

Merge branch 'v3/product-tile-revamp' into vm/promo-callout

c756748

vmarta changed the base branch from plp-strikethrough-price to v3/product-tile-revamp May 23, 2024 00:17

vmarta added 5 commits May 22, 2024 18:04

Consider swatch selection: first attempt

123eb59

Allow for null/undefined

3d67e7a

On swatch selection, show/hide the promo callout accordingly

c96fe26

Memoize findLowestPrice call

05cb27a

Simplify code block

338379f

alexvuong reviewed May 23, 2024

View reviewed changes

Move to outside the component

dad4482

unandyala approved these changes May 23, 2024

View reviewed changes

unandyala reviewed May 23, 2024

View reviewed changes

alexvuong reviewed May 23, 2024

View reviewed changes

alexvuong approved these changes May 23, 2024

View reviewed changes

Make sure to include 0 in the calculation

6982ca9

vmarta merged commit 3a93df0 into v3/product-tile-revamp May 23, 2024
28 checks passed

vmarta deleted the vm/promo-callout branch May 23, 2024 23:32

vmarta mentioned this pull request May 30, 2024

[Product Tile] Promo callout on the Product Details page (@W-15784291@) #1804

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Product Tile] Promotion callout message (@W-13974753@) #1786

[Product Tile] Promotion callout message (@W-13974753@) #1786

vmarta commented May 15, 2024 •

edited

Loading

unandyala May 21, 2024

alexvuong May 21, 2024

unandyala May 22, 2024

vmarta May 22, 2024

alexvuong May 22, 2024

alexvuong May 23, 2024

unandyala May 23, 2024

unandyala May 23, 2024

vmarta May 23, 2024

alexvuong May 23, 2024

vmarta May 23, 2024

alexvuong May 23, 2024

vmarta May 23, 2024 •

edited

Loading

alexvuong May 23, 2024

alexvuong May 23, 2024

vmarta May 23, 2024

alexvuong left a comment

[Product Tile] Promotion callout message (@W-13974753@) #1786

[Product Tile] Promotion callout message (@W-13974753@) #1786

Conversation

vmarta commented May 15, 2024 • edited Loading

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vmarta May 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexvuong left a comment

Choose a reason for hiding this comment

vmarta commented May 15, 2024 •

edited

Loading

vmarta May 23, 2024 •

edited

Loading