OK, now we just need to add some components to populate inside these different steps, and by the way,
if we go and look in our console, then every time we're clicking here, we're adding an entry into
our console log.
So just to confirm that this is working as expected, we can see the index that is being selected for
each of these steps will remove that, because I'd like to keep the console relatively clean.
And what we'll do, we'll go across to this code once again.
That's just clean up the tabs at the top layer and we'll head to our terminal window and make some space
and clear this.
And we're going to go up to our checkout module.
So inside the app will just CD into the checkout itself and what we currently have inside here is just
flat.
Components, the team, all of the component inside here, and will be adding some additional components
and what will do will just say engie see for components, all of our Check-Out components are going
to start check out, dash something and we'll start with the address.
And will skip tests and we want these to be in their own folders.
So we need the checkout address.
And we'll also need a check out delivery component.
And will also need a check out review component.
And we'll also need a check out payment component.
And that's just one more final one since we're here, but we won't use it for a while, the check out
success page, what to show them after they've ordered their order has gone through successfully and
their payment has been accepted.
So we'll just create this now, but not actually make use of it until we start looking at payments.
So with these components in place, let's just go ahead and we'll go back to our checkout component
TML and we'll just replace these steps with the new components we've created.
The first one will be the checkout address.
The second one is going to be for our delivery, so we'll just say app, check out delivery.
The third will be for the review, so would you say app out review?
And then the fourth step is going to be are payments.
And we're not going to be adding routes to any of these because we want these to be controlled by our
Stepa, so nobody's going to be able to browse directly to the delivery component.
They'll always have to go via our stepa and it's going to be configured so they can't get to our delivery
until ever entered a valid address.
So let's just go across to our browser, make sure we can see our individual components in the steps
that we've set up and we've been booted back to our home page.
Let's check out again and we can see the checkout address works, checkout delivery works, the review
works and the payment works.
And that's just remove the the console log information from the stepper.
So we'll just go back to the stepper components.
Dots, and we'll just remove this console dialogue with confirmed that we're seeing the index and we
don't need to see that in our console when we're inside our checkouts.
Excellent.
So what we're going to take a look at next is the address.
And, of course, we're going to need a form for this.
So what we'll do next is look at setting up our form that we need for our checkout.
And we'll take a look at that next.