From 390c1d710d410af3374beee9d15f3598c4e722c8 Mon Sep 17 00:00:00 2001
From: Adam Chmara <adam.chmara1@gmail.com>
Date: Tue, 15 Oct 2024 11:05:24 +0200
Subject: [PATCH] feat(web): team member limit nudge

---
 .../components/CustomOrganizationProfile.tsx  | 52 ++++++++-----------
 .../src/ee/clerk/pages/ManageAccountPage.tsx  | 13 ++---
 2 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/apps/web/src/ee/clerk/components/CustomOrganizationProfile.tsx b/apps/web/src/ee/clerk/components/CustomOrganizationProfile.tsx
index 5d455008db6..1988026d8f1 100644
--- a/apps/web/src/ee/clerk/components/CustomOrganizationProfile.tsx
+++ b/apps/web/src/ee/clerk/components/CustomOrganizationProfile.tsx
@@ -1,36 +1,25 @@
-import { OrganizationProfile } from '@clerk/clerk-react';
-import { FC } from 'react';
+import { OrganizationProfile, useOrganization } from '@clerk/clerk-react';
+import { OrganizationProfileTheme } from '@clerk/types';
+import { ROUTES } from '../../../constants/routes';
 
-// Hides OrganizationProfile sidebar + makes it fit the parent container
-const OrganizationProfileAppearance = {
-  elements: {
-    pageScrollBox: {
-      padding: 0,
-    },
-    cardBox: {
-      display: 'block',
-      width: '100%',
-      height: '100%',
-      boxShadow: 'none',
-    },
-    navbar: {
-      display: 'none',
-    },
-    rootBox: {
-      width: '100%',
-    },
-  },
-};
-
-interface CustomOrganizationProfileProps {
+// Hacky workaround to embed organization profile in user profile page
+export const CustomOrganizationProfile = ({
+  appearance,
+  firstItem,
+}: {
+  appearance: OrganizationProfileTheme;
   firstItem: 'general' | 'members';
-}
+}) => {
+  const { organization } = useOrganization();
 
-// Hacky workaround to embed organization profile in user profile page
-export const CustomOrganizationProfile: FC<CustomOrganizationProfileProps> = ({ firstItem }) => {
   if (firstItem === 'general') {
     return (
-      <OrganizationProfile appearance={OrganizationProfileAppearance}>
+      <OrganizationProfile
+        appearance={appearance}
+        // @ts-ignore
+        __unstable_manageBillingUrl={ROUTES.MANAGE_ACCOUNT_BILLING}
+        __unstable_manageBillingMembersLimit={organization?.maxAllowedMemberships}
+      >
         <OrganizationProfile.Page label="general" />
         <OrganizationProfile.Page label="members" />
       </OrganizationProfile>
@@ -38,7 +27,12 @@ export const CustomOrganizationProfile: FC<CustomOrganizationProfileProps> = ({
   }
 
   return (
-    <OrganizationProfile appearance={OrganizationProfileAppearance}>
+    <OrganizationProfile
+      appearance={appearance}
+      // @ts-ignore
+      __unstable_manageBillingUrl={ROUTES.MANAGE_ACCOUNT_BILLING}
+      __unstable_manageBillingMembersLimit={organization?.maxAllowedMemberships}
+    >
       <OrganizationProfile.Page label="members" />
       <OrganizationProfile.Page label="general" />
     </OrganizationProfile>
diff --git a/apps/web/src/ee/clerk/pages/ManageAccountPage.tsx b/apps/web/src/ee/clerk/pages/ManageAccountPage.tsx
index b789ef8f9d9..fa77f5151cf 100644
--- a/apps/web/src/ee/clerk/pages/ManageAccountPage.tsx
+++ b/apps/web/src/ee/clerk/pages/ManageAccountPage.tsx
@@ -10,11 +10,11 @@ import {
 } from '@novu/novui/icons';
 import { FeatureFlagsKeysEnum } from '@novu/shared';
 import { useNavigate, useParams } from 'react-router-dom';
+import { Title } from '@novu/novui';
 import { MANAGE_ACCOUNT_ROUTE_SEGMENTS, ROUTES } from '../../../constants/routes';
 import { useFeatureFlag } from '../../../hooks/useFeatureFlag';
 import { BrandingPage } from '../../../pages/brand/BrandingPage';
 import { BillingPage } from '../../billing/pages/BillingPage';
-import { Title } from '@novu/novui';
 import {
   billingTitle,
   clerkComponentAppearance,
@@ -24,6 +24,7 @@ import {
   tabsStyles,
   titleTab,
 } from './ManageAccountPage.styles';
+import { CustomOrganizationProfile } from '../components/CustomOrganizationProfile';
 
 export default function ManageAccountPage() {
   const navigate = useNavigate();
@@ -108,16 +109,10 @@ export default function ManageAccountPage() {
           </UserProfile>
         </Tabs.Panel>
         <Tabs.Panel value={MANAGE_ACCOUNT_ROUTE_SEGMENTS.ORGANIZATION}>
-          <OrganizationProfile appearance={clerkComponentAppearance}>
-            <OrganizationProfile.Page label="general" />
-            <OrganizationProfile.Page label="members" />
-          </OrganizationProfile>
+          <CustomOrganizationProfile appearance={clerkComponentAppearance} firstItem="general" />
         </Tabs.Panel>
         <Tabs.Panel value={MANAGE_ACCOUNT_ROUTE_SEGMENTS.TEAM_MEMBERS}>
-          <OrganizationProfile appearance={clerkComponentAppearance}>
-            <OrganizationProfile.Page label="members" />
-            <OrganizationProfile.Page label="general" />
-          </OrganizationProfile>
+          <CustomOrganizationProfile appearance={clerkComponentAppearance} firstItem="members" />
         </Tabs.Panel>
         {!isV2Enabled && (
           <Tabs.Panel value={MANAGE_ACCOUNT_ROUTE_SEGMENTS.BRANDING}>