WEBVTT 00:00.020 --> 00:00.260 Okay. 00:00.290 --> 00:04.370 Our next task is to deal with the order detail page, which we do not have yet. 00:04.370 --> 00:07.790 So let's head back to VS code to configure this. 00:07.790 --> 00:16.670 And inside our orders folder let's create a new file and we'll just call it Order Details page dot TSX. 00:16.670 --> 00:20.750 And we'll use our snippets to create the boilerplate inside. 00:20.750 --> 00:28.250 Here we're going to get the ID of the order from the route parameters as we have done before. 00:28.340 --> 00:34.130 So more practice on using things that we've already done effectively inside this course to create this 00:34.130 --> 00:34.940 component. 00:34.940 --> 00:41.510 So we'll use const in curly brackets id and then we'll use use params that we get from react router 00:41.540 --> 00:42.350 Dom. 00:42.410 --> 00:50.000 And then we can use that parameter to go and get our detailed order from our API. 00:50.030 --> 00:53.210 So we'll use const and data. 00:53.210 --> 00:56.720 And we'll use colon order so that we can give it the name of order. 00:56.720 --> 01:04.570 And then we'll use our fetch order detail query which takes the parameter of the id and we get the standard 01:04.570 --> 01:05.170 warning here. 01:05.170 --> 01:11.740 And if we hover over the warning, then argument of type string or undefined is not assignable to parameter 01:11.740 --> 01:13.690 of type number unique symbol. 01:13.720 --> 01:15.400 So I feel we've been here before. 01:15.400 --> 01:18.100 So there is a lazy shortcut way to do this. 01:18.130 --> 01:25.630 We can use the casting of the id to a number, and then we can also use the exclamation mark to override 01:25.660 --> 01:31.510 TypeScript if we wish to do so, and we'll check for the existence of the order instead. 01:31.510 --> 01:42.910 So if no order, then we can return typography and give it a variant of h5 and say order not found. 01:43.000 --> 01:48.970 So we're still being defensive, even though we're cheating here by using the override, which is the 01:48.970 --> 01:50.290 exclamation mark. 01:50.290 --> 01:55.780 And similar to our orders, actually, we'll also use the Isloading inside here as well, and I'll just 01:55.780 --> 02:00.850 copy this line down and check first of all to see if we are loading. 02:01.030 --> 02:06.810 And if we are, then I'll just have loading order dot dot dot. 02:06.840 --> 02:13.140 Prior to the check to see if we have the order and then we can populate our order detail page. 02:13.140 --> 02:19.320 Now this one will get slightly busy, so we'll go through fairly quickly because we're not going to 02:19.320 --> 02:21.990 look at anything we haven't already done before. 02:22.020 --> 02:30.030 So we're going to use a card to display the order detail page, and we'll give it the property and padding 02:30.030 --> 02:34.950 of two, and we'll give it a max width of medium. 02:35.100 --> 02:40.890 And we'll use max colon auto to centralize the cards on the page. 02:40.920 --> 02:46.830 Inside the card we'll use a box and we'll give this display flex. 02:49.290 --> 02:53.340 And we'll use justify content and space between. 02:53.340 --> 02:57.720 And we'll align items and say center. 02:57.750 --> 03:03.750 Inside this box we'll have our title and a button to go back to the orders. 03:03.750 --> 03:16.170 So we'll use typography and we will give this a variant of H5 and align center and we will say order 03:16.170 --> 03:23.700 summary for and use hash and then in curly brackets order.id below. 03:23.700 --> 03:30.510 The typography will have a button that will use to allow them to go back to the orders page, and we'll 03:30.510 --> 03:35.790 specify components equals link which we get from React router Dom. 03:35.790 --> 03:40.290 And we'll specify two equals and then forward slash orders. 03:40.830 --> 03:45.630 And we'll give this button a variant of outlines. 03:46.560 --> 03:50.310 And the label can be back to orders. 03:50.910 --> 03:54.900 So below this box we will have a divider. 03:56.070 --> 04:00.840 And below the divider we'll use another box. 04:00.840 --> 04:14.950 And we'll use typography and give this a variant of H6 and a font weight of bold and inside here we'll 04:14.950 --> 04:23.950 just specify billing and delivery information, and we'll use a bunch of definition lists inside here. 04:23.950 --> 04:27.850 So just DL and inside the DL we'll have the data type. 04:27.880 --> 04:28.510 So dt. 04:28.840 --> 04:32.230 And in fact let's stick with using the material component. 04:32.230 --> 04:34.210 So we'll use a box here instead. 04:35.680 --> 04:42.010 And we'll give this the components of DL. 04:42.400 --> 04:45.100 And it doesn't really make any difference in what we're doing here. 04:45.100 --> 04:48.880 This is still going to be outputs into the HTML in exactly the same way. 04:48.880 --> 04:52.300 But if we do need to give some styling it's just easier to use the box. 04:52.300 --> 04:58.930 And like I say for this example, it's not going to make any difference because we're going to not give 04:58.930 --> 05:00.370 this any additional styling. 05:00.370 --> 05:03.850 And instead of using DT here, I'm just going to use typography. 05:04.240 --> 05:16.410 And I will give this a component of DT TT and we'll give it a variant of subtitle one and font weight 05:16.620 --> 05:18.930 will set this to 500. 05:19.680 --> 05:25.170 And inside here can go the shipping address. 05:25.560 --> 05:31.440 And below this I'll just copy this typography and paste it below. 05:31.470 --> 05:36.120 And this component can be DD instead. 05:36.120 --> 05:39.780 And instead of subtitle one we'll use body two. 05:40.320 --> 05:43.620 And we'll give it a font weight of 300. 05:43.620 --> 05:48.480 And I'll just say for the time being address goes here. 05:48.480 --> 05:52.410 So this box I'm going to copy this and paste it below. 05:54.030 --> 05:58.320 And instead of shipping address this can be payments info. 05:58.890 --> 06:01.590 And I'll just say payment goes here. 06:01.800 --> 06:03.510 So below the box with the billing. 06:03.510 --> 06:06.300 And notice that I've got a typo there delivery information. 06:06.300 --> 06:07.710 So below this box. 06:07.710 --> 06:09.540 And this is going to be a little bit busy. 06:09.590 --> 06:12.770 so apologies, but I don't know another way around that. 06:12.800 --> 06:16.520 So below the box just above the card will have a divider. 06:18.080 --> 06:20.330 And we'll give this the SE property. 06:20.330 --> 06:26.630 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 06:26.630 --> 06:28.340 use another box. 06:30.170 --> 06:35.570 And we're going to have similar styling for this next section inside our order details. 06:35.570 --> 06:40.940 So I'll use the box with the details. 06:40.970 --> 06:47.840 I'm going to copy this and paste it inside here and try reformatting to tidy things up. 06:47.930 --> 06:53.810 So in this one then instead of shipping address we'll have the email address. 06:57.680 --> 07:03.440 And above the box with the DL actually we'll have a subtitle as well. 07:03.440 --> 07:10.400 So let's copy this one with the typography and paste it just above where I've got the box component 07:10.430 --> 07:11.210 DL. 07:11.240 --> 07:15.950 And this one can have the subtitle of order details. 07:15.950 --> 07:18.290 So we'll have the email address. 07:18.470 --> 07:23.690 And in the Rd part we'll have the order dot via email. 07:25.130 --> 07:30.260 In the next one we'll have order status. 07:30.740 --> 07:36.920 And then instead of payment goes here we'll have order dot order status. 07:37.250 --> 07:40.310 And I'll just copy this down one more time. 07:42.020 --> 07:47.840 And instead of order status we'll use the order date. 07:49.010 --> 07:53.360 And inside here we'll just use the dates FNS formatter again. 07:53.360 --> 08:01.670 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 08:01.700 --> 08:06.350 its format string of dd m and y y y y. 08:06.500 --> 08:14.680 So below list box just above the card again we'll use another divider And we'll give it the property 08:14.680 --> 08:15.910 of me. 08:16.300 --> 08:20.050 And what did I use up above my two? 08:20.080 --> 08:21.520 I'll use the same again. 08:22.600 --> 08:28.090 And below the divider, we will have a table that's going to display the order details. 08:28.120 --> 08:33.460 Now I'm going to just copy some code we used in our review component for this, because the table that 08:33.460 --> 08:35.860 contains the order is going to be the same. 08:35.860 --> 08:43.360 So I'm going to copy the table including the table container and just grab all of this Ctrl C and back 08:43.360 --> 08:46.120 to our order page and just paste it inside here. 08:46.120 --> 08:55.120 And I'm going to use the add all missing imports for this and just reformat things a little bit. 08:55.510 --> 09:00.340 And instead of the basket items we're going to use our order. 09:01.270 --> 09:06.490 And instead of items this is going to be order items. 09:06.490 --> 09:11.320 And then we can map over these and display everything inside the table container. 09:11.320 --> 09:15.690 And if we take a look and see how we're doing, in fact, we need to create a route for this first. 09:15.690 --> 09:24.030 So let's go to our routes component and we'll copy the orders down and we'll say orders forward slash 09:24.030 --> 09:25.230 colon ID. 09:25.830 --> 09:31.950 And we'll use our order details page and head back to our browser. 09:31.950 --> 09:37.050 We'll go back to the orders and we'll just pick any old order. 09:37.440 --> 09:40.650 And we should get taken to our order details page. 09:40.650 --> 09:47.070 So we've got the order information still missing a few parts and could do a bit of spacing between this 09:47.070 --> 09:51.300 divider as well, but making progress. 09:51.390 --> 09:55.920 And then we just need the order amounts inside here as well. 09:55.920 --> 09:59.670 So back to our code and the order detail page. 09:59.670 --> 10:04.770 Let's just add a bit of margin above and below in this divider as well. 10:04.770 --> 10:07.830 And we'll use SE and mi colon two. 10:08.220 --> 10:09.660 Okay let's keep going down. 10:09.660 --> 10:15.300 And we'll do a little bit more inside here just to display the order amounts as well. 10:15.320 --> 10:18.290 So below the table container we'll just have another box. 10:18.290 --> 10:23.990 And we'll stick to using our definition lists to display this detail as well. 10:23.990 --> 10:34.520 So I'm just going to grab the definition lists here and copy all three of them into my clipboard and 10:34.520 --> 10:36.920 paste it inside here. 10:36.920 --> 10:43.070 And then it's just a case of updating what we're going to use inside here with a few small differences. 10:43.070 --> 10:45.470 So I'll just reformat things there. 10:45.470 --> 10:49.010 So our component's going to stay as a definition list. 10:49.010 --> 10:54.530 But we will give this the SE property as I'd like to display these on the left and right hand side of 10:54.530 --> 10:57.380 the component for the order amounts. 10:57.380 --> 11:04.250 So we'll use inside here SE and Display flex. 11:04.250 --> 11:06.140 And in fact we're in a box component. 11:06.140 --> 11:08.150 So we don't need to use SE inside here. 11:08.150 --> 11:16.070 For this we can just use display and flex and say justify content and space between and. 11:16.070 --> 11:17.350 We'll see how this looks. 11:17.350 --> 11:20.830 And for this one it's going to be the subtotal. 11:24.250 --> 11:27.160 And this will be the order dot subtotal. 11:27.190 --> 11:28.870 And let's just remove these. 11:28.870 --> 11:35.080 So I don't need to recreate the display flex every time for the other ones inside here I'll just copy 11:35.080 --> 11:39.760 this one and paste it below. 11:39.790 --> 11:48.160 And instead of just order subtotal let's just use our currency format and then say order dot subtotal. 11:48.730 --> 11:53.260 And then in the next one we'll use this for discounts. 11:53.650 --> 11:56.110 And we'll specify order dot discount. 11:56.140 --> 11:59.860 Even though we don't have that functionality yet we'll still add it inside here. 11:59.860 --> 12:07.300 And we'll just give the color of this and we'll set it to green in this case. 12:07.330 --> 12:14.410 And once again, we'll just use our currency format here as well and pass in the order Dot discount. 12:14.410 --> 12:17.050 And let's copy this one more time. 12:17.080 --> 12:21.390 In fact let's copy the one above, as we don't need the color to be green for the next one. 12:21.780 --> 12:25.560 And inside here we'll have the delivery. 12:27.600 --> 12:32.130 Fee and this can be for the order delivery fee. 12:32.160 --> 12:39.090 And let's copy this box one more time and we'll paste it in below the box, this time just above the 12:39.090 --> 12:39.990 cards. 12:39.990 --> 12:42.960 And we will have the total. 12:45.900 --> 12:48.720 And we'll set this to be the order total. 12:48.720 --> 12:52.620 And we'll give this a font weight of 700. 12:52.620 --> 12:55.170 So it stands out inside here. 12:55.170 --> 13:00.330 And if we take a look and see how we're doing now, then we can see we've got our totals on there. 13:00.330 --> 13:04.590 I might bring this in away from the edges a little bit, but this is kind of the look that I'm going 13:04.590 --> 13:04.860 for. 13:04.860 --> 13:06.720 For our order detail page. 13:06.750 --> 13:11.850 Looks like something we would expect to see, but I'm just going to add a bit of margin for what we 13:11.850 --> 13:18.510 have here and go back to where I have the box on this one. 13:18.600 --> 13:28.520 I'll just use m x equals three and I'll just do the same for the total I have down here as well. 13:28.550 --> 13:32.150 I'll just use m x equals three. 13:32.180 --> 13:37.940 And if we go take a look then what we should find is that things are moved in a little bit rather than 13:37.970 --> 13:39.380 being right on the edge. 13:39.380 --> 13:40.760 I'm going to say that's okay. 13:40.760 --> 13:45.740 For our purposes, we've still got the address and payment info to go there. 13:45.740 --> 13:48.860 And this is the part where I'm going to hand over to you. 13:48.860 --> 13:54.290 And this is kind of a do not repeat yourself challenge, if you will, fairly straightforward. 13:54.290 --> 14:00.680 I'm not going to make it the complex version of this challenge I was originally thinking of, and we 14:00.680 --> 14:04.970 are going to avoid repeating ourselves in just two components. 14:04.970 --> 14:14.090 And the two components that I'm referring to are the check out success page and the Order Detail page. 14:14.090 --> 14:21.490 I would like to use the same function that's exported from our util file, which we do not have yet. 14:21.490 --> 14:28.660 I would like a couple of functions to format the address string based on our own types, which is inside 14:28.660 --> 14:29.620 the order. 14:30.010 --> 14:31.360 Let's open this up as well. 14:31.360 --> 14:33.850 Just so I'm clear on what we're aiming for here. 14:34.750 --> 14:40.240 I want us to have a reusable function based on our own types of the shipping address and the payment 14:40.240 --> 14:49.090 summary that gives us the address string or the payment string, depending on the purpose, of course. 14:49.090 --> 14:55.780 And I would like to remove this code from inside the checkout success page and just use the same function 14:55.780 --> 15:02.410 here to display the formatted payment string and address string. 15:02.650 --> 15:09.550 So your challenge or your goal is to take the code that we currently have, create a reusable function 15:09.550 --> 15:17.740 inside the utilities, and we'll utilize that in our Checkout Success page and in the Order Detail page. 15:17.740 --> 15:23.350 And please give that a go and I'll run through the solution in the next lesson.