Merge pull request #1529 from AshishViradiya153/171/addUsers

Added button in side bar for add user

Author: mfts

components/sidebar/team-switcher.tsx

@@ -2,15 +2,15 @@
 
 import * as React from "react";
 
-import { ChevronsUpDown, GalleryVerticalEndIcon, Plus } from "lucide-react";
+import { useLimits } from "@/ee/limits/swr-handler";
+import { PlanEnum } from "@/ee/stripe/constants";
+import { ChevronsUpDown, UserRoundPlusIcon } from "lucide-react";
 
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
@@ -23,6 +23,9 @@ import {
 import { Team } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
+import { AddSeatModal } from "../billing/add-seat-modal";
+import { UpgradePlanModal } from "../billing/upgrade-plan-modal";
+import { AddTeamMembers } from "../teams/add-team-member-modal";
 import { Avatar, AvatarFallback } from "../ui/avatar";
 
 export function TeamSwitcher({
@@ -34,7 +37,12 @@ export function TeamSwitcher({
   teams: Team[];
   setCurrentTeam: (team: Team) => void;
 }) {
+  const [isTeamMemberInviteModalOpen, setTeamMemberInviteModalOpen] =
+    React.useState<boolean>(false);
+  const [isAddSeatModalOpen, setAddSeatModalOpen] =
+    React.useState<boolean>(false);
   const { isMobile } = useSidebar();
+  const { canAddUsers } = useLimits();
 
   const switchTeam = (team: Team) => {
     localStorage.setItem("currentTeamId", team.id);
@@ -44,13 +52,13 @@ export function TeamSwitcher({
   if (!activeTeam) return null;
 
   return (
-    <SidebarMenu>
+    <SidebarMenu className="flex flex-row items-center gap-1 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-1.5">
       <SidebarMenuItem>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground border"
+              className="border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <Avatar className="size-8 rounded">
                 <AvatarFallback className="rounded">
@@ -103,6 +111,42 @@ export function TeamSwitcher({
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>
+      <SidebarMenuItem>
+        {activeTeam.plan?.includes("free") ? (
+          <UpgradePlanModal
+            clickedPlan={PlanEnum.Pro}
+            trigger={"invite_team_members"}
+          >
+            <SidebarMenuButton
+              size="lg"
+              className="size-12 justify-center border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
+            >
+              <UserRoundPlusIcon className="!size-5" strokeWidth={1.5} />
+            </SidebarMenuButton>
+          </UpgradePlanModal>
+        ) : canAddUsers ? (
+          <AddTeamMembers
+            open={isTeamMemberInviteModalOpen}
+            setOpen={setTeamMemberInviteModalOpen}
+          >
+            <SidebarMenuButton
+              size="lg"
+              className="size-12 justify-center border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
+            >
+              <UserRoundPlusIcon className="!size-5" strokeWidth={1.5} />
+            </SidebarMenuButton>
+          </AddTeamMembers>
+        ) : (
+          <AddSeatModal open={isAddSeatModalOpen} setOpen={setAddSeatModalOpen}>
+            <SidebarMenuButton
+              size="lg"
+              className="size-12 justify-center border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
+            >
+              <UserRoundPlusIcon className="!size-5" strokeWidth={1.5} />
+            </SidebarMenuButton>
+          </AddSeatModal>
+        )}
+      </SidebarMenuItem>
     </SidebarMenu>
   );
 }

ee/limits/server.ts

@@ -74,15 +74,9 @@ export async function getLimits({
       _count: {
         select: {
           documents: true,
-        },
-      },
-      documents: {
-        select: {
-          _count: {
-            select: {
-              links: true,
-            },
-          },
+          links: true,
+          users: true,
+          invitations: true,
         },
       },
     },
@@ -93,10 +87,8 @@ export async function getLimits({
   }
 
   const documentCount = team._count.documents;
-  const linkCount = team.documents.reduce(
-    (sum, doc) => sum + doc._count.links,
-    0,
-  );
+  const linkCount = team._count.links;
+  const userCount = team._count.users + team._count.invitations;
 
   // parse the limits json with zod and return the limits
   // {datarooms: 1, users: 1, domains: 1, customDomainOnPro: boolean, customDomainInDataroom: boolean}
@@ -108,7 +100,7 @@ export async function getLimits({
     if (isFreePlan(team.plan)) {
       return {
         ...parsedData,
-        usage: { documents: documentCount, links: linkCount },
+        usage: { documents: documentCount, links: linkCount, users: userCount },
       };
     } else {
       return {
@@ -117,7 +109,7 @@ export async function getLimits({
         links: parsedData.links === 50 ? Infinity : parsedData.links,
         documents:
           parsedData.documents === 50 ? Infinity : parsedData.documents,
-        usage: { documents: documentCount, links: linkCount },
+        usage: { documents: documentCount, links: linkCount, users: userCount },
       };
     }
   } catch (error) {
@@ -127,7 +119,7 @@ export async function getLimits({
 
     return {
       ...defaultLimits,
-      usage: { documents: documentCount, links: linkCount },
+      usage: { documents: documentCount, links: linkCount, users: userCount },
     };
   }
 }

ee/limits/swr-handler.ts

@@ -16,6 +16,7 @@ export type LimitProps = {
   usage: {
     documents: number;
     links: number;
+    users: number;
   };
   fileSizeLimits:
     | {
@@ -44,11 +45,13 @@ export function useLimits() {
     ? data?.usage?.documents < data?.documents
     : true;
   const canAddLinks = data?.links ? data?.usage?.links < data?.links : true;
+  const canAddUsers = data?.users ? data?.usage?.users < data?.users : true;
 
   return {
     limits: data,
     canAddDocuments,
     canAddLinks,
+    canAddUsers,
     error,
     loading: !data && !error,
   };