Okay.
Our next step is to implement some kind of checkout functionality.
And if we go to our checkout, which we are already on, let's make some improvements to this.
Now on the right hand side, we're going to keep our order summary so that we can see the updated totals
as we're going through.
And what we'll have is a checkout stepper on the main parts of this component.
So let's go configure this and we'll go back and we'll open up our checkout page first of all.
And let's remove what we currently have here.
And we will replace it with a grid or grid two that we get from material UI.
And we'll make this a container and we'll give it a spacing of two.
And we will use a grid two inside the grid two.
And we'll give it a size equal to eight.
And we'll just have some placeholder text for the time being for the checkout stepper goes here and
below this grid two for the right hand side we'll use grid two once again.
And we'll give this one a size equal to four to take up the remainder of the space.
And we'll put our order summary inside there.
And I don't need the typography inside here anymore.
And if we go take a look at our progress, well, we can see our placeholder text and we can see the
order summary on the right hand side.
I don't know if I've mentioned this yet.
Possibly I have, possibly I haven't.
I'll mention it now.
We are not going to do anything with this for some time, so it's there as placeholder.
But for functionality purposes we're going to completely ignore it for pretty much everything we're
going to do for some time.
We're going to focus on just the payments, not the discount potential for our orders yet.
But we do have something that I do not want to be present on our order summary inside the checkout component.
And that's this checkout button.
It doesn't belong here because we need to click on this to get to the checkout, but we're already on
the checkout.
So let's make an adjustment to the order summary so that we do not display that if we are on the checkout
component.
So we'll open up the order summary.
And inside here we can check what's our location is.
And to check what our location is we can bring in a hook from React Router.
So we'll use the const location equals use location hook.
And then for our button which contains the checkouts, let's make this conditional.
So we'll keep the box.
And just inside the box we'll use the not location dot Pathname.
And we'll look for includes and we'll specify checkouts.
And to the right of the parentheses we'll use a double ampersand.
And then take the closing curly brackets.
And we'll move it below or after the checkout button.
And if we go and check our progress then what we find is we've got the button to continue shopping and
that's fine.
We will allow them to back out of the checkout of course, but the checkout button itself has gone.
So that's our starting point for our checkout.
And what we'll take a look at next is using a stepper component inside here to give the user a kind
of wizard experience.
I'm sure you've seen this kind of thing before.
So they can step through.
They can tell us about the address, they can review their order, then they can pay for their order.
And then once they have paid, we'll send them to a checkout success page.
So that's what's coming up next.