Skip to main content
This guide walks you through the complete process of booking an appointment in BarberApp. The booking system uses a 4-step wizard to help you select the right service, specialist, and time slot.

Before you start

You must be logged in as a client to book appointments. Specialists cannot book appointments for themselves.

The booking wizard

The appointment booking process consists of four sequential steps:
1

Choose service

Select the service you need from the available specialties.
  • Browse through all available services displayed as cards
  • Each service card shows the specialty icon and name
  • Click on a service to select it (the card will be highlighted)
  • Click again to deselect if you change your mind
  • The “Next” button will be disabled until you select a service
Component: AppointmentSpecialtySelectorComponent (request-appointment-form.component.ts:54-56)
2

Choose specialist

Select your preferred specialist or let the system assign one based on availability.
  • View all specialists that offer the selected service
  • Each specialist card displays:
    • Profile picture
    • Full name
    • Specialties they offer
    • Average rating (if available)
  • If you selected a specialty, only specialists with that specialty are shown
  • Click on a specialist card to select them
  • The “Next” button remains disabled until you select a specialist
Component: AppointmentSpecialistSelectorComponent (request-appointment-form.component.ts:59-62)
If a specialist selection affects specialty availability, the system will reset your date selection to ensure accuracy.
3

Choose date and time

Select your preferred appointment date and time based on real-time availability.The system displays:
  • Available days: Shows the next 7 days where the specialist has availability
  • Time slots: 60-minute intervals based on the specialist’s schedule
How it works:
  1. Click on an available day to see time slots
  2. The system loads availability data (loading spinner appears)
  3. Time slots are filtered to exclude:
    • Already booked slots for the specialist
    • Slots where you already have appointments (prevents double-booking)
  4. Select an available time slot
  5. The “Next” button activates once both day and time are selected
Component: AppointmentDateSelectorComponent (appointment-date-selector.component.ts:28)
The system checks appointments in real-time to prevent conflicts. If a specialist is unavailable on certain days, those days won’t appear in the calendar.
4

Confirm appointment

Review all appointment details before final confirmation.The confirmation screen displays:
  • Selected specialty
  • Specialist information (name and profile)
  • Chosen date and time
  • Any additional appointment details
Actions available:
  • Click “Confirmar Turno” (Confirm Appointment) to submit
  • Click “Atrás” (Back) to return to previous steps and make changes
  • A loading spinner appears while the appointment is being created
Component: AppointmentConfirmComponent (request-appointment-form.component.ts:70-74)
The wizard provides navigation buttons at the bottom of each step:
  • Atrás (Back): Returns to the previous step (disabled on Step 1)
  • Siguiente (Next): Proceeds to the next step (disabled until step requirements are met)
  • Confirmar Turno (Confirm Appointment): Submits the appointment (only on Step 4)
The wizard automatically scrolls to the top when navigating between steps for better user experience (request-appointment-form.component.ts:125).

After booking

Success scenario

When your appointment is successfully created:
  1. A success dialog appears with the message: “¡Turno Confirmado!”
  2. You have two options:
    • “Ver mis turnos”: Navigate to your appointments list
    • “Volver al inicio”: Return to your dashboard
Implementation: The system creates the appointment through appointmentFacade.createAppointment() (request-appointment-form.component.ts:146-148).

Error scenario

If something goes wrong during booking:
  1. An error dialog appears explaining the issue
  2. You can either:
    • Return to your profile to try again
    • Go back to the home page
Once you confirm an appointment, you cannot immediately re-book the same time slot. If you need to modify the appointment, you must cancel it first and create a new one.

Selection behavior

Smart form updates

The booking form implements intelligent cascading updates (request-appointment-form.component.ts:109-120):
  • Changing specialty: Resets both specialist and date/time selections
  • Changing specialist: Resets only the date/time selection
  • Changing date/time: No other fields are affected
This ensures your selections are always valid and compatible.

Pre-selection support

If you navigate back through the wizard, your previous selections are remembered and pre-filled. This allows you to review and modify any step without losing your progress.

Technical details

Time slot generation

Appointments are scheduled in 60-minute intervals (appointment-date-selector.component.ts:205). The system:
  1. Retrieves specialist availability for the selected day
  2. Generates time slots based on their work intervals
  3. Queries existing appointments for both the specialist and client
  4. Filters out unavailable slots
  5. Displays only available time slots

Availability calculation

The system looks ahead 7 days from today (appointment-date-selector.component.ts:90) and only shows days where:
  • The specialist has defined availability
  • At least one time interval is configured
  • The day matches the specialist’s work schedule

Common scenarios

If you select a day but no time slots appear, it means:
  • All slots are booked for that specialist
  • You already have appointments conflicting with available times
  • Try selecting a different day or specialist
No, you must complete one booking at a time. However, you can book multiple appointments on different days through separate booking flows.
Your booking progress is not saved. You’ll need to start over from Step 1. The appointment is only created when you click “Confirmar Turno” in Step 4.
You cannot directly modify an appointment. You must cancel the existing appointment and create a new one with your preferred details.

Build docs developers (and LLMs) love