Bid Offer screens

.gitignore

@@ -19,3 +19,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+vue.config.js
+.gitignore

src/components/processFlow/makeOffer.vue

@@ -0,0 +1,186 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div style="padding-left:50px; padding-right:50px; padding-bottom:50px;">
+    <div>
+      <br />
+      <div v-if="isProperty">
+        <div class="form-group row">
+          <div class="col-md-6">
+            <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 v-html="item.description"></div>
+          </div>
+        </div>
+      </div>
+      <div v-if="!isProperty">
+        <div class="form-group row">
+          <div class="col-md-6 col-lg-5 section-md-t3">
+            <div class="title-box-d">
+              <h3 class="title-d">{{ item.resort }}</h3>
+            </div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <div class="col-md-4">
+            <label for="resortunit">Unit</label>
+            <input
+              class="form-control"
+              type="text"
+              id="resort"
+              name="resortunit"
+              disabled
+              v-model="item.unit"
+            />
+          </div>
+          <div class="col-md-4">
+            <label for="resortWeek">Week</label>
+            <input
+              class="form-control"
+              type="text"
+              id="week"
+              name="resortWeek"
+              disabled
+              v-model="item.week"
+            />
+          </div>
+          <div class="col-md-4">
+            <label for="resortModule">Module</label>
+            <input
+              class="form-control"
+              type="text"
+              id="module"
+              name="resortModule"
+              disabled
+              v-model="item.module"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-md-6">
+          <label>Current Price</label>
+          <div class="input-group mb-3">
+            <div class="input-group-prepend">
+              <span class="input-group-text">R</span>
+            </div>
+            <input class="form-control" type="number" v-model="item.price" disabled />
+          </div>
+        </div>
+        <div class="col-md-6">
+          <label>Offer</label>
+          <div class="input-group mb-3">
+            <div class="input-group-prepend">
+              <span class="input-group-text">R</span>
+            </div>
+            <input
+              class="form-control"
+              type="number"
+              step="any"
+              id="minPrice"
+              name="minPrice"
+              v-model="item.offer"
+              :disabled="!isMakeOffer"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-md-12">
+          <label>Comments</label>
+          <textarea
+            class="form-control editor form-control-lg form-control-a"
+            name="description"
+            v-model="item.comments"
+            :disabled="!isMakeOffer"
+          ></textarea>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <button
+        v-if="isMakeOffer"
+        type="button"
+        @click="SendOffer()"
+        class="btn btn-b-n"
+        style="width: 150px; height:40px;"
+        data-dismiss="modal"
+      >Send Offer</button>
+      <button
+        v-if="!isMakeOffer && !isDecline"
+        type="submit"
+        @click="Accept()"
+        class="btn btn-b-n"
+        style="width: 150px; height:40px;"
+        data-dismiss="modal"
+      >Accept</button>
+      <button
+        v-if="!isMakeOffer && !isDecline"
+        type="button"
+        @click="Decline()"
+        class="btn btn-b-n"
+        style="width: 150px; height:40px;"
+      >Decline</button>
+      <div v-if="isDecline" class="form-group row">
+        <div class="col-md-12">
+          <br />
+          <label>Decline Reason</label>
+          <textarea class="form-control editor form-control-lg form-control-a" name="description"></textarea>
+        </div>
+      </div>
+      <button
+        v-if="isDecline"
+        type="button"
+        @click="Complete()"
+        class="btn btn-b-n"
+        style="width: 150px; height:40px;"
+        data-dismiss="modal"
+      >Complete</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MakeOffer',
+  props: {
+    isMakeOffer: Boolean,
+    isProperty: Boolean,
+    item: Object,
+  },
+  data() {
+    return {
+      isDecline: false,
+    };
+  },
+  methods: {
+    SendOffer() {
+      // Save Offer data
+    },
+    Accept() {
+      // Accept Offer
+    },
+    Decline() {
+      this.isDecline = true;
+    },
+    Complete() {
+      this.isDecline = false;
+    },
+    Close() {},
+  },
+};
+</script>
+
+<style scoped>
+.myWell {
+  width: 100%;
+  background-color: rgba(217, 217, 217, 0.85);
+  border-radius: 6px;
+  padding: 5px;
+  margin: 3px;
+}
+</style>

src/components/processFlow/offers.vue

@@ -0,0 +1,109 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <div class="container">
+      <section class="intro-single">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 col-lg-8">
+              <div class="title-single-box">
+                <h1 class="title-single">Bid Offers</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+    <div class="container">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Description</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in items" :key="i">
+            <td v-if="item.isProperty">Property</td>
+            <td v-else>Timeshare</td>
+            <td>{{ item.uid }}</td>
+            <td>
+              <button
+                type="button"
+                class="btn btn-b-n"
+                data-toggle="modal"
+                :data-target="'#myModal' + i"
+              >View</button>
+              <div :id="'myModal' + i" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <!-- Modal content-->
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <div padding-left="20px">
+                      <makeOffer
+                        name="MakeOffer"
+                        :isMakeOffer="false"
+                        :isProperty="item.isProperty"
+                        :item="item"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import makeOffer from './makeOffer.vue';
+
+export default {
+  name: 'offers',
+  components: { makeOffer },
+  data() {
+    return {
+      item: {},
+      items: [
+        {
+          isProperty: true,
+          uid: '1 - 2 Bedroom House',
+          id: 1,
+          shortDescription: '2 Bedroom House',
+          description: '<div><i>Property Description</i></div>',
+          price: 1000,
+          offer: 1500,
+          comments: 'Bla Bla Bla',
+        },
+        {
+          isProperty: false,
+          uid: 'NL N18 359',
+          id: 2,
+          shortDescription: '',
+          description: '',
+          price: 85000,
+          offer: 90000,
+          comments: 'I want to go....',
+          resort: 'Ngwenya Lodge',
+          unit: '359',
+          week: 'N18',
+          module: '359/N18 River View',
+        },
+      ],
+    };
+  },
+  //   methods: {
+  //     SetItem(data) {
+  //       this.item = data;
+  //       const element = this.$refs.modal.$el;
+  //       $(element).modal('show');
+  //     },
+  //   },
+};
+</script>

src/components/property/propertyPage.vue

@@ -96,6 +96,32 @@
                     </ul>
                   </div>
                 </div>
+                <div class="col-md-12">
+                  <button
+                    type="button"
+                    class="btn btn-b-n"
+                    data-toggle="modal"
+                    data-target="#myModal"
+                  >Make an Offer</button>
+                  <div id="myModal" class="modal fade" role="dialog">
+                    <div class="modal-dialog modal-lg">
+                      <!-- Modal content-->
+                      <div class="modal-content">
+                        <div class="modal-header">
+                          <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        </div>
+                        <div padding-left="20px">
+                          <makeOffer
+                            name="MakeOffer"
+                            :isMakeOffer="true"
+                            :isProperty="true"
+                            :item="{id: property.id, shortDescription: property.shortDescription, description: property.description, price: property.price}"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                 <div class="col-md-12">
                   <div class="row section-t3">
                     <div class="col-sm-12">
@@ -229,11 +255,13 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import lightBox from '../shared/lightBoxGallery.vue';
+import makeOffer from '../processFlow/makeOffer.vue';
 
 export default {
   name: 'property',
   components: {
     lightBox,
+    makeOffer,
   },
   data() {
     return {};

src/components/timeshare/resort/unitPage.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable max-len -->
   <section>
     <section class="intro-single">
       <div class="container">
@@ -114,10 +115,34 @@
 
             <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
 
-            <a
+            <!-- <a
               class="btn btn-b-n even-width mr-auto"
               href="/share-transfer-initiation-for-purchaser/"
-            >Make an Offer</a>
+            >Make an Offer</a>-->
+            <button
+              type="button"
+              class="btn btn-b-n even-width mr-auto"
+              data-toggle="modal"
+              data-target="#myModal"
+            >Make an Offer</button>
+            <div id="myModal" class="modal fade" role="dialog">
+              <div class="modal-dialog modal-lg">
+                <!-- Modal content-->
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  </div>
+                  <div padding-left="20px">
+                    <makeOffer
+                      name="MakeOffer"
+                      :isMakeOffer="true"
+                      :isProperty="false"
+                      :item="{resort: resort.prName, unit: week.unit, week: week.week, module: week.module, price: week.price}"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
 
             <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
           </form>
@@ -140,8 +165,13 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import makeOffer from '../../processFlow/makeOffer.vue';
 
 export default {
+  name: 'unit',
+  components: {
+    makeOffer,
+  },
   props: {
     resortCode: {},
     weekId: {},

src/router/index.js

@@ -36,6 +36,9 @@ import UnitPage from '../components/timeshare/resort/unitPage.vue';
 import ContactUs from '../components/misc/contactUs.vue';
 import PrivacyPolicy from '../components/misc/privacyPolicyPage.vue';
 
+import MakeOffer from '../components/processFlow/makeOffer.vue';
+import Offer from '../components/processFlow/offers.vue';
+
 Vue.use(Router);
 
 export default new Router({
@@ -197,5 +200,15 @@ export default new Router({
       component: UnitPage,
       props: true,
     },
+    {
+      path: '/MakeOffer',
+      name: 'MakeOffer',
+      component: MakeOffer,
+    },
+    {
+      path: '/Offers',
+      name: 'Offers',
+      component: Offer,
+    },
   ],
 });