‫With our cart now in place and nicely working,
‫it's time to actually use the cart data
‫to submit a new order.
‫So thankfully for us that is pretty easy now
‫'cause all we have to do is to go to that component
‫and then select the entire cart
‫and then use that to submit the order,
‫because the rest of the logic
‫has already been written before.
‫So here in the order feature, let's come to create order.
‫And so right now we are always submitting our orders
‫using this fake cart object.
‫So this right here.
‫But now of course, let's get rid of that.
‫So let's use useSelector here again.
‫So just make sure that it has been imported,
‫and yeah, there it is.
‫And so I think
‫that here we already have a selector in place.
‫Yeah, so here we have getCart and so let's use that.
‫So getCart just like this.
‫And now let's reload this,
‫and then you see that we get some kind of error here.
‫So "Cannot read properties of undefined".
‫So let's see what we have here.
‫Well, there's some problem here in getCart, apparently,
‫but, well, it shouldn't.
‫So everything looks correct.
‫And we actually already used this in some other place
‫where it worked just fine.
‫Let's just try to log this here to the console.
‫It's always a nice trick.
‫Let's reload here.
‫And we get exactly the same problem.
‫Let's just see if we have our log somewhere here.
‫But as they look at my code again,
‫actually here I'm noticing something.
‫So here we should of course not call this selector function.
‫So Redux is the one who will call this, not us.
‫And so with this we are good again.
‫Now here we have some problem
‫which is that the cart is right now empty.
‫And so in this situation when there is no cart,
‫we shouldn't be able to submit the order, right?
‫And so before we do anything else here,
‫let's check for that empty cart.
‫So if there is no cart dot length,
‫then let's immediately return that empty cart component
‫that we already used in our cart page.
‫So let's grab that.
‫So import EmptyCart from,
‫let's move up, then into the cart and EmptyCart.
‫Nice.
‫And so then this asks us to go back to the menu,
‫add some pizza from there,
‫and then now that works.
‫So now we have something in our cart and are ready to order.
‫So let's get rid of this fake cart.
‫And so now, yeah, as I was saying,
‫we are ready to order indeed.
‫So let's just recap quickly what we did here before,
‫which was to basically pass that cart here
‫as a hidden field.
‫So we converted this cart to a string,
‫and assign that to the value of this hidden input field.
‫And the reason why we had to do
‫that is because we are not able to get the data
‫from Redux here in this action.
‫I mean, there would actually be a way around this,
‫but like this, even though it's a bit of a hack and a trick,
‫this is actually a bit cleaner than doing that now, right.
‫And then here, let's try to finally submit an order,
‫well, actually, here we need to get back this code.
‫So the code that actually submits the order
‫in the first place.
‫And then here, let's add some phone number.
‫Here's some random address, which is not really correct
‫of course, but now let's see if this works.
‫So let's place our order.
‫Let's wait for it.
‫And there it is.
‫So now our application is basically working.
‫So we have the three margaritas
‫and the one romana that we added to the cart.
‫And so they are now really part
‫of this brand new order with this id right there.
‫Here we just have some problem with the key prop.
‫So let's come back here.
‫So this is probably just called "pizzaId".
‫But that's not really important.
‫Nice.
‫Now you might have noticed a small problem
‫which is that we still have the pizzas in our cart.
‫So that shouldn't be happening, right?
‫So usually after you place an order,
‫then your cart gets automatically emptied out.
‫And so let's implement that here as well,
‫even though it is not going to be super easy.
‫So we will have to use some kind of hack here again
‫because clearly the dispatching of the clear cart action
‫will need to happen right here inside this form action.
‫However, for dispatching,
‫we need to call the use dispatch hook,
‫which is only available in components
‫and not in a regular function like this one.
‫So the hack that we can use
‫and which we should really, really not overuse
‫is to directly import the store object here
‫into this function and then dispatch directly on that store.
‫So let me show you what I mean by that.
‫So here I will just try to import the store,
‫just not really anywhere here.
‫So let's just do that manually.
‫So import the store from and further up,
‫and then here we have store.js.
‫So this is our store.
‫And here on the store object,
‫we can just call dispatch directly.
‫And so here we can now then use
‫that clearCart action creator.
‫Alright, so again, a bit of a hacky approach
‫but this is what we have to do in order to make it work.
‫But really don't overuse this technique
‫because it deactivates a couple of performance optimizations
‫of Redux on this page.
‫So do not overuse.
‫So let's try this out now.
‫So let's clear our cart actually manually,
‫and then let's try some different pizzas here.
‫This time,
‫open the cart,
‫some valid phone number here, then some address.
‫Let's give it priority as well.
‫And let's try to place our order,
‫and there we go.
‫And as you see now, our cart is actually empty.
‫Great.
‫And yeah, it is nowhere to be seen here.
‫And indeed, yeah, the pizzas are no longer in the cart.
‫But now finally, for one final small feature,
‫let me add a pizza again to the cart
‫because now here I want to show the final price right here
‫in this button.
‫Now right, so that shouldn't be too hard,
‫because we already have all the things
‫that we need for that.
‫So here we have a lot of code already
‫but let's just keep going for this final feature.
‫So the total cart price is given from useSelector,
‫and then there we have
‫the getTotalCartPrice selector function.
‫So this is the total cart price right now
‫but if the user chooses a priority,
‫then that will actually change.
‫So what we want to display in the end is the total price,
‫which will be the total cart price, plus the priority price,
‫which doesn't exist yet, but which we can create right here.
‫So priorityPrice, and for now,
‫let's just set it to zero here.
‫So I want to show this total price right here in the button.
‫So we can say Order Now, where is that?
‫Right here.
‫So order now for, and then the total price.
‫And then we also need to format the currency here.
‫So format currency,
‫at least I think that's what it is called.
‫Let's see.
‫Yeah, that's the name.
‫So apparently we need to import this manually,
‫which I really don't like.
‫So import formatCurrency from, let's go up, up again,
‫and then into the helpers or the utils,
‫and then helpers dot js.
‫This is probably actually a named export.
‫And yeah, there we go.
‫Here we have the 45 euros, which is what we have down there.
‫But now what about the priority price?
‫So how do we calculate this?
‫So basically whenever we click here,
‫we then want to update the price
‫and we want to update it by exactly 20%
‫of this total cart price,
‫'cause from the list of requirements,
‫that is the price of making the order priority.
‫So if we want to change the UI whenever this here changes,
‫so whenever we click here,
‫that means that we need some state, right?
‫So basically we need a reactive value.
‫And so that's why here we actually already have that.
‫Let me place that at the very top right here.
‫And then let's also use this here.
‫So now we are making
‫this checkbox here a controlled element again.
‫Okay.
‫And so then we can use that reactive value,
‫so that piece of state, here to compute the priority price.
‫So in case we are with priority,
‫then the price should be the total cart price times 0.2,
‫and otherwise just zero.
‫Yeah. Nice.
‫So let's input a phone number, then this, placing our order,
‫and with this we are done.
‫Or actually, we are not really done,
‫because we did select priority, but it is not here.
‫So something strange happened,
‫but I think I know the reason.
‫I think it is because we changed now the value.
‫So here in this checkbox,
‫now the value will no longer be on and off.
‫So where is that?
‫Here.
‫So again here, the value will now no longer be
‫on like we had here earlier.
‫So here we were checking if that value is on,
‫but instead now it will be true.
‫So true as a string. All right.
‫So no longer just on, but really true or false.
‫And so here we then want to give this order priority
‫in case that the data that we receive is equal
‫to the string of "true".
‫So let's try that again.
‫So I said initially that this was gonna be a short
‫and easy video, but well, there's always a lot to do.
‫So let's try again.
‫Let's give ourselves priority again.
‫Well, let's wait for it.
‫Nice. So now that worked.
‫And so now indeed we are finished,
‫at least with what we set out to do in this video
‫because the list of requirements
‫of this app still has, I think,
‫one or two things that we should implement.
‫And so let's get to that for the rest of this section.