1
00:00:01,050 --> 00:00:02,610
A user can now create an order.

2
00:00:02,700 --> 00:00:06,990
So when they do so by clicking on that purchase button, we need to make sure that we then navigate

3
00:00:06,990 --> 00:00:08,820
the user over to a new page.

4
00:00:09,360 --> 00:00:12,600
So this is going to be orders slash the idea of the order.

5
00:00:13,720 --> 00:00:16,240
Pretty much this last row down here.

6
00:00:17,230 --> 00:00:21,750
We're going to have to create a new route inside of a new orders directory instead of our pages folder.

7
00:00:22,200 --> 00:00:25,260
We'll call this component order show or something similar to that.

8
00:00:26,140 --> 00:00:30,990
So inside of here, we're going to want to fetch details about the order using that order I.D. right

9
00:00:30,990 --> 00:00:35,460
there, and then just print out some information about it on the screen and eventually put on this payment

10
00:00:35,460 --> 00:00:36,270
button as well.

11
00:00:37,050 --> 00:00:41,370
The other little challenge we're gonna take care of is this little timer where we're going to tell the

12
00:00:41,370 --> 00:00:44,190
user how many seconds they have left to actually pay for the order.

13
00:00:45,190 --> 00:00:47,850
Hey, let's get to it inside of my editor.

14
00:00:48,650 --> 00:00:51,970
I going to find my age's directory inside the client folder.

15
00:00:54,060 --> 00:00:57,580
Inside there, I'll make a new directory of orders.

16
00:00:59,310 --> 00:01:04,980
And then I want to add in a new wild card route, buying an ad in there inside a square brackets order

17
00:01:05,070 --> 00:01:06,990
I.D., not J.S..

18
00:01:08,560 --> 00:01:12,550
Once again, let's just put in some very simple markup right now and then focus on how we can navigate

19
00:01:12,580 --> 00:01:15,570
a user over immediately after the order is created.

20
00:01:17,140 --> 00:01:19,530
They'll put in a new component called Order Show.

21
00:01:21,370 --> 00:01:23,880
Actually, I think we've been using a slightly different convention, haven't we?

22
00:01:23,960 --> 00:01:25,690
No, we we have similar conventions.

23
00:01:25,690 --> 00:01:26,230
So ticket show.

24
00:01:26,360 --> 00:01:26,490
Yeah.

25
00:01:26,540 --> 00:01:27,170
Good enough order.

26
00:01:27,170 --> 00:01:28,310
So it matches up.

27
00:01:29,270 --> 00:01:29,450
All right.

28
00:01:29,480 --> 00:01:30,380
So let's return div.

29
00:01:32,250 --> 00:01:34,320
And say, order, Joe.

30
00:01:36,050 --> 00:01:38,660
And an export default order show at the bottom.

31
00:01:40,550 --> 00:01:44,770
All right, so now back inside of a component, we were just working on that ticket I.D. wild card.

32
00:01:45,440 --> 00:01:50,360
We want to navigate a user over to the order show component whenever on success gets invoked.

33
00:01:50,600 --> 00:01:53,240
That's the point at which we know that, hey, order has been created.

34
00:01:53,270 --> 00:01:56,570
We should now navigate these are over and show them details about this order.

35
00:01:58,250 --> 00:02:02,090
As a reminder, that function is going to be called with the order that was just created.

36
00:02:02,470 --> 00:02:05,300
So inside there, we already have access to the idea of the order.

37
00:02:05,810 --> 00:02:09,920
So all we really have to do is figure out how to programmatically navigate a user right here instead

38
00:02:09,920 --> 00:02:11,180
of doing the simple console lock.

39
00:02:12,350 --> 00:02:14,750
Now, we've already seen programatic navigation once before.

40
00:02:14,930 --> 00:02:17,810
We're going to import Rueter from next slash router at the top.

41
00:02:23,160 --> 00:02:25,770
And then we can call router dot Bush.

42
00:02:27,090 --> 00:02:28,380
Just one little issue here.

43
00:02:28,800 --> 00:02:32,390
Once again, we are navigating programmatically over to a wildcard route.

44
00:02:32,910 --> 00:02:37,080
Remember what I mentioned just a little bit ago when we were working on that link element inside of

45
00:02:37,080 --> 00:02:37,980
our landing page?

46
00:02:38,520 --> 00:02:39,870
So back inside the landing page.

47
00:02:40,030 --> 00:02:40,680
It is right here.

48
00:02:41,040 --> 00:02:44,450
I told you that to create a link element to go to a wildcard routes.

49
00:02:44,520 --> 00:02:45,970
We had to provide both the A trip.

50
00:02:46,230 --> 00:02:51,860
And as I'd also said, we have to do something similar when making use of Rueter push to go to a wildcard

51
00:02:51,900 --> 00:02:52,620
route as well.

52
00:02:53,070 --> 00:02:54,960
So, yep, that's what I can do right now.

53
00:02:55,780 --> 00:03:02,100
So to make use of Ratatat push to navigate to a wildcard route, we're going to first put in an argument

54
00:03:02,700 --> 00:03:07,650
that is essentially the path to the file where essentially the file name, path, whatever you want

55
00:03:07,650 --> 00:03:09,240
to call it, inside of our pages directory.

56
00:03:09,870 --> 00:03:17,400
So for us, it'll be at SLAs orders, slash square brackets, order I.D. and again, no extension is

57
00:03:17,400 --> 00:03:17,880
required.

58
00:03:19,660 --> 00:03:23,530
Then as a second argument, we're going to put in the actual you're out there, we're trying to go to

59
00:03:23,890 --> 00:03:26,260
the order, slash the real idea of the order.

60
00:03:27,160 --> 00:03:29,440
And once again, we're going to use some string templating for this.

61
00:03:29,680 --> 00:03:32,350
I'll put in some tactics, orders.

62
00:03:33,390 --> 00:03:37,660
And then I'm going to reference the I.D. property of the order that is being provided to Unsuccess.

63
00:03:38,250 --> 00:03:39,360
So order dot I.D..

64
00:03:40,740 --> 00:03:41,340
And I should be at.

65
00:03:43,090 --> 00:03:44,020
You're going to save this.

66
00:03:46,200 --> 00:03:48,550
And go back and do another quick test.

67
00:03:50,490 --> 00:03:51,280
The back over here.

68
00:03:51,460 --> 00:03:55,720
The first order that I had created around my first client ticket should have now expired.

69
00:03:56,110 --> 00:03:57,940
It has definitely been at least 60 seconds.

70
00:03:58,510 --> 00:04:00,370
So now attempt to purchase this ticket.

71
00:04:00,960 --> 00:04:05,340
And as soon as I do, I will get navigated automatically over to order show go.

72
00:04:06,920 --> 00:04:07,650
Well, that's not too bad.

73
00:04:08,310 --> 00:04:09,750
Let's take another quick pause right here.

74
00:04:09,840 --> 00:04:11,830
When come back, we're going to tackle this low timer.

75
00:04:12,180 --> 00:04:15,660
Make sure the user understands how much time they have left to actually pay for the order.