Autoremove items from cart if they run out of stock during checkout

[RachL]

⚠️ Please use clockify code #12476 Flower Farms

Description

- As a: shopper
- On page: /XXX/shop-/cart/XXX and /checkout/XXX
- I want to be able to do:

Main scenario: if one of the items i've added to my cart becomes out of stock I see a generic message telling me my cart was updated / I don't need to remove it myself.

More details:

Admin side nothing should change. This is only affecting the shopfront.

A. On the shop page:

Current behavior is displaying this popin:

on this scenario :

• I've added 3 pasta! in my cart
• I've added another product
• The poping tells me that 2 pasta were bought during my shopping, my cart was automatically updated.
• Closing the modal occurs outside the modal or on the top right cross icon

This behavior should be kept. Also, the same popin should be applied to the checkout steps:

B. During checkout:

Currently users are redirected to the cart and need to manually changes quantities or remove if out of stock. We want to change this behavior and apply the same modal as in scenario 1.

No matter which checkout steps we are on (shipment, payment or confirmation).

This means that the cart becomes now automatically updated in this case.

C. On the cart page

TL;DR behavior when using the /cart should not change.

if on the cart page you are asking for a quantity higher than stock, then the cart will already update automatically:

We should keep this behavior.

However if an item becomes unavailable, the user need to delete it manually:

In theory we should change this behavior as well, but this will be dealt in a separate issue if users want it.

On the tech side

Out of stock check happens in a few places :

• app/controllers/enterprises_controller.rb
• app/controllers/spree/orders_controller.rb:
• app/controllers/checkout_controller.rb , via app/controllers/concerns/order_stock_check.rb:

We need to ensure the removal of out sock item in all of these scenarios, and check fees are updated accordingly. We need to display a pop up when the order has been updated due to stock changes, see design above. Related code :
app/assets/javascripts/templates/out_of_stock.html.haml
Ideally we would use a ModalComponent, and get the AngularJs modal to load it via StimulusJs/Turbo to avoid code duplication.

Acceptance Criteria & Tests

1. Check shopfront, cart page and admin pages are working as usual when adding / removing items to cart and getting stock evolution during use of these pages (stock that goes below quantity already in cart or item which runs out of stock)
2. Add items to cart and start checkout (select pick-up option)
3. In a different session reduce stock for one item
   4.Check the modal correctly appears when trying to go further and display the item that has changed. Order total should change as well.
4. Do step 3 and 4 with several items instead of just one (check the list is correct)
5. Do step 3 and 4 for payment and order confirmation page as well.
6. check payment is capture with the correct total amount when using stripe or paypal

Previous discussions:

#12918

[mkllnk]

I now remember why we ended up with the current behaviour. We need a way to remember which items were removed so that we can display it to the user. And we want the user to confirm the change and review the result. When it was implemented, we didn't have a multi-step checkout though and redirecting to the cart was logical. There they could remove items and see the resulting cart as a whole.

Automatically removing items from the cart has some disadvantages. At the point of removal, we can generate a message that lists the removed items but after that, we have no knowledge of the removed items. If the user dismisses the modal too quickly, they can't get it back. And that may just be an accidental reload of the page. We assume that the user acknowledged it but we can't be sure.

I think that the fundamental UX problem is that we want the user to acknowledge the change. So ideally we would remove the items when the user confirms the modal. But if you reload the page or you come back later, you see the same modal again because the items haven't been removed yet.

@rioug, do you think that this would fit into the estimated time?

[RachL]

@mkllnk I think you are right that the main problem we want to solve is to tell the user something has changed. However I don't think that the content of the change is that important. It's nice to have, but if it's easier to have a message that is more vague, then I think we can live with it.