Merge branch 'master' of http://provision-sa.co.za:3000/Provision/UnivateProperties

package-lock.json

         "vue": "^2.5.17"
       }
     },
+    "vue-float-label": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/vue-float-label/-/vue-float-label-1.6.1.tgz",
+      "integrity": "sha1-I1HnGyXyGwbUNWOwRveNlRKgjGY="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.5.tgz",
       "integrity": "sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg=="
     },
-    "vue-share-social": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/vue-share-social/-/vue-share-social-0.3.2.tgz",
-      "integrity": "sha512-8YEm2Kkl756bhqSfXPtQqnOOItz7/DQWU6E4L+vC4dgT4rp0+XnqsgJAr4OXVQRRUNDO7TS8W0W79+zhfvh4pQ==",
-      "requires": {
-        "vue": "^2.5.16"
-      }
+    "vue-social-sharing": {
+      "version": "3.0.0-beta.11",
+      "resolved": "https://registry.npmjs.org/vue-social-sharing/-/vue-social-sharing-3.0.0-beta.11.tgz",
+      "integrity": "sha512-jIATgcKcBGQveAbU4sKjHcsGN7gI/bq/T9fm/5qowtBuZe0I+5CZRWcAGDd6G64HzQfFEyNBLC02GYjMtaovhA=="
     },
     "vue-style-loader": {
       "version": "4.1.2",

package.json

     "vue-currency-input": "^1.22.3",
     "vue-disable-autocomplete": "0.0.4",
     "vue-eva-icons": "^1.1.1",
+    "vue-float-label": "^1.6.1",
     "vue-js-modal": "^1.3.33",
     "vue-json-excel": "^0.2.98",
     "vue-owl-carousel": "^2.0.3",
     "vue-router": "^3.1.5",
-    "vue-share-social": "^0.3.2",
+    "vue-social-sharing": "^3.0.0-beta.11",
     "vue-trix": "^1.1.7",
     "vue2-editor": "^2.10.2",
     "vue2-google-maps": "^0.10.7",

public/css/newStyle.css

 
 /* @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); */
 
+.vfl-label {
+  text-transform: uppercase;
+}
+
+.vfl-label-on-input {
+  top: -1.5em !important;
+}
+
+.vfl-label-on-focus {
+  color: rgb(27, 117, 187) !important;
+}
+
 .uniSelect {
   border-color: rgb(27, 117, 187);
   border-width: 2px;
 
 .nav-menu ul ul {
   top: 0;
-  left: 100%;
+  right: 100%;
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (max-width: 1200px) {
+  .nav-menu ul ul {
+    margin: 0;
+    left: 100%;
+  }
 }
 
 .nav-menu ul li {
   color: #1b75bb;
 }
 
-.nav-menu ul ul {
-  margin: 0;
-}
-
 /* Mobile Nav Toggle */
 
 #mobile-nav-toggle {

src/App.vue

   name: "app",
   data() {
     return {
-      isLandingPage: false
+      isLandingPage: false,
     };
   },
   components: {
     NavBar,
-    FooterSection
+    FooterSection,
   },
 
   methods: {
     },
     setLandingPage(item) {
       this.isLandingPage = item;
-    }
-  }
+    },
+  },
 };
 </script>
 
   width: 100px;
 }
 .top-left {
-  position: absolute;
-  top: 8px;
-  width: 350px;
+  position: centre;
+  top: 5px;
+  width: 380px;
   color: white;
 }
 .normalText {
   background-color: #60cbeb;
+  color: white;
 }
 .pendingOffer {
   background-color: #ff8344;
+  color: white;
 }
 .noWeeks {
   background-color: #ff4444;

src/components/admin/fees/listingFee.vue

 <template>
   <section id="content">
+    <div v-if="updated">
+      <alert :text="'The listing fee has been updated!!'" :type="'SUCCESS'" />
+    </div>
+
     <label for="fee" class="uniLabel">LISTING FEE</label>
+
     <currency-input
       onClick="this.setSelectionRange(0, this.value.length)"
       name="fee"
 <script>
 /* eslint-disable */
 import { mapActions, mapGetters, mapState } from "vuex";
+import alert from "../../shared/alert";
 export default {
+  components: {
+    alert
+  },
   data() {
     return {
-      fee: 0.0
+      fee: 0.0,
+      updated: false
     };
   },
   mounted() {
         amount: parseFloat(this.fee),
         name: "Listing Fee"
       };
-
       this.setListingFee(feeObj);
+      setTimeout(() => {
+        this.updated = true;
+      }, 200);
     },
     async pullListingFee() {
       await this.retrieveListingFee();
-      console.log(this.getListingFee);
-
       this.fee = this.getListingFee.amount;
     }
   },

src/components/admin/misc/termsConditions.vue

+<template>
+  <main id="main" style="padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Terms And Conditions</h2>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-6">
+          <label for="version" class="uniSelectLabel">Version:</label>
+          <input name="version" type="text" v-model="version" class="mt-5 mb-3 ml-2" />
+        </div>
+        <div class="col-md-6 mt-5">
+          <p style="float:right">Last Modified: {{ getModiefiedDate }}</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <vue-editor v-model="termsInput" :editor-toolbar="customToolbar" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-2 mt-3">
+          <button @click="saveTerms()" class="btn-solid-blue">Save</button>
+        </div>
+        <div v-if="updated" class="col mt-3">
+          <alert :text="'Terms and Contidtions Updated!!'" :type="'SUCCESS'" />
+        </div>
+      </div>
+    </div>
+    <div v-if="wait" id="preloader"></div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { VueEditor } from "vue2-editor";
+import { mapActions, mapGetters, mapState } from "vuex";
+import alert from "../../shared/alert";
+
+export default {
+  components: {
+    VueEditor,
+    alert
+  },
+  data() {
+    return {
+      termsInput: "",
+      version: "",
+      updated: false,
+      wait: true,
+      customToolbar: [
+        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
+        ["bold", "italic", "underline", "strike"],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
+        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
+        [{ script: "sub" }, { script: "super" }],
+        [{ indent: "-1" }, { indent: "+1" }]
+      ]
+    };
+  },
+  mounted() {
+    this.populateTerms();
+  },
+  methods: {
+    ...mapActions("termsConditions", ["setTerms", "retrieveTerms"]),
+    saveTerms() {
+      var termsObj = {
+        termsConditions: this.termsInput,
+        version: this.version
+      };
+      this.setTerms(termsObj).then(() => {
+        this.updated = true;
+        this.$router.go();
+      });
+    },
+    async populateTerms() {
+      await this.retrieveTerms();
+      this.version = this.terms.version;
+      this.termsInput = this.terms.termsConditions;
+      setTimeout(() => {
+        this.wait = false;
+      }, 500);
+    }
+  },
+  computed: {
+    ...mapGetters("termsConditions", ["getTermsAndConditions"]),
+    ...mapState("termsConditions", ["terms"]),
+    getModiefiedDate() {
+      var date = new Date(this.terms.modified);
+      return date.getDate() + " / " + (date.getMonth() + 1) + " / " + date.getFullYear();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/admin/status/timeshareAdminPage.vue

           </div>
         </div>
       </div>
-    </div>
-
-    <div class="row">
-      <div class="offset-1 col-md-6">
-        <div class="form-group col-md-3">
-                <div class="input-group">
-                  <label
-                    class="uniSelectLabel"
-                    for="weekInfoRegionSelect"
-                  >REGION</label>
-
-                  <select
-                    id="weekInfoRegionSelect"
-                    class="form-control uniSelect"
-                    @change="regionChange()"
-                    style="font-size: 15px"
-                  >
-                    <option
-                      v-for="(region, r) in regions"
-                      :key="r"
-                      :value="region"
-                    >{{ region.regionName }}</option>
-                  </select>
-                </div>
-                <div class="validation"></div>
-              </div>
-
-                  <div class="form-group col-md-3">
-                <div class="input-group">
-                  <label
-                    class="uniSelectLabel"
-                    for="weekInfoResortSelect"
-                  >RESORT NAME</label>
-
-                  <select
-                    id="weekInfoResortSelect"
-                    class="form-control uniSelect"
-                    @change="resortChange()"
-                  >
-                    <option value="Other">Other</option>
-                    <option
-                      v-for="(resort, r) in resorts"
-                      :key="r"
-                      :value="resort"
-                    >{{ resort.resortName }}</option>
-                  </select>
-                </div>
-                  </div>
-
-                  <div class="form-group col-md-3">
-                <label class="uniSelectLabel" for="region">SEASON</label>
-
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region">
-                  <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
-                </select>
-                <div class="validation"></div>
-              </div>
-
-              <div class="form-group col-md-3">
-                <label class="uniSlectLabel">STATUS</label>
-                <select class="form-control uniSelect"
-                        name="status">
-                </select>
-              </div>
-              <button type="button"> Filter</button>
-        <!-- <button
+      <div class="row">
+        <div class="col-md-3">
+          <float-label label="REGION">
+            <select
+              id="weekInfoRegionSelect"
+              class="form-control uniSelect"
+              @change="regionChange()"
+              style="font-size: 15px"
+            >
+              <option v-for="(region, r) in regions" :key="r" :value="region">{{
+                region.regionName
+              }}</option>
+            </select>
+          </float-label>
+        </div>
+        <div class="col-md-3">
+          <float-label label="RESORT NAME">
+            <select
+              id="weekInfoResortSelect"
+              class="form-control uniSelect"
+              @change="resortChange()"
+            >
+              <option value="Other">Other</option>
+              <option v-for="(resort, r) in resorts" :key="r" :value="resort">{{
+                resort.resortName
+              }}</option>
+            </select>
+          </float-label>
+        </div>
+        <div class="col-md-3">
+          <float-label label="SEASON">
+            <select class="form-control uniSelect" name="region" id="region">
+              <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
+            </select>
+          </float-label>
+        </div>
+        <div class="col-md-3">
+          <float-label label="STATUS">
+            <select class="form-control uniSelect" name="status"> </select>
+          </float-label>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <button style="float:right" class="btn-solid-blue" type="button">Filter</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <ListView
+            :items="getNeedsVerify"
+            :editable="true"
+            :deleteable="true"
+            :showCustomAction="true"
+            :CustomActionHeading="'Publish'"
+            @onRowClick="onRowClick"
+            @onClearSelected="onClearSelected"
+            @onEdit="onEdit"
+            :showNew="false"
+          />
+        </div>
+      </div>
+      <!-- <div class="offset-1 col-md-6">
+        <button
           type="button"
           :class="{
             'form-control btn btn-primary ': 1 === 1,
           @click="onVerify()"
         >
           {{ ButtonMessage }}
-        </button> -->
-        <!-- <div>{{ Message }}</div> -->
-      </div>
-      <div class="offset-1 col-md-10">
-        <ListView
-          :items="getNeedsVerify"
-          :editable="true"
-          :deleteable="true"
-          :showCustomAction="true"
-          :CustomActionHeading="'Publish'"
-          @onRowClick="onRowClick"
-          @onClearSelected="onClearSelected"
-          @onEdit="onEdit"
-          :showNew="false"
-        />
-      </div>
+        </button> 
+        <div>{{ Message }}</div>
+      </div> -->
     </div>
   </main>
 </template>
     this.initTimeshare(0);
   },
   computed: {
-        ...mapState("timeshare", [
-      "resorts",
-      "regions",
-      "seasons",
-    ]),
+    ...mapState("timeshare", ["resorts", "regions", "seasons"]),
     ...mapState("individual", ["indiv"]),
     filteredResort() {
       let list = [];
-      if (
-        this.sellItem &&
-        this.sellItem.region &&
-        this.sellItem.region.regionCode
-      ) {
+      if (this.sellItem && this.sellItem.region && this.sellItem.region.regionCode) {
         const item = this.detailedRegion.find(
-          (region) =>
-            region.region.regionCode === this.sellItem.region.regionCode
+          region => region.region.regionCode === this.sellItem.region.regionCode
         );
         if (item) {
           list = item.children;
       } else {
         list = this.resorts;
       }
-      return _.sortBy(list, (x) => x.resortName);
+      return _.sortBy(list, x => x.resortName);
     },
     SelectedItems() {
       const selectedArray = [];
   methods: {
     ...mapActions("myWeeks", ["getItems", "verifyWeek"]),
     ...mapActions("alert", ["success"]),
-     ...mapActions("timeshare", [
-      "initTimeshare",
-      "onResortChange",
-      "saveWeek",
-      "getBlankWeek",
-    ]),
+    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek", "getBlankWeek"]),
     onVerify() {
       if (this.selectedItems.length > 0) {
         for (const i in this.selectedItems) {
     },
     onClearSelected() {
       this.selectedItems = [];
-    },
+    }
     //   onDelete(item) {
     //   this.deleteListing(item.id);
     // },

src/components/misc/TermsConditions/contentSection.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <div class="section-header">
+          <h2>Terms & Conditions</h2>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div v-html="terms.termsConditions"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions, mapGetters, mapState } from "vuex";
+export default {
+  mounted() {
+    this.populateTerms();
+  },
+  methods: {
+    ...mapActions("termsConditions", ["retrieveTerms"]),
+    async populateTerms() {
+      await this.retrieveTerms();
+    }
+  },
+  computed: {
+    ...mapGetters("termsConditions", ["getTermsAndConditions"]),
+    ...mapState("termsConditions", ["terms"])
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/enquireNow/enquirenow.vue → src/components/misc/TermsConditions/termsConditions.vue

 <template>
   <div>
     <carouselSection />
-    <main id="main" style="margin-top:-20px;padding-bottom:50px">
+    <main id="main">
       <contentSection />
     </main>
   </div>
 
 <script>
 /* eslint-disable */
+
 import carouselSection from "./carouselSection";
 import contentSection from "./contentSection";
 export default {

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"
-      v-currency="{ currency: ['ZAR', null, { prefix: 'R' }][2] }"
-      id="gross-income"
-      placeholder="Gross Monthly Household Income"
+    <currency-input
+      onClick="this.setSelectionRange(0, this.value.length)"
+      name="price"
+      :value="value"
+      @input="value = $event"
       v-model="amount"
-    />
-    <input
-      type="text"
+      id="gross-income"
       class="form-control mb-2"
+    />
+    <currency-input
+      onClick="this.setSelectionRange(0, this.value.length)"
       name="deposit"
-      v-currency="{ currency: ['ZAR', null, { prefix: 'R' }][2] }"
-      id="deposit"
-      placeholder="Deposit Amount – May be Required"
+      :value="value"
+      @input="value = $event"
       v-model="deposit"
+      id="gross-income"
+      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" />
   },
   computed: {
     totalMonthlyPayment() {
-      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 = parseFloat(this.amount) - parseFloat(this.deposit);
+      var netAmnt = this.amount - this.deposit;
+
       var bond = (netAmnt * topPart) / bottomPart;
       if (isNaN(bond)) {
         return 0;

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

         <div class="row">
           <div class="col">
             <label v-if="!salesType" class="uniSelectLabel" for="saleType">Sale Type</label>
-            <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
-              <option value="Sale">To Sell</option>
-              <option value="Rental">To Rent</option>
-            </select>
+            <float-label label="Sale Type">
+              <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
+                <option value="Sale">To Sell</option>
+                <option value="Rental">To Rent</option>
+              </select>
+            </float-label>
           </div>
         </div>
-        <div class="row">
+        <div class="row mt-2">
           <div class="col-md-6">
             <div v-if="!property.propertyName">
               <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="propertyName"
-              v-model="property.propertyName"
-            />
+            <float-label label="PROPERTY NAME">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="propertyName"
+                v-model="property.propertyName"
+              />
+            </float-label>
           </div>
           <div class="col-md-6">
             <div v-if="!property.propertyRef">
               <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="propertyRef"
-              v-model="property.propertyRef"
-            />
+            <float-label label="PROPERTY REFERENCE">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="propertyRef"
+                v-model="property.propertyRef"
+              />
+            </float-label>
           </div>
         </div>
         <div class="row my-5">
             <div v-if="!property.unit">
               <label for="unit" class="uniSelectLabel">UNIT</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="unit"
-              id="unit"
-              v-model="property.unit"
-            />
+            <float-label label="unit">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="unit"
+                id="unit"
+                v-model="property.unit"
+              />
+            </float-label>
           </div>
         </div>
         <div class="row my-5">
                     >{{ salesType }} Price</label
                   >
                 </div>
-                <currency-input
-                  onClick="this.setSelectionRange(0, this.value.length)"
-                  name="price"
-                  :value="value"
-                  @input="value = $event"
-                  v-model="property.price"
-                  id="price"
-                  class="form-control uniInput"
-                />
+                <float-label label="price">
+                  <currency-input
+                    onClick="this.setSelectionRange(0, this.value.length)"
+                    name="price"
+                    :value="value"
+                    @input="value = $event"
+                    v-model="property.price"
+                    id="price"
+                    class="form-control uniInput"
+                  />
+                </float-label>
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 <select
         </div>
         <div class="form-group row">
           <div class="col-md-12">
-            <label class="uniSelectLabel">Virtual Tour (URL)</label>
+            <label v-if="!property.virtualTour" class="uniSelectLabel">Virtual Tour (URL)</label>
             <div class="input-group-prepend">
-              <input
-                class="form-control uniInput"
-                type="link"
-                name="vtlink"
-                id="vtlink"
-                v-model="property.virtualTour"
-              />
+              <float-label label="Virtual Tour (URL)" style="width:100%">
+                <input
+                  class="form-control uniInput"
+                  type="link"
+                  name="vtlink"
+                  id="vtlink"
+                  v-model="property.virtualTour"
+                />
+              </float-label>
             </div>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-12">
-            <label class="uniSelectLabel">Video (URL)</label>
+          <div class="col-md-12 mt-2">
+            <label v-if="!property.video" class="uniSelectLabel">Video (URL)</label>
             <div class="input-group-prepend">
-              <input
-                class="form-control uniInput"
-                type="link"
-                name="vlink"
-                id="vlink"
-                v-model="property.video"
-              />
+              <float-label label="video " style="width:100%">
+                <input
+                  class="form-control uniInput"
+                  type="link"
+                  name="vlink"
+                  id="vlink"
+                  v-model="property.video"
+                />
+              </float-label>
             </div>
           </div>
         </div>

src/components/property/commercial/latestListings.vue

         <div class="row">
           <div class="col">
             <propertyCard
-              v-if="properties.length > 0"
+              v-if="latestProperties.length > 0"
               name="propertyholder"
-              :properties="properties"
+              :properties="latestProperties"
               :showSort="false"
             />
           </div>
 import propertyCard from "../propertyCard";
 export default {
   components: {
-    propertyCard
+    propertyCard,
   },
   methods: {
-    ...mapActions("propertySearch", ["searchProperties"])
+    ...mapActions("propertySearch", ["searchLatestPropertiesType"]),
   },
   mounted() {
-    this.propertySearch.propertyUsageType = "Commercial";
-
-    this.searchProperties(this.propertySearch);
+    this.searchLatestPropertiesType("Commercial");
   },
   computed: {
-    ...mapState("propertySearch", ["properties", "propertySearch"])
-  }
+    ...mapState("propertySearch", ["latestProperties"]),
+  },
 };
 </script>
 

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

         <div class="col-md-4">
           <div class="resPortfolioSection" style="margin-top:-5px">
             <iframe
+              v-if="property.video !== null"
               width="100%"
               src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
               frameborder="0"
             <h2>Property Detial</h2>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
             <p>{{ property.city }}, {{ property.suburb }}</p>
-            <div v-for="field in property.displayData[0].values" :key="field.id">
+            <div v-if="property.displayData.length > 0">
+              <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>
+                </div>
+              </div>
+            </div>
+            <!-- <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>
+            </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>
           <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">
-            <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
-              <div v-if="field.value.toUpperCase() != 'YES'">
-                <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
+          <div v-if="property.displayData.length > 0">
+            <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'">
+                  <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
+                </div>
+                <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
               </div>
-              <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
             </div>
           </div>
+
           <div class="mt-5" v-html="property.description"></div>
-          <h4 class="mt-5">Video Tour</h4>
+          <router-link
+            style="float:right"
+            class="btn-solid-blue mt-3"
+            :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
+            >MORE INFO...</router-link
+          >
+          <h4 v-if="property.video !== null" class="mt-5">Video Tour</h4>
           <iframe
+            v-if="property.video !== null"
             width="100%"
             src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
             frameborder="0"
                     </div>
                   </td>
                   <td>
-                    <router-link class="btn-solid-blue" to="/EnquireNow">MORE INFO</router-link>
+                    
                   </td>
                 </tr>
               </tbody>

src/components/property/editProperty/editProperty.vue

                     class="form-control uniSelect"
                     v-model="property.propertyUsageType"
                     @change="UpdateUsageType"
+                    :disabled="!canEdit"
                   >
                     <option>Commercial</option>
                     <option>Residential</option>
                   </select>
                 </div>
                 <div class="col-md-6">
-                  <select class="form-control uniSelect" v-model="property.statusString">
+                  <select
+                    class="form-control uniSelect"
+                    v-model="property.statusString"
+                    @change="StatusChanged"
+                  >
                     <option v-for="(item, i) in statuses" :key="i">{{ item }}</option>
                   </select>
                 </div>
                     type="text"
                     name="propertyName"
                     v-model="property.propertyName"
+                    :disabled="!canEdit"
                   />
                 </div>
                 <div class="col-md-6">
                     type="text"
                     name="propertyRef"
                     v-model="property.propertyRef"
+                    :disabled="!canEdit"
                   />
                 </div>
               </div>
                     name="propertyType"
                     id="propertyType"
                     v-model="property.propertyTypeId"
+                    :disabled="!canEdit"
                   >
                     <option value="0">Please select type *</option>
                     <option
                     name="unit"
                     id="unit"
                     v-model="property.unit"
+                    :disabled="!canEdit"
                   />
                 </div>
               </div>
                   <mapSection
                     v-on:map-location="updateLocation"
                     :savedCoords="property.propertCoords"
+                    :canEdit="canEdit"
                   />
                   <input
                     type="checkbox"
                     v-model="property.showAddress"
                     style="margin-right: 10px; margin-top: 10px;"
+                    :disabled="!canEdit"
                   />
                   <label>Show address on listing</label>
                 </div>
                         name="price"
                         id="price"
                         v-model="property.price"
+                        :disabled="!canEdit"
                       />
                     </div>
-                    <div v-if="property.salesTypeString === 'Rental'" class="col-md-6">
+                    <div v-if="!property.isSale" class="col-md-6">
                       <select
                         class="form-control uniSelect"
                         name="propertyType"
                         id="propertyType"
                         v-model="property.pricePer"
+                        :disabled="!canEdit"
                       >
                         <option value>Please select</option>
                         <option value="Month">Month</option>
                         type="date"
                         class="form-control uniInput"
                         name="date"
-                        v-model="property.dateAvailable"
+                        v-model="property.dateAvailableString"
+                        :disabled="!canEdit"
                       />
                     </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" />
+                  <vue-editor
+                    v-model="property.description"
+                    :editor-toolbar="customToolbar"
+                    :disabled="!canEdit"
+                  />
                   <br />
                   <p>
                     * A listing fee of R380 including VAT is payable to list your Property on the
                         type="number"
                         class="form-control uniInput"
                         v-model="field.value"
+                        :disabled="!canEdit"
                       />
                     </div>
                     <div v-else class="display:none"></div>
                     <div v-if="field.type === 'yesno'">
                       {{ field.name }}
-                      <input type="checkbox" v-model="field.value" />
+                      <input
+                        type="checkbox"
+                        v-model="field.value"
+                        :disabled="!canEdit"
+                      />
                     </div>
                   </div>
                 </div>
                       name="vtlink"
                       id="vtlink"
                       v-model="property.virtualTour"
+                      :disabled="!canEdit"
                     />
                   </div>
                 </div>
                       name="vlink"
                       id="vlink"
                       v-model="property.video"
+                      :disabled="!canEdit"
                     />
                   </div>
                 </div>
                 </div>
               </div>
               <ImageLoad
-                :savedImaged="propertyImages"
+                :savedImages="propertyImages"
                 :loadedImages="loadedImages"
                 @DefaultImage="UpdateDefaultImage"
+                @DeleteImage="DeleteImage"
+                :mayEdit="canEdit"
               />
               <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
               <button v-if="!wait" type="button" @click="Close()" class="btn-solid-blue">Close</button>
 import _ from "lodash";
 
 export default {
+  name: "PropertyEditPage",
   components: {
     mapSection,
     ImageLoad,
       defaultImage: 0,
       images: [],
       wait: false,
+      canEdit: true,
     };
   },
   methods: {
       "getPropertyFields",
       "updateProperty",
     ]),
+    StatusChanged(item) {
+      if (
+        item.target.value === "Offer Pending" ||
+        item.target.value === "Sold" ||
+        item.target.value === "Rented Out"
+      ) {
+        this.canEdit = false;
+      } else {
+        this.canEdit = true;
+      }
+      if (item.target.value === "For Rent") {
+        this.property.isSale = false;
+      }
+      if (item.target.value === "For Sale") {
+        this.property.isSale = true;
+      }
+    },
     clearAddress() {
       this.addressSet = false;
       this.property.streetNumber = undefined;
     },
     UpdateDefaultImage(item) {
       this.defaultImage = item;
+      for (let i = 0; i < this.propertyImages.length; i++) {
+        if (i === item) {
+          this.propertyImages[i].isDefault = true;
+        } else {
+          this.propertyImages[i].isDefault = false;
+        }
+      }
     },
     loadedImages(values) {
       this.images = values;
         });
       }
 
+      this.property.propertyImages = this.propertyImages;
+
+      //console.log(JSON.stringify(this.property));
+
       this.updateProperty(this.property).then((fulfilled) => {
         this.$router.push("/PropertyAdmin");
       });
       this.property.addressUrl = place.url;
       this.property.propertCoords = place.coords;
     },
+    DeleteImage(item) {
+      this.propertyImages[item].isDeleted = true;
+    },
   },
   mounted() {
-    this.wait = false;
-    this.getProperty(this.$route.params.id);
+    this.getProperty(this.$route.params.id).then((fulfilled) => {
+      this.wait = false;
+      if (
+        this.property.statusString === "Offer Pending" ||
+        this.property.statusString === "Sold" ||
+        this.property.statusString === "Rented Out"
+      ) {
+        this.canEdit = false;
+      } else {
+        this.canEdit = true;
+      }
+    });
   },
   computed: {
     ...mapState("property", [
       "propertyFields",
       "statuses",
     ]),
+    savedImages() {
+      const list = [];
+      for (let i = 0; i < this.propertyImages.length; i++) {
+        list.push(this.proeprtyImages[i].image);
+      }
+      return list;
+    },
   },
 };
 </script>

src/components/property/commercial/enquireNow/carouselSection.vue → src/components/property/enquireNow/carouselSection.vue

       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-2.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-3.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-4.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-6.jpg" alt="" />
+      <img class="item" v-for="(image, i) in images" :key="i" :src="image" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
 export default {
   components: {
     carousel
+  },
+  props: {
+    images: {}
   }
 };
 </script>

src/components/property/commercial/enquireNow/contentSection.vue → src/components/property/enquireNow/contentSection.vue

   <div class="container pt-5">
     <div class="row mb-8">
       <div class="col-md-6">
-        <h3>Mooikloof Office Park</h3>
-        <p>
-          The cream of the crop, no costs were spared on the finishing touches of this beautiful
-          office. This 160m2 office is ideally situated in Pretoria East in the hub of business
-          expansion for Pretoria. Two superb, air-conditioned ground floor units divided only by
-          glass and completed with two small recording studios. The Space is currently used for
-          corporate boardroom and training centre functions and can accommodate up to 25 delegates.
-          Stunning finishes y interior designer complete the unit with style and class. The perfect
-          address and office for the established professional for the training centre of your
-          dreams!
-        </p>
+        <h3>{{ property.propertyName }}</h3>
+        <p v-html="property.description"></p>
         <p><strong>View by Appointment only!</strong></p>
         <br />
         <p></p>
-        To arrange a viewing contact Mynie:
+        <!-- To arrange a viewing contact Mynie:
         <div class="col-md-4">
           <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a><br />
           <a href="tel:0124921238">+27 (0) 12 492 1238</a>
-        </div>
+        </div> -->
       </div>
       <div class="col-md-6">
-        <form>
-          <div class="form-group row">
-            <div class="form-group col-md-6">
+        <div class="form-group row">
+          <div class="form-group col-md-6 mb-4">
+            <float-label>
               <input
                 type="text"
                 name="name"
                 id="Unit"
                 placeholder="Unit"
                 data-rule="minlen:4"
-                v-model="Unit"
+                v-model="property.unit"
+                disabled
               />
-              <div class="validation"></div>
-            </div>
-            <div class="form-group col-md-6">
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-6">
+            <float-label>
               <input
                 type="text"
                 name="name"
                 id="Price"
                 placeholder="Price"
                 data-rule="minlen:4"
-                v-model="Price"
+                v-model="property.price"
+                disabled
               />
-              <div class="validation"></div>
-            </div>
-            <div class="form-group col-md-6">
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-6">
+            <float-label>
               <input
                 type="text"
                 name="name"
                 id="Size"
                 placeholder="Size"
                 data-rule="minlen:4"
-                v-model="Size"
+                v-model="size"
+                disabled
               />
-              <div class="validation"></div>
-            </div>
-            <div class="form-group col-md-6">
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-6 mb-4">
+            <float-label>
               <input
                 type="text"
                 name="name"
                 id="Suburb"
                 placeholder="Suburb"
                 data-rule="minlen:4"
-                v-model="Suburb"
+                v-model="property.suburb"
+                disabled
               />
-              <div class="validation"></div>
-            </div>
-            <div class="form-group col-md-12">
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-12 mb-4">
+            <float-label>
               <input
                 type="text"
                 name="name"
                 id="Name"
                 placeholder="Name"
                 data-rule="minlen:4"
-                v-model="Name"
+                v-model="name"
               />
-              <div class="validation"></div>
-            </div>
-            <div class="form-group col-md-12">
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-12 mb-4">
+            <float-label>
               <input
                 type="text"
                 name="name"
                 id="ContactNumber"
                 placeholder="ContactNumber"
                 data-rule="minlen:4"
-                v-model="ContactNumber"
+                v-model="contactNumber"
               />
-              <div class="validation"></div>
-            </div>
-            <div class="form-group col-md-12">
+            </float-label>
+
+            <div class="validation"></div>
+          </div>
+          <div class="form-group col-md-12">
+            <float-label>
               <input
                 type="text"
                 name="name"
                 data-rule="minlen:4"
                 v-model="email"
               />
-              <div class="validation"></div>
-            </div>
-          </div>
-          <div class="text-center">
-            <button class="btn-solid-blue" @click="sendMail()">ENQUIRE NOW</button>
-          </div>
-          <div v-if="boolSent">
-            <alert :text="alertMsg" :type="'SUCCESS'" />
+            </float-label>
+
+            <div class="validation"></div>
           </div>
-        </form>
+        </div>
+        <div class="text-center">
+          <button class="btn-solid-blue" @click="sendMail()">ENQUIRE NOW</button>
+        </div>
+        <div v-if="boolSent">
+          <alert :text="alertMsg" :type="'SUCCESS'" />
+        </div>
       </div>
     </div>
   </div>
 <script>
 /* eslint-disable */
 import axios from "axios";
-import alert from "../../../shared/alert";
+import alert from "../../shared/alert";
 
 export default {
   components: {
       alertMsg: "Sent! You can expect a reply soon!",
       name: null,
       email: null,
-      phone: null,
+      contactNumber: null,
       property: null,
       message: null,
       boolSent: false
   mounted() {
     this.boolSent = false;
   },
+  props: {
+    property: {}
+  },
   methods: {
     async sendMail() {
       var mailObj = {
-        toAddress: "lenes@provision-sa.com",
+        toAddress: "jlouw365@gmail.com",
         fromAddress: "jlouw365@gmail.com",
         name: this.name,
         email: this.email,
-        phone: this.phone,
-        property: this.property,
+        phone: this.contactNumber,
+        property: this.property.id.toString(),
         message: this.message
       };
 

src/components/property/enquireNow/enquirenow.vue

+<template>
+  <div>
+    <carouselSection v-if="propertyImages.length > 0" :images="propertyImages" />
+    <main id="main" style="margin-top:-20px;padding-bottom:50px">
+      <contentSection :property="property" />
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import carouselSection from "./carouselSection";
+import contentSection from "./contentSection";
+export default {
+  components: {
+    carouselSection,
+    contentSection
+  },
+  async mounted() {
+    await this.getProperty(this.$route.params.id);
+    await this.getPropertyImages(this.$route.params.id);
+    this.mayEditProperty(this.$route.params.id);
+  },
+  computed: {
+    ...mapState("property", ["property", "propertyImages"]),
+    ...mapState("propertyEdit", ["mayEdit"])
+  },
+  methods: {
+    ...mapActions("property", ["getProperty", "getPropertyImages", "clearPropertyImages"]),
+    ...mapActions("propertyEdit", ["mayEditProperty"]),
+    formatPrice(value) {
+      const val = (value / 1).toFixed(2);
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+    },
+    formatAddress(value) {
+      if (value !== "") {
+        return `${value}<br/>`;
+      }
+      return "";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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"
+      :disabled="!canEdit"
+    >*</gmap-autocomplete>
     <GmapMap
       :center="mapCenter"
       :zoom="mapZoom"
       style="width: 100%; height: 500px"
       ref="map"
     >
-      <GmapMarker v-if="this.place" :position="mapCenter" :clickable="true" :draggable="false" />
+      <GmapMarker
+        v-if="this.place"
+        :position="mapCenter"
+        :clickable="true"
+        :draggable="false"
+        :disabled="!canEdit"
+      />
     </GmapMap>
   </div>
 </template>
 import { gmapApi } from "vue2-google-maps";
 export default {
   computed: {
-    google: gmapApi
+    google: gmapApi,
   },
   props: {
-    savedCoords: { default: "" }
+    savedCoords: { default: "" },
+    canEdit: { default: true },
   },
   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") {
         province: this.province,
         country: this.country,
         postalCode: this.postalCode,
-        url: this.url
+        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

                   <img
                     style="max-height:165px; object-fit: cover;"
                     :src="currentProperty.displayImage"
-                    alt=""
+                    alt
                   />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
-                <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>
+                <p>
+                  <strong>Property Reference</strong>
+                  {{ currentProperty.propertyReference }}
+                </p>
+                <p
+                  v-if="!currentProperty.isSale"
+                  :class="[currentProperty.hasPendingOffer ? 'pendingOffer' : 'normalText']"
+                >
+                  <strong>{{ currentProperty.available }}</strong>
+                </p>
+                <p
+                  v-if="currentProperty.isSale  && currentProperty.hasPendingOffer"
+                  class="pendingOffer"
+                >
+                  <strong>{{ currentProperty.available }}</strong>
+                </p>
               </div>
             </router-link>
           </div>
                   <img
                     style="max-height:165px; object-fit: cover;"
                     :src="currentProperty.displayImage"
-                    alt=""
+                    alt
                   />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
-                <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>
+                <p>
+                  <strong>Property Reference</strong>
+                  {{ currentProperty.propertyReference }}
+                </p>
               </div>
             </router-link>
           </div>
   props: {
     properties: { type: Array, default: () => [] },
     showSort: { type: Boolean, default: true },
-    salesType: { type: String, default: "Rent" }
+    salesType: { type: String, default: "Rent" },
   },
   methods: {
     sortHighPrice() {
       }
 
       return this.properties.sort(compare);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/property/propertyImage.vue

           id="checkbox"
           v-model="imagesDefault[i]"
           @change="updateList(i)"
+          :disabled="!mayEdit"
         />
         <label v-if="allowMultiple" for="checkbox" style="margin: 10px;">Main Image</label>
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <!-- <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
           <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
         </span>-->
-        <button align="center" class="imageDeleteButton" @click="removeImage(i)">
+        <button v-if="mayEdit" class="imageDeleteButton" @click="removeImage(i)">
           <i class="fa fa-trash"></i>
         </button>
       </div>
     loadedImages: Function,
     mayEdit: { type: Boolean, default: () => true },
     allowMultiple: { type: Boolean, default: () => true },
-    savedImaged: { type: Array, default: () => [] },
+    savedImages: { type: Array, default: () => [] },
   },
   data() {
     return {
       images: {},
       image: [],
       imagesDefault: [],
+      maxSavedIndex: 0,
     };
   },
   // Commented out for now.
     },
 
     removeImage(key) {
+      this.$emit("DeleteImage", key);
       this.image.splice(key, 1);
       this.images.splice(key, 1);
 
       if (!this.image.length) {
         this.$refs.im.value = "";
       }
+
+      // if (key <= this.maxSavedIndex) {
+      //   this.$emit("DeleteImage", key);
+      // }
     },
 
     updateList(index) {
     },
   },
   watch: {
-    savedImaged: {
+    savedImages: {
       immediate: true,
       handler(val, oldVal) {
         if (val) {
-          this.image = val;
+          this.image = [];
+          this.imagesDefault = [];
+          for (let i = 0; i < val.length; i++) {
+            this.image.push(val[i].image);
+            this.imagesDefault.push(val[i].isDefault);
+            this.maxSavedIndex = i;
+          }
         }
       },
     },

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 class="col-md-4 mb-3 mt-2" v-for="(currentField, i) in fields" :key="i">
       <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>
+          <label class="uniSelectLabel" style="margin-top:-10px">{{ currentField.name }}</label>
         </div>
-        <input
-          v-if="currentField.type === 'number'"
-          class="form-control uniInput"
-          type="number"
-          name="currentField.name"
-          id="currentField.id"
-          v-model="setFields[i]"
-          @change="UpdateSetFields(currentField, i)"
-        />
+        <float-label :label="currentField.name" style="width:100%;top:-1em !important;">
+          <input
+            v-if="currentField.type === 'number'"
+            class="form-control uniInput"
+            type="number"
+            name="currentField.name"
+            id="currentField.id"
+            v-model="setFields[i]"
+            @change="UpdateSetFields(currentField, i)"
+          />
 
-        <input
-          v-if="currentField.type === 'text'"
-          class="form-control uniInput"
-          type="text"
-          name="currentField.name"
-          id="currentField.id"
-          v-model="setFields[i]"
-          @change="UpdateSetFields(currentField, i)"
-        />
+          <input
+            v-if="currentField.type === 'text'"
+            class="form-control uniInput"
+            type="text"
+            name="currentField.name"
+            id="currentField.id"
+            v-model="setFields[i]"
+            @change="UpdateSetFields(currentField, i)"
+          />
+        </float-label>
       </div>
     </div>
 

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

         <div class="row">
           <div class="col">
             <label v-if="!salesType" class="uniSelectLabel" for="saleType">Sale Type</label>
-            <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
-              <option value="Sale">To Sell</option>
-              <option value="Rental">To Rent</option>
-            </select>
+            <float-label label="Sale Type">
+              <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
+                <option value="Sale">To Sell</option>
+                <option value="Rental">To Rent</option>
+              </select>
+            </float-label>
           </div>
         </div>
-        <div class="row">
+        <div class="row mt-2">
           <div class="col-md-6">
             <div v-if="!property.propertyName">
               <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="propertyName"
-              v-model="property.propertyName"
-            />
+            <float-label label="PROPERTY NAME">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="propertyName"
+                v-model="property.propertyName"
+              />
+            </float-label>
           </div>
           <div class="col-md-6">
             <div v-if="!property.propertyRef">
               <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
             </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="propertyRef"
-              v-model="property.propertyRef"
-            />
+            <float-label label="PROPERTY REFERENCE">
+              <input
+                class="form-control uniInput"
+                type="text"
+                name="propertyRef"
+                v-model="property.propertyRef"
+              />
+            </float-label>
           </div>
         </div>
         <div class="row my-5">
               }}</option>
             </select>
           </div>
-          <div v-if="propertyType === 'Commercial'" class="col-md-2">
-            <div v-if="!property.unit">
-              <label for="unit" class="uniSelectLabel">UNIT</label>
-            </div>
-            <input
-              class="form-control uniInput"
-              type="text"
-              name="unit"
-              id="unit"
-              v-model="property.unit"
-            />
-          </div>
         </div>
         <div class="row my-5">
           <div class="col-md-6">
                     >{{ salesType }} Price</label
                   >
                 </div>
-                <currency-input
-                  onClick="this.setSelectionRange(0, this.value.length)"
-                  name="price"
-                  :value="value"
-                  @input="value = $event"
-                  v-model="property.price"
-                  id="price"
-                  class="form-control uniInput"
-                />
+                <float-label label="Price">
+                  <currency-input
+                    onClick="this.setSelectionRange(0, this.value.length)"
+                    name="price"
+                    :value="value"
+                    @input="value = $event"
+                    v-model="property.price"
+                    id="price"
+                    class="form-control uniInput"
+                  />
+                </float-label>
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 <select
           </div>
         </div>
         <div class="form-group row">
-          <div class="col-md-12">
-            <label class="uniSelectLabel">Virtual Tour (URL)</label>
+          <div class="col-md-12 mt-2">
+            <label v-if="!property.virtualTour" class="uniSelectLabel">Virtual Tour (URL)</label>
             <div class="input-group-prepend">
-              <input
-                class="form-control uniInput"
-                type="link"
-                name="vtlink"
-                id="vtlink"
-                v-model="property.virtualTour"
-              />
+              <float-label label="Virtual Tour (URL)" style="width:100%">
+                <input
+                  class="form-control uniInput"
+                  type="link"
+                  name="vtlink"
+                  id="vtlink"
+                  v-model="property.virtualTour"
+                />
+              </float-label>
             </div>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-12">
-            <label class="uniSelectLabel">Video (URL)</label>
+          <div class="col-md-12 mt-2">
+            <label v-if="!property.video" class="uniSelectLabel">Video (URL)</label>
             <div class="input-group-prepend">
-              <input
-                class="form-control uniInput"
-                type="link"
-                name="vlink"
-                id="vlink"
-                v-model="property.video"
-              />
+              <float-label label="Video (URL)" style="width:100%">
+                <input
+                  class="form-control uniInput"
+                  type="link"
+                  name="vlink"
+                  id="vlink"
+                  v-model="property.video"
+                />
+              </float-label>
             </div>
           </div>
         </div>

src/components/property/residential/latestListings.vue

           <div class="row">
             <div class="col">
               <propertyCard
-                v-if="properties.length > 0"
+                v-if="latestProperties.length > 0"
                 name="propertyholder"
-                :properties="properties"
+                :properties="latestProperties"
                 :showSort="false"
               />
             </div>
 import propertyCard from "../propertyCard";
 export default {
   components: {
-    propertyCard
+    propertyCard,
   },
   methods: {
-    ...mapActions("propertySearch", ["searchProperties"])
+    ...mapActions("propertySearch", ["searchLatestPropertiesType"]),
   },
   async mounted() {
-    this.propertySearch.propertyUsageType = "Residential";
-    await this.searchProperties(this.propertySearch);
+    await this.searchLatestPropertiesType("Residential");
   },
   computed: {
-    ...mapState("propertySearch", ["properties", "propertySearch"])
-  }
+    ...mapState("propertySearch", ["latestProperties"]),
+  },
 };
 </script>
 

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

         <div class="col-md-4">
           <div class="resPortfolioSection">
             <iframe
+              v-if="property.video != null"
               width="100%"
               src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
               frameborder="0"
           </div>
           <div class="panel-left px-5 pb-5 text-center">
             <h4 class="text-white">Share this Property</h4>
-            <a id="fb_share" href="#" target="_blank"
-              ><img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1"
-            /></a>
+            <ShareNetwork
+              v-if="currentUrl !== ''"
+              network="facebook"
+              :url="currentUrl"
+              title="Uni-Vate Property Listing"
+              description="Check out this property on Uni-Vate Properties!"
+              quote="The hot reload is so fast it\'s near instant. - Evan You"
+              hashtags="vuejs,vite"
+            >
+              <img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1" />
+            </ShareNetwork>
+
             <a
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
               ><img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1"
             /></a>
           </div>
         </div>
+        <div></div>
         <div class="col-md-8 p-5 resort-profile">
           <h2 v-if="property.showAddress">
             <div style="display:inline" v-if="property.propertyName !== null">
             </div>
           </div>
           <div>
+            <router-link
+              style="float:right"
+              class="btn-solid-blue mt-3"
+              :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
+              >MORE INFO...</router-link
+            >
             <h4>Property Features</h4>
 
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
               </div>
             </div>
           </div>
-          <h4 class="mt-5">Video Tour</h4>
+          <h4 v-if="property.video != null" class="mt-5">Video Tour</h4>
           <iframe
+            v-if="property.video != null"
             width="100%"
             src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
             frameborder="0"
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import gallery from "../../../shared/gallerySlideShow";
-import { ShareFacebook } from "vue-share-social";
+import { ShareFacebook } from "vue-social-sharing";
 export default {
   components: {
     gallery,
   },
   created() {
     //this.getListsForPropertyEdit(this.property.id);
-    console.log(this.property.displayData);
   },
-  mounted() {
-    // var facebookShare = document.getElementById("fb_share");
-    // facebookShare.href = "http://www.facebook.com/share.php?u=" + encodeURIComponent(location.href);
+  async mounted() {
+    this.currentUrl = window.location.origin + this.$route.fullPath;
   },
   data() {
     return {
       index: null,
-      date: new Date()
+      date: new Date(),
+      currentUrl: ""
     };
   },
   methods: {

src/components/shared/footerSection.vue

               <router-link class="footerText" to="/websiteDisclaimer"
                 >Website Disclaimer</router-link
               ><br />
+              <router-link class="footerText" to="/termsConditionsView"
+                >Terms & Conditions</router-link
+              ><br />
             </p>
           </div>
           <div class="col-lg-9 section-header" id="contactFoot">

src/components/shared/listView.vue

 <template>
   <div>
     <div style="height:5px"></div>
-    <div class="d-flex justify-content-between table-title">
+    <div class="d-flex justify-content-between ">
       <div class="p-2" v-if="!hideSearch">
-        <input v-model="searchItem" class="form-control" placeholder="Search...." />
+        <float-label>
+          <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="Search...." />
+        </float-label>
       </div>
       <div class="p-2" v-if="title">
         <h2>{{ title }}</h2>
       <div class="p-2">
         <div class="d-flex flex-row">
           <div class="p2" v-if="showColumnChooser">
-            <div
-              class="btn btn-primary myBackground btn-width cursor-pointer"
-              data-toggle="modal"
-              data-target="#myModal"
-            >
+            <div class="btn-solid-blue cursor-pointer" data-toggle="modal" data-target="#myModal">
               Column Chooser
             </div>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
-                <div class="modal-dialog modal-lg">
+                <div class="modal-dialog modal-lg" style="width:500px">
                   <!-- Modal content-->
                   <div class="modal-content">
                     <div class="modal-header">
                       <h5>Column Chooser</h5>
                       <button type="button" class="close" data-dismiss="modal">&times;</button>
                     </div>
-                    <div style="margin-left:50px; margin-right:50px;margin-bottom:50px;">
+                    <div style="margin-bottom:50px;">
                       <ListViewControl :items="allColumn" @checkItem="checkItem" />
                     </div>
                   </div>
             </div>
           </div>
           <div class="p2" v-if="selectedItems.length > 0">
-            <div
-              class="btn btn-primary myBackground btn-width cursor-pointer"
-              @click="onClearSelected()"
-            >
+            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">
               Clear Selected
             </div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">
+            <div class="btn-solid-blue cursor-pointer" @click="onNew()">
               New
             </div>
           </div>
     <div v-if="items && items.length > 0" class="table-responsive">
       <table
         id="table"
+        class="table table-striped"
         :class="{ 'table table-hover': 1 === 1, 'table-sm': compact, 'table-bordered': bordered }"
       >
         <thead>
             <th v-if="deleteable"></th>
           </tr>
         </thead>
-        <tbody class="my-table">
+        <tbody class="table">
           <tr
             v-for="(item, i) in DisplayItems"
             :key="i"

src/components/shared/listViewControl.vue

 <template>
   <div class="container">
-    <div class="offset-3 col-md-6">
-      <input v-model="searchItem" class="form-control" placeholder="Search...." />
+    <div class="row">
+      <div class="col-md-12">
+        <input v-model="searchItem" class="form-control" placeholder="Search...." />
+      </div>
     </div>
+
     <hr />
     <div class="row">
-      <div v-for="item in items" :key="item" class="col-md-4">
-        <div :class="{'inSearch': isInSelected(item)}">
+      <div v-for="item in items" :key="item" class="col-md-6">
+        <div :class="{ inSearch: isInSelected(item) }">
           <CheckItem :title="item.column" :show="item.show" @checkItem="checkItem" />
         </div>
       </div>
   </div>
 </template>
 <script>
-import CheckItem from './checkItem.vue';
+import CheckItem from "./checkItem.vue";
 
 export default {
   components: {
-    CheckItem,
+    CheckItem
   },
   data() {
     return {
-      searchItem: undefined,
+      searchItem: undefined
     };
   },
   props: {
-    items: undefined,
+    items: undefined
   },
   methods: {
     isInSelected(i) {
       if (this.searchItem && this.searchItem.length > 0) {
-        return (
-          i.column.toLowerCase().indexOf(this.searchItem.toLowerCase()) > -1
-        );
+        return i.column.toLowerCase().indexOf(this.searchItem.toLowerCase()) > -1;
       }
       return false;
     },
     checkItem(column, show) {
-      this.$emit('checkItem', column, show);
-    },
+      this.$emit("checkItem", column, show);
+    }
   },
-  computed: {},
+  computed: {}
 };
 </script>
 <style>

src/components/shared/navBar.vue

                       Commercial
                     </a>
                     <ul style="margin-top:-10px; text-align:left" :class="commercialClass">
-                      <li>
-                        
+                      <li>                     
                       </li>
                       <hr />
                       <li>
                   <li class="mx-1">
                     <router-link to="/share/contact">Contact Us</router-link>
                   </li>
-                  <li v-if="isLoggedIn" class="menu-has-children mx-1">
+                  <li v-if="USER" class="menu-has-children mx-1">
                     <div
                       @mouseover="userClass = 'ts-display'"
                       @mouseleave="userClass = 'no-display'"
                     ></div>
+
                     <a href="#" class="sf-with-ul">
                       {{ NAME }}
                     </a>
                     <ul style="margin-top:-10px;text-align:left" :class="userClass">
-                      <li v-if="ROLE === 'Super Admin'">
+                      <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/property/list">List Property</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/status/list">Status</router-link>
-                      </li>
-                      <li v-if="ROLE === 'Super Admin'">
+                      </li> -->
+                      <li v-if="ROLE === 'Super Admin'"></li>
                       <li>
                         <router-link to="/property/list">List My Property</router-link>
                       </li>
                           >Tender Week Management</router-link
                         >
                       </li>
-                      <li v-if="ROLE === 'Super Admin'">
+                      <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/unitConfiguration/list">Unit Configuration</router-link>
-                      </li>
-                      <li v-if="ROLE === 'Super Admin'">
+                      </li> -->
+                      <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/communication/template">Templates</router-link>
-                      </li>
-                      <hr />
+                      </li> -->
+                      <!-- <hr />
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/status/userManagementPage"
                           >User Management & Access</router-link
                         >
-                      </li>
-                      <li v-if="ROLE === 'Super Admin'">
+                      </li> -->
+                      <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/status/changeLogPage">Changes Logs</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/searchLog">Search Logs</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
-                      <hr />
-                      <li class="menu-has-children">
+                        <hr />
+                      </li> -->
+                      <hr v-if="ROLE === 'Super Admin'" />
+                      <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
                         <div
                           @mouseover="submenu1Class = 'ts-display'"
                           @mouseleave="submenu1Class = 'no-display'"
                           <li>
                             <router-link to="/fees">Fees</router-link>
                           </li>
+                          <li>
+                            <router-link to="/termsConditions"
+                              >Edit Terms and Conditions</router-link
+                            >
+                          </li>
                         </ul>
                       </li>
-                      <li class="menu-has-children">
+                      <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
                         <div
                           @mouseover="submenu1Class = 'ts-display'"
                           @mouseleave="submenu1Class = 'no-display'"
                           </li>
                         </ul>
                       </li>
-                      <hr />
+                      <hr v-if="ROLE === 'Super Admin'" />
                       <li>
                         <router-link to="/Offers">Offers</router-link>
                       </li>
-                      <li v-if="ROLE === 'Super Admin'">
+                      <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/Carousel">Carousel</router-link>
-                      </li>
+                      </li> -->
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/user/updateProfileInfo">Update Info</router-link>
                       </li>
                     </ul>
                   </li>
 
-                  <li v-if="!isLoggedIn">
+                  <li v-if="!USER">
                     <router-link class="btn-white-border p-2 ml-1 mr-1" to="/user/login"
                       >Login</router-link
                     >
                   </li>
 
-                  <li v-if="!isLoggedIn">
+                  <li v-if="!USER">
                     <router-link class=" btn-solid-blue pt-2 pb-2" to="/user/register"
                       >Register</router-link
                     >
     NAME() {
       return Log.getPerson().name;
     },
+    USER() {
+      var userObj = {};
+      if (!this.user) {
+        userObj = JSON.parse(localStorage.getItem("user"));
+      } else {
+        userObj = this.user;
+      }
+
+      return userObj;
+    },
     ROLE() {
       var userObj = JSON.parse(localStorage.getItem("user"));
-      return userObj.role
+      return userObj.role;
     },
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {

src/components/timeshare/myWeeksPage.vue

     <div class="row">
       <div class="offset-1 col-md-3">
         {{ items[selectedItems] }}
+        <button
+          type="button"
+          :class="{
+            'form-control btn-solid-blue ': 1 === 1,
+            'my-disable':
+              !(selectedItems.length == 1) ||
+              !items[selectedItems] ||
+              items[selectedItems].status.code !== 'A2'
+          }"
+          value="Publish Week"
+          :disabled="!(items.length == 1)"
+        >
+          Publish selected week
+        </button>
       </div>
       <div class="offset-1 col-md-10">
         <ListView

src/components/timeshare/sell/contentSection.vue

             <div id="sendmessage">Your details has been sent. Thank you!</div>
             <div id="errormessage"></div>
             <div class="form-row">
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <div class="input-group">
                   <label v-if="!sellItem.region" class="uniSelectLabel" for="weekInfoRegionSelect"
                     >REGION</label
                   >
-
-                  <select
-                    id="weekInfoRegionSelect"
-                    class="form-control uniSelect"
-                    v-model="sellItem.region"
-                    @change="regionChange()"
-                    style="font-size: 15px"
-                  >
-                    <option v-for="(region, r) in regions" :key="r" :value="region">{{
-                      region.regionName
-                    }}</option>
-                  </select>
+                  <float-label label="REGION" style="width:100%">
+                    <select
+                      id="weekInfoRegionSelect"
+                      class="form-control uniSelect"
+                      v-model="sellItem.region"
+                      @change="regionChange()"
+                      style="font-size: 15px"
+                    >
+                      <option v-for="(region, r) in regions" :key="r" :value="region">{{
+                        region.regionName
+                      }}</option>
+                    </select>
+                  </float-label>
                 </div>
 
                 <!-- <input
                 />-->
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <div class="input-group">
                   <label v-if="!sellItem.resort" class="uniSelectLabel" for="weekInfoResortSelect"
                     >RESORT NAME</label
                   >
-
-                  <select
-                    id="weekInfoResortSelect"
-                    class="form-control uniSelect"
-                    v-model="sellItem.resort"
-                    @change="resortChange()"
-                  >
-                    <option value="Other">Other</option>
-                    <option v-for="(resort, r) in filteredResort" :key="r" :value="resort">{{
-                      resort.resortName
-                    }}</option>
-                  </select>
+                  <float-label label="RESORT NAME" style="width:100%">
+                    <select
+                      id="weekInfoResortSelect"
+                      class="form-control uniSelect"
+                      v-model="sellItem.resort"
+                      @change="resortChange()"
+                    >
+                      <option value="Other">Other</option>
+                      <option v-for="(resort, r) in filteredResort" :key="r" :value="resort">{{
+                        resort.resortName
+                      }}</option>
+                    </select>
+                  </float-label>
                 </div>
                 <!-- <input
                     type="text"
                   v-model="sellItem.otherResortName"
                 />
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <div v-if="sellItem.otherResort">
                   <label v-if="!sellItem.region" class="uniSelectLabel" for="region">REGION</label>
                 </div>
                   <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
                 </select>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="number"
-                  class="form-control"
-                  name="unitNumber"
-                  id="unitNumber"
-                  placeholder="UNIT NUMBER"
-                  v-model="sellItem.unitNumber"
-                  data-msg="Please enter unit number"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="number"
+                    class="form-control"
+                    name="unitNumber"
+                    id="unitNumber"
+                    placeholder="UNIT NUMBER"
+                    v-model="sellItem.unitNumber"
+                    data-msg="Please enter unit number"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="number"
-                  class="form-control"
-                  name="week"
-                  id="week"
-                  placeholder="UNIT / WEEK NUMBER"
-                  v-model="sellItem.module"
-                  data-msg="Please enter week number"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="number"
+                    class="form-control"
+                    name="week"
+                    id="week"
+                    placeholder="UNIT / WEEK NUMBER"
+                    v-model="sellItem.module"
+                    data-msg="Please enter week number"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <label v-if="!sellItem.season" class="uniSelectLabel" for="region">SEASON</label>
+                <float-label label="SEASON">
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.season"
+                  >
+                    <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
+                  </select>
+                </float-label>
 
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.season"
-                >
-                  <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
-                </select>
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <label v-if="!sellItem.bedrooms" class="uniSelectLabel" for="region"
                   >BEDROOM/S</label
                 >
+                <float-label label="BEDROOM/S">
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.bedrooms"
+                  >
+                    <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
+                  </select>
+                </float-label>
 
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.bedrooms"
-                >
-                  <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
-                </select>
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <label v-if="!sellItem.maxSleep" class="uniSelectLabel" for="region"
                   >SLEEP MAX</label
                 >
+                <float-label label="SLEEP MAX">
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.maxSleep"
+                  >
+                    <option v-for="(item, i) in maxSleep" :key="i">{{ item }}</option>
+                  </select>
+                </float-label>
 
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.maxSleep"
-                >
-                  <option v-for="(item, i) in maxSleep" :key="i">{{ item }}</option>
-                </select>
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="number"
-                  class="form-control"
-                  name="levy"
-                  id="levy"
-                  placeholder="Levy Amount"
-                  v-model="sellItem.levyAmount"
-                  data-msg="Please enter levy amount"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="number"
+                    class="form-control"
+                    name="levy"
+                    id="levy"
+                    placeholder="Levy Amount"
+                    v-model="sellItem.levyAmount"
+                    data-msg="Please enter levy amount"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
+              <div class="form-group col-md-6 mt-2">
                 <label v-if="!sellItem.weekType" class="uniSelectLabel" for="region"
                   >WEEK TYPE</label
                 >
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.weekType"
-                >
-                  <option :key="0">Flexi</option>
-                  <option :key="1">Fixed</option>
-                  <option :key="2">Module</option>
-                  <option :key="3">Syndicate</option>
-                </select>
+                <float-label label="WEEK TYPE">
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.weekType"
+                  >
+                    <option :key="0">Flexi</option>
+                    <option :key="1">Fixed</option>
+                    <option :key="2">Module</option>
+                    <option :key="3">Syndicate</option>
+                  </select>
+                </float-label>
               </div>
             </div>
           </div>
             <h2>Detailed Individual Information</h2>
           </div>
           <div class="form">
-            <div class="row">
+            <div class="row mb-2">
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  name="name"
-                  class="form-control"
-                  id="name"
-                  placeholder="Name"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your name"
-                  v-model="indiv.name"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    name="name"
+                    class="form-control"
+                    id="name"
+                    placeholder="Name"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your name"
+                    v-model="indiv.name"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="surname"
-                  id="surname"
-                  placeholder="Surname"
-                  data-msg="Please enter your surname"
-                  v-model="indiv.surname"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="surname"
+                    id="surname"
+                    placeholder="Surname"
+                    data-msg="Please enter your surname"
+                    v-model="indiv.surname"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
-            <div class="row">
+            <div class="row mb-2">
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  name="idnum"
-                  class="form-control"
-                  id="idnum"
-                  placeholder="ID Number"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your ID number"
-                  v-model="indiv.idNumber"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    name="idnum"
+                    class="form-control"
+                    id="idnum"
+                    placeholder="ID Number"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your ID number"
+                    v-model="indiv.idNumber"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="company"
-                  id="company"
-                  placeholder="Company Reg Number"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your company reg number"
-                  v-model="indiv.companyRegNumber"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="company"
+                    id="company"
+                    placeholder="Company Reg Number"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your company reg number"
+                    v-model="indiv.companyRegNumber"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
-            <div class="row">
+            <div class="row mb-2">
               <div class="form-group col-md-6">
                 <div class="input-group">
-                  <label
-                    v-if="!indiv.howMarried || indiv.howMarried === 'N/A'"
-                    for="howMarried"
-                    class="uniSelectLabel"
-                    >Marital Status</label
-                  >
-                  <select class="form-control uniSelect" id="howMarried" v-model="indiv.howMarried">
-                    <option value="N/A">N/A</option>
-                    <option value="In Community Of Property">In Community Of Property</option>
-                    <option value="Out of Community Of Property"
-                      >Out of Community Of Property</option
+                  <span v-if="!indiv.howMarried">
+                    <label v-if="indiv.howMarried === 'N/A'" for="howMarried" class="uniSelectLabel"
+                      >Marital Status</label
                     >
-                    <option value="Other">Other</option>
-                    <option value="Traditional Wedding">Traditional Wedding</option>
-                    <option value="Single">Single</option>
-                    <option value="Divorced">Divorced</option>
-                    <option value="Widow">Widow</option>
-                    <option value="Committed Relationship">Committed Relationship</option>
-                    <option value="Partner">Partner</option>
-                  </select>
+                  </span>
+
+                  <float-label label="Marital Status" style="width:100%">
+                    <select
+                      class="form-control uniSelect"
+                      id="howMarried"
+                      v-model="indiv.howMarried"
+                    >
+                      <option value="N/A">N/A</option>
+                      <option value="In Community Of Property">In Community Of Property</option>
+                      <option value="Out of Community Of Property"
+                        >Out of Community Of Property</option
+                      >
+                      <option value="Other">Other</option>
+                      <option value="Traditional Wedding">Traditional Wedding</option>
+                      <option value="Single">Single</option>
+                      <option value="Divorced">Divorced</option>
+                      <option value="Widow">Widow</option>
+                      <option value="Committed Relationship">Committed Relationship</option>
+                      <option value="Partner">Partner</option>
+                    </select>
+                  </float-label>
                 </div>
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="email"
-                  id="email"
-                  placeholder="Email Address"
-                  data-msg="Please enter your email address"
-                  v-model="indiv.emailAddress"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="email"
+                    id="email"
+                    placeholder="Email Address"
+                    data-msg="Please enter your email address"
+                    v-model="indiv.emailAddress"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
             <div class="row">
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  name="cell"
-                  class="form-control"
-                  id="cell"
-                  placeholder="Cell Number"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your cell number"
-                  v-model="indiv.cellNumner"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    name="cell"
+                    class="form-control"
+                    id="cell"
+                    placeholder="Cell Number"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your cell number"
+                    v-model="indiv.cellNumner"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="landline"
-                  id="landline"
-                  placeholder="Landline Number"
-                  data-msg="Please enter your landline number"
-                  v-model="indiv.landlineNumber"
-                />
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="landline"
+                    id="landline"
+                    placeholder="Landline Number"
+                    data-msg="Please enter your landline number"
+                    v-model="indiv.landlineNumber"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
             <h2>Spouse Details</h2>
           </div>
           <div v-if="indiv.howMarried === 'In Community Of Property'" class="form">
-            <div class="form-row">
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE NAME"
-                  data-msg="Please enter your spouse's name"
-                  v-model="indiv.spouseName"
-                />
+            <div class="form-row mb-2">
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE NAME"
+                    data-msg="Please enter your spouse's name"
+                    v-model="indiv.spouseName"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE SURNAME"
-                  data-msg="Please enter your spouse's surname"
-                  v-model="indiv.spouseSurname"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE SURNAME"
+                    data-msg="Please enter your spouse's surname"
+                    v-model="indiv.spouseSurname"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE EMAIL"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your spouse's email"
-                  v-model="indiv.spouseEmail"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE EMAIL"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your spouse's email"
+                    v-model="indiv.spouseEmail"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE TELEPHONE"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your spouse's telephone number"
-                  v-model="indiv.spouseTelephone"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE TELEPHONE"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your spouse's telephone number"
+                    v-model="indiv.spouseTelephone"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE CELL NUMBER"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your spouse's cellphone number"
-                  v-model="indiv.spouseCellnumber"
-                />
+              <div class="form-group col-md-6 mt-2">
+                <float-label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE CELL NUMBER"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your spouse's cellphone number"
+                    v-model="indiv.spouseCellnumber"
+                  />
+                </float-label>
+
                 <div class="validation"></div>
               </div>
             </div>
                   v-model="indiv.address.streetNumber"
                   disabled
                 />
+
                 <div class="validation"></div>
               </div>
               <div class="form-group col-md-6">
               </button>
               <button class="btn-solid-blue" v-else @click="newSale()">NEW WEEK</button>
             </div>
-            <div class="text-center col-12">
+            <!-- <div class="text-center col-12">
               <button class="btn-solid-blue" @click="paygateRedirect()">PayGate</button>
-            </div>
+            </div> -->
             <br />
             <br />
           </div>

src/components/user/registerAgencySection.vue

         />
       </div>
     </div>
-
-    <button v-on:click="SubmitData()" class="btn-solid-blue" type="submit">
+    <div class="row">
+      <div class="col">
+        <label for="tc"
+          ><router-link to="/termsConditionsView">Terms & Conditions</router-link></label
+        >
+        <input
+          name="tc"
+          type="checkbox"
+          class="ml-3 mt-2"
+          v-model="registerAgency.user.acceptedTerms"
+        />
+      </div>
+    </div>
+    <button
+      v-if="registerAgency.user.acceptedTerms"
+      v-on:click="SubmitData()"
+      class="btn-solid-blue"
+      type="submit"
+    >
       SUBMIT
     </button>
     <router-link to="/user/login" class="btn-white-border mb-5" style="float:right" type="submit">

src/components/user/registerIndividual.vue

           />
         </div>
       </div>
+      <div class="row">
+        <div class="col">
+          <label for="tc"
+            ><router-link to="/termsConditionsView">Terms & Conditions</router-link></label
+          >
+
+          <input
+            name="tc"
+            type="checkbox"
+            class="ml-3 mt-2"
+            v-model="registerIndividual.acceptedTerms"
+          />
+        </div>
+      </div>
 
-      <button v-on:click="SubmitData()" class="btn-solid-blue" type="submit">
+      <button
+        v-if="registerIndividual.acceptedTerms"
+        v-on:click="SubmitData()"
+        class="btn-solid-blue"
+        type="submit"
+      >
         SUBMIT
       </button>
       <router-link to="/user/login" class="btn-white-border" style="float:right" type="submit">
       this.isPasswordShown = "password";
     },
     SubmitData() {
+      console.log(this.registerIndividual);
+
       this.saveIndividual(this.registerIndividual);
 
       this.$router.push("/user/login");

src/main.js

 import store from "./store";
 import * as VueGoogleMaps from "vue2-google-maps";
 import Vuetify from "vuetify";
-import VueShareSocial from "vue-share-social";
+import VueSocialSharing from "vue-social-sharing";
 import VueCurrencyInput from "vue-currency-input";
+import VueFloatLabel from "vue-float-label";
 
-Vue.use(VueShareSocial);
+Vue.use(VueSocialSharing);
 Vue.use(EvaIcons);
 Vue.use(Vuetify);
+Vue.use(VueFloatLabel);
 
 Vue.use(VueGoogleMaps, {
   load: {

src/router/index.js

 import ContactUs from "../components/misc/contactUs.vue";
 import PrivacyPolicy from "../components/misc//privacyPolicy/privacyPolicyPage.vue";
 import WebsiteDisclaimer from "../components/misc/Disclaimer/WebsiteDisclaimer.vue";
+import TermsConditions from "../components/admin/misc/termsConditions.vue";
+import TermsConditionsView from "../components/misc/TermsConditions/termsConditions.vue";
 
 import MakeOffer from "../components/processFlow/makeOffer.vue";
 import Offer from "../components/processFlow/offers.vue";
 import LandingPageWeek from "../components/marketing/landingPageWeek.vue";
 import MarketingPage from "../components/marketing/clientView.vue";
 import MarketingPageExp from "../components/marketing/landingPageExpired.vue";
-import EnquireNow from "../components/property/commercial/enquireNow/enquirenow.vue";
+import EnquireNow from "../components/property/enquireNow/enquirenow.vue";
 import MyWeeksEdit from "../components/admin/status/editTimeShareAdminPage.vue";
 
 Vue.use(Router);
       name: "fees",
       component: Fees
     },
+    {
+      path: "/termsConditions",
+      name: "termsConditions",
+      component: TermsConditions
+    },
+    {
+      path: "/termsConditionsView",
+      name: "termsConditionsView",
+      component: TermsConditionsView
+    },
     {
       path: "/carousel",
       name: "carousel",
       component: MarketingPageExp
     },
     {
-      path: "/EnquireNow",
+      path: "/EnquireNow/:id",
       name: "EnquireNow",
       component: EnquireNow
     },
     {
       path: "/editTimeShare/:id",
       name: "EditTimeshare",
-      component: MyWeeksEdit,
+      component: MyWeeksEdit
     }
   ]
 });

src/store/index.js

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

src/store/modules/misc/termsConditions.js

+/* eslint-disable */
+import axios from "axios";
+
+export default {
+  namespaced: true,
+  state: {
+    terms: []
+  },
+  mutations: {
+    getTermsAndConditions: (state, fee) => (state.terms = fee),
+    newTermsAndConditions: (state, fee) => (state.terms = fee)
+  },
+  getters: {
+    getTermsAndConditions: state => state.terms
+  },
+  actions: {
+    async retrieveTerms({ commit }) {
+      await axios.get("api/tc/").then(res => {
+        commit("getTermsAndConditions", res.data);
+      });
+    },
+    async setTerms({ commit }, terms) {
+      const response = await axios.post("api/tc/", terms);
+      if (response.status === 200) {
+        commit("newTermsAndConditions", response.data);
+        return Promise.resolve();
+      } else {
+        return Promise.reject();
+      }
+    }
+  }
+};

src/store/modules/property/property.js

     },
     setPropertyImages(state, images) {
       state.propertyImages = images;
+      state.propertyImageList = [];
+      for (let i = 0; i < images.length; i++) {
+        state.propertyImageList.push(images[i].image);
+      }
     },
     setPropertyTypes(state, types) {
       state.propertyTypes = types;
           .then(result => {
             commit("setProperty", result.data);
             dispatch("getPropertyTypes", result.data.propertyUsageType);
-            dispatch("getPropertyImages", result.data.id);
+            dispatch("getSavedPropertyImages", result.data.id);
             dispatch("getSavedPropertyFields", result.data.id);
             dispatch("getStatuses");
             resolve();
         .then(result => commit("setPropertyImages", result.data))
         .catch(console.error);
     },
+    getSavedPropertyImages({ commit }, id) {
+      axios
+        .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
+        .then(result => commit("setPropertyImages", result.data))
+        .catch(console.error);
+    },
     getPropertyTypes({ commit }, propertyType) {
       axios
         .get(`/api/PropertyType/type/${propertyType}`)

src/store/modules/property/propertySearch.js

         .then(response => commit("setLatestProperties", response.data))
         .catch(console.error);
     },
+    searchLatestPropertiesType({ commit }, type) {
+      axios
+        .get(`/api/property/latestProperties/${type}`)
+        .then(response => commit("setLatestProperties", response.data))
+        .catch(console.error);
+    },
     applyFilter({ commit }, value) {
       commit("setFilter", { value });
     },

src/store/modules/user/authentication.js

         method: "POST"
       });
       if (response.status === 200) {
+        console.log(response);
+
         log.clearValues();
         log.setValues(response.data);
         commit("auth_success", response.data);

src/store/modules/user/register.js

-import axios from 'axios';
+import axios from "axios";
 
 export default {
   namespaced: true,
     individuals: [],
     agents: [],
     registerIndividual: {
-      name: '',
-      surname: '',
-      email: '',
-      cellNumber: '',
-      username: '',
-      password: '',
+      name: "",
+      surname: "",
+      email: "",
+      cellNumber: "",
+      username: "",
+      password: "",
+      acceptedTerms: false
     },
     registerAgency: {
-      name: '',
-      eaabeffcNumber: '',
-      companyRegNumber: '',
+      name: "",
+      eaabeffcNumber: "",
+      companyRegNumber: "",
       user: {
-        name: '',
-        surname: '',
-        email: '',
-        cellNumber: '',
-        username: '',
-        password: '',
-        role: '',
-      },
-    },
+        name: "",
+        surname: "",
+        email: "",
+        cellNumber: "",
+        username: "",
+        password: "",
+        role: ""
+      }
+    }
   },
   mutations: {
     setIndividual(state, type) {
     },
     updateAgency(state, type) {
       state.registerAgency.find(item => item.id === type.id).eaabeffcNumber = type.eaabeffcNumber;
-      state.registerAgency.find(item => item.id === type.id).companyRegNumber = type.companyRegNumber;
+      state.registerAgency.find(item => item.id === type.id).companyRegNumber =
+        type.companyRegNumber;
     },
     clearIndividual(state) {
       state.registerIndividual = {
-        name: '',
-        surname: '',
-        email: '',
-        cellNumber: '',
-        username: '',
-        password: '',
+        name: "",
+        surname: "",
+        email: "",
+        cellNumber: "",
+        username: "",
+        password: ""
       };
     },
     clearAgency(state) {
       state.registerAgency = {
-        name: '',
-        eaabeffcNumber: '',
-        companyRegNumber: '',
+        name: "",
+        eaabeffcNumber: "",
+        companyRegNumber: "",
         user: {
-          name: '',
-          surname: '',
-          email: '',
-          cellNumber: '',
-          username: '',
-          password: '',
-        },
+          name: "",
+          surname: "",
+          email: "",
+          cellNumber: "",
+          username: "",
+          password: ""
+        }
       };
     },
     removeIndividual(state, id) {
     },
     removeAgent(state, id) {
       state.registerAgency.pop(state.registerAgency.find(a => a.id === id));
-    },
+    }
   },
   getters: {},
   actions: {
     getIndividuals({ commit }) {
       axios
-        .get('/api/individual')
-        .then(result => commit('setIndividuals', result.data))
+        .get("/api/individual")
+        .then(result => commit("setIndividuals", result.data))
         .catch(console.error);
     },
     getAgents({ commit }) {
       axios
-        .get('/api/agent')
-        .then(result => commit('setAgents', result.data))
+        .get("/api/agent")
+        .then(result => commit("setAgents", result.data))
         .catch(console.error);
     },
     // getAgency({
 
     saveIndividual({ commit }, item) {
       axios
-        .post('/api/register/register', item)
-        .then(result => commit('addIndividual', result.data))
+        .post("/api/register/register", item)
+        .then(result => commit("addIndividual", result.data))
         .catch(console.error);
     },
     saveAgency({ commit }, item) {
       axios
-        .post('/api/register/registeragency', item)
-        .then(result => commit('addAgency', result.data))
+        .post("/api/register/registeragency", item)
+        .then(result => commit("addAgency", result.data))
         .catch(console.error);
     },
     saveAgent({ commit }, item) {
       axios
-        .post('/api/agent', item)
-        .then(result => commit('addAgent', result.data))
+        .post("/api/agent", item)
+        .then(result => commit("addAgent", result.data))
         .catch(console.error);
     },
     // updateIndividual({
     deleteIndividual({ commit }, id) {
       axios
         .delete(`/api/individual/${id}`)
-        .then(result => commit('removeIndividual', id))
+        .then(result => commit("removeIndividual", id))
         .catch(console.error);
     },
     deleteAgent({ commit }, id) {
       axios
         .delete(`/api/agent/${id}`)
-        .then(result => commit('removeAgent', id))
+        .then(result => commit("removeAgent", id))
         .catch(console.error);
-    },
+    }
     // deleteAgency({
     //   commit,
     // }, id) {
     //     .then(result => commit('removeAgency', id))
     //     .catch(console.error);
     // },
-  },
+  }
 };