1
00:00:00,200 --> 00:00:02,480
All right, so we have our authentication working.

2
00:00:02,480 --> 00:00:06,290
So now we're going back into the process of purchasing an item.

3
00:00:06,290 --> 00:00:13,340
So right now, if we add the item to the cart and then we click go to checkout, then we go to the shipping

4
00:00:13,400 --> 00:00:15,080
URL, which doesn't exist.

5
00:00:15,080 --> 00:00:16,820
So we need our shipping screen.

6
00:00:16,820 --> 00:00:25,700
But before we do that, let's go to the the cart slice because we're going to add to our our state here.

7
00:00:25,700 --> 00:00:32,479
So in addition to cart items, which is obviously an array of our cart items, we're going to have the

8
00:00:32,479 --> 00:00:35,660
shipping address because we want that to be saved.

9
00:00:35,660 --> 00:00:42,020
And then we're also going to set a payment method in the state as well, which by default is going to

10
00:00:42,020 --> 00:00:43,040
be PayPal.

11
00:00:43,040 --> 00:00:49,670
So the way we're going to set this up is it's just going to use PayPal, but you can also pay with a

12
00:00:49,670 --> 00:00:52,010
credit card through PayPal system.

13
00:00:52,010 --> 00:00:55,610
So it's not like the people need to have a PayPal account.

14
00:00:55,610 --> 00:01:01,710
You can also pay with credit card if you want to implement or integrate Stripe or something else, then

15
00:01:01,710 --> 00:01:06,630
you can do that as well after you after you finish the initial project.

16
00:01:06,900 --> 00:01:13,020
So now that we've done that, we're also going to have another reducer.

17
00:01:14,280 --> 00:01:16,200
Function or I should say an action.

18
00:01:16,780 --> 00:01:22,000
So in addition to add to cart and remove from cart, we're going to have save shipping address.

19
00:01:22,000 --> 00:01:27,010
So let's go right under remove from cart and let's say save.

20
00:01:28,460 --> 00:01:30,170
Shipping address.

21
00:01:31,610 --> 00:01:38,570
And what that's going to do is just set the state dot shipping address, which we just set up here in

22
00:01:38,570 --> 00:01:42,200
our local our local storage and our initial state.

23
00:01:42,200 --> 00:01:44,060
We set it to an empty object.

24
00:01:44,060 --> 00:01:48,890
So what we're going to do here is just set it to whatever that comes in the payload and then we should

25
00:01:48,890 --> 00:01:54,920
be able to just return update cart because our state is set in local storage in that function.

26
00:01:56,040 --> 00:01:56,520
All right.

27
00:01:56,520 --> 00:01:59,610
And we just need to make sure that we export this as well.

28
00:01:59,610 --> 00:02:01,980
So we want to do save shipping address.

29
00:02:01,980 --> 00:02:05,790
We want to export that as a cart slice action.

30
00:02:06,440 --> 00:02:09,740
So now what we'll do is create the shipping screen.

31
00:02:09,740 --> 00:02:15,980
So in screens, create a new file called Shipping screen dot JS.

32
00:02:19,380 --> 00:02:19,920
Okay.

33
00:02:19,920 --> 00:02:26,340
And this is going to actually let's I didn't we want to make this uppercase.

34
00:02:28,380 --> 00:02:33,960
So it should be uppercase s shipping screen and then we'll generate our component.

35
00:02:34,680 --> 00:02:36,540
Still is an uppercase.

36
00:02:39,580 --> 00:02:40,210
All right.

37
00:02:40,420 --> 00:02:43,510
So let's bring in a couple things up top.

38
00:02:43,510 --> 00:02:49,390
We're going to import, let's say use state because we're going to have some component state.

39
00:02:49,510 --> 00:02:53,140
And then let's bring in from React Bootstrap.

40
00:02:53,140 --> 00:02:58,390
We're going to bring in form and we're also going to bring in button.

41
00:02:59,370 --> 00:03:05,430
And then we're also going to use our form container here that we created that we that we used on the

42
00:03:05,430 --> 00:03:07,470
the login and register form.

43
00:03:07,680 --> 00:03:10,950
So form container.

44
00:03:12,720 --> 00:03:16,140
And I think that should be fine for now.

45
00:03:16,170 --> 00:03:19,620
Now, as far as our component level state, let's create that.

46
00:03:19,620 --> 00:03:26,310
So we're going to have an address, a city postal code and a country.

47
00:03:26,850 --> 00:03:30,290
Now, for now, I just want to show this.

48
00:03:30,300 --> 00:03:33,300
I want to be able to show it in the screen here at this URL.

49
00:03:33,300 --> 00:03:34,710
So I'm going to create the route.

50
00:03:34,740 --> 00:03:40,530
However, in the next video, we're going to create a private route component because we don't want

51
00:03:40,530 --> 00:03:42,240
to be able to go to the shipping screen.

52
00:03:42,240 --> 00:03:45,240
We don't want to be able to go to this URL if we're not logged in.

53
00:03:45,240 --> 00:03:51,480
So we're going to have a special route component only for routes that where you have to be registered.

54
00:03:51,480 --> 00:03:53,490
But just for now, we'll throw it in with the rest.

55
00:03:53,490 --> 00:03:55,410
So let's go to our Index.js.

56
00:03:55,440 --> 00:04:00,180
Let's bring in our shipping screen.

57
00:04:00,180 --> 00:04:04,260
And then like I said, for now, we'll just put it in with the rest of these.

58
00:04:05,400 --> 00:04:09,600
Just so we can actually see if we go to slash shipping.

59
00:04:09,690 --> 00:04:12,570
Cannot find file shipping.

60
00:04:14,550 --> 00:04:16,529
Um, this should be uppercase.

61
00:04:18,370 --> 00:04:20,589
Okay, So at least we can see the screen now.

62
00:04:20,589 --> 00:04:21,550
So let's close out.

63
00:04:21,550 --> 00:04:22,990
Let's go back to.

64
00:04:24,230 --> 00:04:31,250
Um, our shipping screen and trying to see what we want to do next.

65
00:04:31,280 --> 00:04:35,540
So we'll just continue on with, with the output here.

66
00:04:35,540 --> 00:04:38,390
So the form container is going to surround everything.

67
00:04:38,390 --> 00:04:39,920
So let's say form.

68
00:04:41,240 --> 00:04:42,260
Container.

69
00:04:43,190 --> 00:04:44,960
And we'll get rid of that.

70
00:04:44,960 --> 00:04:47,080
And let's just have an H1.

71
00:04:47,090 --> 00:04:56,810
We're going to have a form with a Onsubmit and that's going to be set to a function called Submit Handler.

72
00:04:58,870 --> 00:05:00,850
And we'll close that form up.

73
00:05:02,010 --> 00:05:02,490
Okay.

74
00:05:02,490 --> 00:05:06,300
And then this is going to have a few form groups.

75
00:05:06,300 --> 00:05:10,110
So the first one is going to be the address.

76
00:05:10,110 --> 00:05:15,570
So we're going to give it a control ID of address and let's close that form group.

77
00:05:16,760 --> 00:05:23,810
And then I'm also going to just add a class class name here, and that's going to be me, too.

78
00:05:23,840 --> 00:05:26,440
So just a little bit of margin on the top and bottom.

79
00:05:26,450 --> 00:05:31,550
Then inside the form group, we're going to have the form label, which will be address and then the

80
00:05:31,550 --> 00:05:32,840
form control.

81
00:05:32,840 --> 00:05:34,590
So let's see what we got here.

82
00:05:34,610 --> 00:05:42,110
So form control type is text, enter, address value, is this so address from the state.

83
00:05:42,110 --> 00:05:46,250
And then we're calling set address to change that piece of state.

84
00:05:47,170 --> 00:05:50,860
And if we look here, we're just getting submit handler not defined.

85
00:05:50,860 --> 00:05:52,980
So let's just create that real quick.

86
00:05:52,990 --> 00:05:57,040
So right up here, we'll say submit handler and let's just do.

87
00:05:58,230 --> 00:05:59,790
Console log for now.

88
00:06:01,910 --> 00:06:02,800
Submit handlers.

89
00:06:02,810 --> 00:06:03,470
There we go.

90
00:06:03,470 --> 00:06:05,480
So now we can see the address field.

91
00:06:05,480 --> 00:06:08,150
So we have a few more to to add here.

92
00:06:08,150 --> 00:06:10,490
So I'm going to copy the form group.

93
00:06:11,230 --> 00:06:18,040
And let's create the next field, which is going to be the city so we can get rid of this.

94
00:06:18,830 --> 00:06:25,550
I'll just change all that to city and that's going to be uppercase set city.

95
00:06:26,250 --> 00:06:28,200
That's going to be uppercase.

96
00:06:29,700 --> 00:06:31,110
Okay, so that should do.

97
00:06:31,110 --> 00:06:31,260
Now.

98
00:06:31,260 --> 00:06:35,520
The next one is going to be the postal code because we're just going by these our state here.

99
00:06:35,520 --> 00:06:37,110
So we want postal code.

100
00:06:37,140 --> 00:06:42,750
So let's paste in another form group and let's change address.

101
00:06:43,340 --> 00:06:47,660
To say postal code.

102
00:06:48,690 --> 00:06:51,510
And we'll just make this label.

103
00:06:53,150 --> 00:06:55,260
And this here, I'll say enter.

104
00:06:58,460 --> 00:07:00,380
Postal code and then value.

105
00:07:00,380 --> 00:07:01,370
So that's correct.

106
00:07:01,370 --> 00:07:04,430
And then this here, just want to make sure that P is uppercase.

107
00:07:05,540 --> 00:07:06,680
All right, let's take a look.

108
00:07:07,310 --> 00:07:10,310
And then the last field is going to be the country.

109
00:07:11,330 --> 00:07:12,920
So let's paste that in.

110
00:07:12,920 --> 00:07:14,390
Let's change these.

111
00:07:15,380 --> 00:07:17,000
To country.

112
00:07:18,250 --> 00:07:19,720
Make that uppercase.

113
00:07:19,720 --> 00:07:21,820
And this C right here.

114
00:07:24,500 --> 00:07:27,050
Okay, so now we have all of our fields.

115
00:07:27,230 --> 00:07:30,830
So the last thing we want is the button.

116
00:07:31,510 --> 00:07:35,650
So let's go under the last form group and let's add a button.

117
00:07:38,030 --> 00:07:43,310
So the text is just going to say continue because we're going to continue through our process and we

118
00:07:43,310 --> 00:07:48,590
have a type of submit variant is primary class.

119
00:07:48,590 --> 00:07:50,090
I don't know if we really need that.

120
00:07:50,090 --> 00:07:51,740
Let's yeah, we'll keep that.

121
00:07:52,400 --> 00:07:56,390
So, yeah, that should be that should do it as far as the output goes.

122
00:07:56,660 --> 00:07:59,890
There's a few other things we have to do up top here.

123
00:07:59,900 --> 00:08:06,140
So I'm going to bring in since we're interacting with the cart state, we want to bring in use dispatch

124
00:08:06,140 --> 00:08:08,590
and use use selector.

125
00:08:08,600 --> 00:08:10,460
So let's import.

126
00:08:11,450 --> 00:08:13,760
Use dispatch.

127
00:08:15,260 --> 00:08:18,200
And you select her from React Redux.

128
00:08:18,200 --> 00:08:22,070
And then we're also going to need use navigate because we're going to redirect.

129
00:08:22,070 --> 00:08:25,160
So let's import, use, navigate.

130
00:08:26,570 --> 00:08:34,130
And then we're also going to be calling that or dispatching the Save shipping address action that we

131
00:08:34,159 --> 00:08:36,860
created at the beginning of the video.

132
00:08:36,860 --> 00:08:39,440
So we're going to put that let's bring that in right here.

133
00:08:39,440 --> 00:08:40,549
So import.

134
00:08:41,940 --> 00:08:46,480
Save shipping address and that's going to be from the cart slice.

135
00:08:46,500 --> 00:08:52,980
Now, to get the shipping details from the state, we're going to go right above the submit handler

136
00:08:52,980 --> 00:08:58,920
and let's say const Cart because we need to get the cart state and we use use selector for that.

137
00:08:58,920 --> 00:09:02,160
And then we're going to destructure the shipping address from the cart.

138
00:09:02,880 --> 00:09:03,120
Okay.

139
00:09:03,210 --> 00:09:05,280
Because if we look in our cart slice.

140
00:09:06,070 --> 00:09:06,880
You look up here.

141
00:09:06,880 --> 00:09:08,890
So shipping address, we want to get that.

142
00:09:08,890 --> 00:09:11,860
It's going to be just an empty object by default.

143
00:09:11,860 --> 00:09:19,060
And then we want to call this save shipping address or we want to dispatch it so that we can update

144
00:09:19,060 --> 00:09:21,760
that in the state and in local storage.

145
00:09:21,760 --> 00:09:27,130
So let's initialize our dispatch and navigate.

146
00:09:29,250 --> 00:09:34,590
And then in the submit handler, instead of doing a console log, we'll get rid of that.

147
00:09:34,590 --> 00:09:36,680
And we're just going to call dispatch.

148
00:09:36,690 --> 00:09:42,870
We're going to call save shipping address and pass in the address the city, the postal code and the

149
00:09:42,870 --> 00:09:43,740
country.

150
00:09:44,400 --> 00:09:44,720
Okay.

151
00:09:44,730 --> 00:09:47,820
And then we just want to navigate to the payment page.

152
00:09:47,820 --> 00:09:49,320
So slash payment.

153
00:09:51,450 --> 00:09:51,870
Let's see.

154
00:09:51,900 --> 00:09:54,030
Shipping address is assigned.

155
00:09:56,050 --> 00:09:57,790
But never used.

156
00:10:01,300 --> 00:10:01,990
Right here.

157
00:10:01,990 --> 00:10:03,150
So shipping address.

158
00:10:03,160 --> 00:10:04,390
We're getting that.

159
00:10:05,280 --> 00:10:05,470
Um.

160
00:10:05,490 --> 00:10:06,660
Okay, so.

161
00:10:07,800 --> 00:10:09,840
We're getting the shipping address here.

162
00:10:09,840 --> 00:10:12,300
And we want if it's if this exists.

163
00:10:12,300 --> 00:10:12,600
Right.

164
00:10:12,600 --> 00:10:17,010
So if that's in our state and in local storage, we want that to be in these fields.

165
00:10:17,010 --> 00:10:24,360
So what we need to do is actually take this and cut it and move it above the component state.

166
00:10:25,530 --> 00:10:33,180
Because what I want to do is instead of making these just just an empty string, we want to first check

167
00:10:33,180 --> 00:10:36,280
to see if there's a shipping address.

168
00:10:36,300 --> 00:10:38,850
Address city postal code and country.

169
00:10:38,850 --> 00:10:44,190
So in here, let's set it to shipping address, dot address or.

170
00:10:46,840 --> 00:10:48,790
Or an empty string.

171
00:10:48,820 --> 00:10:49,720
Is that right?

172
00:10:50,670 --> 00:10:51,960
Um, no, we want.

173
00:10:52,230 --> 00:10:53,850
Yeah, it should be like that.

174
00:10:53,850 --> 00:10:56,580
And then we're going to do that for the rest of these fields.

175
00:10:56,580 --> 00:10:57,360
For the rest of these.

176
00:10:57,360 --> 00:10:58,530
So let's do.

177
00:10:59,580 --> 00:11:00,510
Paste those in.

178
00:11:00,510 --> 00:11:04,050
So this second one is going to be city that we're looking for.

179
00:11:04,410 --> 00:11:06,990
Third one is going to be postal code.

180
00:11:09,820 --> 00:11:13,720
And this one is going to be country.

181
00:11:14,720 --> 00:11:15,380
All right.

182
00:11:15,620 --> 00:11:16,760
So I'll save that.

183
00:11:16,760 --> 00:11:17,180
And let's see.

184
00:11:17,210 --> 00:11:21,380
Read properties of undefined reading address.

185
00:11:23,800 --> 00:11:24,220
You know what?

186
00:11:24,220 --> 00:11:26,680
Let's put question marks here.

187
00:11:31,060 --> 00:11:33,250
And that should get rid of that error.

188
00:11:34,950 --> 00:11:36,570
Now let's enter something.

189
00:11:36,570 --> 00:11:41,790
We'll say 20 Main Street, Boston.

190
00:11:44,260 --> 00:11:45,370
Um, country.

191
00:11:45,370 --> 00:11:46,410
Just say USA.

192
00:11:46,420 --> 00:11:53,200
And once I submit this, what should happen is it calls the submit handler dispatches saved, shipping

193
00:11:53,200 --> 00:11:56,680
address, put it in local storage and state and then navigate to payment.

194
00:11:56,680 --> 00:11:58,060
So we'll click continue.

195
00:11:58,090 --> 00:12:00,880
We got navigate we navigated to the payment page.

196
00:12:00,880 --> 00:12:06,610
I'm going to go back and you'll see that even if I reload, that's going to stay in there.

197
00:12:06,610 --> 00:12:11,770
Even if I go to some other page and then I go to my cart, proceed to checkout, This is going to stay

198
00:12:11,770 --> 00:12:15,850
there as long as it's in local storage and we can check.

199
00:12:16,570 --> 00:12:18,100
Let's check our state first.

200
00:12:18,100 --> 00:12:21,280
So we'll go to our redux dev tools.

201
00:12:21,280 --> 00:12:23,920
And you can see in Cart we have.

202
00:12:24,650 --> 00:12:32,300
The shipping address and we have that set here also if we go to application.

203
00:12:32,960 --> 00:12:35,360
And we go to our local storage.

204
00:12:36,400 --> 00:12:38,440
Um, right here.

205
00:12:38,440 --> 00:12:40,810
Local storage in the cart.

206
00:12:41,080 --> 00:12:43,120
We have the shipping address.

207
00:12:43,160 --> 00:12:43,460
Okay.

208
00:12:43,480 --> 00:12:48,790
And as long as that's there, it's going to be displayed because we set it to the default in these use

209
00:12:48,790 --> 00:12:49,690
states.

210
00:12:51,800 --> 00:12:52,400
All right, cool.

211
00:12:52,400 --> 00:12:54,830
So that's what I wanted to do in this video.

212
00:12:54,830 --> 00:13:01,040
And the next one, we're going to create our private root component so that we can't come to this page

213
00:13:01,040 --> 00:13:02,090
if we're not logged in.

214
00:13:02,090 --> 00:13:07,490
Because right now you'll see if I log out and then I go to I'll manually go to Slash.

215
00:13:08,280 --> 00:13:09,450
Shipping.

216
00:13:11,320 --> 00:13:13,460
I'm allowed to come here and I shouldn't be.

217
00:13:13,460 --> 00:13:15,440
It should just go to login.

218
00:13:15,620 --> 00:13:16,010
All right.

219
00:13:16,010 --> 00:13:19,250
So in the next video, we'll create our private root component.