1
00:00:00,330 --> 00:00:06,270
Beautiful once we have restricted access to the checkout page next we can start working on the page

2
00:00:06,270 --> 00:00:07,350
itself.

3
00:00:07,350 --> 00:00:12,540
And you know what I am going to log in just of course we can see what is happening even though in this

4
00:00:12,540 --> 00:00:17,820
video we're going to start somewhat slowly which is getting the imports and again setting up some kind

5
00:00:17,820 --> 00:00:19,840
of place holders for our functions.

6
00:00:20,040 --> 00:00:22,110
But still let's log in.

7
00:00:22,110 --> 00:00:25,600
Let's make sure that we are displaying the page.

8
00:00:25,600 --> 00:00:28,800
We're going to go with secret and now we're accessing the data.

9
00:00:28,800 --> 00:00:31,880
Notice how I kind of keep on pressing on submit.

10
00:00:32,070 --> 00:00:35,670
If we're still waiting on the info and now I'm just gonna close it.

11
00:00:35,670 --> 00:00:38,800
And of course we're gonna go to a check out page now.

12
00:00:38,880 --> 00:00:43,110
I'm also gonna open of course in my text that are the page.

13
00:00:43,170 --> 00:00:45,750
Otherwise it is impossible to work on a page.

14
00:00:45,990 --> 00:00:48,150
And we're going to start with our imports.

15
00:00:48,150 --> 00:00:54,220
We're gonna start by getting the cart context the user context use history as well as the empty cart.

16
00:00:54,240 --> 00:00:56,250
Now why I would want to have an empty cart.

17
00:00:56,430 --> 00:01:02,670
Because if the cart is empty then I would just want to display that component that we also show within

18
00:01:02,670 --> 00:01:09,100
the cart page because there's no point for checkout page if there is no items in the actual cart.

19
00:01:09,150 --> 00:01:11,310
So we're gonna start by our imports.

20
00:01:11,480 --> 00:01:16,860
Cart context then that is coming from of course of context.

21
00:01:16,860 --> 00:01:18,030
So we're gonna go with cart.

22
00:01:18,030 --> 00:01:19,890
I am going to copy and paste it.

23
00:01:19,890 --> 00:01:22,410
Now we're going to change that to user.

24
00:01:22,410 --> 00:01:24,200
Same goes for this guy.

25
00:01:24,830 --> 00:01:26,520
I'm going to go with the user.

26
00:01:26,520 --> 00:01:32,550
Then also we have use history because we would want to of course navigate away from the page.

27
00:01:32,730 --> 00:01:37,940
So we're gonna go with import then use history.

28
00:01:38,070 --> 00:01:43,170
So that is coming from react roll her down and then we have the empty cart.

29
00:01:43,650 --> 00:01:46,920
So therefore you've got this already component that we created before.

30
00:01:46,920 --> 00:01:54,750
So we're going to go with import then we're gonna set up empty cart to cart and is coming from all the

31
00:01:54,750 --> 00:01:56,240
components.

32
00:01:56,400 --> 00:02:02,100
So we're going to look in the components then we'll look in the cart folder and there we have the empty

33
00:02:02,100 --> 00:02:07,760
cart and then right after the empty cart we're gonna look for react stripe elements.

34
00:02:07,770 --> 00:02:10,220
So let me first just add a comment.

35
00:02:10,470 --> 00:02:11,150
React.

36
00:02:11,190 --> 00:02:18,670
Stripe elements and essentially this package provides the functionality when we are connecting to strike

37
00:02:19,170 --> 00:02:24,340
because if we're looking at that form there's gonna be some parts that we're going to create let's say

38
00:02:24,340 --> 00:02:30,550
like our total as well as whatever name we're passing and info of what kind of testing car the user

39
00:02:30,550 --> 00:02:31,800
needs to provide.

40
00:02:31,870 --> 00:02:37,750
But then in order to in fact communicate with stripe we're gonna use a package for that because essentially

41
00:02:37,990 --> 00:02:39,970
they're just setting up everything for us.

42
00:02:39,970 --> 00:02:42,790
We just need to place it within our form.

43
00:02:42,790 --> 00:02:46,240
So eventually we're gonna get our imports from react strip elements.

44
00:02:46,240 --> 00:02:48,490
But first we would need to set up the account.

45
00:02:48,520 --> 00:02:51,010
So that's gonna be in a few videos.

46
00:02:51,190 --> 00:02:54,330
And then also I'd want to get submit order.

47
00:02:54,400 --> 00:02:57,040
So it's gonna work very very similarly.

48
00:02:57,040 --> 00:03:03,490
Like we already did within logon page where we had two functions and when once we submitted the form

49
00:03:03,850 --> 00:03:06,160
then essentially we ran those functions.

50
00:03:06,160 --> 00:03:10,100
So in this case we're only going to have one function that is going to be submit order again.

51
00:03:10,180 --> 00:03:14,080
Currently just a comment but we're going to still import.

52
00:03:14,080 --> 00:03:17,080
So we're gonna go with import by the way let me close the sidebar.

53
00:03:17,230 --> 00:03:23,860
Let me say submit order submit order and that is coming from.

54
00:03:23,950 --> 00:03:26,170
Course our strappy folder.

55
00:03:26,170 --> 00:03:28,140
So let's look for strapping.

56
00:03:28,360 --> 00:03:30,380
Let's look for submit order.

57
00:03:30,520 --> 00:03:33,760
And now we can start working on our checkout page.

58
00:03:33,760 --> 00:03:34,240
All right.

59
00:03:34,240 --> 00:03:40,190
Now first we're gonna need a props those props are gonna be useful for react striped element.

60
00:03:40,210 --> 00:03:44,250
So just before I forget doing that I'm gonna add these props again.

61
00:03:44,320 --> 00:03:49,750
Currently they're not gonna make sense but once we hook it up to react strip elements then you're gonna

62
00:03:49,750 --> 00:03:56,320
see why we are in fact right away passing deep props object and now within the actual component we're

63
00:03:56,320 --> 00:03:58,340
gonna go with the structuring.

64
00:03:58,360 --> 00:04:00,180
So let's start by concept.

65
00:04:00,370 --> 00:04:04,100
I'm looking for carte total as well as clear cart.

66
00:04:04,210 --> 00:04:07,510
So let's get these functions from our court context.

67
00:04:07,630 --> 00:04:15,760
So cart total as well as clear cart and that is coming from.

68
00:04:15,760 --> 00:04:23,810
We have react and that is of course used context and then we have carte contexts of cart context like

69
00:04:23,820 --> 00:04:29,200
so once we have the structured cart next we're going to look for the user.

70
00:04:29,390 --> 00:04:35,750
So the user is gonna be a little bit longer what we're gonna look for user then also would want to show

71
00:04:36,320 --> 00:04:46,690
alert hide alert as well as alert altogether and we're gonna get a react then use context again.

72
00:04:46,850 --> 00:04:51,340
And in this case we're looking for user context so let's get these values.

73
00:04:51,530 --> 00:04:59,780
Now I'm going to initialize my history so I'm going to use const as three and then we're gonna set it

74
00:04:59,780 --> 00:05:06,290
equal to use his three hook use three hook which again we used already before and then let's set up

75
00:05:06,290 --> 00:05:08,330
some values for the state.

76
00:05:08,840 --> 00:05:14,030
So we're gonna have a name one because we're gonna have a name field as well as the errors because we

77
00:05:14,030 --> 00:05:15,590
would want to display the errors.

78
00:05:15,710 --> 00:05:21,860
So let's say if I'm trying to submit on my order and if I haven't added the card well then I would want

79
00:05:21,860 --> 00:05:24,240
to display your card number is incomplete.

80
00:05:24,260 --> 00:05:30,270
Again the message is coming from the stripe but we are responsible for displaying that message.

81
00:05:30,290 --> 00:05:32,770
That's the reason why we're going to have to state values.

82
00:05:32,860 --> 00:05:39,210
I'm I have state values like so we're going to start with name as well as there.

83
00:05:39,580 --> 00:05:42,020
And both of them are going to be exactly the same.

84
00:05:42,020 --> 00:05:43,580
They're just gonna be an empty string.

85
00:05:44,030 --> 00:05:50,200
So we're gonna go here with cost then we're going to look for name as well as set.

86
00:05:50,390 --> 00:05:58,640
Name that is equal to react use state use state and then we're passing an empty string.

87
00:05:58,640 --> 00:06:03,020
We're gonna copy and paste it and we're gonna have the error same way.

88
00:06:03,190 --> 00:06:09,980
And I have the error set error of course that is the name of our function and then it is also gonna

89
00:06:09,980 --> 00:06:16,100
be an empty string and then we're gonna have our handle submit before and I'll submit though we're gonna

90
00:06:16,100 --> 00:06:18,200
have still are is empty.

91
00:06:18,200 --> 00:06:20,710
So we're gonna still check for empty values.

92
00:06:20,780 --> 00:06:25,890
So let's say if we don't fill out the name then of course we're also gonna have please fill out the

93
00:06:25,910 --> 00:06:31,910
name field and since we already previously covered that in the log in page I'm right away.

94
00:06:31,910 --> 00:06:34,430
Gonna hook it up to a lurch.

95
00:06:34,760 --> 00:06:40,970
So I'm just gonna make sure that while I'm getting back the response user can keep on submitting the

96
00:06:40,970 --> 00:06:41,700
form.

97
00:06:41,720 --> 00:06:42,300
All right.

98
00:06:42,350 --> 00:06:44,930
That's the reason why again we're gonna have our is empty.

99
00:06:45,650 --> 00:06:47,240
So we're gonna head over back.

100
00:06:47,250 --> 00:06:51,200
We're gonna have cost is empty.

101
00:06:51,200 --> 00:06:56,160
That is of course the variable that's responsible for showing or displaying our buttons.

102
00:06:56,360 --> 00:06:58,510
And then we're gonna tie it to a name.

103
00:06:58,550 --> 00:07:04,040
So if the name is empty value is empty is gonna be true and then we're gonna display of course a paragraph

104
00:07:04,100 --> 00:07:06,240
and we're not gonna show our button.

105
00:07:06,290 --> 00:07:09,480
And I'm also gonna say or if alert.

106
00:07:09,620 --> 00:07:13,070
So the global alert show is equal to true.

107
00:07:13,160 --> 00:07:19,250
So that way we kind of keep on submitting the form if we're in a process of getting back our response.

108
00:07:19,340 --> 00:07:22,430
Now our handle submit is also gonna be a synchronous.

109
00:07:22,490 --> 00:07:24,490
So we're gonna go with a sink.

110
00:07:24,590 --> 00:07:26,010
It's gonna be a function.

111
00:07:26,200 --> 00:07:28,670
We're gonna have a handle.

112
00:07:29,050 --> 00:07:37,370
Matt like so we're gonna pass in our event object and first we can just right away have a event prevent

113
00:07:38,430 --> 00:07:40,500
prevent default.

114
00:07:40,500 --> 00:07:47,370
MARK So that is our handle submit and within the J six we can write away check if we have the empty

115
00:07:47,370 --> 00:07:48,100
car.

116
00:07:48,180 --> 00:07:49,860
So we have hello from checkout.

117
00:07:49,890 --> 00:07:55,110
And of course we're gonna work on the rest of the J six and the next video but we can right away check

118
00:07:55,110 --> 00:07:56,910
whether our car is empty.

119
00:07:56,910 --> 00:08:05,190
So I say if then we have access to the cart and if I can say if cart length is a less than one like

120
00:08:05,190 --> 00:08:13,050
so then I'm just gonna return and we're gonna go with empty cart so empty cars empty cart value then

121
00:08:13,140 --> 00:08:16,160
if the cart has some values then we're going to show the checkout page.

122
00:08:16,320 --> 00:08:20,650
Since I have one item in the cart that's the reason why we can see hello from cart page.

123
00:08:20,790 --> 00:08:25,920
But if I'm gonna head over to cart and if I'm going to remove the item now of course I'm displaying

124
00:08:25,920 --> 00:08:31,260
the empty cart component and that's our initial setup for our checkout page.