[CAL-3934] Email embed of team events showing zero availability

[milospuac]

Team event preview:

Team event email embed:

_{From SyncLinear.com | CAL-3934}

[dosubot[bot]]

The email embed for the "Discovery with MAD ID" session on June 14, 2024, shows zero availability because the email embed slots are not loading correctly. However, the team event preview shows the correct available time slots. This discrepancy is highlighted in the test case:

test("Email Embeds slots are loading for team event types", async ({ page, users }) => {
    // ... setup code ...

    await page.goto("/event-types");

    await page.getByTestId(`event-type-options-${teamEventId}`).first().click();
    await page.getByTestId("embed").click();
    await page.getByTestId("email").click();
    await page.getByTestId("incrementMonth").click();

    await expect(page.getByTestId("no-slots-available")).toBeHidden();

    // Check Team Url
    const availableTimesUrl = await page.getByTestId("see_all_available_times").getAttribute("href");
    await expect(availableTimesUrl).toContain(`/team/${team.slug}/${teamEventSlug}`);
});

The test case ensures that the email embed should not show "no slots available" (await expect(page.getByTestId("no-slots-available")).toBeHidden();). If this expectation fails, it indicates that the email embed is not correctly loading the available slots, leading to the observed issue.

Additionally, the EmailEmbed component in the Embed.tsx file is responsible for rendering the available slots. The component uses the useSlotsForDate hook to fetch the slots for the selected date. If the slots are not correctly set or fetched, it could result in showing zero availability. The relevant code snippet is:

const slots = useSlotsForDate(selectedDate, schedule?.data?.slots);

if (!eventType) {
  return null;
}

return (
  <div className="flex flex-col">
    <div className="mb-[9px] font-medium">
      <Collapsible open>
        <CollapsibleContent>
          <div className="text-default text-sm">{t("select_date")}</div>
          <DatePicker
            isPending={schedule.isPending}
            onChange={(date: Dayjs | null) => {
              setSelectedDate(date === null ? date : date.format("YYYY-MM-DD"));
            }}
            onMonthChange={(date: Dayjs) => {
              setMonth(date.format("YYYY-MM"));
              setSelectedDate(date.format("YYYY-MM-DD"));
            }}
            includedDates={nonEmptyScheduleDays}
            locale={i18n.language}
            browsingDate={month ? dayjs(month) : undefined}
            selected={dayjs(selectedDate)}
            weekStart={weekdayToWeekIndex(event?.data?.users?.[0]?.weekStart)}
            eventSlug={eventType?.slug}
          />
        </CollapsibleContent>
      </Collapsible>
    </div>
    {selectedDate ? (
      <div className="mt-[9px] font-medium ">
        {selectedDate ? (
          <div className="flex h-full w-full flex-col gap-4">
            <AvailableTimesHeader date={dayjs(selectedDate)} />
            <AvailableTimes
              className="w-full"
              selectedSlots={
                eventType.slug &&
                selectedDatesAndTimes &&
                selectedDatesAndTimes[eventType.slug] &&
                selectedDatesAndTimes[eventType.slug][selectedDate as string]
                  ? selectedDatesAndTimes[eventType.slug][selectedDate as string]
                  : undefined
              }
              onTimeSelect={onTimeSelect}
              slots={slots}
              showAvailableSeatsCount={eventType.seatsShowAvailabilityCount}
              event={event}
            />
          </div>
        ) : null}
      </div>
    ) : null}
  </div>
);

Ensuring that the slots variable is correctly populated and the selectedDate is properly set will help resolve the issue of zero availability in the email embed.

Moreover, the getSchedule function, as tested in apps/web/test/lib/getSchedule.test.ts, is responsible for fetching the available slots. The function considers various factors such as calendar events, booking statuses, and user availability. If the email embed is not correctly fetching the schedule, it might be due to issues in how the getSchedule function is being called or how its results are being processed. Ensuring that the getSchedule function is correctly integrated and its results are accurately reflected in the email embed will help resolve the discrepancy ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[vijayraghav-io]

@milospuac , This seems to be already fixed by https://github.com/calcom/cal.com/pull/13990