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

public/css/newStyle.css

 }
 
 #intro #intro-carousel .item {
-  height: 700px;
+  height: 550px;
+  object-fit: cover;
   display: block;
   background-size: center;
   background-position: center center;
   transition-property: opacity;
 }
 
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+  #intro #intro-carousel .item {
+    height: 750px;
+  }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+  #intro #intro-carousel .item {
+    height: 660px;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+  #intro #intro-carousel .item {
+    height: 550px;
+  }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+}
+
 /*--------------------------------------------------------------
 # Buttons
 --------------------------------------------------------------*/

src/components/about/aboutTimeshareCarouselSection.vue

       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-1.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-2.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-3.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-4.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-5.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/timeshare-6.jpg" alt="" />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-1.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-2.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-3.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-4.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-5.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-6.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>

src/components/about/aboutUsCarouselSection.vue

       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="../../../public/img/intro-carousel/home-1.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-2.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-3.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-4.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-5.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-6.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>

src/components/home/carouselSection.vue

   <section id="intro">
     <div class="container">
       <div class="row">
-        <div align="left" class="col-sm-12 col-md-8">
-          <div class="intro-content">
+        <div align="left" class="col-sm-12 col-md-12 col-lg-8">
+          <div class="intro-content introContentAdjust">
             <h2>Find your perfect Property</h2>
-
             <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
               <li class="nav-item">
                 <a
       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="../../../public/img/intro-carousel/home-1.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-2.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-3.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-4.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-5.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-6.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+  .introContentAdjust {
+    margin-top: -35px !important;
+  }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+  .introContentAdjust {
+    margin-top: -15px !important;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+  .introContentAdjust {
+    margin-top: 25px !important;
+  }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+  .introContentAdjust {
+    margin-top: 0px !important;
+  }
+}
+</style>

src/components/misc/privacyPolicy/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" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>

src/components/processFlow/makeOffer.vue

         class="btn btn-b-n"
         style="width: 150px; height:40px;"
         data-dismiss="modal"
-      >
-        OK
-      </button>
+      >OK</button>
     </div>
     <div v-else>
       <div v-if="!isSaved">
       <div v-if="!isSaved" class="container">
         <div class="row">
           <div algin="center" class="col">
-            <button v-if="isMakeOffer" type="button" @click="SendOffer()" class="btn-solid-blue">
-              Send Offer
-            </button>
+            <button
+              v-if="isMakeOffer"
+              type="button"
+              @click="SendOffer()"
+              class="btn-solid-blue"
+            >Send Offer</button>
             <button
               v-if="!isMakeOffer && !isDecline && canEdit"
               type="submit"
               @click="Accept()"
               class="btn btn-b-n"
               style="width: 150px; height:40px;"
-            >
-              Accept
-            </button>
+            >Accept</button>
             <button
               v-if="!isMakeOffer && !isDecline && canEdit"
               type="button"
               @click="Decline()"
               class="btn btn-b-n"
               style="width: 150px; height:40px;"
-            >
-              Decline
-            </button>
+            >Decline</button>
           </div>
         </div>
       </div>
         @click="Complete()"
         class="btn btn-b-n"
         style="width: 150px; height:40px;"
-      >
-        Complete
-      </button>
+      >Complete</button>
       <div v-if="isSaved">
         <div class="form-group row">
           <br />
           class="btn btn-b-n"
           style="width: 150px; height:40px;"
           data-dismiss="modal"
-        >
-          OK
-        </button>
+        >OK</button>
       </div>
     </div>
   </div>
     canEdit: Boolean,
     item: Object,
     bidId: Number,
-    updateItem: Function
+    updateItem: Function,
   },
   data() {
     return {
       isSaved: false,
       message: "",
       isInfo: true,
-      isLoggedIn: Log.isLoggedIn()
+      isLoggedIn: Log.isLoggedIn(),
     };
   },
   methods: {
-    ...mapActions("bid", ["getBid", "saveBid", "acceptBid", "declineBid"]),
+    ...mapActions("bid", ["getTemplate", "saveBid", "acceptBid", "declineBid"]),
     SendOffer() {
-      alert("Under Development");
-      // this.getBid(0);
-      // this.bidItem.id = 0;
-      // this.bidItem.amount = this.item.offer;
-      // this.bidItem.comment = this.item.comment;
-      // if (this.isProperty) {
-      //   this.bidItem.propertyId = this.item.id;
-      // } else {
-      //   this.bidItem.timeshareWeekId = this.item.id;
-      // }
-      // this.saveBid(this.bidItem);
+      //alert("Under Development");
+      this.bidItem.id = 0;
+
+      this.bidItem.amount = this.item.offer;
+      this.bidItem.comment = this.item.comment;
+      if (this.isProperty) {
+        this.bidItem.propertyId = this.item.id;
+      } else {
+        this.bidItem.timeshareWeekId = this.item.id;
+        if (this.item.isTender) {
+          this.bidItem.tenderWeek = this.item;
+        }
+      }
+      this.saveBid(this.bidItem);
 
-      // this.item = [];
-      // this.isSaved = true;
-      // this.message = "Offer was submitted.";
-      // this.isInfo = true;
+      this.isSaved = true;
+      this.isInfo = true;
+      this.message = "Offer was submitted.";
     },
     Accept() {
       this.acceptBid(this.item.id);
 
       const decline = {
         id: this.item.id,
-        comment: this.item.declineReason
+        comment: this.item.declineReason,
       };
 
       this.declineBid(decline);
       this.isSaved = true;
       this.message = "Offer Declined.";
       this.isInfo = false;
-    }
+    },
   },
   computed: {
-    ...mapState("bid", ["bidIt,em"])
+    ...mapState("bid", ["bidItem"]),
+  },
+  mounted() {
+    this.getTemplate();
   },
   watch: {
     item() {
       this.isSaved = false;
       this.canEdit = this.item.statusCode === "E1";
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/property/residential/residentialCarouselSection.vue

         style="margin-top:-50px"
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
       >
-        <img class="item" src="img/intro-carousel/residential-1.jpg" alt="" />
-        <img class="item" src="img/intro-carousel/residential-2.jpg" alt="" />
-        <img class="item" src="img/intro-carousel/residential-3.jpg" alt="" />
-        <img class="item" src="img/intro-carousel/residential-4.jpg" alt="" />
-        <img class="item" src="img/intro-carousel/residential-5.jpg" alt="" />
-        <img class="item" src="img/intro-carousel/residential-6.jpg" alt="" />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-1.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-2.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-3.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-4.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-5.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-6.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
       </carousel>
     </section>
     <main id="main" style="margin-top:-20px">

src/components/propertyManagement/carouselSection.vue

       :items="1"
       :autoplay="true"
       :loop="true"
+      :autoHeight="true"
       id="intro-carousel"
-      style="margin-top:-50px"
+      style="margin-top:-50px;"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="../../../public/img/intro-carousel/home-1.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/16.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/comm-1.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/comm-4.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/3.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-5.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/16.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/comm-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/comm-4.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/3.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>

src/components/shared/addressAutoComplete.vue

+<template>
+  <div>
+    <gmap-autocomplete class="form-control" @place_changed="setPlace"></gmap-autocomplete>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AddressAutoComplete",
+  props: {
+    placeholder: {
+      default: "ENTER LOCATION"
+    }
+  },
+  data() {
+    return {
+      streetNumber: "",
+      streetName: "",
+      suburb: "",
+      city: "",
+      province: "",
+      country: "",
+      postalCode: "",
+      url: ""
+    };
+  },
+  methods: {
+    setPlace(place) {
+      this.streetNumber = "";
+      this.streetName = "";
+      this.suburb = "";
+      this.city = "";
+      this.province = "";
+      this.country = "";
+      this.postalCode = "";
+      this.url = "";
+
+      for (let i = 0; i < place.address_components.length; i++) {
+        if (place.address_components[i].types[0] === "street_number") {
+          this.streetNumber = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "route") {
+          this.streetName = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "sublocality_level_1") {
+          this.suburb = place.address_components[i].long_name;
+        }
+        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") {
+          this.province = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "country") {
+          this.country = place.address_components[i].long_name;
+        }
+        if (place.address_components[i].types[0] === "postal_code") {
+          this.postalCode = place.address_components[i].long_name;
+        }
+        this.url = place.url;
+
+        this.$emit("GoogleAddress", {
+          streetNumber: this.streetNumber,
+          streetName: this.streetName,
+          suburb: this.suburb,
+          city: this.city,
+          province: this.province,
+          country: this.country,
+          postalCode: this.postalCode,
+          url: this.url
+        });
+      }
+    }
+  }
+};
+</script>

src/components/shared/contactUsSection.vue

+<template>
+  <div>
+    <h4 align="left" class="contactHeader">Send us a message</h4>
+    <div class="form">
+      <div id="sendmessage">Your message has been sent. Thank you!</div>
+      <div id="errormessage"></div>
+      <div class="form-row">
+        <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="name"
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="email"
+            class="form-control"
+            name="email"
+            id="email"
+            placeholder="Email"
+            data-rule="email"
+            data-msg="Please enter a valid email"
+            v-model="email"
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="phone"
+            class="form-control"
+            id="phone"
+            placeholder="Phone"
+            data-rule="minlen:10"
+            data-msg="Please enter at least 10 numbers"
+            v-model="phone"
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            class="form-control"
+            name="property"
+            id="property"
+            placeholder="Property"
+            data-msg="Please enter the property you are interested in"
+            v-model="property"
+          />
+          <div class="validation"></div>
+        </div>
+      </div>
+      <div class="form-group">
+        <textarea
+          class="form-control"
+          name="message"
+          rows="5"
+          data-rule="required"
+          data-msg="Please write something for us"
+          placeholder="Message"
+          v-model="message"
+        ></textarea>
+        <div class="validation"></div>
+      </div>
+      <div class="text-center">
+        <button class="btn-solid-blue" @click="sendMail()">SEND</button>
+      </div>
+      <div v-if="boolSent">
+        <alert :text="alertMsg" :type="'SUCCESS'" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import axios from "axios";
+import alert from "../shared/alert";
+
+export default {
+  components: {
+    alert
+  },
+  data() {
+    return {
+      alertMsg: "Sent! You can expect a reply soon!",
+      name: null,
+      email: null,
+      phone: null,
+      property: null,
+      message: null,
+      boolSent: false
+    };
+  },
+  mounted() {
+    this.boolSent = false;
+  },
+  methods: {
+    async sendMail() {
+      var mailObj = {
+        toAddress: "abigaildf@provision-sa.com",
+        fromAddress: "jlouw365@gmail.com",
+        name: this.name,
+        email: this.email,
+        phone: this.phone,
+        property: this.property,
+        message: this.message
+      };
+
+      const response = await axios.post("/api/mail/0", mailObj);
+
+      if (response.status === 200) {
+        this.boolSent = true;
+      } else {
+        console.log("Error");
+      }
+    },
+    countDownChanged(dismissCountDown) {
+      this.dismissCountDown = dismissCountDown;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/shared/footerSection.vue

                 </p>
               </div>
               <div class="col-md-8">
-                <h4 align="left" class="contactHeader">Send us a message</h4>
-                <div class="form">
-                  <div id="sendmessage">Your message has been sent. Thank you!</div>
-                  <div id="errormessage"></div>
-                  <form
-                    action="mailto:jlouw365@gmail.com"
-                    method="post"
-                    role="form"
-                    class="contactForm"
-                  >
-                    <div class="form-row">
-                      <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"
-                        />
-                        <div class="validation"></div>
-                      </div>
-                      <div class="form-group col-md-6">
-                        <input
-                          type="email"
-                          class="form-control"
-                          name="email"
-                          id="email"
-                          placeholder="Email"
-                          data-rule="email"
-                          data-msg="Please enter a valid email"
-                        />
-                        <div class="validation"></div>
-                      </div>
-                      <div class="form-group col-md-6">
-                        <input
-                          type="text"
-                          name="phone"
-                          class="form-control"
-                          id="phone"
-                          placeholder="Phone"
-                          data-rule="minlen:10"
-                          data-msg="Please enter at least 10 numbers"
-                        />
-                        <div class="validation"></div>
-                      </div>
-                      <div class="form-group col-md-6">
-                        <input
-                          type="text"
-                          class="form-control"
-                          name="property"
-                          id="property"
-                          placeholder="Property"
-                          data-msg="Please enter the property you are interested in"
-                        />
-                        <div class="validation"></div>
-                      </div>
-                    </div>
-                    <div class="form-group">
-                      <textarea
-                        class="form-control"
-                        name="message"
-                        rows="5"
-                        data-rule="required"
-                        data-msg="Please write something for us"
-                        placeholder="Message"
-                      ></textarea>
-                      <div class="validation"></div>
-                    </div>
-                    <div class="text-center"><button type="submit">SEND</button></div>
-                  </form>
-                </div>
+                <contactUsSection />
               </div>
             </div>
           </div>
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import Log from "../../assets/Log";
+import contactUsSection from "./contactUsSection";
 import AOS from "aos";
 import "aos/dist/aos.css";
 export default {
+  components: {
+    contactUsSection
+  },
   created() {
     AOS.init();
   },

src/components/timeshare/buy/carouselSection.vue

     <div class="container">
       <div class="row">
         <div align="left" class="col-sm-12 col-md-8">
-          <div class="intro-content box">
+          <div class="intro-content box" style="margin-top:-5px">
             <h2>Find your Timeshare</h2>
             <p>
               Please specify one or more details to view the available weeks and then select the
             </p>
             <div class="row">
               <div class="form-group col-md-6">
+                <div class="input-group">
+                  <label v-if="!searchParams.region" class="uniSelectLabel" for="region">REGION</label>
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="searchParams.region"
+                    @change="regionChange"
+                  >
+                    <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
+                  </select>
+                </div>
+                <br />
+                <label>DATE FROM</label>
                 <input
-                  data-toggle="dropdown"
-                  name="region"
-                  class="form-control my-2"
-                  id="name"
-                  placeholder="Resort"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                />
-                <input
-                  data-toggle="dropdown"
-                  name="resort"
-                  class="form-control my-2"
-                  id="name"
-                  placeholder="Region"
-                  aria-haspopup="true"
-                  aria-expanded="false"
+                  type="date"
+                  name="arrival-to"
+                  class="form-control my-1 uniSelect"
+                  id="arrival-to"
+                  placeholder="Date From"
+                  v-model="filter.date"
                 />
               </div>
               <div class="form-group col-md-6">
+                <div class="input-group">
+                  <label
+                    v-if="!searchParams.resort"
+                    class="uniSelectLabel"
+                    for="weekInfoResortSelect"
+                  >RESORT</label>
+                  <select
+                    id="weekInfoResortSelect"
+                    class="form-control uniSelect"
+                    v-model="searchParams.resort"
+                  >
+                    <option
+                      v-for="(resort, r) in filteredResort"
+                      :key="r"
+                      :value="resort"
+                      @change="resortChange"
+                    >
+                      {{
+                      resort.resortName
+                      }}
+                    </option>
+                  </select>
+                </div>
+                <br />
+                <label>DATE TO</label>
                 <input
-                  data-toggle="dropdown"
-                  name="region"
-                  class="form-control my-2"
-                  id="name"
-                  placeholder="Week"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                />
-                <input
-                  data-toggle="dropdown"
-                  name="resort"
-                  class="form-control my-2"
-                  id="name"
-                  placeholder="Price Range"
-                  aria-haspopup="true"
-                  aria-expanded="false"
+                  type="date"
+                  name="arrival-to"
+                  class="form-control my-1 uniSelect"
+                  id="arrival-to"
+                  placeholder="Date To"
+                  v-model="filter.ddate"
                 />
               </div>
             </div>
-            <a href="resort-page.php" class="btn-solid-blue"><i class="fa fa-search"></i> SEARCH</a>
+            <button class="btn-solid-blue" @click="Search()">
+              <i class="fa fa-search"></i> SEARCH
+            </button>
           </div>
         </div>
       </div>
       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" style="object-fit: cover" alt />
+      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" style="object-fit: cover" alt />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
 /* eslint-disable */
 
 import carousel from "vue-owl-carousel";
+import { mapState, mapActions, mapGetters } from "vuex";
 export default {
   components: {
-    carousel
-  }
+    carousel,
+  },
+  data() {
+    return {
+      regionObj: {},
+      resortObj: {},
+      region: "",
+      resort: "",
+      priceMin: undefined,
+      priceMax: undefined,
+    };
+  },
+  methods: {
+    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"]),
+    regionChange(item) {
+      let reg = this.regions.find((r) => r.regionName === item.target.value);
+      this.regionObj = reg;
+    },
+    resortChange(item) {
+      let res = this.resorts.find((r) => r.resortName === item.target.value);
+      this.resortObj = res;
+    },
+    Search() {
+      if (this.searchParams.price) {
+        this.filter.minPrice = this.searchParams.price;
+      }
+      if (this.searchParams.week) {
+        this.filter.keyword = this.week;
+      }
+
+      if (!this.searchParams.resort) {
+        return;
+      }
+
+      this.$router.push(`/resort/${this.searchParams.resort.resortCode}`);
+    },
+  },
+  computed: {
+    ...mapState("timeshare", ["resorts", "regions", "detailedRegion"]),
+    ...mapState("weekList", ["searchParams", "filter"]),
+    filteredResort() {
+      let list = [];
+      if (this.searchParams.region && this.searchParams.region !== "") {
+        const item = this.detailedRegion.find(
+          (region) => region.region.regionCode === this.regionObj.regionCode
+        );
+        if (item) {
+          list = item.children;
+        }
+      } else {
+        list = this.resorts;
+      }
+      return _.sortBy(list, (x) => x.resortName);
+    },
+  },
+  created() {
+    this.initTimeshare(this.weekId);
+  },
+  mounted() {
+    this.searchParams.region = null;
+    this.searchParams.resort = null;
+    this.filter.date = null;
+    this.filter.ddate = null;
+  },
 };
 </script>
 

src/components/timeshare/buy/searchSection.vue

               v-model="selectedResort"
               @change="resortEvent()"
             >
-              <option v-for="(resort, i) in selectedRegion.resorts" :key="i" :value="resort">
-                {{ resort.resortName }}
-              </option>
+              <option
+                v-for="(resort, i) in selectedRegion.resorts"
+                :key="i"
+                :value="resort"
+              >{{ resort.resortName }}</option>
             </select>
           </div>
           <div v-else class="input-group my-1">
             <label v-if="selectedResort === null" class="uniSelectLabel" for="resort">Resort</label>
             <select class="form-control uniSelect" name="resort" id="resort">
-              <option disabled>
-                Please Select a Region First
-              </option>
+              <option disabled>Please Select a Region First</option>
             </select>
           </div>
-          <div class="input-group my-1">
+          <!-- <div class="input-group my-1">
             <label v-if="selectedSeason === null" class="uniSelectLabel" for="season">Season</label>
             <select
               class="form-control uniSelect"
               id="season"
               v-model="selectedSeason"
             >
-              <option v-for="season in seasons" :key="season.id" :value="season">
-                {{ season.name }}
-              </option>
+              <option v-for="season in seasons" :key="season.id" :value="season">{{ season.name }}</option>
             </select>
           </div>
 
               placeholder="mm/dd/yy"
               v-model="dateTo"
             />
-          </p>
-          <div class="btn-white-border"><i class="fa fa-search"></i> SEARCH</div>
+          </p>-->
+          <button class="btn-white-border" @click="ShowResort()">
+            <i class="fa fa-search"></i> SEARCH
+          </button>
         </div>
         <div class="col-md-8 p-5">
           <h2>Search by Province</h2>
 export default {
   name: "TimeshareToBuy",
   components: {
-    Alert
+    Alert,
   },
   data() {
     return {
       bedrooms: null,
       maxPrice: null,
       dateFrom: "",
-      dateTo: ""
+      dateTo: "",
     };
   },
   mounted() {
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
     },
     regions() {
-      return _.sortBy(this.detailedRegion, r => r.regionName);
-    }
+      return _.sortBy(this.detailedRegion, (r) => r.regionName);
+    },
   },
   methods: {
     ...mapActions("region", ["init", "getAvail", "getRegions", "getResort"]),
       if (this.maxPrice === "0") {
         this.maxPrice = null;
       }
-    }
-  }
+    },
+    ShowResort() {
+      if (this.selectedResort) {
+        this.$router.push(`/resort/${this.selectedResort.resortCode}`);
+      }
+    },
+  },
 };
 </script>
 

src/components/timeshare/buy/toBuySearchResults.vue

+<template>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+    <section>
+      <div class="container">
+        <div class="row pt-5 justify-content-md-center">
+          <h3>TIMESHARE TO BUY</h3>
+        </div>
+        <br />
+        <br />
+        <br />
+        <br />
+        <h1>bla</h1>
+        <!--<div v-if="properties.length > 0" class="row justify-content-md-center">
+          <div
+            class="col-lg-3 col-md-6 col-sm-6"
+            v-for="currentProperty in properties"
+            :key="currentProperty.id"
+          >
+            <div>
+              <div class="portfolio-item">
+                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
+
+                <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
+                <p>
+                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
+                  situated in the best location. Incredible bargain!
+                </p>
+                <br />
+
+                <router-link
+                  class="btn-white-border"
+                  :to="`/property/commercial/property/${currentProperty.id}`"
+                >VIEW</router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="row">
+          <div align="center" class="col-md-12">
+            <img src="img/no-homes.png" />
+            <br />
+            <br />
+            <p>Sorry no listing where found matching your search</p>
+          </div>
+        </div>-->
+      </div>
+    </section>
+  </main>
+</template>
+
+

src/components/timeshare/buy/weekListComponent.vue

         <thead>
           <tr>
             <th scope="col">Unit</th>
-            <th scope="col">Week</th>
             <th scope="col">Module</th>
             <th scope="col">Bedrooms</th>
             <th scope="col">Season</th>
           <tr v-for="(item, i) in filteredWeeks" :key="i">
             <td>{{ item.unitNumber }}</td>
             <td>{{ item.weekNumber }}</td>
-            <td>#module</td>
             <td>{{ item.bedrooms }}</td>
-            <td>#season</td>
+            <td>{{ item.season }}</td>
             <td>{{ item.sellPrice | toCurrency }}</td>
             <!-- <td>{{ item.region ? item.region.regionName : "" }}</td>
             <td>{{ item.resort ? item.resort.resortName : "" }}</td>
 
             <td>{{ item.arrivalDate | toDate }}</td>
-            <td>{{ item.departureDate | toDate }}</td> -->
+            <td>{{ item.departureDate | toDate }}</td>-->
 
             <!-- <td>{{item.status ? item.status.description : ''}}</td> -->
 
             </td>
             <!-- <div class="col-md-12">
                 <button type="button" class="btn btn-b-n" >View</button>
-              </div> -->
+            </div>-->
           </tr>
         </tbody>
       </table>
 export default {
   props: {
     resortCode: undefined,
-    userId: undefined
+    userId: undefined,
   },
   components: {},
   computed: {
     ...mapState("weekList", ["weeks", "status"]),
     ...mapGetters({
       filteredWeeks: "weekList/filteredWeeks",
-      getRegions: "weekList/getRegions"
-    })
+      getRegions: "weekList/getRegions",
+    }),
   },
   mounted() {
     if (this.resortCode) {
     View(item) {
       this.$router.push(`/resort/${item.resort.resortCode}/${item.unitNumber}`);
     },
-    ...mapActions("weekList", ["getWeeks", "applyResortFilter"])
-  }
+    ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
+  },
 };
 </script>
 

src/components/timeshare/resort/carouselSection.vue

       <carousel
         :nav="false"
         :dots="false"
-        :items="1"
+        :items="10"
         :autoplay="true"
         :loop="true"
         :autoHeight="true"
         style="margin-top:-50px;"
         :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
       >
-        <img
-          class="item"
-          style="object-fit:cover"
-          v-for="(image, i) in resortImages"
-          :src="image"
-          :key="i"
-        />
+        <div v-for="(image, i) in resortImages" :key="i">
+          <img class="item" style="object-fit:cover" :src="image" :key="i" />
+        </div>
       </carousel>
     </div>
   </section>
 import carousel from "vue-owl-carousel";
 export default {
   components: {
-    carousel
+    carousel,
   },
   props: {
-    resortImages: {}
-  }
+    resortImages: {},
+  },
 };
 </script>
 

src/components/timeshare/resort/resortPage.vue

 export default {
   components: {
     carouselSection,
-    contentSection
+    contentSection,
   },
   data() {
     return {
-      boolLoaded: false
+      boolLoaded: false,
     };
   },
   props: {
-    resortCode: {}
+    resortCode: {},
   },
   async created() {
     this.initResort(this.resortCode).then(() => {
       return this.resort
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
         : "";
-    }
+    },
   },
   methods: {
     ...mapActions("resort", ["initResort"]),
     routerGoTo(goto) {
       this.$router.push(goto);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/timeshare/searchTimeshare.vue

     <h2>Filter Weeks</h2>
     <p>*Select at least 1 filter field</p>
     <div class="input-group mt-2">
-      <label v-if="selectedSeason === null" class="uniSelectLabel" for="season">Season</label>
-      <select class="form-control" name="season" id="season" v-model="selectedSeason">
-        <option v-for="season in seasons" :key="season.id" :value="season">
-          {{ season.name }}
-        </option>
+      <label v-if="!filter.season" class="uniSelectLabel" for="season">Season</label>
+      <select class="form-control" name="season" id="season" v-model="filter.season">
+        <option v-for="season in seasons" :key="season.id" :value="season">{{ season.name }}</option>
       </select>
     </div>
     <div class="input-group mt-2">
-      <label v-if="!filter.bedrooms" class="uniSelectLabel" for="weekInfoRegionSelect"
-        >Bedrooms</label
-      >
+      <label v-if="!filter.bedrooms" class="uniSelectLabel" for="weekInfoRegionSelect">Bedrooms</label>
       <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
         <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
       </select>
       v-model="filter.maxPrice"
     />
     <p class="mt-2">
-      Filter Arrival Date from
+      Date from
       <input
         type="date"
         name="arrival-from"
       />
     </p>
     <p>
-      Filter Arrival Date to
+      Date to
       <input
         type="date"
         name="arrival-to"
         class="form-control my-1"
         id="arrival-to"
         placeholder="mm/dd/yy"
+        v-model="filter.ddate"
       />
     </p>
-    <div class="btn-white-border"><i class="fa fa-search"></i> FILTER</div>
+    <button class="btn-white-border" @click="ClearFilter()">
+      <i class="fa fa-eraser"></i> CLEAR
+    </button>
+    <!-- <div class="btn-white-border">
+      <i class="fa fa-search"></i> FILTER
+    </div>-->
   </div>
 </template>
 
 export default {
   props: {
     hideTop: undefined,
-    keyword: undefined
+    keyword: undefined,
   },
   data() {
     return {
-      selectedSeason: null
+      selectedSeason: null,
     };
   },
   created() {
       "regions",
       "detailedRegion",
       "resortBedrooms",
-      "maxSleep"
+      "maxSleep",
     ]),
-    ...mapState("weekList", ["filter"]),
+    ...mapState("weekList", ["filter", "searchParams"]),
     ...mapState("timeshare", ["seasons"]),
     filteredResorts() {
       if (this.selectedRegion) {
-        const list = _.find(this.detailedRegion, i => i.region.regionName === this.selectedRegion)
-          .children;
-        return _.sortBy(list, r => r.resortName);
+        const list = _.find(
+          this.detailedRegion,
+          (i) => i.region.regionName === this.selectedRegion
+        ).children;
+        return _.sortBy(list, (r) => r.resortName);
       }
       return this.resorts;
-    }
+    },
   },
   methods: {
     ...mapActions("timeshare", ["initTimeshare"]),
     ...mapActions("weekList", ["clearFilter"]),
-    ...mapActions("timeshare", ["getSeasons"])
-  }
+    ...mapActions("timeshare", ["getSeasons"]),
+    ClearFilter() {
+      this.filter.season = null;
+      this.filter.bedrooms = null;
+      this.filter.maxPrice = null;
+      this.filter.date = null;
+      this.filter.ddate = null;
+    },
+  },
 };
 </script>
 

src/router/index.js

 
 import ResortPage from "../components/timeshare/resort/resortPage.vue";
 import UnitPage from "../components/timeshare/resort/unit/unitPage.vue";
+import ToBuySearch from "../components/timeshare/buy/toBuySearchResults.vue";
 
 import ContactUs from "../components/misc/contactUs.vue";
 import PrivacyPolicy from "../components/misc//privacyPolicy/privacyPolicyPage.vue";
       path: "/EnquireNow",
       name: "EnquireNow",
       component: EnquireNow
-    }
+    },
+    {
+      path: "/toBuyResults",
+      name: "ToBuySearch",
+      component: ToBuySearch
+    },
   ]
 });

src/store/modules/processFlow/bid.js

-import axios from 'axios';
-import log from '../../../assets/Log';
+import axios from "axios";
+import log from "../../../assets/Log";
+import { result } from "lodash";
 
 export default {
   namespaced: true,
   state: {
     bidItem: {},
-    bidItems: [],
+    bidItems: []
   },
   mutations: {
     setBid(state, bid) {
     updateBidList(state, bid) {
       state.bidItems.find(item => item.id === bid.id).status = bid.status;
       console.log(JSON.stringify(bid));
-    },
+    }
   },
   getters: {},
   actions: {
+    getTemplate({ commit }) {
+      axios.get("/api/bid/GetNewBidTemplate").then(result => commit("setBid", result.data));
+    },
     getBid({ commit }, id) {
       axios
         .get(`/api/bid/${id}`)
-        .then(result => commit('addToBids', result.data))
+        .then(result => commit("addToBids", result.data))
         .catch(console.error);
     },
     getBids({ commit }) {
       axios
-        .get('/api/bid/GetBids/All')
-        .then(result => commit('setBids', result.data))
+        .get("/api/bid/GetBids/All")
+        .then(result => commit("setBids", result.data))
         .catch(console.error);
     },
     saveBid({ commit }, item) {
       }
       console.log(JSON.stringify(item));
       axios
-        .post('/api/bid', item)
-        .then(result => commit('setBid', result.data))
+        .post("/api/bid", item)
+        .then(result => commit("setBid", result.data))
         .catch(console.error);
     },
     updateBid({ commit }, item) {
       axios
-        .put('/api/bid', item)
-        .then(result => commit('setBid', item))
+        .put("/api/bid", item)
+        .then(result => commit("setBid", item))
         .catch(console.error);
     },
     acceptBid({ commit }, id) {
       axios
         .put(`/api/bid/AcceptBid/${id}`)
-        .then(result => commit('updateBidList', result.data))
+        .then(result => commit("updateBidList", result.data))
         .catch(console.error);
     },
     declineBid({ commit }, item) {
       axios
-        .put('/api/bid/DeclineBid', item)
-        .then(result => commit('updateBidList', result.data))
+        .put("/api/bid/DeclineBid", item)
+        .then(result => commit("updateBidList", result.data))
         .catch(console.error);
-    },
-  },
+    }
+  }
 };

src/store/modules/timeshare/weekList.js

 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import axios from "axios";
-import _ from "lodash";
+import _, { min } from "lodash";
 
 export default {
   namespaced: true,
     weeks: [],
     status: undefined,
     filter: {
+      season: undefined,
       status: undefined,
       region: undefined,
       resort: undefined,
       bedrooms: undefined,
       date: undefined,
+      ddate: undefined,
       minPrice: undefined,
       maxPrice: undefined,
       keyword: undefined
     },
     prevFilter: undefined,
-    difFilter: undefined
+    difFilter: undefined,
+    searchParams: {
+      region: undefined,
+      resort: undefined,
+      fromDate: undefined,
+      toDate: undefined
+    }
   },
   mutations: {
     onLoading(state) {
           );
         }
         if (filter.bedrooms) {
-          weekList = _.filter(weekList, x => x.bedrooms && x.bedrooms == filter.bedrooms);
+          if (filter.bedrooms === "Studio") {
+            weekList = _.filter(weekList, x => (x.bedrooms && x.bedrooms === "0") || !x.bedrooms);
+          } else {
+            weekList = _.filter(weekList, x => x.bedrooms && x.bedrooms === filter.bedrooms);
+          }
         }
         if (filter.date) {
           const minDate = new Date(filter.date);
-          minDate.setDate(minDate.getDate() - 7);
-          const maxDate = new Date(filter.date);
-          maxDate.setDate(maxDate.getDate() + 7);
-          weekList = _.filter(
-            weekList,
-            x =>
-              new Date(x.arrivalDate) &&
-              new Date(x.departureDate) &&
-              new Date(x.arrivalDate) >= minDate &&
-              new Date(x.arrivalDate) <= maxDate
-          );
+          minDate.setDate(minDate.getDate() - 1);
+          weekList = _.filter(weekList, x => new Date(x.arrivalDate) >= minDate);
+        }
+        if (filter.ddate) {
+          const maxDate = new Date(filter.ddate);
+          weekList = _.filter(weekList, x => new Date(x.departureDate) <= maxDate);
         }
         if (filter.minPrice && filter.minPrice !== 0) {
           weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice >= filter.minPrice);
         if (filter.maxPrice && filter.maxPrice !== 0) {
           weekList = _.filter(weekList, x => x.sellPrice && x.sellPrice <= filter.maxPrice);
         }
+        if (filter.season) {
+          weekList = _.filter(weekList, x => x.season === filter.season.name);
+        }
       }
       return _.sortBy(_.sortBy(weekList, "arrivalDate"), "resort.resortName");
     },
                 resortName: rootGetters["timeshare/getResortName"](code),
                 resortCode: code
               };
-              arr2.push(myItem);
             }
           }
           commit("setWeeks", arr2);
         })
         .catch(console.error);
     },
+    // getWeeks({ commit }) {
+    //   axios.get("api/timeshareweek").then(result =>
+    //     commit(
+    //       "setWeeks",
+    //       result.data.filter(x => x.region !== null)
+    //     )
+    //   );
+    // },
     clearFilter({ commit }, filter) {
       commit("onClearFilter", filter);
     }