Okay.
So in the last video we set up our basically our state for the placeholder to create a new order.
And we also started the place order screen, which right now just looks like this.
So in this video I want to finish up the UI here and also have the ability to place the order.
Now, the way this system works is we place the order first and then we go to payment.
And then after payment, the Is paid flag is updated to true.
And then if we want to set it to delivered, we can go in as an admin and set it to delivered.
So that's the kind of the workflow of this application.
Now we're going to have to let's see, we're going to bring in a couple of things.
We are going to need use dispatch.
And.
As far we're going to need to react toast to FY as well.
So let's.
Import toast.
Import toast from React.
Toast.
Defy.
And then I'm also going to want the loader component.
Let's import end message.
So we'll bring that in and let's import.
Loader.
As well.
And what else?
We need the mutation.
Remember the the use create order mutation.
So let's import.
Use create order mutation that's going to be from.
And that's not right.
That's going to be from let's see, where are we?
We're in components.
So we want to go up one level into slices and then we want the orders API slice and the clear cart items
that we added.
We want to bring that in, let's say clear.
Cart items.
And let's see, that's going to come from the cart slice.
So dot, dot slash slices.
Slash cart, slice.
And then let's go down here into where we have our columns and we're going to start with the first column
here.
So let's get rid of that and we're going to have a list group.
So we'll give that a variant of flush.
And then inside the list group, we'll have a list group item.
Let's close that up.
So list group item and in the list group item we'll have an H two.
Let's say we'll just say shipping.
And underneath that we're going to have paragraph.
And in here we'll have a label of address and I want the just the full address.
So remember this cart dot shipping address has an address field.
It also has a city field.
So I want to do that, the city.
And then I also want the postal code.
So let's go after that and let's add the postal code.
And then I guess, yeah, we'll put a comma and then we'll have the country.
So all that stuff should be in the state.
In fact, let's save it.
And there we go.
So we have our address printed out there.
Okay, so that's the first list group item.
Let's go under that one and let's create another list group item.
So let's group item and this is going to be the payment method.
So for that, let's do a strong tag and we'll say method.
Colon.
And then underneath that I'm going to put cart dot payment method, which should be PayPal.
So under that list, group item, let's create another one.
And let's say for this item, this is going to be just an our order items which is in cart dot order
items and it's an array.
So we're going to have to map through it.
But let's make sure that there are some there.
So we'll say if.
If they are there.
Then do something or show something.
If not, then show something else.
Let's see.
We need our.
Yeah.
Now in this first one.
We're going to have a message.
So we're saying if it's equal to zero, then we'll have a message using our message component that just
says your cart is empty.
Else So in this, then we're going to want to have a list group here.
And inside that list group, we're going to loop through all of our items and output each one.
So let's.
Say cart dot order.
Items.
Dot map.
And we're going to pass in here.
Set that to parentheses and we're going to say for each one, call it item and we also want to get the
index and then let's output a list group item with a key.
And let's end that list group item.
So for each each order item, we'll have a list group item, and inside that we'll have a row.
And inside that, let's do a column.
We'll do a one.
Column on medium screens, and this is going to be the image.
So we'll say image and then the source is going to be the item image.
So item dot image, and then let's do the alt.
The ourt will do item name and we're going to do fluid and rounded.
So we should be able to at least see.
Can't read properties of undefined reading map.
Let's see.
What did I do here?
So, cart order items.
Oh, I'm sorry.
It's not order items.
It's.
It's carte items, right?
Hold on a second.
I'm having kind of a brain fart here.
Yeah.
Cart items, not order items.
There we go.
All right.
So it's showing the image.
Now we want to create another column after that.
So under this one, let's do call and let's say MD for this one we'll do actually, let's not we don't
even need.
We can just do call for this.
And this is going to be the.
Uh, what is this going to be?
The the.
It's going to be the product name or the item name, but we're going to have a link around it.
So let's say link to the products or the individual product, have the item name in there.
Okay, so there we go.
And that will link to the specific product.
Then underneath that column, we're going to have another column that's for wide.
And that's going to be.
That's going to be the price.
So what we're going to do is show the item.
The item quantity.
So item dot qty and we want to multiply or we want to actually multiply here.
We're just going to show that we're multiplying just to show the user.
So we'll say whatever the quantity x, whatever the price and then equals the actual item quantity times
the price.
All right, if that makes sense.
Let's see.
We need to just.
Yeah, let's do that so we can see.
One times 49 to 99 is 49.99.
And we can add some other items just to kind of.
See what it what it looks like.
So we'll do two of these cameras.
And now if I proceed to checkout, I go through shipping my payment and there we go.
So we get two times the item price and then the total of that item.
All right.
And yeah, that should do it for for that side, for that column.
Now we want to do this over here.
So where we have our call for let's get rid of this text and we're going to have a card.
I'm going to wrap this all in a card.
And inside that card we're going to have a list group.
So let's say list group.
And I'm going to give it a variant of flush.
And we'll close that list group.
Don't know why that's not working.
Okay.
And then inside here, we'll have our list group item.
Close the list Group item.
And this is going to be just a heading.
So the order summary, then we'll do another list group item.
So let's group item.
Okay.
And then in here, I'm going to put a row.
And we'll close that row.
And this is going to be it's going to have a call with the heading of items.
Yeah, I guess we'll keep the colon.
And then another call with.
So another call with the the item's price.
So I'm going to put a money sign here and then we can get the cart dot.
Items price.
So if we take a look, we see order summary and then the items and we have the total of the items.
Okay.
Well, not the total.
It's just the item price.
We're also going to add the tax and shipping and then the the grand total of things.
All right.
So I'm going to copy this list group item with the two calls.
The row in two calls and then paste it in, and this one is going to be for shipping.
So we'll say shipping.
And it'll be cart dot.
Shipping price.
So if we look at that, shipping is zero because if it's over $100, then there's no shipping charge.
We'll paste in again.
This is going to be the tax.
So we'll say tax and cart.
Dot tax price.
So we got to 8650 for the tax.
Now we want the total.
So under that list group item, let's paste that in and change this to total.
And we want the total price from the car.
And we get 21, 96, 47, and yours is probably different depending on what items you added.
All right.
Now we're going to have a button here.
So under.
Let's see under the list group item.
Let's create another list group item.
I don't know why that changed.
So in this list, group item will be the button.
So let's put a button and the type is going to be button.
Oops.
So type.
Button and then let's do the class name BTN Block And I want this to be disabled if there are no items
in the cart.
Okay.
And then we're going to have an on click, which is not going to be that.
It's going to be a function called place order.
Or Yeah.
Place, we'll say place order handler.
And actually, I don't want it to be.
We just want it.
To be equal directly to the function like that.
And then we can end the button.
And for the text we'll say place order.
Okay, so I'll save that.
Let's see.
Place order handling not defined.
So we need to define that.
Let's go up here and.
We'll go.
Let's go above.
We'll go under the useeffect and say const.
Place order handler.
And before we do that, I do want to get from the mutation, right?
So we brought in use create order mutation.
I want to get the the actual function along with the is loading and the error.
So let's put that right here above the use effect.
We're going to say const
and inside brackets and we want to set that to use, create or mutation.
So we'll say create order, which is going to be the name of the actual function or the action.
And then we can also get.
Is loading and error.
Okay, Now, if there's an error, I'm going to put that.
Down here above the button.
So let's see where we have that.
We have the total and then we have the button.
I'm going to go in between those and add another list group item.
And inside that, let's say if there's an error.
Then let's show a message component which we already brought in with that error.
Expected corresponding JSX tag.
For some reason, the last list group keeps changing to an item, so just be aware of that if that's
happening to you.
And we have our place order.
And if there's any kind of information or any error that will go in there.
Now, if it's loading, I'm going to put that right below the button.
So right here, we'll say.
If is if is loading, then show the loader.
Good.
Okay, Now we want to handle the the place order handler, which is this button right here.
And that should do just that.
It should call this right here.
Where is it?
Well, it's going to call this handler, but in this handler we want to call Create Order, which is
in our slice our orders API, slice, create order, which will then make the post request, it'll send
the data and we should get an order created.
So let's go into here.
We do need to initialize dispatch, so I'll just do that up here with navigate.
And let's do a try catch here.
So try catch.
And then.
I'm going to create a variable for the response and we're going to set that to a weight on the create
order.
And then inside create order, we're going to pass in our order items.
So order items and that's going to be from our cart.
Okay.
All this stuff is going to be from our cart.
The shipping address, the payment method.
The what else do we have the items?
Price.
The what else?
Shipping.
Shipping price is going to be from the cart.
The tax price and the total price.
From the cart total price and we just want to unwrap since this returns a promise, just do unwrap and
then we want to dispatch the clear cart items.
So keep in mind if it's, if it's from an API slice, one of these three slices we, we just call it
right, we get the function from the mutation and we call it if it's a regular action from cart slice,
then we need to dispatch it.
So right under that, let's go ahead and dispatch the clear cart items and then after that's done,
we're going to navigate.
And let's navigate to the actual order, which is going to be let's actually put.
Curl, not curl.
What the hell are these things?
Backticks.
And we'll do slash order slash and then the ID from the response.
Okay.
And that's.
That's not an actual route just yet, but it will be.
And then if there's an error, this is where I'm going to do a toast.
So toast dot error and then we'll just pass in whatever that error is.
All right.
So I think that should do it.
So let's try it out.
We have everything here, so let's click place order.
And we got redirected to order slash and then an object ID, which is a good sign.
And now if we check our orders, which we can do, let's see.
Where can we check this?
Let's just open up Compass.
And I'm just going to reload my data real quick.
Okay.
And then I'm going to go to orders.
And there's my order.
So we have the items.
Price the tax price.
The total price and matches everything we just saw on the page.
Now notice that is paid is false because we haven't actually paid yet.
That's coming next.
But we have the order created delivered is also set to false because we're going to make it so admins
can go in and mark mark it as delivered.
All right.
So, yeah, I mean that that's all working.
So yeah, in the next section or the next video, we're going to work on the actual order page.