WEBVTT 00:00.000 --> 00:05.010 Okay, let's now deal with the checkout component itself and what we'll use for this. 00:05.040 --> 00:10.170 We'll go back to the material UI docs and we're going to make use of a stepper. 00:10.170 --> 00:17.040 And if we take a look at an example of lists, then what this gives us is the ability to go on to the 00:17.040 --> 00:18.120 next step. 00:18.720 --> 00:22.680 And it will function pretty much like you would expect it to. 00:22.710 --> 00:27.030 So this is the kind of thing that we're going to implement into our application. 00:27.030 --> 00:31.230 And the code for this is pretty straightforward actually. 00:31.230 --> 00:34.050 So we'll just go ahead and implement this. 00:34.050 --> 00:35.790 So we'll create a new component for this. 00:35.790 --> 00:42.000 And inside the not the solution explorer we need to go back to our file and folder view here. 00:42.000 --> 00:50.100 Inside the checkout feature folder we'll have a new file and we'll call it Checkout stepper dot TSX. 00:50.100 --> 00:52.800 And inside here we'll create the boilerplate. 00:52.800 --> 00:54.090 So use RFC. 00:55.440 --> 01:02.640 And inside here we will create some local states to keep track of which step we're currently on. 01:02.640 --> 01:09.560 So we'll have an active step and a set active step function. 01:11.510 --> 01:14.060 And we'll set this equal to use state. 01:14.060 --> 01:17.270 And we'll give it an initial value of zero. 01:17.270 --> 01:21.770 And we'll create a couple of helper functions to move us forwards and backwards in our stepper. 01:21.800 --> 01:24.980 So we'll have a const called handle next. 01:25.220 --> 01:28.820 That's going to be an arrow function which takes no parameters. 01:28.820 --> 01:30.680 And we'll use our active step. 01:30.680 --> 01:34.160 We'll get hold of the step we're currently on from existing state. 01:34.190 --> 01:39.050 Use an arrow and then say step plus one. 01:39.560 --> 01:46.700 And we'll have a const handle back again that takes no parameters. 01:47.480 --> 01:53.360 And we'll use the set active step pass in the step we're currently on. 01:53.360 --> 01:56.750 And then say step minus one. 01:58.160 --> 02:02.270 And then we can configure the components we need for our stepper. 02:02.270 --> 02:07.990 So we'll have this inside a paper Components and we'll give this some styling. 02:07.990 --> 02:09.010 So we'll give it the SE. 02:09.190 --> 02:10.030 Property. 02:10.030 --> 02:12.400 And we'll have padding all around of three. 02:12.400 --> 02:17.320 And we'll give it a border radius of three as well to make it rounded. 02:17.500 --> 02:22.000 And then we'll use the stepper component we get from Mui material. 02:22.030 --> 02:24.880 And we can give this the active state property. 02:24.880 --> 02:27.670 And of course set that to the active step. 02:27.670 --> 02:30.280 And inside here we need some steps. 02:30.280 --> 02:32.020 So let's create an array. 02:32.080 --> 02:34.510 And we can do this just above our component. 02:34.510 --> 02:37.480 Actually we'll specify const steps equals. 02:37.480 --> 02:40.360 And we're just going to have a string array effectively. 02:40.360 --> 02:41.770 So we'll open square brackets. 02:41.770 --> 02:44.320 We'll have a step fully address. 02:44.320 --> 02:48.910 We'll have a step for the payment and a step for the review. 02:49.570 --> 02:53.380 And then we can loop over those steps inside our stepper. 02:53.380 --> 02:55.000 So we'll open curly brackets. 02:55.000 --> 03:02.410 We'll use steps dot map and inside parentheses we'll use label as the first argument. 03:02.410 --> 03:09.700 And we'll use the index as the unique key for this because we're only working with an array of strings, 03:09.700 --> 03:14.410 and to the right of the parentheses will open an arrow, open curly brackets. 03:14.440 --> 03:19.540 And because we're using curly brackets we need to return from this open parentheses. 03:19.540 --> 03:21.370 And then we can use step. 03:22.690 --> 03:25.840 And we'll give it the key equal to the index. 03:25.840 --> 03:29.650 And inside the step we can have a step label. 03:29.740 --> 03:34.390 And we will use the label inside there. 03:34.420 --> 03:41.350 And let's create below our stepper the different steps. 03:41.350 --> 03:48.190 And I'm going to use CSS to show and hide the different steps here for reasons that I'll explain as 03:48.190 --> 03:49.150 we go along. 03:49.150 --> 03:55.780 But it's relevant for what we're doing so that when we do use stripe, and just as a brief overview 03:55.780 --> 03:58.300 of why I'm about to do what I'm about to do. 03:58.330 --> 04:03.730 We get certain functionality from stripe that can really help us out with our checkout, but all of 04:03.730 --> 04:08.770 the stripe elements need to be part of the same component to get the maximum functionality. 04:08.800 --> 04:14.130 Really, this refers to our address and payments, because we're going to use some stripe elements to 04:14.160 --> 04:15.030 cover those. 04:15.030 --> 04:21.600 And if our let's say for example, our payment component is part of the same component where the address 04:21.630 --> 04:29.790 is a component, then we get Google Maps Autocompletion functionality just included when we do it that 04:29.790 --> 04:30.090 way. 04:30.090 --> 04:32.160 So that's the reason for what I'm about to do. 04:32.190 --> 04:36.480 So to do that, I'm going to create or use a box from my material. 04:36.510 --> 04:40.620 I'll give it the SE property and say margin top of two. 04:40.650 --> 04:47.550 And we'll use another box inside our box and we'll give it the SE property. 04:47.550 --> 04:50.340 And we're going to use the display property. 04:50.340 --> 04:53.730 And we're going to set this equal to the active step. 04:53.730 --> 04:56.310 If it's equal to zero. 04:58.020 --> 04:59.790 And we'll use a ternary. 04:59.790 --> 05:06.120 And if it is equal to zero for this one we'll use block or otherwise it will be none. 05:06.120 --> 05:12.420 So what we're going to display inside here is only going to be displayed because we're using display 05:12.420 --> 05:12.990 block. 05:12.990 --> 05:15.720 If the active step is equal to zero. 05:15.720 --> 05:18.630 And this is going to be for our address. 05:18.630 --> 05:19.830 So I'll say address. 05:19.830 --> 05:25.560 Step inside there I'll copy this box down two more times for our other steps. 05:26.100 --> 05:31.710 And I'll just change the active step here to one and the active step here to two. 05:31.740 --> 05:35.160 And this will be for our payment step. 05:35.160 --> 05:40.200 And the third one will be for the review step. 05:40.770 --> 05:44.580 So we're not loading different components here. 05:44.580 --> 05:46.680 They're all going to be loaded at the same time. 05:46.680 --> 05:53.280 But we're only going to make the step visible when the active step is the one that we're currently on. 05:53.400 --> 05:59.610 And below the outer box before the paper we'll just add some buttons. 05:59.610 --> 06:05.160 So we'll have another box here, and we'll use Display and Flex. 06:05.430 --> 06:10.170 We'll have padding top equal to two. 06:10.170 --> 06:16.430 And we'll have justify content and specify space between and inside. 06:16.430 --> 06:18.290 Here we'll have two buttons. 06:19.880 --> 06:22.280 The first one will be for going back. 06:22.280 --> 06:25.790 So we'll give it the onClick event of handle back. 06:25.820 --> 06:28.460 And we'll give it a label of back. 06:28.460 --> 06:36.410 And we'll have another button below this that's going to be handle next. 06:36.740 --> 06:40.460 And we'll give it the label of next. 06:40.460 --> 06:45.770 So let's go back to our checkout page and add our shiny new stepper component. 06:45.800 --> 06:49.940 So let's use the checkout stepper inside there. 06:49.940 --> 06:51.770 And we can check our progress. 06:51.800 --> 06:57.080 And if we go back to our browser and we take a look, we can see that we've got our stepper in place. 06:57.080 --> 07:00.440 If I click next we can see that we go on to the payment. 07:00.440 --> 07:07.040 And if we click next again, we go on to the review component and we can go backwards and forwards in 07:07.040 --> 07:07.850 our stepper. 07:07.850 --> 07:08.780 So great. 07:08.810 --> 07:10.100 That's our starting point. 07:10.100 --> 07:13.370 And in the next lesson we need to install client side stripe. 07:13.370 --> 07:16.580 So we'll take a look at setting that up next.