Merge branch 'feat/add-i18n-support' into staging

package.json

@@ -18,6 +18,7 @@
     "pinia": "^2.1.7",
     "swiper": "^11.1.3",
     "vue": "^3.3.11",
+    "vue-i18n": "10",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {

src/components/Banner.vue

@@ -43,7 +43,7 @@
           v-if="expanded"
           class="percentage-info"
         >
-          {{ `${currentModule.watched_percentage}% completo` }}
+          {{ `${currentModule.watched_percentage}% ${$t('complete')}` }}
         </p>
       </div>
       <div
@@ -59,7 +59,7 @@
               },
             }"
           >
-            <UnnnicButton type="secondary">Abrir</UnnnicButton>
+            <UnnnicButton type="secondary">{{ $t('open') }}</UnnnicButton>
           </RouterLink>
         </div>
         <!-- <unnnic-button type="terciary">gerar certificado</unnnic-button> -->
@@ -75,7 +75,7 @@
             },
           }"
         >
-          Continuar de onde parei →
+          {{ $t('resume_where_i_left_off') }}
         </RouterLink>
       </div>
     </div>

src/locales/en.json

@@ -0,0 +1,22 @@
+{
+    "complete": "Complete",
+    "open": "Open",
+    "resume_where_i_left_off": "Resume where I left off →",
+    "comments": "Comments",
+    "your_notes": "Your notes",
+    "click_here": "Click here",
+    "to_start_taking_notes": "to start taking notes.",
+    "leave_a_comment": "Leave a comment",
+    "comment_placeholder": "A good comment can help others who are learning :)",
+    "delete_comment": "Delete comment",
+    "overview": "Overview",
+    "mark_learning_as_completed": "Mark learning as completed",
+    "rate_your_learning_in_this_lesson": "Rate your learning in this lesson",
+    "next_lesson": "Next lesson",
+    "onboarding": {
+        "title": "{name}, What do you want to learn today?",
+        "description": "Below are some knowledge pathways that will help you learn how to use the Weni Platform for various purposes. Choose the one that interests you to start your learning journey with the platform 💙"
+    },
+    "see_all": "See all",
+    "paths": "Paths"
+}

src/locales/es.json

@@ -0,0 +1,22 @@
+{
+    "complete": "Completo",
+    "open": "Abrir",
+    "resume_where_i_left_off": "Continuar desde donde lo dejé →",
+    "comments": "Comentarios",
+    "your_notes": "Tus anotaciones",
+    "click_here": "Haz clic aquí",
+    "to_start_taking_notes": "para comenzar a hacer anotaciones.",
+    "leave_a_comment": "Deja un comentario",
+    "comment_placeholder": "Un buen comentario puede ayudar a otras personas que están aprendiendo :)",
+    "delete_comment": "Eliminar comentario",
+    "overview": "Visión General",
+    "mark_learning_as_completed": "Marcar aprendizaje como completado",
+    "rate_your_learning_in_this_lesson": "Evalúa tu aprendizaje en esta clase",
+    "next_lesson": "Próxima clase",
+    "onboarding": {
+        "title": "{name}, ¿Qué quieres aprender hoy?",
+        "description": "A continuación, se enumeran algunas rutas de conocimiento que te ayudarán a aprender a utilizar la Plataforma Weni para diversos fines. Elige la que más te interese para comenzar tu viaje de aprendizaje en la plataforma 💙"
+    },
+    "see_all": "Ver todo",
+    "paths": "Rutas"
+}

src/locales/pt_br.json

@@ -0,0 +1,22 @@
+{
+    "complete": "Completo",
+    "open": "Abrir",
+    "resume_where_i_left_off": "Continuar de onde parei →",
+    "comments": "Comentários",
+    "your_notes": "Suas anotações",
+    "click_here": "Clique aqui",
+    "to_start_taking_notes": "para começar a fazer anotações.",
+    "leave_a_comment": "Deixe um comentário",
+    "comment_placeholder": "Um bom comentário pode ajudar outras pessoas que estão aprendendo :)",
+    "delete_comment": "Deletar comentário",
+    "overview": "Visão Geral",
+    "mark_learning_as_completed": "Marcar aprendizado como concluído",
+    "rate_your_learning_in_this_lesson": "Avalie seu aprendizado nesta aula",
+    "next_lesson": "Próxima aula",
+    "onboarding": {
+        "title": "{name}, O que você quer aprender hoje?",
+        "description": "Abaixo estão listadas algumas trilhas de conhecimento que vão lhe ajudar a aprender a utilizar a Plataforma Weni para diversos fins. Escolha a que for de seu interesse para começar uma jornada de aprendizado da plataforma 💙"
+    },
+    "see_all": "Ver tudo",
+    "paths": "Trilhas"
+}

src/main.js

@@ -1,9 +1,11 @@
 import { createApp, markRaw } from 'vue';
 import { createPinia } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
+
 import App from './App.vue';
 import router from './router';
 
+import i18n from './plugins/i18n';
 import Unnnic from './utils/plugins/UnnnicSystem';
 import '@weni/unnnic-system/dist/style.css';
 
@@ -23,6 +25,8 @@ pinia.use(({ store }) => {
 
 app.use(Unnnic);
 
+app.use(i18n);
+
 app.mount('#app');
 
 function enableLinkTranslations() {

src/plugins/i18n.js

@@ -0,0 +1,62 @@
+import { createI18n } from 'vue-i18n';
+
+// eslint-disable-next-line camelcase
+import pt_br from '@/locales/pt_br.json';
+import en from '@/locales/en.json';
+import es from '@/locales/es.json';
+
+import('moment/dist/locale/es.js');
+import('moment/dist/locale/pt-br.js');
+
+import moment from 'moment';
+
+moment.locale('pt-br');
+
+const messages = {
+  'pt-br': pt_br,
+  en,
+  es,
+};
+
+const i18n = createI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages,
+  dateTimeFormats: {
+    'pt-br': {
+      short: {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      },
+      long: {
+        month: 'long',
+        day: '2-digit',
+      },
+    },
+    en: {
+      short: {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      },
+      long: {
+        month: 'long',
+        day: '2-digit',
+      },
+    },
+    es: {
+      short: {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      },
+      long: {
+        month: 'long',
+        day: '2-digit',
+      },
+    },
+  },
+});
+
+export default i18n;

src/stores/header/index.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { useModulesStore } from '@/stores/modules';
+import i18n from '@/plugins/i18n';
 
 export const useHeaderStore = defineStore('header', {
   getters: {
@@ -10,7 +11,7 @@ export const useHeaderStore = defineStore('header', {
 
       if (['Home', 'ClassesListAll', 'ClassPage'].includes(routerName)) {
         breadcrumbs.push({
-          name: 'Trilhas',
+          name: i18n.global.t('paths'),
           path: {
             name: 'Onboarding',
           },

src/views/ClassPage.vue

@@ -12,7 +12,7 @@
         />
         <div :class="['notes', { yellowed: isNotesYellowed }]">
           <div class="header">
-            <div class="title">Suas anotações</div>
+            <div class="title">{{ $t('your_notes') }}</div>
             <div class="action">
               <UnnnicIcon
                 v-if="isSavingNotes"
@@ -30,9 +30,9 @@
               class="edit-button"
               @click="$refs.notesInput.focus()"
             >
-              Clique aqui
+              {{ $t('click_here') }}
             </span>
-            para começar a fazer anotações.
+            {{ $t('to_start_taking_notes') }}
           </div>
           <div class="content">
             <textarea
@@ -62,7 +62,7 @@
                 class="leave-a-comment"
                 @click.stop="goToCommentInput"
               >
-                Deixe um comentário
+                {{ $t('leave_a_comment') }}
               </span>
             </div>
             <!-- 
@@ -79,13 +79,13 @@
             :tabs="['overview' /* , 'materials' */, 'comments']"
             @change.self="currentTab = $event"
           >
-            <template #tab-head-overview>Visão Geral</template>
+            <template #tab-head-overview>{{ $t('overview') }}</template>
             <template #tab-panel-overview>
               <div class="overview-container">
                 <UnnnicSwitch
                   v-model="currentClass.lesson_monitoring.watched"
                   size="medium"
-                  textRight="Marcar aprendizado como concluído"
+                  :textRight="$t('mark_learning_as_completed')"
                   class="toggle-class"
                   @update:model-value="
                     toggleCheckClass({
@@ -113,16 +113,16 @@
             </template> -->
 
             <template #tab-head-comments>
-              Comentários ({{ comments.length }})
+              {{ $t('comments') }} ({{ comments.length }})
             </template>
             <template #tab-panel-comments>
               <UnnnicInput
                 ref="comment-input"
                 v-model="comment"
-                label="Deixe um comentário"
+                :label="$t('leave_a_comment')"
                 :disabled="creatingComment"
                 size="md"
-                placeholder="Um bom comentário pode ajudar outras pessoas que estão aprendendo :)"
+                :placeholder="$t('comment_placeholder')"
                 iconRight="send-email-3-1"
                 iconRightClickable
                 class="comment-input"
@@ -180,7 +180,7 @@
                           size="sm"
                           scheme="feedback-red"
                         />
-                        Excluir comentário
+                        {{ $t('delete_comment') }}
                       </div>
                     </UnnnicDropdown>
                   </template>
@@ -194,7 +194,7 @@
           <div class="mood-rating-container">
             <UnnnicMoodRating
               v-model="mood"
-              title="Avalie seu aprendizado nesta aula"
+              :title="$t('rate_your_learning_in_this_lesson')"
               @update:model-value="setMood"
             />
           </div>
@@ -203,7 +203,7 @@
             v-if="nextClass"
             class="next-class-container"
           >
-            <div class="title">Próxima aula</div>
+            <div class="title">{{ $t('next_lesson') }}</div>
 
             <RouterLink
               :to="{
@@ -223,7 +223,7 @@
                 "
                 :info="
                   nextClassCommentsCount !== null
-                    ? `(${nextClassCommentsCount} comentários)`
+                    ? `(${nextClassCommentsCount} ${$t('comments')})`
                     : null
                 "
                 :checked="nextClass.lesson_monitoring.watched"
@@ -269,7 +269,7 @@ export default {
   name: 'ClassPage',
   data() {
     return {
-      text: `<h1>Titulo</h1>\r\n\r\n<p>sdads asdas</p>\r\n\r\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porta sagittis ligula at egestas. Vivamus vestibulum diam sit amet massa viverra, quis dapibus diam pellentesque. Pellentesque fermentum efficitur lorem sit amet sollicitudin. Sed magna velit, pellentesque sit amet aliquet quis, dapibus vitae erat. Nullam imperdiet mollis odio eu ultrices. Duis imperdiet volutpat dolor, vitae imperdiet turpis elementum at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut ornare nunc.</p>\r\n\r\n<p>Sed quam lorem, ultricies vitae sapien a, vehicula malesuada arcu. Phasellus luctus lobortis enim eget consequat. Praesent mattis quam urna, tempor ornare sapien tincidunt ac. Pellentesque consectetur volutpat velit vel tincidunt. Vestibulum vestibulum fringilla malesuada. Curabitur sit amet ex eu nunc feugiat efficitur. Morbi hendrerit ipsum sed neque accumsan, ut ultricies turpis commodo. Cras dapibus nisi vel interdum laoreet. Sed varius, arcu eu finibus imperdiet, ligula eros luctus augue, quis feugiat justo magna non enim.</p>\r\n\r\n<p>Sed eget bibendum diam, nec vehicula augue. Quisque consectetur commodo finibus. Aenean commodo ante nec tempus auctor. Aenean vel aliquet magna. Mauris aliquam odio sit amet rhoncus ultricies. Praesent lobortis, enim a placerat gravida, dolor ante suscipit libero, ac aliquet dui tellus vitae magna. Fusce ut fermentum urna. Integer nunc nunc, volutpat porttitor tincidunt condimentum, blandit eget turpis. Sed pharetra scelerisque laoreet. Nulla facilisi. Aliquam ultrices non magna sit amet mattis. Sed feugiat dui at lacus finibus, sed tincidunt lorem fermentum. Curabitur molestie pharetra rhoncus. Etiam egestas nunc sed tortor dapibus feugiat vel ac felis.</p>\r\n\r\n<p>&nbsp;</p>`,
+      text: ``,
       comments: [],
 
       currentTab: 'overview',

src/views/ClassesListAll.vue

@@ -30,7 +30,7 @@
               "
               :info="
                 course.lesson_monitoring.comment_count !== null
-                  ? `(${course.lesson_monitoring.comment_count} comentários)`
+                  ? `(${course.lesson_monitoring.comment_count} ${$t('comments')})`
                   : null
               "
               :checked="course.lesson_monitoring.watched"

src/views/Home.vue

@@ -44,7 +44,7 @@
                 params: { id_category: category.id },
               }"
             >
-              Ver tudo
+              {{ $t('see_all') }}
             </RouterLink>
             <UnnnicButtonIcon
               type="secondary"
@@ -86,7 +86,7 @@
                 "
                 :info="
                   grade.lesson_monitoring.comment_count !== null
-                    ? `(${grade.lesson_monitoring.comment_count} comentários)`
+                    ? `(${grade.lesson_monitoring.comment_count} ${$t('comments')})`
                     : null
                 "
                 :checked="grade.lesson_monitoring.watched"

src/views/Onboarding.vue

@@ -2,12 +2,9 @@
   <main class="onboarding">
     <div class="onboarding__header unnnic-grid-giant">
       <div class="texts unnnic-grid-span-7">
-        <h1>{{ name }}, o que você quer aprender hoje?</h1>
+        <h1>{{ $t('onboarding.title', { name }) }}</h1>
         <p>
-          Abaixo estão listadas algumas trilhas de conhecimento que vão lhe
-          ajudar a aprender a utilizar a Plataforma Weni para diversos fins.
-          Escolha a que for de seu interesse para começar uma jornada de
-          aprendizado da plataforma 💙
+          {{ $t('onboarding.description') }}
         </p>
       </div>
     </div>