From c4e25d619210a945c80842a05c0d2717386fc570 Mon Sep 17 00:00:00 2001
From: Jake <jacobandrewminor@gmail.com>
Date: Fri, 4 Feb 2022 10:40:47 +0000
Subject: [PATCH 1/3] HT-19 Add help page and routes

---
 ui/src/components/navbar.vue | 10 +++++-----
 ui/src/router/router.js      | 16 ++++++++++++++--
 ui/src/views/Help.vue        | 13 +++++++++++++
 3 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 ui/src/views/Help.vue

diff --git a/ui/src/components/navbar.vue b/ui/src/components/navbar.vue
index a1bd030..e2a4da1 100644
--- a/ui/src/components/navbar.vue
+++ b/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">
diff --git a/ui/src/router/router.js b/ui/src/router/router.js
index 3f13a20..6d6a1ee 100644
--- a/ui/src/router/router.js
+++ b/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)'
+  }
  }
 ]
 
diff --git a/ui/src/views/Help.vue b/ui/src/views/Help.vue
new file mode 100644
index 0000000..48792c7
--- /dev/null
+++ b/ui/src/views/Help.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="mt-4">
+    <h1 class="mb-4">Frequently Asked Questions (FAQ)</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: "Help" //Sets the name of file.
+})
+</script>
\ No newline at end of file

From bbb66113e04167819469f6fd6fd7bd8486525667 Mon Sep 17 00:00:00 2001
From: Jake <jacobandrewminor@gmail.com>
Date: Fri, 4 Feb 2022 11:20:06 +0000
Subject: [PATCH 2/3] HT-19 Add content to the help page

---
 ui/src/styles/style.scss |  6 ++++++
 ui/src/views/Help.vue    | 13 +++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/ui/src/styles/style.scss b/ui/src/styles/style.scss
index 38f34b1..2339df2 100644
--- a/ui/src/styles/style.scss
+++ b/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;
diff --git a/ui/src/views/Help.vue b/ui/src/views/Help.vue
index 48792c7..cde3930 100644
--- a/ui/src/views/Help.vue
+++ b/ui/src/views/Help.vue
@@ -1,6 +1,19 @@
 <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>
 

From 820f7be14278a08261a53b8c5c5bedc7bdd5af94 Mon Sep 17 00:00:00 2001
From: Jake <jacobminor@hotmail.co.uk>
Date: Fri, 4 Feb 2022 11:25:19 +0000
Subject: [PATCH 3/3] HT-19 Add route test

---
 ui/tests/e2e/tests/routes.test.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/ui/tests/e2e/tests/routes.test.js b/ui/tests/e2e/tests/routes.test.js
index 1f4f212..9e4b12c 100644
--- a/ui/tests/e2e/tests/routes.test.js
+++ b/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)')
+ })
 })