Merge branch 'master' into master

package-lock.json

       "integrity": "sha512-TigfiZUs7SN3Z6uxKilqJUtYxte8vp0F4QxabCli6hkKPqU97JzAZc3P7AL6omkRAd2DMI26fOrIGjuALTvXww==",
       "dev": true
     },
+    "vue-currency-input": {
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-1.22.3.tgz",
+      "integrity": "sha512-vrOaaiCSG8Hh7Fw7CYROIymFvVprWKaze3h67sihqJ4QAI9F+YElTQYv0fJwFK1NkKUS8H/MvAL0mwg9qrUfgg=="
+    },
     "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.3",
     "vue-disable-autocomplete": "0.0.4",
     "vue-eva-icons": "^1.1.1",
     "vue-js-modal": "^1.3.33",

src/components/admin/fees/feesPage.vue

+<template>
+  <main id="main" style="padding-top:50px; padding-bottom:100px">
+    <div class="container">
+      <div class="section-header">
+        <h2>Fees</h2>
+      </div>
+      <listingFee />
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import listingFee from "./listingFee";
+export default {
+  components: {
+    listingFee
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/admin/fees/listingFee.vue

+<template>
+  <section id="content">
+    <label for="fee" class="uniLabel">LISTING FEE</label>
+    <currency-input
+      onClick="this.setSelectionRange(0, this.value.length)"
+      name="fee"
+      :value="value"
+      @input="value = $event"
+      v-model="fee"
+      id="price"
+      class="form-control uniInput"
+    />
+    <button @click="saveListingFee" class="btn-solid-blue mt-4">Save</button>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions, mapGetters, mapState } from "vuex";
+export default {
+  data() {
+    return {
+      fee: 0.0
+    };
+  },
+  mounted() {
+    this.pullListingFee();
+  },
+  methods: {
+    ...mapActions("fees", ["retrieveListingFee", "setListingFee"]),
+    saveListingFee() {
+      var feeObj = {
+        amount: parseFloat(this.fee),
+        name: "Listing Fee"
+      };
+
+      this.setListingFee(feeObj);
+    },
+    async pullListingFee() {
+      await this.retrieveListingFee();
+      console.log(this.getListingFee);
+
+      this.fee = this.getListingFee.amount;
+    }
+  },
+  computed: {
+    ...mapGetters("fees", ["getListingFee"]),
+    ...mapState("fees", ["listingFee"])
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/admin/property/userDefinedGroupPage.vue

 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import userFields from './userDefinedField.vue';
-import listView from '../../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import userFields from "./userDefinedField.vue";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'UserDefinedGroup',
+  name: "UserDefinedGroup",
   components: {
     userFields,
-    listView,
+    listView
   },
   data() {
     return {
       item: {},
       showField: false,
-      columns: ['fieldName', 'fieldType', 'rank'],
+      columns: ["fieldName", "fieldType", "rank"]
     };
   },
   mounted() {
     }
   },
   computed: {
-    ...mapState('propertyAdmin', ['userDefinedGroup', 'userFields', 'userField']),
+    ...mapState("propertyAdmin", ["userDefinedGroup", "userFields", "userField"])
   },
   methods: {
-    ...mapActions('propertyAdmin', [
-      'getUserDefinedGroup',
-      'getUserFields',
-      'saveUserDefinedGroup',
-      'updateUserDefinedGroup',
-      'clearUserGroup',
-      'clearUserFields',
-      'clearUserField',
-      'saveUserField',
-      'updateUserField',
-      'deleteUserField',
+    ...mapActions("propertyAdmin", [
+      "getUserDefinedGroup",
+      "getUserFields",
+      "saveUserDefinedGroup",
+      "updateUserDefinedGroup",
+      "clearUserGroup",
+      "clearUserFields",
+      "clearUserField",
+      "saveUserField",
+      "updateUserField",
+      "deleteUserField"
     ]),
     SubmitData() {
       this.userDefinedGroup.fields = [];
       let reload = false;
       if (this.$route.params.id > 0) {
         this.updateUserDefinedGroup(this.userDefinedGroup);
-        this.userFields.forEach((fieldData) => {
+        this.userFields.forEach(fieldData => {
           if (fieldData.id === 0) {
             fieldData.groupId = this.userDefinedGroup.id;
             this.saveUserField(fieldData);
         });
       } else {
         reload = true;
-        this.userFields.forEach((fieldData) => {
+        this.userFields.forEach(fieldData => {
           this.userDefinedGroup.fields.push({
             fieldName: fieldData.fieldName,
             fieldType: fieldData.fieldType,
-            rank: fieldData.rank,
+            rank: fieldData.rank
           });
         });
         this.saveUserDefinedGroup(this.userDefinedGroup);
       }
-      this.$router.push('/userDefinedGroups/list');
+      this.$router.push("/userDefinedGroups/list");
       // this.$router.push({
       //   path: '/userDefinedGroups/list',
       //   query: { reload },
       this.showField = true;
     },
     Close() {
-      this.$router.push('/userDefinedGroups/list');
+      this.$router.push("/userDefinedGroups/list");
     },
     UpdateUserField(item) {
       if (item.id === 0) {
       this.showField = false;
     },
     Delete(item) {
+      console.log(item);
+
       if (item.id === 0) {
         this.userFields.pop(this.userFields.find(p => p.id === item.id));
       } else {
         this.deleteUserField(item.id);
       }
-    },
-  },
+    }
+  }
 };
 </script>

src/components/misc/bondCaclculator.vue

       type="text"
       class="form-control mb-2"
       name="income"
+      v-currency="{ currency: ['ZAR', null, { prefix: 'R' }][2] }"
       id="gross-income"
       placeholder="Gross Monthly Household Income"
       v-model="amount"
-      @input="displayValue()"
     />
     <input
       type="text"
       class="form-control mb-2"
       name="deposit"
+      v-currency="{ currency: ['ZAR', null, { prefix: 'R' }][2] }"
       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" />
 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;
         return bond;
       }
     },
-    calcRate() {
-      var answer = this.rate / 100 / 12;
-      return answer;
-    },
     grossIncome() {
       return this.totalMonthlyPayment * 3.335120643;
     }

src/components/property/ListProperty/contentSection.vue

         <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
           <li class="nav-item">
             <a
-              class="nav-link btn-solid-blue"
+              class="nav-link btn-solid-blue active"
               id="pills-residential-tab"
               data-toggle="pill"
               href="#pills-residential"

src/components/property/commercial/commercialSearchResults.vue

               <div class="portfolio-item">
                 <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
                 <h4>{{ currentProperty.displayPrice }}</h4>
-                <p>Address | 00m</p>
+                <p>
+                  {{ currentProperty.suburb }}, {{ currentProperty.city }} |
+                  {{ currentProperty.area }}M<sup>2</sup>
+                </p>
                 <p>{{ currentProperty.shortDescription }}</p>
                 <br />
 

src/components/property/commercial/createProperty/commercialCreateNew.vue

                     >{{ salesType }} Price</label
                   >
                 </div>
-                <input
-                  class="form-control uniInput"
-                  type="number"
+                <currency-input
+                  onClick="this.setSelectionRange(0, this.value.length)"
                   name="price"
-                  id="price"
+                  :value="value"
+                  @input="value = $event"
                   v-model="property.price"
+                  id="price"
+                  class="form-control uniInput"
                 />
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 />
               </div>
             </div>
-            <div class="row">
+            <div class="row my-3">
+              <br />
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetNumber">
+                  <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetNumber"
+                  id="unit"
+                  v-model="property.streetNumber"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetName">
+                  <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetName"
+                  id="unit"
+                  v-model="property.streetName"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.suburb">
+                  <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="suburb"
+                  id="unit"
+                  v-model="property.suburb"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.city">
+                  <label for="city" class="uniSelectLabel">CITY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="city"
+                  id="unit"
+                  v-model="property.city"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.province">
+                  <label for="province" class="uniSelectLabel">PROVINCE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="province"
+                  id="unit"
+                  v-model="property.province"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
               <div class="col-md-12">
-                <label for="Property Description" style="font-family:'muli'">Description:</label>
-                <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
-                <br />
-                <p>
-                  * A listing fee of R380 including VAT is payable to list your Property on the
-                  Uni-Vate website
-                </p>
+                <div v-if="!property.postalCode">
+                  <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="postalCode"
+                  id="unit"
+                  v-model="property.postalCode"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.country">
+                  <label for="country" class="uniSelectLabel">COUNTRY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="country"
+                  id="unit"
+                  v-model="property.country"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
               </div>
             </div>
           </div>
         </div>
-        <div class="row" />
-
+        <div class="row">
+          <div class="col-md-12">
+            <label for="Property Description" style="font-family:'muli'">Description:</label>
+            <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
+            <br />
+            <p>
+              * A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
+              Property on the Uni-Vate website
+            </p>
+          </div>
+        </div>
         <div class="section-header">
           <h2>Property Information</h2>
         </div>
-        <div class="row mb-3" v-for="item in propertyFields" :key="item.id">
-          <div class="col-md-6" v-for="field in item.fields" :key="field.id">
-            <div v-if="field.type === 'number'">
-              {{ field.name }}
-              <input type="number" class="form-control uniInput" v-model="field.value" />
-            </div>
-            <div v-else class="display:none"></div>
-            <div v-if="field.type === 'yesno'">
-              {{ field.name }}
-              <input type="checkbox" v-model="field.value" />
-            </div>
+        <div v-for="item in propertyFields" :key="item.id">
+          <div v-if="item.name === 'Commercial Fields'">
+            <UserField
+              :fields="item.fields"
+              :id="item.name"
+              @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              :fieldValues="item.fields"
+            />
           </div>
         </div>
         <div class="row">
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import { VueEditor } from "vue2-editor";
 import UserField from "../../propertyUserField.vue";
 import ImageLoad from "../../propertyImage.vue";
         this.property.userId = this.user.id;
       }
 
+      this.property.propertyUserFields.forEach(item => {
+        if (item.value === true) {
+          item.value = "yes";
+        } else if (item.value === false) {
+          item.value = "no";
+        }
+      });
+
+      console.log(this.property);
+
       this.saveProperty(this.property)
         .then(fulfilled => {
-          this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
+          this.$router.push(`/property/commercial/property/${fulfilled.data.id}`);
         })
         .catch(error => {
           console.log(error.message);
     },
     UpdateDefaultImage(item) {
       this.defaultImage = item;
+    },
+    clearAddress() {
+      this.addressSet = false;
+      this.property.streetNumber = undefined;
+      this.property.streetName = undefined;
+      this.property.suburb = undefined;
+      this.property.city = undefined;
+      this.property.province = undefined;
+      this.property.country = undefined;
+      this.property.postalCode = undefined;
+      this.property.addressUrl = undefined;
+      this.property.propertCoords = undefined;
     }
   },
   mounted() {
       "propertyImages"
     ]),
     ...mapState("authentication", ["user"]),
+    ...mapGetters("fees", ["getListingFee"]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;

src/components/property/commercial/singleView/contentSection.vue

           <div class="panel-left p-5" style="margin-top:140px;">
             <h2>Property Detial</h2>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
-            <p>{{ property.suburb }}, {{ property.city }}</p>
+            <p>{{ property.city }}, {{ property.suburb }}</p>
+            <div v-for="field in property.displayData[0].values" :key="field.id">
+              <p v-if="field.name === 'Floor Size'">{{ field.value }}M<sup>2</sup></p>
+              <p v-if="field.name === 'Rates & Taxes'">
+                Rates & Taxes: R{{ field.value | toCurrency }}
+              </p>
+            </div>
             <p>{{ property.shortDescription }}</p>
             <p>{{ property.price | toCurrency }}</p>
             <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
             </div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
-          <h2>{{ property.propertyName }}</h2>
+          <h2 v-else>{{ property.propertyName }}</h2>
           <p>{{ property.shortDescription }}</p>
           <h4>Property Features</h4>
           <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">

src/components/property/mapSection.vue

 <template>
   <div>
-    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace">*</gmap-autocomplete>
+    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace"
+      >*</gmap-autocomplete
+    >
     <GmapMap
       :center="mapCenter"
       :zoom="mapZoom"
 import { gmapApi } from "vue2-google-maps";
 export default {
   computed: {
-    google: gmapApi,
+    google: gmapApi
   },
   props: {
-    savedCoords: { default: "" },
+    savedCoords: { default: "" }
   },
   data() {
     return {
       country: "",
       postalCode: "",
       url: "",
-      coords: {},
+      coords: {}
     };
   },
 
         if (place.address_components[i].types[0] === "locality") {
           this.city = place.address_components[i].long_name;
         }
-        if (
-          place.address_components[i].types[0] === "administrative_area_level_1"
-        ) {
+        if (place.address_components[i].types[0] === "administrative_area_level_1") {
           this.province = place.address_components[i].long_name;
         }
         if (place.address_components[i].types[0] === "country") {
         this.url = place.url;
       }
 
-      var coords =
-        place.geometry.viewport.Za.j + "," + place.geometry.viewport.Va.j;
-      this.coords = coords;
-
       this.$emit("map-location", {
         streetNumber: this.streetNumber,
         streetName: this.streetName,
         province: this.province,
         country: this.country,
         postalCode: this.postalCode,
-        url: this.url,
-        coords: this.coords,
+        url: this.url
       });
-    },
+    }
   },
   watch: {
     savedCoords: {
           var array = val.split(",");
           this.mapCenter = {
             lat: Number(array[0]),
-            lng: Number(array[1]),
+            lng: Number(array[1])
           };
           this.mapZoom = 17;
         }
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>
 

src/components/property/propertyCard.vue

     <div class="container-fluid">
       <div class="row">
         <div
-          class="col-lg-3 col-md-6 col-sm-6"
+          class="col-lg-3 col-md-6 col-sm-6 my-3"
           v-for="currentProperty in properties"
           :key="currentProperty.id"
         >
               <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
-                  <img :src="currentProperty.displayImage" alt="" />
+                  <img
+                    style="max-height:165px; object-fit: cover;"
+                    :src="currentProperty.displayImage"
+                    alt=""
+                  />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
                 <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>
               <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
-                  <img :src="currentProperty.displayImage" alt="" />
+                  <img
+                    style="max-height:165px; object-fit: cover;"
+                    :src="currentProperty.displayImage"
+                    alt=""
+                  />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
                 <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>

src/components/property/propertyUserField.vue

 <template>
   <div class="row">
     <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
-      <div v-if="!setFields[i]">
-        <label class="uniSelectLabel">{{ currentField.name }}</label>
-      </div>
-
       <div class="input-group-prepend">
         <!-- <span class="input-group-text" style="color: #60CBEB">
           <b>{{ GetFirstLetter(currentField.name) }}</b>
         </span> -->
+        <div v-if="!setFields[i] && currentField.type !== 'yesno'">
+          <label class="uniSelectLabel">{{ currentField.name }}</label>
+        </div>
         <input
           v-if="currentField.type === 'number'"
           class="form-control uniInput"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
         />
+
         <input
           v-if="currentField.type === 'text'"
           class="form-control uniInput"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
         />
-        <select
+      </div>
+    </div>
+
+    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="'checkField' + i">
+      <div class="input-group-prepend">
+        <!-- <span class="input-group-text" style="color: #60CBEB">
+          <b>{{ GetFirstLetter(currentField.name) }}</b>
+        </span> -->
+        <div v-if="currentField.type === 'yesno'">
+          <label class="uniSelectLabel">{{ currentField.name }}</label>
+        </div>
+
+        <input
           v-if="currentField.type === 'yesno'"
-          class="form-control uniSelect"
+          type="checkbox"
           id="currentField.id"
+          style="margin-left:-5px; margin-top:10px"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
-        >
-          <option value="yes">Yes</option>
-          <option value="no">No</option>
-        </select>
+        />
       </div>
     </div>
   </div>

src/components/property/residential/createProperty/residentialCreate.vue

               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option
-                v-for="item in propertyTypes"
-                :value="item.id"
-                :key="item.id"
-              >{{ item.description }}</option>
+              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+                item.description
+              }}</option>
             </select>
           </div>
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
                     for="price"
                     class="uniSelectLabel"
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
-                  >{{ salesType }} Price</label>
+                    >{{ salesType }} Price</label
+                  >
                 </div>
                 <input
                   class="form-control uniInput"
             </div>
             <div class="row my-3">
               <div class="col-md-12">
-                <button type="button" @click="clearAddress()" class="btn-solid-blue">Clear Address</button>
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
               </div>
             </div>
           </div>
             <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
             <br />
             <p>
-              * A listing fee of R380 including VAT is payable to list your Property on the
-              Uni-Vate website
+              * A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate
+              website
             </p>
           </div>
         </div>
           :savedImages="propertyImages"
           @DefaultImage="UpdateDefaultImage"
         />
-        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
+          Save
+        </button>
         <div v-if="showPropertyTypeError">
-          <p class="alert myError">Missing fields. Please fill in all required fields. Marked with *</p>
+          <p class="alert myError">
+            Missing fields. Please fill in all required fields. Marked with *
+          </p>
         </div>
         <div v-if="wait" id="preloader"></div>
       </div>
     ImageLoad,
     VueEditor,
     carouselSection,
-    mapSection,
+    mapSection
   },
   data() {
     return {
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ["bold", "italic", "underline", "strike"],
-        [
-          { align: "" },
-          { align: "center" },
-          { align: "right" },
-          { align: "justify" },
-        ],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
         [{ script: "sub" }, { script: "super" }],
-        [{ indent: "-1" }, { indent: "+1" }],
+        [{ indent: "-1" }, { indent: "+1" }]
       ],
       error: "",
       addressSet: false,
       showPropertyTypeError: false,
       showDateError: false,
       user: Log.getUser(),
-      mayEdit: Log.isLoggedIn(),
+      mayEdit: Log.isLoggedIn()
     };
   },
   methods: {
       "getPropertyEditDisplay",
       "getPropertySavedOverviewFields",
       "getPropertySavedFields",
-      "getSavedPropertyData",
+      "getSavedPropertyData"
     ]),
     updateLocation(place) {
       this.addressSet = true;
         this.showPropertyTypeError = true;
       }
 
-      if (
-        this.salesType === "Rental" &&
-        this.property.dateAvailable === "undef"
-      ) {
+      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
         this.showDateError = true;
       }
 
         }
         this.property.propertyImages.push({
           image: this.images[i],
-          isDefault: setAsDefault,
+          isDefault: setAsDefault
         });
       }
       this.property.propertyUserFields = this.propertyFieldValues;
       if (this.user) {
         this.property.userId = this.user.id;
       }
+      console.log(this.propertyFieldValues);
 
-      this.saveProperty(this.property)
-        .then((fulfilled) => {
-          this.$router.push(
-            `/property/residential/property/${fulfilled.data.id}`
-          );
-        })
-        .catch((error) => {
-          console.log(error.message);
-        });
+      // this.saveProperty(this.property)
+      //   .then((fulfilled) => {
+      //     this.$router.push(
+      //       `/property/residential/property/${fulfilled.data.id}`
+      //     );
+      //   })
+      //   .catch((error) => {
+      //     console.log(error.message);
+      //   });
     },
     Close() {
       this.$router.push("/property/admin/list/my");
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach((element) => {
+      this.propertyFieldValues.forEach(element => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
       this.property.postalCode = undefined;
       this.property.addressUrl = undefined;
       this.property.propertCoords = undefined;
-    },
+    }
   },
   mounted() {
     this.wait = false;
       "propertyOverviewFields",
       "propertyFields",
       "property",
-      "propertyImages",
+      "propertyImages"
     ]),
     ...mapState("authentication", ["user"]),
     SalesTypeChanged() {
       this.getPropertyTypes(this.propertyType);
 
       return this.propertyType;
-    },
+    }
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/property/residential/createProperty/residentialCreateNew.vue

                     >{{ salesType }} Price</label
                   >
                 </div>
-                <input
-                  class="form-control uniInput"
-                  type="number"
+                <currency-input
+                  onClick="this.setSelectionRange(0, this.value.length)"
                   name="price"
-                  id="price"
+                  :value="value"
+                  @input="value = $event"
                   v-model="property.price"
+                  id="price"
+                  class="form-control uniInput"
                 />
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 />
               </div>
             </div>
-            <div class="row">
+            <div class="row my-3">
+              <br />
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetNumber">
+                  <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetNumber"
+                  id="unit"
+                  v-model="property.streetNumber"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetName">
+                  <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetName"
+                  id="unit"
+                  v-model="property.streetName"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
               <div class="col-md-12">
-                <label for="Property Description" style="font-family:'muli'">Description:</label>
-                <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
-                <br />
-                <p>
-                  * A listing fee of R380 including VAT is payable to list your Property on the
-                  Uni-Vate website
-                </p>
+                <div v-if="!property.suburb">
+                  <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="suburb"
+                  id="unit"
+                  v-model="property.suburb"
+                  disabled
+                />
               </div>
             </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.city">
+                  <label for="city" class="uniSelectLabel">CITY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="city"
+                  id="unit"
+                  v-model="property.city"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.province">
+                  <label for="province" class="uniSelectLabel">PROVINCE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="province"
+                  id="unit"
+                  v-model="property.province"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.postalCode">
+                  <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="postalCode"
+                  id="unit"
+                  v-model="property.postalCode"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.country">
+                  <label for="country" class="uniSelectLabel">COUNTRY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="country"
+                  id="unit"
+                  v-model="property.country"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <label for="Property Description" style="font-family:'muli'">Description:</label>
+            <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
+            <br />
+            <p>
+              * A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
+              Property on the Uni-Vate website
+            </p>
           </div>
         </div>
-        <div class="row" />
 
         <div class="section-header">
           <h2>Property Information</h2>
         </div>
 
-        <div class="row mb-3" v-for="item in propertyFields" :key="item.id">
-          <div class="col-md-6" v-for="field in item.fields" :key="field.id">
-            <div v-if="field.type === 'number'">
-              {{ field.name }}
-              <input type="number" class="form-control uniInput" v-model="field.value" />
-            </div>
-            <div v-else class="display:none"></div>
-            <div v-if="field.type === 'yesno'">
-              {{ field.name }}
-              <input type="checkbox" v-model="field.value" />
-            </div>
+        <div v-for="item in propertyFields" :key="item.id">
+          <div v-if="item.name === 'Residential Fields'">
+            <UserField
+              :fields="item.fields"
+              :id="item.name"
+              @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              :fieldValues="item.fields"
+            />
           </div>
         </div>
         <!-- <UserField
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import { VueEditor } from "vue2-editor";
 import UserField from "../../propertyUserField.vue";
 import ImageLoad from "../../propertyImage.vue";
           isDefault: setAsDefault
         });
       }
-      this.property.propertyUserFields = this.propertyFields;
+      this.property.propertyUserFields = this.propertyFieldValues;
 
       if (this.user) {
         this.property.userId = this.user.id;
       }
       this.property.propertyUserFields.forEach(item => {
-        item.fields.forEach(field => {
-          if (field.type === "yesno") {
-            if (field.value) {
-              field.value = "yes";
-            } else {
-              field.value = "no";
-            }
-          }
-        });
+        if (item.value === true) {
+          item.value = "yes";
+        } else if (item.value === false) {
+          item.value = "no";
+        }
       });
 
       this.saveProperty(this.property)
     UpdateDefaultImage(item) {
       this.defaultImage = item;
     },
+    clearAddress() {
+      this.addressSet = false;
+      this.property.streetNumber = undefined;
+      this.property.streetName = undefined;
+      this.property.suburb = undefined;
+      this.property.city = undefined;
+      this.property.province = undefined;
+      this.property.country = undefined;
+      this.property.postalCode = undefined;
+      this.property.addressUrl = undefined;
+      this.property.propertCoords = undefined;
+    },
     userFieldsArrFunc(arr, len) {
       const fields = [];
       const i = 0;
       "propertyImages"
     ]),
     ...mapState("authentication", ["user"]),
+    ...mapGetters("fees", ["getListingFee"]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;

src/components/property/residential/singleView/contentSection.vue

             <p v-if="property.showAddress">{{ property.addressOther }}</p>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
             <p>{{ property.city }}, {{ property.suburb }}</p>
-            <!-- <div v-for="(data, i) in property.displayData" :key="i">
-              {{ data }}
-            </div> -->
-            <p>
-              Bedrooms {{ property.displayData[1].values[0].value }}, Bathrooms
-              {{ property.displayData[1].values[1].value }}
-            </p>
-            <p>
-              Yard Size {{ property.displayData[0].values[1].value }}M<sup>2</sup>, Floor Size
-              {{ property.displayData[0].values[2].value }}M<sup>2</sup>
-            </p>
+            <div v-for="(data, i) in property.displayData" :key="i">
+              <div v-for="field in data.values" :key="field.id">
+                <p v-if="field.name === 'Floor Size'">{{ field.value }}M<sup>2</sup></p>
+                <p v-if="field.name === 'Bedrooms'">Bedrooms {{ field.value }}</p>
+                <p v-if="field.name === 'Bathrooms'">Bathrooms {{ field.value }}</p>
+              </div>
+            </div>
 
             <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
           </div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
+
           <div class="container">
             <div class="row">
               <div class="col">
             </div>
           </div>
           <div>
-            <!-- <table class="table table-striped">
-              <thead>
-                <tr>
-                  <th scope="col">Reference</th>
-                  <th scope="col">Size</th>
-                  <th scope="col">Rooms</th>
-                  <th scope="col">Bathrooms</th>
-                  <th scope="col">Garages</th>
-                  <th scope="col"></th>
-                </tr>
-              </thead>
-
-              <tbody>
-                <tr>
-                  <td>#{{ property.id }}</td>
-                  <td>{{ property.displayData[0].values[2].value }}M<sup>2</sup></td>
-                  <td>{{ property.displayData[1].values[0].value }}</td>
-                  <td>{{ property.displayData[1].values[1].value }}</td>
-                  <td>{{ property.displayData[2].values[0].value }}</td>
-                  <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
-                </tr>
-              </tbody>
-            </table>-->
             <h4>Property Features</h4>
+
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
                 <div v-if="field.value.toUpperCase() != 'YES'">
     console.log(this.property.displayData);
   },
   mounted() {
-    var facebookShare = document.getElementById("fb_share");
-    facebookShare.href = "http://www.facebook.com/share.php?u=" + encodeURIComponent(location.href);
+    // var facebookShare = document.getElementById("fb_share");
+    // facebookShare.href = "http://www.facebook.com/share.php?u=" + encodeURIComponent(location.href);
   },
   data() {
     return {

src/components/shared/navBar.vue

               </div>
               <nav id="nav-menu-container">
                 <ul class="nav-menu sf-js-enabled sf-arrows">
-                  <li class="menu-has-children" style="margin-left:-20px">
-                    <div
+                  <li style="margin-left:-20px">
+                    <router-link to="/property/commercial">Commercial</router-link>
+                    <!-- <div
                       @mouseover="commercialClass = 'ts-display'"
                       @mouseleave="commercialClass = 'no-display'"
                     ></div>
                     </a>
                     <ul style="margin-top:-10px; text-align:left" :class="commercialClass">
                       <li>
-                        <router-link to="/property/commercial">To Buy / To Rent</router-link>
+                        
                       </li>
                       <hr />
                       <li>
                           >To Rent</a
                         >
                       </li>
-                    </ul>
+                    </ul> -->
                   </li>
-                  <li class="menu-has-children mx-1">
-                    <div
+                  <li class="mx-1">
+                    <router-link to="/property/residential">Residential</router-link>
+                    <!-- <div
                       @mouseover="residentialClass = 'ts-display'"
                       @mouseleave="residentialClass = 'no-display'"
                     ></div>
                           >To Rent</a
                         >
                       </li>
-                    </ul>
+                    </ul> -->
                   </li>
                   <li class="menu-has-children mx-1">
                     <div
                     </a>
                     <ul style="margin-top:-10px;text-align:left" :class="userClass">
                       <li>
-                        <router-link to="/property/list">List Property</router-link>
-                      </li>
-                      <li>
-                        <router-link to="/status/list">Status</router-link>
+                        <router-link to="/property/list">List My Property</router-link>
                       </li>
+
                       <li>
                         <router-link to="/status/timeshareAdmin">Timeshare Week Admin</router-link>
                       </li>
                           >Tender Week Management</router-link
                         >
                       </li>
-                      <li>
-                        <router-link to="/unitConfiguration/list">Unit Configuration</router-link>
-                      </li>
-                      <li>
-                        <router-link to="/communication/template">Templates</router-link>
-                      </li>
                       <hr />
-                      <li>
-                        <router-link to="/status/userManagementPage"
-                          >User Management & Access</router-link
+                      <li class="menu-has-children">
+                        <div
+                          @mouseover="submenu1Class = 'ts-display'"
+                          @mouseleave="submenu1Class = 'no-display'"
+                        ></div>
+                        <a href="#" class="sf-with-ul">
+                          Website Setup
+                        </a>
+                        <ul
+                          style="margin-top:-10px;text-align:left;width:250px"
+                          :class="submenu1Class"
                         >
-                      </li>
-                      <li>
-                        <router-link to="/status/changeLogPage">Changes Logs</router-link>
-                      </li>
-                      <li>
-                        <router-link to="/PropertyAdmin">Property Admin</router-link>
-                      </li>
-                      <li>
-                        <router-link to="/userDefinedGroups/list"
-                          >Property User Defined Groups</router-link
+                          <li>
+                            <router-link to="/status/list">Status</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/unitConfiguration/list"
+                              >Unit Configuration</router-link
+                            >
+                          </li>
+                          <li>
+                            <router-link to="/communication/template">Templates</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/status/userManagementPage"
+                              >User Management & Access</router-link
+                            >
+                          </li>
+                          <li>
+                            <router-link to="/userDefinedGroups/list"
+                              >Property User Defined Groups</router-link
+                            >
+                          </li>
+                          <li>
+                            <router-link to="/PropertyAdmin">Property Admin</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/propertyTypes/list">Property Types</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/fees">Fees</router-link>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="menu-has-children">
+                        <div
+                          @mouseover="submenu1Class = 'ts-display'"
+                          @mouseleave="submenu1Class = 'no-display'"
+                        ></div>
+                        <a href="#" class="sf-with-ul">
+                          Logs
+                        </a>
+                        <ul
+                          style="margin-top:-10px;text-align:left;width:250px"
+                          :class="submenu1Class"
                         >
-                      </li>
-                      <li>
-                        <router-link to="/propertyTypes/list">Property Types</router-link>
+                          <li>
+                            <router-link to="/status/changeLogPage">Changes Logs</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/searchLog">Search Logs</router-link>
+                          </li>
+                        </ul>
                       </li>
                       <hr />
-                      <li>
-                        <router-link to="/searchLog">Search Logs</router-link>
-                      </li>
                       <li>
                         <router-link to="/Offers">Offers</router-link>
                       </li>
       registerClass: "no-display",
       commercialClass: "no-display",
       residentialClass: "no-display",
-      propManClass: "no-display"
+      propManClass: "no-display",
+      submenu1Class: "no-display"
     };
   },
   methods: {
     ...mapActions("authentication", ["logout"]),
+    ...mapActions("fees", ["retrieveListingFee"]),
     showDropDown() {
       if (!this.hover) {
         this.timeShareClass = "ts-display";
       this.$emit("routerGoTo", goTo);
     }
   },
+  mounted() {
+    this.retrieveListingFee();
+  },
   computed: {
     ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
     isLoggedIn() {
-      console.log(Log.isLoggedIn());
-      console.log(this.user);
-
       return Log.isLoggedIn();
     },
     NAME() {
 </script>
 
 <style lang="scss" scoped>
+.subItem {
+  background-color: white;
+  margin-top: -10px;
+}
+
 .no-display {
   display: none;
 }

src/components/timeshare/sell/carouselSection.vue

           <div class="intro-content box">
             <h2>Sell your Timeshare</h2>
             <p>
-              A listing fee of R380 including VAT is payable to list your timeshare week/module on
-              the Uni-Vate website.
+              A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
+              timeshare week/module on the Uni-Vate website.
             </p>
             <div></div>
           </div>
 /* eslint-disable */
 
 import carousel from "vue-owl-carousel";
+import { mapGetters } from "vuex";
 export default {
   components: {
     carousel
+  },
+  computed: {
+    ...mapGetters("fees", ["getListingFee"])
   }
 };
 </script>

src/components/timeshare/sell/contentSection.vue

     refAgent() {
       return this.sellItem && this.sellItem.referedByAgent;
     },
+    ...mapGetters("fees", ["getListingFee"]),
     filteredResort() {
       let list = [];
       if (this.sellItem && this.sellItem.region && this.sellItem.region.regionCode) {
       } else this.$router.push("/user/login");
     },
     paygateRedirect() {
+      var amount = this.getListingFee.amount;
       var paymentObj = {
         timeshareWeekId: this.sellItem.id, // this.sellItem.Id,
         propertyId: 0,
         creatydById: Log.getUser().id, //Log.getUser().id,
-        amount: 380.0,
+        amount: amount,
         paymentStatus: "",
         paymentToken: ""
       };

src/main.js

 import * as VueGoogleMaps from "vue2-google-maps";
 import Vuetify from "vuetify";
 import VueShareSocial from "vue-share-social";
+import VueCurrencyInput from "vue-currency-input";
 
 Vue.use(VueShareSocial);
 Vue.use(EvaIcons);
 Vue.use(Vuetify);
+
 Vue.use(VueGoogleMaps, {
   load: {
     key: "AIzaSyD8k_Kwml_C8IDfs-gX8JFV8acli3L9cAE",
 });
 Vue.config.productionTip = false;
 //axios.defaults.baseURL = "http://localhost:57260";
-//axios.defaults.baseURL = "http://training.provision-sa.com:82";
-axios.defaults.baseURL = "http://localhost:8080/";
+axios.defaults.baseURL = "http://training.provision-sa.com:82";
+//axios.defaults.baseURL = "http://localhost:8080/";
 
 Vue.prototype.$axios = axios;
-
+const pluginOptions = {
+  /* see config reference */
+  globalOptions: { currency: ["ZAR", null, { prefix: "R" }][2] }
+};
+Vue.use(VueCurrencyInput, pluginOptions);
 Vue.prototype.$http = axios;
 const token = localStorage.getItem("token");
 if (token) {

src/router/index.js

 import changeLogPage from "../components/admin/status/changeLogPage.vue";
 import UnitConfiguration from "../components/admin/unitConfiguration/unitConfigurationPage.vue";
 import agentManagementPage from "../components/admin/status/agentsUserManagementPage.vue";
+import Fees from "../components/admin/fees/feesPage.vue";
 
 import ResortPage from "../components/timeshare/resort/resortPage.vue";
 import UnitPage from "../components/timeshare/resort/unit/unitPage.vue";
       name: "SearchLog",
       component: searchLog
     },
+    {
+      path: "/fees",
+      name: "fees",
+      component: Fees
+    },
     {
       path: "/carousel",
       name: "carousel",

src/store/index.js

 import PlaceHolderFormat from "./modules/misc/placeHolderFormat";
 import Bank from "./modules/user/bank";
 import bank from "./modules/user/bank";
+import Fees from "./modules/financial/fees";
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     campaign: CampaignModule,
     campaignItem: CampaignItemModule,
     placeHolderFormat: PlaceHolderFormat,
+    fees: Fees,
     bank: bank
   }
 });

src/store/modules/financial/fees.js

+/* eslint-disable */
+import axios from "axios";
+
+export default {
+  namespaced: true,
+  state: {
+    listingFee: []
+  },
+  mutations: {
+    getListingFee: (state, fee) => (state.listingFee = fee),
+    newListingFee: (state, fee) => (state.listingFee = fee)
+  },
+  getters: {
+    getListingFee: state => state.listingFee
+  },
+  actions: {
+    async retrieveListingFee({ commit }) {
+      await axios.get("api/fees/listingFee").then(res => {
+        commit("getListingFee", res.data);
+      });
+    },
+    async setListingFee({ commit }, fee) {
+      await axios.post("api/fees/listingFee", fee).then(res => {
+        commit("newListingFee", res.data);
+      });
+    }
+  }
+};

src/store/modules/property/propertySearch.js

             commit("updateSearch", result.data);
             resolve();
           })
-          .catch(errro => reject(new Error(error.message)));
+          .catch(error => reject(new Error(error.message)));
       });
     },
     searchLatestProperties({ commit }) {