@calcom/atoms 2.8.0 → 2.8.1

package/src/calendar-view/components/date-picker.tsx

@@ -1,498 +0,0 @@
-// @ts-nocheck — Radix 1.x Tooltip narrowing + loose slots/periodData contracts
-"use client";
-
-import type { Dayjs } from "dayjs";
-import { useEffect } from "react";
-import { shallow } from "zustand/shallow";
-import { useBookerStoreContext } from "../../booker/booker-store-provider";
-import { useEmbedStyles, useSlotsViewOnSmallScreen } from "../../booker/hooks/embed-stubs";
-import { Button } from "../../components/ui/button";
-import { SkeletonText } from "../../components/ui/skeleton";
-import { Tooltip } from "../../components/ui/tooltip";
-import type { PeriodData, Slots } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import dayjs from "../../vendor/dayjs";
-import { daysInMonth, yyyymmdd } from "../../vendor/dayjs-utils";
-import { formatDateTime } from "../../vendor/format-date-time";
-import { getAvailableDatesInMonth } from "../../vendor/get-available-dates-in-month";
-import { weekdayNames } from "../../vendor/weekday";
-import { NoAvailabilityDialog } from "./no-availability-dialog";
-
-export type DatePickerProps = {
-  /** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) */
-  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  /** Fires whenever a selected date is changed. */
-  onChange: (date: Dayjs | null, omitUpdatingParams?: boolean) => void;
-  /** Fires when the month is changed. */
-  onMonthChange?: (date: Dayjs) => void;
-  /** which date or dates are currently selected (not tracked from here) */
-  selected?: Dayjs | Dayjs[] | null;
-  /** defaults to current date. */
-  minDate?: Date;
-  /** locale, any IETF language tag, e.g. "hu-HU" — defaults to Browser settings */
-  locale: string;
-  /** Dates that are not bookable. Array of YYYY-MM-DD strings. */
-  excludedDates?: string[];
-  /** which dates are bookable (inverse of excludedDates) */
-  includedDates?: string[];
-  className?: string;
-  isLoading?: boolean;
-  eventSlug?: string;
-  slots?: Slots;
-  /**
-   * Booking-period metadata. Atoms never calculates period limits itself;
-   * callers that care about ROLLING/RANGE futures can pass in
-   * `noFutureAvailability` and `noAvailabilityDescription` to drive the
-   * dialog copy.
-   */
-  periodData?: PeriodData;
-  noFutureAvailability?: boolean;
-  noAvailabilityDescription?: string;
-  isCompact?: boolean;
-  showExtraDays?: boolean;
-  showNoAvailabilityDialog?: boolean;
-  /**
-   * Two-step slot selection mode. When true the initial-date auto-selection
-   * is skipped so the slot selection modal stays closed on mount. Callers
-   * running inside the embed iframe should pass the value of
-   * `useSlotsViewOnSmallScreen` from `@calcom/embed-core/embed-iframe`.
-   */
-  slotsViewOnSmallScreen?: boolean;
-};
-
-const Day = ({
-  date,
-  active,
-  disabled,
-  away,
-  emoji,
-  customClassName,
-  showMonthTooltip,
-  isFirstDayOfNextMonth,
-  ...props
-}: JSX.IntrinsicElements["button"] & {
-  active: boolean;
-  date: Dayjs;
-  away?: boolean;
-  emoji?: string | null;
-  customClassName?: {
-    dayContainer?: string;
-    dayActive?: string;
-  };
-  showMonthTooltip?: boolean;
-  isFirstDayOfNextMonth?: boolean;
-}) => {
-  const { t } = useLocale();
-  const enabledDateButtonEmbedStyles = useEmbedStyles("enabledDateButton");
-  const disabledDateButtonEmbedStyles = useEmbedStyles("disabledDateButton");
-
-  const buttonContent = (
-    <button
-      type="button"
-      style={disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }}
-      className={cn(
-        "disabled:text-bookinglighter absolute bottom-0 left-0 right-0 top-0 mx-auto w-full rounded-md border-2 border-transparent text-center text-sm font-medium transition disabled:cursor-default disabled:border-transparent disabled:font-light",
-        active
-          ? "bg-brand-default text-brand"
-          : !disabled
-            ? !customClassName?.dayActive
-              ? "hover:border-brand-default text-emphasis bg-emphasis"
-              : `hover:border-brand-default ${customClassName.dayActive}`
-            : customClassName
-              ? ""
-              : " text-mute"
-      )}
-      data-testid="day"
-      data-disabled={disabled}
-      disabled={disabled}
-      {...props}
-    >
-      {away && <span data-testid="away-emoji">{emoji}</span>}
-      {!away && date.date()}
-      {date.isToday() && (
-        <span
-          className={cn(
-            "bg-brand-default absolute left-1/2 top-1/2 flex h-[5px] w-[5px] -translate-x-1/2 translate-y-[8px] items-center justify-center rounded-full align-middle sm:translate-y-[12px]",
-            active && "bg-brand-accent"
-          )}
-        >
-          <span className="sr-only">{t("today")}</span>
-        </span>
-      )}
-    </button>
-  );
-
-  const content = showMonthTooltip ? (
-    <Tooltip content={date.format("MMMM")}>{buttonContent}</Tooltip>
-  ) : (
-    buttonContent
-  );
-
-  return (
-    <>
-      {isFirstDayOfNextMonth && (
-        <div
-          className={cn(
-            "absolute top-0 z-10 mx-auto w-fit rounded-full font-semibold uppercase tracking-wide",
-            active ? "text-white" : "text-default",
-            disabled && "bg-emphasis"
-          )}
-          style={{
-            fontSize: "10px",
-            lineHeight: "13px",
-            padding: disabled ? "0 3px" : "3px 3px 3px 4px",
-          }}
-        >
-          {date.format("MMM")}
-        </div>
-      )}
-      {content}
-    </>
-  );
-};
-
-const Days = ({
-  minDate,
-  excludedDates = [],
-  browsingDate,
-  weekStart,
-  DayComponent = Day,
-  selected,
-  month,
-  nextMonthButton,
-  eventSlug,
-  slots,
-  customClassName,
-  isBookingInPast,
-  isCompact,
-  showNoAvailabilityDialog = true,
-  noFutureAvailability = false,
-  noAvailabilityDescription,
-  slotsViewOnSmallScreen: slotsViewOnSmallScreenProp,
-  ...props
-}: Omit<DatePickerProps, "locale" | "className" | "weekStart" | "periodData"> & {
-  DayComponent?: React.FC<React.ComponentProps<typeof Day>>;
-  browsingDate: Dayjs;
-  weekStart: number;
-  month: string | null;
-  nextMonthButton: () => void;
-  customClassName?: {
-    datePickerDate?: string;
-    datePickerDateActive?: string;
-  };
-  scrollToTimeSlots?: () => void;
-  isBookingInPast: boolean;
-  isCompact?: boolean;
-}) => {
-  const slotsViewOnSmallScreenFromHook = useSlotsViewOnSmallScreen();
-  const slotsViewOnSmallScreen = slotsViewOnSmallScreenProp ?? slotsViewOnSmallScreenFromHook;
-  const layout = useBookerStoreContext((state) => state.layout);
-  const isMobile = layout === "mobile";
-
-  const includedDates = getAvailableDatesInMonth({
-    browsingDate: browsingDate.toDate(),
-    minDate,
-    includedDates: props.includedDates,
-  });
-
-  const today = dayjs();
-  const firstDayOfMonth = browsingDate.startOf("month");
-  const isSecondWeekOver = today.isAfter(firstDayOfMonth.add(2, "week"));
-  let days: (Dayjs | null)[] = [];
-
-  const getPadding = (day: number) => (browsingDate.set("date", day).day() - weekStart + 7) % 7;
-  const totalDays = daysInMonth(browsingDate);
-
-  const showExtraDays = props.showExtraDays ?? true;
-  const showNextMonthDays = isSecondWeekOver && !isCompact && showExtraDays;
-
-  if (showNextMonthDays) {
-    const startDay = 8;
-    const pad = getPadding(startDay);
-    days = Array(pad).fill(null);
-
-    for (let day = startDay; day <= totalDays; day++) {
-      days.push(browsingDate.set("date", day));
-    }
-
-    const remainingInRow = days.length % 7;
-    const extraDays = (remainingInRow > 0 ? 7 - remainingInRow : 0) + 7;
-    const nextMonth = browsingDate.add(1, "month");
-
-    for (let i = 0; i < extraDays; i++) {
-      days.push(nextMonth.set("date", 1 + i));
-    }
-  } else {
-    const pad = getPadding(1);
-    days = Array(pad).fill(null);
-
-    for (let day = 1; day <= totalDays; day++) {
-      days.push(browsingDate.set("date", day));
-    }
-  }
-
-  const [selectedDatesAndTimes] = useBookerStoreContext((state) => [state.selectedDatesAndTimes], shallow);
-
-  const isActive = (day: Dayjs) => {
-    if (Array.isArray(selected)) {
-      return Array.isArray(selected) && selected?.some((e) => yyyymmdd(e) === yyyymmdd(day));
-    }
-
-    if (selected && yyyymmdd(selected) === yyyymmdd(day)) {
-      return true;
-    }
-
-    if (
-      eventSlug &&
-      selectedDatesAndTimes &&
-      selectedDatesAndTimes[eventSlug as string] &&
-      Object.keys(selectedDatesAndTimes[eventSlug as string]).length > 0
-    ) {
-      return Object.keys(selectedDatesAndTimes[eventSlug as string]).some((date) => {
-        return yyyymmdd(dayjs(date)) === yyyymmdd(day);
-      });
-    }
-
-    return false;
-  };
-
-  const daysToRenderForTheMonth = days.map((day) => {
-    if (!day) return { day: null, disabled: true };
-
-    const dateKey = yyyymmdd(day);
-    const daySlots = slots?.[dateKey] || [];
-    const oooInfo = daySlots.find((slot) => slot.away) || null;
-
-    const isNextMonth = day.month() !== browsingDate.month();
-    const isFirstDayOfNextMonth = isSecondWeekOver && !isCompact && isNextMonth && day.date() === 1;
-
-    const included = includedDates?.includes(dateKey);
-    const excluded = excludedDates.includes(dateKey);
-
-    const hasAvailableSlots = daySlots.some((slot) => !slot.away);
-    const isOOOAllDay = daySlots.length > 0 && daySlots.every((slot) => slot.away);
-    const away = isOOOAllDay;
-
-    const oooIsSelectable = oooInfo?.toUser || oooInfo?.showNotePublicly;
-    const disabled = away ? !oooIsSelectable : isNextMonth ? !hasAvailableSlots : !included || excluded;
-
-    return {
-      day,
-      disabled,
-      away,
-      emoji: oooInfo?.emoji,
-      isFirstDayOfNextMonth,
-    };
-  });
-
-  const useHandleInitialDateSelection = () => {
-    if (slotsViewOnSmallScreen) return;
-    if (selected instanceof Array) return;
-    const firstAvailableDateOfTheMonth = daysToRenderForTheMonth.find((day) => !day.disabled)?.day;
-    const isSelectedDateAvailable = selected
-      ? daysToRenderForTheMonth.some(({ day, disabled }) => {
-          if (day && yyyymmdd(day) === yyyymmdd(selected) && !disabled) return true;
-        })
-      : false;
-    if (!isSelectedDateAvailable && firstAvailableDateOfTheMonth) {
-      const shouldOmitUpdatingParams = selected?.isValid() ? false : true;
-      props.onChange(firstAvailableDateOfTheMonth, shouldOmitUpdatingParams);
-    }
-    if (isSelectedDateAvailable) {
-      props.onChange(dayjs(selected), true);
-    }
-    if (!firstAvailableDateOfTheMonth) {
-      props.onChange(null);
-    }
-  };
-
-  useEffect(useHandleInitialDateSelection);
-
-  return (
-    <>
-      {daysToRenderForTheMonth.map(({ day, disabled, away, emoji, isFirstDayOfNextMonth }, idx) => (
-        <div key={day === null ? `e-${idx}` : `day-${day.format()}`} className="relative w-full pt-[100%]">
-          {day === null ? (
-            <div key={`e-${idx}`} />
-          ) : props.isLoading ? (
-            <button
-              className="bg-cal-muted text-muted absolute bottom-0 left-0 right-0 top-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-90 transition"
-              key={`e-${idx}`}
-              disabled
-            >
-              <SkeletonText className="h-8 w-9" />
-            </button>
-          ) : (
-            <DayComponent
-              customClassName={{
-                dayContainer: customClassName?.datePickerDate,
-                dayActive: customClassName?.datePickerDateActive,
-              }}
-              date={day}
-              onClick={() => {
-                props.onChange(day);
-                props?.scrollToTimeSlots?.();
-              }}
-              disabled={disabled}
-              active={isActive(day)}
-              away={away}
-              emoji={emoji}
-              showMonthTooltip={showNextMonthDays && !disabled && day.month() !== browsingDate.month()}
-              isFirstDayOfNextMonth={isFirstDayOfNextMonth}
-            />
-          )}
-        </div>
-      ))}
-      {!props.isLoading &&
-        !isBookingInPast &&
-        includedDates &&
-        includedDates?.length === 0 &&
-        showNoAvailabilityDialog && (
-          <NoAvailabilityDialog
-            month={month}
-            nextMonthButton={nextMonthButton}
-            description={noAvailabilityDescription}
-            noFutureAvailability={noFutureAvailability}
-          />
-        )}
-    </>
-  );
-};
-
-const DatePicker = ({
-  weekStart = 0,
-  className,
-  locale,
-  selected,
-  onMonthChange,
-  slots,
-  customClassNames,
-  includedDates,
-  isCompact,
-  showNoAvailabilityDialog,
-  noFutureAvailability,
-  noAvailabilityDescription,
-  slotsViewOnSmallScreen,
-  ...passThroughProps
-}: DatePickerProps &
-  Partial<React.ComponentProps<typeof Days>> & {
-    customClassNames?: {
-      datePickerTitle?: string;
-      datePickerDays?: string;
-      datePickersDates?: string;
-      datePickerDatesActive?: string;
-      datePickerToggle?: string;
-    };
-    scrollToTimeSlots?: () => void;
-  }) => {
-  const minDate = passThroughProps.minDate;
-  const rawBrowsingDate = passThroughProps.browsingDate || dayjs().startOf("month");
-  const browsingDate =
-    minDate && rawBrowsingDate.valueOf() < minDate.valueOf() ? dayjs(minDate) : rawBrowsingDate;
-
-  const { i18n, t } = useLocale();
-  const bookingData = useBookerStoreContext((state) => state.bookingData);
-  const isBookingInPast = bookingData ? new Date(bookingData.endTime) < new Date() : false;
-  const changeMonth = (newMonth: number) => {
-    if (onMonthChange) {
-      onMonthChange(browsingDate.add(newMonth, "month"));
-    }
-  };
-  const month = browsingDate
-    ? formatDateTime(new Date(browsingDate.year(), browsingDate.month()), {
-        locale: locale || i18n.language,
-        month: "long",
-      })
-    : null;
-
-  return (
-    <div className={className}>
-      <div className="mb-1 flex items-center justify-between text-xl">
-        <span className="text-default w-1/2 text-base">
-          {browsingDate ? (
-            <time dateTime={browsingDate.format("YYYY-MM")} data-testid="selected-month-label">
-              <strong className={cn(`text-emphasis font-semibold`, customClassNames?.datePickerTitle)}>
-                {month}
-              </strong>{" "}
-              <span className={cn(`text-subtle font-medium`, customClassNames?.datePickerTitle)}>
-                {browsingDate.format("YYYY")}
-              </span>
-            </time>
-          ) : (
-            <SkeletonText className="h-8 w-24" />
-          )}
-        </span>
-        <div className="text-emphasis">
-          <div className="flex">
-            <Button
-              className={cn(
-                `group p-1 opacity-70 transition hover:opacity-100 rtl:rotate-180`,
-                !browsingDate.isAfter(dayjs()) &&
-                  `disabled:text-bookinglighter hover:bg-background hover:opacity-70`,
-                customClassNames?.datePickerToggle
-              )}
-              onClick={() => changeMonth(-1)}
-              disabled={!browsingDate.isAfter(dayjs())}
-              data-testid="decrementMonth"
-              color="minimal"
-              variant="icon"
-              StartIcon="chevron-left"
-              aria-label={t("view_previous_month")}
-            />
-            <Button
-              className={cn(
-                `group p-1 opacity-70 transition hover:opacity-100 rtl:rotate-180`,
-                `${customClassNames?.datePickerToggle ?? ""}`
-              )}
-              onClick={() => changeMonth(+1)}
-              data-testid="incrementMonth"
-              color="minimal"
-              variant="icon"
-              StartIcon="chevron-right"
-              aria-label={t("view_next_month")}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="border-subtle mb-2 grid grid-cols-7 gap-4 border-b border-t text-center md:mb-0 md:border-0">
-        {weekdayNames(locale, weekStart, "short").map((weekDay) => (
-          <div
-            key={weekDay}
-            className={cn(
-              `text-emphasis my-4 text-xs font-medium uppercase tracking-widest`,
-              customClassNames?.datePickerDays
-            )}
-          >
-            {weekDay}
-          </div>
-        ))}
-      </div>
-      <div className="relative grid grid-cols-7 grid-rows-6 gap-1 text-center">
-        <Days
-          customClassName={{
-            datePickerDate: customClassNames?.datePickersDates,
-            datePickerDateActive: customClassNames?.datePickerDatesActive,
-          }}
-          weekStart={weekStart}
-          selected={selected}
-          {...passThroughProps}
-          browsingDate={browsingDate}
-          month={month}
-          nextMonthButton={() => changeMonth(+1)}
-          slots={slots}
-          includedDates={includedDates}
-          isBookingInPast={isBookingInPast}
-          isCompact={isCompact}
-          showNoAvailabilityDialog={showNoAvailabilityDialog}
-          noFutureAvailability={noFutureAvailability}
-          noAvailabilityDescription={noAvailabilityDescription}
-          slotsViewOnSmallScreen={slotsViewOnSmallScreen}
-        />
-      </div>
-    </div>
-  );
-};
-
-export { DatePicker, Day };
-export default DatePicker;

package/src/calendar-view/components/large-calendar.tsx

@@ -1,201 +0,0 @@
-// @ts-nocheck — atoms wrapper/hook over loose contracts + Radix 1.x
-import { useEffect, useMemo } from "react";
-import { useBookerStoreContext } from "../../booker/booker-store-provider";
-import { useBookerTime } from "../../booker/hooks/use-booker-time";
-import type { BookerEvent, BookingStatus, CalendarAvailableTimeslots } from "../../contracts";
-import { useBookings } from "../../hooks/bookings/use-bookings";
-import { useCalendarsBusyTimes } from "../../hooks/use-calendars-busy-times";
-import { useConnectedCalendars } from "../../hooks/use-connected-calendars";
-import dayjs from "../../vendor/dayjs";
-import { getQueryParam } from "../../vendor/query-param";
-import { localStorage } from "../../vendor/webstorage";
-import type { OutOfOfficeRenderProps } from "../scheduler/types/state";
-import { Calendar } from "./calendar";
-
-export const LargeCalendar = ({
-  extraDays,
-  availableTimeslots,
-  // Webapp callers still pass `schedule` (the raw trpc slot payload) instead
-  // of pre-converted `availableTimeslots`. We accept it here and convert
-  // inline so callers don't have to re-thread `useAvailableTimeSlots`.
-  schedule,
-  isLoading,
-  event,
-  // Injection points for non-platform consumers (e.g. the webapp booker
-  // week view) — when `events` is passed it replaces atoms's internal
-  // platform-bookings/overlay-busy combine logic; `onEmptyCellClick`
-  // forwards to the underlying scheduler so empty-cell taps can drive
-  // the booker store.
-  events: injectedEvents,
-  onEmptyCellClick,
-  renderOutOfOffice,
-}: {
-  extraDays: number;
-  availableTimeslots?: CalendarAvailableTimeslots | undefined;
-  schedule?: { slots?: Record<string, Array<{ time: string } & Record<string, unknown>>> };
-  isLoading: boolean;
-  event?: {
-    data?: Pick<BookerEvent, "length" | "id"> | null;
-  };
-  events?: Array<Record<string, unknown>>;
-  onEmptyCellClick?: (date: Date) => void;
-  renderOutOfOffice?: (props: OutOfOfficeRenderProps) => React.ReactNode;
-}) => {
-  const selectedDate = useBookerStoreContext((state) => state.selectedDate);
-  const selectedEventDuration = useBookerStoreContext((state) => state.selectedDuration);
-  const displayOverlay =
-    getQueryParam("overlayCalendar") === "true" || localStorage?.getItem("overlayCalendarSwitchDefault");
-  const { timezone } = useBookerTime();
-
-  const eventDuration = selectedEventDuration || event?.data?.length || 30;
-
-  const scheduleSlots = schedule?.slots;
-  const convertedFromSchedule = useMemo<CalendarAvailableTimeslots | undefined>(() => {
-    if (!scheduleSlots) return undefined;
-    const out: CalendarAvailableTimeslots = {};
-    for (const day in scheduleSlots) {
-      out[day] = scheduleSlots[day].map((slot) => {
-        const { time, ...rest } = slot;
-        return {
-          start: dayjs(time).toDate(),
-          end: dayjs(time).add(eventDuration, "minutes").toDate(),
-          ...rest,
-        };
-      });
-    }
-    return out;
-  }, [scheduleSlots, eventDuration]);
-
-  const availableSlots = availableTimeslots !== undefined ? availableTimeslots : convertedFromSchedule;
-
-  const startDate = selectedDate ? dayjs(selectedDate).toDate() : dayjs().toDate();
-  const endDate = dayjs(startDate)
-    .add(extraDays - 1, "day")
-    .toDate();
-
-  const skipPlatformFetch = !!injectedEvents;
-
-  const { data: bookings, isPending: _isFetchingBookings } = useBookings({
-    take: 150,
-    skip: 0,
-    eventTypeId: event?.data?.id,
-    afterStart: startDate.toISOString(),
-    beforeEnd: endDate.toISOString(),
-    status: ["upcoming", "past", "recurring"],
-    enabled: !skipPlatformFetch,
-  });
-
-  const { data: connectedCalendars, isPending: isFetchingConnectedCalendars } = useConnectedCalendars({
-    enabled: !skipPlatformFetch,
-  });
-
-  const calendarsToLoad = connectedCalendars?.connectedCalendars.flatMap((connectedCalendar) => {
-    return (
-      connectedCalendar.calendars
-        ?.filter((calendar) => calendar.isSelected === true)
-        .map((cal) => ({
-          credentialId: cal.credentialId,
-          externalId: cal.externalId,
-        })) ?? []
-    );
-  });
-
-  const { data: overlayBusyDates } = useCalendarsBusyTimes({
-    loggedInUsersTz: timezone,
-    dateFrom: startDate.toISOString(),
-    dateTo: endDate.toISOString(),
-    calendarsToLoad: calendarsToLoad ?? [],
-    enabled: Boolean(!skipPlatformFetch && !isFetchingConnectedCalendars && !!calendarsToLoad?.length),
-  });
-
-  // HACK: force rerender when overlay events change
-  // Sine we dont use react router here we need to force rerender (ATOM SUPPORT)
-
-  useEffect(() => {}, [displayOverlay]);
-
-  const sortedBookingRanges = useMemo(
-    () =>
-      (bookings ?? [])
-        .map((booking) => ({
-          booking,
-          startTime: dayjs(booking.start).valueOf(),
-          endTime: dayjs(booking.end).valueOf(),
-        }))
-        .sort((a, b) => a.startTime - b.startTime),
-    [bookings]
-  );
-
-  const filteredBusyDates = useMemo(() => {
-    const overlay = overlayBusyDates?.data ?? [];
-    if (!sortedBookingRanges.length) return overlay;
-
-    return overlay.filter((busy) => {
-      const busyStart = dayjs(busy.start).valueOf();
-      const busyEnd = dayjs(busy.end).valueOf();
-
-      for (const { startTime, endTime } of sortedBookingRanges) {
-        if (startTime >= busyEnd) break;
-        if (endTime <= busyStart) continue;
-        return false;
-      }
-
-      return true;
-    });
-  }, [overlayBusyDates?.data, sortedBookingRanges]);
-
-  const overlayEventsForDate = useMemo(() => {
-    const allBookings = bookings ?? [];
-    // since busy dates comes straight from the calendar, it contains slots have bookings and also slots that are marked as busy by user but are not bookings
-    // hence we filter overlayBusyDates to exclude anything that overlaps with bookings
-    const busyEvents = filteredBusyDates.map((busyData, index) => ({
-      id: index,
-      title: `Busy`,
-      start: new Date(busyData.start),
-      end: new Date(busyData.end),
-      options: {
-        status: "ACCEPTED" as BookingStatus,
-        "data-test-id": "troubleshooter-busy-event",
-        className: "border-[1.5px]",
-      },
-    }));
-
-    const bookingEvents = allBookings.map((booking) => ({
-      id: booking.id,
-      title: booking.title ?? `Busy`,
-      start: new Date(booking.start),
-      end: new Date(booking.end),
-      options: {
-        status: booking.status.toUpperCase() as BookingStatus,
-        "data-test-id": "troubleshooter-busy-event",
-        className: "border-[1.5px]",
-      },
-    }));
-
-    return [...bookingEvents, ...busyEvents];
-  }, [bookings, filteredBusyDates]);
-
-  // Caller-provided events override the platform-fetched combine result.
-  // Webapp wrappers pass their own bookings/busy events; atoms platform
-  // consumers omit this and use the default fetched-events path.
-  const eventsToRender = injectedEvents ?? overlayEventsForDate;
-
-  return (
-    <div className="h-full [--calendar-dates-sticky-offset:66px]">
-      <Calendar
-        isPending={isLoading}
-        availableTimeslots={availableSlots}
-        startHour={0}
-        endHour={23}
-        events={eventsToRender}
-        startDate={startDate}
-        endDate={endDate}
-        gridCellsPerHour={60 / eventDuration}
-        hoverEventDuration={eventDuration}
-        hideHeader
-        timezone={timezone}
-        onEmptyCellClick={onEmptyCellClick}
-        renderOutOfOffice={renderOutOfOffice}
-      />
-    </div>
-  );
-};