✨ (billing) Implement custom plan

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

@@ -1,4 +1,6 @@
-import { Stack } from '@chakra-ui/react'
+import { HStack, Stack, Text } from '@chakra-ui/react'
+import { StripeClimateLogo } from 'assets/logos/StripeClimateLogo'
+import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { ChangePlanForm } from 'components/shared/ChangePlanForm'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Plan } from 'db'
@@ -26,7 +28,22 @@ export const BillingContent = () => {
             })
           }
         />
-        {workspace.plan !== Plan.LIFETIME &&
+        <HStack maxW="500px">
+          <StripeClimateLogo />
+          <Text fontSize="xs" color="gray.500">
+            Typebot is contributing 1% of your subscription to remove CO₂ from
+            the atmosphere.{' '}
+            <NextChakraLink
+              href="https://climate.stripe.com/5VCRAq"
+              isExternal
+              textDecor="underline"
+            >
+              More info.
+            </NextChakraLink>
+          </Text>
+        </HStack>
+        {workspace.plan !== Plan.CUSTOM &&
+          workspace.plan !== Plan.LIFETIME &&
           workspace.plan !== Plan.OFFERED && <ChangePlanForm />}
       </Stack>
 

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
+  )
 }