feat(tutor): handles noor feedback typo and modal

Author: sandragjacinto

src/components/ModalComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import ModalWrapper from './ModalWrapper.vue';
 const props = defineProps<{
   title: string;
@@ -10,6 +10,10 @@ const props = defineProps<{
 
 const state = ref<boolean>(props.isOpen);
 
+watch(isOpen, (val) => {
+  state.value = val;
+});
+
 const handleModalClose = () => {
   props.onClose();
   state.value = false;

src/components/ModalWrapper.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 const props = defineProps<{
   isOpen: boolean;
-  onClose: () => void;
+  onClose?: () => void;
 }>();
 
 const computedState = computed(() => props.isOpen);
@@ -23,6 +23,7 @@ const handleModalClose = () => {
       data-testid="close"
       class="modal-close is-large"
       aria-label="close"
+      v-if="onClose"
       @click="handleModalClose"
     ></button>
   </div>

src/localisation/en.ts

@@ -210,7 +210,7 @@ export const en = {
       title: 'Documents to start with',
       description: 'Upload one or more documents to get started.',
       cursusTitleLabel: 'Cursus title',
-      cursusTitlePlaceholder: 'Socilinguistics 101',
+      cursusTitlePlaceholder: 'Sociolinguistics 101',
       cursusLevelLabel: 'Cursus level',
       cursusLevelPlaceholder: 'Undergraduate, Graduate, etc.',
       cursusDurationLabel: 'Cursus duration',

src/localisation/fr.ts

@@ -202,7 +202,7 @@ export const fr = {
       wait: 'Veuillez patienter :',
       search: {
         title: 'Recherche de documents connexes',
-        description: 'Chargment de vos documents et recherche de documents connexes en cours.'
+        description: 'Chargement de vos documents et recherche de documents connexes en cours.'
       },
       syllabus: {
         title: 'Génération du syllabus',

src/views/TutorPage.vue

@@ -75,7 +75,7 @@ const stepToAction = {
   <div class="content-centered-wrapper">
     <StepsIndicator :step="step" :setStep="setStep" :stepsLength="3" />
 
-    <ModalWrapper v-if="isLoading" isOpen :onClose="() => {}">
+    <ModalWrapper v-if="isLoading" :isOpen="isLoading">
       <div class="box loading-modal">
         <h1 class="title is-size-4 has-text-centered">
           {{ $t(loaderI18nPathText[step]?.title) }}