WEBVTT 00:00.020 --> 00:00.290 Okay. 00:00.320 --> 00:04.820 Our next step is to implement some kind of checkout functionality. 00:04.820 --> 00:10.460 And if we go to our checkout, which we are already on, let's make some improvements to this. 00:10.460 --> 00:15.920 Now on the right hand side, we're going to keep our order summary so that we can see the updated totals 00:15.920 --> 00:16.850 as we're going through. 00:16.850 --> 00:21.500 And what we'll have is a checkout stepper on the main parts of this component. 00:21.500 --> 00:28.460 So let's go configure this and we'll go back and we'll open up our checkout page first of all. 00:28.460 --> 00:31.010 And let's remove what we currently have here. 00:31.010 --> 00:37.100 And we will replace it with a grid or grid two that we get from material UI. 00:37.100 --> 00:41.420 And we'll make this a container and we'll give it a spacing of two. 00:41.510 --> 00:45.230 And we will use a grid two inside the grid two. 00:45.260 --> 00:49.970 And we'll give it a size equal to eight. 00:50.000 --> 00:56.930 And we'll just have some placeholder text for the time being for the checkout stepper goes here and 00:56.930 --> 01:03.380 below this grid two for the right hand side we'll use grid two once again. 01:03.380 --> 01:08.510 And we'll give this one a size equal to four to take up the remainder of the space. 01:08.510 --> 01:13.340 And we'll put our order summary inside there. 01:13.370 --> 01:17.820 And I don't need the typography inside here anymore. 01:18.000 --> 01:22.770 And if we go take a look at our progress, well, we can see our placeholder text and we can see the 01:22.770 --> 01:25.050 order summary on the right hand side. 01:25.050 --> 01:26.430 I don't know if I've mentioned this yet. 01:26.430 --> 01:27.990 Possibly I have, possibly I haven't. 01:27.990 --> 01:29.100 I'll mention it now. 01:29.130 --> 01:36.180 We are not going to do anything with this for some time, so it's there as placeholder. 01:36.180 --> 01:42.390 But for functionality purposes we're going to completely ignore it for pretty much everything we're 01:42.390 --> 01:43.710 going to do for some time. 01:43.710 --> 01:49.620 We're going to focus on just the payments, not the discount potential for our orders yet. 01:49.770 --> 01:57.150 But we do have something that I do not want to be present on our order summary inside the checkout component. 01:57.150 --> 01:58.920 And that's this checkout button. 01:58.920 --> 02:04.200 It doesn't belong here because we need to click on this to get to the checkout, but we're already on 02:04.200 --> 02:04.860 the checkout. 02:04.860 --> 02:10.290 So let's make an adjustment to the order summary so that we do not display that if we are on the checkout 02:10.290 --> 02:10.860 component. 02:10.860 --> 02:13.500 So we'll open up the order summary. 02:15.660 --> 02:19.230 And inside here we can check what's our location is. 02:19.260 --> 02:23.700 And to check what our location is we can bring in a hook from React Router. 02:23.700 --> 02:28.560 So we'll use the const location equals use location hook. 02:28.980 --> 02:38.970 And then for our button which contains the checkouts, let's make this conditional. 02:39.180 --> 02:40.590 So we'll keep the box. 02:40.590 --> 02:46.200 And just inside the box we'll use the not location dot Pathname. 02:46.620 --> 02:51.390 And we'll look for includes and we'll specify checkouts. 02:52.230 --> 02:55.950 And to the right of the parentheses we'll use a double ampersand. 02:56.850 --> 03:00.390 And then take the closing curly brackets. 03:00.390 --> 03:04.740 And we'll move it below or after the checkout button. 03:04.740 --> 03:10.110 And if we go and check our progress then what we find is we've got the button to continue shopping and 03:10.110 --> 03:11.100 that's fine. 03:11.370 --> 03:17.760 We will allow them to back out of the checkout of course, but the checkout button itself has gone. 03:17.760 --> 03:21.060 So that's our starting point for our checkout. 03:21.060 --> 03:28.050 And what we'll take a look at next is using a stepper component inside here to give the user a kind 03:28.050 --> 03:29.610 of wizard experience. 03:29.610 --> 03:31.470 I'm sure you've seen this kind of thing before. 03:31.470 --> 03:32.640 So they can step through. 03:32.670 --> 03:37.680 They can tell us about the address, they can review their order, then they can pay for their order. 03:37.680 --> 03:41.550 And then once they have paid, we'll send them to a checkout success page. 03:41.550 --> 03:43.800 So that's what's coming up next.