From 0ee137efbb212383e2713eb55d2c6007350d0f2a Mon Sep 17 00:00:00 2001
From: Parteek malik <64765095+parteekmalik@users.noreply.github.com>
Date: Tue, 1 Jul 2025 16:51:25 +0530
Subject: [PATCH] fix: passing props (#21670)

Co-authored-by: Somay Chauhan <somaychauhan98@gmail.com>
---
 packages/features/bookings/Booker/Booker.tsx   | 10 ++--------
 .../bookings/Booker/components/DatePicker.tsx  | 10 ++--------
 packages/features/bookings/Booker/types.ts     | 18 ++++++++++--------
 3 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 76c9f63093..f1e41c36e0 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -408,6 +408,7 @@ const BookerComponent = ({
                   !(layout === "mobile" && bookerState === "booking") && (
                     <div className="mt-auto px-5 py-3">
                       <DatePicker
+                        classNames={customClassNames?.datePickerCustomClassNames}
                         event={event}
                         slots={schedule?.data?.slots}
                         isLoading={schedule.isPending}
@@ -435,14 +436,7 @@ const BookerComponent = ({
               initial="visible"
               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?.datePickerCustomClassNames?.datePickerContainer,
-                  datePickerTitle: customClassNames?.datePickerCustomClassNames?.datePickerTitle,
-                  datePickerDays: customClassNames?.datePickerCustomClassNames?.datePickerDays,
-                  datePickerDate: customClassNames?.datePickerCustomClassNames?.datePickerDate,
-                  datePickerDatesActive: customClassNames?.datePickerCustomClassNames?.datePickerDatesActive,
-                  datePickerToggle: customClassNames?.datePickerCustomClassNames?.datePickerToggle,
-                }}
+                classNames={customClassNames?.datePickerCustomClassNames}
                 event={event}
                 slots={schedule?.data?.slots}
                 isLoading={schedule.isPending}
diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx
index ae08a0d709..544d0d929e 100644
--- a/packages/features/bookings/Booker/components/DatePicker.tsx
+++ b/packages/features/bookings/Booker/components/DatePicker.tsx
@@ -2,6 +2,7 @@ import { shallow } from "zustand/shallow";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
+import type { DatePickerClassNames } from "@calcom/features/bookings/Booker/types";
 import { DatePicker as DatePickerComponent } from "@calcom/features/calendars/DatePicker";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-schedule/useNonEmptyScheduleDays";
 import { weekdayToWeekIndex } from "@calcom/lib/dayjs";
@@ -69,14 +70,7 @@ export const DatePicker = ({
   };
   slots?: Slots;
   isLoading?: boolean;
-  classNames?: {
-    datePickerContainer?: string;
-    datePickerTitle?: string;
-    datePickerDays?: string;
-    datePickerDate?: string;
-    datePickerDatesActive?: string;
-    datePickerToggle?: string;
-  };
+  classNames?: DatePickerClassNames;
   scrollToTimeSlots?: () => void;
 }) => {
   const { i18n } = useLocale();
diff --git a/packages/features/bookings/Booker/types.ts b/packages/features/bookings/Booker/types.ts
index 7ac18b2b52..a804e762d7 100644
--- a/packages/features/bookings/Booker/types.ts
+++ b/packages/features/bookings/Booker/types.ts
@@ -161,14 +161,7 @@ export type CustomClassNames = {
     eventMetaTimezoneSelect?: string;
     eventMetaChildren?: string;
   };
-  datePickerCustomClassNames?: {
-    datePickerContainer?: string;
-    datePickerTitle?: string;
-    datePickerDays?: string;
-    datePickerDate?: string;
-    datePickerDatesActive?: string;
-    datePickerToggle?: string;
-  };
+  datePickerCustomClassNames?: DatePickerClassNames;
   availableTimeSlotsCustomClassNames?: {
     availableTimeSlotsContainer?: string;
     availableTimeSlotsHeaderContainer?: string;
@@ -182,3 +175,12 @@ export type CustomClassNames = {
     backButton?: string;
   };
 };
+
+export type DatePickerClassNames = {
+  datePickerContainer?: string;
+  datePickerTitle?: string;
+  datePickerDays?: string;
+  datePickerDate?: string;
+  datePickerDatesActive?: string;
+  datePickerToggle?: string;
+};