Added Owner to sell store

src/components/misc/address.vue

             <span class="input-group-text">
               <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="streetnumber" />
+            <input
+              class="form-control"
+              type="text"
+              name="streetnumber"
+              v-model="address.streetNumber"
+            />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="streetname" />
+            <input class="form-control" type="text" name="streetname" v-model="address.streetName" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="suburb" />
+            <input class="form-control" type="text" name="suburb" v-model="address.suburb" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="city" />
+            <input class="form-control" type="text" name="city" v-model="address.city" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="province" />
+            <input class="form-control" type="text" name="province" v-model="address.province" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="postalcode" />
+            <input class="form-control" type="text" name="postalcode" v-model="address.postalCode" />
           </div>
         </div>
       </div>
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
-
 export default {
   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
-    };
-  },
-  computed: {
-    ...mapState("registerIndividual", ["registerIndividual"]),
-
-    Header() {
-      return this.RegisterHeader
-        ? "Agency Administrator Details"
-        : "Private Individual";
-    }
+    address: {},
   },
-  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/");
-    }
-  }
 };
 </script>
 

src/components/shared/bankAccount.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div class="reg-page">
+    <div class="col-md-12" style="text-align:centre">
+      <h4>Banking Details</h4>
+      <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/shared/test.vue

+<template>
+  <div>Sataliet!!!!!!!!!!!!!</div>
+</template>
+
+<script>
+export default {
+  name: 'nasa',
+};
+</script>

src/components/timeshare/sell/sellPage.vue

                 <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
               </select>
             </div>
-            <br />
-            <br />
-            <br />
-            <DetailIndividual />
-            <Address />
+            <DetailIndividual :owner="sellItem.owner" />
+            <hr />
+            <Address :address="sellItem.owner" />
+            <hr />
+            <BankDetails :bankingDetails="sellItem.owner.bankingDetails" />
+            <hr />
           </div>
           <hr />
           <br />
   </div>
 </template>
 <script>
-import { mapState, mapActions } from "vuex";
-import DetailIndividual from "../../user/timeshareIndividual.vue";
-import Address from "../../misc/address.vue";
+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, Address },
+  name: 'TimeshareToSell',
+  components: { DetailIndividual, BankDetails, Address },
   created() {
     this.initTimeshare();
   },
   computed: {
-    ...mapState("timeshare", [
-      "resorts",
-      "regions",
-      "detailedRegion",
-      "seasons",
-      "resortBedrooms",
-      "maxSleep",
-      "bankedEntities",
-      "sellItem",
-      "agencies",
-      "agents"
+    ...mapState('timeshare', [
+      'resorts',
+      'regions',
+      'detailedRegion',
+      'seasons',
+      'resortBedrooms',
+      'maxSleep',
+      'bankedEntities',
+      'sellItem',
+      'agencies',
+      'agents',
+      'indivdual',
+      'address',
+      'bankingDetails',
     ]),
     refAgent() {
       return this.sellItem && this.sellItem.referedByAgent;
-    }
+    },
   },
   methods: {
     previewFiles(event) {
       this.sellItem.currentYearBanked = !this.sellItem.currentYearBanked;
     },
     resortChange() {
-      if (this.sellItem && this.sellItem.resort === "Other") {
+      if (this.sellItem && this.sellItem.resort === 'Other') {
         this.sellItem.otherResortName = undefined;
         this.sellItem.otherResort = true;
       } else {
         this.sellItem.otherResort = false;
       }
     },
-    ...mapActions("timeshare", ["initTimeshare"])
-  }
+    ...mapActions('timeshare', ['initTimeshare']),
+  },
 };
 </script>

src/components/user/timeshareIndividual.vue

             <span class="input-group-text">
               <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="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">
             <span class="input-group-text">
               <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="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">
             <span class="input-group-text">
               <eva-icon name="archive" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="idnumber" />
+            <input class="form-control" type="text" name="idnumber" v-model="owner.idNumber" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="npm-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="companyregnumber" />
+            <input
+              class="form-control"
+              type="text"
+              name="companyregnumber"
+              v-model="owner.companyRegNumber"
+            />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="maritalstatus" />
+            <input
+              class="form-control"
+              type="text"
+              name="maritalstatus"
+              v-model="owner.maritalstatus"
+            />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="email" v-model="registerIndividual.email" />
+            <input class="form-control" type="text" name="email" v-model="owner.email" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="cellnumber"
-              v-model="registerIndividual.cellNumber"
-            />
+            <input class="form-control" type="text" name="cellnumber" v-model="owner.cellNumber" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
             <span class="input-group-text">
               <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="landline"
-              v-model="registerIndividual.telephone"
-            />
+            <input class="form-control" type="text" name="landline" v-model="owner.telephone" />
           </div>
         </div>
       </div>
 </template>
 
 <script>
-import { mapState, mapActions } 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
-    };
-  },
-  computed: {
-    ...mapState("registerIndividual", ["registerIndividual"]),
-
-    Header() {
-      return this.RegisterHeader
-        ? "Agency Administrator Details"
-        : "Private Individual";
-    }
+    owner: {},
   },
-  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/");
-    }
-  }
 };
 </script>
 

src/store/modules/timeshare/timeshare.js

       otherResortName: undefined,
       resort: undefined,
       region: undefined,
-      owner: undefined,
       season: undefined,
       module: undefined,
       unitNumber: undefined,
       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: {