Add busy events to calendar

packages/features/troubleshooter/components/LargeCalendar.tsx

@@ -1,22 +1,57 @@
+import { useSession } from "next-auth/react";
+import { useMemo } from "react";
+
 import dayjs from "@calcom/dayjs";
 import { Calendar } from "@calcom/features/calendars/weeklyview";
+import { trpc } from "@calcom/trpc/react";
 
 import { useTroubleshooterStore } from "../store";
 
 export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
   const selectedDate = useTroubleshooterStore((state) => state.selectedDate);
-  const date = selectedDate || dayjs().format("YYYY-MM-DD");
+  const { data: session } = useSession();
+  const date = selectedDate ? dayjs(selectedDate) : dayjs();
+
+  const { data, isLoading } = trpc.viewer.availability.user.useQuery(
+    {
+      username: session?.user?.username || "",
+      dateFrom: date.startOf("day").utc().format(),
+      dateTo: date.endOf("day").utc().format(),
+      withSource: true,
+    },
+    {
+      enabled: !!session?.user?.username,
+    }
+  );
   const startDate = selectedDate ? dayjs(selectedDate).toDate() : dayjs().toDate();
   const endDate = dayjs(startDate)
     .add(extraDays - 1, "day")
     .toDate();
 
+  const events = useMemo(() => {
+    if (!data?.busy) return [];
+    return data?.busy.map((event) => {
+      const id = typeof event.start === "string" ? event.start : event.start.toISOString();
+
+      return {
+        id,
+        title: event.title ?? "Busy",
+        start: new Date(event.start),
+        end: new Date(event.end),
+        options: {
+          borderColor: "#F97417",
+          status: "ACCEPTED",
+        },
+      };
+    });
+  }, [data]);
+
   return (
     <div className="h-full [--calendar-dates-sticky-offset:66px]">
       <Calendar
         startHour={0}
         endHour={23}
-        events={[]}
+        events={events}
         startDate={startDate}
         endDate={endDate}
         gridCellsPerHour={60 / 15}

packages/features/troubleshooter/components/TroubleshooterListItemContainer.tsx

@@ -1,10 +1,13 @@
 import type { PropsWithChildren } from "react";
 
+import classNames from "@calcom/lib/classNames";
+
 interface TroubleshooterListItemContainerProps {
   title: string;
-  subtitle: string;
+  subtitle?: string;
   suffixSlot?: React.ReactNode;
   prefixSlot?: React.ReactNode;
+  className?: string;
 }
 
 export function TroubleshooterListItemHeader({
@@ -12,13 +15,14 @@ export function TroubleshooterListItemHeader({
   title,
   subtitle,
   suffixSlot,
+  className,
 }: TroubleshooterListItemContainerProps) {
   return (
-    <div className="border-subtle flex max-w-full gap-3 border border-b-0 px-4 py-2">
+    <div className={classNames("border-subtle flex max-w-full gap-3 border border-b-0 px-4 py-2", className)}>
       {prefixSlot}
       <div className="flex h-full max-w-full flex-1 flex-col flex-nowrap truncate text-sm leading-4">
-        <p className="font-semibold">{title}</p>
-        <p className="font-normal">{subtitle}</p>
+        <p className="font-medium">{title}</p>
+        {subtitle && <p className="font-normal">{subtitle}</p>}
       </div>
       {suffixSlot}
     </div>

packages/features/troubleshooter/components/TroubleshooterSidebar.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Skeleton } from "@calcom/ui";
 
+import { CalendarToggleContainer } from "./CalendarToggleContainer";
+import { EventScheduleItem } from "./EventScheduleItem";
 import { EventTypeSelect } from "./EventTypeSelect";
 
 const BackButtonInSidebar = ({ name }: { name: string }) => {
@@ -30,6 +32,8 @@ export const TroubleshooterSidebar = () => {
     <div className="relative z-10 flex w-full flex-col gap-6 py-6 pr-6">
       <BackButtonInSidebar name={t("troubleshooter")} />
       <EventTypeSelect />
+      <EventScheduleItem />
+      <CalendarToggleContainer />
     </div>
   );
 };

packages/trpc/server/routers/viewer/availability/schedule/getScheduleByEventTypeSlug.handler.ts

@@ -28,6 +28,24 @@ export const getScheduleByEventSlugHandler = async ({ ctx, input }: GetOptions)
   try {
     // This looks kinda weird that we throw straight in the catch - its so that we can return a default schedule if the user has not completed onboarding @shiraz will loveme for this
     if (!foundScheduleForSlug?.scheduleId) {
+      const foundUserDefaultId = await ctx.prisma.user.findUnique({
+        where: {
+          id: ctx.user.id,
+        },
+        select: {
+          defaultScheduleId: true,
+        },
+      });
+
+      if (foundUserDefaultId?.defaultScheduleId) {
+        return await getHandler({
+          ctx,
+          input: {
+            scheduleId: foundUserDefaultId?.defaultScheduleId,
+          },
+        });
+      }
+
       throw new Error("NOT_FOUND");
     }
     return await getHandler({
@@ -37,6 +55,7 @@ export const getScheduleByEventSlugHandler = async ({ ctx, input }: GetOptions)
       },
     });
   } catch (e) {
+    console.log(e);
     return {
       id: -1,
       name: "No schedules found",
@@ -45,7 +64,6 @@ export const getScheduleByEventSlugHandler = async ({ ctx, input }: GetOptions)
       timeZone: ctx.user.timeZone || "Europe/London",
       workingHours: [],
       isDefault: true,
-      hasDefaultSchedule: false, // This is the path that we take if the user has not completed onboarding
     };
   }
 };