[backport cloud/1.38] fix: credit display and top up and other UI display if personal membe… (#8811)

Backport of #8784 to `cloud/1.38`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8811-backport-cloud-1-38-fix-credit-display-and-top-up-and-other-UI-display-if-personal-mem-3046d73d365081feb075e6c712aced3e)
by [Unito](https://www.unito.io)

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>

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