feat: translate strings in the paywall

app/javascript/dashboard/i18n/locale/en/sla.json

@@ -6,6 +6,13 @@
     "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
     "LEARN_MORE": "Learn more about SLA",
     "LOADING": "Fetching SLAs",
+    "PAYWALL": {
+      "TITLE": "Upgrade to create SLAs",
+      "AVAILABLE_ON": "SLA management is available on the <span class=\"font-medium text-slate-900\">Business and Enterprise</span> plans only.",
+      "UPGRADE_PROMPT": "Upgrade now to get access to advanced features like team management, automations, custom attributes, and more.",
+      "UPGRADE_NOW": "Upgrade now",
+      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
+    },
     "LIST": {
       "404": "There are no SLAs available in this account.",
       "EMPTY": {
@@ -93,4 +100,4 @@
       "HIDE": "Hide {count} rows"
     }
   }
-}
+}

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywall.vue

@@ -31,17 +31,15 @@ function routeToBilling() {
           <fluent-icon size="14" class="text-woot-500" icon="lock-closed" />
         </span>
         <span class="text-base font-medium text-slate-900">
-          Upgrade to create SLAs
+          {{ $t('SLA.PAYWALL.TITLE') }}
         </span>
       </div>
-      <p class="text-sm font-normal tracking-[0.5%] mt-4">
-        SLA management is available on the
-        <span class="font-medium text-slate-900">Business and Enterprise</span>
-        plans only.
-      </p>
+      <p
+        class="text-sm font-normal tracking-[0.5%] mt-4"
+        v-html="$t('SLA.PAYWALL.AVAILABLE_ON')"
+      />
       <p class="text-sm font-normal tracking-[0.5%]">
-        Upgrade now to get access to advanced features like team management,
-        automations, custom attributes, and more.
+        {{ $t('SLA.PAYWALL.UPGRADE_PROMPT') }}
       </p>
       <woot-button
         color-scheme="primary"
@@ -50,10 +48,10 @@ function routeToBilling() {
         is-expanded
         @click="routeToBilling"
       >
-        Upgrade Now
+        {{ $t('SLA.PAYWALL.UPGRADE_NOW') }}
       </woot-button>
       <p class="mt-2 text-xs tracking-tighter text-center">
-        You can change or cancel your plan anytime
+        {{ $t('SLA.PAYWALL.CANCEL_ANYTIME') }}
       </p>
     </div>
   </base-empty-state>