[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,