@W-13666502 - Removed offline products in baskets

[alexvuong]

Description

This PR fixes an issue when a customer who has offline (or deleted) products in their basket or an existing order will have poor experience in cart and checkout. Errors are emitted to console in all cases.

Solution

Since basket does not have any property to indicate a productItem is offline. To solve this, after getting product details for basket's product items to populate onto the UI, we compare the number of items in basket and the number of returned data from getProducts. If a product is offline, the getProducts will not return any data related to that product. Hence, we know unavailable product ids, and remove them from basket before allowing users to interact with the cart and proceed to checkout.
See demo video here: https://www.loom.com/share/af80b139be1d4f4ab38af60340d97182?sid=698a44c8-60bb-4621-b0aa-60b446064a5f

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 this branch

• Add items to cart

• Go to business manager, find these items and mark them as offline

• Navigate to cart page, you should expect to see a prompt to remove those items

• Click Remove items

• Offline products are removed completely from cart

• For wishlist page, do the same process

• Go to order page, observe that the unavailable products are still shown in the detail page but has a tag saying product unavailable next to the title, and it is no longer a link directing to a PDP
  

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)

[bendvc]

@alexvuong Did you bring in Trevor to get some UX advice on this? We might want to do that to make sure we have the best experience possible.

[vmarta]

The ticket also mentioned another scenario: the order history. Currently, if an order is made and it contains an offline product, that product will not show up.

I believe the expectation here is to still render the offline product in the product history. Somehow we're able to retrieve the data from another source?

[alexvuong]

@vmarta I am not sure how an order with a offline product can be successful checkout. I tried and got an error during checkout. Hence there should be no order. 🤔

Also, when a product is marked a offline in BM. That product will not be present in the product details via getProducts. I don't think we have any source to retrieve that information.

[vmarta]

I am not sure how an order with a offline product can be successful checkout. I tried and got an error during checkout. Hence there should be no order.

@alexvuong the scenario that I'm thinking of (and described in the ticket too) is for an existing order that was successful. At the time of order, the product was still online. But then afterwards, it becomes offline.

[vmarta]

On the Cart page, if the only item in the cart is an offline product, then I'm not able to see the prompt to remove it. This is what I saw instead:

• no prompt
• and some errors in the browser's console

I was using a guest shopper and added the Men's Yarmouth Gloves (TG786M) into the cart.

[vmarta]

On the Checkout page, if I skip the Cart and go straight to Checkout, what are the shoppers supposed to see with the offline product?

For me, I saw that there is no prompt on Checkout to remove this offline product.

[alexvuong]

I am not sure how an order with a offline product can be successful checkout. I tried and got an error during checkout. Hence there should be no order.

@alexvuong the scenario that I'm thinking of (and described in the ticket too) is for an existing order that was successful. At the time of order, the product was still online. But then afterwards, it becomes offline.

gotcha, one way we can do this is to show whatever available data from the order detail in this case

[alexvuong]

@vmarta All the comments has been addressed. I've made changes for wishlist and order details to make sure we handle unavailable products. In summary:

• For cart and wishlist page, we will prompt users to remove these items in initial load
• For order history detail page, we will show all products from order details. For unavailable products, it no longer has a thumbnail and has a tag next its title to indicate the product unavailable. Users can not click to navigate to PDP. The rest of behavior remained the same for available ones.

[vmarta]

@alexvuong how about the Checkout page? There is no prompt on Checkout to remove the offline product. Last time on Slack DMs we discussed this scenario.

[alexvuong]

@vmarta Checkout page now will prompt users to remove unavailable products. Please have another review when available. Thanks
About wishlist page, I've decided to go the path we do with cart and checkout since there is no information from product list we can use to displau, not even a product name. See photo below

[vmarta]

Thanks for addressing the PR feedback!