Landing Pages

package-lock.json

       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-js-modal": {
+      "version": "1.3.33",
+      "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-1.3.33.tgz",
+      "integrity": "sha512-AeYn51cG/iSZbRAOnDrmzdv+Q8bBtElB3R0U37eM3NRKkcFsf6CLBw5lip1sSbichdn1ANfzjM+N1gki3GvMqw=="
+    },
     "vue-json-excel": {
       "version": "0.2.98",
       "resolved": "https://registry.npmjs.org/vue-json-excel/-/vue-json-excel-0.2.98.tgz",

package.json

     "vue": "^2.6.11",
     "vue-carousel": "^0.18.0",
     "vue-eva-icons": "^1.1.1",
+    "vue-js-modal": "^1.3.33",
     "vue-json-excel": "^0.2.98",
     "vue-router": "^3.1.5",
     "vue-trix": "^1.1.7",

src/App.vue

 <template>
   <div id="app">
-    <a href="#" class="back-to-top">
+    <a v-if="!isLandingPage" href="#" class="back-to-top">
       <i class="fa fa-chevron-up"></i>
     </a>
-    <div class="click-closed"></div>
-    <SearchTab />
-    <NavBar @routerGoTo="routerGoTo" />
-    <div class="pushDown"></div>
-    <router-view />
-    <FooterSection class="margin-top" />
+    <div v-if="!isLandingPage" class="click-closed"></div>
+    <SearchTab v-if="!isLandingPage" />
+    <NavBar v-if="!isLandingPage" @routerGoTo="routerGoTo" />
+    <div v-if="!isLandingPage" class="pushDown"></div>
+    <router-view @setLandingPage="setLandingPage" />
+    <FooterSection v-if="!isLandingPage" class="margin-top" />
   </div>
 </template>
 
 <script>
-import SearchTab from './components/shared/searchTab.vue';
-import NavBar from './components/shared/navBar.vue';
-import FooterSection from './components/shared/footerSection.vue';
+import SearchTab from "./components/shared/searchTab.vue";
+import NavBar from "./components/shared/navBar.vue";
+import FooterSection from "./components/shared/footerSection.vue";
 
 export default {
-  name: 'app',
+  name: "app",
+  data() {
+    return {
+      isLandingPage: false
+    };
+  },
   components: {
     SearchTab,
     NavBar,
-    FooterSection,
+    FooterSection
   },
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
-  },
+    setLandingPage(item) {
+      this.isLandingPage = item;
+    }
+  }
 };
 </script>
 

src/components/marketing/clientView.vue

+<template>
+  <div>
+    <div class="no-style" v-html="campaignHtml"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "clientView",
+  data() {
+    return {};
+  },
+  methods: {
+    ...mapActions("campaign", ["getCampaignHTML"]),
+    routerGoTo(goto) {
+      this.$router.push(goto);
+    }
+  },
+  mounted() {
+    this.getCampaignHTML(this.$route.params.id);
+    this.$emit("setLandingPage", true);
+    if (!this.campaign.isActive) {
+      console.log("reroute to exp");
+      this.$router.push("/CampaignExpired");
+    }
+  },
+  computed: {
+    ...mapState("campaign", ["campaignHtml"])
+  }
+};
+</script>

src/components/marketing/landingPage.vue

+<template>
+  <div>
+    <div class="container">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <br />
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Landing Page</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="container col-md-12" style="text-align:left">
+        <div class="form-goup row">
+          <div class="col-md-4">
+            <label>Campaign Name</label>
+            <input v-if="isNew" class="form-control" type="text" v-model="campaign.name" />
+            <FieldEditor v-else :type="'text'" v-model="campaign.name" :mayEdit="true" />
+          </div>
+          <div class="col-md-4">
+            <label>Start Date</label>
+            <input v-if="isNew" class="form-control" type="date" v-model="campaign.startDate" />
+            <FieldEditor v-else :type="'date'" v-model="campaign.startDate" :mayEdit="true" />
+          </div>
+          <div class="col-md-4">
+            <label>End Date</label>
+            <input v-if="isNew" class="form-control" type="date" v-model="campaign.endDate" />
+            <FieldEditor v-else :type="'date'" v-model="campaign.endDate" :mayEdit="true" />
+          </div>
+        </div>
+        <div class="form-goup row">
+          <div class="col-md-4">
+            <label>Subject</label>
+            <input v-if="isNew" class="form-control" type="text" v-model="campaign.subject" />
+            <FieldEditor v-else :type="'text'" v-model="campaign.subject" :mayEdit="true" />
+          </div>
+          <div class="col-md-4">
+            <label>Number of items per row</label>
+            <input v-if="isNew" class="form-control" type="number" v-model="campaign.itemsPerRow" />
+            <FieldEditor v-else :type="'number'" v-model="campaign.itemsPerRow" :mayEdit="true" />
+          </div>
+        </div>
+        <br />
+        <div class="col-md-12">
+          <label>Main Body</label>
+          <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a
+                class="nav-link active"
+                id="directions-tab"
+                data-toggle="tab"
+                href="#directions"
+                role="tab"
+                aria-controls="directions"
+                aria-selected="false"
+              >Html</a>
+            </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                id="resort-layout-tab"
+                data-toggle="tab"
+                href="#resort-layout"
+                role="tab"
+                aria-controls="resort-layout"
+                aria-selected="true"
+              >Preview</a>
+            </li>
+          </ul>
+          <div
+            class="tab-content"
+            id="myTabContent"
+            style="background-color:rgba(255,255,255,0.75);padding:10px;border:silver solid thin;border-radius:10px;"
+          >
+            <div
+              class="tab-pane fade show active"
+              style="background-color:rgba(255,255,255,0.75);padding:10px;"
+              id="directions"
+              role="tabpanel"
+              aria-labelledby="directions-tab"
+            >
+              <div class="text-left">
+                <div class="input-group mb-3">
+                  <label>
+                    <i>Place the tag [items] as a place holder for the week items.</i>
+                  </label>
+                </div>
+                <div class="input-group mb-3">
+                  <!-- <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>B</b>
+                    </span>
+                  </div>-->
+                  <textarea
+                    class="form-control"
+                    type="text"
+                    rows="10"
+                    step="any"
+                    name="levy"
+                    v-model="campaign.body"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="tab-pane fade"
+              id="resort-layout"
+              role="tabpanel"
+              aria-labelledby="resort-layout-tab"
+            >
+              <div class="no-style" v-html="campaign.body"></div>
+            </div>
+          </div>
+        </div>
+        <br />
+        <div class="col-md-12">
+          <label>Item Template</label>
+          <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a
+                class="nav-link active"
+                id="template-tab"
+                data-toggle="tab"
+                href="#template"
+                role="tab"
+                aria-controls="template"
+                aria-selected="false"
+              >Html</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"
+              >Preview</a>
+            </li>
+          </ul>
+          <div
+            class="tab-content"
+            id="myTabContent"
+            style="background-color:rgba(255,255,255,0.75);padding:10px;border:silver solid thin;border-radius:10px;"
+          >
+            <div
+              class="tab-pane fade show active"
+              style="background-color:rgba(255,255,255,0.75);padding:10px;"
+              id="template"
+              role="tabpanel"
+              aria-labelledby="template-tab"
+            >
+              <div class="text-left">
+                <div class="input-group mb-3">
+                  <label>
+                    <i>
+                      Place the tag [image] as a place holder for the week's image.
+                      <br />Place the tag [link] for a hypher link to the week's page
+                    </i>
+                  </label>
+                </div>
+                <div class="input-group mb-3">
+                  <!-- <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>B</b>
+                    </span>
+                  </div>-->
+                  <textarea
+                    class="form-control"
+                    type="text"
+                    rows="10"
+                    step="any"
+                    name="levy"
+                    v-model="campaign.itemBody"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="tab-pane fade" id="preview" role="tabpanel" aria-labelledby="preview-tab">
+              <div class="no-style" v-html="campaign.itemBody"></div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-12"></div>
+        <br />
+        <div class="col-md-12">
+          <label>
+            <b>Place Holders</b>
+          </label>
+          <div class="d-flex">
+            <div class="p-2">
+              <div
+                class="btn btn-primary myBackground"
+                @click="addClose()"
+                v-if="CanEdit"
+              >{{btnCaption}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-12" v-if="showNew">
+          <LandingPageItems
+            @onItemAdd="onItemAdd"
+            :selectedClass="defaultPlaceholderClass"
+            :canSelectClass="false"
+            :editItem="placeholderItem"
+          />
+        </div>
+        <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-12">
+          <ListView
+            :items="PlaceHolders"
+            :hideSearch="true"
+            :showColumnChooser="false"
+            :showNew="false"
+            :allowMultipleSelect="true"
+            :canEdit="false"
+            :deleteable="CanEdit"
+            @onDelete="onItemDelete"
+            :displayColumns="placeHolderColumns"
+            :sortKey="'name'"
+          />
+          <!-- :displayColumns="placeHolderColumns" -->
+        </div>
+        <br />
+        <div class="col-md-12">
+          <label>
+            <b>Weeks</b>
+          </label>
+          <div class="d-flex">
+            <div class="p-2">
+              <div
+                class="btn btn-primary myBackground"
+                @click="addWeekClose()"
+                v-if="CanEditWeeks"
+              >{{btnCaptionWeek}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-12" v-if="showNewWeek">
+          <WeekAdd @onWeekItemAdd="AddNewWeek" />
+        </div>
+        <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-12">
+          <ListView
+            :items="Weeks"
+            :hideSearch="true"
+            :showColumnChooser="false"
+            :showNew="false"
+            :canEdit="false"
+            :deleteable="CanEdit"
+            :allowMultipleSelect="false"
+            @onDelete="onItemDeleteWeek"
+            :sortKey="'weekUni'"
+            :displayColumns="weekColumns"
+            :displayFormats="weekFormats"
+          />
+          <!-- -->
+        </div>
+        <br />
+        <br />
+        <div class="form-group row">
+          <button
+            type="button"
+            @click="SaveData()"
+            class="btn btn-primary myBackground"
+            style="width: 85px; height:40px;"
+          >Save</button>
+          <button
+            type="button"
+            @click="Close()"
+            class="btn btn-primary myBackground"
+            style="width: 85px; height:40px;"
+          >Close</button>
+        </div>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { VueEditor } from "vue2-editor";
+import { mapState, mapActions } from "vuex";
+import FieldEditor from "../../components/shared/fieldEditor";
+import ListView from "../shared/listView.vue";
+import Search from "../admin/misc/carouselSearch.vue";
+import LandingPageItems from "./landingPageItems.vue";
+import WeekAdd from "./landingPageWeek.vue";
+
+export default {
+  name: "LandingPage",
+  components: {
+    VueEditor,
+    FieldEditor,
+    Search,
+    LandingPageItems,
+    ListView,
+    WeekAdd
+  },
+  data() {
+    return {
+      wait: false,
+      isNew: true,
+      showNew: false,
+      showNewWeek: false,
+      weekColumns: ["image", "weekUni"],
+      weekFormats: ["image", ""],
+      placeHolderColumns: ["name", "boundTo", "format"],
+      defaultPlaceholderClass: {
+        fullName: "UnivateProperties_API.Model.Timeshare.TimeshareWeek",
+        name: "TimeshareWeek"
+      }
+    };
+  },
+  props: {
+    placeHolders: [],
+    weeks: [],
+    editable: {
+      default: false
+    }
+  },
+  methods: {
+    ...mapActions("campaign", [
+      "getCampaign",
+      "saveCampaign",
+      "updateCampaign",
+      "getCampaignItems",
+      "getCampaignPlaceHolders"
+    ]),
+    SaveData() {
+      this.wait = true;
+      if (this.isNew) {
+        for (let i = 0; i < this.campaign.items.length; i++) {
+          this.campaign.items[i].week = undefined;
+          if (
+            this.campaign.items[i].placeHolders &&
+            this.campaign.items[i].placeHolders.length > 0
+          ) {
+            this.campaign.items[
+              i
+            ].campaignItemPlaceHolder = this.campaign.items[i].placeHolders;
+          }
+        }
+
+        for (let i = 0; i < this.campaign.placeHolders.length; i++) {
+          this.campaign.placeHolders[i].format = this.campaign.placeHolders[
+            i
+          ].formatTemplate;
+        }
+        console.log(JSON.stringify(this.campaign));
+        // this.saveCampaign(this.campaign)
+        //   .then(fulfilled => {
+        //     this.$router.push("/landingPages");
+        //   })
+        //   .catch(error => {
+        //     console.log(error.message);
+        //   });
+      } else {
+        this.updateCampaign(this.campaign).then(() => {
+          this.$router.push("/landingPages");
+        });
+      }
+    },
+    Close() {
+      this.$router.push("/landingPages");
+    },
+    NewWeek() {
+      this.$router.push("/landingPage/week/0");
+    },
+    onItemAdd(item) {
+      const myList = this.campaign.placeHolders
+        ? this.campaign.placeHolders
+        : [];
+      myList.push({
+        name: item.name,
+        boundTo: item.property,
+        boundToClassDisplay: item.class.name,
+        boundToClass: item.class.fullName,
+        format: item.format,
+        formatTemplate: item.formatTemplate
+      });
+      this.PlaceHolders = myList;
+      this.campaign.placeHolders = this.PlaceHolders;
+      this.showNew = false;
+    },
+    addClose() {
+      if (this.showNew) {
+        this.showNew = false;
+      } else this.showNew = true;
+    },
+    addWeekClose() {
+      if (this.showNewWeek) {
+        this.showNewWeek = false;
+      } else {
+        this.showNewWeek = true;
+      }
+    },
+    onItemDelete(item) {
+      this.campaign.placeHolders = _.remove(
+        this.campaign.placeHolders,
+        x => x !== item
+      );
+      this.placeHolders = this.campaign.placeHolders;
+    },
+    // AddWeek(item) {
+    //   // const myList = this.campaign.items ? this.campaign.items : [];
+    //   // myList.push(item);
+    //   // this.campaign.items = myList;
+    //   //this.showNewWeek = false;
+    // },
+    AddNewWeek(week) {
+      var item = {
+        image: week.image,
+        weekUni: week.week.weekUni,
+        weekId: week.weekId,
+        placeHolders: week.placeHolders
+      };
+      this.campaign.items.push(item);
+      this.showNewWeek = false;
+    },
+    onItemDeleteWeek(item) {
+      this.campaign.items = _.remove(this.campaign.items, x => x !== item);
+      this.Weeks = this.campaign.items;
+    }
+  },
+  mounted() {
+    this.getCampaign(this.$route.params.id);
+
+    this.wait = false;
+    if (this.$route.params.id > 0) {
+      this.isNew = false;
+    }
+  },
+  computed: {
+    ...mapState("campaign", [
+      "campaign",
+      "campaignPlaceHolders",
+      "campaignItems"
+    ]),
+    PlaceHolders() {
+      if (this.campaign && this.campaign.placeHolders) {
+        return this.campaign.placeHolders;
+      }
+      return this.placeHolders;
+    },
+    Weeks() {
+      if (this.campaign && this.campaign.items) {
+        return this.campaign.items;
+      }
+      return this.weeks;
+    },
+    CanEdit() {
+      return this.editable || this.campaign.id === 0;
+    },
+    CanEditWeeks() {
+      return this.editable || this.campaign.id === 0;
+    },
+    btnCaption() {
+      return this.showNew ? "Close" : "New";
+    },
+    btnCaptionWeek() {
+      return this.showNewWeek ? "Close" : "New";
+    }
+  }
+};
+</script>

src/components/marketing/landingPageExpired.vue

+<template>
+  <div>
+    <br />
+    <H2>Sorry, this Marketing Campaign has expired</H2>
+  </div>
+</template>

src/components/marketing/landingPageItems.vue

+<template>
+  <div class="row">
+    <div class="col-md-12" v-if="message !== undefined">
+      <Alert :text="message" :type="'ERROR'" />
+    </div>
+    <div class="col-md-3">
+      <input
+        class="form-control"
+        type="text"
+        step="any"
+        name="levy"
+        placeholder="Name"
+        v-model="item.name"
+      />
+    </div>
+    <!-- <div class="col-md-3">
+      <select
+        v-if="canSelectClass"
+        class="form-control"
+        v-model="item.class"
+        @change="onClassChanged()"
+      >
+        <option v-for="(item, i) in classes" :key="i" :value="item">{{item.name}}</option>
+      </select>
+      <input v-else disabled class="form-control" v-model="selectedClass.name" />
+    </div>-->
+    <div class="col-md-3">
+      <select class="form-control" v-model="item.property">
+        <option v-for="(item, i) in properties" :key="i">{{item}}</option>
+      </select>
+    </div>
+    <div class="col-md-3">
+      <select class="form-control" v-model="item.format" @change="onFormatChanged">
+        <option v-for="(item, i) in formats" :key="i">{{item.displayName}}</option>
+      </select>
+    </div>
+    <div class="col-md-3">
+      <div class="btn btn-primary myBackground w-100" @click="onItemAdd()">Add</div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from "vuex";
+import Alert from "../shared/alert.vue";
+
+export default {
+  components: {
+    Alert
+  },
+  mounted() {
+    this.init();
+    this.getFormats();
+    if (this.selectedClass !== undefined) {
+      this.item.class = this.selectedClass;
+      this.getProperties(this.item.class);
+    }
+  },
+  data() {
+    return {
+      message: undefined,
+      item: {
+        name: undefined,
+        class: undefined,
+        property: undefined,
+        format: "",
+        formatTemplate: ""
+      }
+    };
+  },
+  props: {
+    canSelectClass: {
+      default: true
+    },
+    selectedClass: {
+      default: Object
+    }
+  },
+  computed: {
+    ...mapState("info", ["classes", "properties"]),
+    ...mapState("placeHolderFormat", ["formats"]),
+    SelectedClass() {
+      this.item.class = selectedClass;
+    }
+  },
+  methods: {
+    ...mapActions("info", ["init", "getClasses", "getProperties"]),
+    ...mapActions("placeHolderFormat", ["getFormats"]),
+    onClassChanged() {
+      this.getProperties(this.item.class);
+    },
+    onFormatChanged(item) {
+      let val = this.formats.find(f => f.displayName == item.target.value);
+      this.item.formatTemplate = val.format;
+    },
+    onItemAdd() {
+      this.message = undefined;
+      let msg = "";
+
+      if (this.selectedClass !== undefined) {
+        this.item.class = this.selectedClass;
+      }
+
+      if (this.item.name === undefined) {
+        msg += "Please give a name...";
+      }
+      if (this.item.class === undefined) {
+        msg += "Please choose a class...";
+      }
+      if (this.item.property === undefined) {
+        msg += "Please choose a property...";
+      }
+      if (msg.length > 0) {
+        this.message = msg;
+      } else {
+        this.$emit("onItemAdd", this.item);
+      }
+    }
+  }
+};
+</script>

src/components/marketing/landingPageWeek.vue

+<template>
+  <div>
+    <div class="row">
+      <div class="col-md-12" v-if="message !== undefined">
+        <Alert :text="message" :type="'ERROR'" />
+      </div>
+    </div>
+    <div class="container col-md-12" style="text-align:left">
+      <div class="form-group row">
+        <div class="col-md-2">
+          <label>Find Week</label>
+          <button
+            type="button"
+            class="input-group-text fa fa-search"
+            style="color: #60CBEB"
+            data-toggle="modal"
+            data-target="#myModalWeeks"
+          ></button>
+          <!-- Modal content-->
+          <div id="myModalWeeks" class="modal fade" role="dialog">
+            <div class="modal-dialog modal-lg">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal"></button>
+                </div>
+                <div padding-left="20px">
+                  <Search :name="'Timeshare'" @onSelected="onSelected" />
+                </div>
+                <div class="modal-footer">
+                  <button
+                    type="button"
+                    class="btn btn-b-n"
+                    style="width: 150px; height:40px;"
+                    data-dismiss="modal"
+                  >Close</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Modal content END-->
+        </div>
+        <div class="col-md-3">
+          <input class="form-control" type="label" disabled :value="weekUni" />
+        </div>
+        <div class="col-md-2">
+          <label>Upload Image?</label>
+          <div class="custom-control custom-switch">
+            <input
+              type="checkbox"
+              class="custom-control-input"
+              id="customSwitch1"
+              :checked="uploadImage"
+              @change="checkImage"
+            />
+            <label class="custom-control-label" for="customSwitch1">{{uploadImage ? 'Yes' : 'No'}}</label>
+          </div>
+        </div>
+        <div class="col-md-3">
+          <Images v-if="uploadImage" :allowMultiple="false" :loadedImages="LoadedImages" />
+          <input
+            v-else
+            class="form-control"
+            type="text"
+            placeholder="image url"
+            v-model="weekItem.imageUrl"
+          />
+        </div>
+        <div class="col-md-2">
+          <label>Custom Place holders</label>
+          <div class="custom-control custom-switch">
+            <input
+              type="checkbox"
+              class="custom-control-input"
+              id="customSwitch2"
+              :checked="showPlaceholder"
+              @change="ShowFields"
+            />
+            <label
+              class="custom-control-label"
+              for="customSwitch2"
+            >{{showPlaceholder ? 'Yes' : 'No'}}</label>
+          </div>
+        </div>
+      </div>
+      <hr v-if="showPlaceholder" />
+      <!-- <div class="form-group row">
+        <div class="col-md-5">
+          <button
+            type="button"
+            @click="ShowFields()"
+            class="btn btn-primary myBackground"
+          >Add Custom Place Holders</button>
+        </div>
+      </div>-->
+      <div class="form-group row">
+        <div class="col-md-12" v-if="messageCPH !== undefined">
+          <Alert :text="messageCPH" :type="'ERROR'" />
+        </div>
+      </div>
+      <div class="form-group row" v-if="showPlaceholder">
+        <div class="col-md-2">
+          <label>Place Holder</label>
+        </div>
+        <div class="col-md-3">
+          <input class="form-control" type="text" v-model="placeHolder" />
+        </div>
+        <div class="col-md-2">
+          <label>Value</label>
+        </div>
+        <div class="col-md-3">
+          <input class="form-control" type="text" v-model="value" />
+        </div>
+        <div class="col-md-2">
+          <button
+            type="button"
+            @click="AddCustomHolder()"
+            class="btn btn-primary myBackground"
+            style="width: 85px; height:40px;"
+          >Add</button>
+        </div>
+      </div>
+      <div class="form-group row" v-if="showPlaceholder">
+        <div class="col-md-12">
+          <ListView
+            :items="placeHolders"
+            :hideSearch="true"
+            :showColumnChooser="false"
+            :showNew="false"
+            :allowMultipleSelect="false"
+            :canEdit="false"
+            :deleteable="true"
+            @onDelete="onItemDelete"
+          />
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-md-1 offset-md-11">
+          <button
+            type="button"
+            @click="SaveData()"
+            class="btn btn-primary myBackground"
+            style="width: 85px; height:40px;"
+          >Add</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from "../admin/misc/carouselSearch.vue";
+import Images from "../property/propertyImage.vue";
+import { mapState, mapActions } from "vuex";
+import Alert from "../shared/alert.vue";
+import ListView from "../shared/listView.vue";
+
+export default {
+  name: "LandingPageWeek",
+  components: {
+    Search,
+    Images,
+    Alert,
+    ListView
+  },
+  data() {
+    return {
+      uploadImage: false,
+      message: undefined,
+      messageCPH: undefined,
+      weekUni: "",
+      weekItem: {
+        selectedWeek: undefined,
+        image: undefined,
+        imageUrl: undefined
+      },
+      placeHolders: [],
+      showPlaceholder: false,
+      placeHolder: undefined,
+      value: undefined
+    };
+  },
+  methods: {
+    ...mapActions("campaignItem", ["getCampaignItem"]),
+    onSelected(item) {
+      this.weekItem.selectedWeek = item[0];
+      this.weekUni = item[0].weekUni;
+    },
+    checkImage(item) {
+      this.uploadImage = !this.uploadImage;
+    },
+    ShowFields() {
+      this.showPlaceholder = !this.showPlaceholder;
+    },
+    SaveData() {
+      this.message = undefined;
+      let msg = "";
+      if (this.weekItem.selectedWeek === undefined) {
+        msg += "Please select a week. ";
+      }
+      if (
+        this.weekItem.image === undefined &&
+        this.weekItem.imageUrl === undefined
+      ) {
+        msg += "Please select an image for this week. ";
+      }
+      if (msg.length > 0) {
+        this.message = msg;
+      } else {
+        if (this.uploadImage) {
+          this.campaignItem.image = this.weekItem.image[0];
+        } else {
+          this.campaignItem.image = this.weekItem.imageUrl;
+        }
+        this.campaignItem.week = this.weekItem.selectedWeek;
+        this.campaignItem.weekId = this.weekItem.selectedWeek.id;
+
+        if (this.placeHolders.length > 0) {
+          this.campaignItem.placeHolders = this.placeHolders;
+          this.placeHolders = [];
+        }
+        this.$emit("onWeekItemAdd", this.campaignItem);
+        this.campaignItem.placeHolders = [];
+      }
+    },
+    LoadedImages(values) {
+      this.weekItem.image = values;
+    },
+    AddCustomHolder() {
+      this.messageCPH = undefined;
+      let msg = "";
+
+      if (this.placeHolder === undefined) {
+        msg += "Please enter a Place Holder name. ";
+      }
+      if (this.value === undefined) {
+        msg += "Please enter a Value. ";
+      }
+
+      if (msg.length > 0) {
+        this.messageCPH = msg;
+      } else {
+        this.placeHolders.push({
+          placeHolder: this.placeHolder,
+          value: this.value
+        });
+        this.placeHolder = undefined;
+        this.value = undefined;
+      }
+    },
+    onItemDelete(item) {
+      this.placeHolders = _.remove(this.placeHolders, x => x !== item);
+    }
+  },
+  mounted() {
+    this.getCampaignItem(this.$route.params.id);
+  },
+  computed: {
+    ...mapState("campaignItem", ["campaignItem"])
+  }
+};
+</script>
+

src/components/marketing/landingPages.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <div class="container">
+      <div class="container">
+        <br />
+        <br />
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="title-box-d">
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Landing Pages</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <listView
+        @onNew="New"
+        @onEdit="Edit"
+        :items="campaigns"
+        :editable="true"
+        :deleteable="true"
+        :displayColumns="columns"
+        :displayFormats="formats"
+        :showCustomAction="true"
+        :CustomActionHeading="'Client View'"
+        :sortKey="'startDate'"
+        @onCustomClick="ClientVue"
+        @onDelete="Delete"
+      />
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import listView from "../shared/listView.vue";
+
+export default {
+  name: "LandingPages",
+  components: {
+    listView
+  },
+  data() {
+    return {
+      columns: ["name", "startDate", "endDate", "subject"],
+      formats: ["text", "date", "date", "text"]
+    };
+  },
+  methods: {
+    ...mapActions("campaign", ["getCampaigns", "deleteCampaign"]),
+    Edit(item) {
+      this.$router.push(`/landingPage/${item.id}`);
+    },
+    Delete(item) {
+      this.deleteCampaign(item.id);
+    },
+    // Publish(item) {
+    //   this.publishProperty(item);
+    // }
+    New() {
+      this.$router.push("/landingPage/0");
+    },
+    ClientVue(item) {
+      this.$router.push(`/MarketingCampaign/${item.id}`);
+    }
+  },
+  mounted() {
+    this.getCampaigns();
+    this.$emit("setLandingPage", false);
+  },
+  computed: {
+    ...mapState("campaign", ["campaigns"])
+    // UserChanged() {
+    //   this.getProperties(Object.assign(this.user.id));
+    //   return this.user;
+    // }
+  },
+  watch: {
+    // UserChanged() {
+    //   console.log(this.user);
+    // }
+  }
+};
+</script>

src/components/property/propertyPage.vue

                         <strong>Property ID:</strong>
                         <span>{{ property.id }}</span>
                       </li>
-                      <li class="d-flex justify-content-between">
+                      <!-- Should not be visible? -->
+                      <!-- <li class="d-flex justify-content-between">
                         <strong>Status:</strong>
                         <span
                           v-if="property.status"
                         >{{ property.status.code }} - {{ property.status.description }}</span>
-                      </li>
+                      </li>-->
                       <li class="d-flex justify-content-between">
                         <strong>Address:</strong>
                         <span
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import makeOffer from '../processFlow/makeOffer.vue';
-import gallery from '../shared/gallerySlideShow.vue';
+import { mapState, mapActions } from "vuex";
+import makeOffer from "../processFlow/makeOffer.vue";
+import gallery from "../shared/gallerySlideShow.vue";
 
 export default {
-  name: 'property',
+  name: "property",
   components: {
     makeOffer,
-    gallery,
+    gallery
   },
   data() {
     return {
       index: null,
-      date: new Date(),
+      date: new Date()
     };
   },
   mounted() {
     this.mayEditProperty(this.$route.params.id);
   },
   computed: {
-    ...mapState('property', ['property', 'propertyImages']),
-    ...mapState('propertyEdit', ['mayEdit']),
+    ...mapState("property", ["property", "propertyImages"]),
+    ...mapState("propertyEdit", ["mayEdit"])
   },
   methods: {
-    ...mapActions('property', [
-      'getProperty',
-      'getPropertyImages',
-      'clearPropertyImages',
+    ...mapActions("property", [
+      "getProperty",
+      "getPropertyImages",
+      "clearPropertyImages"
     ]),
-    ...mapActions('propertyEdit', ['mayEditProperty']),
+    ...mapActions("propertyEdit", ["mayEditProperty"]),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
-      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
     },
     formatAddress(value) {
-      if (value !== '') {
+      if (value !== "") {
         return `${value}<br/>`;
       }
-      return '';
-    },
+      return "";
+    }
   },
   beforeDestroy() {
     this.clearPropertyImages();
-  },
+  }
 };
 </script>
 

src/components/shared/listView.vue

               class="btn btn-primary myBackground btn-width cursor-pointer"
               data-toggle="modal"
               data-target="#myModal"
-            >
-              Column Chooser
-            </div>
+            >Column Chooser</div>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
                 <div class="modal-dialog modal-lg">
             <div
               class="btn btn-primary myBackground btn-width cursor-pointer"
               @click="onClearSelected()"
-            >
-              Clear Selected
-            </div>
+            >Clear Selected</div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">
-              New
-            </div>
+            <div class="btn btn-primary myBackground btn-width cursor-pointer" @click="onNew()">New</div>
           </div>
         </div>
       </div>
                 :class="{ active: hover === c }"
               >
                 <div class="d-flex bd-highlight">
-                  <div v-if="displayHeaders.length === 0" class="p-2 w-100 bd-highlight">
-                    {{ column | toProper }}
-                  </div>
-                  <div v-else class="p-2 w-100 bd-highlight">
-                    {{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}
-                  </div>
+                  <div
+                    v-if="displayHeaders.length === 0"
+                    class="p-2 w-100 bd-highlight"
+                  >{{ column | toProper }}</div>
+                  <div
+                    v-else
+                    class="p-2 w-100 bd-highlight"
+                  >{{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}</div>
                   <div class="p-2 flex-shrink-1 bd-highlight">
                     <img
                       src="../../../public/img/sort-up.png"
             :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
           >
             <td v-for="(column, c) in Columns" :key="c">
-              <div v-if="displayFormats.length === 0">
-                {{ isObject(item[column]) ? item[column].display : item[column] }}
-              </div>
+              <div
+                v-if="displayFormats.length === 0"
+              >{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
-                <div v-if="item[column] !== '0001-01-01T00:00:00'">
-                  {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
-                </div>
-              </div>
-              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'">
-                {{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}
+                <div
+                  v-if="item[column] !== '0001-01-01T00:00:00'"
+                >{{ isObject(item[column]) ? item[column].display : item[column] | toDate }}</div>
               </div>
+              <div
+                v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'"
+              >{{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}</div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
                 <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
               </div>
-              <div v-else>
-                {{ isObject(item[column]) ? item[column].display : item[column] }}
-              </div>
+              <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
             </td>
             <td v-if="showCustomAction" class="my-width">
-              <button type="button" class="btn my-btn" @click="onCustomClick(item)">
-                {{ CustomActionHeading }}
-              </button>
+              <button
+                type="button"
+                class="btn my-btn"
+                @click="onCustomClick(item)"
+              >{{ CustomActionHeading }}</button>
             </td>
             <td v-if="editable" class="my-width">
               <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button>
       <div class="d-flex justify-content-between" v-if="showPager">
         <div class="p-1">
           {{
-            currentPage +
-              " / " +
-              PageCount +
-              (!hideItemCount ? " - (" + items.length + " items)" : "")
+          currentPage +
+          " / " +
+          PageCount +
+          (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
           }}
         </div>
         <div class="p-1">
 </template>
 
 <script>
-import _ from 'lodash';
-import ItemsPerPageList from '../../assets/staticData/itemsPerPage';
-import BasePagination from './basePagination.vue';
-import Alert from './alert.vue';
-import ListViewControl from './listViewControl.vue';
+import _ from "lodash";
+import ItemsPerPageList from "../../assets/staticData/itemsPerPage";
+import BasePagination from "./basePagination.vue";
+import Alert from "./alert.vue";
+import ListViewControl from "./listViewControl.vue";
 
 export default {
   components: {
     BasePagination,
     Alert,
-    ListViewControl,
+    ListViewControl
   },
   mounted() {
     try {
   },
   props: {
     compact: {
-      default: true,
+      default: true
     },
     allowSelect: {
-      default: true,
+      default: true
     },
     allowMultipleSelect: {
-      default: false,
+      default: false
     },
     hideSearch: {
-      default: false,
+      default: false
     },
     showNew: {
-      default: true,
+      default: true
     },
     items: undefined,
     editable: {
-      default: false,
+      default: false
     },
     deleteable: {
-      default: false,
+      default: false
     },
     columnCount: {
-      default: 6,
+      default: 6
     },
     showPager: {
-      default: true,
+      default: true
     },
     title: {
-      default: undefined,
+      default: undefined
     },
     sortKey: {
-      default: 'id',
+      default: "id"
     },
     hideItemCount: {
-      default: false,
+      default: false
     },
     currentPage: {
-      default: 1,
+      default: 1
     },
     bordered: {
-      default: true,
+      default: true
     },
     striped: {
-      default: true,
+      default: true
     },
     showColumnChooser: {
-      default: true,
+      default: true
     },
     displayColumns: {
-      default: [],
+      default: []
     },
     displayFormats: {
-      default: [],
+      default: []
     },
     displayHeaders: {
-      default: [],
+      default: []
     },
     showCustomAction: {
-      default: false,
+      default: false
     },
     CustomActionHeading: {
-      default: '',
+      default: ""
     },
     CustomActionCondition: {
-      default: '',
-    },
+      default: ""
+    }
   },
   data() {
     return {
       hover: -1,
       selectedItems: [],
       showControl: false,
-      sortKey: '',
+      sortKey: "",
       reverse: false,
-      searchItem: '',
+      searchItem: "",
       visibleItemsPerPageCount: 20,
       itemsPerPageList: ItemsPerPageList,
       visibleColumn: [],
-      allColumn: [],
+      allColumn: []
     };
   },
   methods: {
         for (const i in Object.keys(this.items)) {
           const item = this.items[i];
           for (const o in Object.keys(item)) {
-            if (!listAll.includes(Object.keys(item)[o]) && !Array.isArray(Object.values(item)[o])) {
+            if (
+              !listAll.includes(Object.keys(item)[o]) &&
+              !Array.isArray(Object.values(item)[o])
+            ) {
               const columnName = Object.keys(item)[o];
               if (!listAll.some(x => x.column === columnName)) {
                 listAll.push({
                   column: columnName,
-                  show: _.filter(listAll, x => x.show).length < this.columnCount,
+                  show: _.filter(listAll, x => x.show).length < this.columnCount
                 });
               }
             }
     },
     onClearSelected() {
       this.selectedItems = [];
-      this.$emit('onClearSelected');
+      this.$emit("onClearSelected");
     },
     isSelected(i) {
       const ind = this.getActualIndex(i);
       return _.some(this.selectedItems, x => x === ind);
     },
     onNew() {
-      this.$emit('onNew');
+      this.$emit("onNew");
     },
     isObject(item) {
       return !!item && item.constructor === Object;
       return !!item && item.constructor === Date;
     },
     isDecimal(item) {
-      if (!!item && item.constructor === Number && item.indexOf('.') > 0) {
+      if (!!item && item.constructor === Number && item.indexOf(".") > 0) {
         return true;
       }
       return false;
         !!item &&
         item.constructor === String &&
         item.length > 9 &&
-        item.substring(0, 9) === 'data:image'
+        item.substring(0, 9) === "data:image"
       );
     },
     onEdit(item) {
-      this.$emit('onEdit', item);
+      this.$emit("onEdit", item);
     },
     onDelete(item) {
-      this.$emit('onDelete', item);
+      this.$emit("onDelete", item);
     },
     onCustomClick(item) {
-      this.$emit('onCustomClick', item);
+      this.$emit("onCustomClick", item);
     },
     onRowClick(item, i) {
       const ind = this.getActualIndex(i);
         if (!this.allowMultipleSelect) {
           this.selectedItems = [];
         }
-        this.selectedItems.push(ind);
+        this.selectedItems.push(item);
       }
-      this.$emit('onRowClick', this.selectedItems);
+      this.$emit("onRowClick", this.selectedItems);
     },
     getActualIndex(index) {
       return (this.currentPage - 1) * this.visibleItemsPerPageCount + index;
     async pageChangeHandle(value) {
       console.log(value);
       switch (value) {
-        case 'next':
+        case "next":
           this.currentPage += 1;
           break;
-        case 'previous':
+        case "previous":
           this.currentPage -= 1;
           break;
         default:
         if (array[i] === value) return true;
       }
       return false;
-    },
+    }
   },
   computed: {
     ListWidth() {
       if (this.showControl) {
-        return 'col-md-9';
+        return "col-md-9";
       }
-      return 'col-md-12';
+      return "col-md-12";
     },
     SortDirection() {
-      return this.reverse ? 'desc' : 'asc';
+      return this.reverse ? "desc" : "asc";
     },
     PageCount() {
       return this.visibleItemsPerPageCount !== 0
       return list;
     },
     FilteredItems() {
-      const list = _.filter(this.items, item => Object.values(item).some(
-        i => JSON.stringify(i)
-          .toLowerCase()
-          .indexOf(this.searchItem.toLowerCase()) > -1,
-      ));
+      const list = _.filter(this.items, item =>
+        Object.values(item).some(
+          i =>
+            JSON.stringify(i)
+              .toLowerCase()
+              .indexOf(this.searchItem.toLowerCase()) > -1
+        )
+      );
       return _.orderBy(list, this.sortKey, this.SortDirection);
     },
     DisplayItems() {
       }
       return list.slice(startSlice, endSlice);
     },
-    GetAllColumn() {},
-  },
+    GetAllColumn() {}
+  }
 };
 </script>
 <style scoped>

src/components/shared/navBar.vue

                   @click="routerGoTo('/user/updateProfileInfo')"
                 >Update Info</a>
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/payments')">Payments</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/landingPages')"
+                >Landing Pages / Campaignes</a>
               </div>
             </li>
             <li class="nav-item dropdown" v-if="!isLoggedIn">
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import Log from '../../assets/Log';
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
 
 export default {
   computed: {
-    ...mapState('authentication', [
-      'user',
-      'flag',
-      'status',
-      'person',
-      'token',
+    ...mapState("authentication", [
+      "user",
+      "flag",
+      "status",
+      "person",
+      "token"
     ]),
     isLoggedIn() {
       console.log(Log.isLoggedIn());
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {
       return this.logout();
-    },
+    }
   },
   methods: {
-    ...mapActions('authentication', ['logout']),
+    ...mapActions("authentication", ["logout"]),
 
     routerGoTo(goTo) {
-      this.$emit('routerGoTo', goTo);
-    },
-  },
+      this.$emit("routerGoTo", goTo);
+    }
+  }
 };
 </script>
 <style scoped>

src/router/index.js

 import AlertPage from '../components/shared/alertPage.vue';
 import PropertySearchResults from '../components/property/propertySearchResults.vue';
 import Payments from '../components/financial/payments.vue';
+import LandingPages from "../components/marketing/landingPages.vue";
+import LandingPage from "../components/marketing/landingPage.vue";
+import LandingPageWeek from "../components/marketing/landingPageWeek.vue";
+import MarketingPage from "../components/marketing/clientView.vue";
+import MarketingPageExp from "../components/marketing/landingPageExpired.vue";
 
 Vue.use(Router);
 
       name: 'Payments',
       component: Payments,
     },
+    {
+      path: "/landingPages",
+      name: "LandingPages",
+      component: LandingPages
+    },
+    {
+      path: "/landingPage/:id",
+      name: "LandingPage",
+      component: LandingPage
+    },
+    {
+      path: "/landingPage/week/:id",
+      name: "LandingPageWeek",
+      component: LandingPageWeek
+    },
+    {
+      path: "/MarketingCampaign/:id",
+      name: "MarketingPage",
+      component: MarketingPage
+    },
+    {
+      path: "/CampaignExpired",
+      name: "CampaignExpired",
+      component: MarketingPageExp
+    }
   ],
 });

src/store/index.js

 import Alert from './modules/misc/alert';
 import TenderWeek from './modules/timeshare/tenderWeeks';
 import PaymentModule from './modules/financial/payment';
+import CampaignModule from "./modules/marketing/campaigns";
+import CampaignItemModule from "./modules/marketing/campaignItems";
+import PlaceHolderFormat from "./modules/misc/placeHolderFormat";
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     alert: Alert,
     tenderWeek: TenderWeek,
     payment: PaymentModule,
+    campaign: CampaignModule,
+    campaignItem: CampaignItemModule,
+    placeHolderFormat: PlaceHolderFormat
   },
 });

src/store/modules/marketing/campaignItems.js

+import axios from "axios";
+
+export default {
+    namespaced: true,
+    state: {
+        campaignItem: {}
+    },
+    mutations: {
+        setCampaignItem(state, campaignItem) {
+            state.campaignItem = campaignItem;
+        }
+    },
+    getters: {},
+    actions: {
+        getCampaignItem({ commit }, id) {
+            axios
+                .get(`/api/campaignItem/${id}`)
+                .then(result => commit("setCampaignItem", result.data))
+                .catch(console.error);
+            console.log(JSON.stringify(result.data))
+        },
+        saveCampaign({ commit }, item) {
+            axios
+                .post("/api/campaignItem", item)
+                .then(result => commit("setCampaignItem", result.data))
+                .catch(console.error);
+            console.log(JSON.stringify(item));
+        },
+        updateCampaign({ commit }, item) {
+            axios
+                .put("/api/campaignItem", item)
+                .then(result => commit("setCampaignItem", item))
+                .catch(console.error);
+        }
+    }
+};

src/store/modules/marketing/campaigns.js

+import axios from "axios";
+import { Object } from "core-js";
+
+export default {
+    namespaced: true,
+    state: {
+        campaign: Object,
+        campaigns: [],
+        campaignDTO: {},
+        campaignHtml: '',
+        campaignPlaceHolders: [],
+        campaignItems: []
+    },
+    mutations: {
+        setCampaign(state, campaign) {
+            state.campaign = campaign;
+        },
+        setCampaigns(state, campaign) {
+            state.campaigns = campaign;
+        },
+        setCampaignDTO(state, campaignDTO) {
+            state.campaignDTO = campaignDTO;
+        },
+        setCampaignItems(state, items) {
+            state.campaignItems = items;
+        },
+        setCampaignPlaceHolders(state, items) {
+            state.campaignPlaceHolders = items;
+        },
+        setCampaignsUpdate(state, item) {
+            state.campaigns.pop(state.campaigns.find(p => p.id === item.id));
+            state.campaigns.push(item);
+        },
+        removeCampaign(state, id) {
+            state.campaigns.pop(state.campaigns.find(p => p.id === id));
+        },
+        setCampaignHTML(state, campaign) {
+            state.campaignHtml = campaign;
+        }
+    },
+    getters: {},
+    actions: {
+        getCampaign({ commit }, id) {
+            axios
+                .get(`/api/campaign/${id}`)
+                .then(result => commit("setCampaign", result.data))
+                .catch(console.error);
+        },
+        getCampaignDTO({ commit }, id) {
+            axios
+                .get(`/api/campaign/GetDTO/${id}`)
+                .then(result => commit("setCampaignDTO", result.data))
+                .catch(console.error);
+        },
+        getCampaignHTML({ commit }, id) {
+            axios
+                .get(`/api/campaign/GetLandingPage/${id}`)
+                .then(result => commit("setCampaignHTML", result.data))
+                .catch(console.error);
+        },
+        getCampaignItems({ commit }, id) {
+            axios
+                .get(`/api/campaign/GetCampaignItems/${id}`)
+                .then(result => commit("setCampaignItems", result.data))
+                .catch(console.error);
+        },
+        getCampaignPlaceHolders({ commit }, id) {
+            axios
+                .get(`/api/campaign/GetCampaignPlaceHolders/${id}`)
+                .then(result => commit("setCampaignPlaceHolders", result.data))
+                .catch(console.error);
+        },
+        getCampaigns({ commit }) {
+            axios
+                .get("/api/campaign")
+                .then(result => commit("setCampaigns", result.data))
+                .catch(console.error);
+        },
+        saveCampaign({ commit }, item) {
+            axios
+                .post("/api/campaign", item)
+                .then(result => commit("setCampaignsUpdate", result.data))
+                .catch(console.error);
+        },
+        updateCampaign({ commit }, item) {
+            axios
+                .put("/api/campaign", item)
+                .then(result => commit("setCampaignsUpdate", item))
+                .catch(console.error);
+        },
+        deleteCampaign({ commit }, id) {
+            axios
+                .delete(`/api/campaign/${id}`)
+                .then(result => commit("removeCampaign", id))
+                .catch(console.error);
+        }
+    }
+};

src/store/modules/misc/placeHolderFormat.js

+import axios from 'axios';
+
+export default {
+    namespaced: true,
+    state: {
+        formats: [],
+    },
+    mutations: {
+        setFormats(state, item) {
+            state.formats = item;
+        },
+    },
+    getters: {},
+    actions: {
+        getFormats({ commit }) {
+            axios
+                .get('/api/PlaceHolderFormat')
+                .then(result => commit('setFormats', result.data))
+                .catch(console.error);
+        },
+    },
+};