Show Errors in Cart Drawer

[danielcliu-ifixit]

Overview

We sometimes can have things error out when trying to update the cart. We would roll back the cart but not change anything, and not tell our user that anything wrong happened. Now we give some visual feedback that there was an error updating the cart in the cart drawer.

QA

When we have an error updating the cart (adding a bad product, product is out of inventory, removing an item and it fails) we now display an error message in the cart drawer. The error message is closable, and also disappears after an alloted time.

Also, the checkout errors also still display as expected.

CC @dhmacs Closes: https://github.com/iFixit/ifixit/issues/51213

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-commerce	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 16, 2024 1:36pm
react-commerce-prod	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 16, 2024 1:36pm

[ghost]

👇 Click on the image for a new way to code review

#### [](https://app.codesee.io/r/reviews?pr=2207&src=https%3A%2F%2Fgithub.com%2FiFixit%2Freact-commerce) #### Legend

[github-actions[bot]]

📦 Next.js Bundle Analysis for @ifixit/commerce-frontend

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[deltuh-vee]

dev_block ✊ I added a product that didn't have enough stock and the error ended up being overlapped by the Cart icon.

Could you also make the error last a little longer? I feel like it goes away really quickly.

[danielcliu-ifixit]

un_dev_block :v:

[deltuh-vee]

QA 🎬

• Errors with cart updates are shown to the user in the cart drawer.
• Checkout errors are still shown.

[danielcliu-ifixit]

un_deploy_block :v: comments were addressed.

[kthaler]

QA 💎 - The following error is now displayed in the cart when the item is out of stock

deploy_block 🦖 - I am not getting an error when the item goes out of stock right before the user adds an item to their cart. Adding the item to the cart understandably doesn't display an error, since the quantity needs some time to update, but I think there should be an error when the user opens their cart again. EX:

https://github.com/iFixit/react-commerce/assets/145375039/81eff943-3a7b-47bf-88fb-dddce884e1b0

[danielcliu-ifixit]

@kthaler i think this would be another issue, as technically we aren't receiving an error from our cart api. I think this is also a very unlikely edge case where we have manually set our inventory db out of sync with shopify's inventory intentionally and I'm unconvinced we should treat this as a case likely to occur in production.

un_deploy_block :v: