[backport cloud/1.35] fix: show yearly labels in subscription panel for annual subscribers (#7708)

Backport of #7706 to `cloud/1.35`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7708-backport-cloud-1-35-fix-show-yearly-labels-in-subscription-panel-for-annual-subscriber-2d16d73d365081f1a7bdd65e24e604b0)
by [Unito](https://www.unito.io)

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

src/locales/en/main.json

@@ -1910,6 +1910,7 @@
     "prepaidDescription": "Pre-paid credits",
     "prepaidCreditsInfo": "Pre-paid credits expire after 1 year from purchase date.",
     "creditsRemainingThisMonth": "Credits remaining this month",
+    "creditsRemainingThisYear": "Credits remaining this year",
     "creditsYouveAdded": "Credits you've added",
     "monthlyCreditsInfo": "These credits refresh monthly and don't roll over",
     "viewMoreDetailsPlans": "View more details about plans & pricing",

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

@@ -156,9 +156,9 @@
                       <div class="flex items-center gap-1 min-w-0">
                         <div
                           class="text-sm truncate text-muted"
-                          :title="$t('subscription.creditsRemainingThisMonth')"
+                          :title="creditsRemainingLabel"
                         >
-                          {{ $t('subscription.creditsRemainingThisMonth') }}
+                          {{ creditsRemainingLabel }}
                         </div>
                       </div>
                     </div>
@@ -397,6 +397,11 @@ const tierKey = computed(() => {
 const tierPrice = computed(() =>
   getTierPrice(tierKey.value, isYearlySubscription.value)
 )
+const creditsRemainingLabel = computed(() =>
+  isYearlySubscription.value
+    ? t('subscription.creditsRemainingThisYear')
+    : t('subscription.creditsRemainingThisMonth')
+)
 
 // Tier benefits for v-for loop
 type BenefitType = 'metric' | 'feature'
@@ -416,7 +421,9 @@ const tierBenefits = computed((): Benefit[] => {
       key: 'monthlyCredits',
       type: 'metric',
       value: n(getTierCredits(key)),
-      label: t('subscription.monthlyCreditsLabel')
+      label: isYearlySubscription.value
+        ? t('subscription.yearlyCreditsLabel')
+        : t('subscription.monthlyCreditsLabel')
     },
     {
       key: 'maxDuration',