So in the last video, we made it so we could create an order and it was saved to the database.
And then we're redirected to this page here, order slash, and then the ID.
So we want to take care of this where it displays the order details and we'll also have a button to
pay.
Now, I made a little mistake in the back end routes.
So if we go to routes and then order routes, I set the where is it get order by ID, I set that to
admin.
I put the admin middleware and we don't want that.
We just want it to be protect because if we keep it at admin, once we go and place an order, we're
not going to be able to fetch the single order.
It's going to prevent us unless we're logged in as an admin, which of course we don't want.
So just get rid of that admin.
All right, Now we're going to go back to the front end and let's first of all, before we create the
order screen, let's add the action creator in the slice.
So orders API, slice, we're going to go let's see right under the create order which ends right here.
And let's call this get get order details and it's going to be a query.
So we want to say builder query, not mutation.
And then we'll have our query.
We'll pass in the order ID, the URL is going to be orders, URL slash, and then the order ID, the
method is going to be get, although we don't need that because it's get by default.
And then under the query I'm just going to specify the.
What is it?
No, it's.
Keep.
Keep unused data and we'll say five for that five seconds and then to export it, we just want to put
use before it.
And then the name of the function, which is get order details and then query after it.
So that's all we have to do in order to to fetch the order details.
Now we want to work on the actual screen.
So in screens we're going to create an order screen dot JS, which is different than the place order
screen.
So for the order screen, let's let's bring in a couple things.
So we're going to need link and let's say use params from React router dom use params is going to be
used to fetch to get this ID from the URL.
And then from react router not react router react bootstrap.
We want row.
Roll Call List.
Group Image.
Don't think we need.
Well, yeah, I think we need.
Button later.
So.
Yeah.
Image form.
Button card.
And then let's import our message component.
And also our our loader.
Loader component.
And then of course, the query that we just created that we just exported from the slice, which is
called use get order details query.
And then we'll create our.
Component our order screen.
And just for now, I'll save that and we'll add the route just so we can actually see the page.
So in our routes, our index.js, let's import our order screen and we're going to put that in the registered
user routes, the protected routes.
So we can at least start to see it.
Now in the order screen, we want to get the data from the database by going through this query right
here.
So let's go right here.
And first of all, we need the ID from the URL so we can get that with use params, although I'm going
to rename it to order ID just to be more specific.
Okay.
And then we're going to.
Let's see.
Yep.
I think that's what we want.
So from the query use get order details query.
We pass the order ID and which comes from the URL.
We get the data which we're renaming to order we get is loading and is error.
One other thing that I'm going to get is the refetch function which we can call to just to do just that
refetch the new data so we don't end up with stale data, which can happen now in the return.
Actually, for now, let's just do a console log.
Let's do a console log of the order.
Okay.
Because I'm getting the data renaming it to order.
So if we save that and open up our console, we should see here.
Yeah.
We get our order.
And remember, we populated it also with the user name and email.
So we also get that as well as the user ID, so we know that we're getting all the data we need for
this page.
Now we just need to display it.
So let's get rid of that console log and I only want to display if it's loading.
So what we're going to do is say if is loading then.
Then we're going to show the loader so we can just put in.
The load or else we want to check for the error.
Which is going to come from.
Right here is error.
Let's actually.
I think we I think we need to call that error.
So we're going to do that.
So loader.
Else then if there's an error, then we're going to show the message.
Else then we'll show whatever.
Okay, So in here, what I want to have is just a we'll do a fragment and then we'll have a row or actually
we'll do an H one first.
Let's see if that actually.
Yep.
So it gives us the order and the order number and then let's put a row.
Close that row.
And then we'll have our first call, which is going to be eight wide, and then we'll have one that's
going to be four wide.
And for now, I'm just going to say column.
Column.
Okay, so we have the data.
We have basically a template to work with.
Now we're going to start with the bringing the data and displaying it.
So we'll work in the first column first.
So let's get rid of that.
I don't know why this is aligning itself like that.
So in this column, we're going to first have a list group.
So let's do list group.
Close the list group.
And inside the List group.
We're going to have a list group item.
Close that list, group item and then this will be the heading.
So we'll do H two and say shipping.
And then underneath that, we're going to have a paragraph.
And in that paragraph, I'm going to put strong tag.
We're going to have just the name label.
And then on the order we have the user object, which I just showed you with the with the user name.
So we want to do.
Or user dot name.
Check it out.
There we go.
Next we want to do the email.
So I'm going to put another paragraph and let's just close this up.
Let's put another paragraph underneath.
And then here we'll do another strong tag.
And say email.
And we should be able to get the order dot user dot email.
Okay, So next we want the street address.
So again, we'll do another paragraph.
And let's do address.
Now we're going to have to get a few things.
So we need the shipping address, dot address and then comma and then the city.
Let's also do a space and then the postal code and the country.
Shipping address is not defined.
Oh, this should be order.
Okay.
Looks good.
So next thing is going to be if it's delivered or not.
So underneath that paragraph.
We're going to open up some curly braces.
And say if the order Dot is delivered.
Um, so if it is delivered, then we're going to show something.
If it's not, we're going to show something else.
And that something is going to be the it's going to be a message component and it's going to show the
delivered at field.
And if it's not delivered, then we'll show the message.
With a variant of danger and say not delivered.
So it's not delivered right now.
So we're going to see the red not delivered.
All right, now let's go outside of that list group item and let's create another one.
And in this list group item, we're going to have the payment stuff.
So let's say payment method and then we'll have paragraph, we'll have method order dot payment method.
And then underneath that we want to show if it's paid or not.
And if it is, we'll show the paid at field just like we did with the with the order so we can actually
copy this.
And put that.
Right under the paragraph.
We'll paste that in and we'll say, Order dot is paid.
And let's say here, instead of delivered on, we'll say paid on and then it has a paid at field.
Okay.
And then here we'll say.
Not paid.
So we'll save that.
And now we should see not paid.
So now let's go under.
The list group item.
Actually.
Do we want to stay?
Yeah, we're going to stay within the list group.
So we're going to create another list group item.
And in here, let's say order items and then we basically want to just map through.
So let's say order dot, order items and map.
Okay.
And then we're going to pass in item and the index for the key.
So in here, let's do a list group.
Another list group.
And.
Uh, wait a minute.
No.
Yeah.
We want an item, not a list group.
And we add the key to that, which is going to be the index.
So we'll have one of these for each.
And let's put a row in here.
In that row, and the first column is going to be one wide and it's just going to be the image so very
similar to the placeholder page.
So if we save that, take a look.
You can see both order items, both images.
Now let's do the next column.
And this one is going to be just the name with a link to the product.
So close that and then the final one will be four wide.
And again, we're just going to have the.
The quantity X the price.
And actually.
Wait a minute.
We want.
Yeah, that and then it's going to equal and then we'll do the actual.
Item.
Um, yeah.
Item quantity times the price and then close the column.
All right, cool.
Now we want to go to the other side and.
Let's see.
Right here.
And we're going to have a card.
Close that card.
And let's do list group.
Close the list Group.
And then we'll have our list group item.
And this one's just going to be the heading.
So order summary.
And then we'll have another list group item.
And this is going to be a row.
We'll say items.
It's going to be the order dot items price.
And what I'm going to do is just copy this row.
So after the items.
Items, price will have the shipping.
So this is very similar to what we did on the other page.
So this will be shipping.
Shipping price and then we'll go on to that paste that in.
This is going to be the tax.
So tax.
And that will be tax price.
And let's see, we want the total.
So underneath that.
It's a total.
And total price.
Now this is where we're going to have the pay button to pay for the order and where we're going to have
the button to mark it as delivered as an admin.
However, we're not going to do that right now.
So what I'll do is underneath this list, group item, I'm just going to put a comment.
We'll say pay order.
Placeholder.
And then we'll also have a placeholder for Mark as delivered.
Mark as delivered placeholder.
So at least for now, we can see this stuff here.
And in the next two videos we're going to implement PayPal.
We need to do some stuff on our back end and obviously we need to add a button here and we need to integrate
the PayPal API.