Small Fixes and Changes

package-lock.json

       "integrity": "sha512-TigfiZUs7SN3Z6uxKilqJUtYxte8vp0F4QxabCli6hkKPqU97JzAZc3P7AL6omkRAd2DMI26fOrIGjuALTvXww==",
       "dev": true
     },
+    "vue-currency-input": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-1.22.1.tgz",
+      "integrity": "sha512-5cdMt5lHFx+YFeljAAp8r2gI5S6oykywER5xiFsryk4XSSklezdv+v4VnKCgWaYyZmQ69x0Qs5qqrxindoFjTg=="
+    },
     "vue-disable-autocomplete": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vue-disable-autocomplete/-/vue-disable-autocomplete-0.0.4.tgz",

package.json

     "v-file-upload": "^3.1.7",
     "vue": "^2.6.11",
     "vue-carousel": "^0.18.0",
+    "vue-currency-input": "^1.22.1",
     "vue-disable-autocomplete": "0.0.4",
     "vue-eva-icons": "^1.1.1",
     "vue-js-modal": "^1.3.33",

public/css/newStyle.css

 #contact {
   padding: 10px 0;
   background-color: #efefef;
+  scroll-behavior: smooth;
 }
 
 #contact p {

src/components/home/carouselSection.vue

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
   .introContentAdjust {
-    margin-top: -15px !important;
+    margin-top: 60px !important;
   }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
+  .introContentAdjust {
+    margin-top: 90px !important;
+  }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
   .introContentAdjust {
-    margin-top: 0px !important;
+    margin-top: 80px !important;
   }
 }
 </style>

src/components/misc/bondCaclculator.vue

   <div>
     <h2 id="modal-bondcal">Bond Calculator</h2>
     <p>Calculate the value of the property you could buy</p>
-    <input
-      type="text"
-      class="form-control mb-2"
-      name="income"
-      id="gross-income"
-      placeholder="Gross Monthly Household Income"
-      v-model="amount"
-      @input="displayValue()"
-    />
-    <input
-      type="text"
-      class="form-control mb-2"
-      name="deposit"
-      id="deposit"
-      placeholder="Deposit Amount – May be Required"
-      v-model="deposit"
-      @input="displayDeposit()"
-    />
+    <currency-input :value="amount" @input="amount = $event" class="form-control mb-2" />
+    <currency-input :value="deposit" @input="deposit = $event" class="form-control mb-2" />
     <div class="slidecontainer mt-4">
       <input type="range" min="5" max="30" value="10" class="slider" id="myRange" v-model="term" />
     </div>
     <p>{{ term }} Years</p>
+    <div class="percent uniSelectLabel" style="right:65px;"></div>
     <input
-      type="text"
+      type="number"
       class="form-control mb-2"
+      style="width:260px"
       name="interest"
       id="interest"
       placeholder="Interest Rate (Percent)"
 export default {
   data() {
     return {
-      amount: "R1000000",
-      deposit: "R0",
+      amount: 1000000,
+      deposit: 0,
       term: 10,
       rate: 7,
       isInputActive: false
   props: ["value"],
   methods: {
     calculate() {
-      var rate = this.calcRate();
+      var rate = this.rate / 100 / 12;
       var years = this.term * 12;
       var topPart = rate * Math.pow(1 + rate, years);
       var bottomPart = Math.pow(1 + rate, years) - 1;
       var netAmnt = this.amount - this.deposit;
       var bond = (netAmnt * topPart) / bottomPart;
-    },
-    calcRate() {
-      var answer = this.rate / 100 / 12;
-      return answer;
-    },
-    displayValue() {
-      const formatter = new Intl.NumberFormat("en-US", {
-        minimumFractionDigits: 2
-      });
-      if (this.amount.charAt(0) !== "R") {
-        this.amount = "R" + formatter.format(this.amount);
-        if (this.amount < 1) {
-          this.amount = "R" + 0;
-        }
-      }
-    },
-    displayDeposit() {
-      if (this.deposit.charAt(0) !== "R") {
-        if (this.deposit < 1) {
-          this.deposit = "R" + 0;
-        }
-      }
     }
   },
   computed: {
       var topPart = rate * Math.pow(1 + rate, years);
       var bottomPart = Math.pow(1 + rate, years) - 1;
 
-      var netAmnt = parseFloat(this.amount.substring(1)) - parseFloat(this.deposit.substring(1));
+      var netAmnt = parseFloat(this.amount) - parseFloat(this.deposit);
       var bond = (netAmnt * topPart) / bottomPart;
       if (isNaN(bond)) {
         return 0;
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.percent::after {
+  content: "%";
+}
+</style>

src/components/propertyManagement/rentalManagement/contentSection.vue

       <div class="row">
         <div class="col-md-6"></div>
         <div class="col-md-6">
-          <h4>Contact us for a quote</h4>
+          <button @click="$vuetify.goTo('#contact', { duration: 2000, easing: 'easeInOutCubic' })">
+            <h4>Contact us for a quote</h4>
+          </button>
         </div>
       </div>
 

src/components/propertyManagement/sectionalTitle/ourServicesSection.vue

       <div class="row mt-2">
         <div class="col-md-6"></div>
         <div class="col-md-6">
-          <h4>Contact us for a quote</h4>
+          <button @click="$vuetify.goTo('#contact', { duration: 2000, easing: 'easeInOutCubic' })">
+            <h4>Contact us for a quote</h4>
+          </button>
         </div>
       </div>
       <div class="row">
 </template>
 
 <script>
-export default {};
+/* eslint-disable */
+
+export default {
+  methods: {
+    scrollToAnchor() {
+      var element = document.getElementById("contact");
+      var top = element.offsetTop;
+      window.scrollTo(0, top, { easing: "ease-in-out" });
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

src/components/shared/footerSection.vue

   <div>
     <section
       id="contact"
+      ref="contactFooter"
       data-aos="fade-up"
       data-aos-anchor-placement="top-bottom"
       data-aos-delay="150"

src/components/shared/navBar.vue

                       </li>
                       <hr />
                       <li>
-                        <a @click="routerGoTo('/property/commercial/new/Sale')">To Sell</a>
+                        <a href="#" @click="routerGoTo('/property/commercial/new/Sale')">To Sell</a>
                       </li>
                       <li>
-                        <a @click="routerGoTo('/property/commercial/new/Rental')">To Rent</a>
+                        <a href="#" @click="routerGoTo('/property/commercial/new/Rental')"
+                          >To Rent</a
+                        >
                       </li>
                     </ul>
                   </li>
                       </li>
                       <hr />
                       <li>
-                        <a @click="routerGoTo('/property/residential/new/Sale')">To Sell</a>
+                        <a href="#" @click="routerGoTo('/property/residential/new/Sale')"
+                          >To Sell</a
+                        >
                       </li>
                       <li>
-                        <a @click="routerGoTo('/property/residential/new/Rental')">To Rent</a>
+                        <a href="#" @click="routerGoTo('/property/residential/new/Rental')"
+                          >To Rent</a
+                        >
                       </li>
                     </ul>
                   </li>
 
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
+  .phoneIconDetail {
+    display: none;
+  }
+
+  .bondCalculatorDetail {
+    display: none;
+  }
   #header {
-    min-height: 145px;
+    min-height: 175px;
   }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
+  .phoneIconDetail {
+    display: initial;
+  }
+
+  .bondCalculatorDetail {
+    display: initial;
+  }
   #header {
     min-height: 120px;
   }

src/components/timeshare/buy/carouselSection.vue

     <div class="container">
       <div class="row">
         <div align="left" class="col-sm-12 col-md-8">
-          <div class="intro-content box" style="margin-top:-5px">
-            <h2>Find your Timeshare</h2>
-            <p>
-              Please specify one or more details to view the available weeks and then select the
-              weeks that interest you on the resort page.
-            </p>
-            <div class="row">
-              <div class="form-group col-md-6">
-                <div class="input-group">
-                  <label v-if="!searchParams.region" class="uniSelectLabel" for="region">REGION</label>
-                  <select
-                    class="form-control uniSelect"
-                    name="region"
-                    id="region"
-                    v-model="searchParams.region"
-                    @change="regionChange"
-                  >
-                    <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
-                  </select>
+          <div class="intro-content box" style="margin-top:55px">
+            <div style="margin-top:-30px">
+              <h2>Find your Timeshare</h2>
+              <p>
+                Please specify one or more details to view the available weeks and then select the
+                weeks that interest you on the resort page.
+              </p>
+              <div class="row">
+                <div class="form-group col-md-6">
+                  <div class="input-group">
+                    <label v-if="!searchParams.region" class="uniSelectLabel" for="region"
+                      >REGION</label
+                    >
+                    <select
+                      class="form-control uniSelect"
+                      name="region"
+                      id="region"
+                      v-model="searchParams.region"
+                      @change="regionChange"
+                    >
+                      <option v-for="(region, r) in regions" :key="r">{{
+                        region.regionName
+                      }}</option>
+                    </select>
+                  </div>
+                  <br />
+                  <label>DATE FROM</label>
+                  <input
+                    type="date"
+                    name="arrival-to"
+                    class="form-control my-1 uniSelect"
+                    id="arrival-to"
+                    placeholder="Date From"
+                    v-model="filter.date"
+                  />
                 </div>
-                <br />
-                <label>DATE FROM</label>
-                <input
-                  type="date"
-                  name="arrival-to"
-                  class="form-control my-1 uniSelect"
-                  id="arrival-to"
-                  placeholder="Date From"
-                  v-model="filter.date"
-                />
-              </div>
-              <div class="form-group col-md-6">
-                <div class="input-group">
-                  <label
-                    v-if="!searchParams.resort"
-                    class="uniSelectLabel"
-                    for="weekInfoResortSelect"
-                  >RESORT</label>
-                  <select
-                    id="weekInfoResortSelect"
-                    class="form-control uniSelect"
-                    v-model="searchParams.resort"
-                  >
-                    <option
-                      v-for="(resort, r) in filteredResort"
-                      :key="r"
-                      :value="resort"
-                      @change="resortChange"
+                <div class="form-group col-md-6">
+                  <div class="input-group">
+                    <label
+                      v-if="!searchParams.resort"
+                      class="uniSelectLabel"
+                      for="weekInfoResortSelect"
+                      >RESORT</label
+                    >
+                    <select
+                      id="weekInfoResortSelect"
+                      class="form-control uniSelect"
+                      v-model="searchParams.resort"
                     >
-                      {{
-                      resort.resortName
-                      }}
-                    </option>
-                  </select>
+                      <option
+                        v-for="(resort, r) in filteredResort"
+                        :key="r"
+                        :value="resort"
+                        @change="resortChange"
+                      >
+                        {{ resort.resortName }}
+                      </option>
+                    </select>
+                  </div>
+                  <br />
+                  <label>DATE TO</label>
+                  <input
+                    type="date"
+                    name="arrival-to"
+                    class="form-control my-1 uniSelect"
+                    id="arrival-to"
+                    placeholder="Date To"
+                    v-model="filter.ddate"
+                  />
                 </div>
-                <br />
-                <label>DATE TO</label>
-                <input
-                  type="date"
-                  name="arrival-to"
-                  class="form-control my-1 uniSelect"
-                  id="arrival-to"
-                  placeholder="Date To"
-                  v-model="filter.ddate"
-                />
               </div>
+              <button class="btn-solid-blue" @click="Search()">
+                <i class="fa fa-search"></i> SEARCH
+              </button>
             </div>
-            <button class="btn-solid-blue" @click="Search()">
-              <i class="fa fa-search"></i> SEARCH
-            </button>
           </div>
         </div>
       </div>
 import { mapState, mapActions, mapGetters } from "vuex";
 export default {
   components: {
-    carousel,
+    carousel
   },
   data() {
     return {
       region: "",
       resort: "",
       priceMin: undefined,
-      priceMax: undefined,
+      priceMax: undefined
     };
   },
   methods: {
     ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"]),
     regionChange(item) {
-      let reg = this.regions.find((r) => r.regionName === item.target.value);
+      let reg = this.regions.find(r => r.regionName === item.target.value);
       this.regionObj = reg;
     },
     resortChange(item) {
-      let res = this.resorts.find((r) => r.resortName === item.target.value);
+      let res = this.resorts.find(r => r.resortName === item.target.value);
       this.resortObj = res;
     },
     Search() {
       }
 
       this.$router.push(`/resort/${this.searchParams.resort.resortCode}`);
-    },
+    }
   },
   computed: {
     ...mapState("timeshare", ["resorts", "regions", "detailedRegion"]),
       let list = [];
       if (this.searchParams.region && this.searchParams.region !== "") {
         const item = this.detailedRegion.find(
-          (region) => region.region.regionCode === this.regionObj.regionCode
+          region => region.region.regionCode === this.regionObj.regionCode
         );
         if (item) {
           list = item.children;
       } else {
         list = this.resorts;
       }
-      return _.sortBy(list, (x) => x.resortName);
-    },
+      return _.sortBy(list, x => x.resortName);
+    }
   },
   created() {
     this.initTimeshare(this.weekId);
     this.searchParams.resort = null;
     this.filter.date = null;
     this.filter.ddate = null;
-  },
+  }
 };
 </script>
 

src/components/timeshare/buy/searchSection.vue

   <section>
     <div class="container pb-5">
       <div class="row" id="search">
-        <div class="col-md-4 panel-left p-5" style="margin-top:-20px">
+        <div class="col-md-4 panel-left p-5" style="margin-top:-25px;">
           <h2>Find Timeshare</h2>
 
           <div class="input-group">
               v-model="selectedResort"
               @change="resortEvent()"
             >
-              <option
-                v-for="(resort, i) in selectedRegion.resorts"
-                :key="i"
-                :value="resort"
-              >{{ resort.resortName }}</option>
+              <option v-for="(resort, i) in selectedRegion.resorts" :key="i" :value="resort">{{
+                resort.resortName
+              }}</option>
             </select>
           </div>
           <div v-else class="input-group my-1">
 export default {
   name: "TimeshareToBuy",
   components: {
-    Alert,
+    Alert
   },
   data() {
     return {
       bedrooms: null,
       maxPrice: null,
       dateFrom: "",
-      dateTo: "",
+      dateTo: ""
     };
   },
   mounted() {
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
     },
     regions() {
-      return _.sortBy(this.detailedRegion, (r) => r.regionName);
-    },
+      return _.sortBy(this.detailedRegion, r => r.regionName);
+    }
   },
   methods: {
     ...mapActions("region", ["init", "getAvail", "getRegions", "getResort"]),
       if (this.selectedResort) {
         this.$router.push(`/resort/${this.selectedResort.resortCode}`);
       }
-    },
-  },
+    }
+  }
 };
 </script>
 

src/main.js

 import router from "./router";
 import store from "./store";
 import * as VueGoogleMaps from "vue2-google-maps";
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.min.css";
+import VueCurrencyInput from "vue-currency-input";
 
 Vue.use(EvaIcons);
+Vue.use(Vuetify);
 Vue.use(VueGoogleMaps, {
   load: {
     key: "AIzaSyD8k_Kwml_C8IDfs-gX8JFV8acli3L9cAE",
     // v: '3.26',
   }
 });
+const pluginOptions = {
+  /* see config reference */
+  globalOptions: { currency: ["ZAR", null, { prefix: "R" }][2], locale: "en-us" }
+};
 Vue.config.productionTip = false;
 //axios.defaults.baseURL = "http://localhost:57260";
 axios.defaults.baseURL = "http://training.provision-sa.com:82";
 if (token) {
   Vue.prototype.$http.defaults.headers.common.Authorization = token;
 }
-
+Vue.use(VueCurrencyInput, pluginOptions);
 router.beforeEach((to, from, next) => {
   if (to.matched.some(record => record.meta.requiresAuth)) {
     if (store.getters.isLoggedIn) {

src/router/index.js

 /* eslint-disable import/prefer-default-export */
+/* eslint-disable */
 import Vue from "vue";
 import Router from "vue-router";
 
 export default new Router({
   // eslint-disable-next-line no-unused-vars
   scrollBehavior(to, from, savedPosition) {
-    return {
-      x: 0,
-      y: 0
-    };
+    if (to.hash) {
+      return { selector: to.hash };
+    } else {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
   },
   routes: [
     {