calcom · keithwillcode · Apr 13, 2024 · Apr 13, 2024 · Apr 13, 2024 · Apr 13, 2024
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
@@ -342,10 +342,10 @@ const BookerComponent = ({
                 )}
                 <EventMeta
                   classNames={{
-                    eventMetaContainer: customClassNames?.eventMetaCustomClassname?.eventMetaContainer,
-                    eventMetaTitle: customClassNames?.eventMetaCustomClassname?.eventMetaTitle,
+                    eventMetaContainer: customClassNames?.eventMetaCustomClassNames?.eventMetaContainer,
+                    eventMetaTitle: customClassNames?.eventMetaCustomClassNames?.eventMetaTitle,
                     eventMetaTimezoneSelect:
-                      customClassNames?.eventMetaCustomClassname?.eventMetaTimezoneSelect,
+                      customClassNames?.eventMetaCustomClassNames?.eventMetaTimezoneSelect,
                   }}
                   event={event.data}
                   isPending={event.isPending}
@@ -378,12 +378,12 @@ const BookerComponent = ({
               className="md:border-subtle ml-[-1px] h-full flex-shrink px-5 py-3 md:border-l lg:w-[var(--booker-main-width)]">
               <DatePicker
                 classNames={{
-                  datePickerContainer: customClassNames?.datePickerCustomClassname?.datePickerContainer,
-                  datePickerTitle: customClassNames?.datePickerCustomClassname?.datePickerTitle,
-                  datePickerDays: customClassNames?.datePickerCustomClassname?.datePickerDays,
-                  datePickerDate: customClassNames?.datePickerCustomClassname?.datePickerDate,
-                  datePickerDatesActive: customClassNames?.datePickerCustomClassname?.datePickerDatesActive,
-                  datePickerToggle: customClassNames?.datePickerCustomClassname?.datePickerToggle,
+                  datePickerContainer: customClassNames?.datePickerCustomClassNames?.datePickerContainer,
+                  datePickerTitle: customClassNames?.datePickerCustomClassNames?.datePickerTitle,
+                  datePickerDays: customClassNames?.datePickerCustomClassNames?.datePickerDays,
+                  datePickerDate: customClassNames?.datePickerCustomClassNames?.datePickerDate,
+                  datePickerDatesActive: customClassNames?.datePickerCustomClassNames?.datePickerDatesActive,
+                  datePickerToggle: customClassNames?.datePickerCustomClassNames?.datePickerToggle,
                 }}
                 event={event}
                 schedule={schedule}
@@ -419,7 +419,7 @@ const BookerComponent = ({
               ref={timeslotsRef}
               {...fadeInLeft}>
               <AvailableTimeSlots
-                customClassnames={customClassNames?.availableTimeSlotsCustomClassname}
+                customClassNames={customClassNames?.availableTimeSlotsCustomClassNames}
                 extraDays={extraDays}
                 limitHeight={layout === BookerLayouts.MONTH_VIEW}
                 schedule={schedule?.data}

diff --git a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
@@ -20,10 +20,11 @@ type AvailableTimeSlotsProps = {
   seatsPerTimeSlot?: number | null;
   showAvailableSeatsCount?: boolean | null;
   event: useEventReturnType;
-  customClassnames?: {
+  customClassNames?: {
     availableTimeSlotsContainer?: string;
     availableTimeSlotsTitle?: string;
-    availableTimeSlotsTimeFormatToggle: string;
+    availableTimeSlotsHeaderContainer?: string;
+    availableTimeSlotsTimeFormatToggle?: string;
     availableTimes?: string;
   };
 };
@@ -43,7 +44,7 @@ export const AvailableTimeSlots = ({
   schedule,
   isLoading,
   event,
-  customClassnames,
+  customClassNames,
 }: AvailableTimeSlotsProps) => {
   const selectedDate = useBookerStore((state) => state.selectedDate);
   const setSelectedTimeslot = useBookerStore((state) => state.setSelectedTimeslot);
@@ -88,16 +89,17 @@ export const AvailableTimeSlots = ({
 
   return (
     <>
-      <div className={classNames(`flex`, `${customClassnames?.availableTimeSlotsContainer}`)}>
+      <div className={classNames(`flex`, `${customClassNames?.availableTimeSlotsContainer}`)}>
         {isLoading ? (
           <div className="mb-3 h-8" />
         ) : (
           slotsPerDay.length > 0 &&
           slotsPerDay.map((slots) => (
             <AvailableTimesHeader
-              customClassnames={{
-                availableTimeSlotTitle: customClassnames?.availableTimeSlotsTitle,
-                availableTimeSlotTimeFormatToggle: customClassnames?.availableTimeSlotsTimeFormatToggle,
+              customClassNames={{
+                availableTimeSlotsHeaderContainer: customClassNames?.availableTimeSlotsHeaderContainer,
+                availableTimeSlotsTitle: customClassNames?.availableTimeSlotsTitle,
+                availableTimeSlotsTimeFormatToggle: customClassNames?.availableTimeSlotsTimeFormatToggle,
               }}
               key={slots.date}
               date={dayjs(slots.date)}
@@ -117,7 +119,7 @@ export const AvailableTimeSlots = ({
         className={classNames(
           limitHeight && "scroll-bar flex-grow overflow-auto md:h-[400px]",
           !limitHeight && "flex h-full w-full flex-row gap-4",
-          `${customClassnames?.availableTimeSlotsContainer}`
+          `${customClassNames?.availableTimeSlotsContainer}`
         )}>
         {isLoading && // Shows exact amount of days as skeleton.
           Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)}
@@ -126,8 +128,8 @@ export const AvailableTimeSlots = ({
           slotsPerDay.map((slots) => (
             <div key={slots.date} className="scroll-bar h-full w-full overflow-y-auto overflow-x-hidden">
               <AvailableTimes
-                className={customClassnames?.availableTimeSlotsContainer}
-                customClassnames={customClassnames?.availableTimes}
+                className={customClassNames?.availableTimeSlotsContainer}
+                customClassNames={customClassNames?.availableTimes}
                 showTimeFormatToggle={!isColumnView}
                 onTimeSelect={onTimeSelect}
                 slots={slots.slots}

diff --git a/packages/features/bookings/Booker/types.ts b/packages/features/bookings/Booker/types.ts
@@ -114,11 +114,13 @@ export type WrappedBookerPropsMain = {
   schedule: useScheduleForEventReturnType;
   bookerLayout: UseBookerLayoutType;
   verifyEmail: UseVerifyEmailReturnType;
+  customClassNames?: CustomClassNames;
 };
 
 export type WrappedBookerPropsForPlatform = WrappedBookerPropsMain & {
   isPlatform: true;
   verifyCode: undefined;
+  customClassNames?: CustomClassNames;
 };
 export type WrappedBookerPropsForWeb = WrappedBookerPropsMain & {
   isPlatform: false;
@@ -133,23 +135,24 @@ export type BookerAreas = "calendar" | "timeslots" | "main" | "meta" | "header";
 
 export type CustomClassNames = {
   bookerContainer?: string;
-  eventMetaCustomClassname?: {
+  eventMetaCustomClassNames?: {
     eventMetaContainer?: string;
     eventMetaTitle?: string;
     eventMetaTimezoneSelect?: string;
   };
-  datePickerCustomClassname?: {
+  datePickerCustomClassNames?: {
     datePickerContainer?: string;
     datePickerTitle?: string;
     datePickerDays?: string;
     datePickerDate?: string;
     datePickerDatesActive?: string;
     datePickerToggle?: string;
   };
-  availableTimeSlotsCustomClassname: {
+  availableTimeSlotsCustomClassNames?: {
     availableTimeSlotsContainer?: string;
+    availableTimeSlotsHeaderContainer?: string;
     availableTimeSlotsTitle?: string;
-    availableTimeSlotsTimeFormatToggle: string;
+    availableTimeSlotsTimeFormatToggle?: string;
     availableTimes?: string;
   };
 };
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
@@ -36,7 +36,7 @@ type AvailableTimesProps = {
   className?: string;
   selectedSlots?: string[];
   event: useEventReturnType;
-  customClassnames?: string;
+  customClassNames?: string;
 };
 
 const SlotItem = ({
@@ -46,15 +46,15 @@ const SlotItem = ({
   onTimeSelect,
   showAvailableSeatsCount,
   event,
-  customClassnames,
+  customClassNames,
 }: {
   slot: Slots[string][number];
   seatsPerTimeSlot?: number | null;
   selectedSlots?: string[];
   onTimeSelect: TOnTimeSelect;
   showAvailableSeatsCount?: boolean | null;
   event: useEventReturnType;
-  customClassnames?: string;
+  customClassNames?: string;
 }) => {
   const { t } = useLocale();
 
@@ -126,7 +126,7 @@ const SlotItem = ({
           className={classNames(
             `min-h-9 hover:border-brand-default mb-2 flex h-auto w-full flex-grow flex-col justify-center py-2`,
             selectedSlots?.includes(slot.time) && "border-brand-default",
-            `${customClassnames}`
+            `${customClassNames}`
           )}
           color="secondary">
           <div className="flex items-center gap-2">
@@ -197,7 +197,7 @@ export const AvailableTimes = ({
   className,
   selectedSlots,
   event,
-  customClassnames,
+  customClassNames,
 }: AvailableTimesProps) => {
   const { t } = useLocale();
 
@@ -228,7 +228,7 @@ export const AvailableTimes = ({
           if (slot.away) return null;
           return (
             <SlotItem
-              customClassnames={customClassnames}
+              customClassNames={customClassNames}
               key={slot.time}
               onTimeSelect={onTimeSelect}
               slot={slot}

diff --git a/packages/features/bookings/components/AvailableTimesHeader.tsx b/packages/features/bookings/components/AvailableTimesHeader.tsx
@@ -14,18 +14,18 @@ type AvailableTimesHeaderProps = {
   date: Dayjs;
   showTimeFormatToggle?: boolean;
   availableMonth?: string | undefined;
-  customClassnames?: {
-    availableTimeSlotContainer?: string;
-    availableTimeSlotTitle?: string;
-    availableTimeSlotTimeFormatToggle?: string;
+  customClassNames?: {
+    availableTimeSlotsHeaderContainer?: string;
+    availableTimeSlotsTitle?: string;
+    availableTimeSlotsTimeFormatToggle?: string;
   };
 };
 
 export const AvailableTimesHeader = ({
   date,
   showTimeFormatToggle = true,
   availableMonth,
-  customClassnames,
+  customClassNames,
 }: AvailableTimesHeaderProps) => {
   const { t, i18n } = useLocale();
   const [layout] = useBookerStore((state) => [state.layout], shallow);
@@ -38,7 +38,7 @@ export const AvailableTimesHeader = ({
       className={classNames(
         `dark:bg-muted dark:before:bg-muted mb-3 flex w-full flex-row items-center font-medium`,
         "bg-default before:bg-default",
-        customClassnames?.availableTimeSlotContainer
+        customClassNames?.availableTimeSlotsHeaderContainer
       )}>
       <span
         className={classNames(
@@ -47,8 +47,8 @@ export const AvailableTimesHeader = ({
         )}>
         <span
           className={classNames(
-            isToday && !customClassnames?.availableTimeSlotTitle && "!text-default",
-            customClassnames?.availableTimeSlotTitle
+            isToday && !customClassNames?.availableTimeSlotsTitle && "!text-default",
+            customClassNames?.availableTimeSlotsTitle
           )}>
           {nameOfDay(i18n.language, Number(date.format("d")), "short")}
         </span>
@@ -57,8 +57,8 @@ export const AvailableTimesHeader = ({
             isColumnView && isToday && "bg-brand-default text-brand ml-2",
             "inline-flex items-center justify-center rounded-3xl px-1 pt-0.5 font-medium",
             isMonthView
-              ? `text-default text-sm ${customClassnames?.availableTimeSlotTitle}`
-              : `text-xs ${customClassnames?.availableTimeSlotTitle}`
+              ? `text-default text-sm ${customClassNames?.availableTimeSlotsTitle}`
+              : `text-xs ${customClassNames?.availableTimeSlotsTitle}`
           )}>
           {date.format("DD")}
           {availableMonth && `, ${availableMonth}`}
@@ -67,7 +67,7 @@ export const AvailableTimesHeader = ({
 
       {showTimeFormatToggle && (
         <div className="ml-auto rtl:mr-auto">
-          <TimeFormatToggle customClassname={customClassnames?.availableTimeSlotTimeFormatToggle} />
+          <TimeFormatToggle customClassName={customClassNames?.availableTimeSlotsTimeFormatToggle} />
         </div>
       )}
     </header>

diff --git a/packages/features/bookings/components/TimeFormatToggle.tsx b/packages/features/bookings/components/TimeFormatToggle.tsx
@@ -4,14 +4,14 @@ import { ToggleGroup } from "@calcom/ui";
 
 import { useTimePreferences } from "../lib";
 
-export const TimeFormatToggle = ({ customClassname }: { customClassname?: string }) => {
+export const TimeFormatToggle = ({ customClassName }: { customClassName?: string }) => {
   const timeFormat = useTimePreferences((state) => state.timeFormat);
   const setTimeFormat = useTimePreferences((state) => state.setTimeFormat);
   const { t } = useLocale();
 
   return (
     <ToggleGroup
-      customClassnames={customClassname}
+      customClassNames={customClassName}
       onValueChange={(newFormat) => {
         if (newFormat && newFormat !== timeFormat) setTimeFormat(newFormat as TimeFormat);
       }}

diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
@@ -59,14 +59,14 @@ export const Day = ({
   disabled,
   away,
   emoji,
-  customClassname,
+  customClassName,
   ...props
 }: JSX.IntrinsicElements["button"] & {
   active: boolean;
   date: Dayjs;
   away?: boolean;
   emoji?: string | null;
-  customClassname?: {
+  customClassName?: {
     dayContainer?: string;
     dayActive?: string;
   };
@@ -85,11 +85,11 @@ export const Day = ({
           ? "bg-brand-default text-brand"
           : !disabled
           ? `${
-              !customClassname?.dayActive
+              !customClassName?.dayActive
                 ? "hover:border-brand-default text-emphasis bg-emphasis"
-                : `hover:border-brand-default ${customClassname.dayActive}`
+                : `hover:border-brand-default ${customClassName.dayActive}`
             }`
-          : `${customClassname ? "" : " text-mute"}`
+          : `${customClassName ? "" : " text-mute"}`
       )}
       data-testid="day"
       data-disabled={disabled}
@@ -140,15 +140,15 @@ const Days = ({
   nextMonthButton,
   eventSlug,
   slots,
-  customClassname,
+  customClassName,
   ...props
 }: Omit<DatePickerProps, "locale" | "className" | "weekStart"> & {
   DayComponent?: React.FC<React.ComponentProps<typeof Day>>;
   browsingDate: Dayjs;
   weekStart: number;
   month: string | null;
   nextMonthButton: () => void;
-  customClassname?: {
+  customClassName?: {
     datePickerDate?: string;
     datePickerDateActive?: string;
   };
@@ -258,9 +258,9 @@ const Days = ({
             </button>
           ) : (
             <DayComponent
-              customClassname={{
-                dayContainer: customClassname?.datePickerDate,
-                dayActive: customClassname?.datePickerDateActive,
+              customClassName={{
+                dayContainer: customClassName?.datePickerDate,
+                dayActive: customClassName?.datePickerDateActive,
               }}
               date={day}
               onClick={() => {
@@ -377,7 +377,7 @@ const DatePicker = ({
       </div>
       <div className="relative grid grid-cols-7 grid-rows-6 gap-1 text-center">
         <Days
-          customClassname={{
+          customClassName={{
             datePickerDate: customClassNames?.datePickersDates,
             datePickerDateActive: customClassNames?.datePickerDatesActive,
           }}

diff --git a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx
@@ -34,29 +34,6 @@ import { usePublicEvent } from "../hooks/usePublicEvent";
 import { useSlots } from "../hooks/useSlots";
 import { AtomsWrapper } from "../src/components/atoms-wrapper";
 
-export type CustomClassNames = {
-  bookerContainer?: string;
-  eventMetaCustomClassname?: {
-    eventMetaContainer?: string;
-    eventMetaTitle?: string;
-    eventMetaTimezoneSelect?: string;
-  };
-  datePickerCustomClassname?: {
-    datePickerContainer?: string;
-    datePickerTitle?: string;
-    datePickerDays?: string;
-    datePickerDate?: string;
-    datePickerDatesActive?: string;
-    datePickerToggle?: string;
-  };
-  availableTimeSlotsCustomClassname?: {
-    availableTimeSlotsContainer?: string;
-    availableTimeSlotsTitle?: string;
-    availableTimeSlotsTimeFormatToggle?: string;
-    availableTimes?: string;
-  };
-};
-
 type BookerPlatformWrapperAtomProps = Omit<BookerProps, "entity"> & {
   rescheduleUid?: string;
   bookingUid?: string;

diff --git a/packages/platform/atoms/booker/BookerWebWrapper.tsx b/packages/platform/atoms/booker/BookerWebWrapper.tsx
@@ -21,9 +21,7 @@ import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
 
-import type { CustomClassNames } from "./BookerPlatformWrapper";
-
-type BookerWebWrapperAtomProps = BookerProps & { customClassNames?: CustomClassNames };
+type BookerWebWrapperAtomProps = BookerProps;
 
 export const BookerWebWrapper = (props: BookerWebWrapperAtomProps) => {
   const router = useRouter();