Terms and Conditions

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: {{ terms.modified | toDate }}</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <vue-editor v-model="termsInput" :editor-toolbar="customToolbar" />
+          <button @click="saveTerms()" class="btn-solid-blue">Save</button>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { VueEditor } from "vue2-editor";
+import { mapActions, mapGetters, mapState } from "vuex";
+
+export default {
+  components: {
+    VueEditor
+  },
+  data() {
+    return {
+      termsInput: "",
+      version: "",
+      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);
+    },
+    async populateTerms() {
+      await this.retrieveTerms();
+      this.version = this.terms.version;
+      this.termsInput = this.terms.termsConditions;
+    }
+  },
+  computed: {
+    ...mapGetters("termsConditions", ["getTermsAndConditions"]),
+    ...mapState("termsConditions", ["terms"])
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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/misc/TermsConditions/termsConditions.vue

+<template>
+  <div>
+    <carouselSection />
+    <main id="main">
+      <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/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>
+          <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"

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

         <div class="col-md-4">
           <div class="resPortfolioSection">
             <iframe
+              v-if="property.video != ''"
               width="100%"
               src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
               frameborder="0"
               </div>
             </div>
           </div>
-          <h4 class="mt-5">Video Tour</h4>
+          <h4 v-if="property.video != ''" class="mt-5">Video Tour</h4>
           <iframe
+            v-if="property.video != ''"
             width="100%"
             src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
             frameborder="0"

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/navBar.vue

                           <li>
                             <router-link to="/fees">Fees</router-link>
                           </li>
+                          <li>
+                            <router-link to="/termsConditions"
+                              >Edit Terms and Conditions</router-link
+                            >
+                          </li>
                         </ul>
                       </li>
                       <li v-if="ROLE === 'Super Admin'" class="menu-has-children">

src/components/timeshare/sell/contentSection.vue

               </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/loginPage.vue

     },
     Login() {
       this.login({ username: this.username, password: this.password })
-        .then(() => {
+        .then(fufilled => {
           this.$router.push("/");
         })
         .catch(err => {

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

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

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";
       name: "fees",
       component: Fees
     },
+    {
+      path: "/termsConditions",
+      name: "termsConditions",
+      component: TermsConditions
+    },
+    {
+      path: "/termsConditionsView",
+      name: "termsConditionsView",
+      component: TermsConditionsView
+    },
     {
       path: "/carousel",
       name: "carousel",
     {
       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) {
+      await axios.post("api/tc/", terms).then(res => {
+        commit("newTermsAndConditions", res.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);
     // },
-  },
+  }
 };

vue.config.js

   devServer: {
     proxy: {
       "/api": {
-        //target: "http://localhost:57260/",
-        target: "http://training.provision-sa.com:82",
+        target: "http://localhost:57260/",
+        //target: "http://training.provision-sa.com:82",
         changeOrigin: true
       },
       "/nph-srep": {