From f46c3c65fbf200923f4a01dab68b7e2073aaae2d Mon Sep 17 00:00:00 2001
From: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Date: Mon, 30 Sep 2024 19:45:28 +0530
Subject: [PATCH] filter connected calendars before displaying it in tooltip
 (#16883)

---
 .../platform/atoms/connect/OAuthConnect.tsx   | 30 +++++++++++--------
 .../atoms/connect/apple/AppleConnect.tsx      |  2 +-
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/platform/atoms/connect/OAuthConnect.tsx b/packages/platform/atoms/connect/OAuthConnect.tsx
index 37fe19f0b6d936..046e21d0cd4b65 100644
--- a/packages/platform/atoms/connect/OAuthConnect.tsx
+++ b/packages/platform/atoms/connect/OAuthConnect.tsx
@@ -70,7 +70,7 @@ export const OAuthConnect: FC<
           StartIcon="calendar-days"
           color="primary"
           disabled={isClickable ? false : isChecking}
-          tooltip={tooltip ? tooltip : <ConnectedCalendarsTooltip />}
+          tooltip={tooltip ? tooltip : <ConnectedCalendarsTooltip calendarInstance={calendar} />}
           tooltipSide={tooltipSide}
           tooltipOffset={10}
           className={cn("", !isDisabled && "cursor-pointer", className)}
@@ -101,7 +101,11 @@ export const OAuthConnect: FC<
   );
 };
 
-export const ConnectedCalendarsTooltip = () => {
+export const ConnectedCalendarsTooltip = ({
+  calendarInstance,
+}: {
+  calendarInstance: (typeof CALENDARS)[number];
+}) => {
   const { data: connectedCalendars, isLoading: isConnectedCalendarsLoading } = useConnectedCalendars({});
 
   if (isConnectedCalendarsLoading)
@@ -111,16 +115,18 @@ export const ConnectedCalendarsTooltip = () => {
 
   return (
     <div className="bg-subtle flex flex-col rounded-md border border-gray-300">
-      {connectedCalendars?.connectedCalendars.map((calendar, index, arr) => {
-        return (
-          <>
-            <div key={calendar.primary?.externalId} className="bg-transparent px-4 py-2 text-black">
-              {calendar.primary?.name} - {calendar.primary?.email}
-            </div>
-            {arr.length - 1 !== index && <hr className="w-[90%] self-center" />}
-          </>
-        );
-      })}
+      {connectedCalendars?.connectedCalendars
+        .filter((calendar) => calendar.integration.slug === `${calendarInstance}-calendar`)
+        .map((calendar, index, arr) => {
+          return (
+            <>
+              <div key={calendar.primary?.externalId} className="bg-transparent px-4 py-2 text-black">
+                {calendar.primary?.name} - {calendar.primary?.email}
+              </div>
+              {arr.length - 1 !== index && <hr className="w-[90%] self-center" />}
+            </>
+          );
+        })}
     </div>
   );
 };
diff --git a/packages/platform/atoms/connect/apple/AppleConnect.tsx b/packages/platform/atoms/connect/apple/AppleConnect.tsx
index 3d760cbb52412f..78771c5f72fd73 100644
--- a/packages/platform/atoms/connect/apple/AppleConnect.tsx
+++ b/packages/platform/atoms/connect/apple/AppleConnect.tsx
@@ -88,7 +88,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
                 StartIcon="calendar-days"
                 color="primary"
                 disabled={isClickable ? false : isChecking}
-                tooltip={tooltip ? tooltip : <ConnectedCalendarsTooltip />}
+                tooltip={tooltip ? tooltip : <ConnectedCalendarsTooltip calendarInstance="apple" />}
                 tooltipSide={tooltipSide}
                 tooltipOffset={10}
                 className={cn("", !isDisabled && "cursor-pointer", className)}