feat: invite member upsell for single-seat plans (#8801)

## Summary - Show an upsell dialog when single-seat plan users try to invite members, with a banner on the members panel directing them to upgrade. - Misc fixes for member max seat display ## Changes - **What**: `InviteMemberUpsellDialogContent.vue`, `MembersPanelContent.vue`, `WorkspacePanelContent.vue` ## Screenshots <img width="2730" height="1907" alt="image" src="https://github.com/user-attachments/assets/e39a23be-8533-4ebb-a4ae-2797fc382bc2" /> <img width="2730" height="1907" alt="image" src="https://github.com/user-attachments/assets/bec55867-1088-4d3a-b308-5d5cce64c8ae" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8801-feat-invite-member-upsell-for-single-seat-plans-3046d73d365081349b09fe1d4dc572e8) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com>
2026-03-03 20:20:03 +00:00 · 2026-02-11 21:15:59 -08:00
parent 0d64d503ec
commit 85ae0a57c3
16 changed files with 411 additions and 129 deletions
--- a/src/components/dialog/content/setting/MembersPanelContent.vue
+++ b/src/components/dialog/content/setting/MembersPanelContent.vue
@@ -6,14 +6,15 @@
      <!-- Section Header -->
      <div class="flex w-full items-center gap-9">
        <div class="flex min-w-0 flex-1 items-baseline gap-2">
-          <span
-            v-if="uiConfig.showMembersList"
-            class="text-base font-semibold text-base-foreground"
-          >
+          <span class="text-base font-semibold text-base-foreground">
            <template v-if="activeView === 'active'">
              {{
                $t('workspacePanel.members.membersCount', {
-                  count: members.length
+                  count:
+                    isSingleSeatPlan || isPersonalWorkspace
+                      ? 1
+                      : members.length,
+                  maxSeats: maxSeats
                })
              }}
            </template>
@@ -27,7 +28,10 @@
            </template>
          </span>
        </div>
-        <div v-if="uiConfig.showSearch" class="flex items-start gap-2">
+        <div
+          v-if="uiConfig.showSearch && !isSingleSeatPlan"
+          class="flex items-start gap-2"
+        >
          <SearchBox
            v-model="searchQuery"
            :placeholder="$t('g.search')"
@@ -45,14 +49,16 @@
          :class="
            cn(
              'grid w-full items-center py-2',
-              activeView === 'pending'
-                ? uiConfig.pendingGridCols
-                : uiConfig.headerGridCols
+              isSingleSeatPlan
+                ? 'grid-cols-1 py-0'
+                : activeView === 'pending'
+                  ? uiConfig.pendingGridCols
+                  : uiConfig.headerGridCols
            )
          "
        >
          <!-- Tab buttons in first column -->
-          <div class="flex items-center gap-2">
+          <div v-if="!isSingleSeatPlan" class="flex items-center gap-2">
            <Button
              :variant="
                activeView === 'active' ? 'secondary' : 'muted-textonly'
@@ -101,17 +107,19 @@
            <div />
          </template>
          <template v-else>
-            <Button
-              variant="muted-textonly"
-              size="sm"
-              class="justify-end"
-              @click="toggleSort('joinDate')"
-            >
-              {{ $t('workspacePanel.members.columns.joinDate') }}
-              <i class="icon-[lucide--chevrons-up-down] size-4" />
-            </Button>
-            <!-- Empty cell for action column header (OWNER only) -->
-            <div v-if="permissions.canRemoveMembers" />
+            <template v-if="!isSingleSeatPlan">
+              <Button
+                variant="muted-textonly"
+                size="sm"
+                class="justify-end"
+                @click="toggleSort('joinDate')"
+              >
+                {{ $t('workspacePanel.members.columns.joinDate') }}
+                <i class="icon-[lucide--chevrons-up-down] size-4" />
+              </Button>
+              <!-- Empty cell for action column header (OWNER only) -->
+              <div v-if="permissions.canRemoveMembers" />
+            </template>
          </template>
        </div>

@@ -166,7 +174,7 @@
                :class="
                  cn(
                    'grid w-full items-center rounded-lg p-2',
-                    uiConfig.membersGridCols,
+                    isSingleSeatPlan ? 'grid-cols-1' : uiConfig.membersGridCols,
                    index % 2 === 1 && 'bg-secondary-background/50'
                  )
                "
@@ -206,14 +214,14 @@
                </div>
                <!-- Join date -->
                <span
-                  v-if="uiConfig.showDateColumn"
+                  v-if="uiConfig.showDateColumn && !isSingleSeatPlan"
                  class="text-sm text-muted-foreground text-right"
                >
                  {{ formatDate(member.joinDate) }}
                </span>
                <!-- Remove member action (OWNER only, can't remove yourself) -->
                <div
-                  v-if="permissions.canRemoveMembers"
+                  v-if="permissions.canRemoveMembers && !isSingleSeatPlan"
                  class="flex items-center justify-end"
                >
                  <Button
@@ -237,8 +245,29 @@
            </template>
          </template>

+          <!-- Upsell Banner -->
+          <div
+            v-if="isSingleSeatPlan"
+            class="flex items-center gap-2 rounded-xl border bg-secondary-background border-border-default px-4 py-3 mt-4 justify-center"
+          >
+            <p class="m-0 text-sm text-foreground">
+              {{
+                isActiveSubscription
+                  ? $t('workspacePanel.members.upsellBannerUpgrade')
+                  : $t('workspacePanel.members.upsellBannerSubscribe')
+              }}
+            </p>
+            <Button
+              variant="muted-textonly"
+              class="cursor-pointer underline text-sm"
+              @click="showSubscriptionDialog()"
+            >
+              {{ $t('workspacePanel.members.viewPlans') }}
+            </Button>
+          </div>
+
          <!-- Pending Invites -->
-          <template v-else>
+          <template v-if="activeView === 'pending'">
            <div
              v-for="(invite, index) in filteredPendingInvites"
              :key="invite.id"
@@ -342,6 +371,8 @@ import SearchBox from '@/components/common/SearchBox.vue'
 import UserAvatar from '@/components/common/UserAvatar.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import type {
  PendingInvite,
@@ -367,6 +398,27 @@ const {
 } = storeToRefs(workspaceStore)
 const { copyInviteLink } = workspaceStore
 const { permissions, uiConfig } = useWorkspaceUI()
+const {
+  isActiveSubscription,
+  subscription,
+  showSubscriptionDialog,
+  getMaxSeats
+} = useBillingContext()
+
+const maxSeats = computed(() => {
+  if (isPersonalWorkspace.value) return 1
+  const tier = subscription.value?.tier
+  if (!tier) return 1
+  const tierKey = TIER_TO_KEY[tier]
+  if (!tierKey) return 1
+  return getMaxSeats(tierKey)
+})
+
+const isSingleSeatPlan = computed(() => {
+  if (isPersonalWorkspace.value) return false
+  if (!isActiveSubscription.value) return true
+  return maxSeats.value <= 1
+})

 const searchQuery = ref('')
 const activeView = ref<'active' | 'pending'>('active')
--- a/src/components/dialog/content/setting/WorkspacePanelContent.vue
+++ b/src/components/dialog/content/setting/WorkspacePanelContent.vue
@@ -55,8 +55,12 @@
          "
          variant="secondary"
          size="lg"
-          :disabled="isInviteLimitReached"
-          :class="isInviteLimitReached && 'opacity-50 cursor-not-allowed'"
+          :disabled="!isSingleSeatPlan && isInviteLimitReached"
+          :class="
+            !isSingleSeatPlan &&
+            isInviteLimitReached &&
+            'opacity-50 cursor-not-allowed'
+          "
          :aria-label="$t('workspacePanel.inviteMember')"
          @click="handleInviteMember"
        >
@@ -129,6 +133,8 @@ import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
 import MembersPanelContent from '@/components/dialog/content/setting/MembersPanelContent.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { buttonVariants } from '@/components/ui/button/button.variants'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
 import SubscriptionPanelContentWorkspace from '@/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue'
 import { cn } from '@/utils/tailwindUtil'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
@@ -144,8 +150,19 @@ const {
  showLeaveWorkspaceDialog,
  showDeleteWorkspaceDialog,
  showInviteMemberDialog,
+  showInviteMemberUpsellDialog,
  showEditWorkspaceDialog
 } = useDialogService()
+const { isActiveSubscription, subscription, getMaxSeats } = useBillingContext()
+
+const isSingleSeatPlan = computed(() => {
+  if (!isActiveSubscription.value) return true
+  const tier = subscription.value?.tier
+  if (!tier) return true
+  const tierKey = TIER_TO_KEY[tier]
+  if (!tierKey) return true
+  return getMaxSeats(tierKey) <= 1
+})
 const workspaceStore = useTeamWorkspaceStore()
 const {
  workspaceName,
@@ -187,11 +204,16 @@ const deleteTooltip = computed(() => {
 })

 const inviteTooltip = computed(() => {
+  if (isSingleSeatPlan.value) return null
  if (!isInviteLimitReached.value) return null
  return t('workspacePanel.inviteLimitReached')
 })

 function handleInviteMember() {
+  if (isSingleSeatPlan.value) {
+    showInviteMemberUpsellDialog()
+    return
+  }
  if (isInviteLimitReached.value) return
  showInviteMemberDialog()
 }
--- a/src/components/dialog/content/workspace/InviteMemberUpsellDialogContent.vue
+++ b/src/components/dialog/content/workspace/InviteMemberUpsellDialogContent.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="flex w-full max-w-[512px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <!-- Header -->
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">
+        {{
+          isActiveSubscription
+            ? $t('workspacePanel.inviteUpsellDialog.titleSingleSeat')
+            : $t('workspacePanel.inviteUpsellDialog.titleNotSubscribed')
+        }}
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        :aria-label="$t('g.close')"
+        @click="onDismiss"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col gap-4 px-4 py-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{
+          isActiveSubscription
+            ? $t('workspacePanel.inviteUpsellDialog.messageSingleSeat')
+            : $t('workspacePanel.inviteUpsellDialog.messageNotSubscribed')
+        }}
+      </p>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <Button variant="muted-textonly" @click="onDismiss">
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button variant="primary" size="lg" @click="onUpgrade">
+        {{
+          isActiveSubscription
+            ? $t('workspacePanel.inviteUpsellDialog.upgradeToCreator')
+            : $t('workspacePanel.inviteUpsellDialog.viewPlans')
+        }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const dialogStore = useDialogStore()
+const { isActiveSubscription, showSubscriptionDialog } = useBillingContext()
+
+function onDismiss() {
+  dialogStore.closeDialog({ key: 'invite-member-upsell' })
+}
+
+function onUpgrade() {
+  dialogStore.closeDialog({ key: 'invite-member-upsell' })
+  showSubscriptionDialog()
+}
+</script>
--- a/src/components/toast/InviteAcceptedToast.vue
+++ b/src/components/toast/InviteAcceptedToast.vue
@@ -0,0 +1,42 @@
+<template>
+  <Toast group="invite-accepted" position="top-right">
+    <template #message="slotProps">
+      <div class="flex items-center gap-2 justify-between w-full">
+        <div class="flex flex-col justify-start">
+          <div class="text-base">
+            {{ slotProps.message.summary }}
+          </div>
+          <div class="mt-1 text-sm text-foreground">
+            {{ slotProps.message.detail.text }} <br />
+            {{ slotProps.message.detail.workspaceName }}
+          </div>
+        </div>
+        <Button
+          size="md"
+          variant="inverted"
+          @click="viewWorkspace(slotProps.message.detail.workspaceId)"
+        >
+          {{ t('workspace.viewWorkspace') }}
+        </Button>
+      </div>
+    </template>
+  </Toast>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue'
+import Toast from 'primevue/toast'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useWorkspaceSwitch } from '@/platform/auth/workspace/useWorkspaceSwitch'
+
+const { t } = useI18n()
+const toast = useToast()
+const { switchWithConfirmation } = useWorkspaceSwitch()
+
+function viewWorkspace(workspaceId: string) {
+  void switchWithConfirmation(workspaceId)
+  toast.removeGroup('invite-accepted')
+}
+</script>