1 00:00:00,320 --> 00:00:07,160 Okay, so now what we want to do is have a checkout steps component here with four different steps we'll 2 00:00:07,160 --> 00:00:14,630 have sign in shipping payment and place order for the different screens. 3 00:00:14,660 --> 00:00:14,990 Okay. 4 00:00:14,990 --> 00:00:19,520 And the way it will work is wherever we're at, we'll pass in a certain amount of steps like shipping. 5 00:00:19,520 --> 00:00:24,950 We would pass in step one and step two, because we want step one, which is sign in and step two, 6 00:00:24,950 --> 00:00:26,090 which is shipping. 7 00:00:26,180 --> 00:00:31,340 If we're on the payment page, we'll want to pass in step one, two and three, which is sign in shipping 8 00:00:31,340 --> 00:00:31,970 and payment. 9 00:00:31,970 --> 00:00:35,720 And then fourth, we'll want to pass in all four steps. 10 00:00:35,930 --> 00:00:36,260 All right. 11 00:00:36,260 --> 00:00:39,860 And if that sounds confusing, you'll see that it's really it's really not. 12 00:00:40,010 --> 00:00:46,880 So let's create a new component and let's call this checkout steps dot JS. 13 00:00:48,510 --> 00:00:51,150 And ra f c. 14 00:00:52,840 --> 00:00:54,730 And we're going to bring in a couple of things. 15 00:00:54,730 --> 00:01:03,040 One, we need the NAV element from React Bootstrap, and then we also want the yeah, the link container 16 00:01:03,040 --> 00:01:05,050 from React router bootstrap. 17 00:01:05,379 --> 00:01:08,620 And then as I said, we're going to pass in a prop. 18 00:01:09,100 --> 00:01:11,470 We're going to destructure step one. 19 00:01:12,020 --> 00:01:17,090 Step two, step three and step four. 20 00:01:17,540 --> 00:01:17,990 Okay. 21 00:01:17,990 --> 00:01:23,720 And then in the return, let's have instead of a div, this is going to be the main nav and I'm just 22 00:01:23,720 --> 00:01:33,080 going to give it a class name of justify dash content, dash center and a class name of margin. 23 00:01:33,080 --> 00:01:36,890 Bottom four just to move everything down below it. 24 00:01:37,190 --> 00:01:37,610 Okay. 25 00:01:37,610 --> 00:01:42,560 And inside the inside the NAV, we're going to have a nav item. 26 00:01:42,800 --> 00:01:44,540 Let's close the nav item. 27 00:01:45,930 --> 00:01:49,290 And we're going to basically check for step one. 28 00:01:49,290 --> 00:01:56,880 So in curly braces, let's say if step one, then we'll have some parentheses, else we'll have some 29 00:01:56,880 --> 00:01:57,920 parentheses. 30 00:01:57,930 --> 00:02:04,290 So in the first one here, this is going to be our link container to log in and then we'll have our 31 00:02:04,290 --> 00:02:07,110 nav link with the text of sign in. 32 00:02:07,290 --> 00:02:07,770 Okay. 33 00:02:07,800 --> 00:02:12,630 Else then we're just going to have a disabled link to sign in. 34 00:02:13,830 --> 00:02:14,250 All right? 35 00:02:14,250 --> 00:02:21,180 And what I'm going to do is, is just save it as is and bring it in so we can at least see it. 36 00:02:21,180 --> 00:02:25,020 So we're going to bring it into shipping screen. 37 00:02:25,020 --> 00:02:28,920 We're going to be bringing it into a couple of different screens, but shipping screen is the first 38 00:02:28,920 --> 00:02:29,490 one. 39 00:02:29,490 --> 00:02:31,830 So let's import that. 40 00:02:31,830 --> 00:02:38,310 We'll say import and check out steps and then we're going to put this. 41 00:02:40,100 --> 00:02:42,320 Uh, where are we going to put this? 42 00:02:43,040 --> 00:02:43,550 Let's. 43 00:02:43,700 --> 00:02:44,960 Let's go. 44 00:02:46,830 --> 00:02:48,750 Right above the H one. 45 00:02:48,750 --> 00:02:54,960 So in the form container and we're passing in step one and step two, meaning we want to, we want sign 46 00:02:54,960 --> 00:02:57,240 in and shipping. 47 00:02:57,240 --> 00:02:59,370 So let's save and see what we get. 48 00:02:59,370 --> 00:03:03,060 So we get just obviously we just get sign in because that's all I created. 49 00:03:03,060 --> 00:03:05,730 But you can see it's a link to go back. 50 00:03:07,110 --> 00:03:08,190 All right, let's go. 51 00:03:09,360 --> 00:03:11,460 Let's go back to the shipping page. 52 00:03:11,760 --> 00:03:13,290 Okay, so that's the first one. 53 00:03:13,290 --> 00:03:15,900 Now I'm just going to copy this nav item. 54 00:03:17,280 --> 00:03:19,440 And let's just copy it down. 55 00:03:20,100 --> 00:03:21,300 Three more times. 56 00:03:21,300 --> 00:03:25,350 So we have four total and we're going to go to the second one. 57 00:03:26,150 --> 00:03:28,490 Which is this one and this is going to be shipping. 58 00:03:28,490 --> 00:03:31,430 So let's change this to shipping. 59 00:03:31,640 --> 00:03:36,020 And the link here is going to be slash. 60 00:03:37,260 --> 00:03:41,340 Shipping and we want to make sure we change this to step two. 61 00:03:41,370 --> 00:03:46,080 So if step two is there, then we want to show that if not, then we're going to show shipping, but 62 00:03:46,080 --> 00:03:47,550 it's going to be disabled. 63 00:03:48,120 --> 00:03:52,410 So just do this shipping. 64 00:03:54,110 --> 00:03:54,860 Okay. 65 00:03:55,840 --> 00:03:58,150 So we get sign in, we get shipping. 66 00:03:58,150 --> 00:04:00,730 The next one is going to be payment. 67 00:04:00,730 --> 00:04:03,460 So here we're checking for step three. 68 00:04:04,300 --> 00:04:09,160 And the link is going to be to payment and. 69 00:04:09,930 --> 00:04:10,830 Payment. 70 00:04:10,830 --> 00:04:14,250 If not step three, we're going to have the disabled link. 71 00:04:15,500 --> 00:04:17,240 And we'll just say payment. 72 00:04:17,810 --> 00:04:18,130 Okay. 73 00:04:18,140 --> 00:04:23,480 Then we're going to check for step four and that one is going to be to the place order page. 74 00:04:23,480 --> 00:04:25,460 So slash place. 75 00:04:26,210 --> 00:04:26,810 Place. 76 00:04:26,810 --> 00:04:27,530 Order. 77 00:04:28,430 --> 00:04:32,270 And let's change that to place order. 78 00:04:33,210 --> 00:04:35,820 And let's change this. 79 00:04:36,850 --> 00:04:38,410 To place. 80 00:04:38,440 --> 00:04:39,340 Order. 81 00:04:41,540 --> 00:04:47,100 And now notice that since I'm on shipping, these two are grayed out, right? 82 00:04:47,150 --> 00:04:53,390 Because I haven't got to those yet, so I can't link to them because in my shipping screen I only passed 83 00:04:53,390 --> 00:04:54,500 in step one and two. 84 00:04:54,500 --> 00:04:58,220 If I only pass in step one, you'll see that shipping is grayed out. 85 00:04:58,220 --> 00:05:04,250 But since I'm on that page, I want that to be visible or not visible, but linkable, I guess. 86 00:05:05,130 --> 00:05:05,580 All right. 87 00:05:05,580 --> 00:05:09,120 So that's pretty much it. 88 00:05:10,170 --> 00:05:10,620 Yeah. 89 00:05:10,620 --> 00:05:12,510 So that's it for the checkout steps. 90 00:05:12,510 --> 00:05:17,880 Now, when we create like the payment screen, we're going to have to import the component again, and 91 00:05:17,880 --> 00:05:21,000 that then will pass in step one through three. 92 00:05:21,280 --> 00:05:21,590 Okay. 93 00:05:21,600 --> 00:05:31,110 So in the next video, we'll start on the payment method in the slice and the cart slice because we 94 00:05:31,110 --> 00:05:33,930 need to have a couple more functions. 95 00:05:33,930 --> 00:05:38,190 One is going to be to save the payment method, just like we save the shipping address.