diff --git a/packages/embeds/embed-core/playground/lib/playground.ts b/packages/embeds/embed-core/playground/lib/playground.ts index cc39e3178d..93daeb5c6e 100644 --- a/packages/embeds/embed-core/playground/lib/playground.ts +++ b/packages/embeds/embed-core/playground/lib/playground.ts @@ -636,6 +636,24 @@ Cal("on", { callback: bookingSuccessfulV2Callback, }); +const availabilityLoadedCallback = (e: EmbedEvent<"availabilityLoaded">) => { + const data = e.detail.data; + console.log("availabilityLoaded", { + eventId: data.eventId, + eventSlug: data.eventSlug, + }); + + Cal("off", { + action: "availabilityLoaded", + callback: availabilityLoadedCallback, + }); +}; + +Cal("on", { + action: "availabilityLoaded", + callback: availabilityLoadedCallback, +}); + if (only === "all" || only === "ns:skeletonDemo") { Cal("init", "skeletonDemo", { debug: true, diff --git a/packages/embeds/embed-core/src/sdk-action-manager.ts b/packages/embeds/embed-core/src/sdk-action-manager.ts index 62921c18f8..b0f02162ae 100644 --- a/packages/embeds/embed-core/src/sdk-action-manager.ts +++ b/packages/embeds/embed-core/src/sdk-action-manager.ts @@ -37,6 +37,10 @@ export type EventDataMap = { }; }; linkReady: Record; + availabilityLoaded: { + eventId: number; + eventSlug: string; + }; __connectInitiated: Record; __connectCompleted: Record; bookingSuccessfulV2: BaseBookingEventPayload & { diff --git a/packages/embeds/embed-react/inline.tsx b/packages/embeds/embed-react/inline.tsx index c3780fbd7e..50504fdeb3 100644 --- a/packages/embeds/embed-react/inline.tsx +++ b/packages/embeds/embed-react/inline.tsx @@ -50,6 +50,24 @@ function App() { callback, }); + const availabilityLoadedCallback = (e: EmbedEvent<"availabilityLoaded">) => { + const data = e.detail.data; + console.log("availabilityLoaded", { + eventId: data.eventId, + eventSlug: data.eventSlug, + }); + + api("off", { + action: "availabilityLoaded", + callback: availabilityLoadedCallback, + }); + }; + + api("on", { + action: "availabilityLoaded", + callback: availabilityLoadedCallback, + }); + // Also, validates the type of e.detail.data as TS runs on this file const bookingSuccessfulV2Callback = (e: EmbedEvent<"bookingSuccessfulV2">) => { const data = e.detail.data; diff --git a/packages/features/schedules/lib/use-schedule/useSchedule.ts b/packages/features/schedules/lib/use-schedule/useSchedule.ts index 29cb456f21..f07790372d 100644 --- a/packages/features/schedules/lib/use-schedule/useSchedule.ts +++ b/packages/features/schedules/lib/use-schedule/useSchedule.ts @@ -1,6 +1,7 @@ import { useSearchParams } from "next/navigation"; import { updateEmbedBookerState } from "@calcom/embed-core/src/embed-iframe"; +import { sdkActionManager } from "@calcom/embed-core/src/sdk-event"; import { useBookerStore } from "@calcom/features/bookings/Booker/store"; import { isBookingDryRun } from "@calcom/features/bookings/Booker/utils/isBookingDryRun"; import { useTimesForSchedule } from "@calcom/features/schedules/lib/use-schedule/useTimesForSchedule"; @@ -30,6 +31,19 @@ export type UseScheduleWithCacheArgs = { enabled?: boolean; }; +const getAvailabilityLoadedEventPayload = ({ + eventId, + eventSlug, +}: { + eventId: number; + eventSlug: string; +}) => { + return { + eventId, + eventSlug, + }; +}; + export const useSchedule = ({ month, timezone, @@ -148,6 +162,13 @@ export const useSchedule = ({ slotsQuery: teamScheduleV2, }); + if (teamScheduleV2.isSuccess && eventId && eventSlug) { + sdkActionManager?.fire( + "availabilityLoaded", + getAvailabilityLoadedEventPayload({ eventId, eventSlug }) + ); + } + return { ...teamScheduleV2, /** @@ -164,6 +185,13 @@ export const useSchedule = ({ slotsQuery: schedule, }); + if (schedule.isSuccess && eventId && eventSlug) { + sdkActionManager?.fire( + "availabilityLoaded", + getAvailabilityLoadedEventPayload({ eventId, eventSlug }) + ); + } + return { ...schedule, /**