1 00:00:00,170 --> 00:00:05,810 So in the last video, we made it so we could create an order and it was saved to the database. 2 00:00:05,810 --> 00:00:10,610 And then we're redirected to this page here, order slash, and then the ID. 3 00:00:10,820 --> 00:00:16,190 So we want to take care of this where it displays the order details and we'll also have a button to 4 00:00:16,190 --> 00:00:16,900 pay. 5 00:00:16,910 --> 00:00:20,750 Now, I made a little mistake in the back end routes. 6 00:00:20,750 --> 00:00:28,370 So if we go to routes and then order routes, I set the where is it get order by ID, I set that to 7 00:00:28,370 --> 00:00:29,210 admin. 8 00:00:29,210 --> 00:00:32,150 I put the admin middleware and we don't want that. 9 00:00:32,150 --> 00:00:37,760 We just want it to be protect because if we keep it at admin, once we go and place an order, we're 10 00:00:37,760 --> 00:00:39,800 not going to be able to fetch the single order. 11 00:00:39,800 --> 00:00:43,550 It's going to prevent us unless we're logged in as an admin, which of course we don't want. 12 00:00:43,550 --> 00:00:45,440 So just get rid of that admin. 13 00:00:45,860 --> 00:00:51,770 All right, Now we're going to go back to the front end and let's first of all, before we create the 14 00:00:51,770 --> 00:00:56,000 order screen, let's add the action creator in the slice. 15 00:00:56,000 --> 00:01:04,580 So orders API, slice, we're going to go let's see right under the create order which ends right here. 16 00:01:04,580 --> 00:01:10,880 And let's call this get get order details and it's going to be a query. 17 00:01:10,880 --> 00:01:13,790 So we want to say builder query, not mutation. 18 00:01:13,790 --> 00:01:15,470 And then we'll have our query. 19 00:01:15,740 --> 00:01:23,090 We'll pass in the order ID, the URL is going to be orders, URL slash, and then the order ID, the 20 00:01:23,090 --> 00:01:27,260 method is going to be get, although we don't need that because it's get by default. 21 00:01:27,260 --> 00:01:31,670 And then under the query I'm just going to specify the. 22 00:01:32,990 --> 00:01:33,630 What is it? 23 00:01:33,980 --> 00:01:34,370 No, it's. 24 00:01:34,430 --> 00:01:35,200 Keep. 25 00:01:35,370 --> 00:01:44,000 Keep unused data and we'll say five for that five seconds and then to export it, we just want to put 26 00:01:44,000 --> 00:01:45,140 use before it. 27 00:01:45,140 --> 00:01:50,240 And then the name of the function, which is get order details and then query after it. 28 00:01:50,980 --> 00:01:57,040 So that's all we have to do in order to to fetch the order details. 29 00:01:57,040 --> 00:01:59,560 Now we want to work on the actual screen. 30 00:01:59,560 --> 00:02:06,850 So in screens we're going to create an order screen dot JS, which is different than the place order 31 00:02:06,850 --> 00:02:07,660 screen. 32 00:02:07,900 --> 00:02:12,820 So for the order screen, let's let's bring in a couple things. 33 00:02:12,820 --> 00:02:21,550 So we're going to need link and let's say use params from React router dom use params is going to be 34 00:02:21,550 --> 00:02:25,090 used to fetch to get this ID from the URL. 35 00:02:25,610 --> 00:02:30,410 And then from react router not react router react bootstrap. 36 00:02:30,410 --> 00:02:31,760 We want row. 37 00:02:32,840 --> 00:02:34,940 Roll Call List. 38 00:02:34,940 --> 00:02:36,320 Group Image. 39 00:02:37,020 --> 00:02:38,250 Don't think we need. 40 00:02:38,670 --> 00:02:39,570 Well, yeah, I think we need. 41 00:02:39,600 --> 00:02:40,440 Button later. 42 00:02:40,440 --> 00:02:40,770 So. 43 00:02:40,770 --> 00:02:40,980 Yeah. 44 00:02:41,010 --> 00:02:41,760 Image form. 45 00:02:41,760 --> 00:02:42,840 Button card. 46 00:02:43,430 --> 00:02:46,790 And then let's import our message component. 47 00:02:47,460 --> 00:02:50,910 And also our our loader. 48 00:02:52,720 --> 00:02:54,130 Loader component. 49 00:02:54,160 --> 00:02:59,410 And then of course, the query that we just created that we just exported from the slice, which is 50 00:02:59,410 --> 00:03:03,430 called use get order details query. 51 00:03:04,430 --> 00:03:06,290 And then we'll create our. 52 00:03:07,080 --> 00:03:09,060 Component our order screen. 53 00:03:09,060 --> 00:03:14,130 And just for now, I'll save that and we'll add the route just so we can actually see the page. 54 00:03:14,130 --> 00:03:23,220 So in our routes, our index.js, let's import our order screen and we're going to put that in the registered 55 00:03:23,220 --> 00:03:25,440 user routes, the protected routes. 56 00:03:26,500 --> 00:03:29,200 So we can at least start to see it. 57 00:03:29,830 --> 00:03:36,370 Now in the order screen, we want to get the data from the database by going through this query right 58 00:03:36,370 --> 00:03:36,730 here. 59 00:03:36,730 --> 00:03:38,710 So let's go right here. 60 00:03:38,710 --> 00:03:44,590 And first of all, we need the ID from the URL so we can get that with use params, although I'm going 61 00:03:44,590 --> 00:03:48,940 to rename it to order ID just to be more specific. 62 00:03:49,450 --> 00:03:49,870 Okay. 63 00:03:49,870 --> 00:03:51,430 And then we're going to. 64 00:03:52,300 --> 00:03:52,830 Let's see. 65 00:03:52,840 --> 00:03:53,190 Yep. 66 00:03:53,200 --> 00:03:54,490 I think that's what we want. 67 00:03:54,490 --> 00:03:58,870 So from the query use get order details query. 68 00:03:58,870 --> 00:04:01,750 We pass the order ID and which comes from the URL. 69 00:04:01,780 --> 00:04:06,870 We get the data which we're renaming to order we get is loading and is error. 70 00:04:06,880 --> 00:04:12,940 One other thing that I'm going to get is the refetch function which we can call to just to do just that 71 00:04:12,940 --> 00:04:22,210 refetch the new data so we don't end up with stale data, which can happen now in the return. 72 00:04:22,210 --> 00:04:24,850 Actually, for now, let's just do a console log. 73 00:04:27,060 --> 00:04:30,720 Let's do a console log of the order. 74 00:04:31,280 --> 00:04:31,380 Okay. 75 00:04:31,470 --> 00:04:34,170 Because I'm getting the data renaming it to order. 76 00:04:34,170 --> 00:04:39,990 So if we save that and open up our console, we should see here. 77 00:04:40,870 --> 00:04:41,320 Yeah. 78 00:04:41,320 --> 00:04:42,700 We get our order. 79 00:04:43,350 --> 00:04:47,400 And remember, we populated it also with the user name and email. 80 00:04:47,400 --> 00:04:53,730 So we also get that as well as the user ID, so we know that we're getting all the data we need for 81 00:04:53,730 --> 00:04:54,540 this page. 82 00:04:54,540 --> 00:04:56,310 Now we just need to display it. 83 00:04:56,310 --> 00:05:01,410 So let's get rid of that console log and I only want to display if it's loading. 84 00:05:01,410 --> 00:05:05,490 So what we're going to do is say if is loading then. 85 00:05:07,060 --> 00:05:11,440 Then we're going to show the loader so we can just put in. 86 00:05:12,270 --> 00:05:16,620 The load or else we want to check for the error. 87 00:05:17,320 --> 00:05:19,300 Which is going to come from. 88 00:05:19,930 --> 00:05:21,860 Right here is error. 89 00:05:21,880 --> 00:05:22,780 Let's actually. 90 00:05:24,200 --> 00:05:26,680 I think we I think we need to call that error. 91 00:05:26,690 --> 00:05:28,400 So we're going to do that. 92 00:05:29,440 --> 00:05:30,760 So loader. 93 00:05:30,800 --> 00:05:34,460 Else then if there's an error, then we're going to show the message. 94 00:05:34,480 --> 00:05:36,400 Else then we'll show whatever. 95 00:05:40,330 --> 00:05:48,550 Okay, So in here, what I want to have is just a we'll do a fragment and then we'll have a row or actually 96 00:05:48,550 --> 00:05:50,240 we'll do an H one first. 97 00:05:50,260 --> 00:05:51,820 Let's see if that actually. 98 00:05:51,820 --> 00:05:52,300 Yep. 99 00:05:52,300 --> 00:05:57,920 So it gives us the order and the order number and then let's put a row. 100 00:05:57,940 --> 00:05:59,590 Close that row. 101 00:06:01,320 --> 00:06:07,950 And then we'll have our first call, which is going to be eight wide, and then we'll have one that's 102 00:06:07,950 --> 00:06:09,480 going to be four wide. 103 00:06:09,480 --> 00:06:12,360 And for now, I'm just going to say column. 104 00:06:15,610 --> 00:06:16,540 Column. 105 00:06:18,370 --> 00:06:20,470 Okay, so we have the data. 106 00:06:20,470 --> 00:06:23,130 We have basically a template to work with. 107 00:06:23,140 --> 00:06:26,590 Now we're going to start with the bringing the data and displaying it. 108 00:06:26,590 --> 00:06:28,920 So we'll work in the first column first. 109 00:06:28,930 --> 00:06:30,340 So let's get rid of that. 110 00:06:31,600 --> 00:06:34,330 I don't know why this is aligning itself like that. 111 00:06:34,630 --> 00:06:39,190 So in this column, we're going to first have a list group. 112 00:06:39,190 --> 00:06:41,140 So let's do list group. 113 00:06:41,440 --> 00:06:43,240 Close the list group. 114 00:06:44,780 --> 00:06:46,580 And inside the List group. 115 00:06:46,580 --> 00:06:48,470 We're going to have a list group item. 116 00:06:50,460 --> 00:06:56,430 Close that list, group item and then this will be the heading. 117 00:06:56,430 --> 00:07:00,120 So we'll do H two and say shipping. 118 00:07:01,970 --> 00:07:05,420 And then underneath that, we're going to have a paragraph. 119 00:07:05,660 --> 00:07:09,530 And in that paragraph, I'm going to put strong tag. 120 00:07:09,530 --> 00:07:11,870 We're going to have just the name label. 121 00:07:11,870 --> 00:07:18,560 And then on the order we have the user object, which I just showed you with the with the user name. 122 00:07:18,560 --> 00:07:19,550 So we want to do. 123 00:07:21,060 --> 00:07:23,260 Or user dot name. 124 00:07:23,400 --> 00:07:24,330 Check it out. 125 00:07:24,960 --> 00:07:25,800 There we go. 126 00:07:26,390 --> 00:07:28,730 Next we want to do the email. 127 00:07:28,730 --> 00:07:31,890 So I'm going to put another paragraph and let's just close this up. 128 00:07:31,910 --> 00:07:34,700 Let's put another paragraph underneath. 129 00:07:37,250 --> 00:07:41,690 And then here we'll do another strong tag. 130 00:07:42,660 --> 00:07:44,430 And say email. 131 00:07:45,850 --> 00:07:52,390 And we should be able to get the order dot user dot email. 132 00:07:54,840 --> 00:07:58,140 Okay, So next we want the street address. 133 00:07:58,140 --> 00:08:01,200 So again, we'll do another paragraph. 134 00:08:02,130 --> 00:08:04,500 And let's do address. 135 00:08:05,830 --> 00:08:08,470 Now we're going to have to get a few things. 136 00:08:08,470 --> 00:08:14,380 So we need the shipping address, dot address and then comma and then the city. 137 00:08:14,410 --> 00:08:23,020 Let's also do a space and then the postal code and the country. 138 00:08:25,210 --> 00:08:28,300 Shipping address is not defined. 139 00:08:28,570 --> 00:08:30,520 Oh, this should be order. 140 00:08:34,000 --> 00:08:34,470 Okay. 141 00:08:34,480 --> 00:08:35,320 Looks good. 142 00:08:37,090 --> 00:08:42,820 So next thing is going to be if it's delivered or not. 143 00:08:42,820 --> 00:08:45,580 So underneath that paragraph. 144 00:08:46,110 --> 00:08:48,750 We're going to open up some curly braces. 145 00:08:49,930 --> 00:08:54,430 And say if the order Dot is delivered. 146 00:08:56,080 --> 00:09:01,840 Um, so if it is delivered, then we're going to show something. 147 00:09:01,840 --> 00:09:04,060 If it's not, we're going to show something else. 148 00:09:05,120 --> 00:09:09,800 And that something is going to be the it's going to be a message component and it's going to show the 149 00:09:09,800 --> 00:09:11,240 delivered at field. 150 00:09:11,510 --> 00:09:14,780 And if it's not delivered, then we'll show the message. 151 00:09:16,040 --> 00:09:19,560 With a variant of danger and say not delivered. 152 00:09:19,580 --> 00:09:21,650 So it's not delivered right now. 153 00:09:21,650 --> 00:09:24,530 So we're going to see the red not delivered. 154 00:09:25,360 --> 00:09:31,300 All right, now let's go outside of that list group item and let's create another one. 155 00:09:34,000 --> 00:09:38,860 And in this list group item, we're going to have the payment stuff. 156 00:09:38,860 --> 00:09:47,440 So let's say payment method and then we'll have paragraph, we'll have method order dot payment method. 157 00:09:47,440 --> 00:09:50,380 And then underneath that we want to show if it's paid or not. 158 00:09:50,380 --> 00:09:55,480 And if it is, we'll show the paid at field just like we did with the with the order so we can actually 159 00:09:55,480 --> 00:09:57,790 copy this. 160 00:09:59,000 --> 00:10:00,620 And put that. 161 00:10:02,720 --> 00:10:04,520 Right under the paragraph. 162 00:10:04,670 --> 00:10:08,510 We'll paste that in and we'll say, Order dot is paid. 163 00:10:10,100 --> 00:10:18,890 And let's say here, instead of delivered on, we'll say paid on and then it has a paid at field. 164 00:10:20,850 --> 00:10:21,330 Okay. 165 00:10:21,330 --> 00:10:22,980 And then here we'll say. 166 00:10:24,500 --> 00:10:25,730 Not paid. 167 00:10:25,730 --> 00:10:26,930 So we'll save that. 168 00:10:26,930 --> 00:10:29,060 And now we should see not paid. 169 00:10:29,300 --> 00:10:32,300 So now let's go under. 170 00:10:33,070 --> 00:10:34,600 The list group item. 171 00:10:35,790 --> 00:10:36,330 Actually. 172 00:10:36,330 --> 00:10:37,290 Do we want to stay? 173 00:10:37,290 --> 00:10:38,850 Yeah, we're going to stay within the list group. 174 00:10:38,850 --> 00:10:41,370 So we're going to create another list group item. 175 00:10:43,250 --> 00:10:50,780 And in here, let's say order items and then we basically want to just map through. 176 00:10:50,810 --> 00:10:57,290 So let's say order dot, order items and map. 177 00:11:00,080 --> 00:11:00,620 Okay. 178 00:11:00,620 --> 00:11:05,630 And then we're going to pass in item and the index for the key. 179 00:11:07,150 --> 00:11:10,270 So in here, let's do a list group. 180 00:11:10,300 --> 00:11:11,590 Another list group. 181 00:11:12,500 --> 00:11:13,790 And. 182 00:11:15,140 --> 00:11:16,370 Uh, wait a minute. 183 00:11:17,110 --> 00:11:17,560 No. 184 00:11:17,680 --> 00:11:17,820 Yeah. 185 00:11:17,860 --> 00:11:20,020 We want an item, not a list group. 186 00:11:20,020 --> 00:11:23,290 And we add the key to that, which is going to be the index. 187 00:11:23,950 --> 00:11:26,110 So we'll have one of these for each. 188 00:11:26,760 --> 00:11:29,100 And let's put a row in here. 189 00:11:30,320 --> 00:11:39,740 In that row, and the first column is going to be one wide and it's just going to be the image so very 190 00:11:39,740 --> 00:11:41,840 similar to the placeholder page. 191 00:11:41,840 --> 00:11:44,510 So if we save that, take a look. 192 00:11:44,540 --> 00:11:48,260 You can see both order items, both images. 193 00:11:48,260 --> 00:11:50,390 Now let's do the next column. 194 00:11:51,290 --> 00:11:55,760 And this one is going to be just the name with a link to the product. 195 00:11:56,570 --> 00:12:00,800 So close that and then the final one will be four wide. 196 00:12:00,800 --> 00:12:03,650 And again, we're just going to have the. 197 00:12:04,160 --> 00:12:07,190 The quantity X the price. 198 00:12:07,870 --> 00:12:09,970 And actually. 199 00:12:09,970 --> 00:12:10,390 Wait a minute. 200 00:12:10,420 --> 00:12:11,350 We want. 201 00:12:12,320 --> 00:12:17,030 Yeah, that and then it's going to equal and then we'll do the actual. 202 00:12:18,200 --> 00:12:18,890 Item. 203 00:12:19,960 --> 00:12:21,270 Um, yeah. 204 00:12:21,320 --> 00:12:25,840 Item quantity times the price and then close the column. 205 00:12:29,080 --> 00:12:29,980 All right, cool. 206 00:12:30,100 --> 00:12:33,730 Now we want to go to the other side and. 207 00:12:35,950 --> 00:12:36,370 Let's see. 208 00:12:36,400 --> 00:12:37,420 Right here. 209 00:12:39,550 --> 00:12:41,350 And we're going to have a card. 210 00:12:42,900 --> 00:12:44,460 Close that card. 211 00:12:45,850 --> 00:12:48,490 And let's do list group. 212 00:12:48,640 --> 00:12:50,170 Close the list Group. 213 00:12:52,020 --> 00:12:54,300 And then we'll have our list group item. 214 00:12:55,450 --> 00:12:57,160 And this one's just going to be the heading. 215 00:12:57,160 --> 00:12:58,630 So order summary. 216 00:12:59,280 --> 00:13:01,740 And then we'll have another list group item. 217 00:13:03,950 --> 00:13:07,310 And this is going to be a row. 218 00:13:07,940 --> 00:13:09,590 We'll say items. 219 00:13:10,850 --> 00:13:13,550 It's going to be the order dot items price. 220 00:13:13,550 --> 00:13:16,310 And what I'm going to do is just copy this row. 221 00:13:17,380 --> 00:13:19,330 So after the items. 222 00:13:20,930 --> 00:13:22,910 Items, price will have the shipping. 223 00:13:22,910 --> 00:13:26,150 So this is very similar to what we did on the other page. 224 00:13:26,150 --> 00:13:27,830 So this will be shipping. 225 00:13:29,490 --> 00:13:33,650 Shipping price and then we'll go on to that paste that in. 226 00:13:33,660 --> 00:13:35,970 This is going to be the tax. 227 00:13:38,060 --> 00:13:39,770 So tax. 228 00:13:40,790 --> 00:13:43,430 And that will be tax price. 229 00:13:44,460 --> 00:13:46,380 And let's see, we want the total. 230 00:13:46,380 --> 00:13:47,910 So underneath that. 231 00:13:49,590 --> 00:13:51,090 It's a total. 232 00:13:53,120 --> 00:13:55,040 And total price. 233 00:13:56,270 --> 00:14:02,570 Now this is where we're going to have the pay button to pay for the order and where we're going to have 234 00:14:02,570 --> 00:14:05,780 the button to mark it as delivered as an admin. 235 00:14:05,780 --> 00:14:08,090 However, we're not going to do that right now. 236 00:14:08,090 --> 00:14:15,020 So what I'll do is underneath this list, group item, I'm just going to put a comment. 237 00:14:15,020 --> 00:14:18,230 We'll say pay order. 238 00:14:19,000 --> 00:14:20,560 Placeholder. 239 00:14:20,650 --> 00:14:24,910 And then we'll also have a placeholder for Mark as delivered. 240 00:14:25,000 --> 00:14:29,140 Mark as delivered placeholder. 241 00:14:29,650 --> 00:14:34,470 So at least for now, we can see this stuff here. 242 00:14:34,480 --> 00:14:38,950 And in the next two videos we're going to implement PayPal. 243 00:14:38,950 --> 00:14:45,040 We need to do some stuff on our back end and obviously we need to add a button here and we need to integrate 244 00:14:45,040 --> 00:14:46,570 the PayPal API.