Okay, let's now deal with the checkout component itself and what we'll use for this.
We'll go back to the material UI docs and we're going to make use of a stepper.
And if we take a look at an example of lists, then what this gives us is the ability to go on to the
next step.
And it will function pretty much like you would expect it to.
So this is the kind of thing that we're going to implement into our application.
And the code for this is pretty straightforward actually.
So we'll just go ahead and implement this.
So we'll create a new component for this.
And inside the not the solution explorer we need to go back to our file and folder view here.
Inside the checkout feature folder we'll have a new file and we'll call it Checkout stepper dot TSX.
And inside here we'll create the boilerplate.
So use RFC.
And inside here we will create some local states to keep track of which step we're currently on.
So we'll have an active step and a set active step function.
And we'll set this equal to use state.
And we'll give it an initial value of zero.
And we'll create a couple of helper functions to move us forwards and backwards in our stepper.
So we'll have a const called handle next.
That's going to be an arrow function which takes no parameters.
And we'll use our active step.
We'll get hold of the step we're currently on from existing state.
Use an arrow and then say step plus one.
And we'll have a const handle back again that takes no parameters.
And we'll use the set active step pass in the step we're currently on.
And then say step minus one.
And then we can configure the components we need for our stepper.
So we'll have this inside a paper Components and we'll give this some styling.
So we'll give it the SE.
Property.
And we'll have padding all around of three.
And we'll give it a border radius of three as well to make it rounded.
And then we'll use the stepper component we get from Mui material.
And we can give this the active state property.
And of course set that to the active step.
And inside here we need some steps.
So let's create an array.
And we can do this just above our component.
Actually we'll specify const steps equals.
And we're just going to have a string array effectively.
So we'll open square brackets.
We'll have a step fully address.
We'll have a step for the payment and a step for the review.
And then we can loop over those steps inside our stepper.
So we'll open curly brackets.
We'll use steps dot map and inside parentheses we'll use label as the first argument.
And we'll use the index as the unique key for this because we're only working with an array of strings,
and to the right of the parentheses will open an arrow, open curly brackets.
And because we're using curly brackets we need to return from this open parentheses.
And then we can use step.
And we'll give it the key equal to the index.
And inside the step we can have a step label.
And we will use the label inside there.
And let's create below our stepper the different steps.
And I'm going to use CSS to show and hide the different steps here for reasons that I'll explain as
we go along.
But it's relevant for what we're doing so that when we do use stripe, and just as a brief overview
of why I'm about to do what I'm about to do.
We get certain functionality from stripe that can really help us out with our checkout, but all of
the stripe elements need to be part of the same component to get the maximum functionality.
Really, this refers to our address and payments, because we're going to use some stripe elements to
cover those.
And if our let's say for example, our payment component is part of the same component where the address
is a component, then we get Google Maps Autocompletion functionality just included when we do it that
way.
So that's the reason for what I'm about to do.
So to do that, I'm going to create or use a box from my material.
I'll give it the SE property and say margin top of two.
And we'll use another box inside our box and we'll give it the SE property.
And we're going to use the display property.
And we're going to set this equal to the active step.
If it's equal to zero.
And we'll use a ternary.
And if it is equal to zero for this one we'll use block or otherwise it will be none.
So what we're going to display inside here is only going to be displayed because we're using display
block.
If the active step is equal to zero.
And this is going to be for our address.
So I'll say address.
Step inside there I'll copy this box down two more times for our other steps.
And I'll just change the active step here to one and the active step here to two.
And this will be for our payment step.
And the third one will be for the review step.
So we're not loading different components here.
They're all going to be loaded at the same time.
But we're only going to make the step visible when the active step is the one that we're currently on.
And below the outer box before the paper we'll just add some buttons.
So we'll have another box here, and we'll use Display and Flex.
We'll have padding top equal to two.
And we'll have justify content and specify space between and inside.
Here we'll have two buttons.
The first one will be for going back.
So we'll give it the onClick event of handle back.
And we'll give it a label of back.
And we'll have another button below this that's going to be handle next.
And we'll give it the label of next.
So let's go back to our checkout page and add our shiny new stepper component.
So let's use the checkout stepper inside there.
And we can check our progress.
And if we go back to our browser and we take a look, we can see that we've got our stepper in place.
If I click next we can see that we go on to the payment.
And if we click next again, we go on to the review component and we can go backwards and forwards in
our stepper.
So great.
That's our starting point.
And in the next lesson we need to install client side stripe.
So we'll take a look at setting that up next.