feat(console): Group seats assignment

apps/console/app/components/Billing/seating.tsx

@@ -3,6 +3,7 @@ import { Button } from '@proofzero/design-system'
 import { Text } from '@proofzero/design-system/src/atoms/text/Text'
 import { ToastWithLink } from '@proofzero/design-system/src/atoms/toast/ToastWithLink'
 import { Modal } from '@proofzero/design-system/src/molecules/modal/Modal'
+import { IDENTITY_GROUP_OPTIONS } from '@proofzero/platform/identity/src/constants'
 import { PaymentData } from '@proofzero/types/billing'
 import { IdentityGroupURNSpace } from '@proofzero/urns/identity-group'
 import { Link } from '@remix-run/react'
@@ -88,8 +89,10 @@ export const PurchaseGroupSeatingModal = ({
               weight="medium"
               className="text-gray-500 text-left mb-6"
             >
-              Each group has 3 free user seats. If you wish to add more than 3
-              members, additional seats need to be purchased.
+              Each group has {IDENTITY_GROUP_OPTIONS.maxFreeMembers} free user
+              seats. If you wish to add more than{' '}
+              {IDENTITY_GROUP_OPTIONS.maxFreeMembers} members, additional seats
+              need to be purchased.
             </Text>
           </div>
 
@@ -427,8 +430,10 @@ export const GroupSeatingCard = ({
               Additional User Seats
             </Text>
             <Text size="sm" weight="medium" className="text-gray-500">
-              Each group has 3 free user seats. If you wish to add more than 3
-              members, additional seats need to be purchased.
+              Each group has {IDENTITY_GROUP_OPTIONS.maxFreeMembers} free user
+              seats. If you wish to add more than{' '}
+              {IDENTITY_GROUP_OPTIONS.maxFreeMembers} members, additional seats
+              need to be purchased.
             </Text>
           </div>
 

apps/console/app/routes/__layout/billing/ops.ts

@@ -38,6 +38,7 @@ import {
   createOrUpdateSubscription,
   getCurrentAndUpcomingInvoices,
 } from '~/utils/billing'
+import { IDENTITY_GROUP_OPTIONS } from '@proofzero/platform/identity/src/constants'
 
 export enum TxProduct {
   Entitlements = 'entitlements',
@@ -108,7 +109,8 @@ export const loader = getRollupReqFunctionErrorWrapper(
         URN: groupURN,
       })
       const groupMemberCount = Math.max(
-        (targetGroup?.members.length ?? 0) - 3,
+        (targetGroup?.members.length ?? 0) -
+          IDENTITY_GROUP_OPTIONS.maxFreeMembers,
         0
       )
       const seats = seatQuery?.quantity ?? 0

apps/console/app/routes/__layout/groups/$groupID/index.tsx

@@ -59,6 +59,7 @@ import {
 } from '../../billing/ops'
 import { process3DSecureCard } from '~/utils/billing'
 import { useFeatureFlags } from '@proofzero/design-system/src/hooks/feature-flags'
+import { IDENTITY_GROUP_OPTIONS } from '@proofzero/platform/identity/src/constants'
 
 const accountTypes = [
   ...Object.values(EmailAccountType),
@@ -600,7 +601,8 @@ export default () => {
           title="Add Group Member"
           subtitle="Invite Members to the Group"
           onClick={
-            group.members.length + invitations.length < 3
+            group.members.length + invitations.length <
+            IDENTITY_GROUP_OPTIONS.maxFreeMembers + groupSeats.total
               ? () => setInviteModalOpen(true)
               : undefined
           }
@@ -778,7 +780,8 @@ export default () => {
 
               <Pill className="bg-gray-200 rounded-lg !pr-2">
                 <Text size="xs" weight="medium" className="text-gray-800">
-                  {group.members.length}/3
+                  {group.members.length}/
+                  {IDENTITY_GROUP_OPTIONS.maxFreeMembers + groupSeats.total}
                 </Text>
               </Pill>
             </div>
@@ -792,7 +795,13 @@ export default () => {
                   <Pill className="bg-white flex flex-row items-center rounded-xl">
                     <div className="w-2 h-2 rounded-full mr-2 bg-blue-300"></div>
                     <Text size="xs" weight="medium" className="text-gray-700">
-                      {`Free ${3 - Math.min(3, group.members.length)}`}
+                      {`Free ${
+                        IDENTITY_GROUP_OPTIONS.maxFreeMembers -
+                        Math.min(
+                          IDENTITY_GROUP_OPTIONS.maxFreeMembers,
+                          group.members.length
+                        )
+                      }`}
                     </Text>
                   </Pill>
 
@@ -817,9 +826,13 @@ export default () => {
 
             <div>
               <List
-                items={group.members.map((m) => ({
+                items={group.members.map((m, i) => ({
                   key: m.URN,
                   val: m,
+                  colorCode:
+                    i < IDENTITY_GROUP_OPTIONS.maxFreeMembers
+                      ? '#93C5FD'
+                      : '#4B5563',
                 }))}
                 itemRenderer={(item) => (
                   <article className="w-full flex flex-row items-center truncate">

packages/design-system/src/atoms/lists/List.tsx

@@ -6,6 +6,7 @@ type ListItem = {
   val: any
   disabled?: boolean
   onClick?: (id: Key) => void
+  colorCode?: string
 }
 
 export type ListProps<T extends ListItem> = {
@@ -26,6 +27,7 @@ export const List = <T extends ListItem>({
           key={item.key}
           id={item.key}
           disabled={item.disabled}
+          colorCode={item.colorCode}
           onClick={
             onItemClick != null
               ? (key) => onItemClick(items.find((i) => i.key === key))

packages/design-system/src/atoms/lists/ListItem.tsx

@@ -6,30 +6,39 @@ export type ListItemProps = {
   id: Key
   onClick?: (id: Key) => void
   disabled?: boolean
+  colorCode?: string
 }
 
 export const ListItem = ({
   id,
   children,
   disabled = false,
   onClick,
+  colorCode,
 }: ListItemProps) => {
   return (
     <div
       key={id}
-      className={classNames(
-        `border border-gray-300 rounded-md
-                py-2 mb-3 bg-white
-                flex flex-row items-center justify-between
-                shadow-sm px-4 truncate`,
-        {
-          'bg-gray-100': disabled === true,
-          'cursor-pointer hover:bg-[#F3F4F6]': onClick != null,
-        }
-      )}
-      onClick={() => onClick && onClick(id)}
+      className="border border-gray-300 rounded-md mb-3 shadow-sm truncate"
     >
-      <div className="flex flex-1 truncate">{children}</div>
+      <div
+        className={classNames(
+          `py-2 bg-white
+                flex flex-row items-center justify-between
+                px-4 truncate`,
+          {
+            'border-l-4 rounded-[5px]': colorCode != null,
+            'bg-gray-100': disabled === true,
+            'cursor-pointer hover:bg-[#F3F4F6]': onClick != null,
+          }
+        )}
+        style={{
+          ...(colorCode != null ? { borderLeftColor: colorCode } : {}),
+        }}
+        onClick={() => onClick && onClick(id)}
+      >
+        <div className="flex flex-1 truncate">{children}</div>
+      </div>
     </div>
   )
 }

platform/identity/src/jsonrpc/methods/identity-groups/inviteIdentityGroupMember.ts

@@ -77,6 +77,8 @@ export const inviteIdentityGroupMember = async ({
   const invitations = await node.class.getInvitations()
   const invitationCount = invitations.length
 
+  const seats = await node.class.getSeats()
+
   const { edges: groupMembershipEdges } = await caller.edges.getEdges({
     query: {
       tag: EDGE_MEMBER_OF_IDENTITY_GROUP,
@@ -87,8 +89,8 @@ export const inviteIdentityGroupMember = async ({
   })
 
   if (
-    invitationCount + groupMembershipEdges.length >
-    IDENTITY_GROUP_OPTIONS.maxFreeMembers
+    invitationCount + groupMembershipEdges.length >=
+    IDENTITY_GROUP_OPTIONS.maxFreeMembers + (seats?.quantity ?? 0)
   ) {
     throw new BadRequestError({
       message: 'Max members reached',