@W-15654904Showing strikethrough price on PLP #1760

alexvuong · 2024-04-24T00:52:35Z

Description

This PR implemented strikethrough price for products on PLP if any product has a listing sale price

NOTE: You may notice the price may/ may not display correctly in Recommendation section/Recently View. It will be fix later in a different ticket, please ignore.

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

Checkout the code
npm ci at root
start retail app
Confirm price display for different type of products

* Standard product/Bundle: since there are no variations always show the exact list price, and a strikethrough price (if promo or price-book adjustment) and callout 
    * No swatches
    * No range of price
    * Show whatever is the LOWER sale price


* Variant products: 
    * The initially loaded product tile image should be the representedProduct
    * We will display swatches for color variants of products with that variant type
        * Customers should be able to configure (constants or config? or just override?) the variant facet used to populate the swatches because color is just one possible variant type employed by users
    * On initial load:
        * Display a price range “From X Y” inclusive of all the variants of that product
            * X is the lowest variant price (including price book sale adjustments & promotional discounts)
            * Y is that given lowest priced variant’s list price
        * When a filter is applied or a variant is selected
            * If we have a single variant show the exact price
            * If we have multiple variants show a range
        * This should be abstracted in such a way that logic should be overridable
    * We will show the callout message for the promotionId that provides the greatest possible, non-conditional discount for the shown variant
    * Product Tile should link the users to the selected variant from PLP to PDP
* Product sets: 
    * The initially loaded product tile will be the master product
    * We will NOT EVER display a swatch
    * Show From X where X is the lowest price among the set children
    * We will show the callout message for the promotionId that provides the greatest possible, non-conditional discount

Master product on first load
Bundle
Standard
Product set

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)

alexvuong · 2024-04-24T00:53:01Z

packages/template-retail-react-app/app/components/_app/index.jsx

@@ -16,7 +16,6 @@ import {useQuery} from '@tanstack/react-query'
 import {
    useAccessToken,
    useCategory,
-    useCustomerBaskets,


removed unused variable

packages/template-retail-react-app/app/components/display-price/index.jsx

alexvuong · 2024-04-24T00:55:14Z

packages/template-retail-react-app/app/hooks/use-current-basket.test.js

 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import {useCustomerBaskets} from '@salesforce/commerce-sdk-react'
-import {
-    mockCustomerBaskets,
-    mockEmptyBasket


removed unused variable as lint complains

alexvuong · 2024-04-24T00:55:27Z

packages/template-retail-react-app/app/pages/checkout/index.jsx

-    useShopperOrdersMutation,
-    useShopperBasketsMutation
-} from '@salesforce/commerce-sdk-react'
+import {useShopperOrdersMutation, useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'


removed unused variables as lint complains

packages/template-retail-react-app/app/pages/home/index.jsx

joeluong-sfcc

I think we should still consider merging this into a feature branch that will then later be merged into the v3/template-retail-react-app branch. It'll be easier to keep track of the product tile revamp changes as we continue our feature work

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

packages/template-retail-react-app/app/pages/product-list/index.jsx

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

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

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

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

packages/template-retail-react-app/app/components/display-price/index.jsx

bendvc · 2024-05-13T23:14:24Z

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

+/**
+ * Find the smallest value by key from a given array
+ * @param arr
+ * @param key
+ */
+export const getSmallestValByProperty = (arr, key) => {
+    if (!arr || !arr.length) return undefined
+    if (!key) {
+        throw new Error('Please specify a key.')
+    }
+    const vals = arr
+        .map((item) => item[key])
+        .filter(Boolean)
+        .filter(Number)
+    return vals.length ? Math.min(...vals) : undefined
+}


I think it might be a better idea to inline this as a private function in your product utils. I don't think it's usefulness is going to be that high and we'd but have to support it forever as it's a public api

Sounds good, I have moved the function into product-utils.js

vmarta · 2024-05-14T18:57:49Z

packages/template-retail-react-app/app/components/display-price/index.jsx

+    if (isASet) {
+        return renderCurrentPrice(true)
+    }
+
+    if (isMaster) {
+        return renderPriceSet(isRange)
+    }
+
+    return <Box>{renderPriceSet(false)}</Box>


I like this result. The code feels easier to digest.

packages/template-retail-react-app/app/components/display-price/index.jsx

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

strikethrough for PLP

f66b61a

alexvuong requested a review from a team as a code owner April 24, 2024 00:52

alexvuong commented Apr 24, 2024

View reviewed changes

packages/template-retail-react-app/app/components/display-price/index.jsx Outdated Show resolved Hide resolved

alexvuong commented Apr 24, 2024

View reviewed changes

alexvuong mentioned this pull request Apr 24, 2024

@W-13974739 Showing strikethrough price on PLP #1754

Closed

12 tasks

add param for getProducts in useEinstein

50b3bce

alexvuong commented Apr 24, 2024

View reviewed changes

packages/template-retail-react-app/app/pages/home/index.jsx Show resolved Hide resolved

joeluong-sfcc approved these changes Apr 24, 2024

View reviewed changes

PR feedback

249785e

bendvc reviewed Apr 25, 2024

View reviewed changes

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

alexvuong added 3 commits April 25, 2024 16:01

Refactoring getDisplayPrice

ceddadf

remove unused variables

56f0736

remove unvalid param

ae1da47

alexvuong commented Apr 25, 2024

View reviewed changes

packages/template-retail-react-app/app/pages/product-list/index.jsx Outdated Show resolved Hide resolved

bendvc reviewed Apr 25, 2024

View reviewed changes

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

bendvc reviewed Apr 25, 2024

View reviewed changes

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

alexvuong changed the base branch from v3/template-retail-react-app to v3/product-tile-revamp April 25, 2024 23:52

alexvuong added 5 commits April 26, 2024 15:40

take closest tiered price into account

5fc66c8

fix test

b2bbabb

put back recommendation section

87399dc

changing label

4672407

fix bundle size

2ae213c

bendvc reviewed Apr 29, 2024

View reviewed changes

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

bendvc reviewed Apr 29, 2024

View reviewed changes

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

fix tierPrices filter logic

67892d7

alexvuong commented Apr 29, 2024

View reviewed changes

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

alexvuong added 2 commits April 29, 2024 11:23

fix tierPrices filter logic

74df5ab

fix tierPrices filter logic

3c62c54

alexvuong commented May 13, 2024

View reviewed changes

packages/template-retail-react-app/app/components/display-price/index.jsx Outdated Show resolved Hide resolved

alexvuong commented May 13, 2024

View reviewed changes

packages/template-retail-react-app/app/components/display-price/index.jsx Show resolved Hide resolved

alexvuong requested a review from vmarta May 13, 2024 19:37

alexvuong added 2 commits May 13, 2024 12:39

fix tests naming

04a4ce8

fiz translations

9045fa4

vmarta reviewed May 13, 2024

View reviewed changes

bendvc reviewed May 13, 2024

View reviewed changes

alexvuong added 6 commits May 13, 2024 16:50

Pr feedback

9f2150f

fix template

47552a7

tweak proptype

9882e1a

let bold font for PLP

06f8202

optimizing display price logic

063a7f5

edit jsx

59b33ab

vmarta reviewed May 14, 2024

View reviewed changes

alexvuong added 4 commits May 14, 2024 13:09

PR feedback

8dac001

lint

5137079

fix test

c866572

build translations

8dc7e96

vmarta approved these changes May 14, 2024

View reviewed changes

vmarta reviewed May 15, 2024

View reviewed changes

packages/template-retail-react-app/app/components/display-price/index.jsx Show resolved Hide resolved

vmarta mentioned this pull request May 15, 2024

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

Merged

12 tasks

bendvc reviewed May 15, 2024

View reviewed changes

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

bendvc approved these changes May 15, 2024

View reviewed changes

PR feedback

d5c94ff

vmarta approved these changes May 15, 2024

View reviewed changes

separate pricing components into its own files

5a9a04a

bendvc approved these changes May 15, 2024

View reviewed changes

alexvuong added 2 commits May 15, 2024 16:28

lint

e43dccb

fix flaky test

f872153

alexvuong merged commit 92ffd12 into v3/product-tile-revamp May 16, 2024
28 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-15654904Showing strikethrough price on PLP #1760

@W-15654904Showing strikethrough price on PLP #1760

alexvuong commented Apr 24, 2024 •

edited

alexvuong Apr 24, 2024

alexvuong Apr 24, 2024

alexvuong Apr 24, 2024

joeluong-sfcc left a comment

bendvc May 13, 2024

alexvuong May 14, 2024

vmarta May 14, 2024

@W-15654904Showing strikethrough price on PLP #1760

@W-15654904Showing strikethrough price on PLP #1760

Conversation

alexvuong commented Apr 24, 2024 • edited

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

alexvuong Apr 24, 2024

Choose a reason for hiding this comment

alexvuong Apr 24, 2024

Choose a reason for hiding this comment

alexvuong Apr 24, 2024

Choose a reason for hiding this comment

joeluong-sfcc left a comment

Choose a reason for hiding this comment

bendvc May 13, 2024

Choose a reason for hiding this comment

alexvuong May 14, 2024

Choose a reason for hiding this comment

vmarta May 14, 2024

Choose a reason for hiding this comment

alexvuong commented Apr 24, 2024 •

edited