feat: add availabilityLoaded embed event (#21350)

* feat: add availabiityLoaded embed event

* chore

* fix

---------

Co-authored-by: Volnei Munhoz <volnei.munhoz@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Devanshu Sharma <devanshusharma658@gmail.com>

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,

packages/embeds/embed-core/src/sdk-action-manager.ts

@@ -37,6 +37,10 @@ export type EventDataMap = {
     };
   };
   linkReady: Record<string, never>;
+  availabilityLoaded: {
+    eventId: number;
+    eventSlug: string;
+  };
   __connectInitiated: Record<string, never>;
   __connectCompleted: Record<string, never>;
   bookingSuccessfulV2: BaseBookingEventPayload & {

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;

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,
     /**