✨ (billing) Implement custom plan

apps/builder/components/dashboard/WorkspaceSettingsModal/MembersList/AddMemberForm.tsx

@@ -49,7 +49,7 @@ export const AddMemberForm = ({
   }
 
   return (
-    <HStack as="form" onSubmit={handleInvitationSubmit} pb="4">
+    <HStack as="form" onSubmit={handleInvitationSubmit}>
       <Input
         placeholder="colleague@company.com"
         name="inviteEmail"

apps/builder/components/dashboard/WorkspaceSettingsModal/MembersList/MembersList.tsx

@@ -1,4 +1,10 @@
-import { HStack, SkeletonCircle, SkeletonText, Stack } from '@chakra-ui/react'
+import {
+  Heading,
+  HStack,
+  SkeletonCircle,
+  SkeletonText,
+  Stack,
+} from '@chakra-ui/react'
 import { UnlockPlanInfo } from 'components/shared/Info'
 import { useUser } from 'contexts/UserContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
@@ -12,6 +18,7 @@ import {
   updateMember,
   useMembers,
 } from 'services/workspace'
+import { getSeatsLimit } from 'utils'
 import { AddMemberForm } from './AddMemberForm'
 import { checkCanInviteMember } from './helpers'
 import { MemberItem } from './MemberItem'
@@ -77,9 +84,12 @@ export const MembersList = () => {
     })
   }
 
+  const currentMembersCount = members.length + invitations.length
+
   const canInviteNewMember = checkCanInviteMember({
     plan: workspace?.plan,
-    currentMembersCount: [...members, ...invitations].length,
+    customSeatsLimit: workspace?.customSeatsLimit,
+    currentMembersCount,
   })
 
   return (
@@ -92,6 +102,11 @@ export const MembersList = () => {
         `}
         />
       )}
+      {workspace && (
+        <Heading fontSize="2xl">
+          Members ({currentMembersCount}/{getSeatsLimit(workspace)})
+        </Heading>
+      )}
       {workspace?.id && canEdit && (
         <AddMemberForm
           workspaceId={workspace.id}

apps/builder/components/dashboard/WorkspaceSettingsModal/MembersList/helpers.ts

@@ -1,14 +1,19 @@
 import { Plan } from 'db'
-import { seatsLimit } from 'utils'
+import { getSeatsLimit } from 'utils'
 
 export function checkCanInviteMember({
   plan,
+  customSeatsLimit,
   currentMembersCount,
 }: {
   plan?: Plan
+  customSeatsLimit?: number | null
   currentMembersCount?: number
 }) {
   if (!plan || !currentMembersCount) return false
 
-  return seatsLimit[plan].totalIncluded > currentMembersCount
+  return (
+    getSeatsLimit({ plan, customSeatsLimit: customSeatsLimit ?? null }) >
+    currentMembersCount
+  )
 }