feat: add toggle for no availability dialog (#23052)

* feat: add toggle for no availability dialog

* Create great-hands-lick.md

* fix: correct spelling from showNoAvailabilityDailog to showNoAvailabilityDialog

* remove comment and redundant

.changeset/great-hands-lick.md

@@ -0,0 +1,5 @@
+---
+"@calcom/atoms": minor
+---
+
+Added showNoAvailabilityDialog prop to the Booker atom – a Boolean that controls whether the 'no availability' dialog is displayed

docs/platform/atoms/booker.mdx

@@ -127,6 +127,7 @@ Below is a list of props that can be passed to the booker atom.
 | timeZones     | No       | Array of valid IANA timezones to be used in the booker. Eg. ["Asia/Kolkata", "Europe/London"]                             |
 | onTimeslotsLoaded          | No       | Callback function triggered once the available timeslots have been fetched. |
 | roundRobinHideOrgAndTeam     | No       | Boolean indicating if the organization and team should be hidden in the booker atom sidebar for round robin scheduling type, defaults to false.                             |
+| showNoAvailabilityDialog     | No       | Boolean indicating if the no availability dialog should be shown, defaults to true.                             |
 
 ## Styling
 

packages/features/bookings/Booker/Booker.tsx

@@ -81,6 +81,7 @@ const BookerComponent = ({
   timeZones,
   eventMetaChildren,
   roundRobinHideOrgAndTeam,
+  showNoAvailabilityDialog,
 }: BookerProps & WrappedBookerProps) => {
   const searchParams = useCompatSearchParams();
   const isPlatformBookerEmbed = useIsPlatformBookerEmbed();
@@ -417,6 +418,7 @@ const BookerComponent = ({
                         slots={schedule?.data?.slots}
                         isLoading={schedule.isPending}
                         scrollToTimeSlots={scrollToTimeSlots}
+                        showNoAvailabilityDialog={showNoAvailabilityDialog}
                       />
                     </div>
                   )}
@@ -445,6 +447,7 @@ const BookerComponent = ({
                 slots={schedule?.data?.slots}
                 isLoading={schedule.isPending}
                 scrollToTimeSlots={scrollToTimeSlots}
+                showNoAvailabilityDialog={showNoAvailabilityDialog}
               />
             </BookerSection>
 

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

@@ -57,6 +57,7 @@ export const DatePicker = ({
   isLoading,
   classNames,
   scrollToTimeSlots,
+  showNoAvailabilityDialog,
 }: {
   event: {
     data?: {
@@ -72,6 +73,7 @@ export const DatePicker = ({
   isLoading?: boolean;
   classNames?: DatePickerClassNames;
   scrollToTimeSlots?: () => void;
+  showNoAvailabilityDialog?: boolean;
 }) => {
   const { i18n } = useLocale();
   const [month, selectedDate, layout] = useBookerStore(
@@ -148,6 +150,7 @@ export const DatePicker = ({
       scrollToTimeSlots={scrollToTimeSlots}
       periodData={periodData}
       isCompact={isCompact}
+      showNoAvailabilityDialog={showNoAvailabilityDialog}
     />
   );
 };

packages/features/bookings/Booker/types.ts

@@ -98,6 +98,7 @@ export interface BookerProps {
   hashedLink?: string | null;
   isInstantMeeting?: boolean;
   teamMemberEmail?: string | null;
+  showNoAvailabilityDialog?: boolean;
   crmOwnerRecordType?: string | null;
   crmAppSlug?: string | null;
   crmRecordId?: string | null;

packages/features/calendars/DatePicker.tsx

@@ -59,6 +59,8 @@ export type DatePickerProps = {
   periodData?: PeriodData;
   // Whether this is a compact sidebar view or main monthly view
   isCompact?: boolean;
+  // Whether to show the no availability dialog
+  showNoAvailabilityDialog?: boolean;
 };
 
 const Day = ({
@@ -164,6 +166,7 @@ const Days = ({
   isBookingInPast,
   periodData,
   isCompact,
+  showNoAvailabilityDialog = true,
   ...props
 }: Omit<DatePickerProps, "locale" | "className" | "weekStart"> & {
   DayComponent?: React.FC<React.ComponentProps<typeof Day>>;
@@ -345,14 +348,18 @@ const Days = ({
           )}
         </div>
       ))}
-      {!props.isLoading && !isBookingInPast && includedDates && includedDates?.length === 0 && (
-        <NoAvailabilityDialog
-          month={month}
-          nextMonthButton={nextMonthButton}
-          browsingDate={browsingDate}
-          periodData={periodData}
-        />
-      )}
+      {!props.isLoading &&
+        !isBookingInPast &&
+        includedDates &&
+        includedDates?.length === 0 &&
+        showNoAvailabilityDialog && (
+          <NoAvailabilityDialog
+            month={month}
+            nextMonthButton={nextMonthButton}
+            browsingDate={browsingDate}
+            periodData={periodData}
+          />
+        )}
     </>
   );
 };
@@ -374,6 +381,7 @@ const DatePicker = ({
     periodType: "UNLIMITED",
   },
   isCompact,
+  showNoAvailabilityDialog,
   ...passThroughProps
 }: DatePickerProps &
   Partial<React.ComponentProps<typeof Days>> & {
@@ -484,6 +492,7 @@ const DatePicker = ({
           isBookingInPast={isBookingInPast}
           periodData={periodData}
           isCompact={isCompact}
+          showNoAvailabilityDialog={showNoAvailabilityDialog}
         />
       </div>
     </div>

packages/platform/atoms/booker/BookerPlatformWrapper.tsx

@@ -58,6 +58,7 @@ export const BookerPlatformWrapper = (
     handleSlotReservation,
     onTimeslotsLoaded,
     startTime: customStartTime,
+    showNoAvailabilityDialog,
   } = props;
   const layout = BookerLayouts[view];
 
@@ -465,6 +466,7 @@ export const BookerPlatformWrapper = (
         customClassNames={props.customClassNames}
         eventSlug={props.eventSlug}
         username={username}
+        showNoAvailabilityDialog={showNoAvailabilityDialog}
         entity={
           event?.data?.entity ?? {
             considerUnpublished: false,