refactor: new i18n strings for data sharing and data component

packages/hoppscotch-sh-admin/locales/en.json

@@ -1,10 +1,12 @@
 {
   "app": {
     "collapse_sidebar": "Collapse Sidebar",
+    "continue_to_dashboard": "Continue to Dashboard",
     "expand_sidebar": "Expand Sidebar",
     "name": "HOPPSCOTCH",
     "no_name": "No name",
-    "open_navigation": "Open Navigation"
+    "open_navigation": "Open Navigation",
+    "read_documentation": "Read Documentation"
   },
   "configs": {
     "auth_providers": {
@@ -16,7 +18,7 @@
     },
     "confirm_changes": "Hoppscotch server must restart to reflect the new changes. Confirm changes made to the server configurations?",
     "input_empty": "Please fill all the fields before updating the configurations",
-    "dataSharing": {
+    "data-sharing": {
       "title": "Data Sharing",
       "description": "Help improve Hoppscotch by sharing anonymous data",
       "enable": "Enable Data Sharing",
@@ -48,6 +50,14 @@
     "save_changes": "Save Changes",
     "title": "Configurations"
   },
+  "data_sharing": {
+    "description": "Share anonymous data usage to improve Hoppscotch",
+    "enable": "Enable Data Sharing",
+    "see_shared": "See what is shared",
+    "toggle_description": "Share data and make Hoppscotch better",
+    "title": "Make Hoppscotch Better",
+    "welcome": "Welcome to"
+  },
   "metrics": {
     "dashboard": "Dashboard",
     "no_metrics": "No metrics found",
@@ -56,6 +66,13 @@
     "total_teams": "Total Workspaces",
     "total_users": "Total Users"
   },
+  "newsletter": {
+    "description": "Get updates about our latest news",
+    "subscribe": "Subscribe",
+    "title": "Stay in Touch",
+    "toggle_description": "Get updates about the latest at Hoppscotch",
+    "unsubscribe": "Unsubscribe"
+  },
   "settings": {
     "settings": "Settings"
   },

packages/hoppscotch-sh-admin/src/components/settings/DataSharing.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="md:grid md:grid-cols-3 md:gap-4 border-divider border-b py-8">
     <div class="px-8 md:col-span-1">
-      <h3 class="heading">{{ t('configs.dataSharing.title') }}</h3>
+      <h3 class="heading">{{ t('configs.data-sharing.title') }}</h3>
       <p class="my-1 text-secondaryLight">
-        {{ t('configs.dataSharing.description') }}
+        {{ t('configs.data-sharing.description') }}
       </p>
     </div>
 
     <div class="mt-5 mx-8 md:col-span-2">
       <section v-if="dataSharingConfigs">
         <h4 class="font-semibold text-secondaryDark">
-          {{ t('configs.dataSharing.title') }}
+          {{ t('configs.data-sharing.title') }}
         </h4>
 
         <div class="space-y-4 py-4">
@@ -19,7 +19,7 @@
               :on="dataSharingConfigs.enabled"
               @change="dataSharingConfigs.enabled = !dataSharingConfigs.enabled"
             >
-              {{ t('configs.dataSharing.toggle_description') }}
+              {{ t('configs.data-sharing.toggle_description') }}
             </HoppSmartToggle>
           </div>
         </div>
@@ -28,7 +28,7 @@
           outline
           filled
           :icon="IconShieldQuestion"
-          :label="t('configs.dataSharing.see_shared')"
+          :label="t('configs.data-sharing.see_shared')"
           to="http://docs.hoppscotch.io"
           class="w-min my-2"
         />

packages/hoppscotch-sh-admin/src/pages/data.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col items-center justify-center min-h-screen">
     <div class="text-center">
-      <h2 class="text-lg">Welcome to</h2>
+      <h2 class="text-lg">{{ t('data_sharing.welcome') }}</h2>
       <img src="/assets/images/hoppscotch-title.svg" alt="" class="mt-2 w-56" />
     </div>
     <div
@@ -9,36 +9,40 @@
     >
       <div>
         <div class="flex flex-col">
-          <p class="text-lg font-bold text-white">Make Hoppscotch Better</p>
+          <p class="text-lg font-bold text-white">
+            {{ t('data_sharing.title') }}
+          </p>
           <p class="text-sm font-light">
-            Share anonymous data usage to improve Hoppscotch
+            {{ t('data_sharing.description') }}
           </p>
           <HoppSmartToggle
             :on="shareData"
             @change="shareData = !shareData"
             class="my-5 text-white w-min justify-start"
           >
-            Share data and make Hoppscotch better
+            {{ t('data_sharing.toggle_description') }}
           </HoppSmartToggle>
           <HoppButtonSecondary
             outline
             filled
             :icon="IconShieldQuestion"
-            label="See what is shared"
+            :label="t('data_sharing.see_shared')"
             to="http://docs.hoppscotch.io"
             class="w-min mx-auto mb-2"
           />
         </div>
 
         <div class="mt-5">
-          <p class="text-lg font-bold text-white">Stay in Touch</p>
+          <p class="text-lg font-bold text-white">
+            {{ t('newsletter.title') }}
+          </p>
           <p class="text-sm font-light">Get updates about our latest news</p>
           <HoppSmartToggle
             :on="shareEmail"
             @change="shareEmail = !shareEmail"
             class="my-5 text-white"
           >
-            Get updates about the latest at Hoppscotch
+            {{ t('newsletter.toggle_description') }}
           </HoppSmartToggle>
         </div>
       </div>
@@ -46,7 +50,7 @@
       <div class="flex flex-col w-48 mx-auto mt-5">
         <HoppButtonPrimary
           :icon="IconLogIn"
-          label="Continue to Dashboard"
+          :label="t('app.continue_to_dashboard')"
           @click="submitSelection"
         />
         <a href="http://docs.hoppscotch.io">
@@ -54,7 +58,7 @@
             outline
             filled
             :icon="IconBookOpenText"
-            label="Read Documentation"
+            :label="t('app.read_documentation')"
             class="mt-3 px-5"
           />
         </a>
@@ -67,6 +71,7 @@
 import { useMutation } from '@urql/vue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from '~/composables/i18n';
 import { useToast } from '~/composables/toast';
 import { auth } from '~/helpers/auth';
 import {
@@ -78,6 +83,7 @@ import IconBookOpenText from '~icons/lucide/book-open-text';
 import IconLogIn from '~icons/lucide/log-in';
 import IconShieldQuestion from '~icons/lucide/shield-question';
 
+const t = useI18n();
 const toast = useToast();
 const router = useRouter();
 const user = auth.getCurrentUser();