1 00:00:01,426 --> 00:00:03,418 ‫In this lecture we will take care 2 00:00:03,418 --> 00:00:08,190 ‫of one of the most important parts of this application, 3 00:00:08,190 --> 00:00:12,783 ‫which is to check in guests into the hotel as they arrive. 4 00:00:14,490 --> 00:00:18,870 ‫Now, what's important to understand about this part is 5 00:00:18,870 --> 00:00:22,290 ‫that a certain booking may not have been paid yet 6 00:00:22,290 --> 00:00:24,540 ‫when the guest arrives. 7 00:00:24,540 --> 00:00:29,220 ‫So, basically the idea is that a guest can make a booking, 8 00:00:29,220 --> 00:00:31,710 ‫for example, on an online site, 9 00:00:31,710 --> 00:00:34,830 ‫which can be made without payment. 10 00:00:34,830 --> 00:00:38,040 ‫So, basically for the guest to only pay it 11 00:00:38,040 --> 00:00:40,800 ‫at the hotel when they arrive. 12 00:00:40,800 --> 00:00:44,460 ‫Now, what this means is that in these cases, 13 00:00:44,460 --> 00:00:48,300 ‫payment needs to be accepted at the hotel. 14 00:00:48,300 --> 00:00:53,040 ‫This payment, however happens outside of the application. 15 00:00:53,040 --> 00:00:56,970 ‫So, we will not have any payment processing integrated 16 00:00:56,970 --> 00:00:58,470 ‫into our app. 17 00:00:58,470 --> 00:01:02,100 ‫However, hotel employees need to confirm 18 00:01:02,100 --> 00:01:04,740 ‫that they did in fact receive the payment 19 00:01:04,740 --> 00:01:07,020 ‫as they check in a guest, 20 00:01:07,020 --> 00:01:11,580 ‫and only then the guest can actually be checked in. 21 00:01:11,580 --> 00:01:13,500 ‫Also, during checkout, 22 00:01:13,500 --> 00:01:16,290 ‫guests should be able to buy breakfast 23 00:01:16,290 --> 00:01:20,253 ‫for the entire stay if they hadn't done that already. 24 00:01:21,270 --> 00:01:23,820 ‫So, let's now get back to work 25 00:01:23,820 --> 00:01:25,920 ‫and implement these two things 26 00:01:25,920 --> 00:01:28,743 ‫over this lecture and the next one. 27 00:01:30,570 --> 00:01:32,970 ‫Now, the place in the user interface 28 00:01:32,970 --> 00:01:36,300 ‫where we actually want to check in a user is 29 00:01:36,300 --> 00:01:40,110 ‫right here in this booking detail page. 30 00:01:40,110 --> 00:01:42,750 ‫So, like having a button here, 31 00:01:42,750 --> 00:01:47,750 ‫or also we can do so directly here from this context menu. 32 00:01:48,000 --> 00:01:50,280 ‫So, we also want to have a link here 33 00:01:50,280 --> 00:01:52,590 ‫and later on we will even be able 34 00:01:52,590 --> 00:01:54,750 ‫to check in guests that arrive 35 00:01:54,750 --> 00:01:59,340 ‫at that day right here in the dashboard. 36 00:01:59,340 --> 00:02:02,160 ‫But for now, let's first add a button here 37 00:02:02,160 --> 00:02:04,923 ‫and also onto the detail page. 38 00:02:08,010 --> 00:02:10,900 ‫So, here we need to add a new button 39 00:02:17,580 --> 00:02:20,640 ‫with a text of check in. 40 00:02:20,640 --> 00:02:25,640 ‫Then the icon should be hi arrow, down square. 41 00:02:32,790 --> 00:02:37,140 ‫And yeah, here again it is menus. 42 00:02:37,140 --> 00:02:41,490 ‫And then finally, we want a callback here. 43 00:02:41,490 --> 00:02:44,610 ‫So, on click prop, similar to the one 44 00:02:44,610 --> 00:02:47,193 ‫where we go to the bookings page. 45 00:02:49,050 --> 00:02:53,190 ‫So, here we need to close this one up. 46 00:02:53,190 --> 00:02:56,583 ‫And then here we have one too much apparently. 47 00:02:58,350 --> 00:03:00,600 ‫All right, so let's see. 48 00:03:00,600 --> 00:03:04,770 ‫And so then here we have this check-in icon. 49 00:03:04,770 --> 00:03:08,310 ‫But then of course, instead of going to bookings, 50 00:03:08,310 --> 00:03:12,570 ‫we want to go to check in 51 00:03:12,570 --> 00:03:16,230 ‫and then we still pass in the booking ID. 52 00:03:16,230 --> 00:03:18,273 ‫Now, what's important here is 53 00:03:18,273 --> 00:03:22,860 ‫that actually not all bookings can be checked in. 54 00:03:22,860 --> 00:03:26,970 ‫So, for example, bookings that are already checked in can 55 00:03:26,970 --> 00:03:29,040 ‫of course not be checked in again 56 00:03:29,040 --> 00:03:32,122 ‫and the ones that are already checked out can 57 00:03:32,122 --> 00:03:34,743 ‫also not be checked in again. 58 00:03:35,700 --> 00:03:40,653 ‫Let's just quickly go back to 10 results per page here. 59 00:03:42,990 --> 00:03:45,150 ‫So, let's reload that here. 60 00:03:45,150 --> 00:03:48,150 ‫But in any case, the only bookings 61 00:03:48,150 --> 00:03:52,320 ‫that can be checked in are the unconfirmed one. 62 00:03:52,320 --> 00:03:55,350 ‫And so, let's add that condition here 63 00:03:55,350 --> 00:03:57,900 ‫that we only want to render this 64 00:03:57,900 --> 00:04:02,900 ‫if the status is actually unconfirmed. 65 00:04:07,290 --> 00:04:09,693 ‫And that doesn't look like unconfirmed. 66 00:04:15,360 --> 00:04:17,250 ‫And so let's see. 67 00:04:17,250 --> 00:04:19,143 ‫So, actually we want all of them, 68 00:04:21,180 --> 00:04:23,973 ‫but that doesn't seem to really work. 69 00:04:24,960 --> 00:04:26,580 ‫Actually it does. 70 00:04:26,580 --> 00:04:30,840 ‫So, here we have the check-in button, but here we don't. 71 00:04:30,840 --> 00:04:32,910 ‫So, that is just perfect. 72 00:04:32,910 --> 00:04:35,830 ‫And now we want something similar here 73 00:04:37,740 --> 00:04:40,860 ‫also in the booking details page. 74 00:04:40,860 --> 00:04:42,690 ‫So, let's come right here, 75 00:04:42,690 --> 00:04:46,036 ‫and then right here in this button group, 76 00:04:46,036 --> 00:04:49,830 ‫here of course it's not menus.button, 77 00:04:49,830 --> 00:04:51,453 ‫but just a regular button. 78 00:04:52,950 --> 00:04:55,380 ‫And we also don't need the icon here, 79 00:04:55,380 --> 00:04:58,920 ‫but the rest is actually the same. 80 00:04:58,920 --> 00:05:02,313 ‫Now here we then need to get the navigate function, 81 00:05:07,410 --> 00:05:09,153 ‫and there we go. 82 00:05:10,350 --> 00:05:14,373 ‫So, again, this one here is not gonna have that button, 83 00:05:15,720 --> 00:05:18,150 ‫but then the other ones will. 84 00:05:18,150 --> 00:05:20,550 ‫So, with the unconfirmed status. 85 00:05:20,550 --> 00:05:23,820 ‫So, that's taking some time for some reason. 86 00:05:23,820 --> 00:05:26,430 ‫But anyway, let's now implement 87 00:05:26,430 --> 00:05:30,000 ‫actually the check-in route in app.js. 88 00:05:30,000 --> 00:05:32,223 ‫So, I think we haven't done that yet, 89 00:05:33,210 --> 00:05:35,730 ‫and indeed we have not. 90 00:05:35,730 --> 00:05:38,460 ‫But let's just duplicate this one. 91 00:05:38,460 --> 00:05:40,500 ‫And then here the difference is only 92 00:05:40,500 --> 00:05:43,470 ‫that this one is called check in. 93 00:05:43,470 --> 00:05:47,223 ‫And once again, we also don't have the page yet. 94 00:05:50,310 --> 00:05:53,043 ‫So, checkin.JSX. 95 00:05:54,570 --> 00:05:57,330 ‫And then here we actually have a similar situation 96 00:05:57,330 --> 00:06:01,470 ‫than what we had earlier with the booking page. 97 00:06:01,470 --> 00:06:03,900 ‫Because here all we are going to do is 98 00:06:03,900 --> 00:06:08,553 ‫to return this check-in booking component. 99 00:06:10,140 --> 00:06:11,553 ‫So, let's bring that in. 100 00:06:15,930 --> 00:06:20,820 ‫So, check-in booking like this. 101 00:06:20,820 --> 00:06:23,910 ‫So, that's this component right here 102 00:06:23,910 --> 00:06:25,953 ‫but first we need to import that. 103 00:06:32,790 --> 00:06:34,563 ‫Just like this. 104 00:06:36,750 --> 00:06:39,840 ‫All right, so notice how here we are 105 00:06:39,840 --> 00:06:42,390 ‫in a new features folder. 106 00:06:42,390 --> 00:06:44,730 ‫So, this one is called check-in-out. 107 00:06:44,730 --> 00:06:47,370 ‫In theory basically have a checkout button 108 00:06:47,370 --> 00:06:50,640 ‫and then this check-in button component. 109 00:06:50,640 --> 00:06:53,760 ‫And this component here is very similar 110 00:06:53,760 --> 00:06:56,490 ‫to the booking detail page. 111 00:06:56,490 --> 00:07:00,183 ‫There will just be some differences as we will see soon. 112 00:07:01,320 --> 00:07:03,780 ‫But anyway, let's now test this. 113 00:07:03,780 --> 00:07:08,780 ‫So, here again, the checked in page doesn't have that button 114 00:07:09,660 --> 00:07:14,010 ‫but here this one should have the button. 115 00:07:14,010 --> 00:07:16,170 ‫So, indeed there is check in. 116 00:07:16,170 --> 00:07:19,290 ‫And so now we can actually go there. 117 00:07:19,290 --> 00:07:23,130 ‫So, you moved to check in, so the URL changed, 118 00:07:23,130 --> 00:07:25,890 ‫but here everything looks the same. 119 00:07:25,890 --> 00:07:27,600 ‫And so that's I think 120 00:07:27,600 --> 00:07:30,258 ‫because in the route definition we 121 00:07:30,258 --> 00:07:33,273 ‫still haven't changed that here. 122 00:07:34,620 --> 00:07:38,640 ‫So, here we actually want the check-in page. 123 00:07:42,060 --> 00:07:45,453 ‫So, we need to bring that in manually here. 124 00:07:54,990 --> 00:07:58,920 ‫Let's just bring this to the very top where it belongs. 125 00:07:58,920 --> 00:08:00,810 ‫And then we have some problem. 126 00:08:00,810 --> 00:08:05,810 ‫So, maybe, well here, that actually looks correct. 127 00:08:05,880 --> 00:08:08,460 ‫So, let's see, probably there's just some problem 128 00:08:08,460 --> 00:08:10,413 ‫with that check-in component. 129 00:08:11,340 --> 00:08:12,753 ‫Let's just try that again. 130 00:08:14,970 --> 00:08:18,663 ‫And indeed, the problem is again in the booking data box. 131 00:08:20,070 --> 00:08:21,180 ‫So, just like before, 132 00:08:21,180 --> 00:08:26,180 ‫let's just take this out, and then there we go. 133 00:08:26,910 --> 00:08:29,700 ‫So, here on the check-in page it actually says, 134 00:08:29,700 --> 00:08:31,050 ‫check-in booking. 135 00:08:31,050 --> 00:08:36,050 ‫And then with the number of the booking, so 26 in this case. 136 00:08:37,050 --> 00:08:39,750 ‫And so what we need to do here first is 137 00:08:39,750 --> 00:08:42,990 ‫to bring in the data about the current booking. 138 00:08:42,990 --> 00:08:46,056 ‫And so we will do that exactly in the same way 139 00:08:46,056 --> 00:08:49,743 ‫as in the previous lecture. 140 00:08:50,670 --> 00:08:55,670 ‫So, booking and is loading and coming from use booking. 141 00:09:04,410 --> 00:09:06,993 ‫Then we need to bring that in as well. 142 00:09:17,190 --> 00:09:21,243 ‫So, booking and then use booking like this. 143 00:09:23,280 --> 00:09:25,950 ‫It's already been declared and that's just 144 00:09:25,950 --> 00:09:30,360 ‫because here we need to get rid of that. 145 00:09:30,360 --> 00:09:34,443 ‫And then also, in case we are still loading, 146 00:09:35,430 --> 00:09:40,430 ‫let's return that spinner component. 147 00:09:41,100 --> 00:09:44,310 ‫And now that's not even importing automatically 148 00:09:44,310 --> 00:09:46,780 ‫for some reason, but there we go. 149 00:09:52,260 --> 00:09:55,173 ‫So, now we get that value of 26. 150 00:09:56,310 --> 00:10:01,310 ‫And then right here we can bring back this booking data box. 151 00:10:02,850 --> 00:10:05,160 ‫So, here we have again all that data 152 00:10:05,160 --> 00:10:08,730 ‫that we already saw earlier about a booking, 153 00:10:08,730 --> 00:10:11,520 ‫which difference, that here it says check in. 154 00:10:11,520 --> 00:10:14,610 ‫And then here is basically the final button 155 00:10:14,610 --> 00:10:18,300 ‫where we can really do the check in itself. 156 00:10:18,300 --> 00:10:22,260 ‫So, this page looks very similar to the details page, 157 00:10:22,260 --> 00:10:24,300 ‫but that's on purpose. 158 00:10:24,300 --> 00:10:27,840 ‫Because later on we will probably do most 159 00:10:27,840 --> 00:10:30,720 ‫of the check-ins right from the dashboard. 160 00:10:30,720 --> 00:10:33,330 ‫So, then we go immediately to this page. 161 00:10:33,330 --> 00:10:37,710 ‫And so not through the details page. 162 00:10:37,710 --> 00:10:41,820 ‫But anyway, now it's time to implement that small feature 163 00:10:41,820 --> 00:10:45,600 ‫where the hotel employee needs to confirm 164 00:10:45,600 --> 00:10:49,176 ‫whether this booking has already been paid. 165 00:10:49,176 --> 00:10:52,740 ‫And so for that, we will want to add a checkbox down here 166 00:10:52,740 --> 00:10:56,340 ‫and then the user has to click that checkbox 167 00:10:56,340 --> 00:10:59,283 ‫and only then they can confirm right here. 168 00:11:00,270 --> 00:11:04,050 ‫All right, at least in case the booking hasn't 169 00:11:04,050 --> 00:11:04,983 ‫been paid yet. 170 00:11:06,180 --> 00:11:10,260 ‫So, if we want the checkbox here 171 00:11:10,260 --> 00:11:13,740 ‫and this button here to respond to that checkbox, 172 00:11:13,740 --> 00:11:18,740 ‫that means that we need a piece of state, right? 173 00:11:18,960 --> 00:11:21,420 ‫So, let's create that here. 174 00:11:21,420 --> 00:11:24,630 ‫I'd like to always do it at the very beginning, 175 00:11:24,630 --> 00:11:29,630 ‫and let's say confirm paid and set, confirm paid, use state. 176 00:11:37,440 --> 00:11:40,410 ‫And then we want to connect the state here 177 00:11:40,410 --> 00:11:43,743 ‫with that checkbox that it was just talking about. 178 00:11:44,820 --> 00:11:47,850 ‫Now, here again in our UI folder we 179 00:11:47,850 --> 00:11:51,303 ‫already have a checkbox component that we can use. 180 00:11:52,140 --> 00:11:53,100 ‫So, this is basically 181 00:11:53,100 --> 00:11:58,100 ‫just implementing a standard checkbox input plus a label. 182 00:12:00,030 --> 00:12:03,970 ‫So, let's use that component here 183 00:12:06,900 --> 00:12:09,630 ‫and let's also place all of that 184 00:12:09,630 --> 00:12:14,630 ‫into the box component that we have here in the same file. 185 00:12:14,940 --> 00:12:18,303 ‫And then comes that checkbox. 186 00:12:21,930 --> 00:12:26,460 ‫So, here we can say I confirm that, 187 00:12:26,460 --> 00:12:28,140 ‫and then the name of the guest, 188 00:12:28,140 --> 00:12:33,140 ‫so that's guest.fullname has paid the total amount. 189 00:12:41,100 --> 00:12:44,760 ‫And then later on we will actually place that value there. 190 00:12:44,760 --> 00:12:48,780 ‫But here we already now have this checkbox, 191 00:12:48,780 --> 00:12:53,780 ‫and if we click here, then that will turn on. 192 00:12:54,060 --> 00:12:56,760 ‫But now we need to make this a controlled element, 193 00:12:56,760 --> 00:12:57,600 ‫of course. 194 00:12:57,600 --> 00:13:02,600 ‫And so there for that we pass in the confirm paid. 195 00:13:03,660 --> 00:13:05,220 ‫So, that's the state. 196 00:13:05,220 --> 00:13:08,490 ‫And then we also need the on change prop. 197 00:13:08,490 --> 00:13:12,060 ‫And so this is again our standard callback function 198 00:13:12,060 --> 00:13:13,863 ‫where we then set that. 199 00:13:15,030 --> 00:13:20,030 ‫So, set, confirm paid, and then we basically toggle that. 200 00:13:25,650 --> 00:13:27,963 ‫Let's just give it an ID here as well. 201 00:13:30,630 --> 00:13:32,253 ‫And there we go. 202 00:13:34,890 --> 00:13:37,680 ‫All right, and so now we actually need 203 00:13:37,680 --> 00:13:40,710 ‫to set this value here at the very beginning. 204 00:13:40,710 --> 00:13:42,150 ‫So, in this case, for example, 205 00:13:42,150 --> 00:13:44,850 ‫this booking has already been paid. 206 00:13:44,850 --> 00:13:49,083 ‫And so then we can immediately set this here to true. 207 00:13:50,130 --> 00:13:53,853 ‫Now, we can't actually use the value of booking 208 00:13:53,853 --> 00:13:57,570 ‫that is paid to set the initial state here 209 00:13:57,570 --> 00:13:59,160 ‫of confirm paid, 210 00:13:59,160 --> 00:14:02,190 ‫because by the time this component here mounts, 211 00:14:02,190 --> 00:14:05,220 ‫that value hasn't arrived yet. 212 00:14:05,220 --> 00:14:08,610 ‫So, we need to start out with faults here. 213 00:14:08,610 --> 00:14:13,320 ‫And then later on with an effect we can set that value. 214 00:14:13,320 --> 00:14:15,220 ‫So, let's actually do that right here. 215 00:14:17,190 --> 00:14:22,190 ‫So, use effect, just a simple callback here, 216 00:14:23,700 --> 00:14:26,490 ‫and we will want to run this effect 217 00:14:26,490 --> 00:14:31,490 ‫whenever booking.ispaid has been updated. 218 00:14:33,660 --> 00:14:38,660 ‫And so here what we want to do is set confirm paid 219 00:14:39,632 --> 00:14:42,600 ‫to booking. 220 00:14:42,600 --> 00:14:44,820 ‫And now here we need optional training 221 00:14:44,820 --> 00:14:49,820 ‫because this might not exist yet, or otherwise to false. 222 00:14:51,840 --> 00:14:56,840 ‫And here we can't even use the nullish coalescing operator. 223 00:14:56,970 --> 00:15:00,963 ‫And yeah, we also need to move up the booking here. 224 00:15:03,600 --> 00:15:07,791 ‫All right, now that for some reason hasn't worked, 225 00:15:07,791 --> 00:15:09,363 ‫which it should, 226 00:15:12,120 --> 00:15:16,680 ‫but apparently we have some error here. 227 00:15:16,680 --> 00:15:19,500 ‫So, cannot read properties of undefined. 228 00:15:19,500 --> 00:15:22,440 ‫So, here we have the same problem as before. 229 00:15:22,440 --> 00:15:25,110 ‫So, maybe we can just include booking here, 230 00:15:25,110 --> 00:15:30,110 ‫it should be good enough, and let's reload that again. 231 00:15:32,340 --> 00:15:36,093 ‫But it's still not confirmed there, so let's see. 232 00:15:36,990 --> 00:15:41,820 ‫And here actually it's not value, but checked. 233 00:15:41,820 --> 00:15:42,723 ‫So, let's see. 234 00:15:43,910 --> 00:15:46,680 ‫And now, nice, that is checked. 235 00:15:46,680 --> 00:15:48,720 ‫And in this situation the user 236 00:15:48,720 --> 00:15:52,263 ‫actually shouldn't even be able to undo this. 237 00:15:55,170 --> 00:15:57,040 ‫So, let's set this to disabled 238 00:15:58,110 --> 00:16:02,493 ‫whenever confirm paid is true. 239 00:16:03,360 --> 00:16:05,460 ‫So, now this can no longer be removed. 240 00:16:05,460 --> 00:16:08,130 ‫And so in this situation we are now free 241 00:16:08,130 --> 00:16:09,723 ‫to check in the booking. 242 00:16:10,740 --> 00:16:15,213 ‫So, here we also need a disabled state, 243 00:16:18,960 --> 00:16:23,960 ‫which is whenever confirm paid is actually not true. 244 00:16:25,470 --> 00:16:27,210 ‫So, when the opposite is true, 245 00:16:27,210 --> 00:16:31,443 ‫then in that situation this button here will be deactivated. 246 00:16:32,280 --> 00:16:34,263 ‫So, let's try another one. 247 00:16:38,190 --> 00:16:43,190 ‫So, let's see this one here, actually we want to check in. 248 00:16:47,370 --> 00:16:50,160 ‫So, all of them have already been paid, 249 00:16:50,160 --> 00:16:51,960 ‫at least the ones that we have seen. 250 00:16:54,000 --> 00:16:56,010 ‫Let's maybe see this one. 251 00:16:56,010 --> 00:17:00,843 ‫And this one did not, but for some reason it changed. 252 00:17:01,740 --> 00:17:03,030 ‫Let's reload this. 253 00:17:03,030 --> 00:17:04,923 ‫So, that was strange. 254 00:17:07,620 --> 00:17:08,670 ‫Let's see this again. 255 00:17:09,750 --> 00:17:12,060 ‫Let's click on check in immediately. 256 00:17:12,060 --> 00:17:13,623 ‫Well, maybe I saw it wrong. 257 00:17:17,160 --> 00:17:22,160 ‫Ah, and for some reason it sometimes takes some time 258 00:17:23,520 --> 00:17:25,770 ‫for the data here to arrive. 259 00:17:25,770 --> 00:17:28,470 ‫And just looking here at the dev tools, 260 00:17:28,470 --> 00:17:32,190 ‫I think I am seeing what the problem is. 261 00:17:32,190 --> 00:17:35,970 ‫So, here in this key we actually also want 262 00:17:35,970 --> 00:17:38,763 ‫to include the booking ID itself. 263 00:17:40,020 --> 00:17:44,160 ‫So, this is actually a bug that we need to fix right now. 264 00:17:44,160 --> 00:17:48,393 ‫So, let's come here to our use booking. 265 00:17:49,230 --> 00:17:54,210 ‫And then here we need to include the booking ID. 266 00:17:54,210 --> 00:17:57,600 ‫And so this is very important, because otherwise, 267 00:17:57,600 --> 00:18:01,020 ‫as we switch between these different booking pages, 268 00:18:01,020 --> 00:18:04,440 ‫the data that each of them gets will be the same. 269 00:18:04,440 --> 00:18:07,200 ‫So, each of them will still be coming then here 270 00:18:07,200 --> 00:18:11,280 ‫from this cash with the same name for all of them. 271 00:18:11,280 --> 00:18:14,943 ‫But now each page will have its unique name. 272 00:18:15,930 --> 00:18:20,520 ‫So, let's go back here, let's change, 273 00:18:20,520 --> 00:18:22,173 ‫or let's check this one here. 274 00:18:23,190 --> 00:18:25,710 ‫And so now we also get the loading spinner 275 00:18:25,710 --> 00:18:28,563 ‫which earlier we were actually not seeing. 276 00:18:31,800 --> 00:18:34,683 ‫So, let me try to find another unpaid one. 277 00:18:36,060 --> 00:18:38,883 ‫Or let's just go with Emma Watson here. 278 00:18:39,930 --> 00:18:42,810 ‫So, this one here is not paid yet. 279 00:18:42,810 --> 00:18:44,730 ‫And so this is one of the situations 280 00:18:44,730 --> 00:18:48,570 ‫where in the hotel we actually need to accept the payment. 281 00:18:48,570 --> 00:18:51,060 ‫And so right now that hasn't happened, 282 00:18:51,060 --> 00:18:53,910 ‫and so then we cannot click this button. 283 00:18:53,910 --> 00:18:57,210 ‫So, we are not allowed to check this guest in. 284 00:18:57,210 --> 00:18:59,430 ‫But then as we click here, 285 00:18:59,430 --> 00:19:03,753 ‫then the payment has been received and we can click here. 286 00:19:04,590 --> 00:19:07,860 ‫And of course, now as we click, nothing happens. 287 00:19:07,860 --> 00:19:11,043 ‫And so let's take care of that next. 288 00:19:12,480 --> 00:19:14,940 ‫So, here we go back, 289 00:19:14,940 --> 00:19:18,450 ‫this one we no longer need the booking row. 290 00:19:18,450 --> 00:19:23,450 ‫We also no longer need the booking detail, the same thing, 291 00:19:23,970 --> 00:19:26,763 ‫and also the same thing with the constants. 292 00:19:28,080 --> 00:19:32,043 ‫Now here, let's just quickly finish this part here. 293 00:19:34,170 --> 00:19:38,193 ‫So, here we also want the total amount of, 294 00:19:39,120 --> 00:19:44,120 ‫and let's bring in the format currency function, 295 00:19:44,220 --> 00:19:49,220 ‫and then just with the total price, all right? 296 00:19:49,890 --> 00:19:54,213 ‫And then let's actually take care of checking the user in. 297 00:19:55,140 --> 00:19:58,612 ‫Now, what is actually checking the user in? 298 00:19:58,612 --> 00:20:00,510 ‫Well, all that we're going 299 00:20:00,510 --> 00:20:05,510 ‫to do is basically update the booking. 300 00:20:05,520 --> 00:20:10,290 ‫So, let's check out what the booking looks like, 301 00:20:10,290 --> 00:20:12,843 ‫just so we see what we actually have to do. 302 00:20:15,540 --> 00:20:20,010 ‫So, here in the bookings table, we have a remember 303 00:20:20,010 --> 00:20:24,183 ‫that status field, which should appear here at some point. 304 00:20:25,230 --> 00:20:27,180 ‫So, we have the status. 305 00:20:27,180 --> 00:20:31,320 ‫And so basically checking in means to change the status 306 00:20:31,320 --> 00:20:35,357 ‫from unconfirmed to checked in, right? 307 00:20:36,930 --> 00:20:39,810 ‫So, basically being checked in means 308 00:20:39,810 --> 00:20:44,810 ‫that the booking status is indeed set to checked in 309 00:20:44,820 --> 00:20:49,020 ‫and also is paid will need to be set to true, 310 00:20:49,020 --> 00:20:52,320 ‫because that's what we have just been working on. 311 00:20:52,320 --> 00:20:54,509 ‫So, making sure that the employee has 312 00:20:54,509 --> 00:20:56,670 ‫actually received the payment. 313 00:20:56,670 --> 00:21:00,900 ‫And so then for sure, this is true. 314 00:21:00,900 --> 00:21:04,740 ‫And so basically, what we will now do is a mutation 315 00:21:04,740 --> 00:21:09,450 ‫where we update a booking by setting these two fields. 316 00:21:09,450 --> 00:21:14,280 ‫So, the status to check in entity is paid to true. 317 00:21:14,280 --> 00:21:18,420 ‫And so let's create a new custom hook here. 318 00:21:18,420 --> 00:21:23,420 ‫called usecheckin.js. 319 00:21:23,970 --> 00:21:28,970 ‫So, export function, use check in. 320 00:21:29,940 --> 00:21:33,210 ‫At this time let's actually do it again by hand, 321 00:21:33,210 --> 00:21:35,490 ‫'cause we haven't done that in a long time. 322 00:21:35,490 --> 00:21:39,780 ‫And we don't just want to always copy paste everything, 323 00:21:39,780 --> 00:21:42,450 ‫because then we also don't learn. 324 00:21:42,450 --> 00:21:44,670 ‫So, here we will want to use 325 00:21:44,670 --> 00:21:48,750 ‫as I mentioned earlier, the use mutation hook. 326 00:21:48,750 --> 00:21:53,163 ‫And so this will then return the mutate function, 327 00:21:54,750 --> 00:21:59,750 ‫which we want to save here as, or rename as check in. 328 00:22:00,690 --> 00:22:03,810 ‫And we also get the is loading state 329 00:22:03,810 --> 00:22:08,293 ‫which we can rename to is checking in. 330 00:22:13,140 --> 00:22:18,140 ‫And then here as always, we need the mutation function. 331 00:22:22,200 --> 00:22:26,100 ‫And so this is where we will then call this function 332 00:22:26,100 --> 00:22:29,871 ‫that we already have in our services, 333 00:22:29,871 --> 00:22:33,000 ‫which is update booking. 334 00:22:33,000 --> 00:22:36,840 ‫So, very similar to update cabins that we did before, 335 00:22:36,840 --> 00:22:39,840 ‫which is the reason why we are not writing this one here 336 00:22:39,840 --> 00:22:41,460 ‫from scratch. 337 00:22:41,460 --> 00:22:44,160 ‫So, just like before it receives the ID 338 00:22:44,160 --> 00:22:46,380 ‫of the row that needs to be updated, 339 00:22:46,380 --> 00:22:50,550 ‫and the object with all the new field values. 340 00:22:50,550 --> 00:22:51,570 ‫So, all the values 341 00:22:51,570 --> 00:22:54,423 ‫for the columns that are going to be updated. 342 00:22:56,220 --> 00:22:58,473 ‫So, update booking. 343 00:22:59,730 --> 00:23:01,980 ‫And so here we need the booking ID, 344 00:23:01,980 --> 00:23:03,750 ‫and we are going to receive that 345 00:23:03,750 --> 00:23:08,220 ‫by passing it in to this mutate function. 346 00:23:08,220 --> 00:23:11,790 ‫And then the second argument needs to be 347 00:23:11,790 --> 00:23:14,610 ‫that data that will be updated. 348 00:23:14,610 --> 00:23:18,954 ‫And so as we said earlier, here the status will be changed 349 00:23:18,954 --> 00:23:23,954 ‫to checked in and is paid will be set to true. 350 00:23:29,910 --> 00:23:33,690 ‫All right, so that is the mutation function. 351 00:23:33,690 --> 00:23:37,923 ‫Then let's also define some on success handlers. 352 00:23:43,290 --> 00:23:47,880 ‫So, first of all, let's bring back our friend, 353 00:23:47,880 --> 00:23:49,920 ‫details notifications. 354 00:23:49,920 --> 00:23:51,843 ‫And so here we will have a success. 355 00:23:52,710 --> 00:23:54,423 ‫Let's do a template literal, 356 00:23:56,316 --> 00:23:58,560 ‫because here I actually want to show you something 357 00:23:58,560 --> 00:24:02,823 ‫which I don't remember if we did it already before or not. 358 00:24:03,990 --> 00:24:05,550 ‫I think I mentioned this. 359 00:24:05,550 --> 00:24:09,270 ‫But in any case, this on success function here does 360 00:24:09,270 --> 00:24:11,880 ‫actually receive some data. 361 00:24:11,880 --> 00:24:14,700 ‫And that data is exactly the data. 362 00:24:14,700 --> 00:24:19,503 ‫So, it's the value that is returned from the function. 363 00:24:20,880 --> 00:24:23,474 ‫So, this one right here is returned 364 00:24:23,474 --> 00:24:26,610 ‫from this mutation function. 365 00:24:26,610 --> 00:24:28,620 ‫And so that will then become the data 366 00:24:28,620 --> 00:24:30,540 ‫in the on success handler. 367 00:24:30,540 --> 00:24:34,260 ‫And so therefore we can then do booking number, 368 00:24:34,260 --> 00:24:39,260 ‫data.id successfully checked in. 369 00:24:42,150 --> 00:24:44,250 ‫All right, then we also want 370 00:24:44,250 --> 00:24:47,970 ‫to invalidate the queries as always. 371 00:24:47,970 --> 00:24:49,870 ‫So, let's get the Query client 372 00:24:51,330 --> 00:24:56,313 ‫from use Query client like this. 373 00:24:59,850 --> 00:25:01,980 ‫So, invalidate queries. 374 00:25:01,980 --> 00:25:04,260 ‫And previously what we did here was 375 00:25:04,260 --> 00:25:06,720 ‫to pass in the Query key, 376 00:25:06,720 --> 00:25:09,270 ‫but we can also do it in another way, 377 00:25:09,270 --> 00:25:14,270 ‫which is simply to say, active true. 378 00:25:14,430 --> 00:25:17,220 ‫And so this will then invalidate all the queries 379 00:25:17,220 --> 00:25:20,133 ‫that are currently active on the page. 380 00:25:21,210 --> 00:25:22,410 ‫So, this is a bit easier, 381 00:25:22,410 --> 00:25:26,820 ‫because then we don't have to remember any Query keys. 382 00:25:26,820 --> 00:25:29,940 ‫And then finally, we also want to navigate back 383 00:25:29,940 --> 00:25:31,113 ‫to the dashboard. 384 00:25:33,900 --> 00:25:37,980 ‫So, navigate from use, navigate, 385 00:25:37,980 --> 00:25:42,980 ‫and then here we will go back to the homepage, 386 00:25:43,410 --> 00:25:47,460 ‫which is basically that dashboard. 387 00:25:47,460 --> 00:25:50,703 ‫And then just to finish, let's also do an on error. 388 00:25:52,680 --> 00:25:57,633 ‫And here we will just toast.error. 389 00:25:59,070 --> 00:26:04,070 ‫There was an error while checking in. 390 00:26:06,420 --> 00:26:09,930 ‫And then all we have to do is to return an object 391 00:26:09,930 --> 00:26:14,930 ‫with the check-in function and is checking in. 392 00:26:17,280 --> 00:26:21,810 ‫Okay, so this video is running a bit long already, 393 00:26:21,810 --> 00:26:25,170 ‫but let's just drive it home here. 394 00:26:25,170 --> 00:26:28,743 ‫So, here we will just grab those two. 395 00:26:29,700 --> 00:26:31,263 ‫So, check in it is. 396 00:26:32,340 --> 00:26:37,340 ‫Checking in from use check in. 397 00:26:39,960 --> 00:26:43,383 ‫And so then, let's use finally the function here. 398 00:26:44,940 --> 00:26:47,310 ‫So, first let's also make sure again 399 00:26:47,310 --> 00:26:50,490 ‫that payment has been received. 400 00:26:50,490 --> 00:26:55,490 ‫So, if is not confirmed paid, then return. 401 00:26:56,160 --> 00:27:01,160 ‫But otherwise, check in the current booking ID. 402 00:27:03,240 --> 00:27:06,933 ‫And then let's also use the is check in state. 403 00:27:10,080 --> 00:27:15,013 ‫So, here, let's also disable if is checking in, 404 00:27:16,110 --> 00:27:18,483 ‫and the same thing on the button. 405 00:27:24,660 --> 00:27:28,533 ‫All right, so let's give it a try. 406 00:27:30,630 --> 00:27:33,663 ‫So, right now, again, we cannot click here, 407 00:27:35,668 --> 00:27:37,470 ‫and now we should be able. 408 00:27:37,470 --> 00:27:39,723 ‫All right, so let's try that. 409 00:27:41,130 --> 00:27:45,600 ‫And indeed, booking number nine was successfully checked in. 410 00:27:45,600 --> 00:27:48,183 ‫And if now we go back here to the bookings, 411 00:27:49,290 --> 00:27:52,380 ‫then indeed Emma Watson, 412 00:27:52,380 --> 00:27:54,870 ‫which is the one that we have been working on, 413 00:27:54,870 --> 00:27:56,430 ‫is checked in. 414 00:27:56,430 --> 00:27:57,870 ‫And if we see the details, 415 00:27:57,870 --> 00:28:00,423 ‫then we see that everything has been paid. 416 00:28:01,500 --> 00:28:06,420 ‫Great, so, this part is now actually working. 417 00:28:06,420 --> 00:28:09,990 ‫And so now let's move on to the next lecture, 418 00:28:09,990 --> 00:28:11,910 ‫where we will also add the ability 419 00:28:11,910 --> 00:28:15,873 ‫for the guest to buy breakfast as they check in.