[backport core/1.40] fix: preserve refill date slashes in subscription credits label (#9586)

Backport of #9251 to `core/1.40`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9586-backport-core-1-40-fix-preserve-refill-date-slashes-in-subscription-credits-label-31d6d73d365081268d52f3bc5535d40d)
by [Unito](https://www.unito.io)

Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>

src/platform/cloud/subscription/components/SubscriptionPanel.test.ts

@@ -101,6 +101,7 @@ vi.mock('@/composables/billing/useBillingContext', () => ({
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
+  escapeParameter: true,
   messages: {
     en: {
       subscription: {
@@ -112,7 +113,8 @@ const i18n = createI18n({
         partnerNodesBalance: 'Partner Nodes Balance',
         partnerNodesDescription: 'Credits for partner nodes',
         totalCredits: 'Total Credits',
-        creditsRemainingThisMonth: 'Credits remaining this month',
+        creditsRemainingThisMonth: 'Included (Refills {date})',
+        creditsRemainingThisYear: 'Included (Refills {date})',
         creditsYouveAdded: "Credits you've added",
         monthlyBonusDescription: 'Monthly bonus',
         prepaidDescription: 'Prepaid credits',
@@ -286,6 +288,13 @@ describe('SubscriptionPanel', () => {
       const wrapper = createWrapper()
       expect(wrapper.findAll('.skeleton').length).toBe(0)
     })
+
+    it('renders refill date with literal slashes', () => {
+      mockIsActiveSubscription.value = true
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain('Included (Refills 12/31/24)')
+      expect(wrapper.text()).not.toContain('/')
+    })
   })
 
   // TODO: Re-enable when migrating to VTL so we can find by user visible content.

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

@@ -254,12 +254,24 @@ const refillsDate = computed(() => {
 
 const creditsRemainingLabel = computed(() =>
   isYearlySubscription.value
-    ? t('subscription.creditsRemainingThisYear', {
-        date: refillsDate.value
-      })
-    : t('subscription.creditsRemainingThisMonth', {
-        date: refillsDate.value
-      })
+    ? t(
+        'subscription.creditsRemainingThisYear',
+        {
+          date: refillsDate.value
+        },
+        {
+          escapeParameter: false
+        }
+      )
+    : t(
+        'subscription.creditsRemainingThisMonth',
+        {
+          date: refillsDate.value
+        },
+        {
+          escapeParameter: false
+        }
+      )
 )
 
 const planTotalCredits = computed(() => {

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -523,12 +523,24 @@ const refillsDate = computed(() => {
 
 const creditsRemainingLabel = computed(() =>
   isYearlySubscription.value
-    ? t('subscription.creditsRemainingThisYear', {
-        date: refillsDate.value
-      })
-    : t('subscription.creditsRemainingThisMonth', {
-        date: refillsDate.value
-      })
+    ? t(
+        'subscription.creditsRemainingThisYear',
+        {
+          date: refillsDate.value
+        },
+        {
+          escapeParameter: false
+        }
+      )
+    : t(
+        'subscription.creditsRemainingThisMonth',
+        {
+          date: refillsDate.value
+        },
+        {
+          escapeParameter: false
+        }
+      )
 )
 
 const planTotalCredits = computed(() => {