feat(terms): adds terms and condition and feedback link

Author: sandragjacinto

src/App.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue';
 import { RouterView } from 'vue-router';
 import AppHeader from '@/components/AppHeader.vue';
 import NavComponent from '@/components/NavComponent.vue';
+import FooterComponent from '@/components/FooterComponent.vue';
 import AppLayout from '@/components/AppLayout.vue';
 import SmallScreenPage from '@/views/SmallScreenPage.vue';
 import ModalComponent from '@/components/WelcomeModal.vue';
@@ -40,6 +41,9 @@ onMounted(async () => {
       <template #main>
         <RouterView />
       </template>
+      <template #footer>
+        <FooterComponent />
+      </template>
     </AppLayout>
   </div>
 </template>

src/assets/base.css

@@ -4,6 +4,8 @@
   --neutral-15: #e9e9e9;
   --neutral-20: #cccccc;
   --neutral-50: #aaa;
+  --neutral-70: #5b5c5f;
+
   --neutral-80: #464749;
   --neutral-90: #222325;
   --neutral-100: #000000;

src/components/AppLayout.vue

@@ -33,6 +33,9 @@ const manageNavBarAnimations = () => {
       <slot name="sidebar"> </slot>
     </div>
     <div class="main" ref="content" @scroll="manageNavBarAnimations"><slot name="main"></slot></div>
+    <div class="wl-footer">
+      <slot name="footer"></slot>
+    </div>
   </div>
 </template>
 
@@ -76,4 +79,9 @@ const manageNavBarAnimations = () => {
     grid-template-rows: auto 1fr;
   }
 }
+
+.wl-footer {
+  background-color: var(--neutral-10);
+  padding: 0.5rem;
+}
 </style>

src/components/FooterComponent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { WL_FEEDBACK_FORM_URL } from '@/utils/constants';
+</script>
+
+<template>
+  <div class="footer-wrapper">
+    <router-link class="terms" to="/terms">
+      <span class="item-name">{{ $t('terms') }}</span>
+    </router-link>
+
+    <a target="_blank" :href="WL_FEEDBACK_FORM_URL">{{ $t('giveFeedback') }}</a>
+  </div>
+</template>
+
+<style scoped>
+.footer-wrapper {
+  padding: 0 5rem;
+  display: flex;
+  justify-content: center;
+  color: var(--neutral-70);
+  font-size: 0.9rem;
+}
+
+a {
+  all: unset;
+  cursor: pointer;
+}
+
+a.terms {
+  margin-right: 1rem;
+  padding-right: 1rem;
+  border-right: 1px solid var(--neutral-70);
+}
+
+a:hover {
+  text-decoration: underline;
+}
+</style>

src/localisation/en.ts

@@ -294,6 +294,8 @@ export const en = {
     fetching: 'Searching across {docs_nb} documents...',
     formulatingAnswer: 'Preparing your answer...'
   },
+  terms: 'Terms and Conditions',
+  giveFeedback: 'Give Feedback',
   subjects: {
     Anthropology: 'Anthropology',
     Arts: 'Arts',

src/localisation/fr.ts

@@ -298,6 +298,8 @@ export const fr = {
     fetching: 'Recherche parmi {docs_nb} documents...',
     formulatingAnswer: 'Préparation de votre réponse...'
   },
+  terms: "Conditions d'utilisation",
+  giveFeedback: 'Donner un retour',
   subjects: {
     Anthropology: 'Anthropologie',
     Arts: 'Arts',

src/router/index.ts

@@ -35,6 +35,11 @@ const router = createRouter({
       name: 'tutor',
       component: Tutor
     },
+    {
+      path: '/terms',
+      name: 'terms',
+      component: () => import('@/views/TermsPage.vue')
+    },
     {
       ...(isDevEnvironment && {
         path: '/microlearning',

src/utils/constants.ts

@@ -9,6 +9,8 @@ export const subjects = [
 ];
 
 export const RELEVANCE_FACTOR = 0.75;
+export const WL_FEEDBACK_FORM_URL =
+  'https://docs.google.com/forms/d/e/1FAIpQLSfL_zKY3aHMMKO-Hunm0LYo4Yp_fjbL87Ryi85qT_pbSqUX8g/viewform';
 
 export const HELP_USER = {
   'q-and-a': [

src/views/TermsPage.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="terms-page">
+    <h1>{{ $t('terms.title') }}</h1>
+    <p>{{ $t('terms.description') }}</p>
+  </div>
+</template>
+
+<style scoped>
+.terms-page {
+  max-width: 70%;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+</style>