cal.com

cal.com copied to clipboard

Found a bug? Please fill out the sections below. 👍

Issue Summary

When trying to create a booking for a collective team seated event with multiple team members, it incorrectly shows that all seats are booked when only a portion of the seats are actually booked.

Steps to Reproduce

1. Create a collective team seated event with a total of 3 seats.
2. Assign 3 team members to attend the event.
3. Book 1 seat for the event.
4. Attempt to book an additional seat for the same slot.

Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

Actual Results

• An error message appears stating that all seats are booked, despite the booking page showing that 2 seats are still available for that particular slot.

Expected Results

• The booking system should allow the booking of the remaining 2 seats without errors.

Evidence

https://www.loom.com/share/76db85dbafaf4531b8609301f24b4917?sid=f5fa9903-a58d-4b67-872d-7f8b35f674aa

To fix the issue where the booking system incorrectly shows that all seats are booked when only a portion of the seats are actually booked, you need to ensure that the bookingSeatAttendeesQty and eventTotalSeats are correctly calculated and passed to the SeatsAvailabilityText component.

From the provided code, it appears that the bookingSeatAttendeesQty is derived from either seatedEventData?.attendees or bookingData?.attendees.length, and eventTotalSeats is derived from either seatedEventData?.seatsPerTimeSlot or event?.seatsPerTimeSlot.

Here is the relevant part of the code that needs to be checked and potentially fixed:

const bookingSeatAttendeesQty = seatedEventData?.attendees || bookingData?.attendees.length;
const eventTotalSeats = seatedEventData?.seatsPerTimeSlot || event?.seatsPerTimeSlot;

Ensure that seatedEventData and bookingData are correctly populated and that attendees and seatsPerTimeSlot are correctly set. If these values are not correctly set, the system might incorrectly calculate the number of booked seats.

Additionally, ensure that the SeatsAvailabilityText component is correctly displaying the availability based on these values:

<SeatsAvailabilityText
  showExact={!!seatedEventData.showAvailableSeatsCount}
  totalSeats={eventTotalSeats}
  bookedSeats={bookingSeatAttendeesQty || 0}
  variant="fraction"
/>

If the issue persists, you may need to debug the data flow to ensure that seatedEventData and bookingData are correctly updated and reflect the actual state of bookings.

Moreover, ensure that the logic for handling new bookings and rescheduling is correctly implemented. The handleSeats function should be correctly adding new attendees to existing bookings or creating new bookings as needed. Here is a snippet from the handleSeatsEventTypeOnBooking function that shows how seats are managed:

export const handleSeatsEventTypeOnBooking = async (
  eventType: {
    seatsPerTimeSlot?: number | null;
    seatsShowAttendees: boolean | null;
    seatsShowAvailabilityCount: boolean | null;
    [x: string | number | symbol]: unknown;
  },
  bookingInfo: Partial<
    Prisma.BookingGetPayload<{
      include: {
        attendees: { select: { name: true; email: true } };
        seatsReferences: { select: { referenceUid: true } };
        user: {
          select: {
            id: true;
            name: true;
            email: true;
            username: true;
            timeZone: true;
          };
        };
      };
    }>
  >,
  seatReferenceUid?: string,
  isHost?: boolean
) => {
  bookingInfo["responses"] = {};
  type seatAttendee = {
    attendee: {
      email: string;
      name: string;
    };
    id: number;
    data: Prisma.JsonValue;
    bookingId: number;
    attendeeId: number;
    referenceUid: string;
  } | null;
  let seatAttendee: seatAttendee = null;
  if (seatReferenceUid) {
    seatAttendee = await prisma.bookingSeat.findFirst({
      where: {
        referenceUid: seatReferenceUid,
      },
      include: {
        attendee: {
          select: {
            name: true;
            email: true,
          },
        },
      },
    });
  }
  if (seatAttendee) {
    const seatAttendeeData = seatAttendee.data as unknown as {
      description?: string;
      responses: Prisma.JsonValue;
    };
    bookingInfo["description"] = seatAttendeeData.description ?? null;
    bookingInfo["responses"] = bookingResponsesDbSchema.parse(seatAttendeeData.responses ?? {});
  }
  if (!eventType.seatsShowAttendees && !isHost) {
    if (seatAttendee) {
      const attendee = bookingInfo?.attendees?.find((a) => {
        return a.email === seatAttendee?.attendee?.email;
      });
      bookingInfo["attendees"] = attendee ? [attendee] : [];
    } else {
      bookingInfo["attendees"] = [];
    }
  }
  return bookingInfo;
};

Ensure that the handleSeatsEventTypeOnBooking function is correctly updating the booking data and that the eventType.seatsPerTimeSlot is accurately reflecting the available seats. This will help in correctly displaying the seat availability in the booking system ^[1][2][3].

To continue talking to Dosu, mention @dosu.