1
00:00:01,140 --> 00:00:05,010
‫With our cart now in place and nicely working,

2
00:00:05,010 --> 00:00:07,920
‫it's time to actually use the cart data

3
00:00:07,920 --> 00:00:09,933
‫to submit a new order.

4
00:00:11,430 --> 00:00:15,390
‫So thankfully for us that is pretty easy now

5
00:00:15,390 --> 00:00:19,410
‫'cause all we have to do is to go to that component

6
00:00:19,410 --> 00:00:21,900
‫and then select the entire cart

7
00:00:21,900 --> 00:00:24,960
‫and then use that to submit the order,

8
00:00:24,960 --> 00:00:26,790
‫because the rest of the logic

9
00:00:26,790 --> 00:00:28,833
‫has already been written before.

10
00:00:29,670 --> 00:00:34,320
‫So here in the order feature, let's come to create order.

11
00:00:34,320 --> 00:00:38,850
‫And so right now we are always submitting our orders

12
00:00:38,850 --> 00:00:41,340
‫using this fake cart object.

13
00:00:41,340 --> 00:00:42,900
‫So this right here.

14
00:00:42,900 --> 00:00:46,053
‫But now of course, let's get rid of that.

15
00:00:47,550 --> 00:00:50,973
‫So let's use useSelector here again.

16
00:00:53,190 --> 00:00:55,923
‫So just make sure that it has been imported,

17
00:00:57,930 --> 00:01:00,333
‫and yeah, there it is.

18
00:01:02,010 --> 00:01:03,240
‫And so I think

19
00:01:03,240 --> 00:01:07,173
‫that here we already have a selector in place.

20
00:01:08,250 --> 00:01:13,053
‫Yeah, so here we have getCart and so let's use that.

21
00:01:14,010 --> 00:01:18,393
‫So getCart just like this.

22
00:01:20,160 --> 00:01:22,230
‫And now let's reload this,

23
00:01:22,230 --> 00:01:25,530
‫and then you see that we get some kind of error here.

24
00:01:25,530 --> 00:01:29,250
‫So "Cannot read properties of undefined".

25
00:01:29,250 --> 00:01:31,803
‫So let's see what we have here.

26
00:01:32,700 --> 00:01:36,600
‫Well, there's some problem here in getCart, apparently,

27
00:01:36,600 --> 00:01:40,200
‫but, well, it shouldn't.

28
00:01:40,200 --> 00:01:42,180
‫So everything looks correct.

29
00:01:42,180 --> 00:01:45,360
‫And we actually already used this in some other place

30
00:01:45,360 --> 00:01:46,983
‫where it worked just fine.

31
00:01:48,330 --> 00:01:51,510
‫Let's just try to log this here to the console.

32
00:01:51,510 --> 00:01:53,343
‫It's always a nice trick.

33
00:01:55,590 --> 00:01:57,750
‫Let's reload here.

34
00:01:57,750 --> 00:02:00,150
‫And we get exactly the same problem.

35
00:02:00,150 --> 00:02:04,710
‫Let's just see if we have our log somewhere here.

36
00:02:04,710 --> 00:02:08,130
‫But as they look at my code again,

37
00:02:08,130 --> 00:02:10,590
‫actually here I'm noticing something.

38
00:02:10,590 --> 00:02:15,450
‫So here we should of course not call this selector function.

39
00:02:15,450 --> 00:02:20,450
‫So Redux is the one who will call this, not us.

40
00:02:20,520 --> 00:02:23,670
‫And so with this we are good again.

41
00:02:23,670 --> 00:02:25,380
‫Now here we have some problem

42
00:02:25,380 --> 00:02:28,830
‫which is that the cart is right now empty.

43
00:02:28,830 --> 00:02:31,800
‫And so in this situation when there is no cart,

44
00:02:31,800 --> 00:02:36,180
‫we shouldn't be able to submit the order, right?

45
00:02:36,180 --> 00:02:39,720
‫And so before we do anything else here,

46
00:02:39,720 --> 00:02:42,330
‫let's check for that empty cart.

47
00:02:42,330 --> 00:02:46,353
‫So if there is no cart dot length,

48
00:02:47,400 --> 00:02:51,750
‫then let's immediately return that empty cart component

49
00:02:51,750 --> 00:02:55,203
‫that we already used in our cart page.

50
00:02:56,520 --> 00:02:58,143
‫So let's grab that.

51
00:02:59,970 --> 00:03:04,970
‫So import EmptyCart from,

52
00:03:06,240 --> 00:03:11,240
‫let's move up, then into the cart and EmptyCart.

53
00:03:12,720 --> 00:03:13,553
‫Nice.

54
00:03:13,553 --> 00:03:17,340
‫And so then this asks us to go back to the menu,

55
00:03:17,340 --> 00:03:19,083
‫add some pizza from there,

56
00:03:21,240 --> 00:03:24,180
‫and then now that works.

57
00:03:24,180 --> 00:03:27,843
‫So now we have something in our cart and are ready to order.

58
00:03:29,550 --> 00:03:32,070
‫So let's get rid of this fake cart.

59
00:03:32,070 --> 00:03:34,530
‫And so now, yeah, as I was saying,

60
00:03:34,530 --> 00:03:37,260
‫we are ready to order indeed.

61
00:03:37,260 --> 00:03:40,923
‫So let's just recap quickly what we did here before,

62
00:03:43,590 --> 00:03:46,837
‫which was to basically pass that cart here

63
00:03:48,870 --> 00:03:50,760
‫as a hidden field.

64
00:03:50,760 --> 00:03:54,630
‫So we converted this cart to a string,

65
00:03:54,630 --> 00:03:58,800
‫and assign that to the value of this hidden input field.

66
00:03:58,800 --> 00:04:00,390
‫And the reason why we had to do

67
00:04:00,390 --> 00:04:04,800
‫that is because we are not able to get the data

68
00:04:04,800 --> 00:04:08,370
‫from Redux here in this action.

69
00:04:08,370 --> 00:04:11,160
‫I mean, there would actually be a way around this,

70
00:04:11,160 --> 00:04:16,050
‫but like this, even though it's a bit of a hack and a trick,

71
00:04:16,050 --> 00:04:21,050
‫this is actually a bit cleaner than doing that now, right.

72
00:04:21,480 --> 00:04:26,480
‫And then here, let's try to finally submit an order,

73
00:04:26,520 --> 00:04:31,520
‫well, actually, here we need to get back this code.

74
00:04:33,840 --> 00:04:35,820
‫So the code that actually submits the order

75
00:04:35,820 --> 00:04:36,843
‫in the first place.

76
00:04:39,780 --> 00:04:42,810
‫And then here, let's add some phone number.

77
00:04:42,810 --> 00:04:46,020
‫Here's some random address, which is not really correct

78
00:04:46,020 --> 00:04:50,253
‫of course, but now let's see if this works.

79
00:04:51,180 --> 00:04:53,730
‫So let's place our order.

80
00:04:53,730 --> 00:04:55,083
‫Let's wait for it.

81
00:04:57,570 --> 00:04:59,223
‫And there it is.

82
00:05:00,360 --> 00:05:03,960
‫So now our application is basically working.

83
00:05:03,960 --> 00:05:05,880
‫So we have the three margaritas

84
00:05:05,880 --> 00:05:09,510
‫and the one romana that we added to the cart.

85
00:05:09,510 --> 00:05:11,730
‫And so they are now really part

86
00:05:11,730 --> 00:05:15,750
‫of this brand new order with this id right there.

87
00:05:15,750 --> 00:05:20,100
‫Here we just have some problem with the key prop.

88
00:05:20,100 --> 00:05:21,723
‫So let's come back here.

89
00:05:24,390 --> 00:05:28,407
‫So this is probably just called "pizzaId".

90
00:05:32,910 --> 00:05:34,743
‫But that's not really important.

91
00:05:35,820 --> 00:05:36,653
‫Nice.

92
00:05:37,680 --> 00:05:40,350
‫Now you might have noticed a small problem

93
00:05:40,350 --> 00:05:44,400
‫which is that we still have the pizzas in our cart.

94
00:05:44,400 --> 00:05:47,550
‫So that shouldn't be happening, right?

95
00:05:47,550 --> 00:05:49,770
‫So usually after you place an order,

96
00:05:49,770 --> 00:05:53,310
‫then your cart gets automatically emptied out.

97
00:05:53,310 --> 00:05:56,133
‫And so let's implement that here as well,

98
00:05:57,090 --> 00:06:00,090
‫even though it is not going to be super easy.

99
00:06:00,090 --> 00:06:04,020
‫So we will have to use some kind of hack here again

100
00:06:04,020 --> 00:06:09,020
‫because clearly the dispatching of the clear cart action

101
00:06:09,180 --> 00:06:13,860
‫will need to happen right here inside this form action.

102
00:06:13,860 --> 00:06:15,750
‫However, for dispatching,

103
00:06:15,750 --> 00:06:18,750
‫we need to call the use dispatch hook,

104
00:06:18,750 --> 00:06:21,720
‫which is only available in components

105
00:06:21,720 --> 00:06:25,023
‫and not in a regular function like this one.

106
00:06:25,950 --> 00:06:28,500
‫So the hack that we can use

107
00:06:28,500 --> 00:06:31,980
‫and which we should really, really not overuse

108
00:06:31,980 --> 00:06:35,610
‫is to directly import the store object here

109
00:06:35,610 --> 00:06:40,610
‫into this function and then dispatch directly on that store.

110
00:06:40,860 --> 00:06:42,963
‫So let me show you what I mean by that.

111
00:06:44,070 --> 00:06:48,510
‫So here I will just try to import the store,

112
00:06:48,510 --> 00:06:50,193
‫just not really anywhere here.

113
00:06:51,330 --> 00:06:53,313
‫So let's just do that manually.

114
00:06:54,630 --> 00:06:59,213
‫So import the store from and further up,

115
00:07:02,130 --> 00:07:04,863
‫and then here we have store.js.

116
00:07:06,120 --> 00:07:08,280
‫So this is our store.

117
00:07:08,280 --> 00:07:10,590
‫And here on the store object,

118
00:07:10,590 --> 00:07:13,470
‫we can just call dispatch directly.

119
00:07:13,470 --> 00:07:15,690
‫And so here we can now then use

120
00:07:15,690 --> 00:07:18,873
‫that clearCart action creator.

121
00:07:21,540 --> 00:07:25,350
‫Alright, so again, a bit of a hacky approach

122
00:07:25,350 --> 00:07:29,310
‫but this is what we have to do in order to make it work.

123
00:07:29,310 --> 00:07:32,130
‫But really don't overuse this technique

124
00:07:32,130 --> 00:07:36,210
‫because it deactivates a couple of performance optimizations

125
00:07:36,210 --> 00:07:38,193
‫of Redux on this page.

126
00:07:40,740 --> 00:07:43,383
‫So do not overuse.

127
00:07:45,780 --> 00:07:50,780
‫So let's try this out now.

128
00:07:53,640 --> 00:07:57,150
‫So let's clear our cart actually manually,

129
00:07:57,150 --> 00:08:00,540
‫and then let's try some different pizzas here.

130
00:08:00,540 --> 00:08:01,373
‫This time,

131
00:08:04,350 --> 00:08:05,343
‫open the cart,

132
00:08:08,940 --> 00:08:12,303
‫some valid phone number here, then some address.

133
00:08:13,800 --> 00:08:16,050
‫Let's give it priority as well.

134
00:08:16,050 --> 00:08:18,930
‫And let's try to place our order,

135
00:08:18,930 --> 00:08:20,370
‫and there we go.

136
00:08:20,370 --> 00:08:24,783
‫And as you see now, our cart is actually empty.

137
00:08:25,770 --> 00:08:26,603
‫Great.

138
00:08:29,340 --> 00:08:32,100
‫And yeah, it is nowhere to be seen here.

139
00:08:32,100 --> 00:08:37,100
‫And indeed, yeah, the pizzas are no longer in the cart.

140
00:08:38,370 --> 00:08:43,370
‫But now finally, for one final small feature,

141
00:08:43,440 --> 00:08:46,170
‫let me add a pizza again to the cart

142
00:08:46,170 --> 00:08:50,340
‫because now here I want to show the final price right here

143
00:08:50,340 --> 00:08:51,483
‫in this button.

144
00:08:53,460 --> 00:08:55,950
‫Now right, so that shouldn't be too hard,

145
00:08:55,950 --> 00:08:58,230
‫because we already have all the things

146
00:08:58,230 --> 00:08:59,613
‫that we need for that.

147
00:09:01,470 --> 00:09:04,320
‫So here we have a lot of code already

148
00:09:04,320 --> 00:09:08,853
‫but let's just keep going for this final feature.

149
00:09:09,690 --> 00:09:14,690
‫So the total cart price is given from useSelector,

150
00:09:17,610 --> 00:09:19,138
‫and then there we have

151
00:09:19,138 --> 00:09:23,073
‫the getTotalCartPrice selector function.

152
00:09:25,170 --> 00:09:27,870
‫So this is the total cart price right now

153
00:09:27,870 --> 00:09:31,260
‫but if the user chooses a priority,

154
00:09:31,260 --> 00:09:33,123
‫then that will actually change.

155
00:09:34,170 --> 00:09:38,333
‫So what we want to display in the end is the total price,

156
00:09:40,020 --> 00:09:45,020
‫which will be the total cart price, plus the priority price,

157
00:09:48,060 --> 00:09:52,233
‫which doesn't exist yet, but which we can create right here.

158
00:09:53,490 --> 00:09:55,710
‫So priorityPrice, and for now,

159
00:09:55,710 --> 00:09:58,830
‫let's just set it to zero here.

160
00:09:58,830 --> 00:10:03,830
‫So I want to show this total price right here in the button.

161
00:10:03,930 --> 00:10:08,730
‫So we can say Order Now, where is that?

162
00:10:08,730 --> 00:10:10,230
‫Right here.

163
00:10:10,230 --> 00:10:15,230
‫So order now for, and then the total price.

164
00:10:18,030 --> 00:10:20,823
‫And then we also need to format the currency here.

165
00:10:22,080 --> 00:10:24,870
‫So format currency,

166
00:10:24,870 --> 00:10:27,990
‫at least I think that's what it is called.

167
00:10:27,990 --> 00:10:28,823
‫Let's see.

168
00:10:34,080 --> 00:10:35,583
‫Yeah, that's the name.

169
00:10:38,070 --> 00:10:42,270
‫So apparently we need to import this manually,

170
00:10:42,270 --> 00:10:44,103
‫which I really don't like.

171
00:10:46,200 --> 00:10:51,200
‫So import formatCurrency from, let's go up, up again,

172
00:10:54,600 --> 00:10:57,840
‫and then into the helpers or the utils,

173
00:10:57,840 --> 00:11:01,470
‫and then helpers dot js.

174
00:11:01,470 --> 00:11:05,070
‫This is probably actually a named export.

175
00:11:05,070 --> 00:11:07,050
‫And yeah, there we go.

176
00:11:07,050 --> 00:11:11,493
‫Here we have the 45 euros, which is what we have down there.

177
00:11:12,570 --> 00:11:15,003
‫But now what about the priority price?

178
00:11:16,200 --> 00:11:17,823
‫So how do we calculate this?

179
00:11:18,810 --> 00:11:21,090
‫So basically whenever we click here,

180
00:11:21,090 --> 00:11:23,460
‫we then want to update the price

181
00:11:23,460 --> 00:11:26,850
‫and we want to update it by exactly 20%

182
00:11:26,850 --> 00:11:29,430
‫of this total cart price,

183
00:11:29,430 --> 00:11:31,980
‫'cause from the list of requirements,

184
00:11:31,980 --> 00:11:36,000
‫that is the price of making the order priority.

185
00:11:36,000 --> 00:11:41,000
‫So if we want to change the UI whenever this here changes,

186
00:11:41,460 --> 00:11:42,960
‫so whenever we click here,

187
00:11:42,960 --> 00:11:46,740
‫that means that we need some state, right?

188
00:11:46,740 --> 00:11:49,980
‫So basically we need a reactive value.

189
00:11:49,980 --> 00:11:53,193
‫And so that's why here we actually already have that.

190
00:11:54,780 --> 00:11:57,903
‫Let me place that at the very top right here.

191
00:11:58,860 --> 00:12:02,220
‫And then let's also use this here.

192
00:12:02,220 --> 00:12:03,630
‫So now we are making

193
00:12:03,630 --> 00:12:07,863
‫this checkbox here a controlled element again.

194
00:12:10,170 --> 00:12:11,130
‫Okay.

195
00:12:11,130 --> 00:12:14,190
‫And so then we can use that reactive value,

196
00:12:14,190 --> 00:12:18,930
‫so that piece of state, here to compute the priority price.

197
00:12:18,930 --> 00:12:23,070
‫So in case we are with priority,

198
00:12:23,070 --> 00:12:28,070
‫then the price should be the total cart price times 0.2,

199
00:12:28,950 --> 00:12:31,263
‫and otherwise just zero.

200
00:12:33,270 --> 00:12:34,593
‫Yeah. Nice.

201
00:12:37,350 --> 00:12:42,350
‫So let's input a phone number, then this, placing our order,

202
00:12:42,960 --> 00:12:45,210
‫and with this we are done.

203
00:12:45,210 --> 00:12:48,120
‫Or actually, we are not really done,

204
00:12:48,120 --> 00:12:52,680
‫because we did select priority, but it is not here.

205
00:12:52,680 --> 00:12:54,720
‫So something strange happened,

206
00:12:54,720 --> 00:12:56,430
‫but I think I know the reason.

207
00:12:56,430 --> 00:13:01,430
‫I think it is because we changed now the value.

208
00:13:01,560 --> 00:13:04,800
‫So here in this checkbox,

209
00:13:04,800 --> 00:13:08,670
‫now the value will no longer be on and off.

210
00:13:08,670 --> 00:13:10,023
‫So where is that?

211
00:13:12,990 --> 00:13:14,400
‫Here.

212
00:13:14,400 --> 00:13:17,850
‫So again here, the value will now no longer be

213
00:13:17,850 --> 00:13:21,120
‫on like we had here earlier.

214
00:13:21,120 --> 00:13:24,060
‫So here we were checking if that value is on,

215
00:13:24,060 --> 00:13:26,283
‫but instead now it will be true.

216
00:13:27,210 --> 00:13:31,230
‫So true as a string. All right.

217
00:13:31,230 --> 00:13:35,160
‫So no longer just on, but really true or false.

218
00:13:35,160 --> 00:13:39,900
‫And so here we then want to give this order priority

219
00:13:39,900 --> 00:13:43,110
‫in case that the data that we receive is equal

220
00:13:43,110 --> 00:13:44,847
‫to the string of "true".

221
00:13:45,810 --> 00:13:47,730
‫So let's try that again.

222
00:13:47,730 --> 00:13:52,500
‫So I said initially that this was gonna be a short

223
00:13:52,500 --> 00:13:56,823
‫and easy video, but well, there's always a lot to do.

224
00:13:59,160 --> 00:14:01,110
‫So let's try again.

225
00:14:01,110 --> 00:14:03,663
‫Let's give ourselves priority again.

226
00:14:04,860 --> 00:14:06,540
‫Well, let's wait for it.

227
00:14:06,540 --> 00:14:09,630
‫Nice. So now that worked.

228
00:14:09,630 --> 00:14:12,690
‫And so now indeed we are finished,

229
00:14:12,690 --> 00:14:16,500
‫at least with what we set out to do in this video

230
00:14:16,500 --> 00:14:18,930
‫because the list of requirements

231
00:14:18,930 --> 00:14:21,900
‫of this app still has, I think,

232
00:14:21,900 --> 00:14:24,540
‫one or two things that we should implement.

233
00:14:24,540 --> 00:14:28,083
‫And so let's get to that for the rest of this section.