WEBVTT 00:00.020 --> 00:00.350 Okay. 00:00.380 --> 00:05.960 The next task is the review component and do help with stripe really at this point for this one. 00:05.960 --> 00:09.350 So we are actually going to write some code for our review component. 00:09.350 --> 00:12.110 And let's go back to VS code to configure this. 00:12.140 --> 00:14.000 I'll close everything down once again. 00:14.000 --> 00:18.230 And inside our checkout folder let's create a new file. 00:18.230 --> 00:21.920 And I'll just call it review dot TSX. 00:22.040 --> 00:28.070 And inside here we'll create the boilerplate that we need using the snippet. 00:28.160 --> 00:35.000 And inside here we're going to display effectively the billing and delivery summary. 00:35.000 --> 00:39.650 So we're going to display the shipping address where they're getting their items delivered to and the 00:39.650 --> 00:40.910 payment details. 00:40.910 --> 00:46.280 And we'll also display the contents of what's in their shopping cart as well. 00:46.280 --> 00:49.790 So we're going to need to get Ahold of our basket effectively inside here. 00:49.790 --> 00:53.840 So I'll use const data and give it a name of basket. 00:53.840 --> 00:59.060 And we'll use the fetch basket query which is going to retrieve our basket from cache. 00:59.060 --> 01:05.110 So whenever we use this from our Redux store we're not going out to fetch our basket again. 01:05.140 --> 01:07.450 Of course, we're just getting that from cash. 01:07.480 --> 01:11.320 Unless they refresh the page whilst they're on the checkout. 01:11.350 --> 01:14.170 Then it will go and fetch the basket. 01:14.170 --> 01:19.960 But otherwise it's just like getting it locally from memory and inside here. 01:19.990 --> 01:25.750 Let's we'll keep the div for now, but I'll probably swap this for a fragment if we don't need to provide 01:25.750 --> 01:26.800 any styling for it. 01:26.830 --> 01:36.610 We'll use a box inside here from UI material, and we'll give the box margin top equal to four, and 01:36.610 --> 01:40.780 we'll give it a width equal to 100%. 01:41.140 --> 01:44.260 So it takes up all of its available space. 01:44.260 --> 01:46.840 And we'll use typography below this. 01:48.580 --> 01:52.150 And we'll give this a variant of H6. 01:53.290 --> 01:57.820 And we'll give it a font weight of bold. 01:58.120 --> 02:05.680 And inside the typography we'll just say billing and delivery information. 02:05.920 --> 02:10.530 And below this one, we'll use a DL for a data list. 02:13.080 --> 02:17.040 And inside here we'll use typography again. 02:19.800 --> 02:22.800 And we'll give it a component of PT. 02:27.090 --> 02:30.600 And we'll give it a margin top equal to one. 02:30.600 --> 02:34.170 And we'll give it a color of secondary. 02:34.200 --> 02:39.300 And we'll give it font weights of medium. 02:42.210 --> 02:47.940 And inside here we'll specify shipping address. 02:48.660 --> 02:52.080 And let's just copy this typography below. 02:53.580 --> 02:59.550 And for this one we'll give a component of Rd for the definition. 02:59.550 --> 03:07.410 And we won't use font weights but we'll use a color equal to and we'll use text secondary. 03:09.840 --> 03:11.850 And we'll just have a placeholder for now. 03:11.850 --> 03:16.950 We'll need to get the address from stripe itself, and we'll just say address goes here. 03:19.950 --> 03:27.360 And I'll just copy the two typography elements and paste them below. 03:28.290 --> 03:32.130 We'll keep the component types and we'll just give the. 03:32.670 --> 03:36.270 In fact we just need a bit of margin for the address goes here one. 03:36.270 --> 03:39.180 So we'll specify empty equals one. 03:39.180 --> 03:44.340 And we'll do the same for this one below as well. 03:44.370 --> 03:46.950 We'll set that margin top equal to one. 03:47.910 --> 03:52.980 And instead of shipping address we'll have payment details. 03:53.250 --> 04:02.010 And we'll just say payment details goes here or go here. 04:02.040 --> 04:04.050 Just placeholder text for the time being. 04:04.050 --> 04:12.950 And below this box we'll have another box and we'll give it margin top equal to six. 04:13.670 --> 04:19.460 And we'll use MKS auto to centralize the content. 04:19.700 --> 04:21.950 And we'll use a divider. 04:25.040 --> 04:30.230 And then we'll just use a simple table to display the items in the basket. 04:30.260 --> 04:32.060 So we'll use table container. 04:32.090 --> 04:35.990 And then inside the table container comes a table. 04:36.530 --> 04:39.800 And I'll need to bring this in from my material. 04:39.860 --> 04:42.680 And then we can specify the table body. 04:44.900 --> 04:50.000 And inside the table body we will loop over our basket items. 04:50.030 --> 04:54.350 So I'll say basket dot items dot map. 04:54.770 --> 04:58.580 And we'll use item as the arguments. 04:59.450 --> 05:02.270 And the arrow open parentheses. 05:02.300 --> 05:07.400 And then we'll have a table row inside here. 05:07.940 --> 05:09.950 And we'll need to give this a key. 05:09.980 --> 05:13.490 And we'll set this equal to the item and the product ID. 05:14.570 --> 05:23.260 And we'll give this the SE property, and we'll just make the border bottom the same color as the divider 05:23.260 --> 05:24.400 we're using above. 05:24.400 --> 05:26.320 And we'll make it one pixel. 05:26.350 --> 05:35.260 So one px solid and we'll use RGB a in parentheses 224 comma two. 05:35.290 --> 05:35.530 Two. 05:35.560 --> 05:38.530 Four comma 224 comma one. 05:38.530 --> 05:43.390 And that the closing parentheses after the one and inside. 05:43.420 --> 05:48.820 And it's going to get quite busy inside here this component I'm going to go a bit too far to the right. 05:48.820 --> 05:52.150 Let's try and bring a few things down or bring that down at least. 05:52.180 --> 05:58.120 So then inside the table row we're going to have a table cell. 05:58.150 --> 06:07.000 And for our table cell we'll give it to the SE equals and we'll use p y colon four. 06:07.210 --> 06:13.480 And then inside here we'll display an image of the product as well as the name. 06:13.480 --> 06:16.510 So we'll use box inside our table cell. 06:17.410 --> 06:23.910 We'll give it a display of flex and align items of center. 06:25.530 --> 06:33.090 And we'll use an image tag and we'll give it the source of the item dot picture URL. 06:33.720 --> 06:42.180 We'll give it the alt of the item dot name, and we'll give it a style property. 06:43.410 --> 06:45.240 And inside curly brackets. 06:45.240 --> 06:47.040 Let's start moving this stuff down as well. 06:47.070 --> 06:51.060 There's no way I can avoid going to the right of the screen on this one. 06:52.080 --> 07:02.460 And okay, so inside the style, let's give it a width of 40 and a height of 40. 07:03.030 --> 07:06.300 And below the image tag we'll use typography. 07:09.030 --> 07:11.820 And we'll just use the item dot name. 07:11.820 --> 07:16.080 And below this table cell will add another table cell. 07:17.700 --> 07:27.540 And we'll make this align to the Center and we'll give it the property of P colon four for padding all 07:27.540 --> 07:28.530 around. 07:29.580 --> 07:31.380 And then we'll just use x. 07:31.380 --> 07:36.690 And then inside curly brackets we'll have the item dot quantity. 07:37.290 --> 07:41.610 And let's just copy this table cell and paste it below. 07:41.970 --> 07:43.260 And we'll use this one. 07:43.290 --> 07:44.670 Align right. 07:45.090 --> 07:46.350 Keep the same padding. 07:46.380 --> 07:51.690 And for the content of this table cell we'll open curly brackets. 07:51.690 --> 07:57.000 We'll use our currency format function and pass in the item dot price. 07:57.000 --> 08:01.410 And that should be that bit of or a lot of JSX for this. 08:01.410 --> 08:02.100 And it's the table. 08:02.130 --> 08:07.050 Really this is always quite verbose what we need for a table. 08:07.050 --> 08:08.640 But that should be what we need for this. 08:08.670 --> 08:13.440 We'll come back and deal with the shipping address and payment details soon, but not yet. 08:13.440 --> 08:18.180 And we'll add our review component into our checkout stepper. 08:18.510 --> 08:25.700 And for the review step we will simply add our review Components inside here. 08:25.700 --> 08:28.220 And let's see how we're getting on now. 08:28.220 --> 08:30.470 And I'll just refresh this page. 08:32.630 --> 08:35.600 And I'll click next and next again. 08:35.600 --> 08:37.760 And we can see that we've got our review. 08:37.760 --> 08:40.730 Bit of work to do to complete the functionality here. 08:40.730 --> 08:43.340 It looks like I've got the name way too close to the image there. 08:43.340 --> 08:48.410 That looks a bit weird, so I'll just go back and correct that in the review component. 08:48.410 --> 08:50.510 And there's no errors inside there. 08:50.540 --> 08:50.870 Okay. 08:50.900 --> 08:56.240 So let's just where we've got the box where we're using Display flex. 08:56.240 --> 09:01.340 We can just give this a gap equal to let's say three. 09:01.340 --> 09:07.040 And if we go back and double check then we need to go back to our review components. 09:07.040 --> 09:09.170 And that's a bit more like it okay. 09:09.170 --> 09:12.110 So now we've got all of our elements in place. 09:12.110 --> 09:14.780 Next we're going to take a look at the functionality. 09:15.170 --> 09:17.840 And we're going to start with the address. 09:17.840 --> 09:26.300 And we're going to go out and fetch the address so that we can populate that in our stripe address element. 09:26.300 --> 09:28.010 And we'll take a look at that next.