Add Consent to Timeshare Buy

src/components/processFlow/makeOffer.vue

 <template>
   <!-- eslint-disable max-len -->
-  <div style="padding-left:30px; padding-right:30px; padding-bottom:30px;">
+  <div style="padding-left: 30px; padding-right: 30px; padding-bottom: 30px;">
     <div v-if="!isLoggedIn">
       <div class="container col-md-10">
         <p class="alert myError">Please Login to add a property</p>
       <button
         type="button"
         class="btn btn-b-n"
-        style="width: 150px; height:40px;"
+        style="width: 150px; height: 40px;"
         data-dismiss="modal"
       >
         OK
         <br />
         <div v-if="isProperty">
           <div class="form-group row">
-            <div style="text-align:left">
+            <div style="text-align: left;">
               <div class="title-box-d">
                 <h3 class="title-d">{{ item.shortDescription }}</h3>
               </div>
             </div>
           </div>
           <div class="form-group row">
-            <div class="col-md-12" style="text-align:left">
+            <div class="col-md-12" style="text-align: left;">
               <div v-html="item.description"></div>
             </div>
           </div>
         </div>
         <div v-if="!isProperty">
           <div class="form-group row">
-            <div style="text-align:left">
+            <div style="text-align: left;">
               <div class="intro-content">
-                <h2>{{ item.resort.resortName ? item.resort.resortName : item.resort }}</h2>
+                <h2>
+                  {{
+                    item.resort.resortName
+                      ? item.resort.resortName
+                      : item.resort
+                  }}
+                </h2>
               </div>
             </div>
           </div>
             ></textarea>
           </div>
         </div>
+        <div align="left" class="custom-control custom-switch mb-2">
+          <div class="row">
+            <div align="center" class="col">
+              <label class="mr-5">
+                I wish to receive future listings and special campaigns?
+              </label>
+              <input
+                type="checkbox"
+                class="custom-control-input"
+                id="customSwitch1"
+                :checked="item.consent"
+                @change="changeConsent"
+              />
+              <label class="custom-control-label" for="customSwitch1">
+                {{ item.consent ? 'Yes' : 'No' }}
+              </label>
+            </div>
+          </div>
+        </div>
         <div class="form-group row">
           <div class="col-md-12">
             <p>
-              *Occupation for the current year is not guaranteed, Uni-Vate Properties will confirm
-              upon reply.
+              *Occupation for the current year is not guaranteed, Uni-Vate
+              Properties will confirm upon reply.
             </p>
           </div>
         </div>
       <div v-if="!isSaved" class="container">
         <div class="row">
           <div algin="center" class="col">
-            <button v-if="isMakeOffer" type="button" @click="SendOffer()" class="btn-solid-blue">
+            <button
+              v-if="isMakeOffer"
+              type="button"
+              @click="SendOffer()"
+              class="btn-white-border"
+            >
               Send Offer
             </button>
             <button
               type="submit"
               @click="Accept()"
               class="btn btn-b-n"
-              style="width: 150px; height:40px;"
+              style="width: 150px; height: 40px;"
             >
               Accept
             </button>
               type="button"
               @click="Decline()"
               class="btn btn-b-n"
-              style="width: 150px; height:40px;"
+              style="width: 150px; height: 40px;"
             >
               Decline
             </button>
         type="button"
         @click="Complete()"
         class="btn btn-b-n"
-        style="width: 150px; height:40px;"
+        style="width: 150px; height: 40px;"
       >
         Complete
       </button>
         <div class="form-group row">
           <br />
           <div class="container col-md-10">
-            <p :class="[isInfo ? 'alert myInfo' : 'alert myWarning']">{{ message }}</p>
+            <p :class="[isInfo ? 'alert myInfo' : 'alert myWarning']">
+              {{ message }}
+            </p>
           </div>
         </div>
         <button
           v-if="isSaved"
           type="button"
           class="btn btn-b-n"
-          style="width: 150px; height:40px;"
+          style="width: 150px; height: 40px;"
           data-dismiss="modal"
         >
           OK
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import Log from "../../assets/Log";
+import { mapState, mapActions } from 'vuex'
+import Log from '../../assets/Log'
 
 export default {
-  name: "MakeOffer",
+  name: 'MakeOffer',
   props: {
     isMakeOffer: Boolean,
     isProperty: Boolean,
     canEdit: Boolean,
     item: Object,
     bidId: Number,
-    updateItem: Function
+    updateItem: Function,
   },
   data() {
     return {
       isDecline: false,
       isSaved: false,
-      message: "",
+      message: '',
       isInfo: true,
-      isLoggedIn: Log.isLoggedIn()
-    };
+      isLoggedIn: Log.isLoggedIn(),
+    }
   },
   methods: {
-    ...mapActions("bid", ["getTemplate", "saveBid", "acceptBid", "declineBid"]),
+    ...mapActions('bid', ['getTemplate', 'saveBid', 'acceptBid', 'declineBid']),
     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;
+      this.bidItem.id = 0
+      this.bidItem.userId = this.item.userId
+      this.bidItem.amount = this.item.offer
+      this.bidItem.comment = this.item.comment
+      this.bidItem.consent = this.item.consent
       if (this.isProperty) {
-        this.bidItem.propertyId = this.item.id;
+        this.bidItem.propertyId = this.item.id
       } else {
-        this.bidItem.timeshareWeekId = this.item.id;
+        this.bidItem.timeshareWeekId = this.item.id
         if (this.item.isTender) {
-          this.bidItem.tenderWeek = this.item;
+          this.bidItem.tenderWeek = this.item
         }
       }
-      this.saveBid(this.bidItem);
+      this.saveBid(this.bidItem)
 
-      this.isSaved = true;
-      this.isInfo = true;
-      this.message = "Offer was submitted.";
+      this.isSaved = true
+      this.isInfo = true
+      this.message = 'Offer was submitted.'
+    },
+    changeConsent() {
+      this.item.consent = !this.item.consent
     },
     Accept() {
-      this.acceptBid(this.item.id);
-      this.isSaved = true;
-      this.message = "Offer Accepted.";
-      this.isInfo = true;
+      this.acceptBid(this.item.id)
+      this.isSaved = true
+      this.message = 'Offer Accepted.'
+      this.isInfo = true
     },
     Decline() {
-      this.isDecline = true;
+      this.isDecline = true
     },
     Complete() {
-      this.isDecline = false;
+      this.isDecline = false
 
       const decline = {
         id: this.item.id,
-        comment: this.item.declineReason
-      };
+        comment: this.item.declineReason,
+      }
 
-      this.declineBid(decline);
-      this.isSaved = true;
-      this.message = "Offer Declined.";
-      this.isInfo = false;
-    }
+      this.declineBid(decline)
+      this.isSaved = true
+      this.message = 'Offer Declined.'
+      this.isInfo = false
+    },
   },
   computed: {
-    ...mapState("bid", ["bidItem"])
+    ...mapState('bid', ['bidItem']),
+  },
+  created() {
+    this.item.consent = true
   },
   mounted() {
-    this.getTemplate();
+    this.getTemplate()
   },
   watch: {
     item() {
-      this.isSaved = false;
-      this.canEdit = this.item.statusCode === "E1";
-    }
-  }
-};
+      this.isSaved = false
+      this.canEdit = this.item.statusCode === 'E1'
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/timeshare/buy/weekListComponent.vue

             <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>
               <button
                 :disabled="checkStatus(item)"
                 v-on:click="View(item)"
-                :class="checkStatus(item) ? 'btn-disabled' : 'btn-solid-blue'"
-                style="color: white"
+                :class="checkStatus(item) ? 'btn-disabled' : 'btn-white-border'"
+                style="color: white;"
               >
                 Yes
               </button>
           </select>
         </div>
         <div class="col-md-10 mt-4">
-          <div style="float: right">
+          <div style="float: right;">
             <BasePagination
               :currentPage="currentPage"
               :pageCount="PageCount"
             class="img-fluid"
             src="/img/kloader.gif"
             alt="UVProp logo"
-            style="width: 128px; height: 128px"
+            style="width: 128px; height: 128px;"
           />
         </div>
         <div v-else>No Results Found</div>
 
 <script>
 /* eslint-disable */
-import BasePagination from "../../shared/basePagination";
-import { mapState, mapActions, mapGetters } from "vuex";
+import BasePagination from '../../shared/basePagination'
+import { mapState, mapActions, mapGetters } from 'vuex'
 
 export default {
   props: {
     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"]),
+    ...mapState('weekList', ['weeks', 'status']),
     ...mapGetters({
-      filteredWeeks: "weekList/filteredWeeks",
-      getRegions: "weekList/getRegions"
+      filteredWeeks: 'weekList/filteredWeeks',
+      getRegions: 'weekList/getRegions',
     }),
     DisplayItems() {
-      const list = [];
-      this.filteredWeeks.forEach(week => {
+      const list = []
+      this.filteredWeeks.forEach((week) => {
         if (week.publish) {
-          list.push(week);
+          list.push(week)
         }
-      });
+      })
 
-      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
-      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
+      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount
+      let endSlice = this.currentPage * this.visibleItemsPerPageCount
       if (endSlice > list.length) {
-        endSlice = list.length;
+        endSlice = list.length
       }
-      return list.slice(startSlice, endSlice);
+      return list.slice(startSlice, endSlice)
     },
     PageCount() {
-      var list = [];
-      this.filteredWeeks.forEach(week => {
+      var list = []
+      this.filteredWeeks.forEach((week) => {
         if (!week.isTender) {
-          list.push(week);
+          list.push(week)
         }
-      });
+      })
       return this.visibleItemsPerPageCount !== 0
         ? Math.ceil(list.length / this.visibleItemsPerPageCount)
-        : 1;
-    }
+        : 1
+    },
   },
   mounted() {
     //if (this.resortCode) {
     //  this.applyResortFilter(this.resortCode);
     //}
-    this.getByResortCode(this.$route.params.resortCode);
+    this.getByResortCode(this.$route.params.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}`);
+      this.$router.push(`/resort/${item.resort.resortCode}/${item.unitNumber}`)
     },
     onChangeItemsPerPage() {
       if (this.currentPage !== 1) {
-        this.currentPage = 1;
+        this.currentPage = 1
       }
     },
     async pageChangeHandle(value) {
       switch (value) {
-        case "next":
-          this.currentPage += 1;
-          break;
-        case "previous":
-          this.currentPage -= 1;
-          break;
+        case 'next':
+          this.currentPage += 1
+          break
+        case 'previous':
+          this.currentPage -= 1
+          break
         default:
-          this.currentPage = value;
+          this.currentPage = value
       }
     },
     checkStatus(item) {
-      if (item.status.code === "CIP" || item.status.code === "S" || item.status.code === "P") {
-        return true;
+      if (
+        item.status.code === 'CIP' ||
+        item.status.code === 'S' ||
+        item.status.code === 'P'
+      ) {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
 .btn-disabled {
-  font-family: "Muli";
+  font-family: 'Muli';
   font-size: 15px;
   letter-spacing: 1px;
   display: inline-block;

src/components/timeshare/resort/contentSection.vue

     <div class="container">
       <div class="row" id="resort-profile">
         <div class="col-md-3">
-          <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
+          <img
+            src="img/listings/property1/property1-gallery.jpg"
+            class="img-fluid"
+            alt
+          />
           <div class="row no-gutters">
             <div class="col-6">
-              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
+              <img
+                src="img/listings/property1/property1-gallery.jpg"
+                class="img-fluid"
+                alt
+              />
             </div>
             <div class="col-6">
-              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
+              <img
+                src="img/listings/property1/property1-gallery.jpg"
+                class="img-fluid"
+                alt
+              />
             </div>
           </div>
           <gallerySection :images="images" />
               id="gmap_canvas"
               :src="
                 'https://maps.google.com/maps?q=' +
-                  resort.prLatitude +
-                  ',' +
-                  resort.prLongitude +
-                  '&hl=en&z=14&amp;output=embed'
+                resort.prLatitude +
+                ',' +
+                resort.prLongitude +
+                '&hl=en&z=14&amp;output=embed'
               "
               frameborder="0"
               scrolling="no"
 <script>
 /* eslint-disable */
 
-import { mapState, mapActions } from "vuex";
-import WeekList from "../buy/weekListComponent.vue";
-import FilterComponent from "../searchTimeshare.vue";
-import ResortImages from "./resortImage.vue";
-import gallerySection from "./gallerySection";
+import { mapState, mapActions } from 'vuex'
+import WeekList from '../buy/weekListComponent.vue'
+import FilterComponent from '../searchTimeshare.vue'
+import ResortImages from './resortImage.vue'
+import gallerySection from './gallerySection'
 
 export default {
   props: {
-    resortCode: {}
+    resortCode: {},
   },
   components: {
     WeekList,
     FilterComponent,
     ResortImages,
-    gallerySection
+    gallerySection,
   },
   // async mounted() {
   //   await this.initResort(this.resortCode);
   data() {
     return {
       index: null,
-      boolLoaded: false
-    };
+      boolLoaded: false,
+    }
   },
   computed: {
-    ...mapState("resort", ["resort", "description", "images", "layout"]),
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
     mapUrl() {
-      console.log(this.resort.prLatitude);
+      console.log(this.resort.prLatitude)
 
       return this.resort
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
-        : "";
-    }
+        : ''
+    },
   },
   methods: {
-    ...mapActions("resort", ["GetResortData"]),
+    ...mapActions('resort', ['GetResortData']),
     routerGoTo(goto) {
-      this.$router.push(goto);
-    }
-  }
-};
+      this.$router.push(goto)
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>

src/components/timeshare/resort/resortPageNew.vue

             <div class="col">
               <router-link
                 style="float: right;"
-                class="btn-solid-blue mb-4"
+                class="btn-white-border mb-4"
                 to="/timeshare/buy"
               >
-                BACK
+                Back
               </router-link>
             </div>
           </div>

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

     <div class="row">
       <div class="col">
         <div class="section-header">
-          <h2>{{ week ? week.resort.resortName : "" }}</h2>
+          <h2>{{ week ? week.resort.resortName : '' }}</h2>
         </div>
       </div>
     </div>
       </div>
       <div class="col-md-12 col-lg-8 summarySection">
         <h4>
-          Unit {{ week ? week.unitNumber : "" }} |
-          {{ week ? week.bedrooms : "" }} Bedroom/{{
-            week ? week.maxSleep : ""
+          Unit {{ week ? week.unitNumber : '' }} |
+          {{ week ? week.bedrooms : '' }} Bedroom/{{
+            week ? week.maxSleep : ''
           }}
           Sleeper
         </h4>
-        <p style="text-align: left">Reference: #{{ week.id }}</p>
+        <p style="text-align: left;">Reference: #{{ week.id }}</p>
         <table class="table table-striped">
           <thead>
             <tr>
           </thead>
           <tbody>
             <tr>
-              <td>{{ week ? week.unitNumber : "" }}</td>
-              <td>{{ week ? week.weekNumber : "" }}</td>
+              <td>{{ week ? week.unitNumber : '' }}</td>
+              <td>{{ week ? week.weekNumber : '' }}</td>
               <td
                 v-if="
                   week.arrivalDate === '0001-01-01T00:00:00' ||
                 "
               ></td>
               <td v-else>{{ week.arrivalDate | toDate }}</td>
-              <td>{{ week ? week.bedrooms : "" }}</td>
-              <td>{{ week ? week.season : "" }}</td>
-              <td>{{ week ? week.levyAmount : "" | toCurrency }}</td>
-              <td>{{ week ? week.sellPrice : "" | toCurrency }}</td>
+              <td>{{ week ? week.bedrooms : '' }}</td>
+              <td>{{ week ? week.season : '' }}</td>
+              <td>{{ week ? week.levyAmount : '' | toCurrency }}</td>
+              <td>{{ week ? week.sellPrice : '' | toCurrency }}</td>
             </tr>
           </tbody>
         </table>
 
         <div class="row mt-5">
           <div align="center" class="col-md-6">
-            <a href="javascript:history.back()" class="btn-white-border"
-              >Back</a
-            >
+            <a href="javascript:history.back()" class="btn-white-border">
+              Back
+            </a>
           </div>
           <div align="center" class="col-md-6">
             <button
-              class="btn-solid-blue"
-              style="color: white"
+              class="btn-white-border"
+              style="color: white;"
               data-toggle="modal"
               data-target="#myModal"
             >
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions, mapGetters } from "vuex";
-import makeOffer from "../../../processFlow/makeOffer.vue";
-import gallerySection from "../gallerySection";
+import { mapState, mapActions, mapGetters } from 'vuex'
+import makeOffer from '../../../processFlow/makeOffer.vue'
+import gallerySection from '../gallerySection'
 export default {
   components: {
     makeOffer,
     gallerySection,
   },
   computed: {
-    ...mapState("resort", ["resort", "description", "images", "layout"]),
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
 
     ...mapGetters({
-      weekById: "weekList/weekById",
+      weekById: 'weekList/weekById',
     }),
     week() {
-      return this.weekById(this.resortCode, this.unitNumber);
+      return this.weekById(this.resortCode, this.unitNumber)
     },
     // ...mapState('week', ['currentWeek']),
   },
     unitNumber: {},
   },
   methods: {
-    ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
-    ...mapActions("resort", ["initResort"]),
+    ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),
+    ...mapActions('resort', ['initResort']),
     // ...mapActions('week', ['initWeek']),
     formatPrice(value) {
       if (value) {
-        const val = (value / 1).toFixed(2);
-        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+        const val = (value / 1).toFixed(2)
+        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
       }
-      return "";
+      return ''
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>