[backport rh-test] update subscription dialog (#6351)

Backport of #6350 to `rh-test`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6351-backport-rh-test-update-subscription-dialog-29a6d73d365081f284f1f5a9127e2cb3)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: GitHub Action <action@github.com>

src/components/topbar/TopbarBadge.vue

@@ -177,7 +177,7 @@ const textClasses = computed(() => {
       return 'text-warning-100'
     case 'info':
     default:
-      return 'text-slate-100'
+      return 'text-text-primary'
   }
 })
 

src/platform/cloud/subscription/components/SubscribeButton.vue

@@ -2,10 +2,14 @@
   <Button
     :label="label || $t('subscription.required.subscribe')"
     :size="size"
-    :class="buttonClass"
     :loading="isLoading"
     :disabled="isPolling"
     severity="primary"
+    :pt="{
+      root: {
+        class: 'w-full font-bold'
+      }
+    }"
     @click="handleSubscribe"
   />
 </template>
@@ -22,11 +26,9 @@ withDefaults(
   defineProps<{
     label?: string
     size?: 'small' | 'large'
-    buttonClass?: string
   }>(),
   {
-    size: 'large',
-    buttonClass: 'w-full font-bold'
+    size: 'large'
   }
 )
 

src/platform/cloud/subscription/components/SubscriptionBenefits.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-3">
+  <div class="flex flex-col gap-4">
     <div class="flex items-start gap-2">
       <i class="pi pi-check mt-1 text-sm" />
       <span class="text-sm">
@@ -7,7 +7,7 @@
       </span>
     </div>
 
-    <div class="flex items-start gap-2">
+    <div class="flex items-start gap-2 pb-2">
       <i class="pi pi-check mt-1 text-sm" />
       <span class="text-sm">
         {{ $t('subscription.benefits.benefit2') }}
@@ -30,6 +30,6 @@
 import Button from 'primevue/button'
 
 const handleViewMoreDetails = () => {
-  window.open('https://www.comfy.org/cloud', '_blank')
+  window.open('https://www.comfy.org/cloud/pricing', '_blank')
 }
 </script>

src/platform/cloud/subscription/components/SubscriptionPanel.vue

@@ -50,7 +50,7 @@
                 v-else
                 :label="$t('subscription.subscribeNow')"
                 size="small"
-                button-class="text-xs"
+                class="text-xs"
                 @subscribed="handleRefresh"
               />
             </div>

src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue

@@ -1,5 +1,15 @@
 <template>
-  <div class="grid h-full grid-cols-5 px-10 pb-10">
+  <div class="relative grid h-full grid-cols-5">
+    <!-- Custom close button -->
+    <Button
+      icon="pi pi-times"
+      text
+      rounded
+      class="absolute top-2.5 right-2.5 z-10 h-8 w-8 p-0 text-white hover:bg-white/20"
+      :aria-label="$t('g.close')"
+      @click="onClose"
+    />
+
     <div
       class="relative col-span-2 flex items-center justify-center overflow-hidden rounded-sm"
     >
@@ -8,7 +18,7 @@
         loop
         muted
         playsinline
-        class="h-full min-w-[125%] object-cover"
+        class="h-full min-w-[125%] object-cover p-0"
         style="margin-left: -20%"
       >
         <source
@@ -18,17 +28,18 @@
       </video>
     </div>
 
-    <div class="col-span-3 flex flex-col justify-between pl-8">
+    <div class="col-span-3 flex flex-col justify-between p-8">
       <div>
-        <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-6">
           <div class="inline-flex items-center gap-2">
-            <div class="text-sm text-muted">
+            <div class="text-text-primary text-sm text-muted">
               {{ $t('subscription.required.title') }}
             </div>
             <CloudBadge
               reverse-order
               no-padding
               background-color="var(--p-dialog-background)"
+              use-subscription
             />
           </div>
 
@@ -41,19 +52,36 @@
         <SubscriptionBenefits class="mt-6 text-muted" />
       </div>
 
-      <div class="flex flex-col">
-        <SubscribeButton @subscribed="handleSubscribed" />
+      <div class="flex flex-col pt-8">
+        <SubscribeButton
+          class="rounded-lg px-4 py-2"
+          :pt="{
+            root: {
+              style: 'background: var(--color-accent-blue, #0B8CE9);'
+            },
+            label: {
+              class: 'font-inter font-[700] text-sm'
+            }
+          }"
+          @subscribed="handleSubscribed"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
+
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 
+defineProps<{
+  onClose: () => void
+}>()
+
 const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -100,7 +100,7 @@ export function useSubscription() {
       useTelemetry()?.trackSubscription('modal_opened')
     }
 
-    dialogService.showSubscriptionRequiredDialog()
+    void dialogService.showSubscriptionRequiredDialog()
   }
 
   const manageSubscription = async () => {

src/platform/cloud/subscription/composables/useSubscriptionDialog.ts

@@ -0,0 +1,38 @@
+import { defineAsyncComponent } from 'vue'
+
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'subscription-required'
+
+export const useSubscriptionDialog = () => {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show() {
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
+      component: defineAsyncComponent(
+        () =>
+          import(
+            '@/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue'
+          )
+      ),
+      props: {
+        onClose: hide
+      },
+      dialogComponentProps: {
+        style: 'width: 700px;'
+      }
+    })
+  }
+
+  return {
+    show,
+    hide
+  }
+}

src/services/dialogService.ts

@@ -1,5 +1,4 @@
 import { merge } from 'es-toolkit/compat'
-import { defineAsyncComponent } from 'vue'
 import type { Component } from 'vue'
 
 import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
@@ -487,35 +486,16 @@ export const useDialogService = () => {
     })
   }
 
-  function showSubscriptionRequiredDialog() {
+  async function showSubscriptionRequiredDialog() {
     if (!isCloud || !window.__CONFIG__?.subscription_required) {
       return
     }
 
-    dialogStore.showDialog({
-      key: 'subscription-required',
-      component: defineAsyncComponent(
-        () =>
-          import(
-            '@/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue'
-          )
-      ),
-      props: {
-        onClose: () => {
-          dialogStore.closeDialog({ key: 'subscription-required' })
-        }
-      },
-      dialogComponentProps: {
-        closable: true,
-        style: 'width: 700px;',
-        pt: {
-          header: { class: '!p-0 !m-0' },
-          content: {
-            class: 'overflow-hidden !p-0 !m-0'
-          }
-        }
-      }
-    })
+    const { useSubscriptionDialog } = await import(
+      '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+    )
+    const { show } = useSubscriptionDialog()
+    show()
   }
 
   return {