For the three steps of the Checkout, we are going to be utilizing the same component in all three: the ListProducts component. In the OrderCheckout, and OrderConfirmation components, it will be in a fixed, uneditable state, whereas when it is in the OrderBasket component, the user needs to be able to update quantities and remove items if desired.
As we're going to be working at the Checkout, we need products to exist in the basket array. To save us having to find products and add them to the basket every time we refresh the app, we can ensure there are some products in the basket array by hardcoding an array in the store.
To achieve this, navigate to a few products and add them to your basket. Ensure there is a good selection of products and quantities for testing. Next, open your JavaScript console in the browser and...