subscription modal

Author: jtydhr88

public/assets/images/cloud-subscription.webm

@@ -17,7 +17,6 @@
     <Button
       :label="$t('subscription.viewMoreDetails')"
       text
-      severity="secondary"
       icon="pi pi-external-link"
       icon-pos="left"
       size="small"

src/components/common/SubscriptionBenefits.vue

@@ -1,32 +1,51 @@
 <template>
-  <div class="subscription-required-dialog flex flex-col gap-4 p-6">
-    <div class="flex flex-col items-center gap-4 text-center">
-      <i class="pi pi-lock text-6xl text-primary-400" />
-      <h2 class="text-2xl font-bold">
-        {{ $t('subscription.required.title') }}
-      </h2>
-      <p class="text-muted">
-        {{
-          isPolling
-            ? $t('subscription.required.waitingForSubscription')
-            : $t('subscription.required.message')
-        }}
-      </p>
-    </div>
-
+  <div class="grid h-full grid-cols-5">
     <div
-      class="flex flex-col gap-3 rounded-lg border p-4 dark-theme:bg-charcoal-600"
+      class="relative col-span-2 flex items-center justify-center overflow-hidden"
     >
-      <SubscriptionBenefits />
+      <video
+        autoplay
+        loop
+        muted
+        playsinline
+        class="h-full min-w-[125%] object-cover"
+        style="margin-left: -20%"
+      >
+        <source
+          src="/assets/images/cloud-subscription.webm"
+          type="video/webm"
+        />
+      </video>
     </div>
 
-    <Button
-      :label="$t('subscription.required.subscribe')"
-      class="w-full"
-      :loading="isLoading"
-      :disabled="isPolling"
-      @click="handleSubscribe"
-    />
+    <div class="col-span-3 flex flex-col p-4">
+      <div class="flex flex-col gap-4">
+        <div class="inline-flex items-center gap-2">
+          <div class="text-sm">
+            {{ $t('subscription.required.title') }}
+          </div>
+          <TopbarBadges />
+        </div>
+
+        <div class="mt-4 mb-10 flex items-baseline gap-2">
+          <span class="text-3xl font-bold">{{ formattedMonthlyPrice }}</span>
+          <span class="text-xl">{{ $t('subscription.perMonth') }}</span>
+        </div>
+      </div>
+
+      <SubscriptionBenefits class="text-muted" />
+
+      <div class="mt-10 mb-4 flex flex-col">
+        <Button
+          :label="$t('subscription.required.subscribe')"
+          size="large"
+          class="w-full"
+          :loading="isLoading"
+          :disabled="isPolling"
+          @click="handleSubscribe"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -35,13 +54,16 @@ import Button from 'primevue/button'
 import { onBeforeUnmount, ref } from 'vue'
 
 import SubscriptionBenefits from '@/components/common/SubscriptionBenefits.vue'
+import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import { useSubscription } from '@/composables/auth/useSubscription'
 
 const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()
 
-const { subscribe, isActiveSubscription } = useSubscription()
+const { subscribe, isActiveSubscription, formattedMonthlyPrice } =
+  useSubscription()
+
 const isLoading = ref(false)
 const isPolling = ref(false)
 let pollInterval: number | null = null
@@ -62,7 +84,7 @@ const startPollingSubscriptionStatus = () => {
         return
       }
 
-      if (isActiveSubscription) {
+      if (isActiveSubscription.value) {
         stopPolling()
         emit('close', true)
       }
@@ -106,3 +128,13 @@ onBeforeUnmount(() => {
   stopPolling()
 })
 </script>
+
+<style scoped>
+:deep(.bg-comfy-menu-secondary) {
+  background-color: transparent;
+}
+
+:deep(.p-button) {
+  color: white;
+}
+</style>

src/components/dialog/content/SubscriptionRequiredDialogContent.vue

@@ -5,7 +5,7 @@ import { isCloud } from '@/platform/distribution/types'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
-export const MONTHLY_SUBSCRIPTION_PRICE = 20
+const MONTHLY_SUBSCRIPTION_PRICE = 20
 
 export function useSubscription() {
   const authStore = useFirebaseAuthStore()

src/composables/auth/useSubscription.ts

@@ -1932,10 +1932,9 @@
       "benefit2": "Up to 30 min runtime per job"
     },
     "required": {
-      "title": "Subscription Required",
-      "message": "You need an active subscription to run workflows on Comfy Cloud.",
+        "title": "Subscribe to",
       "waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
-      "subscribe": "Subscribe Now"
+      "subscribe": "Subscribe"
     },
     "subscribeToRun": "Subscribe to Run"
   },

src/locales/en/main.json

@@ -490,9 +490,14 @@ export const useDialogService = () => {
     dialogStore.showDialog({
       key: 'subscription-required',
       component: SubscriptionRequiredDialogContent,
-      headerComponent: ComfyOrgHeader,
       dialogComponentProps: {
-        closable: true
+        closable: true,
+        style: 'width: 720px; height: 434px;',
+        pt: {
+          content: {
+            class: 'overflow-hidden p-0!'
+          }
+        }
       }
     })
   }