Multiple Updates

src/components/admin/status/editTimeShareAdminPage.vue

               <div class="form-row">
                 <div class="form-group col-md-6">
                   <div class="input-group">
-                    <label
-                      v-if="!selectedRegion"
-                      class="uniSelectLabel"
-                      for="weekInfoRegionSelect"
+                    <label v-if="!selectedRegion" class="uniSelectLabel" for="weekInfoRegionSelect"
                       >REGION</label
                     >
                   </div>
                       v-model="selectedRegion"
                       style="font-size: 15px"
                     >
-                      <option
-                        v-for="(region, r) in regions"
-                        :key="r"
-                        :value="region.regionCode"
-                      >
+                      <option v-for="(region, r) in regions" :key="r" :value="region.regionCode">
                         {{ region.regionName }}
                       </option>
                     </select>
                 <div class="form-group col-md-6">
                   <div class="input-group">
                     <float-label label="RESORT NAME" style="width: 100%" fixed>
-                      <select
-                        class="form-control uniSelect"
-                        v-model="selectedResort"
-                      >
+                      <select class="form-control uniSelect" v-model="selectedResort">
                         <option value="Other">Other</option>
                         <option
                           v-for="(resort, r) in filteredResort"
                 </div>
                 <div class="form-group col-md-6">
                   <div v-if="weekParam.otherResort">
-                    <label
-                      v-if="!weekParam.region"
-                      class="uniSelectLabel"
-                      for="region"
+                    <label v-if="!weekParam.region" class="uniSelectLabel" for="region"
                       >REGION</label
                     >
                   </div>
                       id="season"
                       v-model="selectedSeason"
                     >
-                      <option
-                        :value="season.name"
-                        v-for="(season, r) in seasons"
-                        :key="r"
-                      >
+                      <option :value="season.name" v-for="(season, r) in seasons" :key="r">
                         {{ season.name }}
                       </option>
                     </select>
             <div align="left" class="custom-control custom-switch mb-2">
               <div class="row">
                 <div align="center" class="col">
-                  <label class="mr-5"
-                    >Has your week been spacebanked for the current year?</label
-                  >
+                  <label class="mr-5">Has your week been spacebanked for the current year?</label>
                   <input
                     type="checkbox"
                     class="custom-control-input"
                   <div
                     class="spacebanked1"
                     :class="{
-                      'spacebanked1--clicked': weekParam.currentYearBanked,
+                      'spacebanked1--clicked': weekParam.currentYearBanked
                     }"
                   >
                     <div class="col-md-6">
                         v-if="weekParam.currentYearBanked"
                         v-model="weekParam.bankedWith"
                       >
-                        <option
-                          v-for="(item, i) in bankedEntities"
-                          :key="i"
-                          :value="item"
-                        >
+                        <option v-for="(item, i) in bankedEntities" :key="i" :value="item">
                           {{ item }}
                         </option>
                       </select>
               <div v-if="ROLE === 'Super Admin'" class="row mb-4">
                 <div class="col">
                   <float-label label="OWNER TYPE" fixed>
-                    <select
-                      v-model="weekParam.customOwner"
-                      class="form-control uniSelect mt-3"
-                    >
+                    <select v-model="weekParam.customOwner" class="form-control uniSelect mt-3">
                       <option v-bind:value="true">Custom Owner</option>
                       <option v-bind:value="false">Registered User</option>
                     </select>
                       class="form-control uniSelect mt-3"
                       @change="updateCurrentUser()"
                     >
-                      <option
-                        v-for="indiv in individuals"
-                        :key="indiv.id"
-                        :value="indiv.id"
-                      >
+                      <option v-for="indiv in individuals" :key="indiv.id" :value="indiv.id">
                         {{ indiv.fullName }}
                       </option>
                     </select>
                   name="agency"
                   v-model="weekParam.agencyId"
                 >
-                  <option
-                    v-for="(item, i) in agencies"
-                    :key="i"
-                    :value="item.id"
-                  >
+                  <option v-for="(item, i) in agencies" :key="i" :value="item.id">
                     {{ item.agencyName }}
                   </option>
                 </select>
                   v-model="weekParam.agentId"
                   :disabled="!weekParam.agencyId"
                 >
-                  <option
-                    v-for="(item, i) in displayNotDeletedAgents"
-                    :key="i"
-                    :value="item.id"
-                  >
+                  <option v-for="(item, i) in displayNotDeletedAgents" :key="i" :value="item.id">
                     <div>{{ item.name + " " + item.surname }}</div>
                   </option>
                 </select>
                         id="status"
                         v-model="weekParam.status.id"
                       >
-                        <option
-                          :key="status.id"
-                          :value="status.id"
-                          v-for="status in statusList"
-                        >
+                        <option :key="status.id" :value="status.id" v-for="status in statusList">
                           {{ status.description }}
                         </option>
                       </select>
   props: {
     weekParam: {},
     weekId: {
-      default: 0,
-    },
+      default: 0
+    }
   },
   data() {
     return {
       depDateParam: {},
       pubDateParam: {},
       boolAwaitingPayment: false,
-      selectedUser: "",
+      selectedUser: ""
     };
   },
   components: {
     addressAutoComplete,
-    Alert,
+    Alert
   },
   async mounted() {
     if (this.sellItem.id) {
     this.selectedWeekType = this.weekParam.weekType;
     this.selectedStatus = this.weekParam.status;
     this.selectedPublish = this.weekParam.publish;
-    var date = new Date(this.weekParam.arrivalDate)
-      .toISOString()
-      .substring(0, 10);
+    var date = new Date(this.weekParam.arrivalDate).toISOString().substring(0, 10);
     this.dateParam = date;
-    var depDate = new Date(this.weekParam.departureDate)
-      .toISOString()
-      .substring(0, 10);
+    var depDate = new Date(this.weekParam.departureDate).toISOString().substring(0, 10);
     this.depDateParam = depDate;
-    var datePub = new Date(this.weekParam.pulbishedDate)
-      .toISOString()
-      .substring(0, 10);
+    var datePub = new Date(this.weekParam.pulbishedDate).toISOString().substring(0, 10);
     this.pubDateParam = datePub;
     if (this.weekParam.status.description === "Awaiting Payment") {
       if (this.ROLE !== "Super Admin") {
       "sellItem",
       "agencies",
       "agents",
-      "getTemplate",
+      "getTemplate"
     ]),
     ...mapGetters("nonRegIndividual", ["getIndiv"]),
     ...mapState("individual", ["indiv"]),
     ...mapState("status", ["statusList"]),
     ...mapGetters({
       user: "authentication/getUser",
-      person: "authentication/getPerson",
+      person: "authentication/getPerson"
     }),
     ...mapState("bank", ["banks"]),
     ...mapState("register", ["individuals", "removeIndividual"]),
       let list = [];
       if (this.week && this.week.region && this.selectedRegion) {
         const item = this.detailedRegion.find(
-          (region) => region.region.regionCode === this.selectedRegion
+          region => region.region.regionCode === this.selectedRegion
         );
         if (item) {
           list = item.children;
       } else {
         list = this.resorts;
       }
-      return _.sortBy(list, (x) => x.resortName);
+      return _.sortBy(list, x => x.resortName);
     },
     isLoggedIn() {
       return this.user && this.person;
     },
     displayNotDeletedAgents() {
       var notDeletedArr = [];
-      this.agents.forEach((agent) => {
+      this.agents.forEach(agent => {
         if (!agent.isDeleted) {
           if (agent.agencyId === this.weekParam.agencyId) {
             notDeletedArr.push(agent);
         }
       });
       return notDeletedArr;
-    },
+    }
   },
   methods: {
     ...mapActions("individual", ["getIndividual"]),
     ...mapActions("nonRegIndividual", ["retrieveNonRegIndiv"]),
-    ...mapActions("timeshare", [
-      "initTimeshare",
-      "onResortChange",
-      "saveWeek",
-      "getBlankWeek",
-    ]),
+    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek", "getBlankWeek"]),
     ...mapActions("payment", ["addPayment"]),
     ...mapActions("bank", ["getBanks"]),
     ...mapActions("myWeeks", ["getItems", "getWeek", "editSave"]),
       this.getBlankWeek();
     },
     updateCurrentUser() {
-      this.individuals.forEach((indiv) => {
+      this.individuals.forEach(indiv => {
         if (this.weekParam.ownerId === indiv.id) {
           this.week.owner.name = indiv.name;
           this.week.owner.surname = indiv.surname;
       });
     },
     saveEdit() {
-      this.regions.forEach((region) => {
+      this.regions.forEach(region => {
         if (region.regionCode === this.selectedRegion) {
           //console.log(region);
           this.weekParam.regionId = region.id;
         }
       });
-      this.resorts.forEach((resort) => {
+      this.resorts.forEach(resort => {
         if (resort.resortCode === this.selectedResort) {
           this.weekParam.resortCode = resort.resortCode;
           this.weekParam.resortName = resort.resortName;
       console.log(this.selectedSeason);
       this.weekParam.season = this.selectedSeason;
 
-      this.resortBedrooms.forEach((bedroom) => {
+      this.resortBedrooms.forEach(bedroom => {
         if (bedroom === this.selectedBedrooms) {
           this.weekParam.bedroom = bedroom;
         }
       });
-      this.maxSleep.forEach((sleepMax) => {
+      this.maxSleep.forEach(sleepMax => {
         if (sleepMax === this.selectedMaxSleep) {
           this.weekParam.maxSleep = sleepMax;
         }
       if (this.week.owner.telephone === "") {
         delete this.week.owner.telephone;
       }
-      this.weekParam.arrivalDate = new Date(this.dateParam)
-        .toISOString()
-        .substring(0, 10);
-      this.weekParam.departureDate = new Date(this.depDateParam)
-        .toISOString()
-        .substring(0, 10);
+      this.weekParam.arrivalDate = new Date(this.dateParam).toISOString().substring(0, 10);
+      this.weekParam.departureDate = new Date(this.depDateParam).toISOString().substring(0, 10);
       //console.log(this.pubDateParam);
       if (this.pubDateParam) {
-        this.weekParam.pulbishedDate = new Date(this.pubDateParam)
-          .toISOString()
-          .substring(0, 19);
+        this.weekParam.pulbishedDate = new Date(this.pubDateParam).toISOString().substring(0, 19);
       }
       this.weekParam.owner = this.week.owner;
       this.weekParam.askingPrice = this.week.askingPrice;
       this.weekParam.module = this.week.module;
       parseFloat(this.weekParam.sellPrice);
       parseFloat(this.weekParam.levyAmount);
-      delete this.weekParam.weekType;
+      this.weekParam.weekType = this.selectedWeekType;
       delete this.weekParam.Owner;
       delete this.weekParam.agency;
       delete this.weekParam.agent;
     resortChange() {
       this.onResortChange({
         resortName: this.week.resort.resortName,
-        resortCode: this.week.resort.resortCode,
+        resortCode: this.week.resort.resortCode
       });
 
       if (this.week && this.week.resort === "Other") {
         creatydById: Log.getUser().id, //Log.getUser().id,
         amount: amount,
         paymentStatus: "",
-        paymentToken: "",
+        paymentToken: ""
       };
 
-      this.addPayment(paymentObj).then((res) => {
+      this.addPayment(paymentObj).then(res => {
         this.$router.push({
           name: "PaymentGateway",
           params: {
             paymentReqId: res.PAY_REQUEST_ID,
-            checksum: res.CHECKSUM,
-          },
+            checksum: res.CHECKSUM
+          }
         });
       });
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/admin/status/timeshareAdminList.vue

       <div class="row">
         <br />
       </div>
-      <div class="row">
-        <div class="col-lg-12">
-          <table class="table table-striped table-responsive">
+    </div>
+    <div class="container-fluid">
+      <div class="row justify-content-center">
+        <div class="col-auto">
+          <table class="table table-striped table-responsive" style="max-width:1920px">
             <thead>
               <tr>
                 <th scope="col" v-for="(col, c) in displayColumns" :key="c">

src/components/admin/status/timeshareAdminPage.vue

           </div>
         </div>
       </div>
+    </div>
+    <div class="container-fluid">
       <div v-if="checkAccess" class="row">
         <div class="col-md-12">
           <timeshareList />

src/components/communication/editEmailTemplate.vue

+<template>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Edit Template</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <float-label fixed label="USAGE">
+            <select v-model="singleTemp.name" class="form-control uniSelect" name="" id="">
+              <option value="WeekOfferMade-User">Timeshare Week Offer Made (User)</option>
+              <option value="WeekOfferMade-Owner">Timeshare Week Offer Made (Admin)</option>
+              <option value="WeekLoaded-Agent">Timeshare Week Listed (Agent)</option>
+              <option value="WeekLoaded-Owner">Timeshare Week Listed (Owner)</option>
+              <option value="ContactUs">Contact Us (Admin)</option>
+              <option value="EnquireNow">Enquire Now (Admin)</option>
+            </select>
+          </float-label>
+        </div>
+        <div class="col">
+          <float-label fixed label="SUBJECT">
+            <input type="text" class="form-control uniInput" v-model="singleTemp.subject" />
+          </float-label>
+        </div>
+      </div>
+      <div class="row mt-5">
+        <div class="col-md-12">
+          <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a
+                class="nav-link active"
+                id="html-tab"
+                data-toggle="tab"
+                href="#html"
+                role="tab"
+                aria-controls="html"
+                aria-selected="false"
+                ><h2>
+                  html
+                </h2></a
+              >
+            </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                id="preview-tab"
+                data-toggle="tab"
+                href="#preview"
+                role="tab"
+                aria-controls="preview"
+                aria-selected="true"
+                ><h2>
+                  Preview
+                </h2></a
+              >
+            </li>
+          </ul>
+          <div class="tab-content" id="myTabContent">
+            <div class="row mt-5">
+              <div class="col-md-10 mt-3">
+                <float-label fixed label="DYNAMIC FIELD">
+                  <select v-model="selectedProperty" class="form-control uniSelect" name="" id="">
+                    <optgroup label="Resort Fields">
+                      <option value="[RESORTNAME]">Resort Name</option>
+                      <option value="[UNITNUMBER]">Unit Number</option>
+                      <option value="[MODULE]">Module</option>
+                      <option value="[RESORTPRICE]">Resort Price</option>
+                      <option value="[RESORTSEASON]">Resort Season</option>
+                      <option value="[RESORTLEVY]">Resort Levy</option>
+                      <option value="[OFFERMADE]">Offer Made</option>
+                      <option value="[OWNER]">OWNER</option>
+                    </optgroup>
+                    <optgroup label="Property Fields">
+                      <option value="[PROPERTYREF]">Property Ref</option>
+                      <option value="[PROPERTYNAME]">Property Name</option>
+                      <option value="[PROPERTYPRICE]">Property Price</option>
+                      <option value="[PROPERTYID]">Property ID</option>
+                    </optgroup>
+                    <optgroup label="User Fields">
+                      <option value="[FULLNAME]">Fullname</option>
+                      <option value="[USEREMAIL]">User Email</option>
+                      <option value="[USERCELLPHONE]">User Cellphone Number</option>
+                      <option value="[USERTELEPHONE]">User Telephone Number</option>
+                      <option value="[USERCOMMENT]">User Comment</option>
+                      <option value="[USERMESSAGE]">User Message</option>
+                    </optgroup>
+                  </select>
+                </float-label>
+              </div>
+              <div class="col">
+                <button class="btn-solid-blue" @click="onItemAdd">INSERT</button>
+              </div>
+            </div>
+            <div
+              class="tab-pane fade show active mt-4"
+              style="background-color:rgba(255,255,255,0.75);padding:10px;"
+              id="html"
+              role="tabpanel"
+              aria-labelledby="directions-tab"
+            >
+              <div class="text-left">
+                <div class="input-group mb-3">
+                  <textarea
+                    id="bodyInput"
+                    class="form-control"
+                    type="text"
+                    rows="40"
+                    step="any"
+                    name="levy"
+                    v-model="singleTemp.body"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="tab-pane fade mt-4"
+              id="preview"
+              role="tabpanel"
+              aria-labelledby="resort-layout-tab"
+            >
+              <div class="no-style" v-html="singleTemp.body"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row mt-4">
+        <div class="col">
+          <button class="btn-solid-blue" @click="sendToApi()">UPDATE</button>
+        </div>
+        <div class="col">
+          <button class="btn-solid-blue" @click="$router.go(-1)">CANCEL</button>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions, mapState } from "vuex";
+
+import alert from "../shared/alert";
+export default {
+  data() {
+    return {
+      selectedProperty: ""
+    };
+  },
+  components: {
+    alert
+  },
+  created() {
+    this.getSingleTemplate(this.$route.params.id).then(() => {
+      console.log(this.recipient);
+    });
+  },
+  computed: {
+    ...mapState("template", ["singleTemp"])
+  },
+  methods: {
+    ...mapActions("template", ["getSingleTemplate", "editItem"]),
+    sendToApi() {
+      this.editItem(this.singleTemp).then(() => this.$router.go(-1));
+    },
+    onItemAdd() {
+      var placeHolder = this.selectedProperty;
+      // will give the current postion of the cursor
+      var curPos = document.getElementById("bodyInput").selectionStart;
+
+      // will get the value of the text area
+      let x = $("#bodyInput").val();
+
+      // will get the value of the input box
+      let text_to_insert = placeHolder;
+
+      // setting the updated value in the text area
+      $("#bodyInput").val(x.slice(0, curPos) + text_to_insert + x.slice(curPos));
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.nav-tabs li a {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom-color: rgb(221, 221, 221);
+}
+
+.nav-tabs li :hover {
+  background-color: rgb(27, 117, 187);
+}
+
+.nav-tabs li a.active {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom-color: rgb(221, 221, 221);
+}
+
+.nav-tabs li a :hover {
+  background-color: transparent;
+  color: white;
+}
+</style>

src/components/communication/emailRecipientEdit.vue

             <select v-model="recipient.recipientUsage" class="form-control uniSelect">
               <option value="ContactUs">Contact Us</option>
               <option value="EnquireNow">Enquire Now</option>
+              <option value="WeekOfferMade-User">Timeshare Week Offer Made (User)</option>
+              <option value="WeekOfferMade-Owner">Timeshare Week Offer Made (Admin)</option>
+              <option value="WeekLoaded-Agent">Timeshare Week Listed (Agent)</option>
+              <option value="WeekLoaded-Owner">Timeshare Week Listed (Owner)</option>
             </select>
           </float-label>
         </div>

src/components/communication/emailRecipientNew.vue

             <select v-model="recipient.recipientUsage" class="form-control uniSelect">
               <option value="ContactUs">Contact Us</option>
               <option value="EnquireNow">Enquire Now</option>
+              <option value="WeekOfferMade-User">Timeshare Week Offer Made (User)</option>
+              <option value="WeekOfferMade-Owner">Timeshare Week Offer Made (Admin)</option>
+              <option value="WeekLoaded-Agent">Timeshare Week Listed (Agent)</option>
+              <option value="WeekLoaded-Owner">Timeshare Week Listed (Owner)</option>
             </select>
           </float-label>
         </div>

src/components/communication/emailTemplatesNew.vue

+<template>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Email Tempaltes</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <listView
+            :items="list"
+            :showNew="true"
+            :editable="true"
+            :deleteable="true"
+            :hideSearch="true"
+            :showColumnChooser="false"
+            :displayColumns="columns"
+            :sortKey="'description'"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions, mapState } from "vuex";
+import listView from "../shared/listView";
+export default {
+  name: "MailTempaltes",
+  components: {
+    listView
+  },
+  data() {
+    return {};
+  },
+  created() {
+    this.getList();
+  },
+  computed: {
+    ...mapState("template", ["list", "item"])
+  },
+  methods: {
+    ...mapActions("template", ["getList", "deleteMailTemplate"]),
+    New() {
+      this.$router.push("/emailTemplates/New/");
+    },
+    Edit(item) {
+      this.$router.push({
+        path: `/emailTemplates/Edit/${item.id}`
+      });
+    },
+    Delete(item) {
+      this.deleteMailTemplate(item.id);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/communication/newEmailTemplate.vue

+<template>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Edit Template</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <float-label fixed label="USAGE">
+            <select v-model="singleTemp.name" class="form-control uniSelect" name="" id="">
+              <option value="WeekOfferMade-User">Timeshare Week Offer Made (User)</option>
+              <option value="WeekOfferMade-Owner">Timeshare Week Offer Made (Admin)</option>
+              <option value="WeekLoaded-Agent">Timeshare Week Listed (Agent)</option>
+              <option value="WeekLoaded-Owner">Timeshare Week Listed (Owner)</option>
+              <option value="ContactUs">Contact Us (Admin)</option>
+              <option value="EnquireNow">Enquire Now (Admin)</option>
+            </select>
+          </float-label>
+        </div>
+        <div class="col">
+          <float-label fixed label="SUBJECT">
+            <input type="text" class="form-control uniInput" v-model="singleTemp.subject" />
+          </float-label>
+        </div>
+      </div>
+      <div class="row mt-5">
+        <div class="col-md-12">
+          <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a
+                class="nav-link active"
+                id="html-tab"
+                data-toggle="tab"
+                href="#html"
+                role="tab"
+                aria-controls="html"
+                aria-selected="false"
+                ><h2>
+                  html
+                </h2></a
+              >
+            </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                id="preview-tab"
+                data-toggle="tab"
+                href="#preview"
+                role="tab"
+                aria-controls="preview"
+                aria-selected="true"
+                ><h2>
+                  Preview
+                </h2></a
+              >
+            </li>
+          </ul>
+          <div class="tab-content" id="myTabContent">
+            <div class="row mt-5">
+              <div class="col-md-10 mt-3">
+                <float-label fixed label="DYNAMIC FIELD">
+                  <select v-model="selectedProperty" class="form-control uniSelect" name="" id="">
+                    <optgroup label="Resort Fields">
+                      <option value="[RESORTNAME]">Resort Name</option>
+                      <option value="[UNITNUMBER]">Unit Number</option>
+                      <option value="[MODULE]">Module</option>
+                      <option value="[RESORTPRICE]">Resort Price</option>
+                      <option value="[RESORTSEASON]">Resort Season</option>
+                      <option value="[RESORTLEVY]">Resort Levy</option>
+                      <option value="[OFFERMADE]">Offer Made</option>
+                      <option value="[OWNER]">OWNER</option>
+                    </optgroup>
+                    <optgroup label="Property Fields">
+                      <option value="[PROPERTYREF]">Property Ref</option>
+                      <option value="[PROPERTYNAME]">Property Name</option>
+                      <option value="[PROPERTYPRICE]">Property Price</option>
+                      <option value="[PROPERTYID]">Property ID</option>
+                    </optgroup>
+                    <optgroup label="User Fields">
+                      <option value="[FULLNAME]">Fullname</option>
+                      <option value="[USEREMAIL]">User Email</option>
+                      <option value="[USERCELLPHONE]">User Cellphone Number</option>
+                      <option value="[USERTELEPHONE]">User Telephone Number</option>
+                      <option value="[USERCOMMENT]">User Comment</option>
+                      <option value="[USERMESSAGE]">User Message</option>
+                    </optgroup>
+                  </select>
+                </float-label>
+              </div>
+              <div class="col">
+                <button class="btn-solid-blue" @click="onItemAdd">INSERT</button>
+              </div>
+            </div>
+            <div
+              class="tab-pane fade show active mt-4"
+              style="background-color:rgba(255,255,255,0.75);padding:10px;"
+              id="html"
+              role="tabpanel"
+              aria-labelledby="directions-tab"
+            >
+              <div class="text-left">
+                <div class="input-group mb-3">
+                  <textarea
+                    id="bodyInput"
+                    class="form-control"
+                    type="text"
+                    rows="40"
+                    step="any"
+                    name="levy"
+                    v-model="singleTemp.body"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="tab-pane fade mt-4"
+              id="preview"
+              role="tabpanel"
+              aria-labelledby="resort-layout-tab"
+            >
+              <div class="no-style" v-html="singleTemp.body"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row mt-4">
+        <div class="col">
+          <button class="btn-solid-blue" @click="sendToApi()">SAVE</button>
+        </div>
+        <div class="col">
+          <button class="btn-solid-blue" @click="$router.go(-1)">CANCEL</button>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions, mapState } from "vuex";
+
+import alert from "../shared/alert";
+export default {
+  data() {
+    return {
+      selectedProperty: "",
+      singleTemp: {}
+    };
+  },
+  components: {
+    alert
+  },
+  methods: {
+    ...mapActions("template", ["addItem"]),
+    sendToApi() {
+      this.addItem(this.singleTemp).then(() => {
+        this.$router.go(-1);
+      });
+    },
+    onItemAdd() {
+      var placeHolder = this.selectedProperty;
+      // will give the current postion of the cursor
+      var curPos = document.getElementById("bodyInput").selectionStart;
+
+      // will get the value of the text area
+      let x = $("#bodyInput").val();
+
+      // will get the value of the input box
+      let text_to_insert = placeHolder;
+
+      // setting the updated value in the text area
+      $("#bodyInput").val(x.slice(0, curPos) + text_to_insert + x.slice(curPos));
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/processFlow/makeOffer.vue

     SendOffer() {
       //alert("Under Development");
       this.bidItem.id = 0;
-
+      this.bidItem.userId = this.item.userId;
       this.bidItem.amount = this.item.offer;
       this.bidItem.comment = this.item.comment;
       if (this.isProperty) {

src/components/property/enquireNow/contentSection.vue

     ...mapActions("individual", ["getIndividual"]),
     async sendMail() {
       var mailObj = {
-        toAddress: "jlouw365@gmail.com",
+        //toAddress: "jlouw365@gmail.com",
         fromAddress: "jlouw365@gmail.com",
         name: this.indiv.name,
         email: this.indiv.emailAddress,

src/components/shared/navBar.vue

                           :class="submenu1Class"
                         >
                           <li v-if="ROLE === 'Super Admin'">
-                            <router-link to="/status/tenderWeekAdmin"
-                              >Tender Week Management</router-link
+                            <router-link to="/status/timeshareAdmin"
+                              >Timeshare Week Admin</router-link
                             >
                           </li>
                           <li v-if="ROLE === 'Super Admin'">
-                            <router-link to="/status/timeshareAdmin"
-                              >Timeshare Week Admin</router-link
+                            <router-link to="/status/tenderWeekAdmin"
+                              >Tender Week Management</router-link
                             >
                           </li>
                         </ul>
                             <router-link to="/termsConditions">Edit Terms & Conditions</router-link>
                           </li>
                           <li>
-                            <router-link to="/communication/template">Email Templates</router-link>
+                            <router-link to="/emailTemplates">Email Templates</router-link>
                           </li>
                           <li>
                             <router-link to="/emailRecipient">Email Recipients</router-link>

src/components/timeshare/buy/weekListComponent.vue

           <tr v-for="(item, i) in DisplayItems" :key="i">
             <td>#{{ item.id }}</td>
             <td>{{ item.unitNumber }}</td>
-            <td>{{ item.weekNumber }}</td>
+            <td>{{ item.module }}</td>
             <td
               v-if="
                 item.arrivalDate === '0001-01-01T00:00:00' ||
-                item.arrivalDate === '1753-01-01T00:00:00'
+                  item.arrivalDate === '1753-01-01T00:00:00'
               "
             ></td>
             <td v-else>{{ item.arrivalDate | toDate }}</td>
             <td
               v-if="
                 item.departureDate === '0001-01-01T00:00:00' ||
-                item.departureDate === '1753-01-01T00:00:00'
+                  item.departureDate === '1753-01-01T00:00:00'
               "
             ></td>
             <td v-else>{{ item.departureDate | toDate }}</td>
             <!-- <td>{{item.status ? item.status.description : ''}}</td> -->
 
             <td>
-              <a
-                v-on:click="View(item)"
-                class="btn-solid-blue"
-                style="color: white"
-                >YES</a
-              >
+              <a v-on:click="View(item)" class="btn-solid-blue" style="color: white">YES</a>
             </td>
             <!-- <div class="col-md-12">
                 <button type="button" class="btn btn-b-n" >View</button>
     resortCode: undefined,
     userId: undefined,
     currentPage: {
-      default: 1,
-    },
+      default: 1
+    }
   },
   data() {
     return {
       visibleItemsPerPageCount: 8,
-      visibleItemSelector: [5, 8, 10, 20, 50, 100],
+      visibleItemSelector: [5, 8, 10, 20, 50, 100]
     };
   },
   components: {
-    BasePagination,
+    BasePagination
   },
   computed: {
     ...mapState("weekList", ["weeks", "status"]),
     ...mapGetters({
       filteredWeeks: "weekList/filteredWeeks",
-      getRegions: "weekList/getRegions",
+      getRegions: "weekList/getRegions"
     }),
     DisplayItems() {
       const list = [];
-      this.filteredWeeks.forEach((week) => {
+      this.filteredWeeks.forEach(week => {
         if (week.publish) {
           list.push(week);
         }
       return this.visibleItemsPerPageCount !== 0
         ? Math.ceil(this.filteredWeeks.length / this.visibleItemsPerPageCount)
         : 1;
-    },
+    }
   },
   mounted() {
     if (this.resortCode) {
     //this.getWeeks();
   },
   methods: {
-    ...mapActions("weekList", [
-      "getWeeks",
-      "applyResortFilter",
-      "getByResortCode",
-    ]),
+    ...mapActions("weekList", ["getWeeks", "applyResortFilter", "getByResortCode"]),
     View(item) {
       this.$router.push(`/resort/${item.resort.resortCode}/${item.unitNumber}`);
     },
         default:
           this.currentPage = value;
       }
-    },
-  },
+    }
+  }
 };
 </script>
 

src/router/index.js

 import EmailRecipient from '../components/communication/emailRecipients.vue'
 import EmailRecipientNew from '../components/communication/emailRecipientNew.vue'
 import EmailRecipientEdit from '../components/communication/emailRecipientEdit.vue'
+import EmailTemplates from '../components/communication/emailTemplatesNew.vue'
+import EmailTemplateEdit from '../components/communication/editEmailTemplate.vue'
+import EmailTemplateNew from '../components/communication/newEmailTemplate.vue'
 
 import CommercialSearchResults from "../components/property/commercial/commercialSearchResults.vue";
 import ResidentialSearchResults from "../components/property/residential/residentialSearchResults.vue";
       name: "ForgotPasswordReset",
       component: ForgotPasswordReset,
     },
+    {
+      path: "/emailTemplates",
+      name: "emailTemplates",
+      component: EmailTemplates,
+    },
+    {
+      path: "/emailTemplates/Edit/:id",
+      name: "emailTemplateEdit",
+      component: EmailTemplateEdit,
+    },
+    {
+      path: "/emailTemplates/New/",
+      name: "emailTemplateNew",
+      component: EmailTemplateNew,
+    },
     {
       path: "/emailRecipient",
       name: "emailRecipient",

src/store/modules/communication/template.js

   namespaced: true,
   state: {
     list: [],
+    singleTemp: {},
     item: {},
     message: undefined,
     recipients: [],
     setList(state, list) {
       state.list = list;
     },
+    setSingle(state, template){
+      state.singleTemp = template
+    },
     setRecipients(state, recips){
       state.recipients = recips
     },
     removeRecipient(state, id){
       var index = state.recipients.findIndex((recip) => recip.id == id)
       state.recipients.splice(index, 1)
+    },
+    deleteTemplate(state, id){
+      var index = state.list.findIndex((template) => template.id == id)
+      state.list.splice(index, 1)
     }
   },
-  getters: {},
+  getters: {
+  },
   actions: {
     getList({
       commit,
         .then(result => commit('setList', result.data))
         .catch(console.error);
     },
+    async getSingleTemplate({commit}, id){
+      await axios.get('/api/template/' + id)
+      .then(result => commit('setSingle', result.data[0]))
+      .catch(ex => console.log(ex))
+    },
     addItem({
       dispatch,
     }, item) {
         .then(() => dispatch('getList'))
         .catch(console.error);
     },
+    async deleteMailTemplate({commit}, id){
+      await axios.delete('/api/template/'+ id)
+      .then(() => {
+        commit("deleteTemplate", id)
+      })
+      .catch((ex) => {
+        console.log(ex);
+      })
+    },
     async getMailRecipients({commit}){
       await axios.get('/api/mail/mailrecipients')
       .then((result) => {