From fc2e81e89a6e320c7346dad3259dd51ed700fb30 Mon Sep 17 00:00:00 2001 From: Somay Chauhan Date: Wed, 13 Aug 2025 18:51:56 +0530 Subject: [PATCH] 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 | 5 ++++ docs/platform/atoms/booker.mdx | 1 + packages/features/bookings/Booker/Booker.tsx | 3 +++ .../bookings/Booker/components/DatePicker.tsx | 3 +++ packages/features/bookings/Booker/types.ts | 1 + packages/features/calendars/DatePicker.tsx | 25 +++++++++++++------ .../atoms/booker/BookerPlatformWrapper.tsx | 2 ++ 7 files changed, 32 insertions(+), 8 deletions(-) create mode 100644 .changeset/great-hands-lick.md diff --git a/.changeset/great-hands-lick.md b/.changeset/great-hands-lick.md new file mode 100644 index 0000000000..c75a4aaaa9 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/docs/platform/atoms/booker.mdx b/docs/platform/atoms/booker.mdx index e6a2e52bd9..ac7ca3c000 100644 --- a/docs/platform/atoms/booker.mdx +++ b/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 diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index 1c6e4e1660..d7dd367157 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/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} /> )} @@ -445,6 +447,7 @@ const BookerComponent = ({ slots={schedule?.data?.slots} isLoading={schedule.isPending} scrollToTimeSlots={scrollToTimeSlots} + showNoAvailabilityDialog={showNoAvailabilityDialog} /> diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx index 6ef0afe42e..cf257b5c73 100644 --- a/packages/features/bookings/Booker/components/DatePicker.tsx +++ b/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} /> ); }; diff --git a/packages/features/bookings/Booker/types.ts b/packages/features/bookings/Booker/types.ts index 45748a8138..02fc434362 100644 --- a/packages/features/bookings/Booker/types.ts +++ b/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; diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx index ef91d8f606..e3fea1fba1 100644 --- a/packages/features/calendars/DatePicker.tsx +++ b/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 & { DayComponent?: React.FC>; @@ -345,14 +348,18 @@ const Days = ({ )} ))} - {!props.isLoading && !isBookingInPast && includedDates && includedDates?.length === 0 && ( - - )} + {!props.isLoading && + !isBookingInPast && + includedDates && + includedDates?.length === 0 && + showNoAvailabilityDialog && ( + + )} ); }; @@ -374,6 +381,7 @@ const DatePicker = ({ periodType: "UNLIMITED", }, isCompact, + showNoAvailabilityDialog, ...passThroughProps }: DatePickerProps & Partial> & { @@ -484,6 +492,7 @@ const DatePicker = ({ isBookingInPast={isBookingInPast} periodData={periodData} isCompact={isCompact} + showNoAvailabilityDialog={showNoAvailabilityDialog} /> diff --git a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx index 84ee9e2fa0..ddee3f25ba 100644 --- a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx +++ b/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,