Okay, so now what we want to do is have a checkout steps component here with four different steps we'll
have sign in shipping payment and place order for the different screens.
Okay.
And the way it will work is wherever we're at, we'll pass in a certain amount of steps like shipping.
We would pass in step one and step two, because we want step one, which is sign in and step two,
which is shipping.
If we're on the payment page, we'll want to pass in step one, two and three, which is sign in shipping
and payment.
And then fourth, we'll want to pass in all four steps.
All right.
And if that sounds confusing, you'll see that it's really it's really not.
So let's create a new component and let's call this checkout steps dot JS.
And ra f c.
And we're going to bring in a couple of things.
One, we need the NAV element from React Bootstrap, and then we also want the yeah, the link container
from React router bootstrap.
And then as I said, we're going to pass in a prop.
We're going to destructure step one.
Step two, step three and step four.
Okay.
And then in the return, let's have instead of a div, this is going to be the main nav and I'm just
going to give it a class name of justify dash content, dash center and a class name of margin.
Bottom four just to move everything down below it.
Okay.
And inside the inside the NAV, we're going to have a nav item.
Let's close the nav item.
And we're going to basically check for step one.
So in curly braces, let's say if step one, then we'll have some parentheses, else we'll have some
parentheses.
So in the first one here, this is going to be our link container to log in and then we'll have our
nav link with the text of sign in.
Okay.
Else then we're just going to have a disabled link to sign in.
All right?
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.
So we're going to bring it into shipping screen.
We're going to be bringing it into a couple of different screens, but shipping screen is the first
one.
So let's import that.
We'll say import and check out steps and then we're going to put this.
Uh, where are we going to put this?
Let's.
Let's go.
Right above the H one.
So in the form container and we're passing in step one and step two, meaning we want to, we want sign
in and shipping.
So let's save and see what we get.
So we get just obviously we just get sign in because that's all I created.
But you can see it's a link to go back.
All right, let's go.
Let's go back to the shipping page.
Okay, so that's the first one.
Now I'm just going to copy this nav item.
And let's just copy it down.
Three more times.
So we have four total and we're going to go to the second one.
Which is this one and this is going to be shipping.
So let's change this to shipping.
And the link here is going to be slash.
Shipping and we want to make sure we change this to step two.
So if step two is there, then we want to show that if not, then we're going to show shipping, but
it's going to be disabled.
So just do this shipping.
Okay.
So we get sign in, we get shipping.
The next one is going to be payment.
So here we're checking for step three.
And the link is going to be to payment and.
Payment.
If not step three, we're going to have the disabled link.
And we'll just say payment.
Okay.
Then we're going to check for step four and that one is going to be to the place order page.
So slash place.
Place.
Order.
And let's change that to place order.
And let's change this.
To place.
Order.
And now notice that since I'm on shipping, these two are grayed out, right?
Because I haven't got to those yet, so I can't link to them because in my shipping screen I only passed
in step one and two.
If I only pass in step one, you'll see that shipping is grayed out.
But since I'm on that page, I want that to be visible or not visible, but linkable, I guess.
All right.
So that's pretty much it.
Yeah.
So that's it for the checkout steps.
Now, when we create like the payment screen, we're going to have to import the component again, and
that then will pass in step one through three.
Okay.
So in the next video, we'll start on the payment method in the slice and the cart slice because we
need to have a couple more functions.
One is going to be to save the payment method, just like we save the shipping address.