fix: calendar settings atom modifications (#17579)

* update selected calendars display when no calendar connected

* remove no calendar connected message

packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx

@@ -54,7 +54,12 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
             const destinationCalendarId = data.destinationCalendar.externalId;
 
             if (!data.connectedCalendars.length) {
-              return null;
+              return (
+                <SelectedCalendarsSettings classNames={classNames}>
+                  <SelectedCalendarsSettingsHeading calendarRedirectUrls={calendarRedirectUrls} />
+                  <h1 className="px-6 py-4 text-base leading-5">No connected calendars found.</h1>
+                </SelectedCalendarsSettings>
+              );
             }
 
             return (

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

@@ -1,22 +1,14 @@
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
 
-import { useConnectedCalendars, CalendarSettings } from "@calcom/atoms";
+import { CalendarSettings } 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 ?? [];
-
   return (
     <main className={`flex min-h-screen flex-col ${inter.className}`}>
       <Navbar username={props.calUsername} />
-      {!isLoading && !connectedCalendars?.length && (
-        <h1 className="mx-10 my-4 text-xl font-bold">
-          You have not connected any calendars yet, please connect your Google, Outlook or Apple calendar.
-        </h1>
-      )}
       <div>
         <CalendarSettings />
       </div>