stack-troubleshooter-border-color-support (#11907)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

packages/features/bookings/Booker/components/LargeCalendar.tsx

@@ -57,7 +57,9 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
         start: dayjs(event.start).toDate(),
         end: dayjs(event.end).toDate(),
         title: "Busy",
-        status: "ACCEPTED",
+        options: {
+          status: "ACCEPTED",
+        },
       } as CalendarEvent;
     });
   }, [overlayEvents, displayOverlay]);

packages/features/calendars/weeklyview/_storybookData.ts

@@ -1,7 +1,7 @@
 import dayjs from "@calcom/dayjs";
-import { TimeRange } from "@calcom/types/schedule";
+import type { TimeRange } from "@calcom/types/schedule";
 
-import { CalendarEvent } from "./types/events";
+import type { CalendarEvent } from "./types/events";
 
 const startDate = dayjs().set("hour", 11).set("minute", 0);
 
@@ -11,63 +11,57 @@ export const events: CalendarEvent[] = [
     title: "Event 1",
     start: startDate.add(10, "minutes").toDate(),
     end: startDate.add(45, "minutes").toDate(),
-    allDay: false,
+    options: {
+      allDay: false,
+      borderColor: "#ff0000",
+      status: "ACCEPTED",
+    },
     source: "Booking",
-    status: "ACCEPTED",
   },
   {
     id: 2,
     title: "Event 2",
     start: startDate.add(1, "day").toDate(),
     end: startDate.add(1, "day").add(30, "minutes").toDate(),
-    allDay: false,
     source: "Booking",
-    status: "ACCEPTED",
+    options: {
+      status: "ACCEPTED",
+      allDay: false,
+    },
   },
   {
     id: 2,
     title: "Event 3",
     start: startDate.add(2, "day").toDate(),
     end: startDate.add(2, "day").add(60, "minutes").toDate(),
-    allDay: false,
     source: "Booking",
-    status: "ACCEPTED",
+    options: {
+      status: "PENDING",
+      borderColor: "#ff0000",
+      allDay: false,
+    },
   },
   {
     id: 3,
     title: "Event 4",
     start: startDate.add(3, "day").toDate(),
     end: startDate.add(3, "day").add(2, "hour").add(30, "minutes").toDate(),
-    allDay: false,
     source: "Booking",
-    status: "ACCEPTED",
+    options: {
+      status: "ACCEPTED",
+      allDay: false,
+    },
   },
   {
     id: 5,
     title: "Event 4 Overlap",
     start: startDate.add(3, "day").add(30, "minutes").toDate(),
     end: startDate.add(3, "day").add(2, "hour").add(45, "minutes").toDate(),
-    allDay: false,
     source: "Booking",
-    status: "ACCEPTED",
-  },
-  {
-    id: 4,
-    title: "Event 1 Overlap",
-    start: startDate.toDate(),
-    end: startDate.add(30, "minutes").toDate(),
-    allDay: false,
-    source: "Booking",
-    status: "ACCEPTED",
-  },
-  {
-    id: 6,
-    title: "Event 1 Overlap Two",
-    start: startDate.toDate(),
-    end: startDate.add(30, "minutes").toDate(),
-    allDay: false,
-    source: "Booking",
-    status: "ACCEPTED",
+    options: {
+      status: "ACCEPTED",
+      allDay: false,
+    },
   },
 ];
 

packages/features/calendars/weeklyview/components/event/Event.tsx

@@ -1,5 +1,6 @@
+import { cva } from "class-variance-authority";
+
 import dayjs from "@calcom/dayjs";
-import { classNames } from "@calcom/lib";
 
 import type { CalendarEvent } from "../../types/events";
 
@@ -11,6 +12,35 @@ type EventProps = {
   disabled?: boolean;
 };
 
+const eventClasses = cva(
+  "group flex h-full w-full flex-col overflow-y-auto rounded-[4px] px-[6px] py-1 text-xs font-semibold  leading-5 ",
+  {
+    variants: {
+      status: {
+        ACCEPTED: "bg-subtle hover:bg-emphasis text-emphasis border-[1px] border-gray-900",
+        PENDING: "bg-default text-emphasis border-[1px] border-dashed border-gray-900",
+        REJECTED: "",
+        CANCELLED: "",
+      },
+      disabled: {
+        true: "hover:cursor-default",
+        false: "hover:cursor-pointer",
+      },
+      selected: {
+        true: "bg-inverted text-inverted border-[1px] border-transparent",
+        false: "",
+      },
+      borderColor: {
+        ACCEPTED: "border-gray-900",
+        PENDING: "border-gray-900",
+        REJECTED: "border-gray-900",
+        CANCELLED: "border-gray-900",
+        custom: "",
+      },
+    },
+  }
+);
+
 export function Event({
   event,
   currentlySelectedEventId,
@@ -19,27 +49,32 @@ export function Event({
   onEventClick,
 }: EventProps) {
   const selected = currentlySelectedEventId === event.id;
+  const { options } = event;
+
+  const borderColor = options?.borderColor ? "custom" : options?.status;
+
+  const styles = options?.borderColor
+    ? {
+        borderColor: options?.borderColor,
+      }
+    : {};
 
   const Component = onEventClick ? "button" : "div";
 
   return (
     <Component
       onClick={() => onEventClick?.(event)} // Note this is not the button event. It is the calendar event.
-      className={classNames(
-        "group  flex h-full w-full flex-col overflow-y-auto rounded-[4px]  px-[6px] py-1 text-xs font-semibold  leading-5 ",
-        event.status === "ACCEPTED" &&
-          !selected &&
-          "bg-subtle hover:bg-emphasis text-emphasis border-[1px] border-gray-900",
-        event.status === "PENDING" &&
-          !selected &&
-          "bg-default text-emphasis border-[1px] border-dashed border-gray-900",
-        selected && "bg-inverted text-inverted border-[1px] border-transparent",
-        disabled ? "hover:cursor-default" : "hover:cursor-pointer"
-      )}>
+      className={eventClasses({
+        status: options?.status,
+        disabled,
+        selected,
+        borderColor,
+      })}
+      style={styles}>
       <div className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-left leading-4">
         {event.title}
       </div>
-      {eventDuration >= 30 && (
+      {eventDuration > 30 && (
         <p className="text-subtle text-left text-[10px] leading-none">
           {dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
         </p>

packages/features/calendars/weeklyview/components/event/EventList.tsx

@@ -23,7 +23,7 @@ export function EventList({ day }: Props) {
     <>
       {events
         .filter((event) => {
-          return dayjs(event.start).isSame(day, "day") && !event.allDay; // Filter all events that are not allDay and that are on the current day
+          return dayjs(event.start).isSame(day, "day") && !event.options?.allDay; // Filter all events that are not allDay and that are on the current day
         })
         .map((event, idx, eventsArray) => {
           let width = 90;

packages/features/calendars/weeklyview/types/events.ts

@@ -5,7 +5,10 @@ export interface CalendarEvent {
   title: string;
   start: Date | string; // You can pass in a string from DB since we use dayjs for the dates.
   end: Date;
-  allDay?: boolean;
   source?: string;
-  status?: BookingStatus;
+  options?: {
+    status?: BookingStatus;
+    allDay?: boolean;
+    borderColor?: string;
+  };
 }