fix: credit display and top up and other UI display if personal membe… (#8784)

## Summary Consolidate scattered role checks for credits, top-up, and subscribe buttons into centralized workspace permissions (canTopUp, canManageSubscription), ensuring "Add Credits" requires an active subscription, subscribe buttons only appear when needed, and team members see appropriately restricted billing UI. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8784-fix-credit-display-and-top-up-and-other-UI-display-if-personal-membe-3036d73d3650810fbc2de084f738943c) by [Unito](https://www.unito.io)
2026-02-19 14:30:07 +00:00 · 2026-02-11 14:26:35 -08:00
parent adcb663b3e
commit dd1fefe843
4 changed files with 107 additions and 104 deletions
--- a/src/components/dialog/content/workspace/InviteMemberDialogContent.vue
+++ b/src/components/dialog/content/workspace/InviteMemberDialogContent.vue
@@ -70,31 +70,17 @@
            @click="onSelectLink"
          />
          <div
-            class="absolute right-4 top-2 cursor-pointer"
+            class="absolute right-3 top-2.5 cursor-pointer"
            @click="onCopyLink"
          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-            >
-              <g clip-path="url(#clip0_2127_14348)">
-                <path
-                  d="M2.66634 10.6666C1.93301 10.6666 1.33301 10.0666 1.33301 9.33325V2.66659C1.33301 1.93325 1.93301 1.33325 2.66634 1.33325H9.33301C10.0663 1.33325 10.6663 1.93325 10.6663 2.66659M6.66634 5.33325H13.333C14.0694 5.33325 14.6663 5.93021 14.6663 6.66658V13.3333C14.6663 14.0696 14.0694 14.6666 13.333 14.6666H6.66634C5.92996 14.6666 5.33301 14.0696 5.33301 13.3333V6.66658C5.33301 5.93021 5.92996 5.33325 6.66634 5.33325Z"
-                  stroke="white"
-                  stroke-width="1.3"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_2127_14348">
-                  <rect width="16" height="16" fill="white" />
-                </clipPath>
-              </defs>
-            </svg>
+            <i
+              :class="
+                cn(
+                  'pi size-4',
+                  justCopied ? 'pi-check text-green-500' : 'pi-copy'
+                )
+              "
+            />
          </div>
        </div>
      </div>
@@ -118,6 +104,7 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useDialogStore } from '@/stores/dialogStore'

@@ -130,6 +117,7 @@ const loading = ref(false)
 const email = ref('')
 const step = ref<'email' | 'link'>('email')
 const generatedLink = ref('')
+const justCopied = ref(false)

 const isValidEmail = computed(() => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
@@ -161,6 +149,10 @@ async function onCreateLink() {
 async function onCopyLink() {
  try {
    await navigator.clipboard.writeText(generatedLink.value)
+    justCopied.value = true
+    setTimeout(() => {
+      justCopied.value = false
+    }, 759)
    toast.add({
      severity: 'success',
      summary: t('workspacePanel.inviteMemberDialog.linkCopied'),
--- a/src/components/topbar/CurrentUserPopoverWorkspace.vue
+++ b/src/components/topbar/CurrentUserPopoverWorkspace.vue
@@ -55,63 +55,61 @@
      />
    </Popover>

-    <!-- Credits Section (PERSONAL and OWNER only) -->
-    <template v-if="showCreditsSection">
-      <div class="flex items-center gap-2 px-4 py-2">
-        <i class="icon-[lucide--component] text-sm text-amber-400" />
-        <Skeleton
-          v-if="isLoadingBalance"
-          width="4rem"
-          height="1.25rem"
-          class="w-full"
-        />
-        <span v-else class="text-base font-semibold text-base-foreground">{{
-          displayedCredits
-        }}</span>
-        <i
-          v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
-          class="icon-[lucide--circle-help] mr-auto cursor-help text-base text-muted-foreground"
-        />
-        <!-- Subscribed: Show Add Credits button -->
-        <Button
-          v-if="isActiveSubscription && isWorkspaceSubscribed"
-          variant="secondary"
-          size="sm"
-          class="text-base-foreground"
-          data-testid="add-credits-button"
-          @click="handleTopUp"
-        >
-          {{ $t('subscription.addCredits') }}
-        </Button>
-        <!-- Unsubscribed: Show Subscribe button -->
-        <SubscribeButton
-          v-else-if="isPersonalWorkspace"
-          :fluid="false"
-          :label="
-            isCancelled
-              ? $t('subscription.resubscribe')
-              : $t('workspaceSwitcher.subscribe')
-          "
-          size="sm"
-          variant="gradient"
-        />
-        <!-- Non-personal workspace: Show pricing table -->
-        <Button
-          v-else
-          variant="primary"
-          size="sm"
-          @click="handleOpenPlansAndPricing"
-        >
-          {{
-            isCancelled
-              ? $t('subscription.resubscribe')
-              : $t('workspaceSwitcher.subscribe')
-          }}
-        </Button>
-      </div>
+    <!-- Credits Section -->

-      <Divider class="mx-0 my-2" />
-    </template>
+    <div class="flex items-center gap-2 px-4 py-2">
+      <i class="icon-[lucide--component] text-sm text-amber-400" />
+      <Skeleton
+        v-if="isLoadingBalance"
+        width="4rem"
+        height="1.25rem"
+        class="w-full"
+      />
+      <span v-else class="text-base font-semibold text-base-foreground">{{
+        displayedCredits
+      }}</span>
+      <i
+        v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
+        class="icon-[lucide--circle-help] mr-auto cursor-help text-base text-muted-foreground"
+      />
+      <!-- Add Credits (subscribed + personal or workspace owner only) -->
+      <Button
+        v-if="isActiveSubscription && permissions.canTopUp"
+        variant="secondary"
+        size="sm"
+        class="text-base-foreground"
+        data-testid="add-credits-button"
+        @click="handleTopUp"
+      >
+        {{ $t('subscription.addCredits') }}
+      </Button>
+      <!-- Subscribe/Resubscribe (only when not subscribed or cancelled) -->
+      <SubscribeButton
+        v-if="showSubscribeAction && isPersonalWorkspace"
+        :fluid="false"
+        :label="
+          isCancelled
+            ? $t('subscription.resubscribe')
+            : $t('workspaceSwitcher.subscribe')
+        "
+        size="sm"
+        variant="gradient"
+      />
+      <Button
+        v-if="showSubscribeAction && !isPersonalWorkspace"
+        variant="primary"
+        size="sm"
+        @click="handleOpenPlansAndPricing"
+      >
+        {{
+          isCancelled
+            ? $t('subscription.resubscribe')
+            : $t('workspaceSwitcher.subscribe')
+        }}
+      </Button>
+    </div>
+
+    <Divider class="mx-0 my-2" />

    <!-- Plans & Pricing (PERSONAL and OWNER only) -->
    <div
@@ -228,10 +226,9 @@ const workspaceStore = useTeamWorkspaceStore()
 const {
  initState,
  workspaceName,
-  isInPersonalWorkspace: isPersonalWorkspace,
-  isWorkspaceSubscribed
+  isInPersonalWorkspace: isPersonalWorkspace
 } = storeToRefs(workspaceStore)
-const { workspaceRole } = useWorkspaceUI()
+const { permissions } = useWorkspaceUI()
 const workspaceSwitcherPopover = ref<InstanceType<typeof Popover> | null>(null)

 const emit = defineEmits<{
@@ -275,13 +272,15 @@ const canUpgrade = computed(() => {
 })

 const showPlansAndPricing = computed(
-  () => isPersonalWorkspace.value || workspaceRole.value === 'owner'
+  () => permissions.value.canManageSubscription
 )
 const showManagePlan = computed(
-  () => showPlansAndPricing.value && isActiveSubscription.value
+  () => permissions.value.canManageSubscription && isActiveSubscription.value
 )
-const showCreditsSection = computed(
-  () => isPersonalWorkspace.value || workspaceRole.value === 'owner'
+const showSubscribeAction = computed(
+  () =>
+    permissions.value.canManageSubscription &&
+    (!isActiveSubscription.value || isCancelled.value)
 )

 const handleOpenUserSettings = () => {
--- a/src/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue
@@ -172,16 +172,11 @@
          </div>
        </div>

-        <div class="flex flex-col lg:flex-row gap-6 pt-9">
-          <div class="flex flex-col shrink-0">
-            <div class="flex flex-col gap-3">
+        <div class="flex flex-col lg:flex-row lg:items-stretch gap-6 pt-6">
+          <div class="flex flex-col">
+            <div class="flex flex-col gap-3 h-full">
              <div
-                :class="
-                  cn(
-                    'relative flex flex-col gap-6 rounded-2xl p-5',
-                    'bg-modal-panel-background'
-                  )
-                "
+                class="relative flex flex-col gap-6 rounded-2xl p-5 bg-modal-panel-background justify-between h-full"
              >
                <Button
                  variant="muted-textonly"
@@ -246,9 +241,15 @@
                  </tbody>
                </table>

-                <div class="flex items-center justify-between">
+                <div
+                  v-if="
+                    isActiveSubscription &&
+                    !showZeroState &&
+                    permissions.canTopUp
+                  "
+                  class="flex items-center justify-between"
+                >
                  <Button
-                    v-if="isActiveSubscription && !showZeroState"
                    variant="secondary"
                    class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
                    @click="handleAddApiCredits"
@@ -296,7 +297,11 @@

      <!-- Members invoice card -->
      <div
-        v-if="isActiveSubscription && !isInPersonalWorkspace"
+        v-if="
+          isActiveSubscription &&
+          !isInPersonalWorkspace &&
+          permissions.canManageSubscription
+        "
        class="mt-6 flex gap-1 rounded-2xl border border-interface-stroke p-6 justify-between items-center text-sm"
      >
        <div class="flex flex-col gap-2">
@@ -319,7 +324,10 @@
      </div>

      <!-- View More Details - Outside main content -->
-      <div class="flex items-center gap-2 py-6">
+      <div
+        v-if="permissions.canManageSubscription"
+        class="flex items-center gap-2 py-6"
+      >
        <i class="pi pi-external-link text-muted"></i>
        <a
          href="https://www.comfy.org/cloud/pricing"
@@ -366,7 +374,7 @@ import { cn } from '@/utils/tailwindUtil'
 const workspaceStore = useTeamWorkspaceStore()
 const { isWorkspaceSubscribed, isInPersonalWorkspace, members } =
  storeToRefs(workspaceStore)
-const { permissions, workspaceRole } = useWorkspaceUI()
+const { permissions } = useWorkspaceUI()
 const { t, n } = useI18n()
 const toast = useToast()

@@ -421,7 +429,7 @@ const isCancelled = computed(
 // Show subscribe prompt to owners without active subscription
 // Don't show if subscription is cancelled (still active until end date)
 const showSubscribePrompt = computed(() => {
-  if (workspaceRole.value !== 'owner') return false
+  if (!permissions.value.canManageSubscription) return false
  if (isCancelled.value) return false
  if (isInPersonalWorkspace.value) return !isActiveSubscription.value
  return !isWorkspaceSubscribed.value
--- a/src/platform/workspace/composables/useWorkspaceUI.ts
+++ b/src/platform/workspace/composables/useWorkspaceUI.ts
@@ -14,6 +14,7 @@ interface WorkspacePermissions {
  canLeaveWorkspace: boolean
  canAccessWorkspaceMenu: boolean
  canManageSubscription: boolean
+  canTopUp: boolean
 }

 /** UI configuration for workspace role */
@@ -44,7 +45,8 @@ function getPermissions(
      canRemoveMembers: false,
      canLeaveWorkspace: false,
      canAccessWorkspaceMenu: false,
-      canManageSubscription: true
+      canManageSubscription: true,
+      canTopUp: true
    }
  }

@@ -57,7 +59,8 @@ function getPermissions(
      canRemoveMembers: true,
      canLeaveWorkspace: true,
      canAccessWorkspaceMenu: true,
-      canManageSubscription: true
+      canManageSubscription: true,
+      canTopUp: true
    }
  }

@@ -70,7 +73,8 @@ function getPermissions(
    canRemoveMembers: false,
    canLeaveWorkspace: true,
    canAccessWorkspaceMenu: true,
-    canManageSubscription: false
+    canManageSubscription: false,
+    canTopUp: false
  }
 }