From 5b7559c36e08509e47dd8024d2906f63b90b0cda Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 17 Nov 2023 11:06:31 +0200
Subject: [PATCH] fix(clerk-js): Avoid wrapping NotificationCountBadge of
 OrgSwitcher with Gate (#2147)

---
 .changeset/brown-clouds-divide.md             |  5 ++
 .../OrganizationSwitcherTrigger.tsx           | 56 +++++++++----------
 2 files changed, 32 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/brown-clouds-divide.md

diff --git a/.changeset/brown-clouds-divide.md b/.changeset/brown-clouds-divide.md
new file mode 100644
index 00000000000..0674f8f48d8
--- /dev/null
+++ b/.changeset/brown-clouds-divide.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+A bug fix for prefetching data for OrganizationSwitcher and correctly displaying a notification count in the switcher as well.
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 31b72059c35..1d4d070c9be 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { NotificationCountBadge, withGate } from '../../common';
+import { NotificationCountBadge, useGate } from '../../common';
 import {
   useCoreOrganization,
   useCoreOrganizationList,
@@ -72,33 +72,31 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
     );
   }),
 );
-const NotificationCountBadgeSwitcherTrigger = withGate(
-  () => {
-    /**
-     * Prefetch user invitations and suggestions
-     */
-    const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
-    const { organizationSettings } = useEnvironment();
-    const isDomainsEnabled = organizationSettings?.domains?.enabled;
-    const { membershipRequests } = useCoreOrganization({
-      membershipRequests: isDomainsEnabled || undefined,
-    });
 
-    const notificationCount =
-      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-      (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0);
-
-    return (
-      <NotificationCountBadge
-        containerSx={t => ({
-          marginLeft: `${t.space.$2}`,
-        })}
-        notificationCount={notificationCount}
-      />
-    );
-  },
-  {
-    // if the user is not able to accept a request we should not notify them
+const NotificationCountBadgeSwitcherTrigger = () => {
+  /**
+   * Prefetch user invitations and suggestions
+   */
+  const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+  const { organizationSettings } = useEnvironment();
+  const { isAuthorizedUser: canAcceptRequests } = useGate({
     permission: 'org:sys_memberships:manage',
-  },
-);
+  });
+  const isDomainsEnabled = organizationSettings?.domains?.enabled;
+  const { membershipRequests } = useCoreOrganization({
+    membershipRequests: (isDomainsEnabled && canAcceptRequests) || undefined,
+  });
+
+  const notificationCount =
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0);
+
+  return (
+    <NotificationCountBadge
+      containerSx={t => ({
+        marginLeft: `${t.space.$2}`,
+      })}
+      notificationCount={notificationCount}
+    />
+  );
+};