Build an Appointment Booking System With Inertia

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

23. Scaffolding the checkout

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

02. A fresh Inertia project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Employee and service resources

21. Listing employees and services

22. Showing services for an employee

23. Scaffolding the checkout

24. Making an employee optional

04. Building the availability calendar

25. Rendering the datepicker

26. Fetching availability

27. Disabling unavailable dates

28. Showing the first available date

29. Fetching future availability

30. Showing slot count on the calendar

31. Fixing up core availability in the past

32. Showing available slots

05. Booking appointments

33. Hooking everything up to a form

34. Setting an employee for the service checkout

35. Adding booking details

36. Storing an appointment

37. Handling appointment collisions

38. Showing the confirmation page

39. Cancelling an appointment

Transcript

00:00

We know that we want the checkout to work in slightly different ways

00:03

depending on if we choose a employee first and then a service or just a service. So the first thing that we're going to do is scaffold out the checkout in the normal way if we have an employee and a service, which we can pass down to the URL and work out the availability for that employee.

00:21

But in the next episode, we'll look at how we can do this by just going through to the checkout only with a service and sort of nulling the employee until we have selected a time slot. So let's do the first thing first. We'll go and click on any of these and go through to a checkout page

00:39

with some basic scaffolding and show all that information. Okay, so let's go over to our web routes and we will create out a new controller for this and pretty obviously this is going to be a checkout controller. So let's say checkout controller and we'll define a route out for this down here.

00:58

So the checkout controller is going to look like this. Checkout, we're going to pass a service in by the slug and then we're going to pass an employee in by the slug as well. Now remember this is eventually going to be optional,

01:11

but we'll look at that in the next episode. So our checkout controller, let's just call this checkout. Now really importantly what I want to add to the end of this is scope bindings. What this will do is it will take the employee

01:25

and make sure that this belongs to the service. We don't want to have anyone pass in an employee that can't perform a service. We want to error if that happens and I'll show you that in a second. So let's go over to our checkout controller.

01:38

Let's create our invoke magic method and we know that we're accepting in a service here. So let's pull that in and an employee. So let's pull that in and for now, let's just do nothing in here.

01:49

So I'm going to link through to this over in our service component. I'm not directly going to link through into here because this is going to be different depending on whether we select it over here or if we select it here.

02:03

So we're going to get rid of the href in here. We're going to go over to our employee page and we're going to link the href directly in here. So let's say href root

02:13

and we know that this requires the employee and the service. So let's define the checkout in here and let's just check what comes first, the service first. So service and the employees, that's all we need to do to build that route up.

02:29

So now from this page specifically, we now have a link through to that checkout. Now it's not doing anything at the moment because we haven't returned an inertial response, but let's do that quickly and then we'll see trying to change around the URL.

02:42

So over in our checkout controller, let's just return an inertial response in here and we'll render out of course a checkout page and let's create this out in our pages section.

02:59

And we'll just define this out really quickly with not much at all, with checkout and we'll see what happens. So when I click on this now, we go through to the checkout. Now we've got hair performed by Alex.

03:10

We know that Mabel can't perform beard. She can only perform hair. So for example, with that scope bindings that I added to the route, if I do choose Mabel in here, it's going to give us a 404 not found.

03:21

So that's a really handy feature within Laravel to automatically scope this so you don't have to add an if statement to your controllers. Okay, so now that we have got the checkout page working, let's pass the data down that we need in here, the very basic data,

03:35

which is just going to be the service and the employee for now. So again, pretty straightforward. We already know how to do this. Let's go ahead and grab the employee resource, make this out for

03:46

the employee and we'll do the same for the service here as well and switch both of these out, change this to our service resource and we are done. We should have these available now. So in our checkout, let's bring in our script section once again and

04:01

let's define out our base layout first of all. So base layout, pull that in and define our options in here with the layout, just our base layout and then we'll define our props in here and we're going to need these a little bit later.

04:17

So I'm going to define these as props when we set everything up. We're going to need to access these props directly within our script section. So we'll give these a variable and then we've just got our employee in here, which is an object and the same thing for our service as well.

04:31

Great. So once again, let's just dump these on the page just to make sure that we've got them and we'll be good to go and there we go. Perfect.

04:41

We've got everything we need. Okay, so we're confident we've got the right data. Let's go and just scaffold out everything that we need within our checkout. So the first thing is this entire thing is going to be a form.

04:51

We're not submitting this in the traditional sense, but the button at the end here is going to submit this overall form, call a method within our JavaScript file here or in the script section and it's going to create the appointment.

05:03

Okay, so again, what we're going to do is treat this like a kind of container with sections. So we're going to space everything out by 10 and then in here we're going to have another H2 and once again,

05:14

we'll just take this from one of our other pages, get rid of that margin top and let's just change the title over to here's what you're booking and the top section is just going to be a summary of everything that we've booked. So let's create out a container in here.

05:30

We are going to set a margin on the top here of six. We're going to make this flex. We're going to space everything out in the x-axis by three and we'll set a background of say slate 100 make this rounded large and

05:43

we'll add some padding to this and this is just basically going to hold all of the details for the employee. Okay, so inside of here we are first of all going to have an image and that's going to be of the employee.

05:55

So let's bind in the source and let's say employee profile photo URL. We'll get rid of the alt just for now. Again, we'll add some styling to this.

06:05

So let's say rounded large size 14 and we're done and then next to this we're going to have another container with all of the information. So this is going to have a width of full and then that's going to sit next to that with all of them details here and

06:20

then the price will be over here. So let's output these details just within basic containers here. So let's add the service title and then we'll add the service duration inside of here.

06:33

So service duration and of course that is in minutes. So let's just add minutes onto there and then down here we're going to have the service price. And let's just take a look at that there, but we want this to sit next to each other.

06:49

So we'll just say flex and justify between and there we go. So now the other information can come down here as well. So why don't we just again just add another container inside of here, add this to that container and then underneath we'll have the employee name.

07:08

And then we'll set this to be a font of semi bold. And I think that should be enough just for that. Great, so we've got the service that we want, the employee and we're good. Now just underneath this section, so if we just close this off,

07:23

we're going to have another section in here, which is going to be the booking calendar. So we can pretty much get rid of all of this stuff in here. We'll keep this in here, but this is going to be the picker and then here we're going to have a sort of step.

07:37

So we're going to say when for and then underneath this we're going to have the ability to choose a slot. Let's just get rid of this background rounded and padding and the space X on there as well, that will get rid of all of that.

07:50

And then down here we're going to have choose a slot. Great, and then this is going to be the slots inside of here. And then the last step is going to be the customers details. So we'll just say your details and book and this will be our form.

08:11

So we're pretty much set up for each section of our checkout. We've got what we're booking and then we're just going to fill in each of these sections as we go through the course. Now, like I said, we can potentially have no employee.

08:25

We just want to look at who's available for beard. At the moment, that's not going to work. So let's head over to the next section and do that and update the UI and then we can carry on with the rest of these sections in our checkout.

Episode summary

In this episode, we're starting to put together the checkout process for our booking system! The main focus here is to scaffold (basically lay out the structure for) the checkout page when a user has already picked an employee and a service. You’ll see how we set up the routes and a new CheckoutController, making sure it can handle both the selected service and the chosen employee.

We talk through how our URL should hold these pieces of info, and set up some route bindings so that Laravel only lets people book valid service-employee combos (e.g., you can’t book someone for a service they don’t offer—you’ll just get a 404). Pretty handy!

Once the backend is ready, we start wiring up the front-end Inertia page: bringing in the employee and service as props, and dumping out some details (like the profile photo, name, service title, and price) to make sure our data is all there. The UI gets organized into neat sections: a summary of what's being booked, a future spot for a booking calendar/slot picker, and a place for customer info. It’s all still just scaffolding for now, but it sets us up to fill in the booking flow step-by-step in upcoming episodes.

Finally, we mention that soon we'll adapt the checkout for cases where a user picks only a service to start with, and chooses the employee later (coming in the next episode!).

Episode discussion

No comments, yet. Be the first!