WEBVTT 00:00.140 --> 00:05.390 Okay, now that we've confirmed we can get the order back, we can now format effectively our checkout 00:05.390 --> 00:06.170 success page. 00:06.200 --> 00:11.840 So back to VS code and we'll work inside the checkout success this time. 00:11.840 --> 00:14.660 And below the variable we created for the order. 00:14.660 --> 00:16.340 We'll check to make sure we have the order. 00:16.340 --> 00:27.530 So if no order then we will return typography and just say problem accessing the order. 00:28.550 --> 00:32.420 And we'll also format the address string that we'll use inside here. 00:32.420 --> 00:34.490 So we'll have an address string. 00:34.730 --> 00:38.270 And we'll use a helper function for this. 00:38.420 --> 00:45.170 And our address is going to be const address equals order dot shipping address. 00:45.200 --> 00:50.360 And I'm just going to go to our review component because we've already got some code that does this 00:50.360 --> 00:51.470 kind of thing. 00:51.830 --> 00:54.650 But it's coming from the confirmation token shipping. 00:54.650 --> 01:00.050 Now we could create a utility method to help us out with this, but that's going to take us longer than 01:00.050 --> 01:02.030 just to copy and paste a bit of code from here. 01:02.030 --> 01:06.350 So for this approach, I'm not going to create a helper method, I'm just going to use copy and paste 01:06.350 --> 01:11.840 and adjust the code inside here to format the address to actually save some time. 01:11.840 --> 01:16.790 If I was going to use this a third time somewhere, then possibly that would be a good option to create 01:16.790 --> 01:18.950 some kind of utility method. 01:18.950 --> 01:27.170 So for the name, we just need to specify the address dot name inside here, and otherwise it stays 01:27.170 --> 01:27.860 the same. 01:27.860 --> 01:31.040 And we'll also do the same for the payment string as well. 01:31.040 --> 01:35.630 So I'll have const payment string equals empty parentheses. 01:35.630 --> 01:40.970 And I'll use const card equals order dot payment summary. 01:41.240 --> 01:45.470 And then inside here I'll just go back to the review component again. 01:45.470 --> 01:51.800 And just take the return statement from here and paste it inside the checkout success. 01:51.800 --> 01:54.680 And then we can use these in our component. 01:54.680 --> 01:57.530 So instead of this code let's swap this now. 01:58.070 --> 02:05.550 And we'll have a container From movie material, and we'll give this a max width of. 02:05.610 --> 02:09.900 MD this time, and we'll open a fragment for what we're going to do inside here. 02:09.900 --> 02:18.720 And then we'll use typography, and we'll give this a variant of H4 and use gutter bottom. 02:18.720 --> 02:22.920 And we'll have font weight equal to bold. 02:23.700 --> 02:30.990 And inside here we'll just say thanks for your fake order exclamation mark. 02:31.440 --> 02:35.190 And we'll add typography again below this one. 02:35.400 --> 02:38.610 We'll give it a variant of body one. 02:39.090 --> 02:46.380 We'll give it a color of text secondary, and we'll use Gutter bottom. 02:46.740 --> 02:49.590 And then we'll specify your order. 02:49.620 --> 03:01.410 And we'll use a strong tag and use hash and curly brackets and order ID And without a space and say 03:01.410 --> 03:13.140 we'll never be processed as this is a fake shop, just in case anyone found our demo sites and confused 03:13.140 --> 03:14.490 it with an actual shop. 03:14.880 --> 03:23.430 So let's use paper next and get that from movie material underneath the typography, and we'll give 03:23.430 --> 03:25.350 this an elevation of one. 03:25.380 --> 03:30.390 We'll give it the SE property and give it a padding of two all around. 03:30.420 --> 03:33.000 We'll use margin bottom of two. 03:33.030 --> 03:36.750 We'll use display and flex. 03:37.470 --> 03:41.460 And we'll have a flex direction of column. 03:42.150 --> 03:45.780 And we'll use a gap of 1.5. 03:46.560 --> 03:51.270 And inside the paper we'll use a box. 03:53.190 --> 03:56.490 And we'll also give this display flex as well. 03:58.890 --> 04:03.370 And specify justify content and space between. 04:04.120 --> 04:10.570 So the children inside this box will be spaced out on the left and right hand sides of the container. 04:11.740 --> 04:22.120 Then we'll use more typography, and we'll give this a variance of body two and give it a color equal 04:22.120 --> 04:23.950 to text secondary. 04:25.990 --> 04:29.380 And inside here we'll specify the order dates. 04:30.550 --> 04:34.750 And I'll just copy this typography and paste it below. 04:34.780 --> 04:42.520 And instead of color secondary we'll just use font weight and set it to be bold. 04:42.610 --> 04:48.790 And then inside here we can use the order dot order date. 04:48.790 --> 04:55.630 And below the box we'll use a divider which we get from Mui material. 04:55.630 --> 05:01.090 And I'll just copy the box that I have here and place it below the divider. 05:02.890 --> 05:07.090 And this one can be for our payment method. 05:08.920 --> 05:13.570 And instead of the order date, we'll use our payment string. 05:13.600 --> 05:16.180 And below the box we'll use another divider. 05:17.200 --> 05:23.170 And I'll just copy the box again that contains the typography and just paste it inside here. 05:23.170 --> 05:27.970 And instead of payment method we'll have shipping address. 05:29.260 --> 05:32.110 And inside here can go the address string. 05:32.620 --> 05:34.840 And I'll copy this again. 05:36.340 --> 05:39.220 And another divider below the box. 05:41.860 --> 05:44.410 And paste in what I have. 05:44.500 --> 05:47.530 And this can be for the amount. 05:47.530 --> 05:54.070 And then we'll use the currency format and the order dot total. 05:54.100 --> 05:59.410 And below the paper we'll use another box. 06:01.190 --> 06:07.340 and give this display of flex and justify content. 06:07.340 --> 06:08.450 And we'll use flex. 06:08.450 --> 06:09.020 Start this. 06:09.050 --> 06:12.650 Time and give it a gap equal to two. 06:13.790 --> 06:20.660 And we'll have a button and we'll make the variance contained. 06:21.710 --> 06:25.310 We'll give it a color equal to primary. 06:25.310 --> 06:30.890 And we'll give it a component equal to link. 06:31.340 --> 06:33.470 That we bring in from React Router Dom. 06:33.470 --> 06:44.150 And we'll specify two equals and in curly brackets in backticks forward slash orders forward slash and 06:44.150 --> 06:49.100 then dollar and the order.id. 06:51.920 --> 07:00.860 And then for the label we'll just say view your order and we'll just have another button below this. 07:00.890 --> 07:06.680 And again this will use the components equal to link. 07:06.680 --> 07:10.640 And we'll say two equals forward slash catalog. 07:10.910 --> 07:14.120 And we'll give it a variant of outlined. 07:14.540 --> 07:17.900 And the color will set to primary. 07:17.930 --> 07:23.600 And inside here we'll just say continue shopping. 07:23.690 --> 07:29.810 And if we go take a look at our checkout success and refresh this. 07:29.810 --> 07:32.930 And it looks like we've got some undefined stuff going on. 07:32.930 --> 07:37.670 But that's probably just because the component's loading before it's had a chance to access the brand, 07:37.670 --> 07:43.490 because we're not seeing the do not have the order, but it looks like maybe there's just an issue there. 07:43.490 --> 07:49.940 So let's be a bit more defensive inside here when we've got our address string and our payment string. 07:49.940 --> 07:55.250 And we'll use optional chaining here just for these payment strings, just to make sure that we don't 07:55.250 --> 07:59.640 cause an error if we do not have these properties at the time the component loads. 07:59.640 --> 08:04.470 So each one of these I'm just going to put the optional chaining inside of. 08:04.470 --> 08:07.380 And I'll do the same for the address name as well. 08:07.380 --> 08:14.760 And if we go back and take a look, then we can see that we've got a lot of undefined and is not a number 08:14.760 --> 08:17.460 inside here, which isn't great. 08:17.460 --> 08:24.330 But let's go back and take a look and create a new order and see if we get the information. 08:24.330 --> 08:29.310 Then, because this has just been updated based on the code changes, so I'd expect an error there. 08:29.310 --> 08:34.080 So let's go back to the catalog and let's add another product into the shopping cart. 08:34.080 --> 08:39.270 And we'll go to the basket then the checkout. 08:39.540 --> 08:41.640 And I'll just next my way through this. 08:41.640 --> 08:50.490 So I'll click next and add the 40 twos or the 40 twos inside here and add some dates in the future. 08:50.490 --> 08:51.690 Random security code. 08:51.690 --> 08:54.780 Click next and then click pay. 08:54.840 --> 08:59.370 And what we should have this time is the same thing again. 08:59.370 --> 09:04.530 So clearly there's an issue with the order here and how it's being received. 09:04.530 --> 09:16.890 So let's go back and I am going to add a console log and check what we have for the order, and go back 09:16.890 --> 09:21.480 to the browser and just take a look at the Chrome dev tools here. 09:22.350 --> 09:29.040 And possibly these errors were from the previous options. 09:29.040 --> 09:34.170 But if I go and take a look inside here, then we've got our data. 09:34.170 --> 09:39.840 And the issue is, is that we've got an object inside an object called data. 09:39.840 --> 09:44.820 And then we have access to things like our payment summary and our shipping address. 09:44.820 --> 09:48.630 So effectively we just need to get the data from the state. 09:48.630 --> 09:58.900 So instead of const order equals states as order we need to use state dot data as order instead. 09:58.930 --> 10:05.080 And if we go back and take a look, then we can see that we have the properties now populated inside 10:05.080 --> 10:05.350 here. 10:05.350 --> 10:12.460 As we would expect, order date could be improved, of course, but otherwise I'm going to say that 10:12.460 --> 10:13.510 looks fine. 10:14.680 --> 10:17.740 And we've got the button to click the order and continue shopping. 10:17.740 --> 10:21.400 Now there are a number of errors in our Chrome DevTools. 10:21.400 --> 10:24.910 Let's just refresh this page and see what we're left with after this. 10:24.910 --> 10:27.190 And okay, so that looks fine. 10:27.190 --> 10:32.140 We've still got the console.log statement, so I can remove that from inside here. 10:32.470 --> 10:38.320 And that should give us a cleaner Chrome DevTools experience when I refresh the page again. 10:38.320 --> 10:45.580 And sure, not completely clean, of course, because I've still got these filters at the top that hide 10:45.580 --> 10:49.030 the nasty stripe warnings that we cannot do anything about. 10:49.030 --> 10:55.150 But we're making progress, and what we can take a look at next is creating the orders page and getting 10:55.150 --> 10:57.250 the details of an order as well. 10:57.250 --> 10:58.960 So we'll take a look at that next.