From 38b43f75bad0445cbc5b6154affe5904036b4c67 Mon Sep 17 00:00:00 2001 From: Rajiv Sahal Date: Tue, 17 Feb 2026 13:44:33 +0530 Subject: [PATCH] refactor: remove circular dependencies from `CalendarView` atom (#27850) * fix: decouple large calendar from features * fix: move calendar to features since this is the better approach * chore: move OOO slots to features * feat: add DefaultOutOfOfficeSlot fallback for calendar OOO rendering Co-Authored-By: rajiv@cal.com * chore: cleanup unused LargeCalendar component --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../admin/playground/weekly-calendar/page.tsx | 2 +- .../components/BookingCalendarView.tsx | 2 +- .../bookings/components/LargeCalendar.tsx | 11 +-- .../onboarding-calendar-browser-view.tsx | 2 +- .../components/LargeCalendar.tsx | 13 ++-- .../weeklyview/components/Calendar.tsx | 2 + .../components/DateValues/index.tsx | 8 +-- .../components/DefaultOutOfOfficeSlot.tsx | 67 +++++++++++++++++++ .../components/blocking/BlockedList.tsx | 6 +- .../components/blocking/BlockedTimeCell.tsx | 0 .../components/currentTime/index.tsx | 0 .../weeklyview/components/event/Empty.tsx | 48 +++++++------ .../weeklyview/components/event/Event.tsx | 0 .../weeklyview/components/event/EventList.tsx | 8 +-- .../weeklyview/components/event/index.tsx | 0 .../weeklyview/components/grid/index.tsx | 0 .../components/heading/SchedulerHeading.tsx | 3 +- .../weeklyview/components/heading/index.tsx | 0 .../components/horizontalLines/index.tsx | 6 +- .../calendars/weeklyview/components/index.tsx | 0 .../weeklyview/components/spinner/Spinner.tsx | 0 .../components/verticalLines/index.tsx | 3 +- .../calendars/weeklyview/types/state.ts | 20 ++++++ .../calendar-view/CalendarViewComponent.tsx | 2 +- .../EventTypeCalendarViewComponent.tsx | 2 +- .../components/LargeCalendar.tsx | 8 +-- 26 files changed, 155 insertions(+), 58 deletions(-) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/Calendar.tsx (98%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/DateValues/index.tsx (99%) create mode 100644 packages/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot.tsx rename {apps/web/modules => packages/features}/calendars/weeklyview/components/blocking/BlockedList.tsx (99%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx (100%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/currentTime/index.tsx (100%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/event/Empty.tsx (87%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/event/Event.tsx (100%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/event/EventList.tsx (99%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/event/index.tsx (100%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/grid/index.tsx (100%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/heading/SchedulerHeading.tsx (99%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/heading/index.tsx (100%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/horizontalLines/index.tsx (99%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/index.tsx (100%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/spinner/Spinner.tsx (100%) rename {apps/web/modules => packages/features}/calendars/weeklyview/components/verticalLines/index.tsx (99%) rename {apps/web/modules => packages/platform/atoms}/calendar-view/components/LargeCalendar.tsx (94%) diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx index 8e868da77e..121641ebc5 100644 --- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx +++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx @@ -3,7 +3,7 @@ import { useState } from "react"; import dayjs from "@calcom/dayjs"; -import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar"; +import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar"; import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events"; import type { CalendarComponentProps, Hours } from "@calcom/features/calendars/weeklyview/types/state"; diff --git a/apps/web/modules/bookings/components/BookingCalendarView.tsx b/apps/web/modules/bookings/components/BookingCalendarView.tsx index ae539e4e23..d00b2e9607 100644 --- a/apps/web/modules/bookings/components/BookingCalendarView.tsx +++ b/apps/web/modules/bookings/components/BookingCalendarView.tsx @@ -4,7 +4,7 @@ import dayjs from "@calcom/dayjs"; import { useTimePreferences } from "@calcom/features/bookings/lib"; import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events"; import { useGetTheme } from "@calcom/lib/hooks/useTheme"; -import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar"; +import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar"; import { useBanners } from "@calcom/web/modules/shell/banners/useBanners"; import { useEffect, useMemo } from "react"; import { useBookingDetailsSheetStore } from "../store/bookingDetailsSheetStore"; diff --git a/apps/web/modules/bookings/components/LargeCalendar.tsx b/apps/web/modules/bookings/components/LargeCalendar.tsx index 744c1f724f..2ad5740deb 100644 --- a/apps/web/modules/bookings/components/LargeCalendar.tsx +++ b/apps/web/modules/bookings/components/LargeCalendar.tsx @@ -1,17 +1,19 @@ -import { useMemo, useEffect } from "react"; +import { useEffect, useMemo } from "react"; import dayjs from "@calcom/dayjs"; import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider"; +import { useOverlayCalendarStore } from "@calcom/features/bookings/Booker/components/OverlayCalendar/store"; import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/hooks/useAvailableTimeSlots"; import { useBookerTime } from "@calcom/features/bookings/Booker/hooks/useBookerTime"; +import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param"; import type { BookerEvent } from "@calcom/features/bookings/types"; -import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar"; +import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar"; import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events"; import { localStorage } from "@calcom/lib/webstorage"; import type { useScheduleForEventReturnType } from "@calcom/web/modules/schedules/hooks/useEvent"; -import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param"; -import { useOverlayCalendarStore } from "@calcom/features/bookings/Booker/components/OverlayCalendar/store"; + +import { OutOfOfficeInSlots } from "./OutOfOfficeInSlots"; export const LargeCalendar = ({ extraDays, @@ -78,6 +80,7 @@ export const LargeCalendar = ({ hoverEventDuration={eventDuration} hideHeader timezone={timezone} + renderOutOfOffice={(props) => } /> ); diff --git a/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx index 906c419246..eecc24a56d 100644 --- a/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx +++ b/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx @@ -5,7 +5,7 @@ import { usePathname } from "next/navigation"; import { useMemo } from "react"; import dayjs from "@calcom/dayjs"; -import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar"; +import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar"; import type { CalendarComponentProps, Hours } from "@calcom/features/calendars/weeklyview/types/state"; import { weekdayDates } from "@calcom/features/calendars/weeklyview/utils"; import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants"; diff --git a/apps/web/modules/troubleshooter/components/LargeCalendar.tsx b/apps/web/modules/troubleshooter/components/LargeCalendar.tsx index b5e96f17e4..757f1bdcfc 100644 --- a/apps/web/modules/troubleshooter/components/LargeCalendar.tsx +++ b/apps/web/modules/troubleshooter/components/LargeCalendar.tsx @@ -1,13 +1,17 @@ +import { useSession } from "next-auth/react"; +import { useMemo } from "react"; + import dayjs from "@calcom/dayjs"; import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/hooks/useAvailableTimeSlots"; import { useTimePreferences } from "@calcom/features/bookings/lib/timePreferences"; -import { useSchedule } from "~/schedules/hooks/useSchedule"; +import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar"; import { useTroubleshooterStore } from "@calcom/features/troubleshooter/store"; import { BookingStatus } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; -import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar"; -import { useSession } from "next-auth/react"; -import { useMemo } from "react"; + +import { useSchedule } from "~/schedules/hooks/useSchedule"; + +import { OutOfOfficeInSlots } from "../../bookings/components/OutOfOfficeInSlots"; export const LargeCalendar = ({ extraDays }: { extraDays: number }) => { const { timezone } = useTimePreferences(); @@ -125,6 +129,7 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => { hoverEventDuration={30} hideHeader timezone={timezone} + renderOutOfOffice={(props) => } /> ); diff --git a/apps/web/modules/calendars/weeklyview/components/Calendar.tsx b/packages/features/calendars/weeklyview/components/Calendar.tsx similarity index 98% rename from apps/web/modules/calendars/weeklyview/components/Calendar.tsx rename to packages/features/calendars/weeklyview/components/Calendar.tsx index 9e12df836a..925528228e 100644 --- a/apps/web/modules/calendars/weeklyview/components/Calendar.tsx +++ b/packages/features/calendars/weeklyview/components/Calendar.tsx @@ -39,6 +39,7 @@ function CalendarInner(props: CalendarComponentProps) { const borderColor = useCalendarStore((state) => state.borderColor ?? "default"); const scrollToCurrentTime = useCalendarStore((state) => state.scrollToCurrentTime ?? true); const updateCurrentTimeOnFocus = useCalendarStore((state) => state.updateCurrentTimeOnFocus ?? false); + const renderOutOfOffice = useCalendarStore((state) => state.renderOutOfOffice); const days = useMemo(() => getDaysBetweenDates(startDate, endDate), [startDate, endDate]); @@ -148,6 +149,7 @@ function CalendarInner(props: CalendarComponentProps) { day={days[i]} startHour={startHour} availableSlots={availableTimeslots} + renderOutOfOffice={renderOutOfOffice} /> ) : ( <> diff --git a/apps/web/modules/calendars/weeklyview/components/DateValues/index.tsx b/packages/features/calendars/weeklyview/components/DateValues/index.tsx similarity index 99% rename from apps/web/modules/calendars/weeklyview/components/DateValues/index.tsx rename to packages/features/calendars/weeklyview/components/DateValues/index.tsx index 804cb6d9d9..d88c13b7b5 100644 --- a/apps/web/modules/calendars/weeklyview/components/DateValues/index.tsx +++ b/packages/features/calendars/weeklyview/components/DateValues/index.tsx @@ -1,11 +1,9 @@ -import React from "react"; - import dayjs from "@calcom/dayjs"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; -import classNames from "@calcom/ui/classNames"; - import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store"; import type { BorderColor } from "@calcom/features/calendars/weeklyview/types/common"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import classNames from "@calcom/ui/classNames"; +import type React from "react"; type Props = { showBorder: boolean; diff --git a/packages/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot.tsx b/packages/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot.tsx new file mode 100644 index 0000000000..b67755c05b --- /dev/null +++ b/packages/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot.tsx @@ -0,0 +1,67 @@ +import type { OutOfOfficeRenderProps } from "@calcom/features/calendars/weeklyview/types/state"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import classNames from "@calcom/ui/classNames"; + +export function DefaultOutOfOfficeSlot(props: OutOfOfficeRenderProps) { + const { t } = useLocale(); + const { + fromUser, + toUser, + emoji = "\u{1F3DD}\uFE0F", + reason, + borderDashed = true, + className, + notes, + showNotePublicly, + } = props; + + const isHoliday = !fromUser && reason; + + if (!isHoliday && !fromUser) return null; + + return ( +
+
+
+ {emoji} +
+
+ {isHoliday ? ( + <> +

{reason}

+

{t("holiday_no_availability")}

+ + ) : ( + <> +

+ {t("ooo_user_is_ooo", { displayName: fromUser?.displayName })} +

+ + {notes && showNotePublicly && ( +

+ {notes} +

+ )} + + {fromUser?.displayName && toUser?.displayName && ( +

+ username]} + /> +

+ )} + + )} +
+
+
+ ); +} diff --git a/apps/web/modules/calendars/weeklyview/components/blocking/BlockedList.tsx b/packages/features/calendars/weeklyview/components/blocking/BlockedList.tsx similarity index 99% rename from apps/web/modules/calendars/weeklyview/components/blocking/BlockedList.tsx rename to packages/features/calendars/weeklyview/components/blocking/BlockedList.tsx index ec0f5ac1ea..5e86dd98b5 100644 --- a/apps/web/modules/calendars/weeklyview/components/blocking/BlockedList.tsx +++ b/packages/features/calendars/weeklyview/components/blocking/BlockedList.tsx @@ -1,9 +1,7 @@ +import dayjs from "@calcom/dayjs"; +import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store"; import { useMemo } from "react"; import { shallow } from "zustand/shallow"; - -import dayjs from "@calcom/dayjs"; - -import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store"; import { BlockedTimeCell } from "./BlockedTimeCell"; type Props = { diff --git a/apps/web/modules/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx b/packages/features/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx similarity index 100% rename from apps/web/modules/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx rename to packages/features/calendars/weeklyview/components/blocking/BlockedTimeCell.tsx diff --git a/apps/web/modules/calendars/weeklyview/components/currentTime/index.tsx b/packages/features/calendars/weeklyview/components/currentTime/index.tsx similarity index 100% rename from apps/web/modules/calendars/weeklyview/components/currentTime/index.tsx rename to packages/features/calendars/weeklyview/components/currentTime/index.tsx diff --git a/apps/web/modules/calendars/weeklyview/components/event/Empty.tsx b/packages/features/calendars/weeklyview/components/event/Empty.tsx similarity index 87% rename from apps/web/modules/calendars/weeklyview/components/event/Empty.tsx rename to packages/features/calendars/weeklyview/components/event/Empty.tsx index 789bfba17e..1cc783d1c6 100644 --- a/apps/web/modules/calendars/weeklyview/components/event/Empty.tsx +++ b/packages/features/calendars/weeklyview/components/event/Empty.tsx @@ -1,16 +1,18 @@ -import { useMemo } from "react"; -import { shallow } from "zustand/shallow"; - import type { Dayjs } from "@calcom/dayjs"; import dayjs from "@calcom/dayjs"; import { useTimePreferences } from "@calcom/features/bookings/lib"; -import classNames from "@calcom/ui/classNames"; - -import { OutOfOfficeInSlots } from "@calcom/web/modules/bookings/components/OutOfOfficeInSlots"; +import { DefaultOutOfOfficeSlot } from "@calcom/features/calendars/weeklyview/components/DefaultOutOfOfficeSlot"; import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store"; -import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state"; +import type { + CalendarAvailableTimeslots, + OutOfOfficeRenderProps, +} from "@calcom/features/calendars/weeklyview/types/state"; import type { GridCellToDateProps } from "@calcom/features/calendars/weeklyview/utils"; import { gridCellToDateTime } from "@calcom/features/calendars/weeklyview/utils"; +import classNames from "@calcom/ui/classNames"; +import type { ReactNode } from "react"; +import { useMemo } from "react"; +import { shallow } from "zustand/shallow"; type EmptyCellProps = GridCellToDateProps & { isDisabled?: boolean; @@ -37,9 +39,16 @@ type AvailableCellProps = { availableSlots: CalendarAvailableTimeslots; day: GridCellToDateProps["day"]; startHour: GridCellToDateProps["startHour"]; + renderOutOfOffice?: (props: OutOfOfficeRenderProps) => ReactNode; }; -export function AvailableCellsForDay({ timezone, availableSlots, day, startHour }: AvailableCellProps) { +export function AvailableCellsForDay({ + timezone, + availableSlots, + day, + startHour, + renderOutOfOffice, +}: AvailableCellProps) { const date = dayjs(day); const dateFormatted = date.format("YYYY-MM-DD"); const slotsForToday = availableSlots && availableSlots[dateFormatted]; @@ -98,22 +107,23 @@ export function AvailableCellsForDay({ timezone, availableSlots, day, startHour if (slots.startEndTimeDuration) { const { firstSlot, startEndTimeDuration } = slots; + const renderOOO = renderOutOfOffice ?? ((p: OutOfOfficeRenderProps) => ); return ( - + {renderOOO({ + fromUser: firstSlot?.fromUser, + toUser: firstSlot?.toUser, + reason: firstSlot?.reason, + emoji: firstSlot?.emoji, + notes: firstSlot?.notes, + showNotePublicly: firstSlot?.showNotePublicly, + borderDashed: false, + date: dateFormatted, + className: "pb-0", + })} ); } diff --git a/apps/web/modules/calendars/weeklyview/components/event/Event.tsx b/packages/features/calendars/weeklyview/components/event/Event.tsx similarity index 100% rename from apps/web/modules/calendars/weeklyview/components/event/Event.tsx rename to packages/features/calendars/weeklyview/components/event/Event.tsx diff --git a/apps/web/modules/calendars/weeklyview/components/event/EventList.tsx b/packages/features/calendars/weeklyview/components/event/EventList.tsx similarity index 99% rename from apps/web/modules/calendars/weeklyview/components/event/EventList.tsx rename to packages/features/calendars/weeklyview/components/event/EventList.tsx index bdbc0909e2..e173bd2857 100644 --- a/apps/web/modules/calendars/weeklyview/components/event/EventList.tsx +++ b/packages/features/calendars/weeklyview/components/event/EventList.tsx @@ -1,11 +1,9 @@ -import { useEffect, useMemo, useState } from "react"; -import { shallow } from "zustand/shallow"; - import dayjs from "@calcom/dayjs"; -import classNames from "@calcom/ui/classNames"; - import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store"; import { calculateEventLayouts, createLayoutMap } from "@calcom/features/calendars/weeklyview/utils/overlap"; +import classNames from "@calcom/ui/classNames"; +import { useEffect, useMemo, useState } from "react"; +import { shallow } from "zustand/shallow"; import { Event } from "./Event"; type Props = { diff --git a/apps/web/modules/calendars/weeklyview/components/event/index.tsx b/packages/features/calendars/weeklyview/components/event/index.tsx similarity index 100% rename from apps/web/modules/calendars/weeklyview/components/event/index.tsx rename to packages/features/calendars/weeklyview/components/event/index.tsx diff --git a/apps/web/modules/calendars/weeklyview/components/grid/index.tsx b/packages/features/calendars/weeklyview/components/grid/index.tsx similarity index 100% rename from apps/web/modules/calendars/weeklyview/components/grid/index.tsx rename to packages/features/calendars/weeklyview/components/grid/index.tsx diff --git a/apps/web/modules/calendars/weeklyview/components/heading/SchedulerHeading.tsx b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx similarity index 99% rename from apps/web/modules/calendars/weeklyview/components/heading/SchedulerHeading.tsx rename to packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx index 8cba239bf7..d2052d5891 100644 --- a/apps/web/modules/calendars/weeklyview/components/heading/SchedulerHeading.tsx +++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx @@ -1,9 +1,8 @@ import dayjs from "@calcom/dayjs"; +import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store"; import { Button } from "@calcom/ui/components/button"; import { ButtonGroup } from "@calcom/ui/components/buttonGroup"; -import { useCalendarStore } from "@calcom/features/calendars/weeklyview/state/store"; - export function SchedulerHeading() { const { startDate, endDate, handleDateChange } = useCalendarStore((state) => ({ startDate: dayjs(state.startDate), diff --git a/apps/web/modules/calendars/weeklyview/components/heading/index.tsx b/packages/features/calendars/weeklyview/components/heading/index.tsx similarity index 100% rename from apps/web/modules/calendars/weeklyview/components/heading/index.tsx rename to packages/features/calendars/weeklyview/components/heading/index.tsx diff --git a/apps/web/modules/calendars/weeklyview/components/horizontalLines/index.tsx b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx similarity index 99% rename from apps/web/modules/calendars/weeklyview/components/horizontalLines/index.tsx rename to packages/features/calendars/weeklyview/components/horizontalLines/index.tsx index 49c66070e7..7a6a2222d6 100644 --- a/apps/web/modules/calendars/weeklyview/components/horizontalLines/index.tsx +++ b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx @@ -1,10 +1,8 @@ -import { useId } from "react"; - import type dayjs from "@calcom/dayjs"; import { useTimePreferences } from "@calcom/features/bookings/lib"; -import classNames from "@calcom/ui/classNames"; - import type { BorderColor } from "@calcom/features/calendars/weeklyview/types/common"; +import classNames from "@calcom/ui/classNames"; +import { useId } from "react"; export const HorizontalLines = ({ hours, diff --git a/apps/web/modules/calendars/weeklyview/components/index.tsx b/packages/features/calendars/weeklyview/components/index.tsx similarity index 100% rename from apps/web/modules/calendars/weeklyview/components/index.tsx rename to packages/features/calendars/weeklyview/components/index.tsx diff --git a/apps/web/modules/calendars/weeklyview/components/spinner/Spinner.tsx b/packages/features/calendars/weeklyview/components/spinner/Spinner.tsx similarity index 100% rename from apps/web/modules/calendars/weeklyview/components/spinner/Spinner.tsx rename to packages/features/calendars/weeklyview/components/spinner/Spinner.tsx diff --git a/apps/web/modules/calendars/weeklyview/components/verticalLines/index.tsx b/packages/features/calendars/weeklyview/components/verticalLines/index.tsx similarity index 99% rename from apps/web/modules/calendars/weeklyview/components/verticalLines/index.tsx rename to packages/features/calendars/weeklyview/components/verticalLines/index.tsx index 092b18146b..943a2c23b8 100644 --- a/apps/web/modules/calendars/weeklyview/components/verticalLines/index.tsx +++ b/packages/features/calendars/weeklyview/components/verticalLines/index.tsx @@ -1,7 +1,6 @@ import type dayjs from "@calcom/dayjs"; -import classNames from "@calcom/ui/classNames"; - import type { BorderColor } from "@calcom/features/calendars/weeklyview/types/common"; +import classNames from "@calcom/ui/classNames"; export const VerticalLines = ({ days, borderColor }: { days: dayjs.Dayjs[]; borderColor: BorderColor }) => { const isRTL = () => { diff --git a/packages/features/calendars/weeklyview/types/state.ts b/packages/features/calendars/weeklyview/types/state.ts index ee247aa75a..b0494e9f9f 100644 --- a/packages/features/calendars/weeklyview/types/state.ts +++ b/packages/features/calendars/weeklyview/types/state.ts @@ -1,8 +1,23 @@ +import type { ReactNode } from "react"; + import type { IFromUser, IToUser } from "@calcom/features/availability/lib/getUserAvailability"; import type { TimeRange } from "@calcom/types/schedule"; + import type { BorderColor } from "./common"; import type { CalendarEvent } from "./events"; +export type OutOfOfficeRenderProps = { + date: string; + fromUser?: IFromUser; + toUser?: IToUser; + emoji?: string; + reason?: string; + notes?: string | null; + showNotePublicly?: boolean; + borderDashed?: boolean; + className?: string; +}; + export type View = "month" | "week" | "day"; export type Hours = | 0 @@ -162,6 +177,11 @@ export type CalendarState = { * @default false */ updateCurrentTimeOnFocus?: boolean; + /** + * Render function for out-of-office slots. + * Web consumers pass OutOfOfficeInSlots, atoms/platform can pass their own or null. + */ + renderOutOfOffice?: (props: OutOfOfficeRenderProps) => ReactNode; }; export type CalendarComponentProps = CalendarPublicActions & CalendarState & { isPending?: boolean }; diff --git a/packages/platform/atoms/calendar-view/CalendarViewComponent.tsx b/packages/platform/atoms/calendar-view/CalendarViewComponent.tsx index 9047a9fcaf..98b94d807b 100644 --- a/packages/platform/atoms/calendar-view/CalendarViewComponent.tsx +++ b/packages/platform/atoms/calendar-view/CalendarViewComponent.tsx @@ -1,6 +1,6 @@ import { Header } from "@calcom/features/bookings/components/Header"; import { BookerSection } from "@calcom/features/bookings/components/Section"; -import { LargeCalendar } from "@calcom/web/modules/calendar-view/components/LargeCalendar"; +import { LargeCalendar } from "./components/LargeCalendar"; import { bookerLayoutOptions } from "@calcom/prisma/zod-utils"; import { AtomsWrapper } from "../src/components/atoms-wrapper"; diff --git a/packages/platform/atoms/calendar-view/EventTypeCalendarViewComponent.tsx b/packages/platform/atoms/calendar-view/EventTypeCalendarViewComponent.tsx index 7aac1f45ae..b0b93ff1fd 100644 --- a/packages/platform/atoms/calendar-view/EventTypeCalendarViewComponent.tsx +++ b/packages/platform/atoms/calendar-view/EventTypeCalendarViewComponent.tsx @@ -10,7 +10,7 @@ import { BookerSection } from "@calcom/features/bookings/components/Section"; import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/hooks/useAvailableTimeSlots"; import { useBookerLayout } from "@calcom/features/bookings/Booker/hooks/useBookerLayout"; import { useTimePreferences } from "@calcom/features/bookings/lib"; -import { LargeCalendar } from "@calcom/web/modules/calendar-view/components/LargeCalendar"; +import { LargeCalendar } from "./components/LargeCalendar"; import { getUsernameList } from "@calcom/features/eventtypes/lib/defaultEvents"; import { useTimesForSchedule } from "@calcom/features/schedules/hooks/useTimesForSchedule"; diff --git a/apps/web/modules/calendar-view/components/LargeCalendar.tsx b/packages/platform/atoms/calendar-view/components/LargeCalendar.tsx similarity index 94% rename from apps/web/modules/calendar-view/components/LargeCalendar.tsx rename to packages/platform/atoms/calendar-view/components/LargeCalendar.tsx index 8616f20158..d67cd502f5 100644 --- a/apps/web/modules/calendar-view/components/LargeCalendar.tsx +++ b/packages/platform/atoms/calendar-view/components/LargeCalendar.tsx @@ -4,14 +4,14 @@ import dayjs from "@calcom/dayjs"; import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider"; import { useBookerTime } from "@calcom/features/bookings/Booker/hooks/useBookerTime"; import type { BookerEvent } from "@calcom/features/bookings/types"; -import { Calendar } from "@calcom/web/modules/calendars/weeklyview/components/Calendar"; +import { Calendar } from "@calcom/features/calendars/weeklyview/components/Calendar"; import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state"; import { localStorage } from "@calcom/lib/webstorage"; import type { BookingStatus } from "@calcom/prisma/enums"; -import { useBookings } from "@calcom/atoms/hooks/bookings/useBookings"; -import { useCalendarsBusyTimes } from "@calcom/atoms/hooks/useCalendarsBusyTimes"; -import { useConnectedCalendars } from "@calcom/atoms/hooks/useConnectedCalendars"; +import { useBookings } from "../../hooks/bookings/useBookings"; +import { useCalendarsBusyTimes } from "../../hooks/useCalendarsBusyTimes"; +import { useConnectedCalendars } from "../../hooks/useConnectedCalendars"; import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param"; export const LargeCalendar = ({