1 00:00:01,140 --> 00:00:04,560 ‫So as the second part of the check-in process 2 00:00:04,560 --> 00:00:09,000 ‫let's now allow guests to also add additional breakfast 3 00:00:09,000 --> 00:00:11,343 ‫if they haven't done so initially. 4 00:00:12,900 --> 00:00:16,680 ‫So for example, this guest right here did not 5 00:00:16,680 --> 00:00:20,510 ‫by breakfast initially when the booking was first made. 6 00:00:20,510 --> 00:00:24,360 ‫And so now we want to add another check box here 7 00:00:24,360 --> 00:00:28,113 ‫to basically allow the guest to do that now. 8 00:00:29,310 --> 00:00:32,959 ‫So let's add that before here. 9 00:00:32,959 --> 00:00:37,959 ‫So let's create another box and another check box as well. 10 00:00:42,080 --> 00:00:45,300 ‫So here we're gonna have the checked state, 11 00:00:45,300 --> 00:00:49,563 ‫and for that we need to again create a new piece of state. 12 00:00:51,060 --> 00:00:56,060 ‫So let's call it at breakfast and set at breakfast. 13 00:01:02,640 --> 00:01:06,400 ‫And initially this is going to be false 14 00:01:07,290 --> 00:01:11,103 ‫and then we use that right here. 15 00:01:14,670 --> 00:01:17,283 ‫Then as always the unchanged handler. 16 00:01:18,810 --> 00:01:22,170 ‫But here we will need to do multiple things. 17 00:01:22,170 --> 00:01:23,310 ‫So first of all, 18 00:01:23,310 --> 00:01:27,460 ‫of course we want to toggle this checked value. 19 00:01:27,460 --> 00:01:31,750 ‫So set breakfast and then 20 00:01:34,110 --> 00:01:38,160 ‫as always we just toggle that value. 21 00:01:38,160 --> 00:01:40,560 ‫And so that should now already be working. 22 00:01:40,560 --> 00:01:44,250 ‫But even more importantly is that whenever we change that 23 00:01:44,250 --> 00:01:45,640 ‫we want to add breakfast 24 00:01:45,640 --> 00:01:49,863 ‫we also need to set the paid state back to false. 25 00:01:51,780 --> 00:01:56,460 ‫So set, confirm, paid to false 26 00:01:56,460 --> 00:02:00,030 ‫because if the guest adds some more things 27 00:02:00,030 --> 00:02:03,270 ‫that they need to pay then even if they had already paid 28 00:02:03,270 --> 00:02:05,580 ‫they will need to pay something more. 29 00:02:05,580 --> 00:02:09,723 ‫And so it makes sense to then put it back to faults. 30 00:02:11,070 --> 00:02:16,070 ‫Now here, then let's say want to add breakfast for 31 00:02:20,250 --> 00:02:21,843 ‫and then here the price. 32 00:02:25,350 --> 00:02:28,760 ‫And so here we got that checkbox 33 00:02:28,760 --> 00:02:31,320 ‫and we should also give it an ID 34 00:02:31,320 --> 00:02:35,163 ‫so that we can easily click there on that label as well. 35 00:02:41,670 --> 00:02:43,320 ‫And there we go. 36 00:02:43,320 --> 00:02:47,340 ‫Now this guest here hadn't paid already anyway 37 00:02:47,340 --> 00:02:51,903 ‫so let's also check out this other guest Maria Gomez. 38 00:02:53,340 --> 00:02:55,170 ‫So go to check in. 39 00:02:55,170 --> 00:02:59,370 ‫And so here, this guest also has no breakfast 40 00:02:59,370 --> 00:03:00,980 ‫but they have already paid. 41 00:03:00,980 --> 00:03:05,310 ‫And so now if I click here, then that should deactivate 42 00:03:05,310 --> 00:03:06,530 ‫and indeed it does. 43 00:03:06,530 --> 00:03:10,440 ‫Cause now they need to pay some additional value 44 00:03:10,440 --> 00:03:13,460 ‫and let's actually next calculate that value 45 00:03:13,460 --> 00:03:15,490 ‫that will need to be calculated. 46 00:03:15,490 --> 00:03:20,490 ‫And so for this, we will actually need to use our settings. 47 00:03:20,700 --> 00:03:25,260 ‫So remember how in our API we have this settings 48 00:03:25,260 --> 00:03:28,680 ‫and there one of the values is exactly, 49 00:03:28,680 --> 00:03:30,213 ‫and let's wait for it here. 50 00:03:31,590 --> 00:03:35,450 ‫So one of the values is the price of the breakfast. 51 00:03:35,450 --> 00:03:40,230 ‫And so now we can use that setting to calculate the price. 52 00:03:40,230 --> 00:03:43,590 ‫And this was actually one of the reasons why I decided to 53 00:03:43,590 --> 00:03:46,980 ‫implement this feature so that it actually makes sense 54 00:03:46,980 --> 00:03:49,293 ‫that we defined those settings. 55 00:03:51,120 --> 00:03:55,860 ‫But anyway, we already have the use settings 56 00:03:55,860 --> 00:03:57,930 ‫hook right here. 57 00:03:57,930 --> 00:04:01,833 ‫And so let's just use that here. 58 00:04:03,810 --> 00:04:07,980 ‫So from this we will get the settings 59 00:04:07,980 --> 00:04:10,410 ‫and then is loading state. 60 00:04:10,410 --> 00:04:12,120 ‫And since we already have one, 61 00:04:12,120 --> 00:04:16,327 ‫let's call this one, "Is loading the settings" 62 00:04:19,410 --> 00:04:23,230 ‫and then use settings 63 00:04:27,090 --> 00:04:31,323 ‫And let's bring that in here. 64 00:04:36,780 --> 00:04:41,647 ‫Use settings from then settings and use settings. 65 00:04:44,930 --> 00:04:48,450 ‫And here I noticed that actually this should be 66 00:04:48,450 --> 00:04:53,220 ‫called use check in, not like this. 67 00:04:53,220 --> 00:04:58,220 ‫So yeah, here is a problem with this name 68 00:05:00,630 --> 00:05:03,663 ‫and then also here, 69 00:05:06,300 --> 00:05:08,740 ‫but the name of the file was actually correct. 70 00:05:08,740 --> 00:05:12,570 ‫But anyway, now we can actually calculate the price 71 00:05:12,570 --> 00:05:14,073 ‫of breakfast here. 72 00:05:17,250 --> 00:05:22,127 ‫So let's say optional breakfast price. 73 00:05:25,980 --> 00:05:30,723 ‫And so here we now get the settings dot breakfast 74 00:05:32,829 --> 00:05:37,653 ‫price times the number of nights, 75 00:05:39,780 --> 00:05:42,490 ‫times the number of guests. 76 00:05:42,490 --> 00:05:46,450 ‫And I'm noticing that here it needs to be after this part 77 00:05:47,430 --> 00:05:48,633 ‫but there we go. 78 00:05:50,430 --> 00:05:53,643 ‫So where do we need that? 79 00:05:55,020 --> 00:05:56,073 ‫Right here? 80 00:05:58,650 --> 00:06:00,960 ‫Optional breakfast price. 81 00:06:00,960 --> 00:06:04,320 ‫And also we should only even render this box 82 00:06:04,320 --> 00:06:08,700 ‫if the guest didn't choose breakfast initially. 83 00:06:08,700 --> 00:06:12,483 ‫So no has breakfast. 84 00:06:14,490 --> 00:06:18,730 ‫And yeah, now we get this price 85 00:06:18,730 --> 00:06:23,730 ‫we just need to wrap up again in our formatting. 86 00:06:25,120 --> 00:06:26,770 ‫Yeah, so right here 87 00:06:31,890 --> 00:06:33,810 ‫And nice. 88 00:06:33,810 --> 00:06:36,090 ‫So we click here, then that deactivates this 89 00:06:36,090 --> 00:06:39,690 ‫then we can check in because we need to then declare 90 00:06:39,690 --> 00:06:42,370 ‫that we received the entire payment. 91 00:06:42,370 --> 00:06:46,890 ‫However, now here it's not only the 450 92 00:06:46,890 --> 00:06:50,433 ‫but also we need to add the price of breakfast. 93 00:06:51,360 --> 00:06:54,573 ‫So let's come back here and change this. 94 00:06:55,770 --> 00:06:59,733 ‫So basically if no add breakfast 95 00:07:01,440 --> 00:07:04,800 ‫then this is the value that we need to display. 96 00:07:04,800 --> 00:07:06,810 ‫But otherwise we need to add 97 00:07:06,810 --> 00:07:10,560 ‫to that also deep breakfast price. 98 00:07:10,560 --> 00:07:14,310 ‫So let's actually create a template literal here. 99 00:07:14,310 --> 00:07:19,310 ‫And then in here we want to format currency of total price 100 00:07:21,060 --> 00:07:26,060 ‫plus format currency of the optional breakfast price. 101 00:07:27,570 --> 00:07:31,230 ‫And then out there in parenthesis 102 00:07:31,230 --> 00:07:36,010 ‫we basically want to write out these two values separately 103 00:07:36,010 --> 00:07:40,533 ‫so that we can actually see what that value is made of. 104 00:07:41,440 --> 00:07:46,440 ‫So total price and then plus again, 105 00:07:47,340 --> 00:07:48,633 ‫part of the string. 106 00:07:49,560 --> 00:07:54,063 ‫And then here finally the optional breakfast price. 107 00:07:55,530 --> 00:07:58,230 ‫Okay, so that doesn't look right. 108 00:07:58,230 --> 00:08:01,080 ‫And of course this addition needs 109 00:08:01,080 --> 00:08:05,103 ‫to of course happen inside the function here. 110 00:08:08,640 --> 00:08:13,640 ‫Alright, then next up, let's also use this value here 111 00:08:14,140 --> 00:08:16,830 ‫which we haven't used yet. 112 00:08:16,830 --> 00:08:21,340 ‫And so here, let's say while we are loading 113 00:08:22,740 --> 00:08:26,550 ‫both the booking or the settings, 114 00:08:26,550 --> 00:08:28,740 ‫then we need to return our spinner. 115 00:08:28,740 --> 00:08:32,670 ‫And then finally, we of course also need to pass 116 00:08:32,670 --> 00:08:36,753 ‫in all the relevant data here into the check-in function. 117 00:08:37,740 --> 00:08:39,920 ‫So that's actually the most important part. 118 00:08:39,920 --> 00:08:42,723 ‫And so let's take care of that now. 119 00:08:44,090 --> 00:08:47,943 ‫So first of all, we need a conditional here. 120 00:08:48,990 --> 00:08:53,127 ‫So let's say if at breakfast, 121 00:08:55,260 --> 00:08:56,523 ‫then do something. 122 00:08:57,510 --> 00:09:00,573 ‫And if not, then do this. 123 00:09:04,680 --> 00:09:05,910 ‫Okay. 124 00:09:05,910 --> 00:09:08,010 ‫Now here into the check-in function 125 00:09:08,010 --> 00:09:09,870 ‫we will need to pass in something 126 00:09:09,870 --> 00:09:12,630 ‫more than just the booking id. 127 00:09:12,630 --> 00:09:16,380 ‫So we will also have to pass in that now breakfast will 128 00:09:16,380 --> 00:09:20,880 ‫be set to true and we will need to pass in the new prices. 129 00:09:20,880 --> 00:09:24,870 ‫So the new extras price and the total price. 130 00:09:24,870 --> 00:09:27,600 ‫So that means that in our check-in function 131 00:09:27,600 --> 00:09:31,780 ‫we need to accept those additional values. 132 00:09:31,780 --> 00:09:32,900 ‫And so let's come here 133 00:09:32,900 --> 00:09:36,123 ‫and adapt this function here a little bit. 134 00:09:37,560 --> 00:09:41,550 ‫So remember how this mutation function can only 135 00:09:41,550 --> 00:09:43,430 ‫receive one argument. 136 00:09:43,430 --> 00:09:45,990 ‫And so instead of just passing it 137 00:09:45,990 --> 00:09:49,500 ‫the booking id, we will pass in an object 138 00:09:49,500 --> 00:09:53,970 ‫and then here we immediately the structure that object. 139 00:09:53,970 --> 00:09:56,370 ‫And so as a second argument 140 00:09:56,370 --> 00:09:59,160 ‫or as a second part of the object, 141 00:09:59,160 --> 00:10:02,373 ‫let's pass in a new object called breakfast. 142 00:10:03,660 --> 00:10:05,550 ‫And so here is where we will define 143 00:10:05,550 --> 00:10:08,160 ‫all the properties that we need. 144 00:10:08,160 --> 00:10:10,979 ‫And then here we will just take all of them out 145 00:10:10,979 --> 00:10:15,979 ‫and spread them into this object, 146 00:10:16,620 --> 00:10:18,300 ‫which will actually be the one 147 00:10:18,300 --> 00:10:20,763 ‫that updates the booking itself. 148 00:10:22,140 --> 00:10:24,900 ‫Now, okay, and this will make more sense once 149 00:10:24,900 --> 00:10:27,753 ‫we actually use this function now again. 150 00:10:29,940 --> 00:10:34,090 ‫So here we now pass in the booking ID 151 00:10:35,190 --> 00:10:40,053 ‫and then that object called breakfast. 152 00:10:41,000 --> 00:10:43,530 ‫And so here is where we now set the properties 153 00:10:43,530 --> 00:10:46,653 ‫that we want to update on super base. 154 00:10:47,610 --> 00:10:51,477 ‫So the first one is called has breakfast. 155 00:10:53,840 --> 00:10:55,890 ‫And so this one will become true. 156 00:10:55,890 --> 00:11:00,890 ‫Then we have the extras price swan super base. 157 00:11:00,900 --> 00:11:05,040 ‫It's not called breakfast price, but really extras price. 158 00:11:05,040 --> 00:11:07,140 ‫And so this one is of course, 159 00:11:07,140 --> 00:11:10,710 ‫the optional breakfast price that we calculated. 160 00:11:10,710 --> 00:11:14,270 ‫And finally, the total price will also need to be updated 161 00:11:14,270 --> 00:11:17,820 ‫because it's gonna be the current total price 162 00:11:17,820 --> 00:11:21,780 ‫plus the optional breakfast price. 163 00:11:21,780 --> 00:11:23,310 ‫There we go. 164 00:11:23,310 --> 00:11:25,413 ‫But then we also need to adapt this one. 165 00:11:26,340 --> 00:11:30,120 ‫So here we still need then to pass in an object 166 00:11:30,120 --> 00:11:35,120 ‫and the breakfast object is also gonna be expected. 167 00:11:35,960 --> 00:11:39,273 ‫And so just make this an empty object. 168 00:11:40,470 --> 00:11:41,303 ‫All right. 169 00:11:41,303 --> 00:11:45,600 ‫And so again, now these three here 170 00:11:45,600 --> 00:11:50,040 ‫these three properties will be spread here 171 00:11:50,040 --> 00:11:53,410 ‫into the object that we then pass into update booking 172 00:11:53,410 --> 00:11:57,660 ‫which will then update the booking on super base. 173 00:11:57,660 --> 00:12:02,070 ‫And so with this, we should actually be feature complete. 174 00:12:02,070 --> 00:12:06,723 ‫So let's reload here and try it with this guest. 175 00:12:09,780 --> 00:12:12,660 ‫So let's say we want to add breakfast, 176 00:12:12,660 --> 00:12:13,930 ‫then confirm here 177 00:12:15,210 --> 00:12:16,263 ‫and then let's see. 178 00:12:18,600 --> 00:12:21,660 ‫And so that seems to have worked. 179 00:12:21,660 --> 00:12:23,880 ‫So let's come back to our bookings. 180 00:12:23,880 --> 00:12:28,880 ‫And then here, let's get only the checked in once. 181 00:12:28,890 --> 00:12:31,690 ‫So this was or guest here. 182 00:12:31,690 --> 00:12:34,210 ‫And indeed now we do have breakfast 183 00:12:34,210 --> 00:12:37,130 ‫and the price has also been updated. 184 00:12:37,130 --> 00:12:42,130 ‫So we now have the additional $25 for breakfast. 185 00:12:42,270 --> 00:12:45,333 ‫Great, let's just try another one. 186 00:12:46,440 --> 00:12:48,180 ‫So just to see if the price 187 00:12:48,180 --> 00:12:50,373 ‫has also been calculated correctly. 188 00:12:52,020 --> 00:12:54,280 ‫So let's check in Fatimah. 189 00:12:55,245 --> 00:12:59,010 ‫And this guest hadn't even paid yet. 190 00:12:59,010 --> 00:13:01,330 ‫And so let say that first we clicked here 191 00:13:01,330 --> 00:13:03,210 ‫then we wanted to check in 192 00:13:03,210 --> 00:13:06,550 ‫but then the guests wanted to also add breakfast 193 00:13:06,550 --> 00:13:09,420 ‫which is actually pretty expensive here. 194 00:13:09,420 --> 00:13:12,320 ‫So maybe we think that this is a bit too expensive 195 00:13:12,320 --> 00:13:17,280 ‫and then we can go to our settings, update this 225 196 00:13:17,280 --> 00:13:21,213 ‫or actually 215, which I think was the original value. 197 00:13:22,650 --> 00:13:27,650 ‫And if we then go back, so once this has been updated 198 00:13:29,430 --> 00:13:31,630 ‫so if we then go back to our bookings 199 00:13:31,630 --> 00:13:35,280 ‫the unconfirmed ones and this one, 200 00:13:35,280 --> 00:13:38,640 ‫then indeed the breakfast is a bit cheaper 201 00:13:38,640 --> 00:13:41,340 ‫because it's now dynamically reading this value 202 00:13:41,340 --> 00:13:43,200 ‫from our settings. 203 00:13:43,200 --> 00:13:46,160 ‫So we click here, then we want to add breakfast 204 00:13:46,160 --> 00:13:48,270 ‫and then we need to confirm again 205 00:13:48,270 --> 00:13:50,433 ‫that debt has also been paid. 206 00:13:51,570 --> 00:13:52,533 ‫So let's see. 207 00:13:54,840 --> 00:13:57,483 ‫And great. 208 00:13:58,590 --> 00:14:01,923 ‫So another feature was successfully implemented.