Ht 19 create help page

ui/src/components/navbar.vue

@@ -1,11 +1,11 @@
 <template>
   <b-navbar class="shadow" id="navbar">
-    <div class="d-flex align-items-center">
-      <img src="@/assets/creditcard.png" alt="Self Service Portal Logo"/>
-      <h4 class="ml-3 mb-0">Self Service Portal</h4>
-    </div>
+    <a href="/my-bills" class="d-flex align-items-center text-decoration-none">
+      <img src="@/assets/creditcard.png" alt="Self Service Portal Logo" />
+      <h4 class="ml-3 mb-0 text-decoration-none">Self Service Portal</h4>
+    </a>
     <b-navbar-nav class="ml-auto">
-      <b-nav-item right class="mr-3" id="support">
+      <b-nav-item right class="mr-3" id="support" :to="{ name: 'Help' }">
         <img src="@/assets/support.png" alt="support icon" height="50" class="mr-2" />Help
       </b-nav-item>
       <b-nav-item-dropdown right class="mr-3" id="languages">

ui/src/router/router.js

@@ -2,13 +2,14 @@
 import VueRouter from "vue-router";
 import MyBills from "@/views/MyBills";
 import PayBill from "@/views/PayBill";
+import Help from "@/views/Help";
 /**
  * Import Vue Router.
  */
 Vue.use(VueRouter)
 
 /**
- * Declare routes for the my bills and pay bills routes.
+ * Declare routes for the my bills, pay bills, help routes.
  */
 const routes = [
  {
@@ -26,7 +27,18 @@ const routes = [
  {
   path: '/my-bills/:id',
   name: 'PayBill',
-  component: PayBill
+  component: PayBill,
+  meta: {
+   title: 'Pay Bill'
+  }
+ },
+ {
+  path: '/help',
+  name: 'Help',
+  component: Help,
+  meta: {
+   title: 'Frequently Asked Questions (FAQ)'
+  }
  }
 ]
 

ui/src/styles/style.scss

@@ -24,6 +24,12 @@ h4 {
     color: $White;
 }
 
+.email {
+    color: dodgerblue;
+    text-decoration: dodgerblue underline;
+    cursor: pointer;
+}
+
 .page-item.active .page-link {
     background-color: $Navy-Blue !important;
     border-color: $Navy-Blue !important;

ui/src/views/Help.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="mt-4">
+    <h1 class="mb-4">Frequently Asked Questions (FAQ)</h1>
+    <p>Here are a list of Frequently Asked Questions to help you get a quick answer to out most popular questions.</p> 
+    <p>If none of them answer your query please contact us at <span class="email">support@NordicTransportGroup.co.no</span></p>
+    <h3 class="pt-3">How can I pay my bill?</h3>
+    <p>You can pay your bill by navigating to the 'My Bills' page by clicking on the websites logo in the top left corner of the screen, you will then be presented with a list of outstanding bills. <br/><br/>
+      From here you can select the bill you want to pay by clicking the 'Pay Bill' button in the 'Actions' column. You will then be navigated to the pay bill screen where you can see details about the journey and enter your payment details or pay via paypal.</p>
+    <h3 class="pt-3">How can I see my bill history?</h3>
+    <p>You can see your bill history by navigating to the 'My Bills' page by clicking on the websites logo in the top left corner
+      of the screen, you will then be presented with a list of outstanding bills. To see a list of paid bills, change the toggle located underneath the 'My Bills' title to 'Paid Bills'.</p>
+    <h3 class="pt-3">How can I change the language?</h3>
+    <p>You can translate the content on the page by clicking the World icon. This will display a list of 23 languages, clicking one of these will translate the page to the chosen language.</p>
+    <h3 class="pt-3">How can I convert the currency?</h3>
+    <p>You can convery the currency on the page by clicking the Money icon. This will display a list of 6 currencies,
+      clicking one of these will convert the currency on the page to the chosen currency.</p>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: "Help" //Sets the name of file.
+})
+</script>

ui/tests/e2e/tests/routes.test.js

@@ -15,4 +15,12 @@
   //Assert
   cy.contains('h1', 'My Bills')
  })
+
+ it('loads the help page', () => {
+  //Act
+  cy.visit('/help')
+
+  //Assert
+  cy.contains('h1', 'Frequently Asked Questions (FAQ)')
+ })
 })