1
00:00:00,320 --> 00:00:03,980
All right, So now we're going to implement our payment screen.

2
00:00:03,980 --> 00:00:10,130
But before we do that, we want to implement in the cart slice our save payment method, just like we

3
00:00:10,130 --> 00:00:12,170
have saved shipping address.

4
00:00:12,170 --> 00:00:20,870
So we're going to go down here and let's say save I'll say save payment method state.

5
00:00:20,870 --> 00:00:28,070
It's going to take state and action, and then we're going to just put the payment method or set the

6
00:00:28,070 --> 00:00:34,400
payment method of our state to the payload that's passed in to this to this action.

7
00:00:34,400 --> 00:00:36,140
And then we're just going to update our cart.

8
00:00:36,740 --> 00:00:37,080
Okay.

9
00:00:37,100 --> 00:00:39,410
So we need to export this.

10
00:00:39,710 --> 00:00:41,900
So let's export.

11
00:00:42,990 --> 00:00:45,060
Uh, save payment method.

12
00:00:45,090 --> 00:00:51,810
Now, you might be a little confused as to why we just export these reducers directly.

13
00:00:51,810 --> 00:00:54,640
Where in, for instance, our users API.

14
00:00:54,660 --> 00:01:00,540
We say like login mutation or in our products API products query.

15
00:01:00,540 --> 00:01:02,550
That's because we're using the API.

16
00:01:02,580 --> 00:01:07,830
Here we're using create API, not create slice.

17
00:01:07,830 --> 00:01:10,190
So the syntax is different.

18
00:01:10,200 --> 00:01:17,550
The products and users API slice are basically children of the API slice and we're using create API.

19
00:01:17,580 --> 00:01:27,960
So it just works different on how we, how we dispatch our actions and so on or our queries and mutations

20
00:01:27,960 --> 00:01:32,370
versus a regular reducer function like these.

21
00:01:32,670 --> 00:01:34,560
So just keep that in mind.

22
00:01:34,770 --> 00:01:42,820
Now since we've done that, let's go, let's go into screens and let's create a payment screen.

23
00:01:45,290 --> 00:01:45,960
X.

24
00:01:47,100 --> 00:01:54,090
Okay, So in our payment screen, let's say Ra FC and we have just like with our other screens, we

25
00:01:54,090 --> 00:01:57,930
have a bunch of stuff to do here and a bunch of stuff to import.

26
00:01:57,960 --> 00:02:00,510
We're going to be using use state.

27
00:02:01,550 --> 00:02:03,560
So we're also going to.

28
00:02:04,310 --> 00:02:05,270
Do we need that?

29
00:02:05,270 --> 00:02:05,980
No, not yet.

30
00:02:05,990 --> 00:02:08,600
Let's import a couple of things from React Bootstrap.

31
00:02:08,600 --> 00:02:10,520
So I'm going to bring in form.

32
00:02:11,190 --> 00:02:13,640
Button and call.

33
00:02:13,650 --> 00:02:15,720
So that's going to be from React Bootstrap.

34
00:02:15,720 --> 00:02:21,360
And then let's also import our form container because we're going to be using that again.

35
00:02:22,730 --> 00:02:24,230
So bring that in.

36
00:02:24,230 --> 00:02:27,920
And let's also bring in our checkout steps.

37
00:02:27,920 --> 00:02:31,760
So import checkout steps.

38
00:02:32,910 --> 00:02:36,420
And let's see, we have our payment screen as far as state.

39
00:02:36,420 --> 00:02:41,730
We're going to have our payment method in the component state as well.

40
00:02:41,910 --> 00:02:48,240
So let's add that and we're going to set PayPal to the the default.

41
00:02:48,810 --> 00:02:51,120
And let's see down here.

42
00:02:51,120 --> 00:02:55,020
Let's make the rapper make that the form container.

43
00:02:56,440 --> 00:02:56,830
Okay.

44
00:02:56,830 --> 00:03:01,060
And then inside the form container, we're going to have our checkout steps and we're going to have

45
00:03:01,060 --> 00:03:03,900
it one through three because this is the third step.

46
00:03:03,910 --> 00:03:05,830
Then we have our form.

47
00:03:06,430 --> 00:03:09,130
We'll do an H one and then our form.

48
00:03:13,080 --> 00:03:13,650
Okay.

49
00:03:13,650 --> 00:03:18,480
And then we'll have our form group and we'll end that form group.

50
00:03:18,480 --> 00:03:24,510
And inside of that form group we're going to have a label that says Select method.

51
00:03:24,690 --> 00:03:29,100
And let's say for our payment, let's do a column.

52
00:03:30,780 --> 00:03:32,220
We'll end that column.

53
00:03:32,580 --> 00:03:34,590
And let's see in here.

54
00:03:34,590 --> 00:03:37,080
This is actually going to be a form check.

55
00:03:37,590 --> 00:03:40,020
I don't know why this is acting weird here.

56
00:03:40,020 --> 00:03:47,480
So this is going to be a check and we're going to have a bunch of attributes on this.

57
00:03:47,490 --> 00:03:48,960
We want a type of radio.

58
00:03:48,960 --> 00:03:51,140
So it's going to be radio checkbox.

59
00:03:51,150 --> 00:03:54,900
We're going to give it a class name or a couple.

60
00:03:54,990 --> 00:03:57,600
Yeah, just one class name of margin.

61
00:03:57,600 --> 00:03:58,980
Why to.

62
00:03:59,910 --> 00:04:00,420
Okay.

63
00:04:00,420 --> 00:04:06,420
And then we're also going to do the label, which will be PayPal or credit card because they can pay

64
00:04:06,420 --> 00:04:07,430
with a credit card.

65
00:04:07,440 --> 00:04:14,700
We'll do an ID of PayPal, a name of payment method, a value of PayPal, and we'll make this checked

66
00:04:14,700 --> 00:04:15,570
by default.

67
00:04:15,570 --> 00:04:20,940
And then we want an onchange with a handler and we're just, well, not a handler really.

68
00:04:20,940 --> 00:04:27,720
We're just calling set payment method and setting it to whatever we choose, which is the only selection,

69
00:04:27,720 --> 00:04:28,980
which is PayPal.

70
00:04:29,400 --> 00:04:31,710
And then we'll end that form check.

71
00:04:31,710 --> 00:04:35,130
And then underneath the form group, we want to put our button.

72
00:04:36,200 --> 00:04:36,560
Okay.

73
00:04:36,560 --> 00:04:39,440
So again, we'll just do continue for the text.

74
00:04:41,130 --> 00:04:43,070
And variant primary.

75
00:04:43,080 --> 00:04:43,730
Good.

76
00:04:43,740 --> 00:04:48,660
So now let's save that and let's bring it into or let's create the route.

77
00:04:48,990 --> 00:04:52,530
So we'll go to index.

78
00:04:53,450 --> 00:04:55,130
And we need to import.

79
00:04:56,310 --> 00:05:00,810
We need to import the payment screen and this is going to be a protected route.

80
00:05:00,810 --> 00:05:05,760
So we're going to make sure you put it in the private root area so like that.

81
00:05:07,540 --> 00:05:08,230
Okay.

82
00:05:08,230 --> 00:05:09,970
And let's see.

83
00:05:10,060 --> 00:05:10,960
What's this?

84
00:05:11,050 --> 00:05:12,320
Yeah, that's fine.

85
00:05:12,340 --> 00:05:12,700
All right.

86
00:05:12,700 --> 00:05:19,020
So now we're going to click continue on the shipping and now we get our payment method page.

87
00:05:19,030 --> 00:05:20,380
Now a couple things.

88
00:05:20,380 --> 00:05:27,520
If the user comes to this page and there's no shipping address in the state in local storage, then

89
00:05:27,520 --> 00:05:29,890
I want them to be redirected to shipping.

90
00:05:29,890 --> 00:05:33,820
So in order to do that, we have to add a couple things here.

91
00:05:33,820 --> 00:05:41,020
We have to import a couple things, including use effect and then we're going to want to navigate.

92
00:05:41,020 --> 00:05:49,390
So let's also import let's well, we do want use dispatch and use selector as well because we're dealing

93
00:05:49,390 --> 00:05:50,650
with the cart state.

94
00:05:50,650 --> 00:06:01,840
And then we also want to import use navigate from React router dom and let's also bring in the the save

95
00:06:01,840 --> 00:06:06,220
payment method because that's what we want to call on the submit handler when we click continue.

96
00:06:06,250 --> 00:06:10,550
We want to save that payment method to to local storage.

97
00:06:11,030 --> 00:06:11,420
All right.

98
00:06:11,450 --> 00:06:13,580
Now down here, let's see.

99
00:06:13,580 --> 00:06:14,420
We're going to.

100
00:06:15,380 --> 00:06:16,820
Initialize.

101
00:06:18,200 --> 00:06:18,550
Um.

102
00:06:18,950 --> 00:06:22,400
Dispatch and navigate.

103
00:06:23,380 --> 00:06:23,920
Okay.

104
00:06:23,920 --> 00:06:24,910
And then let's see.

105
00:06:24,910 --> 00:06:26,860
We want to get our cart state.

106
00:06:27,630 --> 00:06:28,860
So we'll do that.

107
00:06:28,860 --> 00:06:35,280
And then we want to get the shipping address from the cart and then let's create our use effect.

108
00:06:35,370 --> 00:06:41,100
So this right here, the if if shipping address, we want to do that in a use effect.

109
00:06:42,600 --> 00:06:45,540
Okay, so let's pass in here.

110
00:06:50,110 --> 00:06:55,030
Uh, sometimes GitHub copilot confuses confuses me.

111
00:06:56,460 --> 00:06:56,880
Okay.

112
00:06:56,910 --> 00:06:58,980
Now in here.

113
00:06:58,980 --> 00:06:59,220
Yeah.

114
00:06:59,220 --> 00:07:00,360
We want to check for.

115
00:07:00,780 --> 00:07:03,090
For not having a shipping address.

116
00:07:03,090 --> 00:07:03,300
Right.

117
00:07:03,300 --> 00:07:05,450
Because we're getting it from our cart state.

118
00:07:05,460 --> 00:07:07,470
It's basically checking local storage.

119
00:07:07,470 --> 00:07:12,630
And then if it's not there, then we want to navigate to shipping so that they can enter the address.

120
00:07:12,660 --> 00:07:19,050
Now, since we use shipping, address and navigate in the use effect, we have to add those as dependencies.

121
00:07:19,050 --> 00:07:22,320
So shipping address and navigate.

122
00:07:24,110 --> 00:07:24,560
All right.

123
00:07:24,560 --> 00:07:25,610
And then.

124
00:07:26,640 --> 00:07:27,660
I think that.

125
00:07:28,360 --> 00:07:29,470
That should do it.

126
00:07:29,470 --> 00:07:31,800
Let's go ahead and just save that and see.

127
00:07:31,810 --> 00:07:35,620
So cannot resolve actions cart actions.

128
00:07:36,570 --> 00:07:38,160
Did I not export?

129
00:07:38,370 --> 00:07:39,630
Let's see.

130
00:07:39,960 --> 00:07:42,030
Let's go to our cart slice.

131
00:07:42,900 --> 00:07:45,060
So save payment method.

132
00:07:46,600 --> 00:07:47,320
Um.

133
00:07:51,670 --> 00:07:52,150
Act.

134
00:07:52,180 --> 00:07:52,400
Wait.

135
00:07:52,420 --> 00:07:52,920
Wait a minute.

136
00:07:52,930 --> 00:07:53,170
This.

137
00:07:53,170 --> 00:07:54,100
This is wrong.

138
00:07:54,130 --> 00:07:55,300
This is wrong.

139
00:07:55,300 --> 00:08:02,140
So this should be so save payment method should be coming from dot, dot, slash slices.

140
00:08:02,140 --> 00:08:03,850
Slash cart slice.

141
00:08:05,350 --> 00:08:06,000
Good.

142
00:08:06,010 --> 00:08:10,250
Now we do have a shipping address, so it's not redirecting us.

143
00:08:10,270 --> 00:08:15,730
Now we want to handle the submit, so we're going to put that onto the form.

144
00:08:15,730 --> 00:08:21,190
Let's say right here form on, not click on Submit.

145
00:08:21,220 --> 00:08:26,500
Then we're going to call Submit Handler.

146
00:08:28,290 --> 00:08:28,860
Okay.

147
00:08:28,860 --> 00:08:30,330
And let's see.

148
00:08:30,330 --> 00:08:32,520
We'll put that right here.

149
00:08:32,520 --> 00:08:40,340
Let's say const submit handler And we want to first of all, just prevent the default.

150
00:08:40,350 --> 00:08:47,070
Then we're going to dispatch the save payment method and pass in the payment method, which by default

151
00:08:47,070 --> 00:08:48,570
is going to be PayPal.

152
00:08:48,960 --> 00:08:52,680
And then we're going to navigate to the place order page.

153
00:08:52,680 --> 00:08:54,420
So let's save that.

154
00:08:54,420 --> 00:08:59,400
Let's come over here, let's click continue takes us to place order, which is what we want.

155
00:08:59,430 --> 00:09:00,420
It doesn't work.

156
00:09:00,420 --> 00:09:02,730
It doesn't show anything because we don't have that screen.

157
00:09:02,730 --> 00:09:04,920
But if we open up our state.

158
00:09:06,610 --> 00:09:09,190
Let's go into our redux state.

159
00:09:10,960 --> 00:09:14,170
And we should see in our cart.

160
00:09:16,360 --> 00:09:18,370
The payment method is PayPal.

161
00:09:19,300 --> 00:09:24,550
You should see it there and it should also be in local storage.

162
00:09:25,230 --> 00:09:26,580
So let's see.

163
00:09:26,580 --> 00:09:31,980
We have our cart and down here we have payment method PayPal.

164
00:09:32,250 --> 00:09:37,080
And like I said, if later on you want to implement Stripe or some something else, that's absolutely

165
00:09:37,080 --> 00:09:37,740
fine.

166
00:09:38,640 --> 00:09:41,010
Okay, so that's it for the payment screen.

167
00:09:41,010 --> 00:09:47,100
Now in the next video, we're going to actually go back to the back end and we're going to create all

168
00:09:47,100 --> 00:09:51,090
of our order routes and controller controller methods.

169
00:09:51,090 --> 00:09:56,670
Controller functions, I should say, because we're going to start to work on orders because that's

170
00:09:56,670 --> 00:09:58,770
the next step, is to place the order.