Fix to merge issue

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: 60px !important;
+    margin-top: -15px !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: 80px !important;
+    margin-top: 0px !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>
-    <currency-input :value="amount" @input="amount = $event" class="form-control mb-2" />
-    <currency-input :value="deposit" @input="deposit = $event" class="form-control mb-2" />
+    <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()"
+    />
     <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="number"
+      type="text"
       class="form-control mb-2"
-      style="width:260px"
       name="interest"
       id="interest"
       placeholder="Interest Rate (Percent)"
 export default {
   data() {
     return {
-      amount: 1000000,
-      deposit: 0,
+      amount: "R1000000",
+      deposit: "R0",
       term: 10,
       rate: 7,
       isInputActive: false
   props: ["value"],
   methods: {
     calculate() {
-      var rate = this.rate / 100 / 12;
+      var rate = this.calcRate();
       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) - parseFloat(this.deposit);
+      var netAmnt = parseFloat(this.amount.substring(1)) - parseFloat(this.deposit.substring(1));
       var bond = (netAmnt * topPart) / bottomPart;
       if (isNaN(bond)) {
         return 0;
 };
 </script>
 
-<style lang="scss" scoped>
-.percent::after {
-  content: "%";
-}
-</style>
+<style lang="scss" scoped></style>

src/components/propertyManagement/rentalManagement/contentSection.vue

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

src/components/propertyManagement/sectionalTitle/ourServicesSection.vue

       <div class="row mt-2">
         <div class="col-md-6"></div>
         <div class="col-md-6">
-          <button @click="$vuetify.goTo('#contact', { duration: 2000, easing: 'easeInOutCubic' })">
-            <h4>Contact us for a quote</h4>
-          </button>
+          <h4>Contact us for a quote</h4>
         </div>
       </div>
       <div class="row">
 </template>
 
 <script>
-/* eslint-disable */
-
-export default {
-  methods: {
-    scrollToAnchor() {
-      var element = document.getElementById("contact");
-      var top = element.offsetTop;
-      window.scrollTo(0, top, { easing: "ease-in-out" });
-    }
-  }
-};
+export default {};
 </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 href="#" @click="routerGoTo('/property/commercial/new/Sale')">To Sell</a>
+                        <a @click="routerGoTo('/property/commercial/new/Sale')">To Sell</a>
                       </li>
                       <li>
-                        <a href="#" @click="routerGoTo('/property/commercial/new/Rental')"
-                          >To Rent</a
-                        >
+                        <a @click="routerGoTo('/property/commercial/new/Rental')">To Rent</a>
                       </li>
                     </ul>
                   </li>
                       </li>
                       <hr />
                       <li>
-                        <a href="#" @click="routerGoTo('/property/residential/new/Sale')"
-                          >To Sell</a
-                        >
+                        <a @click="routerGoTo('/property/residential/new/Sale')">To Sell</a>
                       </li>
                       <li>
-                        <a href="#" @click="routerGoTo('/property/residential/new/Rental')"
-                          >To Rent</a
-                        >
+                        <a @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: 175px;
+    min-height: 145px;
   }
 }
 
 /* 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: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 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>
-                <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"
+                <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"
                     >
-                      <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"
-                  />
+                      {{
+                      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>
-              <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:-25px;">
+        <div class="col-md-4 panel-left p-5" style="margin-top:-20px">
           <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) {
-    if (to.hash) {
-      return { selector: to.hash };
-    } else {
-      return {
-        x: 0,
-        y: 0
-      };
-    }
+    return {
+      x: 0,
+      y: 0
+    };
   },
   routes: [
     {