From a6d482b98bdedb39371f427b58b05933fd9c3247 Mon Sep 17 00:00:00 2001
From: Jake <jacobminor@hotmail.co.uk>
Date: Fri, 4 Feb 2022 16:36:46 +0000
Subject: [PATCH 1/3] HT-12 Create pay bill screen

---
 server/business/bill.business.js      |  16 +++-
 server/controllers/bill.controller.js |   8 ++
 server/datalayer/mongo.js             |   9 +++
 server/routes/bill.routes.js          |   3 +
 server/utilities.js                   |  13 +++-
 ui/src/api/api.js                     |  13 ++++
 ui/src/components/input.vue           |   3 +-
 ui/src/components/navbar.vue          |   4 +-
 ui/src/router/router.js               |   3 +
 ui/src/styles/style.scss              |   9 +++
 ui/src/views/MyBills.vue              |   7 +-
 ui/src/views/PayBill.vue              | 101 +++++++++++++++++++++++++-
 12 files changed, 176 insertions(+), 13 deletions(-)

diff --git a/server/business/bill.business.js b/server/business/bill.business.js
index 03b975d..c884164 100644
--- a/server/business/bill.business.js
+++ b/server/business/bill.business.js
@@ -1,6 +1,7 @@
 const DataLayer = require("../datalayer/mongo");
 const model = require("../database").getModel("bill");
 const httpError = require("http-errors");
+const Utilities = require('../utilities')
 
 module.exports = class BillBusiness {
  constructor() {
@@ -25,13 +26,24 @@ module.exports = class BillBusiness {
  }
 
  /**
-  *  Get a bill by ID.
+  *  Get bill by ID.
+  */
+ async getBillById(billId) {
+  return this.dataLayer
+    .findByPropertyAndPopulate(billId, [{path: 'journey', populate: {path: 'entryLocation exitLocation'}}, {path: 'driver', select: 'username type email'}])
+    .catch((error) => {
+     throw httpError(500, error.message)
+    })
+ }
+
+ /**
+  *  Pay a bill by ID.
   */
  async payBill(id) {
   const record = {
    paid: true
   }
-  return this.dataLayer.update(id, record)
+  return this.dataLayer.update(Utilities.convertToObjectId(id), record)
     .catch((error) => {throw httpError(404, error.message)
   })
  }
diff --git a/server/controllers/bill.controller.js b/server/controllers/bill.controller.js
index 07f2c67..bb22674 100644
--- a/server/controllers/bill.controller.js
+++ b/server/controllers/bill.controller.js
@@ -10,7 +10,15 @@ exports.getAllBills = async (req, res) => {
    .catch((error) => {
     res.status(error.status).send({message: error.message})
    })
+}
 
+/**
+ *  Get bill by ID.
+ */
+exports.getBillById = async (req, res) => {
+ billBusiness.getBillById(req.params.id)
+   .then((data) => {return res.status(200).send(data)})
+   .catch((error) => {res.status(error.status).send({message: error.message})})
 }
 
 /**
diff --git a/server/datalayer/mongo.js b/server/datalayer/mongo.js
index ff2677b..2bc8eae 100644
--- a/server/datalayer/mongo.js
+++ b/server/datalayer/mongo.js
@@ -18,6 +18,15 @@ class DataLayer {
               })
           })
     }
+
+    /**
+     * Find all records in the database.
+     */
+    async findByPropertyAndPopulate(id, populateFilter) {
+        return this.model.findById(id)
+          .orFail(new Error("Record can't be found in the database."))
+          .populate(JSON.parse(JSON.stringify(populateFilter)))
+    }
     
     /**
      * Find a record by property in the database.
diff --git a/server/routes/bill.routes.js b/server/routes/bill.routes.js
index 848c979..338bcce 100644
--- a/server/routes/bill.routes.js
+++ b/server/routes/bill.routes.js
@@ -8,6 +8,9 @@ const billController = require("../controllers/bill.controller");
 // Get All Bills
 router.get("/", checkJwtToken, billController.getAllBills);
 
+// Get Bill By Id
+router.get("/:id", checkJwtToken, billController.getBillById);
+
 // Pay for bill
 router.put("/:id", checkJwtToken, billController.payBill);
 
diff --git a/server/utilities.js b/server/utilities.js
index 2f1a78f..ae96aba 100644
--- a/server/utilities.js
+++ b/server/utilities.js
@@ -1,9 +1,18 @@
 const haversine = require("haversine")
+const httpError = require("http-errors")
+const objectId = require("mongoose").Types.ObjectId
 
 module.exports = class Utilities {
  static calculateCost(journey) {
   return (haversine(journey.entryLocation.coordinates, journey.exitLocation.coordinates) * this.costPerMile)
  }
- 
- static costPerMile = 0.01
+
+  static convertToObjectId(id) {
+   if (objectId.isValid(id)) {
+    return objectId(id)
+   }
+   throw new httpError(400, "ID is not valid.")
+  }
+  
+  static costPerMile = 0.01
 }
\ No newline at end of file
diff --git a/ui/src/api/api.js b/ui/src/api/api.js
index 4db511d..abcaf2f 100644
--- a/ui/src/api/api.js
+++ b/ui/src/api/api.js
@@ -27,6 +27,19 @@ const api = class Api {
             });
     }
 
+    async getBillById(billId) {
+        return axios
+          .get(`${this.baseUrl}/bill/${billId}`, {
+              withCredentials: true,
+          })
+          .then((response) => {
+              return response.data;
+          })
+          .catch((error) => {
+              throw error;
+          });
+    }
+
     async payBill(billId) {
         return axios
             .put(
diff --git a/ui/src/components/input.vue b/ui/src/components/input.vue
index 2e6c4dc..77d873d 100644
--- a/ui/src/components/input.vue
+++ b/ui/src/components/input.vue
@@ -2,7 +2,8 @@
   <label class="w-100 mb-0">
     {{ label }}
     <ValidationProvider :name="label" :rules="rules" v-slot="{ errors }">
-      <b-input :placeholder="placeholder" :type="type" v-bind="$attrs" v-on="$listeners" :class="errors.length > 0 ? 'border-danger' : ''"/>
+      <b-form-datepicker v-if="type === 'date'" :placeholder="placeholder" :date-format-options="{ month: '2-digit', year: '2-digit', day: undefined, weekday: undefined }" v-bind="$attrs" v-on="$listeners" :class="errors.length > 0 ? 'border-danger' : ''"/>
+      <b-input v-else :placeholder="placeholder" :type="type" v-bind="$attrs" v-on="$listeners" :class="errors.length > 0 ? 'border-danger' : ''"/>
       <span class="text-danger">{{ errors[0]}}</span>
     </ValidationProvider>
   </label>
diff --git a/ui/src/components/navbar.vue b/ui/src/components/navbar.vue
index 0a0270c..8cfb66c 100644
--- a/ui/src/components/navbar.vue
+++ b/ui/src/components/navbar.vue
@@ -4,13 +4,13 @@
         id="navbar"
         v-if="loggedIn"
     >
-        <div class="d-flex align-items-center">
+        <a class="d-flex align-items-center text-decoration-none" href="/my-bills">
             <img
                 src="@/assets/creditcard.png"
                 alt="Self Service Portal Logo"
             />
             <h4 class="ml-3 mb-0">Self Service Portal</h4>
-        </div>
+        </a>
         <b-navbar-nav class="ml-auto">
       <b-nav-item right class="mr-3" id="support" :to="{ name: 'Help' }">
                 <img
diff --git a/ui/src/router/router.js b/ui/src/router/router.js
index b5cc9e4..23157f6 100644
--- a/ui/src/router/router.js
+++ b/ui/src/router/router.js
@@ -33,6 +33,9 @@ const routes = [
         path: "/my-bills/:id",
         name: "PayBill",
         component: PayBill,
+        meta: {
+            title: "Pay Bill",
+        },
         beforeEnter: isAuthenticated,
     },
     {
diff --git a/ui/src/styles/style.scss b/ui/src/styles/style.scss
index 733818a..690ad7a 100644
--- a/ui/src/styles/style.scss
+++ b/ui/src/styles/style.scss
@@ -28,12 +28,21 @@ h4 {
     color: $White;
 }
 
+.black-text {
+    color: black;
+}
+
 .email {
     color: dodgerblue;
     text-decoration: dodgerblue underline;
     cursor: pointer;
 }
 
+.btn-primary {
+    border-color: $Navy-Blue;
+    background-color: $Navy-Blue;
+}
+
 .page-item.active .page-link {
     background-color: $Navy-Blue !important;
     border-color: $Navy-Blue !important;
diff --git a/ui/src/views/MyBills.vue b/ui/src/views/MyBills.vue
index f2b7709..55e7547 100644
--- a/ui/src/views/MyBills.vue
+++ b/ui/src/views/MyBills.vue
@@ -29,8 +29,8 @@
       <template #cell(cost)="cell">
         {{ formatCost(cell.item.cost) }}
       </template>
-      <template #cell(actions)>
-        <b-link>Pay Bill</b-link>
+      <template #cell(actions)="cell">
+        <b-link :to="{ name: 'PayBill', params: { id: cell.item._id }}">Pay Bill</b-link>
       </template>
     </b-table>
     <div class="d-flex justify-content-between align-items-baseline">
@@ -49,6 +49,7 @@
 import Vue from 'vue'
 import api from "@/api/api";
 import { formatDate, formatCost } from "@/utilities";
+import store from "@/store/store";
 
 export default Vue.extend({
   name: 'MyBills', //Sets the name of file.
@@ -95,7 +96,7 @@ export default Vue.extend({
      * Gets a list of bills from the api and sets the bills and totalcount variables.
      */
     async getBills() {
-      const data = await api.getAllBills({limit: this.limit, offset: parseInt(this.offset - 1)}) //TODO: Filter by DriverId
+      const data = await api.getAllBills({driver: store.getters.user.id, paid: false, limit: this.limit, offset: parseInt(this.offset - 1)})
       this.bills = data.bills
       this.totalCount = data.count
     }
diff --git a/ui/src/views/PayBill.vue b/ui/src/views/PayBill.vue
index 39d531e..b0526c0 100644
--- a/ui/src/views/PayBill.vue
+++ b/ui/src/views/PayBill.vue
@@ -1,13 +1,108 @@
 <template>
-  <div>
-    Pay Bill
+  <div class="mt-4">
+    <h1 class="mb-4">Payment</h1>
+    <b-card class="mb-3">
+      Your total charge {{ formatCost(bill.cost) }} for the journey on {{ formatDate(bill.journey.journeyDateTime)}}
+    </b-card>
+    <div class="d-flex">
+      <b-card class="mr-3 w-50">
+        <h4 class="black-text">Payment Details</h4>
+        <ValidationObserver ref="observer">
+          <Input label="Cardholder's name" rules="required" placeholder="Cardholder's name" v-model="paymentDetails.cardholderName" />
+          <Input label="Card number" rules="required" placeholder="Card number" @keypress="onlyNumber" class="mt-2" :maxlength="16" v-model="paymentDetails.cardNumber"/>
+          <div class="d-flex mt-2">
+            <Input label="CVV" rules="required" placeholder="CVV" class="mr-3" @keypress="onlyNumber" :maxlength="3" v-model="paymentDetails.cvv"/>
+            <Input label="Expiry Date" type="date" rules="required" placeholder="Expiry Date" class="w-50" v-model="paymentDetails.expiryDate"/>
+          </div>
+        </ValidationObserver>
+      </b-card>
+      <div class="w-50">
+        <b-card class="mb-2">
+          <h4 class="black-text pb-2">Journey Details</h4>
+          <p>Entry location: {{ bill.journey.entryLocation.name }}</p>
+          <p>Exit location: {{ bill.journey.exitLocation.name }}</p>
+          <p>Registration Number: {{ bill.journey.regNumber }}</p>
+          <p class="mb-0">Journey date: {{ formatDate(bill.journey.journeyDateTime) }}</p>
+        </b-card>
+        <div class="d-flex mt-2">
+          <b-button class="mr-2 w-100" variant="primary" @click="payBill">Pay</b-button>
+          <b-button class="w-25" variant="primary" @click="payBillViaPayPal">PayPal</b-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="js">
 import Vue from 'vue';
+import api from '../api/api'
+import { formatCost, formatDate } from "@/utilities";
+import Input from '../components/input'
+import { ValidationObserver } from 'vee-validate'
 
 export default Vue.extend({
-  name: "PayBill" //Sets the name of file.
+  name: "PayBill", //Sets the name of file.
+  components: { Input, ValidationObserver }, //Import the custom input field
+  data() {
+    return {
+      bill: {
+        journey: {
+          journeyDateTime: '',
+          entryLocation: {
+            name: ''
+          },
+          exitLocation: {
+            name: ''
+          }
+        }
+      }, //Stores the bill
+      paymentDetails: {
+        cardholderName: '',
+        cardNumber: '',
+        cvv: '',
+        expiryDate: ''
+      }
+    }
+  },
+  methods: {
+    formatDate, //Import the format date helper function to be used in the template.
+    formatCost, //Import the format cost helper function to be used in the template.
+    async payBillViaPayPal() {
+      api.payBill(this.bill.id).catch((error) => {
+        this.$bvToast.toast(error.message, {
+          title: 'Invalid email or password',
+          variant: 'danger',
+          solid: true
+        })
+      });
+
+      await this.$router.push({name: 'MyBills'})
+    },
+    async payBill() {
+      const valid = await this.$refs.observer.validate()
+      if (!valid) {
+        return
+      }
+      
+      api.payBill(this.bill.id).catch((error) => {
+        this.$bvToast.toast(error.message, {
+          title: 'Invalid email or password',
+          variant: 'danger',
+          solid: true
+        })
+      });
+      
+      await this.$router.push({name: 'MyBills'})
+    },
+    onlyNumber($event) {
+      let keyCode = ($event.keyCode ? $event.keyCode : $event.which); //Get inputted keycode
+      if ((keyCode < 48 || keyCode > 57)) { // checks if the value is a letter or .
+        $event.preventDefault();
+      }
+    }
+  },
+  async created() {
+    this.bill = await api.getBillById(this.$route.params.id) //Gets the selected bill by
+  }
 })
 </script>
\ No newline at end of file

From 330d21a3132c49a517236879e364d736077b532a Mon Sep 17 00:00:00 2001
From: Jake <jacobminor@hotmail.co.uk>
Date: Fri, 4 Feb 2022 16:46:51 +0000
Subject: [PATCH 2/3] HT-12 Filter My Bills paid by unpaid bills and payment
 history

---
 server/utilities.js      | 14 +++++++-------
 ui/src/styles/style.scss | 19 +++++++++----------
 ui/src/views/MyBills.vue | 17 ++++++++++++++---
 ui/src/views/PayBill.vue |  4 ++--
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/server/utilities.js b/server/utilities.js
index ae96aba..192c3fe 100644
--- a/server/utilities.js
+++ b/server/utilities.js
@@ -7,12 +7,12 @@ module.exports = class Utilities {
   return (haversine(journey.entryLocation.coordinates, journey.exitLocation.coordinates) * this.costPerMile)
  }
 
-  static convertToObjectId(id) {
-   if (objectId.isValid(id)) {
-    return objectId(id)
-   }
-   throw new httpError(400, "ID is not valid.")
+ static convertToObjectId(id) {
+  if (objectId.isValid(id)) {
+   return objectId(id)
   }
-  
-  static costPerMile = 0.01
+  throw new httpError(400, "ID is not valid.")
+ }
+ 
+ static costPerMile = 0.01
 }
\ No newline at end of file
diff --git a/ui/src/styles/style.scss b/ui/src/styles/style.scss
index 690ad7a..bdd9ed5 100644
--- a/ui/src/styles/style.scss
+++ b/ui/src/styles/style.scss
@@ -1,9 +1,10 @@
-@import '~bootstrap/dist/css/bootstrap.css';
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
-
-$Navy-Blue: #3c4253;
+$Navy-Blue: #3c4253;
 $White: white;
 
+$theme-colors: (
+        "primary": $Navy-Blue
+);
+
 .navbar {
     background-color: $Navy-Blue;
 }
@@ -38,11 +39,6 @@ h4 {
     cursor: pointer;
 }
 
-.btn-primary {
-    border-color: $Navy-Blue;
-    background-color: $Navy-Blue;
-}
-
 .page-item.active .page-link {
     background-color: $Navy-Blue !important;
     border-color: $Navy-Blue !important;
@@ -52,4 +48,7 @@ h4 {
     .container {
         max-width: 75% !important;
     }
-}
\ No newline at end of file
+}
+
+@import '~bootstrap/scss/bootstrap';
+@import '~bootstrap-vue/src/index.scss';
\ No newline at end of file
diff --git a/ui/src/views/MyBills.vue b/ui/src/views/MyBills.vue
index 55e7547..969aed1 100644
--- a/ui/src/views/MyBills.vue
+++ b/ui/src/views/MyBills.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="mt-4">
     <h1 class="mb-4">My Bills</h1>
+    <b-form-group>
+      <b-form-radio-group buttons button-variant="outline-primary" v-model="page" :options="pages"
+                          @change="getBills" />
+    </b-form-group>
     <b-table id="bills-table" :items="filteredBills" :fields="fields" show-empty empty-text="No bills match the filter." responsive striped>
       <template #head(entrylocation)="head" >
         {{head.label}}
@@ -30,7 +34,7 @@
         {{ formatCost(cell.item.cost) }}
       </template>
       <template #cell(actions)="cell">
-        <b-link :to="{ name: 'PayBill', params: { id: cell.item._id }}">Pay Bill</b-link>
+        <b-link :to="{ name: 'PayBill', params: { id: cell.item._id }}" v-if="page !== 'Payment History'">Pay Bill</b-link>
       </template>
     </b-table>
     <div class="d-flex justify-content-between align-items-baseline">
@@ -63,7 +67,9 @@ export default Vue.extend({
         entryLocation: '', //Stores the entry location filter.
         exitLocation: '', //Stores the exit location filter.
         carRegistrationNumber: '' //Stores the car registration number filter.
-      }
+      },
+      pages: ['Unpaid Bills', 'Payment History'],
+      page: ''
     }
   },
   computed: {
@@ -96,7 +102,11 @@ export default Vue.extend({
      * Gets a list of bills from the api and sets the bills and totalcount variables.
      */
     async getBills() {
-      const data = await api.getAllBills({driver: store.getters.user.id, paid: false, limit: this.limit, offset: parseInt(this.offset - 1)})
+      let paid = true
+      if(this.page === 'Unpaid Bills'){
+        paid = false
+      }
+      const data = await api.getAllBills({driver: store.getters.user.id, paid: paid, limit: this.limit, offset: parseInt(this.offset - 1)})
       this.bills = data.bills
       this.totalCount = data.count
     }
@@ -105,6 +115,7 @@ export default Vue.extend({
    * Gets a list of bills on create.
    */
   async created() {
+    this.page = 'Unpaid Bills'
     await this.getBills()
   }
 })
diff --git a/ui/src/views/PayBill.vue b/ui/src/views/PayBill.vue
index b0526c0..a97cc33 100644
--- a/ui/src/views/PayBill.vue
+++ b/ui/src/views/PayBill.vue
@@ -68,7 +68,7 @@ export default Vue.extend({
     formatDate, //Import the format date helper function to be used in the template.
     formatCost, //Import the format cost helper function to be used in the template.
     async payBillViaPayPal() {
-      api.payBill(this.bill.id).catch((error) => {
+      api.payBill(this.bill._id).catch((error) => {
         this.$bvToast.toast(error.message, {
           title: 'Invalid email or password',
           variant: 'danger',
@@ -84,7 +84,7 @@ export default Vue.extend({
         return
       }
       
-      api.payBill(this.bill.id).catch((error) => {
+      api.payBill(this.bill._id).catch((error) => {
         this.$bvToast.toast(error.message, {
           title: 'Invalid email or password',
           variant: 'danger',

From b45ad5924a24d957c1ce7a5982c23b448a8c6bb7 Mon Sep 17 00:00:00 2001
From: Jake <jacobminor@hotmail.co.uk>
Date: Fri, 4 Feb 2022 16:51:56 +0000
Subject: [PATCH 3/3] HT-12 Fix code inconsistencies

---
 ui/src/views/PayBill.vue | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/ui/src/views/PayBill.vue b/ui/src/views/PayBill.vue
index a97cc33..9b699ef 100644
--- a/ui/src/views/PayBill.vue
+++ b/ui/src/views/PayBill.vue
@@ -47,20 +47,20 @@ export default Vue.extend({
     return {
       bill: {
         journey: {
-          journeyDateTime: '',
+          journeyDateTime: '', //Completed Journey Date and Time.
           entryLocation: {
-            name: ''
+            name: '' //Name of the entry location.
           },
           exitLocation: {
-            name: ''
+            name: '' //Name of the exit location.
           }
         }
-      }, //Stores the bill
+      }, //Stores the bill.
       paymentDetails: {
-        cardholderName: '',
-        cardNumber: '',
-        cvv: '',
-        expiryDate: ''
+        cardholderName: '', //Cards Cardholder name.
+        cardNumber: '', //Cards card number.
+        cvv: '', //Cards CVV number.
+        expiryDate: '' //Cards expiry date.
       }
     }
   },
@@ -69,8 +69,8 @@ export default Vue.extend({
     formatCost, //Import the format cost helper function to be used in the template.
     async payBillViaPayPal() {
       api.payBill(this.bill._id).catch((error) => {
-        this.$bvToast.toast(error.message, {
-          title: 'Invalid email or password',
+        this.$bvToast.toast(error.message, { //Create red toast to show error.
+          title: 'Payment Failed',
           variant: 'danger',
           solid: true
         })
@@ -79,20 +79,20 @@ export default Vue.extend({
       await this.$router.push({name: 'MyBills'})
     },
     async payBill() {
-      const valid = await this.$refs.observer.validate()
+      const valid = await this.$refs.observer.validate() //Check if the payment details are valid.
       if (!valid) {
         return
       }
       
       api.payBill(this.bill._id).catch((error) => {
-        this.$bvToast.toast(error.message, {
-          title: 'Invalid email or password',
+        this.$bvToast.toast(error.message, { //Create red toast to show error.
+          title: 'Payment Failed',
           variant: 'danger',
           solid: true
         })
       });
       
-      await this.$router.push({name: 'MyBills'})
+      await this.$router.push({name: 'MyBills'}) //Return user to the my bills page.
     },
     onlyNumber($event) {
       let keyCode = ($event.keyCode ? $event.keyCode : $event.which); //Get inputted keycode