fix: show yearly labels in subscription panel for annual subscribers (#7706)

## Summary

Updates SubscriptionPanel to display yearly-appropriate labels for
annual subscribers:

- "Credits remaining this year" instead of "this month"
- "Yearly credits" instead of "Monthly credits" in the "Your plan
includes" section

## Changes

- Added `creditsRemainingThisYear` i18n key
- Added `creditsRemainingLabel` computed that switches based on
`isYearlySubscription`
- Updated `tierBenefits` to use `yearlyCreditsLabel` for annual
subscribers

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7706-fix-show-yearly-labels-in-subscription-panel-for-annual-subscribers-2d16d73d365081488552c2c0b03d862e)
by [Unito](https://www.unito.io)

src/locales/en/main.json

@@ -1933,6 +1933,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',