1 00:00:00,290 --> 00:00:00,710 Okay. 2 00:00:00,710 --> 00:00:08,720 So in the last video we set up our basically our state for the placeholder to create a new order. 3 00:00:08,720 --> 00:00:13,400 And we also started the place order screen, which right now just looks like this. 4 00:00:13,400 --> 00:00:19,570 So in this video I want to finish up the UI here and also have the ability to place the order. 5 00:00:19,580 --> 00:00:24,680 Now, the way this system works is we place the order first and then we go to payment. 6 00:00:24,680 --> 00:00:29,210 And then after payment, the Is paid flag is updated to true. 7 00:00:29,210 --> 00:00:34,460 And then if we want to set it to delivered, we can go in as an admin and set it to delivered. 8 00:00:34,460 --> 00:00:38,330 So that's the kind of the workflow of this application. 9 00:00:38,330 --> 00:00:44,750 Now we're going to have to let's see, we're going to bring in a couple of things. 10 00:00:44,750 --> 00:00:46,970 We are going to need use dispatch. 11 00:00:47,800 --> 00:00:49,120 And. 12 00:00:50,440 --> 00:00:54,310 As far we're going to need to react toast to FY as well. 13 00:00:54,310 --> 00:00:55,150 So let's. 14 00:00:56,160 --> 00:00:58,380 Import toast. 15 00:01:00,320 --> 00:01:03,350 Import toast from React. 16 00:01:03,380 --> 00:01:03,660 Toast. 17 00:01:03,660 --> 00:01:04,319 Defy. 18 00:01:04,340 --> 00:01:07,190 And then I'm also going to want the loader component. 19 00:01:07,190 --> 00:01:09,200 Let's import end message. 20 00:01:09,200 --> 00:01:12,890 So we'll bring that in and let's import. 21 00:01:13,730 --> 00:01:14,750 Loader. 22 00:01:16,460 --> 00:01:17,270 As well. 23 00:01:17,270 --> 00:01:18,260 And what else? 24 00:01:18,260 --> 00:01:19,490 We need the mutation. 25 00:01:19,490 --> 00:01:22,520 Remember the the use create order mutation. 26 00:01:22,520 --> 00:01:24,440 So let's import. 27 00:01:25,640 --> 00:01:32,960 Use create order mutation that's going to be from. 28 00:01:34,640 --> 00:01:35,840 And that's not right. 29 00:01:36,950 --> 00:01:39,280 That's going to be from let's see, where are we? 30 00:01:39,290 --> 00:01:40,230 We're in components. 31 00:01:40,230 --> 00:01:49,760 So we want to go up one level into slices and then we want the orders API slice and the clear cart items 32 00:01:49,760 --> 00:01:50,870 that we added. 33 00:01:51,120 --> 00:01:53,540 We want to bring that in, let's say clear. 34 00:01:54,330 --> 00:01:56,520 Cart items. 35 00:01:56,520 --> 00:02:00,150 And let's see, that's going to come from the cart slice. 36 00:02:00,150 --> 00:02:03,000 So dot, dot slash slices. 37 00:02:03,000 --> 00:02:04,860 Slash cart, slice. 38 00:02:06,820 --> 00:02:16,300 And then let's go down here into where we have our columns and we're going to start with the first column 39 00:02:16,300 --> 00:02:16,570 here. 40 00:02:16,570 --> 00:02:20,860 So let's get rid of that and we're going to have a list group. 41 00:02:21,160 --> 00:02:24,070 So we'll give that a variant of flush. 42 00:02:24,070 --> 00:02:27,820 And then inside the list group, we'll have a list group item. 43 00:02:28,420 --> 00:02:29,650 Let's close that up. 44 00:02:30,450 --> 00:02:35,010 So list group item and in the list group item we'll have an H two. 45 00:02:35,310 --> 00:02:37,800 Let's say we'll just say shipping. 46 00:02:40,360 --> 00:02:44,680 And underneath that we're going to have paragraph. 47 00:02:46,230 --> 00:02:52,920 And in here we'll have a label of address and I want the just the full address. 48 00:02:52,920 --> 00:02:57,420 So remember this cart dot shipping address has an address field. 49 00:02:57,420 --> 00:02:59,220 It also has a city field. 50 00:02:59,220 --> 00:03:01,110 So I want to do that, the city. 51 00:03:01,110 --> 00:03:03,240 And then I also want the postal code. 52 00:03:03,240 --> 00:03:08,100 So let's go after that and let's add the postal code. 53 00:03:08,520 --> 00:03:13,860 And then I guess, yeah, we'll put a comma and then we'll have the country. 54 00:03:14,100 --> 00:03:16,350 So all that stuff should be in the state. 55 00:03:16,350 --> 00:03:17,910 In fact, let's save it. 56 00:03:17,910 --> 00:03:18,870 And there we go. 57 00:03:18,870 --> 00:03:21,690 So we have our address printed out there. 58 00:03:22,320 --> 00:03:24,180 Okay, so that's the first list group item. 59 00:03:24,180 --> 00:03:27,990 Let's go under that one and let's create another list group item. 60 00:03:30,630 --> 00:03:35,610 So let's group item and this is going to be the payment method. 61 00:03:35,610 --> 00:03:42,660 So for that, let's do a strong tag and we'll say method. 62 00:03:43,300 --> 00:03:44,110 Colon. 63 00:03:44,110 --> 00:03:50,020 And then underneath that I'm going to put cart dot payment method, which should be PayPal. 64 00:03:51,290 --> 00:03:54,650 So under that list, group item, let's create another one. 65 00:03:56,840 --> 00:04:05,000 And let's say for this item, this is going to be just an our order items which is in cart dot order 66 00:04:05,000 --> 00:04:06,380 items and it's an array. 67 00:04:06,380 --> 00:04:09,620 So we're going to have to map through it. 68 00:04:09,620 --> 00:04:12,020 But let's make sure that there are some there. 69 00:04:12,020 --> 00:04:13,640 So we'll say if. 70 00:04:15,210 --> 00:04:17,250 If they are there. 71 00:04:17,820 --> 00:04:19,870 Then do something or show something. 72 00:04:19,890 --> 00:04:22,650 If not, then show something else. 73 00:04:23,610 --> 00:04:23,940 Let's see. 74 00:04:23,940 --> 00:04:24,830 We need our. 75 00:04:24,870 --> 00:04:25,270 Yeah. 76 00:04:25,950 --> 00:04:27,810 Now in this first one. 77 00:04:29,190 --> 00:04:31,290 We're going to have a message. 78 00:04:31,290 --> 00:04:36,300 So we're saying if it's equal to zero, then we'll have a message using our message component that just 79 00:04:36,300 --> 00:04:38,070 says your cart is empty. 80 00:04:38,100 --> 00:04:43,890 Else So in this, then we're going to want to have a list group here. 81 00:04:45,060 --> 00:04:50,470 And inside that list group, we're going to loop through all of our items and output each one. 82 00:04:50,490 --> 00:04:52,500 So let's. 83 00:04:53,510 --> 00:04:56,840 Say cart dot order. 84 00:04:56,840 --> 00:04:57,620 Items. 85 00:04:57,620 --> 00:04:58,850 Dot map. 86 00:04:59,880 --> 00:05:02,130 And we're going to pass in here. 87 00:05:03,450 --> 00:05:09,300 Set that to parentheses and we're going to say for each one, call it item and we also want to get the 88 00:05:09,300 --> 00:05:15,810 index and then let's output a list group item with a key. 89 00:05:16,830 --> 00:05:18,840 And let's end that list group item. 90 00:05:18,840 --> 00:05:26,250 So for each each order item, we'll have a list group item, and inside that we'll have a row. 91 00:05:28,690 --> 00:05:31,060 And inside that, let's do a column. 92 00:05:31,060 --> 00:05:32,350 We'll do a one. 93 00:05:33,340 --> 00:05:37,180 Column on medium screens, and this is going to be the image. 94 00:05:37,180 --> 00:05:41,440 So we'll say image and then the source is going to be the item image. 95 00:05:41,440 --> 00:05:45,640 So item dot image, and then let's do the alt. 96 00:05:46,920 --> 00:05:50,810 The ourt will do item name and we're going to do fluid and rounded. 97 00:05:50,820 --> 00:05:53,370 So we should be able to at least see. 98 00:05:54,270 --> 00:05:57,660 Can't read properties of undefined reading map. 99 00:05:59,060 --> 00:05:59,810 Let's see. 100 00:05:59,810 --> 00:06:00,740 What did I do here? 101 00:06:00,740 --> 00:06:02,930 So, cart order items. 102 00:06:04,010 --> 00:06:04,670 Oh, I'm sorry. 103 00:06:04,670 --> 00:06:05,660 It's not order items. 104 00:06:05,660 --> 00:06:06,020 It's. 105 00:06:06,790 --> 00:06:08,350 It's carte items, right? 106 00:06:09,430 --> 00:06:10,150 Hold on a second. 107 00:06:10,150 --> 00:06:12,070 I'm having kind of a brain fart here. 108 00:06:12,070 --> 00:06:12,400 Yeah. 109 00:06:12,430 --> 00:06:14,590 Cart items, not order items. 110 00:06:18,740 --> 00:06:19,350 There we go. 111 00:06:19,370 --> 00:06:19,730 All right. 112 00:06:19,730 --> 00:06:22,120 So it's showing the image. 113 00:06:22,130 --> 00:06:25,190 Now we want to create another column after that. 114 00:06:25,190 --> 00:06:35,270 So under this one, let's do call and let's say MD for this one we'll do actually, let's not we don't 115 00:06:35,270 --> 00:06:36,140 even need. 116 00:06:37,280 --> 00:06:38,660 We can just do call for this. 117 00:06:38,660 --> 00:06:40,490 And this is going to be the. 118 00:06:41,560 --> 00:06:42,460 Uh, what is this going to be? 119 00:06:42,460 --> 00:06:43,050 The the. 120 00:06:43,090 --> 00:06:47,350 It's going to be the product name or the item name, but we're going to have a link around it. 121 00:06:47,350 --> 00:06:55,180 So let's say link to the products or the individual product, have the item name in there. 122 00:06:56,710 --> 00:06:57,490 Okay, so there we go. 123 00:06:57,490 --> 00:07:00,380 And that will link to the specific product. 124 00:07:00,400 --> 00:07:06,010 Then underneath that column, we're going to have another column that's for wide. 125 00:07:06,880 --> 00:07:08,950 And that's going to be. 126 00:07:11,020 --> 00:07:13,300 That's going to be the price. 127 00:07:14,360 --> 00:07:16,760 So what we're going to do is show the item. 128 00:07:17,600 --> 00:07:19,010 The item quantity. 129 00:07:19,010 --> 00:07:25,460 So item dot qty and we want to multiply or we want to actually multiply here. 130 00:07:25,460 --> 00:07:29,360 We're just going to show that we're multiplying just to show the user. 131 00:07:29,360 --> 00:07:36,560 So we'll say whatever the quantity x, whatever the price and then equals the actual item quantity times 132 00:07:36,560 --> 00:07:37,550 the price. 133 00:07:38,660 --> 00:07:40,460 All right, if that makes sense. 134 00:07:41,360 --> 00:07:42,550 Let's see. 135 00:07:42,560 --> 00:07:43,640 We need to just. 136 00:07:44,030 --> 00:07:46,550 Yeah, let's do that so we can see. 137 00:07:46,580 --> 00:07:51,320 One times 49 to 99 is 49.99. 138 00:07:51,560 --> 00:07:54,590 And we can add some other items just to kind of. 139 00:07:55,460 --> 00:07:57,050 See what it what it looks like. 140 00:07:57,050 --> 00:07:59,390 So we'll do two of these cameras. 141 00:08:00,130 --> 00:08:05,110 And now if I proceed to checkout, I go through shipping my payment and there we go. 142 00:08:05,110 --> 00:08:10,060 So we get two times the item price and then the total of that item. 143 00:08:11,200 --> 00:08:11,680 All right. 144 00:08:11,680 --> 00:08:16,330 And yeah, that should do it for for that side, for that column. 145 00:08:16,330 --> 00:08:18,820 Now we want to do this over here. 146 00:08:18,970 --> 00:08:26,500 So where we have our call for let's get rid of this text and we're going to have a card. 147 00:08:26,500 --> 00:08:28,420 I'm going to wrap this all in a card. 148 00:08:30,540 --> 00:08:35,429 And inside that card we're going to have a list group. 149 00:08:35,429 --> 00:08:37,230 So let's say list group. 150 00:08:37,890 --> 00:08:41,730 And I'm going to give it a variant of flush. 151 00:08:42,690 --> 00:08:44,850 And we'll close that list group. 152 00:08:46,910 --> 00:08:48,890 Don't know why that's not working. 153 00:08:50,440 --> 00:08:50,830 Okay. 154 00:08:50,830 --> 00:08:53,890 And then inside here, we'll have our list group item. 155 00:08:55,040 --> 00:08:57,020 Close the list Group item. 156 00:08:57,920 --> 00:09:00,320 And this is going to be just a heading. 157 00:09:00,320 --> 00:09:04,550 So the order summary, then we'll do another list group item. 158 00:09:07,400 --> 00:09:09,530 So let's group item. 159 00:09:10,480 --> 00:09:10,930 Okay. 160 00:09:10,930 --> 00:09:13,330 And then in here, I'm going to put a row. 161 00:09:14,030 --> 00:09:15,740 And we'll close that row. 162 00:09:17,560 --> 00:09:21,970 And this is going to be it's going to have a call with the heading of items. 163 00:09:22,820 --> 00:09:24,350 Yeah, I guess we'll keep the colon. 164 00:09:24,350 --> 00:09:26,780 And then another call with. 165 00:09:28,460 --> 00:09:32,480 So another call with the the item's price. 166 00:09:32,480 --> 00:09:37,850 So I'm going to put a money sign here and then we can get the cart dot. 167 00:09:38,630 --> 00:09:40,910 Items price. 168 00:09:41,710 --> 00:09:47,500 So if we take a look, we see order summary and then the items and we have the total of the items. 169 00:09:47,710 --> 00:09:48,070 Okay. 170 00:09:48,070 --> 00:09:49,060 Well, not the total. 171 00:09:49,060 --> 00:09:50,410 It's just the item price. 172 00:09:50,410 --> 00:09:56,110 We're also going to add the tax and shipping and then the the grand total of things. 173 00:09:56,380 --> 00:09:56,770 All right. 174 00:09:56,770 --> 00:10:00,790 So I'm going to copy this list group item with the two calls. 175 00:10:02,150 --> 00:10:07,190 The row in two calls and then paste it in, and this one is going to be for shipping. 176 00:10:07,220 --> 00:10:09,230 So we'll say shipping. 177 00:10:09,830 --> 00:10:12,140 And it'll be cart dot. 178 00:10:13,800 --> 00:10:15,030 Shipping price. 179 00:10:15,030 --> 00:10:22,170 So if we look at that, shipping is zero because if it's over $100, then there's no shipping charge. 180 00:10:22,470 --> 00:10:24,090 We'll paste in again. 181 00:10:24,210 --> 00:10:26,040 This is going to be the tax. 182 00:10:26,220 --> 00:10:29,220 So we'll say tax and cart. 183 00:10:30,190 --> 00:10:32,920 Dot tax price. 184 00:10:33,160 --> 00:10:36,720 So we got to 8650 for the tax. 185 00:10:36,730 --> 00:10:38,500 Now we want the total. 186 00:10:38,500 --> 00:10:43,930 So under that list group item, let's paste that in and change this to total. 187 00:10:43,930 --> 00:10:46,510 And we want the total price from the car. 188 00:10:48,590 --> 00:10:54,290 And we get 21, 96, 47, and yours is probably different depending on what items you added. 189 00:10:55,070 --> 00:10:55,460 All right. 190 00:10:55,490 --> 00:10:58,190 Now we're going to have a button here. 191 00:10:58,190 --> 00:10:59,990 So under. 192 00:11:01,170 --> 00:11:03,090 Let's see under the list group item. 193 00:11:03,090 --> 00:11:05,100 Let's create another list group item. 194 00:11:10,690 --> 00:11:12,390 I don't know why that changed. 195 00:11:12,400 --> 00:11:16,300 So in this list, group item will be the button. 196 00:11:16,300 --> 00:11:20,320 So let's put a button and the type is going to be button. 197 00:11:20,440 --> 00:11:21,010 Oops. 198 00:11:21,890 --> 00:11:23,120 So type. 199 00:11:24,320 --> 00:11:33,140 Button and then let's do the class name BTN Block And I want this to be disabled if there are no items 200 00:11:33,140 --> 00:11:34,160 in the cart. 201 00:11:35,590 --> 00:11:36,070 Okay. 202 00:11:36,070 --> 00:11:40,750 And then we're going to have an on click, which is not going to be that. 203 00:11:40,750 --> 00:11:46,060 It's going to be a function called place order. 204 00:11:48,710 --> 00:11:49,400 Or Yeah. 205 00:11:49,400 --> 00:11:51,950 Place, we'll say place order handler. 206 00:11:52,870 --> 00:11:55,760 And actually, I don't want it to be. 207 00:11:55,780 --> 00:11:56,950 We just want it. 208 00:11:57,830 --> 00:12:00,890 To be equal directly to the function like that. 209 00:12:01,800 --> 00:12:04,080 And then we can end the button. 210 00:12:04,080 --> 00:12:06,990 And for the text we'll say place order. 211 00:12:09,960 --> 00:12:11,610 Okay, so I'll save that. 212 00:12:11,610 --> 00:12:12,390 Let's see. 213 00:12:12,420 --> 00:12:14,220 Place order handling not defined. 214 00:12:14,220 --> 00:12:16,080 So we need to define that. 215 00:12:16,860 --> 00:12:18,840 Let's go up here and. 216 00:12:19,710 --> 00:12:20,400 We'll go. 217 00:12:20,400 --> 00:12:21,480 Let's go above. 218 00:12:22,020 --> 00:12:25,290 We'll go under the useeffect and say const. 219 00:12:27,410 --> 00:12:29,750 Place order handler. 220 00:12:33,980 --> 00:12:39,260 And before we do that, I do want to get from the mutation, right? 221 00:12:39,260 --> 00:12:43,430 So we brought in use create order mutation. 222 00:12:43,430 --> 00:12:49,300 I want to get the the actual function along with the is loading and the error. 223 00:12:49,310 --> 00:12:53,600 So let's put that right here above the use effect. 224 00:12:53,750 --> 00:12:55,820 We're going to say const 225 00:12:58,040 --> 00:13:04,550 and inside brackets and we want to set that to use, create or mutation. 226 00:13:04,550 --> 00:13:10,220 So we'll say create order, which is going to be the name of the actual function or the action. 227 00:13:10,220 --> 00:13:12,320 And then we can also get. 228 00:13:13,160 --> 00:13:16,400 Is loading and error. 229 00:13:17,760 --> 00:13:21,390 Okay, Now, if there's an error, I'm going to put that. 230 00:13:23,070 --> 00:13:25,350 Down here above the button. 231 00:13:25,350 --> 00:13:27,810 So let's see where we have that. 232 00:13:27,810 --> 00:13:29,580 We have the total and then we have the button. 233 00:13:29,580 --> 00:13:33,780 I'm going to go in between those and add another list group item. 234 00:13:37,160 --> 00:13:40,880 And inside that, let's say if there's an error. 235 00:13:42,230 --> 00:13:48,080 Then let's show a message component which we already brought in with that error. 236 00:13:51,910 --> 00:13:54,450 Expected corresponding JSX tag. 237 00:13:54,460 --> 00:13:59,560 For some reason, the last list group keeps changing to an item, so just be aware of that if that's 238 00:13:59,560 --> 00:14:00,610 happening to you. 239 00:14:01,690 --> 00:14:03,100 And we have our place order. 240 00:14:03,100 --> 00:14:07,210 And if there's any kind of information or any error that will go in there. 241 00:14:08,440 --> 00:14:12,820 Now, if it's loading, I'm going to put that right below the button. 242 00:14:12,820 --> 00:14:15,010 So right here, we'll say. 243 00:14:15,730 --> 00:14:20,320 If is if is loading, then show the loader. 244 00:14:21,810 --> 00:14:21,870 Good. 245 00:14:21,930 --> 00:14:26,880 Okay, Now we want to handle the the place order handler, which is this button right here. 246 00:14:26,880 --> 00:14:28,110 And that should do just that. 247 00:14:28,110 --> 00:14:31,020 It should call this right here. 248 00:14:31,740 --> 00:14:32,430 Where is it? 249 00:14:33,520 --> 00:14:39,370 Well, it's going to call this handler, but in this handler we want to call Create Order, which is 250 00:14:39,370 --> 00:14:45,640 in our slice our orders API, slice, create order, which will then make the post request, it'll send 251 00:14:45,640 --> 00:14:48,640 the data and we should get an order created. 252 00:14:48,640 --> 00:14:51,400 So let's go into here. 253 00:14:51,880 --> 00:14:56,740 We do need to initialize dispatch, so I'll just do that up here with navigate. 254 00:14:58,080 --> 00:15:01,650 And let's do a try catch here. 255 00:15:02,670 --> 00:15:03,990 So try catch. 256 00:15:03,990 --> 00:15:04,860 And then. 257 00:15:05,580 --> 00:15:11,220 I'm going to create a variable for the response and we're going to set that to a weight on the create 258 00:15:11,220 --> 00:15:12,030 order. 259 00:15:12,030 --> 00:15:17,730 And then inside create order, we're going to pass in our order items. 260 00:15:17,730 --> 00:15:21,510 So order items and that's going to be from our cart. 261 00:15:21,730 --> 00:15:22,040 Okay. 262 00:15:22,050 --> 00:15:24,270 All this stuff is going to be from our cart. 263 00:15:24,300 --> 00:15:28,170 The shipping address, the payment method. 264 00:15:28,790 --> 00:15:31,580 The what else do we have the items? 265 00:15:31,580 --> 00:15:32,810 Price. 266 00:15:33,590 --> 00:15:35,920 The what else? 267 00:15:35,930 --> 00:15:36,980 Shipping. 268 00:15:38,640 --> 00:15:41,580 Shipping price is going to be from the cart. 269 00:15:41,610 --> 00:15:44,580 The tax price and the total price. 270 00:15:46,900 --> 00:15:55,570 From the cart total price and we just want to unwrap since this returns a promise, just do unwrap and 271 00:15:55,570 --> 00:15:59,770 then we want to dispatch the clear cart items. 272 00:16:00,070 --> 00:16:08,110 So keep in mind if it's, if it's from an API slice, one of these three slices we, we just call it 273 00:16:08,110 --> 00:16:18,160 right, we get the function from the mutation and we call it if it's a regular action from cart slice, 274 00:16:18,160 --> 00:16:20,320 then we need to dispatch it. 275 00:16:20,320 --> 00:16:28,150 So right under that, let's go ahead and dispatch the clear cart items and then after that's done, 276 00:16:28,150 --> 00:16:29,620 we're going to navigate. 277 00:16:31,990 --> 00:16:37,960 And let's navigate to the actual order, which is going to be let's actually put. 278 00:16:39,410 --> 00:16:40,370 Curl, not curl. 279 00:16:40,490 --> 00:16:42,170 What the hell are these things? 280 00:16:42,540 --> 00:16:43,640 Backticks. 281 00:16:43,820 --> 00:16:48,620 And we'll do slash order slash and then the ID from the response. 282 00:16:49,190 --> 00:16:49,520 Okay. 283 00:16:49,520 --> 00:16:50,180 And that's. 284 00:16:50,180 --> 00:16:53,120 That's not an actual route just yet, but it will be. 285 00:16:53,270 --> 00:16:57,290 And then if there's an error, this is where I'm going to do a toast. 286 00:16:57,320 --> 00:17:03,740 So toast dot error and then we'll just pass in whatever that error is. 287 00:17:06,220 --> 00:17:06,670 All right. 288 00:17:06,670 --> 00:17:08,670 So I think that should do it. 289 00:17:08,680 --> 00:17:09,849 So let's try it out. 290 00:17:09,880 --> 00:17:13,510 We have everything here, so let's click place order. 291 00:17:14,140 --> 00:17:19,869 And we got redirected to order slash and then an object ID, which is a good sign. 292 00:17:19,960 --> 00:17:25,900 And now if we check our orders, which we can do, let's see. 293 00:17:25,900 --> 00:17:27,069 Where can we check this? 294 00:17:27,069 --> 00:17:28,960 Let's just open up Compass. 295 00:17:29,630 --> 00:17:32,840 And I'm just going to reload my data real quick. 296 00:17:34,140 --> 00:17:34,620 Okay. 297 00:17:34,620 --> 00:17:36,510 And then I'm going to go to orders. 298 00:17:37,190 --> 00:17:39,200 And there's my order. 299 00:17:41,610 --> 00:17:43,740 So we have the items. 300 00:17:43,740 --> 00:17:46,170 Price the tax price. 301 00:17:46,870 --> 00:17:51,970 The total price and matches everything we just saw on the page. 302 00:17:52,000 --> 00:17:56,770 Now notice that is paid is false because we haven't actually paid yet. 303 00:17:56,770 --> 00:17:58,150 That's coming next. 304 00:17:58,150 --> 00:18:04,840 But we have the order created delivered is also set to false because we're going to make it so admins 305 00:18:04,840 --> 00:18:07,750 can go in and mark mark it as delivered. 306 00:18:09,050 --> 00:18:09,500 All right. 307 00:18:09,500 --> 00:18:12,590 So, yeah, I mean that that's all working. 308 00:18:12,590 --> 00:18:19,520 So yeah, in the next section or the next video, we're going to work on the actual order page.