Last bulk of l10n

thunderbird · Jun 26, 2024 · f264da5 · f264da5
1 parent 74b3b3f
commit f264da5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -385,6 +385,17 @@
     "finishScreenText": "Before you close this screen, copy your shareable schedule link to start receiving appointments.",
     "finishAltText": "A user icon in front of two calendars.",
     "finish": "Finish",
-    "setupScheduleInfo": "You can edit this schedule later"
+    "setupScheduleInfo": "You can edit this schedule later",
+    "errorHeading": "Huh, how did this happen?",
+    "errorBody": "Looks like there was an error. Click the button below to go back!",
+    "steps": {
+      "setupProfile": "Create your profile",
+      "googlePermissions": "Allow Google Calendar permissions",
+      "connectCalendars": "Connect calendars",
+      "setupSchedule": "Set up your appointment availability",
+      "connectVideo": "Connect your video meeting link",
+      "finish": "You are ready to start booking",
+      "error": "Uh-oh!"
+    }
   }
 }
diff --git a/frontend/src/stores/ftue-store.js b/frontend/src/stores/ftue-store.js
@@ -30,32 +30,32 @@ export const useFTUEStore = defineStore('FTUE', () => {
     [ftueStep.setupProfile]: {
       previous: null,
       next: ftueStep.googlePermissions,
-      title: 'Create your profile',
+      title: 'ftue.steps.setupProfile',
     },
     [ftueStep.googlePermissions]: {
       previous: ftueStep.setupProfile,
       next: ftueStep.connectCalendars,
-      title: 'Allow Google Calendar permissions',
+      title: 'ftue.steps.googlePermissions',
     },
     [ftueStep.connectCalendars]: {
       previous: ftueStep.googlePermissions,
       next: ftueStep.setupSchedule,
-      title: 'Connect calendars',
+      title: 'ftue.steps.connectCalendars',
     },
     [ftueStep.setupSchedule]: {
       previous: ftueStep.connectCalendars,
       next: ftueStep.connectVideoConferencing,
-      title: 'Set up your appointment availability',
+      title: 'ftue.steps.setupSchedule',
     },
     [ftueStep.connectVideoConferencing]: {
       previous: ftueStep.setupSchedule,
       next: ftueStep.finish,
-      title: 'Connect your video meeting link',
+      title: 'ftue.steps.connectVideo',
     },
     [ftueStep.finish]: {
       previous: ftueStep.connectVideoConferencing,
       next: ftueStep.finish,
-      title: 'You are ready to start booking',
+      title: 'ftue.steps.finish',
     },
   };
 
@@ -69,7 +69,7 @@ export const useFTUEStore = defineStore('FTUE', () => {
 
   const hasNextStep = computed(() => !!(stepList[data.value.step] && stepList[data.value.step].next));
   const hasPreviousStep = computed(() => !!(stepList[data.value.step] && stepList[data.value.step].previous));
-  const stepTitle = computed(() => stepList[data.value.step]?.title ?? 'Unknown Step!');
+  const stepTitle = computed(() => stepList[data.value.step]?.title ?? 'ftue.steps.error');
 
   const clearMessages = () => {
     infoMessage.value = null;

diff --git a/frontend/src/views/FirstTimeUserExperienceView.vue b/frontend/src/views/FirstTimeUserExperienceView.vue
@@ -5,7 +5,7 @@
         <div class="modal-header">
           <word-mark v-if="currentStep === ftueStep.setupProfile || currentStep === ftueStep.finish"/>
           <h2 id="ftue-title">
-            {{ stepTitle }}
+            {{ t(stepTitle) }}
           </h2>
           <notice-bar type="error" v-if="errorMessage">
             {{ errorMessage }}
@@ -23,9 +23,9 @@
           <finish v-else-if="currentStep === ftueStep.finish"/>
           <div class="error-page" v-else>
             <span>🤔</span>
-            <h2>Huh, how did this happen?</h2>
-            <p>Looks like there was an error. Click the button below to go back!</p>
-            <primary-button @click="ftueStore.$reset()">Go back</primary-button>
+            <h2>{{ t('ftue.errorHeading') }}</h2>
+            <p>{{ t('ftue.errorBody') }}</p>
+            <primary-button @click="ftueStore.$reset()">{{ t('label.goBack') }}</primary-button>
           </div>
         </div>
         <div class="divider"></div>
@@ -52,12 +52,15 @@ import ConnectVideo from '@/components/FTUE/ConnectVideo.vue';
 import Finish from '@/components/FTUE/Finish.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import NoticeBar from '@/tbpro/elements/NoticeBar.vue';
+import { useI18n } from 'vue-i18n';
 
 const ftueStore = useFTUEStore();
 const {
   stepTitle, currentStep, infoMessage, errorMessage,
 } = storeToRefs(ftueStore);
 
+const { t } = useI18n();
+
 onMounted(() => {
   // Force light-mode
   localStorage?.setItem('theme', 'light');