[backport rh-test] subscription improve (#6347)

Backport of #6339 to `rh-test`

Automatically created by backport workflow.

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

Co-authored-by: Terry Jia <terryjia88@gmail.com>
Co-authored-by: bymyself <cbyrne@comfy.org>

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

@@ -23,11 +23,20 @@
                   <span>{{ $t('subscription.perMonth') }}</span>
                 </div>
                 <div v-if="isActiveSubscription" class="text-xs text-muted">
-                  {{
-                    $t('subscription.renewsDate', {
-                      date: formattedRenewalDate
-                    })
-                  }}
+                  <template v-if="isCancelled">
+                    {{
+                      $t('subscription.expiresDate', {
+                        date: formattedEndDate
+                      })
+                    }}
+                  </template>
+                  <template v-else>
+                    {{
+                      $t('subscription.renewsDate', {
+                        date: formattedRenewalDate
+                      })
+                    }}
+                  </template>
                 </div>
               </div>
               <Button
@@ -58,14 +67,6 @@
                     <div class="text-xs text-muted">
                       {{ $t('subscription.apiNodesDescription') }}
                     </div>
-                    <Button
-                      icon="pi pi-question-circle"
-                      text
-                      rounded
-                      size="small"
-                      severity="secondary"
-                      class="h-5 w-5"
-                    />
                   </div>
                 </div>
 
@@ -137,6 +138,7 @@
                       @click="handleViewUsageHistory"
                     />
                     <Button
+                      v-if="isActiveSubscription"
                       :label="$t('subscription.addApiCredits')"
                       severity="secondary"
                       class="text-xs"
@@ -219,7 +221,9 @@ const customerEventService = useCustomerEventsService()
 
 const {
   isActiveSubscription,
+  isCancelled,
   formattedRenewalDate,
+  formattedEndDate,
   formattedMonthlyPrice,
   manageSubscription,
   handleViewUsageHistory,

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