So now we've resolved that that's redirects the user to the check out success page, but will go and
add some HTML for that, first of all.
So let's head back to this code once again.
I'm just going to clean up these tabs.
We're interacting with a lot of components during this check out process and just trying to keep things
as clean as possible.
But the next one will take a look out is check out success component HTML.
And we won't ever do it.
We'll just add some Temel inside here and we'll give a container and margin top of five for our d'Hiv
and then we'll add a div.
And inside this, Dave, we'll just add an icon.
And this is going to be I dot fe dot F.A.A. dash check.
Circle.
And they won't say if a dash five X to make it five times its normal size and will give it a style.
Andrew, give a color of green.
And less and less will say to and say thank you.
Your order is confirmed.
And then we'll say, well, at AP, we have a class of M.B dash for.
And we'll say in here, we just had a message saying your order has not shipped yet.
But this is to be expected as we are not.
A real store.
So, in other words, don't hold your breath because the water isn't coming for a better next, and
what will do in this pattern is we'll say BTN dot, b10 dash outline, dash success.
And we want to give you your order.
And it appears I have not type this out, probably your order shipped yet is not a sentence.
So your order has not shipped yet.
That should probably say.
But this is to be expected and we are not a real store, and what we'll do is we'll just open up our
checkout payment component.
So let's open this and we're happy with the order we get back.
So what we'll do.
Is will say, let's stop Rita navigates and we need to bring it to Rita here as well.
So let's add this as a service.
And we'll say Ruta.
And I've got a complaint because too many things are.
Taking up too much room.
And.
Then it wants to see all of these lined up correctly as well, so, OK, your wish is my command.
And now we have our Rita.
We can say let's Rita navigate.
And what we could do here actually is because we've got we're getting our order back from our API.
We can pass our order to our order success page purely so that we can use the ID from the order to allow
them to click on a button to go and view the details of that order.
So we'll do that and we'll say.
In the navigate that square brackets and then will pass in the path of checkout forward slash success.
And I think we need to add a route for this as well and will pass in the navigation extras for this
as well, so we'll say CONSED navigation extras.
And we'll say navigation extras.
Equals and I will say in an object will say states.
And will pass in order for the states here, and then we'll just pass in navigation extras to our success
component and then we'll just head over to our check out success component's.
And we'll need to bring our Rita in here as well, so say Private Rita and Rita.
And remember, we need to get our navigation extras inside our constructor here.
We won't have it if we try and do this inside our own event.
So we'll say const navigation, this dot router, and we'll just get our current navigation.
And once again, we'll be a little bit defensive here, will say states equals navigation, make sure
we have this and then we'll say navigation extras and make sure we have this as well.
And will say double ampersands and navigation extras states.
And whatever's in our states, we'll make use of.
And then we'll say inside constructors still will say if we have state.
Then we'll just add a property for our order in here of Type II order.
And if we have states that will say this to order equal states and we'll specify as I order.
So that this order doesn't complain about states because we know we're setting this to an order.
And if not.
And if we don't have an order here, instead of navigating the user to or letting them navigate to the
individual order, we'll just change it.
So they go to the orders page instead.
But we'll come onto that and let's go back and make sure that we've got a route for our success page
and we'll need to get to our checkout routine module to do that.
And we'll need to add another route's inside here.
So what we'll do, we'll just specify paff.
And in here will specify success and the component will be our check out success component.
And now we should be able to go and test to make sure this is working.
So let's just back to our shop.
And close their console to stare at a single beat and gates the basket and go to check out and delivery
will just select a delivery method to review, will go to payment and will submit the order.
And we get success.
Our order is confirmed and we get the order created successfully.
So this has been a big old model and has quite a lot of work to setting up our checkout components and
collecting the information from our users.
We've still got some loose ends to clear up.
For instance, a user can click on a checkout even though they don't have a basket.
These are things that we need to address, but we'll wait until we've got the whole thing working before
we loop back and set all this up.
We're also obviously not going to leave the statuses in here as well, but we've still got the payment
to sort out yet.
And what we also need to sort out is our orders.
And we'll take a look at the orders next before we take a look at the payment functionality.
But we'll call an end to this particular section.
So let's just go back to the code and we're going to commit to our changes at this point.
So let's just open a separate session.
And we want to be in our solution folder to do this, so that's just up and up and up one more time
and we'll just add changes inside here and we'll say get commit and message and of Section 19.
And we'll go ahead and push these changes to get up and we'll wrap up this section with a summary.