feat: display connected calendars on platform calendars page (#14203)

* feat: display connected calendars on platform calendars page

* fixup! feat: display connected calendars on platform calendars page

packages/platform/atoms/booker/BookerPlatformWrapper.tsx

@@ -4,6 +4,7 @@ import { shallow } from "zustand/shallow";
 import dayjs from "@calcom/dayjs";
 import type { BookerProps } from "@calcom/features/bookings/Booker";
 import { Booker as BookerComponent } from "@calcom/features/bookings/Booker";
+import { useOverlayCalendarStore } from "@calcom/features/bookings/Booker/components/OverlayCalendar/store";
 import { useBookerLayout } from "@calcom/features/bookings/Booker/components/hooks/useBookerLayout";
 import { useBookingForm } from "@calcom/features/bookings/Booker/components/hooks/useBookingForm";
 import { useLocalSet } from "@calcom/features/bookings/Booker/components/hooks/useLocalSet";
@@ -179,8 +180,14 @@ export const BookerPlatformWrapper = (props: BookerPlatformWrapperAtomProps) =>
   });
 
   const slots = useSlots(event);
-  const { data: connectedCalendars, isPending: fetchingConnectedCalendars } = useConnectedCalendars();
-  const calendars = connectedCalendars as ApiSuccessResponse<ConnectedDestinationCalendars>;
+  const [calendarSettingsOverlay] = useOverlayCalendarStore(
+    (state) => [state.calendarSettingsOverlayModal, state.setCalendarSettingsOverlayModal],
+    shallow
+  );
+  const { data: connectedCalendars, isPending: fetchingConnectedCalendars } = useConnectedCalendars({
+    enabled: !!calendarSettingsOverlay,
+  });
+  const calendars = connectedCalendars as ConnectedDestinationCalendars;
 
   const { set, clearSet } = useLocalSet<{
     credentialId: number;
@@ -267,7 +274,7 @@ export const BookerPlatformWrapper = (props: BookerPlatformWrapperAtomProps) =>
       calendars={{
         overlayBusyDates: overlayBusyDates?.data,
         isOverlayCalendarEnabled: false,
-        connectedCalendars: calendars?.data.connectedCalendars || [],
+        connectedCalendars: calendars?.connectedCalendars || [],
         loadingConnectedCalendar: fetchingConnectedCalendars,
         onToggleCalendar: () => {
           return;

packages/platform/atoms/hooks/useConnectedCalendars.tsx

@@ -1,7 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { shallow } from "zustand/shallow";
 
-import { useOverlayCalendarStore } from "@calcom/features/bookings/Booker/components/OverlayCalendar/store";
 import { SUCCESS_STATUS } from "@calcom/platform-constants";
 import type { ConnectedDestinationCalendars } from "@calcom/platform-libraries";
 import type { ApiResponse } from "@calcom/platform-types";
@@ -9,22 +7,18 @@ import type { ApiResponse } from "@calcom/platform-types";
 import http from "../lib/http";
 
 export const QUERY_KEY = "get-connected-calendars";
-export const useConnectedCalendars = () => {
-  const [calendarSettingsOverlay] = useOverlayCalendarStore(
-    (state) => [state.calendarSettingsOverlayModal, state.setCalendarSettingsOverlayModal],
-    shallow
-  );
+export const useConnectedCalendars = (props: { enabled?: boolean }) => {
   const calendars = useQuery({
     queryKey: [QUERY_KEY],
     queryFn: () => {
       return http.get<ApiResponse<ConnectedDestinationCalendars>>("/ee/calendars").then((res) => {
         if (res.data.status === SUCCESS_STATUS) {
-          return res.data;
+          return res.data?.data;
         }
         throw new Error(res.data.error.message);
       });
     },
-    enabled: !!calendarSettingsOverlay,
+    enabled: props?.enabled ?? true,
   });
 
   return calendars;

packages/platform/atoms/index.ts

@@ -4,3 +4,4 @@ export { PlatformAvailabilitySettingsWrapper as AvailabilitySettings } from "./a
 export { BookerPlatformWrapper as Booker } from "./booker";
 export { useIsPlatform } from "./hooks/useIsPlatform";
 export { useAtomsContext } from "./hooks/useAtomsContext";
+export { useConnectedCalendars } from "./hooks/useConnectedCalendars";

packages/platform/examples/base/src/pages/calendars.tsx

@@ -1,14 +1,41 @@
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
 
+import { useConnectedCalendars } from "@calcom/atoms";
+
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Calendars(props: { calUsername: string; calEmail: string }) {
+  const { isLoading, data: calendars } = useConnectedCalendars();
+  const connectedCalendars = calendars?.connectedCalendars ?? [];
+  const destinationCalendar = calendars?.destinationCalendar ?? {};
   return (
     <main className={`flex min-h-screen flex-col ${inter.className}`}>
       <Navbar username={props.calUsername} />
-      <div>
-        <h1>This is the google calendar page</h1>
+      <div className="p-4">
+        <h1 className="my-4 text-lg font-bold">Your Connected Calendars</h1>
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          Boolean(connectedCalendars?.length) &&
+          connectedCalendars.map((connectedCalendar) => (
+            <div key={connectedCalendar.credentialId}>
+              <h1 className="text-md font-bold">{connectedCalendar.integration.name}</h1>
+              {connectedCalendar.calendars.map((calendar) => (
+                <div key={calendar.id}>
+                  <h2>{calendar.name}</h2>
+                </div>
+              ))}
+            </div>
+          ))
+        )}
+        <hr className="my-4" />
+        {!isLoading && destinationCalendar.id && (
+          <div className="">
+            <h2 className="text-md font-bold">Destination Calendar: {destinationCalendar.name}</h2>
+            <p>{destinationCalendar.integrationTitle}</p>
+          </div>
+        )}
       </div>
     </main>
   );