Merge

.gitignore

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

src/assets/staticData/maritalStatus.js

@@ -0,0 +1,4 @@
+const items = ['ICOP (In Community of Property)', 'OCOP (Out of Community of Property)', 'Other',
+  'Traditional Wedding', 'Single', 'Divorced', 'Widow', 'Committed Relationship', 'Partner',
+];
+export default items;

src/components/about/aboutTimeshare.vue

@@ -6,7 +6,7 @@
         <div class="col-sm-12">
           <div class="about-img-box">
             <img
-              src="img/slide-3.jpg"
+              src="img/timeshare2.jpg"
               alt="About Timeshare"
               class="img-fluid"
               style="width:800px;height:400px;"

src/components/misc/address.vue

@@ -0,0 +1,94 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <br />
+    <div class="col-md-12" style="text-align:centre">
+      <div class="myWell">
+        <h4>Address</h4>
+      </div>
+      <div class="form-group row"></div>
+      <div class="row" style="text-align:left">
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Street Number</label>
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="streetnumber"
+              v-model="address.streetNumber"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Street Name</label>
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+            </span>
+            <input class="form-control" type="text" name="streetname" v-model="address.streetName" />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Suburb</label>
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+            </span>
+            <input class="form-control" type="text" name="suburb" v-model="address.suburb" />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>City</label>
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+            </span>
+            <input class="form-control" type="text" name="city" v-model="address.city" />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Province</label>
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+            </span>
+            <select class="form-control" name="region" id="region" v-model="address.province">
+              <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
+            </select>
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Postal Code</label>
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+            </span>
+            <input class="form-control" type="text" name="postalcode" v-model="address.postalCode" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  props: {
+    address: {},
+  },
+  computed: {
+    ...mapState('timeshare', ['regions']),
+  },
+};
+</script>
+
+<style>
+.goDown {
+  margin-top: 150px;
+}
+</style>

src/components/processFlow/makeOffer.vue

@@ -0,0 +1,193 @@
+<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-6">
+            <label for="resortunit">Unit</label>
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text" style="color: #60CBEB">
+                  <b>U#</b>
+                </span>
+              </div>
+              <input
+                class="form-control"
+                type="text"
+                id="resort"
+                name="resortunit"
+                disabled
+                v-model="item.unit"
+              />
+            </div>
+          </div>
+          <div class="col-md-6">
+            <label for="resortWeek">Module / Week Number</label>
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text" style="color: #60CBEB">
+                  <b>M</b>
+                </span>
+              </div>
+              <input
+                class="form-control"
+                type="text"
+                id="week"
+                name="resortWeek"
+                disabled
+                v-model="item.module"
+              />
+            </div>
+          </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" style="color: #60CBEB">
+                <b>R</b>
+              </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" style="color: #60CBEB">
+                <b>R</b>
+              </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/property/propertyUserField.vue

@@ -2,27 +2,31 @@
   <div class="form-group row">
     <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
       <label>{{ currentField.name }}</label>
-      <input
-        v-if="currentField.type === 'number'"
-        class="form-control form-control-lg form-control-a"
-        type="number"
-        name="currentField.name"
-        id="currentField.id"
-        v-model="setFields[i]"
-        @change="UpdateSetFields(currentField, i)"
-      />
-      <input
-        v-if="currentField.type === 'text'"
-        class="form-control form-control-lg form-control-a"
-        type="text"
-        name="currentField.name"
-        id="currentField.id"
-        v-model="setFields[i]"
-        @change="UpdateSetFields(currentField, i)"
-      />
-      <div v-if="currentField.type === 'yesno'">
+      <div class="input-group-prepend">
+        <span class="input-group-text" style="color: #60CBEB">
+          <b>{{ GetFirstLetter(currentField.name) }}</b>
+        </span>
+        <input
+          v-if="currentField.type === 'number'"
+          class="form-control"
+          type="number"
+          name="currentField.name"
+          id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        />
+        <input
+          v-if="currentField.type === 'text'"
+          class="form-control"
+          type="text"
+          name="currentField.name"
+          id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        />
         <select
-          class="form-control form-control-lg form-control-a"
+          v-if="currentField.type === 'yesno'"
+          class="form-control"
           id="currentField.id"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
@@ -54,6 +58,19 @@ export default {
       };
       this.$emit('UpdateUserDefinedFields', item);
     },
+    GetFirstLetter(value) {
+      if (value) {
+        return value.slice(0, 1);
+      }
+      return '';
+    },
   },
+  // Testing editing
+  // created() {
+  //   this.setFields = [];
+  //   for (let i = 0; i < this.fields.length; i++) {
+  //     this.setFields[i] = this.fields[i].value;
+  //   }
+  // },
 };
 </script>

src/components/property/propertyeditPage.vue

@@ -27,138 +27,170 @@
         </div>
       </div>
       <div class="row mb-3">
-        <div class="container col-md-10">
+        <div class="container col-md-10" style="text-align:left">
           <form id="mainForm">
             <div class="form-group row">
               <div class="col-md-4">
                 <label>Property Type</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="propertyType"
-                  v-model="property.propertyTypeId"
-                >
-                  <option value="0">Please select type</option>
-                  <option
-                    v-for="item in propertyTypes"
-                    :value="item.id"
-                    :key="item.id"
-                  >{{ item.description }}</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>T</b>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    v-model="property.propertyTypeId"
+                  >
+                    <option value="0">Please select type</option>
+                    <option
+                      v-for="item in propertyTypes"
+                      :value="item.id"
+                      :key="item.id"
+                    >{{ item.description }}</option>
+                  </select>
+                </div>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="propertyName"
-                  id="propertyName"
-                  v-model="property.propertyName"
-                />
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>N</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="propertyName"
+                    id="propertyName"
+                    v-model="property.propertyName"
+                  />
+                </div>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Unit</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="unit"
-                  id="unit"
-                  v-model="property.unit"
-                />
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>U#</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="unit"
+                    id="unit"
+                    v-model="property.unit"
+                  />
+                </div>
               </div>
             </div>
             <div class="form-group row">
-              <div class="col-md-4">
-                <label>Address Line 1</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="address1"
-                  placeholder="Apartment, suite, unit, building, floor, Po Box etc."
-                  style="font-size: 50%"
-                  id="address1"
-                  v-model="property.addressLine1"
-                />
-              </div>
-              <div class="col-md-4">
-                <label>Address Line 2</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="address2"
-                  placeholder="Complex, estate, company name, etc."
-                  style="font-size: 50%"
-                  id="address2"
-                  v-model="property.addressLine2"
-                />
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Street Number</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="streetnumber"
+                    v-model="property.addressLine1"
+                  />
+                </div>
               </div>
-              <div class="col-md-4">
-                <label>Street</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="address3"
-                  placeholder="Street or c/o name"
-                  style="font-size: 50%"
-                  id="address3"
-                  v-model="property.addressLine3"
-                />
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Street Name</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="streetname"
+                    id="streetname"
+                    v-model="property.addressLine2"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="form-group row">
-              <div class="col-md-4">
+              <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Province</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="propertyType"
-                  @change="ProvinceSelected"
-                  v-model="property.provinceId"
-                >
-                  <option value="0">Please select province</option>
-                  <option
-                    v-for="province in provinces"
-                    :value="province.id"
-                    :key="province.id"
-                  >{{ province.description }}</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    @change="ProvinceSelected"
+                    v-model="property.provinceId"
+                  >
+                    <option value="0">Please select province</option>
+                    <option
+                      v-for="province in provinces"
+                      :value="province.id"
+                      :key="province.id"
+                    >{{ province.description }}</option>
+                  </select>
+                </div>
               </div>
-              <div class="col-md-4">
+
+              <div class="col-md-6" style="margin-bottom: 1em">
                 <label>City</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="propertyType"
-                  @change="CitySelected"
-                  v-model="property.cityId"
-                >
-                  <option value="0">Please select city</option>
-                  <option
-                    v-for="city in cities"
-                    :value="city.id"
-                    :key="city.id"
-                  >{{ city.description }}</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    @change="CitySelected"
+                    v-model="property.cityId"
+                  >
+                    <option value="0">Please select city</option>
+                    <option
+                      v-for="city in cities"
+                      :value="city.id"
+                      :key="city.id"
+                    >{{ city.description }}</option>
+                  </select>
+                </div>
               </div>
-              <div class="col-md-4">
+              <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Suburb</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="suburbselector"
-                  v-model="property.suburbId"
-                >
-                  <option value="0">Please select suburb</option>
-                  <option
-                    v-for="suburb in suburbs"
-                    :value="suburb.id"
-                    :key="suburb.id"
-                  >{{ suburb.description }}</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="suburbselector"
+                    v-model="property.suburbId"
+                  >
+                    <option value="0">Please select suburb</option>
+                    <option
+                      v-for="suburb in suburbs"
+                      :value="suburb.id"
+                      :key="suburb.id"
+                    >{{ suburb.description }}</option>
+                  </select>
+                </div>
+              </div>
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Postal Code</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input class="form-control" type="text" name="postalcode" />
+                </div>
               </div>
             </div>
+
             <div class="form-group row">
-              <div class="col-md-4">
+              <div class="col-md-6">
                 <label v-if="salesType === 'Rental'">Rental Price</label>
                 <label v-if="salesType !== 'Rental'">Sales Price</label>
                 <div class="input-group-prepend">
@@ -175,18 +207,23 @@
                   />
                 </div>
               </div>
-              <div class="col-md-4" v-if="salesType === 'Rental'">
+              <div class="col-md-6" v-if="salesType === 'Rental'">
                 <label>Per</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="propertyType"
-                  v-model="property.pricePer"
-                >
-                  <option value>Please select</option>
-                  <option value="Month">Month</option>
-                  <option value="Day">Day</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>D/M</b>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    v-model="property.pricePer"
+                  >
+                    <option value>Please select</option>
+                    <option value="Month">Month</option>
+                    <option value="Day">Day</option>
+                  </select>
+                </div>
               </div>
             </div>
             <div class="form-group row">

src/components/shared/bankAccount.vue

@@ -0,0 +1,69 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <br />
+    <div class="col-md-12" style="text-align:centre">
+      <div class="myWell">
+        <h4>Banking Details</h4>
+      </div>
+      <div class="form-group row"></div>
+      <div class="row" style="text-align:left">
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Bank</label>
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="behance-outline" fill="#60CBEB"></eva-icon>
+            </span>
+            <input class="form-control" type="text" name="bank" v-model="bankingDetails.bank" />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Account Number</label>
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="navigation-outline" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="accountnumber"
+              v-model="bankingDetails.accountNumber"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Account Holder</label>
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="person-done-outline" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="accountholder"
+              v-model="bankingDetails.accountHolder"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    bankingDetails: {
+      bank: undefined,
+      accountNumber: undefined,
+      accountHolder: undefined,
+    },
+  },
+};
+</script>
+
+<style>
+.goDown {
+  margin-top: 150px;
+}
+</style>

src/components/timeshare/buy/buyPage.vue

@@ -6,7 +6,7 @@
         <div class="col-sm-12">
           <div class="tobuy-img-box">
             <img
-              src="img/Monateng_Safari_Lodge1.jpg"
+              src="img/buy.jpg"
               alt="Timeshare To Buy"
               class="img-fluid"
               style="width:800px;height:400px;"

src/components/timeshare/resort/resortPage.vue

@@ -1,177 +1,160 @@
 <template>
-  <div>
-    <section>
-      <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" style="text-align:left;">{{resort.prName}}</h1>
-              </div>
-            </div>
+  <!-- eslint-disable max-len -->
+  <section>
+    <div class="container intro-single">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="title-single-box">
+            <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
           </div>
+          <br />
         </div>
-      </section>
-      <div class="myMargin">
-        <div class="row">
-          <div class="col-md-3">
-            <h3>Filter Resort</h3>
-            <form
-              id="mainForm"
-              method="POST"
-              action="/filter"
-              accept-charset="UTF-8"
-              enctype="multipart/form-data"
-            >
-              <div class="form-group">
-                <select class="form-control" name="region" id="region">
-                  <option value>Region</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <select class="form-control" id="resort" name="resort">
-                  <option value>Resort</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <select class="form-control" name="season">
-                  <option value>
-                    <span style="color:white;">Season</span>
-                  </option>
-                </select>
-              </div>
-              <div class="form-group">
-                <select class="form-control" name="bedrooms">
-                  <option value>Bedrooms</option>
-                </select>
-              </div>
-
-              <div class="form-group">
-                <input
-                  class="form-control"
-                  type="number"
-                  step="any"
-                  id="minPrice"
-                  name="minPrice"
-                  placeholder="Minimum Price"
-                />
-              </div>
-              <div class="form-group">
-                <input
-                  class="form-control"
-                  type="number"
-                  step="any"
-                  id="maxPrice"
-                  name="maxPrice"
-                  placeholder="Maximum Price"
-                />
-              </div>
-              <div class="form-group">
-                <label>Filter Arrival Date From</label>
-                <input type="date" class="form-control" name="arrivaldate" value />
-              </div>
-              <div class="form-group">
-                <label>Filter Arrival Date To</label>
-                <input type="date" class="form-control" name="arrivaldate" value />
-              </div>
-
-              <br />
+        <div class="row mb-4">
+          <div class="col-md-4">
+            <img class="img-fluid" :src="image1" alt="Resort Image" />
+          </div>
+          <div class="col-md-4">
+            <img class="img-fluid" :src="image2" alt="Resort Image" />
+          </div>
+          <div class="col-md-4">
+            <img class="img-fluid" :src="image3" alt="Resort Image" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="myMargin">
+      <div class="row">
+        <div class="col-md-3">
+          <h3>Filter Resort</h3>
+          <form
+            id="mainForm"
+            method="POST"
+            action="/filter"
+            accept-charset="UTF-8"
+            enctype="multipart/form-data"
+          >
+            <div class="form-group">
+              <select class="form-control" name="season">
+                <option value>
+                  <span style="color:white;">Season</span>
+                </option>
+              </select>
+            </div>
+            <div class="form-group">
+              <select class="form-control" name="bedrooms">
+                <option value>Bedrooms</option>
+              </select>
+            </div>
 
-              <button class="btn btn-b-n" type="submit">Search</button>
-            </form>
-            <div class="col-md-12 blue-bg p-2 p-md-4">
-              <h3>Facilities</h3>
-              <ul>
-                <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
-              </ul>
+            <div class="form-group">
+              <input
+                class="form-control"
+                type="number"
+                step="any"
+                id="minPrice"
+                name="minPrice"
+                placeholder="Minimum Price"
+              />
             </div>
-          </div>
-          <div class="col-md-9">
-            <WeekList :resortCode="resortCode" />
-            <div>
-              <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
-              <hr />
+            <div class="form-group">
+              <input
+                class="form-control"
+                type="number"
+                step="any"
+                id="maxPrice"
+                name="maxPrice"
+                placeholder="Maximum Price"
+              />
             </div>
-            {{description}}
-            <hr />
-            <div class="row mb-4">
-              <div class="col-md-4">
-                <img class="img-fluid" :src="image1" alt="Resort Image" />
-              </div>
-              <div class="col-md-4">
-                <img class="img-fluid" :src="image2" alt="Resort Image" />
-              </div>
-              <div class="col-md-4">
-                <img class="img-fluid" :src="image3" alt="Resort Image" />
-              </div>
+            <div class="form-group">
+              <label>Filter Arrival Date From</label>
+              <input type="date" class="form-control" name="arrivaldate" value />
             </div>
-            <div class="row">
-              <div class="col-md-12 mb-4">
-                <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"
-                    >Directions</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"
-                    >Resort Layout</a>
-                  </li>
-                </ul>
-                <div class="tab-content" id="myTabContent">
-                  <div
-                    class="tab-pane fade show active"
-                    id="directions"
-                    role="tabpanel"
-                    aria-labelledby="directions-tab"
-                  >
-                    <iframe
-                      :src="mapUrl"
-                      width="100%"
-                      height="450"
-                      frameborder="0"
-                      style="border:0"
-                      allowfullscreen
-                    ></iframe>
-                    <br />
+            <div class="form-group">
+              <label>Filter Arrival Date To</label>
+              <input type="date" class="form-control" name="arrivaldate" value />
+            </div>
+
+            <br />
 
-                    <small>
-                      <a
-                        :href="mapUrl"
-                        style="color:#60CBEB;text-align:left"
-                        target="_blank"
-                      >See map bigger</a>
-                    </small>
-                  </div>
-                  <div
-                    class="tab-pane fade"
-                    id="resort-layout"
-                    role="tabpanel"
-                    aria-labelledby="resort-layout-tab"
-                  >
-                    <img class="img-fluid" :src="layout" alt="Resort Layout" />
-                  </div>
+            <button class="btn btn-b-n" type="submit">Search</button>
+          </form>
+        </div>
+        <div class="col-md-9">
+          <WeekList :resortCode="resortCode" />
+          <div>
+            <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
+            <hr />
+          </div>
+          {{description}}
+          <hr />
+
+          <div class="row">
+            <div class="col-md-10 mb-4">
+              <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"
+                  >Directions</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"
+                  >Resort Layout</a>
+                </li>
+              </ul>
+              <div class="tab-content" id="myTabContent">
+                <div
+                  class="tab-pane fade show active"
+                  id="directions"
+                  role="tabpanel"
+                  aria-labelledby="directions-tab"
+                >
+                  <iframe
+                    :src="mapUrl"
+                    width="100%"
+                    height="450"
+                    frameborder="0"
+                    style="border:0"
+                    allowfullscreen
+                  ></iframe>
+                  <br />
+
+                  <small>
+                    <a
+                      :href="mapUrl"
+                      style="color:#60CBEB;text-align:left"
+                      target="_blank"
+                    >See map bigger</a>
+                  </small>
+                </div>
+                <div
+                  class="tab-pane fade"
+                  id="resort-layout"
+                  role="tabpanel"
+                  aria-labelledby="resort-layout-tab"
+                >
+                  <img class="img-fluid" :src="layout" alt="Resort Layout" />
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';

src/components/timeshare/resort/unitPage.vue

@@ -1,20 +1,46 @@
 <template>
-  <section>
-    <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" style="text-align:left;">{{resort.prName}}</h1>
-            </div>
-          </div>
+  <!-- eslint-disable max-len -->
+  <div class="container">
+    <br />
+    <br />
+    <br />
+    <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;">{{resort.prName}}</h1>
         </div>
+        <br />
       </div>
-    </section>
-    <div class="container">
       <div class="row mb-4">
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image1" alt="Resort Image" />
+        </div>
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image2" alt="Resort Image" />
+        </div>
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image3" alt="Resort Image" />
+        </div>
+      </div>
+    </div>
+    <br />
+    <div class="container col-md-12" style="text-align:left;">
+      <div class="row">
         <div class="col-md-6">
+          <div class="title-box-d">
+            <h3 class="title-d">Property Description</h3>
+          </div>
           <p>{{description}}</p>
+          <div>
+            <div class="title-box-d">
+              <h3 class="title-d">Facilities</h3>
+            </div>
+            <ul v-if="resort.prUnitFacilities">
+              <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
+            </ul>
+          </div>
         </div>
         <div class="col-md-6">
           <form
@@ -24,124 +50,163 @@
             accept-charset="UTF-8"
             enctype="multipart/form-data"
           >
+            <div class="title-box-d">
+              <h3 class="title-d">Summary</h3>
+            </div>
             <div class="form-row">
               <div class="col-md-6">
                 <label for="resortunit">Unit</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="resort"
-                  name="resortunit"
-                  :value="week.unit"
-                  disabled
-                />
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>U#</b>
+                    </span>
+                  </div>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="resort"
+                    name="resortunit"
+                    :value="week.unit"
+                    disabled
+                  />
+                </div>
               </div>
               <div class="col-md-6">
-                <label for="resortWeek">Week</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="week"
-                  name="resortWeek"
-                  :value="week.week"
-                  disabled
-                />
+                <label for="resortWeek">Module / Week Number</label>
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>M</b>
+                    </span>
+                  </div>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="week"
+                    name="resortWeek"
+                    :value="week.module"
+                    disabled
+                  />
+                </div>
               </div>
-            </div>
-            <br />
-            <div class="form-row">
+
               <div class="col-md-6">
-                <label for="resortModule">Module</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="module"
-                  name="resortModule"
-                  :value="week.module"
-                  disabled
-                />
+                <label for="resortModule">Current Year Levy</label>
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text" style="color: #60CBEB">
+                      <b>R</b>
+                    </span>
+                  </div>
+                  <input
+                    class="form-control"
+                    type="text"
+                    id="levy"
+                    name="levy"
+                    :value="formatPrice(week.currentLevy)"
+                    disabled
+                  />
+                </div>
               </div>
               <div class="col-md-6">
                 <label for="price">Price</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="price"
-                  id="price"
-                  :value="'R ' + week.price"
-                  disabled
-                />
-              </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-6">
-                <label for="resortModule">Current Year Levy</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="levy"
-                  name="levy"
-                  :value="'R ' + week.currentLevy"
-                  disabled
-                />
-              </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-12">
-                <input class="form-control" type="text" name="name" placeholder="Name" />
-              </div>
-            </div>
-            <br />
-            <div class="form-row">
-              <div class="col-md-12">
-                <input
-                  class="form-control"
-                  type="number"
-                  name="mobile"
-                  placeholder="Contact Number"
-                />
+                <div class="property-price d-flex justify-content-center foo">
+                  <div class="card-header-c d-flex">
+                    <div class="card-box-ico">
+                      <span class="ion-money">R</span>
+                    </div>
+                    <div class="card-title-c align-self-center">
+                      <h5 class="title-c">{{ formatPrice(week.price) }}</h5>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
             <br />
             <div class="form-row">
-              <div class="col-md-12">
-                <input class="form-control" type="email" name="email" placeholder="Email" />
+              <div>
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <input class="form-control" type="text" name="name" placeholder="Name" />
+                  </div>
+                </div>
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <input
+                      class="form-control"
+                      type="number"
+                      name="mobile"
+                      placeholder="Contact Number"
+                    />
+                  </div>
+                </div>
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <input class="form-control" type="email" name="email" placeholder="Email" />
+                  </div>
+                </div>
               </div>
             </div>
-            <br />
+          </form>
+          <br />
 
-            <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
+          <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>
-        </div>
-      </div>
-      <div class="row mb-4">
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image1" alt="Resort Image" />
-        </div>
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image2" alt="Resort Image" />
-        </div>
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image3" alt="Resort Image" />
+          <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
         </div>
       </div>
     </div>
-  </section>
+  </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import makeOffer from '../../processFlow/makeOffer.vue';
 
 export default {
+  name: 'unit',
+  components: {
+    makeOffer,
+  },
   props: {
     resortCode: {},
     weekId: {},
@@ -163,6 +228,13 @@ export default {
   methods: {
     ...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, ' ');
+      }
+      return '';
+    },
   },
 };
 </script>

src/components/timeshare/sell/sellPage.vue

@@ -6,7 +6,7 @@
         <div class="col-sm-12">
           <div class="about-img-box">
             <img
-              src="img/sell.jpg"
+              src="img/sell2.jpg"
               alt="Timeshare To Sell"
               class="img-fluid"
               style="width:800px;height:400px;"
@@ -21,17 +21,22 @@
         </div>
         <br />
         <div>
-          <div style="float: right;" class="btn btn-link color-b">
-            <router-link to="LinkToBeSelected">
-              Bulk Weeks Upload
-              <span class="ion-ios-arrow-forward" style="color:#60CBEB"></span>
-            </router-link>
+          <div class="container col-md-10">
+            <div class="myWell">
+              <h4>Week Information</h4>
+            </div>
+            <div style="float: right;" class="btn btn-link color-b">
+              <router-link to="LinkToBeSelected">
+                Bulk Weeks Upload
+                <span class="ion-ios-arrow-forward" style="color:#60CBEB"></span>
+              </router-link>
+            </div>
           </div>
+          <br />
+          <br />
+          <p>* You need to be logged in to submit your listing. Please register and log in if you have not done so already.</p>
+          <hr />
         </div>
-        <br />
-        <br />
-        <p>* You need to be logged in to submit your listing. Please register and log in if you have not done so already.</p>
-        <hr />
       </div>
     </div>
     <div class="row mb-4">
@@ -81,123 +86,220 @@
               </select>
             </div>
           </div>
-
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Resort Name">Resort Name</label>
-              <select
-                class="form-control"
-                id="resort"
-                name="resort"
-                v-model="sellItem.resort"
-                @change="resortChange()"
-              >
-                <option value="Other">Other</option>
-                <option
-                  v-for="(resort, r) in resorts"
-                  :key="r"
-                  :value="resort"
-                >{{resort.resortName}}</option>
-              </select>
-            </div>
-            <div class="col-md-6">
-              <label for="* If other" v-if="sellItem.otherResort">Name of resort</label>
-              <input
-                class="form-control"
-                v-if="sellItem.otherResort"
-                placeholder="* If other"
-                type="text"
-                name="other"
-                v-model="sellItem.otherResortName"
-              />
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Region">Region</label>
-              <select class="form-control" name="region" id="region" v-model="sellItem.region">
-                <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
-              </select>
-            </div>
-            <div class="col-md-6">
-              <label for="Season">Season</label>
-              <select class="form-control" name="season" v-model="sellItem.season">
-                <option v-for="(season, r) in seasons" :key="r">{{season.name}}</option>
-              </select>
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Module">Module</label>
-              <input class="form-control" type="text" name="module" v-model="sellItem.module" />
-            </div>
-            <div class="col-md-6">
-              <label for="Week number">Week Number</label>
-              <input class="form-control" type="text" name="week" v-model="sellItem.weekNumber" />
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Bedrooms">Bedrooms</label>
-              <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
-                <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
-              </select>
-            </div>
-            <div class="col-md-6">
-              <label for="Sleeps maximum">Sleeps maximum</label>
-              <select class="form-control" name="sleeps" v-model="sellItem.maxSleep">
-                <option v-for="(item, i) in maxSleep" :key="i">{{item}}</option>
-              </select>
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Unit number">Unit Number</label>
-              <input class="form-control" type="text" name="unit" v-model="sellItem.unitNumber" />
-            </div>
-            <div class="col-md-6">
-              <label for="Owner">Owner</label>
-              <input class="form-control" type="text" name="owner" v-model="sellItem.owner" />
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Levy">Levy Amount</label>
-              <input
-                class="form-control"
-                type="number"
-                step="any"
-                name="levy"
-                v-model="sellItem.levyAmount"
-              />
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <p>Has your week been spacebanked for the current year?</p>
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  type="radio"
-                  name="spacebankedyear"
-                  id="spacebankedyearyes"
-                  value="Yes"
-                  @change="changeCurrentBanked"
-                  :checked="sellItem.currentYearBanked"
-                />
-                <label class="form-check-label" for="spacebankedyearyes">Yes</label>
+          <div class="container">
+            <div class="col-md-12" style="text-align:left">
+              <div class="form-group row">
+                <div class="col-md-6">
+                  <label for="Resort Name">Resort Name</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>RN</b>
+                      </span>
+                    </div>
+                    <select
+                      class="form-control"
+                      id="resort"
+                      name="resort"
+                      v-model="sellItem.resort"
+                      @change="resortChange()"
+                    >
+                      <option value="Other">Other</option>
+                      <option
+                        v-for="(resort, r) in resorts"
+                        :key="r"
+                        :value="resort"
+                      >{{resort.resortName}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label for="* If other" v-if="sellItem.otherResort">Name of resort</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span
+                        class="input-group-text"
+                        style="color: #60CBEB"
+                        v-if="sellItem.otherResort"
+                      >
+                        <b>RN</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      v-if="sellItem.otherResort"
+                      placeholder="* If other"
+                      type="text"
+                      name="other"
+                      v-model="sellItem.otherResortName"
+                    />
+                  </div>
+                  <label for="Region" v-if="sellItem.otherResort">Province</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span
+                        class="input-group-text"
+                        style="color: #60CBEB"
+                        v-if="sellItem.otherResort"
+                      >
+                        <b>P</b>
+                      </span>
+                    </div>
+                    <select
+                      class="form-control"
+                      v-if="sellItem.otherResort"
+                      name="region"
+                      id="region"
+                      v-model="sellItem.region"
+                    >
+                      <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
+                    </select>
+                  </div>
+                </div>
               </div>
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  type="radio"
-                  name="spacebankedyear"
-                  id="spacebankedyearno"
-                  value="No"
-                  :checked="!sellItem.currentYearBanked"
-                  @change="changeCurrentBanked"
-                />
-                <label class="form-check-label" for="spacebankedyearno">No</label>
+              <div class="form-group row">
+                <div class="col-md-6">
+                  <label for="Unit number">Unit Number</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>U#</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      name="unit"
+                      v-model="sellItem.unitNumber"
+                    />
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label for="Module">Module / Week Number</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>M</b>
+                      </span>
+                    </div>
+                    <input class="form-control" type="text" name="module" v-model="sellItem.module" />
+                  </div>
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-6">
+                  <label for="Season">Season</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>S</b>
+                      </span>
+                    </div>
+                    <select class="form-control" name="season" v-model="sellItem.season">
+                      <option v-for="(season, r) in seasons" :key="r">{{season.name}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label for="Bedrooms">Bedrooms</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>Bed</b>
+                      </span>
+                    </div>
+                    <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
+                      <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label for="Sleeps maximum">Sleep max</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>Max</b>
+                      </span>
+                    </div>
+                    <select class="form-control" name="sleeps" v-model="sellItem.maxSleep">
+                      <option v-for="(item, i) in maxSleep" :key="i">{{item}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label for="Levy">Levy Amount</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>R</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="number"
+                      step="any"
+                      name="levy"
+                      v-model="sellItem.levyAmount"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-12">
+                  <label for="Owner">Owner</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>O</b>
+                      </span>
+                    </div>
+                    <input class="form-control" type="text" name="owner" v-model="sellItem.owner" />
+                  </div>
+                </div>
+              </div>
+
+              <div class="form-group row">
+                <div class="col-md-6">
+                  <p>Has your week been spacebanked for the current year?</p>
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      name="spacebankedyear"
+                      id="spacebankedyearyes"
+                      value="Yes"
+                      @change="changeCurrentBanked"
+                      :checked="sellItem.currentYearBanked"
+                    />
+                    <label class="form-check-label" for="spacebankedyearyes">Yes</label>
+                  </div>
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      name="spacebankedyear"
+                      id="spacebankedyearno"
+                      value="No"
+                      :checked="!sellItem.currentYearBanked"
+                      @change="changeCurrentBanked"
+                    />
+                    <label class="form-check-label" for="spacebankedyearno">No</label>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label
+                    for="If yes, please confirm with whom"
+                    v-if="sellItem.currentYearBanked"
+                  >Please confirm with whom</label>
+                  <select
+                    class="form-control"
+                    name="spacebankOwner"
+                    v-if="sellItem.currentYearBanked"
+                    v-model="sellItem.bankedWith"
+                  >
+                    <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
+                  </select>
+                </div>
               </div>
             </div>
             <div class="col-md-6">
@@ -213,25 +315,28 @@
               >
                 <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
               </select>
-              <br />
-              <br />
-              <br />
             </div>
-            <DetailIndividual />
+            <DetailIndividual :owner="sellItem.owner" />
+            <hr />
+            <Address :address="sellItem.owner" />
+            <hr />
+            <BankDetails :bankingDetails="sellItem.owner.bankingDetails" />
+            <hr />
           </div>
           <hr />
           <br />
-          <h3>Share transfer information</h3>
+          <div class="myWell">
+            <h4>Share transfer information</h4>
+          </div>
           <br />
           <tr>
             <td>1. With respect to my timeshare module/week, I confirm that:</td>
           </tr>
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.1 All levy amounts for the current cycle have been paid in full</label>
             <div class="col-md-4">
               <div class="form-check form-check-inline">
@@ -261,11 +366,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.2 My week is placed for rental this year</label>
             <div class="col-md-4">
               <div class="form-check form-check-inline">
@@ -295,11 +399,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.3 I/We bought the timeshare module/week on the following date:</label>
             <div class="col-md-4">
               <input
@@ -313,11 +416,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.4 The purchase price for which I/we bought timeshare module/week was:</label>
             <div class="col-md-4">
               <div class="input-group mb-3">
@@ -339,11 +441,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.5 I/We bought the timeshare module/week for the following dates for the current year:</label>
             <div class="col-md-4">
               Arrival Date :
@@ -365,11 +466,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.6 The selling price for the timeshare module/week for which I/we want to sell is: (Including Vat)</label>
             <div class="col-md-4">
               <div class="input-group mb-3">
@@ -391,11 +491,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.7 Estate agent’s commission agreed to (state Rand value)</label>
             <div class="col-md-4">
               <div class="input-group mb-3">
@@ -417,12 +516,8 @@
 
           <hr />
 
-          <div class="form-group row">
-            <label
-              for="name"
-              class="col-form-label col-md-8"
-              align="left"
-            >1.8 Mandate to sell timeshare</label>
+          <div class="form-group row" style="text-align:left">
+            <label for="name" class="col-form-label col-md-8">1.8 Mandate to sell timeshare</label>
             <div class="col-md-4">
               <input class="btn btn-b-n" type="file" name="mandate" />
             </div>
@@ -447,10 +542,12 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import DetailIndividual from '../../user/timeshareIndividual.vue';
+import BankDetails from '../../shared/bankAccount.vue';
+import Address from '../../misc/address.vue';
 
 export default {
   name: 'TimeshareToSell',
-  components: { DetailIndividual },
+  components: { DetailIndividual, BankDetails, Address },
   created() {
     this.initTimeshare();
   },
@@ -503,3 +600,12 @@ export default {
   },
 };
 </script>
+<style>
+.myWell {
+  width: 100%;
+  background-color: #60cbeb;
+  border-radius: 6px;
+  padding: 5px;
+  margin: 3px;
+}
+</style>

src/components/user/loginPage.vue

@@ -12,7 +12,7 @@
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                   </span>
                   <input
                     class="form-control"
@@ -26,7 +26,7 @@
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                   </span>
                   <input
                     class="form-control"
@@ -41,11 +41,11 @@
                     <span class="input-group-text">
                       <eva-icon
                         v-if="!showPassword"
-                        name="eye-off"
+                        name="eye-off-outline"
                         fill="#60CBEB"
                         @click="togglePassword()"
                       ></eva-icon>
-                      <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                      <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
                     </span>
                   </div>
                 </div>
@@ -65,7 +65,7 @@
             <div class="row">
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="email" fill="#60CBEB"></eva-icon>
+                  <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
                 </span>
                 <input class="form-control" placeholder="Your Email" type="text" name="email" value />
               </div>

src/components/user/registerAgencySection.vue

@@ -6,51 +6,51 @@
         <div class="regform" style="text-align:left">
           <h4>Agency Details</h4>
           <div class="row">
-          <div class="row" style="text-align:left">
-            <div class="col-md-8" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="people" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="agencyname"
-                  placeholder="Agency Name"
-                  v-model="registerAgency.name"
-                />
+            <div class="row" style="text-align:left">
+              <div class="col-md-8" style="margin-bottom: 1em">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="agencyname"
+                    placeholder="Agency Name"
+                    v-model="registerAgency.name"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="col-md-8" style="margin-bottom: 1em">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="book" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="eaabffcnumber"
-                  placeholder="EAAB FFC Number"
-                  v-model="registerAgency.eaabeffcNumber"
-                />
+              <div class="col-md-8" style="margin-bottom: 1em">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="eaabffcnumber"
+                    placeholder="EAAB FFC Number"
+                    v-model="registerAgency.eaabeffcNumber"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="col-md-8">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="clipboard" fill="#60CBEB"></eva-icon>
-                </span>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="companyregnumber"
-                  placeholder="Company Registration Number"
-                  v-model="registerAgency.companyRegNumber"
-                />
+              <div class="col-md-8">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="clipboard-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="companyregnumber"
+                    placeholder="Company Registration Number"
+                    v-model="registerAgency.companyRegNumber"
+                  />
+                </div>
               </div>
             </div>
           </div>
-          </div>
           <hr />
           <div class="col-md-10" style="text-align:left">
             <h5 style="margin-bottom: 1em">Agency Administrator</h5>
@@ -58,7 +58,7 @@
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                   </span>
                   <input
                     class="form-control"
@@ -73,7 +73,7 @@
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                   </span>
                   <input
                     class="form-control"
@@ -90,7 +90,7 @@
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="email" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
                   </span>
                   <input
                     class="form-control"
@@ -105,7 +105,7 @@
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
                   </span>
                   <input
                     class="form-control"
@@ -136,7 +136,7 @@
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                   </span>
                   <input
                     class="form-control"
@@ -150,7 +150,7 @@
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                   </span>
                   <input
                     class="form-control"
@@ -166,7 +166,7 @@
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
-                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                   </span>
                   <input
                     class="form-control"
@@ -183,11 +183,11 @@
                   <span class="input-group-text">
                     <eva-icon
                       v-if="!showPassword"
-                      name="eye-off"
+                      name="eye-off-outline"
                       fill="#60CBEB"
                       @click="togglePassword()"
                     ></eva-icon>
-                    <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                    <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
                   </span>
                 </div>
               </div>

src/components/user/registerPage.vue

@@ -83,7 +83,7 @@
             <div class="col-md-8" style="margin-bottom: 1em">
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                  <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                 </span>
                 <input
                   class="form-control"
@@ -97,7 +97,7 @@
             <div class="col-md-8" style="margin-bottom: 1em">
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                  <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                 </span>
                 <input
                   class="form-control"
@@ -113,7 +113,7 @@
             <div class="col-md-8" style="margin-bottom: 1em">
               <div class="input-group-prepend">
                 <span class="input-group-text">
-                  <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                  <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                 </span>
                 <input
                   class="form-control"
@@ -129,11 +129,11 @@
                     <span class="input-group-text">
                       <eva-icon
                         v-if="!showPassword"
-                        name="eye-off"
+                        name="eye-off-outline"
                         fill="#60CBEB"
                         @click="togglePassword()"
                       ></eva-icon>
-                      <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                      <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
                     </span>
                   </div>
                 </div>

src/components/user/timeshareIndividual.vue

@@ -1,128 +1,91 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div class="reg-page">
+  <div>
     <hr />
-    <div class="form-group row"></div>
-    <div class="col-md-12" style="text-align:left">
-      <h4>Detailed Individual Information</h4>
+    <br />
+    <div class="col-md-12" style="text-align:centre">
+      <div class="myWell">
+        <h4>Detailed Individual Information</h4>
+      </div>
       <div class="form-group row"></div>
       <div class="row" style="text-align:left">
         <div class="col-md-6">
+          <label>Name</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="person" fill="#60CBEB"></eva-icon>
+              <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="name"
-              placeholder="Name"
-              v-model="registerIndividual.name"
-            />
+            <input class="form-control" type="text" name="name" v-model="owner.name" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Surname</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="book" fill="#60CBEB"></eva-icon>
+              <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="surname"
-              placeholder="Surname"
-              v-model="registerIndividual.surname"
-            />
+            <input class="form-control" type="text" name="surname" v-model="owner.surname" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>ID Number</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="archive" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="idnumber" placeholder="ID Number" />
+            <input class="form-control" type="text" name="idnumber" v-model="owner.idNumber" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Company Reg Number</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="npm" fill="#60CBEB"></eva-icon>
+              <eva-icon name="npm-outline" fill="#60CBEB"></eva-icon>
             </span>
             <input
               class="form-control"
               type="text"
               name="companyregnumber"
-              placeholder="Company Reg Number"
-            />
-          </div>
-        </div>
-        <div class="col-md-6" style="margin-bottom: 1em">
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="people" fill="#60CBEB"></eva-icon>
-            </span>
-            <input
-              class="form-control"
-              type="text"
-              name="maritalstatus"
-              placeholder="Marital Status"
+              v-model="owner.companyRegNumber"
             />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Marital Status</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="email" fill="#60CBEB"></eva-icon>
+              <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="email"
-              placeholder="Email Address"
-              v-model="registerIndividual.email"
-            />
+            <select class="form-control" name="maritalstatus" v-model="owner.maritalstatus">
+              <option v-for="(item, i) in maritalStatus" :key="i">{{item}}</option>
+            </select>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Email Address</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
+              <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="cellnumber"
-              placeholder="Cellphone Number"
-              v-model="registerIndividual.cellNumber"
-            />
+            <input class="form-control" type="text" name="email" v-model="owner.email" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Cell Number</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="phone" fill="#60CBEB"></eva-icon>
+              <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="landline"
-              placeholder="Landline Number"
-              v-model="registerIndividual.telephone"
-            />
+            <input class="form-control" type="text" name="cellnumber" v-model="owner.cellNumber" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Landline Number</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="home" fill="#60CBEB"></eva-icon>
+              <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="address"
-              placeholder="Address"
-              v-model="registerIndividual.telephone"
-            />
+            <input class="form-control" type="text" name="landline" v-model="owner.telephone" />
           </div>
         </div>
       </div>
@@ -131,58 +94,15 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState } from 'vuex';
 
 export default {
+  component: {},
   props: {
-    RegisterHeader: { type: String, default: undefined },
-  },
-  name: 'PrivateIndividual',
-  data() {
-    return {
-      user: null,
-      isPasswordShown: 'password',
-      selectItems: [{ text: 'password', value: 0 }],
-      selectErrors: 'Some error with the field',
-      select: null,
-      textErrors: 'Some error with the field',
-      text: '',
-      showPassword: false,
-    };
+    owner: {},
   },
   computed: {
-    ...mapState('registerIndividual', ['registerIndividual']),
-
-    Header() {
-      return this.RegisterHeader
-        ? 'Agency Administrator Details'
-        : 'Private Individual';
-    },
-  },
-  methods: {
-    ...mapActions('registerIndividual', [
-      'getIndividual',
-      'saveIndividual',
-      'updateIndividual',
-      'clearIndividual',
-    ]),
-
-    togglePassword() {
-      this.showPassword = true;
-      this.isPasswordShown = 'text';
-    },
-    passwordToggled() {
-      this.showPassword = false;
-      this.isPasswordShown = 'password';
-    },
-    SubmitData() {
-      this.saveIndividual(this.registerIndividual);
-
-      this.$router.push('/registerIndividual/');
-    },
-    Close() {
-      this.$router.push('/registerIndividual/');
-    },
+    ...mapState('timeshare', ['maritalStatus']),
   },
 };
 </script>

src/router/index.js

@@ -37,6 +37,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({
@@ -198,10 +201,19 @@ export default new Router({
     props: true,
   },
   {
-    path: '/timeshare/search',
+    path: '/MakeOffer',
+    name: 'MakeOffer',
+    component: MakeOffer,
+  },
+  {
+    path: '/Offers',
+    name: 'Offers',
+    component: Offer,
+  },
+  {
+    path: 'timeshare/search',
     name: 'TimeshareSearch',
     component: TimeshareSearch,
-    props: true,
   },
   ],
 });

src/store/modules/timeshare/timeshare.js

@@ -2,6 +2,7 @@
 /* eslint-disable no-restricted-syntax */
 import axios from 'axios';
 import MyData from '../../../assets/myData';
+import MaritalStatus from '../../../assets/staticData/maritalStatus';
 
 export default {
   namespaced: true,
@@ -15,6 +16,7 @@ export default {
     bankedEntities: [],
     agencies: [],
     agents: [],
+    maritalStatus: MaritalStatus,
     sellItem: {
       referedByAgent: false,
       agent: undefined,
@@ -23,7 +25,6 @@ export default {
       otherResortName: undefined,
       resort: undefined,
       region: undefined,
-      owner: undefined,
       season: undefined,
       module: undefined,
       unitNumber: undefined,
@@ -43,6 +44,29 @@ export default {
       agentCommission: undefined,
       mandate: undefined,
       status: undefined,
+      owner: {
+        name: undefined,
+        surname: undefined,
+        idNumber: undefined,
+        companyRegNumber: undefined,
+        maritalStatus: undefined,
+        emailAddress: undefined,
+        cellNumber: undefined,
+        landlineNumber: undefined,
+        address: {
+          streetNumber: undefined,
+          streetName: undefined,
+          suburb: undefined,
+          city: undefined,
+          province: undefined,
+          postalCode: undefined,
+        },
+        bankingDetails: {
+          bank: undefined,
+          accountNumber: undefined,
+          accountHolder: undefined,
+        },
+      },
     },
   },
   mutations: {

vue.config.js

@@ -2,7 +2,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target: 'http://localhost:57260',
+        target: 'http://192.168.6.188:5000',
         changeOrigin: true,
       },
     },