subscription improve (#6339)

## Summary

Run keyboard shortcut bypasses paywall
Top Up button visible before paywall (confusing - hide until subscribed)
Question mark icon next to commercial models has no tooltip (hide until
added)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6339-subscription-improve-29a6d73d3650818e92c7f60eda01646a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: bymyself <cbyrne@comfy.org>

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

@@ -21,7 +21,8 @@ interface CloudSubscriptionCheckoutResponse {
 interface CloudSubscriptionStatusResponse {
   is_active: boolean
   subscription_id: string
-  renewal_date: string
+  renewal_date: string | null
+  end_date?: string | null
 }
 
 const subscriptionStatus = ref<CloudSubscriptionStatusResponse | null>(null)
@@ -44,6 +45,10 @@ export function useSubscription() {
 
   const { isLoggedIn } = useCurrentUser()
 
+  const isCancelled = computed(() => {
+    return !!subscriptionStatus.value?.end_date
+  })
+
   const formattedRenewalDate = computed(() => {
     if (!subscriptionStatus.value?.renewal_date) return ''
 
@@ -56,6 +61,18 @@ export function useSubscription() {
     })
   })
 
+  const formattedEndDate = computed(() => {
+    if (!subscriptionStatus.value?.end_date) return ''
+
+    const endDate = new Date(subscriptionStatus.value.end_date)
+
+    return endDate.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    })
+  })
+
   const formattedMonthlyPrice = computed(
     () => `$${MONTHLY_SUBSCRIPTION_PRICE.toFixed(0)}`
   )
@@ -197,7 +214,9 @@ export function useSubscription() {
   return {
     // State
     isActiveSubscription,
+    isCancelled,
     formattedRenewalDate,
+    formattedEndDate,
     formattedMonthlyPrice,
 
     // Actions