Build an Appointment Booking System With Inertia
This episode is for members only

Sign up to access "Build an Appointment Booking System With Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
37. Handling appointment collisions

Episodes

0%
Your progress
  • Total: 5h 0m
  • Played: 0m
  • Remaining: 5h 0m
Join or sign in to track your progress
01. Introduction
01. Introduction and demo
5m 45s
0%
02. A fresh Inertia project with Pest
3m 4s
0%
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
20. Employee and service resources
9m 7s
0%
21. Listing employees and services
8m 58s
0%
22. Showing services for an employee
8m 7s
0%
23. Scaffolding the checkout
8m 37s
0%
24. Making an employee optional
3m 38s
0%
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
33. Hooking everything up to a form
4m 42s
0%
34. Setting an employee for the service checkout
7m 30s
0%
35. Adding booking details
3m 55s
0%
36. Storing an appointment
8m 28s
0%
37. Handling appointment collisions
8m 37s
0%
38. Showing the confirmation page
8m 39s
0%
39. Cancelling an appointment
3m 49s
0%

Transcript

00:00
So super important, we need to handle appointment collisions. If we are on this checkout page and someone has already booked a slot that we have just clicked,
00:08
it's going to create a duplicate appointment. So we need to handle this and show a message if that is the case. OK, so the way that we're going to do this is pretty much just copy all of our availability stuff over when we make the booking, because availability and our service slot generator
00:26
or availability generator is the source of truth for everything. So we are going to copy and paste this over a little bit of duplication, but it's not the end of the world. And let's go ahead and pull this in and just get started.
00:39
So the employee, we already know it's only going to ever be a booking with a single employee. So in here, we can just do a collection of a single employee. And that's pretty much it. Now, in terms of the dates, we pretty much just need to look for the day
00:53
that the user is booking for. We don't need to look at any other dates here. So what we can do is use carbon here and we can pause in the date time from the request. So let's go ahead and pull that in and just say start of day.
01:06
And then we can do the same thing for the end of the period and just look at the end of the day. So this will just grab all of the slots for all of the availability for that day. So if we just die dump on our availability and we go ahead and grab our slots out or just take the availability and dump it out so we can see what we're doing.
01:26
Let's make a booking and see what we get now. And there we go. So that contains only the date that we're looking for. And it, of course, contains all of the slots for that day.
01:38
If one of them has been booked up by the time we make this request, that slot will now no longer be available. So what we really need is some way to have an if statement here and redirect back with some sort of flash message.
01:51
So what do we want this to look like? Well, we'd probably say if not availability first, which is just going to be the first date and the only date that we're looking at. And we might want to say something like contains slot
02:03
and then pass in the slot that we're looking for. Now, remember, our slots, if we just take a look at the times here, have the time in here with the date. So we could pass in something like nine o'clock
02:17
or just pass in the entire date and compare it. So let's just pass in a formatted version of this. So the contains slot expects a sort of normalized value. So let's go ahead and grab carbon out.
02:30
And let's pass that date time again. Let's take the date time. And then let's pass down the time string like so. So let's just go ahead and do nothing here for now.
02:42
And let's implement this contains slot method over on our dates. So let's create this out. Contains slot. And in here, fix that up.
02:53
Let's take in the time in here. And for now, we'll just die dump on that time just to see what that gives us. OK, so let's go ahead and choose a slot here. Make a booking quickly.
03:05
And let's see what we get. OK, yeah. So we get the full formatted time in there. Great.
03:10
So for this method now, all we need to do is look within the slots that we have within this date and make sure that this time exists within that slot. So to do that, we'll just go ahead and use our slots. And go ahead and perform a search with the Laravel collection.
03:26
Let's create our closure here. And we know that for each of these, we're going to get a slot into there. And we want to bring in the time into scope so we can compare this. So let's go ahead and use our time there.
03:38
And then let's check that these slot time. And remember, all of our slots contain the time as a carbon object. So we'll just check that the time string for this. So let's go ahead and grab the to time string method and compare that to the time.
04:01
So basically, when we are passing this in from our appointment store controller, grab the time string. And then our contains slot will take that time string and check that the time string is within there.
04:14
It's a little bit easier to do this than comparing dates because we know that our slots are always going to have very specific times. OK. Let's try this out.
04:21
So I'm just going to die dump here and say taken. And of course, we'll redirect back with a message if that's the case. OK. So to do this, what we're going to do is come over to the page here, give this a refresh.
04:32
And then we're going to change one of these appointments over to 10 o'clock. So we know that that slot is already taken. So I'll set this from 10 to 10.30. And let's choose that and go ahead and make a booking.
04:43
And we should see that die dump taken when we click make booking. And yeah, there we go. So we know that slot's already been taken. When we refresh the page, of course, it goes because it's already in the database.
04:56
OK. So how do we go ahead and redirect and show a flash message? And there are a couple of ways to do this. You could have this as part of your validation.
05:04
And then you could just pick this up via your form in Inertia. But to me, it doesn't feel like validation. It feels more like something that happens after validation. So what we're going to do here is we're just going to return back to the previous page.
05:16
But we're going to choose to include some sort of message or flash message. So I'm just going to call this message. And then I'm going to add some text in here. So I'll just say that appointment was taken while you were in checkout.
05:33
Please try another time. Something like that. Of course, you can change this around. So the way that we get this flash message now is by adding this to our Inertia middleware.
05:44
So let's go over to our handle Inertia requests middleware. Let's come down to where we're sharing data globally. And let's grab our message out from here using our session. So doing this will create out a flashed session value.
05:58
And we're just going to grab that in there. So basically, on the next request, when we redirect back, this global value will be available to us. And we can just output this on the page under a condition.
06:09
So let's go over to our checkout and test this out. So we're going to come down to where our form is at the bottom here. And I'm just going to do this up here. Let's just go and dump this out to the page.
06:19
So we're going to say page props and message. And that will grab that global value for us. OK, so when we refresh the page and choose a slot, of course, that's not available. Let's go over to our database and set one of these back to 930.
06:32
So we know that that slot gets taken. And we'll just set that to 1030. And let's go ahead and enter our details here. OK, so now we are redirecting back, if that is the case, which it should be.
06:44
And we should see that flash message. Great, so that is working really nicely. Now, one thing is we're going to the top of the page, which is just standard behavior within Inertia.
06:53
We can fix this up by going up to our submit method and making sure that we set preserve scroll to true so the page stays in the same place. So that will just fix that up for us. OK, so now that we've done that, we just need to basically design out the message.
07:08
And we're good to go. And I only show it under a certain condition. So let's swap this over to a div. And we'll say v if, not v for, page props and message.
07:19
And then we'll go ahead and output the message directly in here. So page props and message. And then we can just add some styling to this. So I did this earlier.
07:27
But we'll go ahead and preview in a minute. OK, so we'll set the background slate 100, text to white. In fact, let's bump that up to 900. Padding the same as everything else that we have on the page.
07:40
And we'll set this to rounded large. And we'll set a margin on the top of three. And let's actually pull this up to above this form wrapper. So let's pull this just above the header.
07:51
And that should sit away from that nicely now. OK, let's try this one more time. And then we should be good. So let's choose 1030.
07:58
And of course, go over to our database and switch this over to 1030 till, say, 1130. And let's go over and try and book this. And we should see that nicer message now asking us to try again. We can choose a different slot now and hopefully successfully make the booking.
08:17
We can't choose 11 because we've already got an appointment at 1130. But let's choose the 1130 slot. Hit Make Booking. And obviously, that's going to go through and create the booking for us.
08:27
It's redirected us back. So it doesn't look like anything's happened. Of course, that has been created in the database. But we need to work on our confirmation page, which we're going to do in the next episode.

Episode summary

In this episode, we tackle an important edge case for booking systems: what happens if someone tries to book a slot that's already been taken? This can easily happen if two users are on the checkout page at the same time and both see the same available slot—without proper collision handling, you could end up with double bookings!

We start by mirroring our availability-checking logic right into the booking process. That means, just before creating an appointment, we re-check whether the selected slot is still actually available. We set up a method to confirm the slot's availability based on its date and time, making sure that what the user picked hasn't already been grabbed by someone else in the meantime.

If the slot isn't available, we don't just fail silently. Instead, we flash a friendly message back to the user telling them that the slot has been taken while they were checking out. We set this up using Inertia's global page props, so it smoothly displays at the top of the checkout page without any weird reloads or scroll jumps.

Finally, we add a bit of UI polish to make the flash message stand out. The episode ends with a quick demo: after some database tweaks and a couple of booking attempts, we confirm that everything works as expected. Failed bookings show a "try another time" message, and successful ones go through. In the next episode, we'll work on confirming successful bookings with a dedicated confirmation page!

Episode discussion

No comments, yet. Be the first!