W-14308527 Pricing display on cart, checkout, wishlist pages

[alexvuong]

Description

Pricing display on cart checkout wishlist pages due to product tile revampe

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

• Use DisplayPrice component in item-variant component
• Allow DisplayPrice to take quantity into account

How to Test-Drive This PR

• Checkout code
• Run retail app
• Go to PDP, add a product
• Confirm that pricing in AddToCart Modal is correct
• Confirm that cart page is showing pricing correctly with strikethrough price
• Add an item to wishlist
• Confirm that pricing is displaying according to the quantity in wishlist page

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]

We pushed history to be a master product, we should mock the data accordingly. the productsResponse.data[0] we used previously was a variant product, not a master one. Therefore, although the tests passed, but it caused a lot of react warning errors during the tests. This would fix these errors

[vmarta]

For this particular product, I'm not seeing the strikethrough price, even though the API response contains the list price in there.

[vmarta]

In my previous screenshot, now we're showing the unit price, even when the quantity is 1. Originally we show the unit price only when the quantity is more than 1.

What is the supposed to be the correct behaviour?

[vmarta]

Checkout is currently broken. Entering the Checkout page from Cart shows me this error:

[alexvuong]

For this particular product, I'm not seeing the strikethrough price, even though the API response contains the list price in there.

@vmarta For the price here, we are using basket pricing instead of getProduct pricing since basket pricing may include different promotion/discount on basket level. For this particular product, it does not seem to return the list price of the products at all

IMO, we should either use basket pricing OR product pricing to display price (via getPriceData util), we should not attempt mix these data together since it is a complicated to understand that calculation for basket pricing and we may do it incorrectly. I don't think it is a big deal to miss the strikethrough price here since it is mostly informative, the price that shopper has to pay is correct.

[alexvuong]

In my previous screenshot, now we're showing the unit price, even when the quantity is 1. Originally we show the unit price only when the quantity is more than 1.

What is the supposed to be the correct behaviour?

Good catch, I've fixed it to match the original behavior.

[alexvuong]

Checkout is currently broken. Entering the Checkout page from Cart shows me this error:

This is fixed. Thanks for catching that

[bendvc]

In the above picture am I supposed to see strike-through pricing as I did on the PDP and add-to-cart modal?

[alexvuong]

In the above picture am I supposed to see strike-through pricing as I did on the PDP and add-to-cart modal?

Please see this comment #1796 (comment)