A user can now create an order.
So when they do so by clicking on that purchase button, we need to make sure that we then navigate
the user over to a new page.
So this is going to be orders slash the idea of the order.
Pretty much this last row down here.
We're going to have to create a new route inside of a new orders directory instead of our pages folder.
We'll call this component order show or something similar to that.
So inside of here, we're going to want to fetch details about the order using that order I.D. right
there, and then just print out some information about it on the screen and eventually put on this payment
button as well.
The other little challenge we're gonna take care of is this little timer where we're going to tell the
user how many seconds they have left to actually pay for the order.
Hey, let's get to it inside of my editor.
I going to find my age's directory inside the client folder.
Inside there, I'll make a new directory of orders.
And then I want to add in a new wild card route, buying an ad in there inside a square brackets order
I.D., not J.S..
Once again, let's just put in some very simple markup right now and then focus on how we can navigate
a user over immediately after the order is created.
They'll put in a new component called Order Show.
Actually, I think we've been using a slightly different convention, haven't we?
No, we we have similar conventions.
So ticket show.
Yeah.
Good enough order.
So it matches up.
All right.
So let's return div.
And say, order, Joe.
And an export default order show at the bottom.
All right, so now back inside of a component, we were just working on that ticket I.D. wild card.
We want to navigate a user over to the order show component whenever on success gets invoked.
That's the point at which we know that, hey, order has been created.
We should now navigate these are over and show them details about this order.
As a reminder, that function is going to be called with the order that was just created.
So inside there, we already have access to the idea of the order.
So all we really have to do is figure out how to programmatically navigate a user right here instead
of doing the simple console lock.
Now, we've already seen programatic navigation once before.
We're going to import Rueter from next slash router at the top.
And then we can call router dot Bush.
Just one little issue here.
Once again, we are navigating programmatically over to a wildcard route.
Remember what I mentioned just a little bit ago when we were working on that link element inside of
our landing page?
So back inside the landing page.
It is right here.
I told you that to create a link element to go to a wildcard routes.
We had to provide both the A trip.
And as I'd also said, we have to do something similar when making use of Rueter push to go to a wildcard
route as well.
So, yep, that's what I can do right now.
So to make use of Ratatat push to navigate to a wildcard route, we're going to first put in an argument
that is essentially the path to the file where essentially the file name, path, whatever you want
to call it, inside of our pages directory.
So for us, it'll be at SLAs orders, slash square brackets, order I.D. and again, no extension is
required.
Then as a second argument, we're going to put in the actual you're out there, we're trying to go to
the order, slash the real idea of the order.
And once again, we're going to use some string templating for this.
I'll put in some tactics, orders.
And then I'm going to reference the I.D. property of the order that is being provided to Unsuccess.
So order dot I.D..
And I should be at.
You're going to save this.
And go back and do another quick test.
The back over here.
The first order that I had created around my first client ticket should have now expired.
It has definitely been at least 60 seconds.
So now attempt to purchase this ticket.
And as soon as I do, I will get navigated automatically over to order show go.
Well, that's not too bad.
Let's take another quick pause right here.
When come back, we're going to tackle this low timer.
Make sure the user understands how much time they have left to actually pay for the order.