From f44542d4097f5df9bf8cdbd030b134bc34d30331 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Wed, 19 Mar 2025 14:25:01 +0000
Subject: [PATCH] SeatTypeDisplay

---
 .../workspaces/members/SeatTypeDisplay.vue    | 21 +++++++++++++++++++
 .../workspaces/members/new/GuestsTable.vue    | 11 ++--------
 .../workspaces/members/new/InvitesTable.vue   | 11 +---------
 .../workspaces/members/new/MembersTable.vue   | 20 ++++--------------
 4 files changed, 28 insertions(+), 35 deletions(-)
 create mode 100644 packages/frontend-2/components/settings/workspaces/members/SeatTypeDisplay.vue

diff --git a/packages/frontend-2/components/settings/workspaces/members/SeatTypeDisplay.vue b/packages/frontend-2/components/settings/workspaces/members/SeatTypeDisplay.vue
new file mode 100644
index 000000000..a9c90cee2
--- /dev/null
+++ b/packages/frontend-2/components/settings/workspaces/members/SeatTypeDisplay.vue
@@ -0,0 +1,21 @@
+<template>
+  <span class="text-foreground">
+    <div
+      v-tippy="description"
+      class="border-b border-dashed border-outline-5 max-w-max select-none capitalize"
+    >
+      {{ seatType }}
+    </div>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { WORKSPACE_SEAT_TYPE_DESCRIPTIONS } from '~/lib/settings/helpers/types'
+import type { WorkspaceSeatType } from '~/lib/common/generated/gql/graphql'
+
+const props = defineProps<{
+  seatType: WorkspaceSeatType
+}>()
+
+const description = computed(() => WORKSPACE_SEAT_TYPE_DESCRIPTIONS[props.seatType])
+</script>
diff --git a/packages/frontend-2/components/settings/workspaces/members/new/GuestsTable.vue b/packages/frontend-2/components/settings/workspaces/members/new/GuestsTable.vue
index 16a6590eb..fb44d29dc 100644
--- a/packages/frontend-2/components/settings/workspaces/members/new/GuestsTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/new/GuestsTable.vue
@@ -52,14 +52,7 @@
         <span class="text-body-xs text-foreground">EMAIL</span>
       </template>
       <template #seat="{ item }">
-        <span class="text-foreground">
-          <div
-            v-tippy="`Explainer`"
-            class="border-b border-dashed border-outline-5 max-w-max select-none capitalize"
-          >
-            {{ item.seatType }}
-          </div>
-        </span>
+        <SeatTypeDisplay :seat-type="item.seatType" />
       </template>
       <!-- TODO: Add joined at date -->
       <template #joined="">
@@ -92,7 +85,7 @@ import { Roles, type MaybeNullOrUndefined } from '@speckle/shared'
 import { settingsWorkspacesMembersSearchQuery } from '~~/lib/settings/graphql/queries'
 import { useQuery } from '@vue/apollo-composable'
 import { LEARN_MORE_ROLES_SEATS_URL } from '~/lib/settings/helpers/constants'
-
+import SeatTypeDisplay from '../SeatTypeDisplay.vue'
 graphql(`
   fragment SettingsWorkspacesMembersNewGuestsTable_WorkspaceCollaborator on WorkspaceCollaborator {
     id
diff --git a/packages/frontend-2/components/settings/workspaces/members/new/InvitesTable.vue b/packages/frontend-2/components/settings/workspaces/members/new/InvitesTable.vue
index 5c829124d..4fa489d17 100644
--- a/packages/frontend-2/components/settings/workspaces/members/new/InvitesTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/new/InvitesTable.vue
@@ -48,16 +48,7 @@
         </div>
       </template>
       <!-- TODO: Add seat type -->
-      <template #seat="">
-        <span class="text-foreground">
-          <div
-            v-tippy="`Explainer`"
-            class="border-b border-dashed border-outline-5 max-w-max select-none capitalize"
-          >
-            SEAT TYPE
-          </div>
-        </span>
-      </template>
+      <template #seat>SEAT TYPE</template>
       <template #lastRemindedOn="{ item }">
         <span class="text-body-xs text-foreground-2">
           {{ formattedFullDate(item.updatedAt) }}
diff --git a/packages/frontend-2/components/settings/workspaces/members/new/MembersTable.vue b/packages/frontend-2/components/settings/workspaces/members/new/MembersTable.vue
index d2b9e2890..337a1c2a3 100644
--- a/packages/frontend-2/components/settings/workspaces/members/new/MembersTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/new/MembersTable.vue
@@ -23,14 +23,13 @@
     <LayoutTable
       class="mt-6 mb-12"
       :columns="[
-        { id: 'name', header: 'Name', classes: 'col-span-3' },
-        { id: 'email', header: 'Email', classes: 'col-span-3' },
+        { id: 'name', header: 'Name', classes: 'col-span-4' },
         { id: 'seat', header: 'Seat', classes: 'col-span-2' },
         { id: 'joined', header: 'Joined', classes: 'col-span-3' },
         {
           id: 'actions',
           header: '',
-          classes: 'col-span-1 flex items-center justify-end'
+          classes: 'col-span-3 flex items-center justify-end'
         }
       ]"
       :items="members"
@@ -69,20 +68,8 @@
           </div>
         </div>
       </template>
-
-      <template #email="">
-        <!-- TODO: Add email -->
-        <span class="text-body-xs text-foreground">EMAIL</span>
-      </template>
       <template #seat="{ item }">
-        <span class="text-foreground">
-          <div
-            v-tippy="`Explainer`"
-            class="border-b border-dashed border-outline-5 max-w-max select-none capitalize"
-          >
-            {{ item.seatType }}
-          </div>
-        </span>
+        <SeatTypeDisplay :seat-type="item.seatType" />
       </template>
       <!-- TODO: Add joined at date -->
       <template #joined="">
@@ -107,6 +94,7 @@ import type { SettingsWorkspacesNewMembersTable_WorkspaceFragment } from '~~/lib
 import { graphql } from '~/lib/common/generated/gql'
 import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
 import { LEARN_MORE_ROLES_SEATS_URL } from '~/lib/settings/helpers/constants'
+import SeatTypeDisplay from '../SeatTypeDisplay.vue'
 
 export type UserItem = (typeof members)['value'][0]