Okay.
Our next task is to deal with the order detail page, which we do not have yet.
So let's head back to VS code to configure this.
And inside our orders folder let's create a new file and we'll just call it Order Details page dot TSX.
And we'll use our snippets to create the boilerplate inside.
Here we're going to get the ID of the order from the route parameters as we have done before.
So more practice on using things that we've already done effectively inside this course to create this
component.
So we'll use const in curly brackets id and then we'll use use params that we get from react router
Dom.
And then we can use that parameter to go and get our detailed order from our API.
So we'll use const and data.
And we'll use colon order so that we can give it the name of order.
And then we'll use our fetch order detail query which takes the parameter of the id and we get the standard
warning here.
And if we hover over the warning, then argument of type string or undefined is not assignable to parameter
of type number unique symbol.
So I feel we've been here before.
So there is a lazy shortcut way to do this.
We can use the casting of the id to a number, and then we can also use the exclamation mark to override
TypeScript if we wish to do so, and we'll check for the existence of the order instead.
So if no order, then we can return typography and give it a variant of h5 and say order not found.
So we're still being defensive, even though we're cheating here by using the override, which is the
exclamation mark.
And similar to our orders, actually, we'll also use the Isloading inside here as well, and I'll just
copy this line down and check first of all to see if we are loading.
And if we are, then I'll just have loading order dot dot dot.
Prior to the check to see if we have the order and then we can populate our order detail page.
Now this one will get slightly busy, so we'll go through fairly quickly because we're not going to
look at anything we haven't already done before.
So we're going to use a card to display the order detail page, and we'll give it the property and padding
of two, and we'll give it a max width of medium.
And we'll use max colon auto to centralize the cards on the page.
Inside the card we'll use a box and we'll give this display flex.
And we'll use justify content and space between.
And we'll align items and say center.
Inside this box we'll have our title and a button to go back to the orders.
So we'll use typography and we will give this a variant of H5 and align center and we will say order
summary for and use hash and then in curly brackets order.id below.
The typography will have a button that will use to allow them to go back to the orders page, and we'll
specify components equals link which we get from React router Dom.
And we'll specify two equals and then forward slash orders.
And we'll give this button a variant of outlines.
And the label can be back to orders.
So below this box we will have a divider.
And below the divider we'll use another box.
And we'll use typography and give this a variant of H6 and a font weight of bold and inside here we'll
just specify billing and delivery information, and we'll use a bunch of definition lists inside here.
So just DL and inside the DL we'll have the data type.
So dt.
And in fact let's stick with using the material component.
So we'll use a box here instead.
And we'll give this the components of DL.
And it doesn't really make any difference in what we're doing here.
This is still going to be outputs into the HTML in exactly the same way.
But if we do need to give some styling it's just easier to use the box.
And like I say for this example, it's not going to make any difference because we're going to not give
this any additional styling.
And instead of using DT here, I'm just going to use typography.
And I will give this a component of DT TT and we'll give it a variant of subtitle one and font weight
will set this to 500.
And inside here can go the shipping address.
And below this I'll just copy this typography and paste it below.
And this component can be DD instead.
And instead of subtitle one we'll use body two.
And we'll give it a font weight of 300.
And I'll just say for the time being address goes here.
So this box I'm going to copy this and paste it below.
And instead of shipping address this can be payments info.
And I'll just say payment goes here.
So below the box with the billing.
And notice that I've got a typo there delivery information.
So below this box.
And this is going to be a little bit busy.
so apologies, but I don't know another way around that.
So below the box just above the card will have a divider.
And we'll give this the SE property.
And we'll set it to be m y colon two to give it some margin above and below and then below here we'll
use another box.
And we're going to have similar styling for this next section inside our order details.
So I'll use the box with the details.
I'm going to copy this and paste it inside here and try reformatting to tidy things up.
So in this one then instead of shipping address we'll have the email address.
And above the box with the DL actually we'll have a subtitle as well.
So let's copy this one with the typography and paste it just above where I've got the box component
DL.
And this one can have the subtitle of order details.
So we'll have the email address.
And in the Rd part we'll have the order dot via email.
In the next one we'll have order status.
And then instead of payment goes here we'll have order dot order status.
And I'll just copy this down one more time.
And instead of order status we'll use the order date.
And inside here we'll just use the dates FNS formatter again.
So I'll say format which we get from date FNS I'll paste I'll use order order dates and we'll give it
its format string of dd m and y y y y.
So below list box just above the card again we'll use another divider And we'll give it the property
of me.
And what did I use up above my two?
I'll use the same again.
And below the divider, we will have a table that's going to display the order details.
Now I'm going to just copy some code we used in our review component for this, because the table that
contains the order is going to be the same.
So I'm going to copy the table including the table container and just grab all of this Ctrl C and back
to our order page and just paste it inside here.
And I'm going to use the add all missing imports for this and just reformat things a little bit.
And instead of the basket items we're going to use our order.
And instead of items this is going to be order items.
And then we can map over these and display everything inside the table container.
And if we take a look and see how we're doing, in fact, we need to create a route for this first.
So let's go to our routes component and we'll copy the orders down and we'll say orders forward slash
colon ID.
And we'll use our order details page and head back to our browser.
We'll go back to the orders and we'll just pick any old order.
And we should get taken to our order details page.
So we've got the order information still missing a few parts and could do a bit of spacing between this
divider as well, but making progress.
And then we just need the order amounts inside here as well.
So back to our code and the order detail page.
Let's just add a bit of margin above and below in this divider as well.
And we'll use SE and mi colon two.
Okay let's keep going down.
And we'll do a little bit more inside here just to display the order amounts as well.
So below the table container we'll just have another box.
And we'll stick to using our definition lists to display this detail as well.
So I'm just going to grab the definition lists here and copy all three of them into my clipboard and
paste it inside here.
And then it's just a case of updating what we're going to use inside here with a few small differences.
So I'll just reformat things there.
So our component's going to stay as a definition list.
But we will give this the SE property as I'd like to display these on the left and right hand side of
the component for the order amounts.
So we'll use inside here SE and Display flex.
And in fact we're in a box component.
So we don't need to use SE inside here.
For this we can just use display and flex and say justify content and space between and.
We'll see how this looks.
And for this one it's going to be the subtotal.
And this will be the order dot subtotal.
And let's just remove these.
So I don't need to recreate the display flex every time for the other ones inside here I'll just copy
this one and paste it below.
And instead of just order subtotal let's just use our currency format and then say order dot subtotal.
And then in the next one we'll use this for discounts.
And we'll specify order dot discount.
Even though we don't have that functionality yet we'll still add it inside here.
And we'll just give the color of this and we'll set it to green in this case.
And once again, we'll just use our currency format here as well and pass in the order Dot discount.
And let's copy this one more time.
In fact let's copy the one above, as we don't need the color to be green for the next one.
And inside here we'll have the delivery.
Fee and this can be for the order delivery fee.
And let's copy this box one more time and we'll paste it in below the box, this time just above the
cards.
And we will have the total.
And we'll set this to be the order total.
And we'll give this a font weight of 700.
So it stands out inside here.
And if we take a look and see how we're doing now, then we can see we've got our totals on there.
I might bring this in away from the edges a little bit, but this is kind of the look that I'm going
for.
For our order detail page.
Looks like something we would expect to see, but I'm just going to add a bit of margin for what we
have here and go back to where I have the box on this one.
I'll just use m x equals three and I'll just do the same for the total I have down here as well.
I'll just use m x equals three.
And if we go take a look then what we should find is that things are moved in a little bit rather than
being right on the edge.
I'm going to say that's okay.
For our purposes, we've still got the address and payment info to go there.
And this is the part where I'm going to hand over to you.
And this is kind of a do not repeat yourself challenge, if you will, fairly straightforward.
I'm not going to make it the complex version of this challenge I was originally thinking of, and we
are going to avoid repeating ourselves in just two components.
And the two components that I'm referring to are the check out success page and the Order Detail page.
I would like to use the same function that's exported from our util file, which we do not have yet.
I would like a couple of functions to format the address string based on our own types, which is inside
the order.
Let's open this up as well.
Just so I'm clear on what we're aiming for here.
I want us to have a reusable function based on our own types of the shipping address and the payment
summary that gives us the address string or the payment string, depending on the purpose, of course.
And I would like to remove this code from inside the checkout success page and just use the same function
here to display the formatted payment string and address string.
So your challenge or your goal is to take the code that we currently have, create a reusable function
inside the utilities, and we'll utilize that in our Checkout Success page and in the Order Detail page.
And please give that a go and I'll run through the solution in the next lesson.