Login Fix & Various Fixes

public/css/newStyle.css

 
 @import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
 
+.uniSelect {
+  border-color: rgb(27, 117, 187);
+  border-width: 2px;
+  font-family: "Muli";
+  color: rgb(118, 118, 118);
+  padding-left: 10px;
+  text-transform: uppercase;
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.uniSelect option {
+  color: rgb(118, 118, 118);
+  font-family: "Muli";
+  text-transform: uppercase;
+}
+
+.uniSelectLabel {
+  position: absolute;
+  z-index: 2;
+  margin-left: 15px;
+  margin-top: 7px;
+  font-family: "muli";
+  font-size: 15px;
+  color: rgb(118, 118, 118);
+}
+
 body {
   color: #444;
   font-family: "Muli";

src/components/financial/paygate/paygateProcess.vue

 <template>
-  <div></div>
+  <div class="container mt-3 headerAdjustment">
+    <div class="row" v-if="loaded">
+      <div class="col"></div>
+      <div class="col-sm-6" sm="6">
+        <div class="card cardShadow">
+          <div class="container">
+            <div class="row" align="center">
+              <div class="row" align-v="center" style="width:100%">
+                <div class="col">
+                  <img width="150px" height="70" src="/img/logos/UVProp.png" />
+                </div>
+              </div>
+            </div>
+            <hr />
+            <div class="row">
+              <iframe
+                style="min-height:750px;"
+                name="payment_frame"
+                width="100%"
+                height="100%"
+                frameborder="0"
+              ></iframe>
+              <form
+                ref="form"
+                target="payment_frame"
+                action="https://secure.paygate.co.za/payweb3/process.trans"
+                method="POST"
+              >
+                <input type="hidden" name="PAY_REQUEST_ID" v-model="paymentReqId" />
+                <input type="hidden" name="CHECKSUM" v-model="checksum" />
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col"></div>
+    </div>
+  </div>
 </template>
 
 <script>
 /* eslint-disable */
-import { mapGetters, mapState, mapActions } from "vuex";
-
+import { mapGetters, mapActions } from "vuex";
 export default {
+  data() {
+    return {
+      loaded: false
+    };
+  },
+  props: ["checksum", "paymentReqId"],
+  created() {
+    this.populateData();
+  },
   methods: {
-    ...mapActions(["payment", ["addPayment"]]),
-    sethtmlData(id, check) {
-      this.reqId = id;
-      this.checksum = check;
-    },
-    async placeOrder() {
-      await this.addOrder(this.price).then(async response => {
-        var respObj = {};
-
-        await response.split("&").forEach(element => {
-          var name = "";
-          var value = "";
-          name = element.split("=")[0];
-          value = element.split("=")[1];
-          if (name === "PAYGATE_ID") {
-            respObj.PAYGATE_ID = value;
-          } else if (name === "PAY_REQUEST_ID") {
-            respObj.PAY_REQUEST_ID = value;
-          } else if (name === "REFERENCE") {
-            respObj.REFERENCE = value;
-          } else if (name === "CHECKSUM") {
-            respObj.CHECKSUM = value;
-          }
-        });
-
-        await this.sethtmlData(respObj.PAY_REQUEST_ID, respObj.CHECKSUM);
-      });
-
-      this.$router.push({
-        name: "PaymentGateway",
-        params: {
-          paymentReqId: this.reqId,
-          checksum: this.checksum
-        }
-      });
+    async populateData() {
+      setTimeout(() => (this.loaded = true), 100);
+      setTimeout(() => this.$refs.form.submit(), 100);
     }
   }
 };
   box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.281), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 </style>
-
-<style lang="scss" scoped></style>

src/components/home/homePage.vue

     <CarouselSection />
     <PropertySection
       data-aos="fade-up"
-      data-aos-anchor-placement="center-bottom"
+      data-aos-anchor-placement="top-bottom"
       data-aos-delay="150"
     />
   </div>

src/components/home/propertySection.vue

 <template>
-  <main id="main">
-    <section id="portfolio" class="wow fadeInUp">
+  <section id="portfolio">
+    <div style="margin-top:-60px">
       <div class="container">
         <div class="row">
           <div class="col-lg-12">
           </div>
         </div>
       </div>
-    </section>
-    <!-- #listings -->
-  </main>
+    </div>
+  </section>
+  <!-- #listings -->
 </template>
 
 <script>

src/components/misc/privacyPolicy/carouselSection.vue

+<template>
+  <section id="intro">
+    <div class="container">
+      <div class="row">
+        <div align="left" class="col-sm-12 col-md-8">
+          <div class="intro-content box">
+            <h2>Privacy Policy</h2>
+            <p>
+              We respect your privacy. This Privacy Policy governs the manner in which we will treat
+              your personal information collected when using our website and when we otherwise
+              engage with each after you visiting our website.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      id="intro-carousel"
+      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="" />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+
+import carousel from "vue-owl-carousel";
+export default {
+  components: {
+    carousel
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/misc/privacyPolicy/contentSection.vue

+<template>
+  <div class="container pt-5">
+    <div class="row mb-3">
+      <div class="col-sm-12 col-md-6">
+        <h2>How do we collect your personal indormation?</h2>
+        <p style="text-align:left">
+          Your personal information may be collected while using this website, when you contact us,
+          when you complete an application form, when you check in at your destination or when you
+          make use of the services of one of our affiliated business partners. Personal information
+          includes any information by which you can be identified and which relates to you as an
+          identifiable individual, such as your name, physical and postal addresses, email address,
+          sex, age and internet address from the domain from which you are visiting.
+        </p>
+      </div>
+      <div class="col-sm-12 col-md-6">
+        <h2>Use of your personal information</h2>
+        <p style="text-align:left">
+          We need to process your personal information when you make use of our service. We use your
+          personal information in the ordinary course of our business and to send you marketing
+          material relating to our service offering. You can unsubscribe at any time and we will
+          thereafter no longer use your personal information. We will not disclose your personal
+          information to third parties unless justifiable in terms of agreement between us.
+        </p>
+      </div>
+    </div>
+    <div class="row mb-3">
+      <div class=" col-sm-12 col-md-6">
+        <h2>Access to and correction of personal information</h2>
+        <p style="text-align:left">
+          You may access your personal information that we hold by sending an email to
+          <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a>
+        </p>
+        <p style="text-align:left">
+          In the event that you want to update or correct your personal information held by us, you
+          can send an email to
+          <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a>
+        </p>
+      </div>
+      <div class="col-sm-12 col-md-6">
+        <h2>Protection of your personal information</h2>
+        <p style="text-align:left">
+          We take reasonable steps and measures to keep your information secure from loss, misuse or
+          unauthorised alteration. Our database has built-in safeguards to ensure the privacy and
+          confidentiality of your information. We do not have control over the websites of
+          affiliated parties or sites linked into from this site and you must therefore refer to the
+          privacy policies of any such parties to see how they protect your personal information.
+        </p>
+      </div>
+    </div>
+    <div class="row mb-3">
+      <div class="col-sm-12 col-md-6">
+        <h2>Cookies</h2>
+        <p style="text-align:left">
+          We may use cookies. Cookies are programs that we transfer to your computer’s hard drive to
+          personalise your experience on this website. In this way, the next time you visit, we will
+          know who you are and that you have visited this website before. This will enable us to
+          enhance your browsing experience. You can set your browser to notify you if cookies are to
+          be transferred or to reject cookies but this may prevent your use of some of the web
+          pages.
+        </p>
+      </div>
+      <div class="col-sm-12 col-md-6">
+        <h2>Email Monitoring</h2>
+        <p style="text-align:left">
+          We provide email addresses on the website which enable you to contact us. Forms that you
+          complete via this website will also be transmitted via email. In order to check for
+          viruses and to monitor service we reserve the right to monitor and inspect all material
+          and information transmitted over our system.
+        </p>
+      </div>
+    </div>
+    <div class="row mb-3">
+      <div class="col-sm-12 col-md-6">
+        <h2>Changes to this privacy policy</h2>
+        <p style="text-align:left">
+          We reserve the right, in our sole discretion, to amend this Privacy Policy from time to
+          time. You agree to review the Privacy Policy whenever you visit this website for any such
+          amendments. The amended version of the Privacy Policy shall supersede and replace all
+          previous versions thereof.
+        </p>
+      </div>
+      <div class="col-sm-12 col-md-6">
+        <h2>Which laws apply to your dealings with us?</h2>
+        <p style="text-align:left">
+          This policy will be governed and interpreted in accordance with the laws of South Africa.
+          To the extent that a court has jurisdiction over any dispute which may arise out of or in
+          connection with this Privacy Policy, we both submit to the jurisdiction of the South
+          African Courts.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/components/misc/privacyPolicy/privacyPolicyPage.vue

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

src/components/misc/privacyPolicyPage.vue

-<template>
-  <main id="main" style="margin-top:-20px;padding-bottom:50px">
-    <div class="container">
-      <div class="row mb-5">
-        <div class="col">
-          <div class="section-header">
-            <h2>Privacy Policy</h2>
-          </div>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-sm-12 col-md-6">
-          <h2>Privacy</h2>
-          <p style="text-align:left">
-            We respect your privacy. This Privacy Policy governs the manner in which we will treat
-            your personal information collected when using our website and when we otherwise engage
-            with each after you visiting our website.
-          </p>
-        </div>
-        <div class="col-sm-12 col-md-6">
-          <h2>How do we collect your personal indormation?</h2>
-          <p style="text-align:left">
-            Your personal information may be collected while using this website, when you contact
-            us, when you complete an application form, when you check in at your destination or when
-            you make use of the services of one of our affiliated business partners. Personal
-            information includes any information by which you can be identified and which relates to
-            you as an identifiable individual, such as your name, physical and postal addresses,
-            email address, sex, age and internet address from the domain from which you are
-            visiting.
-          </p>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class=" col-sm-12 col-md-6">
-          <h2>Use of your personal information</h2>
-          <p style="text-align:left">
-            We need to process your personal information when you make use of our service. We use
-            your personal information in the ordinary course of our business and to send you
-            marketing material relating to our service offering. You can unsubscribe at any time and
-            we will thereafter no longer use your personal information. We will not disclose your
-            personal information to third parties unless justifiable in terms of agreement between
-            us.
-          </p>
-        </div>
-        <div class="col-sm-12 col-md-6">
-          <h2>Access to and correction of personal information</h2>
-          <p style="text-align:left">
-            You may access your personal information that we hold by sending an email to
-            <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a>
-          </p>
-          <p style="text-align:left">
-            In the event that you want to update or correct your personal information held by us,
-            you can send an email to
-            <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a>
-          </p>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-sm-12 col-md-6">
-          <h2>Protection of your personal information</h2>
-          <p style="text-align:left">
-            We take reasonable steps and measures to keep your information secure from loss, misuse
-            or unauthorised alteration. Our database has built-in safeguards to ensure the privacy
-            and confidentiality of your information. We do not have control over the websites of
-            affiliated parties or sites linked into from this site and you must therefore refer to
-            the privacy policies of any such parties to see how they protect your personal
-            information.
-          </p>
-        </div>
-        <div class="col-sm-12 col-md-6">
-          <h2>Cookies</h2>
-          <p style="text-align:left">
-            We may use cookies. Cookies are programs that we transfer to your computer’s hard drive
-            to personalise your experience on this website. In this way, the next time you visit, we
-            will know who you are and that you have visited this website before. This will enable us
-            to enhance your browsing experience. You can set your browser to notify you if cookies
-            are to be transferred or to reject cookies but this may prevent your use of some of the
-            web pages.
-          </p>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-sm-12 col-md-6">
-          <h2>Email Monitoring</h2>
-          <p style="text-align:left">
-            We provide email addresses on the website which enable you to contact us. Forms that you
-            complete via this website will also be transmitted via email. In order to check for
-            viruses and to monitor service we reserve the right to monitor and inspect all material
-            and information transmitted over our system.
-          </p>
-        </div>
-        <div class="col-sm-12 col-md-6">
-          <h2>Changes to this privacy policy</h2>
-          <p style="text-align:left">
-            We reserve the right, in our sole discretion, to amend this Privacy Policy from time to
-            time. You agree to review the Privacy Policy whenever you visit this website for any
-            such amendments. The amended version of the Privacy Policy shall supersede and replace
-            all previous versions thereof.
-          </p>
-        </div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-md-12">
-          <h2>Which laws apply to your dealings with us?</h2>
-          <p style="text-align:left">
-            This policy will be governed and interpreted in accordance with the laws of South
-            Africa. To the extent that a court has jurisdiction over any dispute which may arise out
-            of or in connection with this Privacy Policy, we both submit to the jurisdiction of the
-            South African Courts.
-          </p>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="scss" scoped></style>

src/components/property/commercial/commercialPage.vue

   <div>
     <carouselSection />
     <main id="main">
-      <contentSection data-aos="fade-left" />
+      <contentSection data-aos="fade-left" data-aos-anchor-placement="top-bottom" />
       <latestListings
         data-aos="fade-up"
-        data-aos-anchor-placement="center-bottom"
+        data-aos-anchor-placement="top-bottom"
         data-aos-delay="150"
       />
     </main>

src/components/property/commercial/latestListings.vue

 <template>
-  <main id="main">
-    <section id="portfolio">
+  <section id="portfolio">
+    <div style="margin-top:-60px">
       <div class="container">
         <div class="row">
           <div class="col-lg-12">
           </div>
         </div>
       </div>
-    </section>
-  </main>
+    </div>
+  </section>
 </template>
 
 <script>

src/components/property/residential/latestListings.vue

 <template>
-  <main id="main">
+  <div>
     <section id="portfolio">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-12">
-            <h2>Latest Listings</h2>
+      <div style="margin-top:-60px">
+        <div class="container">
+          <div class="row">
+            <div class="col-lg-12">
+              <h2>Latest Listings</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="contianer">
-        <div class="row">
-          <div class="col">
-            <propertyCard
-              v-if="properties.length > 0"
-              name="propertyholder"
-              :properties="properties"
-              :showSort="false"
-            />
+        <div class="contianer">
+          <div class="row">
+            <div class="col">
+              <propertyCard
+                v-if="properties.length > 0"
+                name="propertyholder"
+                :properties="properties"
+                :showSort="false"
+              />
+            </div>
           </div>
         </div>
       </div>
     </section>
-  </main>
+  </div>
 </template>
 
 <script>

src/components/property/residential/residentialPage.vue

   <div>
     <carouselSection />
     <main id="main">
-      <contentSection data-aos="fade-left" />
+      <contentSection data-aos="fade-left" data-aos-anchor-placement="top-bottom" />
       <latestListings
         data-aos="fade-up"
-        data-aos-anchor-placement="center-bottom"
+        data-aos-anchor-placement="top-bottom"
         data-aos-delay="150"
       />
     </main>

src/components/propertyManagement/ourServicesSection.vue

 <template>
   <section id="services">
-    <div class="container">
+    <div class="container" style="margin-top:-15px">
       <div class="row">
         <div align="left" class="col-lg-4">
           <p>Our Services:</p>

src/components/propertyManagement/propertyManagement.vue

   <div>
     <CarouselSection />
     <main id="main">
-      <ServicesSection data-aos="fade-down" />
+      <ServicesSection data-aos="fade-down" data-aos-anchor-placement="top-bottom" />
       <TestimonialSection
         data-aos="fade-up"
-        data-aos-anchor-placement="center-bottom"
+        data-aos-anchor-placement="top-bottom"
         data-aos-delay="150"
       />
     </main>

src/components/propertyManagement/testimonialSection.vue

         :loop="true"
         id="intro-carousel"
         style="margin-top:-50px"
-        :responsive="{ 0: { items: 2, nav: false }, 600: { items: 2, nav: false } }"
+        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 2, nav: false } }"
         class="mt-3"
       >
         <div class="content">

src/components/shared/footerSection.vue

                 <div class="form">
                   <div id="sendmessage">Your message has been sent. Thank you!</div>
                   <div id="errormessage"></div>
-                  <form action="" method="post" role="form" class="contactForm">
+                  <form
+                    action="mailto:jlouw365@gmail.com"
+                    method="post"
+                    role="form"
+                    class="contactForm"
+                  >
                     <div class="form-row">
                       <div class="form-group col-md-6">
                         <input
         </div>
         <div class="row justify-content-center">
           <div class="col-lg-2 p-4">
-            <a href="#"><img src="../../../public/img/logos/daeNew.png"/></a>
+            <a href="https://www.daelive.com/" target="_blank"
+              ><img src="../../../public/img/logos/daeNew.png"
+            /></a>
           </div>
           <div class="col-lg-2 p-4">
-            <a href="#"><img src="../../../public/img/logos/rciNew.png"/></a>
+            <a href="https://www.rci.co.za/Home/Default.aspx?id=10001" target="_blank"
+              ><img src="../../../public/img/logos/rciNew.png"
+            /></a>
           </div>
           <div class="col-lg-2 p-4">
-            <a href="#"><img src="../../../public/img/logos/gomeloNew.png"/></a>
+            <a href="https://www.gomelo.co.za/" target="_blank"
+              ><img src="../../../public/img/logos/gomeloNew.png"
+            /></a>
           </div>
           <div class="col-lg-2 p-4">
-            <a href="#"><img src="../../../public/img/logos/voasaNew.png"/></a>
+            <a href="https://voasa.co.za/" target="_blank"
+              ><img src="../../../public/img/logos/voasaNew.png"
+            /></a>
           </div>
         </div>
         <div class="row">

src/components/shared/navBar.vue

     ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
     isLoggedIn() {
       console.log(Log.isLoggedIn());
+      console.log(this.user);
+
       return Log.isLoggedIn();
     },
     NAME() {

src/components/timeshare/buy/searchSection.vue

           <div class="input-group">
             <label v-if="selectedRegion === null" class="uniSelectLabel" for="region">Region</label>
             <select
-              class="custom-select"
+              class="form-control uniSelect"
               name="region"
               id="region"
               v-model="selectedRegion"
             </select>
           </div>
 
-          <div v-if="selectedRegion !== null" class="input-group mt-2">
+          <div v-if="selectedRegion !== null" class="input-group my-1">
             <label v-if="selectedResort === null" class="uniSelectLabel" for="resort">Resort</label>
             <select
-              class="custom-select"
+              class="form-control uniSelect"
               name="resort"
               id="resort"
               v-model="selectedResort"
               </option>
             </select>
           </div>
-          <div v-else class="input-group mt-2">
+          <div v-else class="input-group my-1">
             <label v-if="selectedResort === null" class="uniSelectLabel" for="resort">Resort</label>
-            <select class="custom-select" name="resort" id="resort">
+            <select class="form-control uniSelect" name="resort" id="resort">
               <option disabled>
                 Please Select a Region First
               </option>
             </select>
           </div>
-          <div class="input-group mt-2">
+          <div class="input-group my-1">
             <label v-if="selectedSeason === null" class="uniSelectLabel" for="season">Season</label>
-            <select class="custom-select" name="season" id="season" v-model="selectedSeason">
+            <select
+              class="form-control uniSelect"
+              name="season"
+              id="season"
+              v-model="selectedSeason"
+            >
               <option v-for="season in seasons" :key="season.id" :value="season">
                 {{ season.name }}
               </option>
             </select>
           </div>
+
           <input
             type="number"
             name="bedrooms"
             id="bedrooms"
             placeholder="Bedrooms"
             v-model="bedrooms"
+            @input="checkValueBedrooms()"
           />
+
           <input
             type="number"
             name="max-price"
             id="max-price"
             placeholder="Maximum Price"
             v-model="maxPrice"
+            @input="checkValuePrice()"
           />
 
           <p>
       selectedRegion: null,
       selectedResort: null,
       selectedSeason: null,
-      bedrooms: 0,
-      maxPrice: 0,
+      bedrooms: null,
+      maxPrice: null,
       dateFrom: "",
       dateTo: ""
     };
     updateMapProvince(province) {
       this.myMap = province.replace(/\s/g, "");
       this.myZoom = 7;
+    },
+    checkValueBedrooms() {
+      if (this.bedrooms === "0") {
+        this.bedrooms = null;
+      }
+    },
+    checkValuePrice() {
+      if (this.maxPrice === "0") {
+        this.maxPrice = null;
+      }
     }
   }
 };
   border-color: #a5a5a5;
 }
 
-.custom-select {
-  border-width: 1px;
-  border-radius: 3.425px;
-  border-color: rgba(0, 0, 0, 0.1);
-  font-family: "Muli";
-  font-size: 14.5px;
-  font-weight: 400;
+.uniSelect {
+  text-transform: none;
 }
 
-.custom-select option p {
-  color: #495057 !important;
+.uniSelect option {
+  text-transform: none;
 }
 
 .uniSelectLabel {

src/components/timeshare/resort/contentSection.vue

             <br />
             {{ resort.prDirections }}
           </p>
-
           <div class="d-flex mt-3">
             <iframe
               width="100%"

src/components/timeshare/resort/unit/directions.vue

     <div class="row">
       <div class="col">
         <label v-if="startAddress === null" class="uniSelectLabel" for="weekInfoRegionSelect"
-          >Select</label
+          >SELECT</label
         >
-        <select v-model="startAddress" class="form-control mb-3" @change="calcRoute()">
+        <select v-model="startAddress" class="uniSelect form-control mb-3" @change="calcRoute()">
           <optgroup label="Cities">
             <option value="-29.087217,26.154898">Bloemfontein</option>
             <option value="-33.918861, 18.423300">Cape Town</option>
 };
 </script>
 
-<style lang="scss" scoped>
-.uniSelectLabel {
-  position: absolute;
-  z-index: 2;
-  margin-left: 15px;
-  margin-top: 7px;
-  font-family: "muli";
-  font-size: 15px;
-  color: rgb(118, 118, 118);
-}
-</style>
+<style lang="scss" scoped></style>

src/components/timeshare/resort/unit/tabSection.vue

 <template>
   <div>
-    <ul class="nav nav-tabs" id="myTab" role="tablist">
+    <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
       <li class="nav-item">
         <a
           class="nav-link active"
       <div class="tab-pane fade" id="directions" role="tabpanel" aria-labelledby="profile-tab">
         <directions :resortCoords="resortCoords" />
       </div>
-      <div class="tab-pane fade" id="layout" role="tabpanel" aria-labelledby="contact-tab">
+      <div class="tab-pane fade mt-3" id="layout" role="tabpanel" aria-labelledby="contact-tab">
         <img :src="layoutImages[0]" @click="index = 0" style="width:100%" />
         <gallery :images="layoutImages" :index="index" @close="index = null"></gallery>
       </div>
 import facilities from "./facilities";
 import directions from "./directions";
 import gallery from "../../../shared/gallerySlideShow";
+import AOS from "aos";
+import "aos/dist/aos.css";
+
 export default {
   components: {
     facilities,
     directions,
     gallery
   },
+  created() {
+    AOS.init();
+  },
   data() {
     return {
       index: null

src/components/timeshare/sell/contentSection.vue

             <div id="sendmessage">Your details has been sent. Thank you!</div>
             <div id="errormessage"></div>
 
-            <form action="" method="post" role="form" class="contactForm">
+            <form role="form" class="contactForm">
               <div class="form-row">
                 <div
                   class="form-group col-md-12"
                 <button class="btn-solid-blue" @click="submitSale()">SUBMIT</button>
               </div>
             </form>
+            <button class="btn-solid-blue" @click="paygateTest()">PayGate</button>
             <br /><br />
           </div>
         </div>
   },
   methods: {
     ...mapActions("individual", ["getIndividual"]),
+    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"]),
+    ...mapActions("payment", ["addPayment"]),
     submitSale() {
       if (this.isLoggedIn) {
-        this.saveWeek(this.sellItem);
+        //this.saveWeek(this.sellItem);
       } else this.$router.push("/user/login");
     },
+    paygateTest() {
+      var paymentObj = {
+        timeshareWeekId: 1,
+        propertyId: 0,
+        creatydById: 3,
+        amount: 380.0,
+        paymentStatus: "",
+        paymentToken: ""
+      };
+
+      this.addPayment(paymentObj).then(res => {
+        this.$router.push({
+          name: "PaymentGateway",
+          params: {
+            paymentReqId: res.PAY_REQUEST_ID,
+            checksum: res.CHECKSUM
+          }
+        });
+      });
+    },
     previewFiles(event) {
       console.log(event.target.files);
     },
     },
     regionChange() {
       this.sellItem.regionId = this.sellItem.region ? this.sellItem.region.id : 1;
-    },
-    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"])
+    }
   }
 };
 </script>
   height: 150px;
 }
 
-.uniSelect {
-  border-color: rgb(27, 117, 187);
-  border-width: 2px;
-}
-
-.uniSelectLabel {
-  position: absolute;
-  z-index: 2;
-  margin-left: 15px;
-  margin-top: 7px;
-  font-family: "muli";
-  font-size: 15px;
-  color: rgb(118, 118, 118);
-}
-
 .custom-file-label {
   border-width: 2px;
   border-color: rgb(27, 117, 187);

src/components/user/loginPage.vue

                 <div class="card card-signin my-5">
                   <div class="card-body">
                     <h3 class="card-title text-center">Login</h3>
-                    <form class="form-signin">
-                      <div v-if="error">
-                        <alert
-                          :text="'User doesn\'t exist or Username and Password is incorrect'"
-                          :type="'ERROR'"
-                        />
-                      </div>
-                      <div class="form-label-group">
-                        <input
-                          type="text"
-                          id="inputEmail"
-                          v-model="username"
-                          class="form-control"
-                          placeholder="Username"
-                          required
-                          autofocus
-                        />
-                      </div>
-                      <div class="form-label-group">
-                        <input
-                          type="password"
-                          placeholder="Password"
-                          v-model="password"
-                          id="inputPassword"
-                          class="form-control"
-                          required
-                        />
-                      </div>
-                      <div class="custom-control custom-checkbox mb-3">
-                        <input type="checkbox" class="custom-control-input" id="customCheck1" />
-                        <label class="custom-control-label" for="customCheck1"
-                          >Remember password?</label
-                        >
-                      </div>
-                      <button v-on:click="Login()" class="btn-solid-blue" type="submit">
-                        LOGIN
-                      </button>
-                    </form>
+
+                    <div v-if="error">
+                      <alert
+                        :text="'User doesn\'t exist or Username and Password is incorrect'"
+                        :type="'ERROR'"
+                      />
+                    </div>
+                    <div class="form-label-group">
+                      <input
+                        type="text"
+                        id="inputEmail"
+                        v-model="username"
+                        class="form-control"
+                        placeholder="Username"
+                        required
+                        autofocus
+                      />
+                    </div>
+                    <div class="form-label-group">
+                      <input
+                        type="password"
+                        placeholder="Password"
+                        v-model="password"
+                        id="inputPassword"
+                        class="form-control"
+                        required
+                      />
+                    </div>
+                    <div class="custom-control custom-checkbox mb-3">
+                      <input type="checkbox" class="custom-control-input" id="customCheck1" />
+                      <label class="custom-control-label" for="customCheck1"
+                        >Remember password?</label
+                      >
+                    </div>
+                    <button v-on:click="Login()" class="btn-solid-blue" type="submit">
+                      LOGIN
+                    </button>
                   </div>
                 </div>
               </div>

src/main.js

 });
 Vue.config.productionTip = false;
 //axios.defaults.baseURL = "http://localhost:57260";
-//axios.defaults.baseURL = "http://training.provision-sa.com:82";
-axios.defaults.baseURL = "http://localhost:8080/";
+axios.defaults.baseURL = "http://training.provision-sa.com:82";
+//axios.defaults.baseURL = "http://localhost:8080/";
 
 Vue.prototype.$axios = axios;
 

src/router/index.js

 import UnitPage from "../components/timeshare/resort/unit/unitPage.vue";
 
 import ContactUs from "../components/misc/contactUs.vue";
-import PrivacyPolicy from "../components/misc/privacyPolicyPage.vue";
+import PrivacyPolicy from "../components/misc//privacyPolicy/privacyPolicyPage.vue";
 import WebsiteDisclaimer from "../components/misc/WebsiteDisclaimer.vue";
 
 import MakeOffer from "../components/processFlow/makeOffer.vue";
 import CommercialSearchResults from "../components/property/commercial/commercialSearchResults.vue";
 import ResidentialSearchResults from "../components/property/residential/residentialSearchResults.vue";
 
+import PaymentGateway from "../components/financial/paygate/paygateProcess.vue";
 import Payments from "../components/financial/payments.vue";
 import LandingPages from "../components/marketing/landingPages.vue";
 import LandingPage from "../components/marketing/landingPage.vue";
       name: "PropertySearchResults",
       component: PropertySearchResults
     },
+    {
+      path: "/payments/paymentGateway",
+      name: "PaymentGateway",
+      props: route => ({
+        ...route.params
+      }),
+      component: PaymentGateway
+    },
     {
       path: "/payments",
       name: "Payments",

src/store/modules/financial/payment.js

 import axios from "axios";
 
 export default {
-  amespaced: true,
+  namespaced: true,
   state: {
     payments: [],
     payment: {}
         .then(result => commit("setPayments", result.data))
         .catch(console.error);
     },
-    async addPayment(payment) {
-      const response = await axios.post("/api/payment/", payment);
+    async addPayment({ commit }, payment) {
+      const response = await axios.post("/api/payment", payment);
       if (response.status === 200) {
         var respObj = {};
         response.data.split("&").forEach(element => {

src/store/modules/user/authentication.js

         log.clearValues();
         log.setValues(response.data);
         commit("auth_success", response.data);
-        console.log(JSON.stringify(response.data));
         return Promise.resolve();
       } else {
         commit("auth_error");
         log.clearValues();
         commit("auth_error", "error occurred");
+        return Promise.reject();
       }
     },
     logout({ commit }) {