‫So as the second part of the check-in process
‫let's now allow guests to also add additional breakfast
‫if they haven't done so initially.
‫So for example, this guest right here did not
‫by breakfast initially when the booking was first made.
‫And so now we want to add another check box here
‫to basically allow the guest to do that now.
‫So let's add that before here.
‫So let's create another box and another check box as well.
‫So here we're gonna have the checked state,
‫and for that we need to again create a new piece of state.
‫So let's call it at breakfast and set at breakfast.
‫And initially this is going to be false
‫and then we use that right here.
‫Then as always the unchanged handler.
‫But here we will need to do multiple things.
‫So first of all,
‫of course we want to toggle this checked value.
‫So set breakfast and then
‫as always we just toggle that value.
‫And so that should now already be working.
‫But even more importantly is that whenever we change that
‫we want to add breakfast
‫we also need to set the paid state back to false.
‫So set, confirm, paid to false
‫because if the guest adds some more things
‫that they need to pay then even if they had already paid
‫they will need to pay something more.
‫And so it makes sense to then put it back to faults.
‫Now here, then let's say want to add breakfast for
‫and then here the price.
‫And so here we got that checkbox
‫and we should also give it an ID
‫so that we can easily click there on that label as well.
‫And there we go.
‫Now this guest here hadn't paid already anyway
‫so let's also check out this other guest Maria Gomez.
‫So go to check in.
‫And so here, this guest also has no breakfast
‫but they have already paid.
‫And so now if I click here, then that should deactivate
‫and indeed it does.
‫Cause now they need to pay some additional value
‫and let's actually next calculate that value
‫that will need to be calculated.
‫And so for this, we will actually need to use our settings.
‫So remember how in our API we have this settings
‫and there one of the values is exactly,
‫and let's wait for it here.
‫So one of the values is the price of the breakfast.
‫And so now we can use that setting to calculate the price.
‫And this was actually one of the reasons why I decided to
‫implement this feature so that it actually makes sense
‫that we defined those settings.
‫But anyway, we already have the use settings
‫hook right here.
‫And so let's just use that here.
‫So from this we will get the settings
‫and then is loading state.
‫And since we already have one,
‫let's call this one, "Is loading the settings"
‫and then use settings
‫And let's bring that in here.
‫Use settings from then settings and use settings.
‫And here I noticed that actually this should be
‫called use check in, not like this.
‫So yeah, here is a problem with this name
‫and then also here,
‫but the name of the file was actually correct.
‫But anyway, now we can actually calculate the price
‫of breakfast here.
‫So let's say optional breakfast price.
‫And so here we now get the settings dot breakfast
‫price times the number of nights,
‫times the number of guests.
‫And I'm noticing that here it needs to be after this part
‫but there we go.
‫So where do we need that?
‫Right here?
‫Optional breakfast price.
‫And also we should only even render this box
‫if the guest didn't choose breakfast initially.
‫So no has breakfast.
‫And yeah, now we get this price
‫we just need to wrap up again in our formatting.
‫Yeah, so right here
‫And nice.
‫So we click here, then that deactivates this
‫then we can check in because we need to then declare
‫that we received the entire payment.
‫However, now here it's not only the 450
‫but also we need to add the price of breakfast.
‫So let's come back here and change this.
‫So basically if no add breakfast
‫then this is the value that we need to display.
‫But otherwise we need to add
‫to that also deep breakfast price.
‫So let's actually create a template literal here.
‫And then in here we want to format currency of total price
‫plus format currency of the optional breakfast price.
‫And then out there in parenthesis
‫we basically want to write out these two values separately
‫so that we can actually see what that value is made of.
‫So total price and then plus again,
‫part of the string.
‫And then here finally the optional breakfast price.
‫Okay, so that doesn't look right.
‫And of course this addition needs
‫to of course happen inside the function here.
‫Alright, then next up, let's also use this value here
‫which we haven't used yet.
‫And so here, let's say while we are loading
‫both the booking or the settings,
‫then we need to return our spinner.
‫And then finally, we of course also need to pass
‫in all the relevant data here into the check-in function.
‫So that's actually the most important part.
‫And so let's take care of that now.
‫So first of all, we need a conditional here.
‫So let's say if at breakfast,
‫then do something.
‫And if not, then do this.
‫Okay.
‫Now here into the check-in function
‫we will need to pass in something
‫more than just the booking id.
‫So we will also have to pass in that now breakfast will
‫be set to true and we will need to pass in the new prices.
‫So the new extras price and the total price.
‫So that means that in our check-in function
‫we need to accept those additional values.
‫And so let's come here
‫and adapt this function here a little bit.
‫So remember how this mutation function can only
‫receive one argument.
‫And so instead of just passing it
‫the booking id, we will pass in an object
‫and then here we immediately the structure that object.
‫And so as a second argument
‫or as a second part of the object,
‫let's pass in a new object called breakfast.
‫And so here is where we will define
‫all the properties that we need.
‫And then here we will just take all of them out
‫and spread them into this object,
‫which will actually be the one
‫that updates the booking itself.
‫Now, okay, and this will make more sense once
‫we actually use this function now again.
‫So here we now pass in the booking ID
‫and then that object called breakfast.
‫And so here is where we now set the properties
‫that we want to update on super base.
‫So the first one is called has breakfast.
‫And so this one will become true.
‫Then we have the extras price swan super base.
‫It's not called breakfast price, but really extras price.
‫And so this one is of course,
‫the optional breakfast price that we calculated.
‫And finally, the total price will also need to be updated
‫because it's gonna be the current total price
‫plus the optional breakfast price.
‫There we go.
‫But then we also need to adapt this one.
‫So here we still need then to pass in an object
‫and the breakfast object is also gonna be expected.
‫And so just make this an empty object.
‫All right.
‫And so again, now these three here
‫these three properties will be spread here
‫into the object that we then pass into update booking
‫which will then update the booking on super base.
‫And so with this, we should actually be feature complete.
‫So let's reload here and try it with this guest.
‫So let's say we want to add breakfast,
‫then confirm here
‫and then let's see.
‫And so that seems to have worked.
‫So let's come back to our bookings.
‫And then here, let's get only the checked in once.
‫So this was or guest here.
‫And indeed now we do have breakfast
‫and the price has also been updated.
‫So we now have the additional $25 for breakfast.
‫Great, let's just try another one.
‫So just to see if the price
‫has also been calculated correctly.
‫So let's check in Fatimah.
‫And this guest hadn't even paid yet.
‫And so let say that first we clicked here
‫then we wanted to check in
‫but then the guests wanted to also add breakfast
‫which is actually pretty expensive here.
‫So maybe we think that this is a bit too expensive
‫and then we can go to our settings, update this 225
‫or actually 215, which I think was the original value.
‫And if we then go back, so once this has been updated
‫so if we then go back to our bookings
‫the unconfirmed ones and this one,
‫then indeed the breakfast is a bit cheaper
‫because it's now dynamically reading this value
‫from our settings.
‫So we click here, then we want to add breakfast
‫and then we need to confirm again
‫that debt has also been paid.
‫So let's see.
‫And great.
‫So another feature was successfully implemented.