From e206ead6119b91fd99142ea207652a6ac8b74f8d Mon Sep 17 00:00:00 2001
From: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Date: Mon, 18 Nov 2024 19:35:34 +0530
Subject: [PATCH] fix: calendar settings atom modifications (#17579)

* update selected calendars display when no calendar connected

* remove no calendar connected message
---
 .../SelectedCalendarsSettingsPlatformWrapper.tsx       |  7 ++++++-
 .../platform/examples/base/src/pages/calendars.tsx     | 10 +---------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx b/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
index 43fb746e6c..b00f9af2de 100644
--- a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
+++ b/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 (
diff --git a/packages/platform/examples/base/src/pages/calendars.tsx b/packages/platform/examples/base/src/pages/calendars.tsx
index af17197283..c54f5e12cd 100644
--- a/packages/platform/examples/base/src/pages/calendars.tsx
+++ b/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>