Timeshare changes to add

src/components/timeshare/sell/sellPage.vue

           <div class="container">
             <div class="col-md-12" style="text-align:left">
               <div class="form-group row">
+                <div class="col-md-6">
+                  <label>Region *</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>
+                    <select class="form-control" v-model="sellItem.region" @change="regionChange()">
+                      <option
+                        v-for="(region, r) in regions"
+                        :key="r"
+                        :value="region"
+                      >{{region.regionName}}</option>
+                    </select>
+                  </div>
+                </div>
                 <div class="col-md-6">
                   <label for="Resort Name">Resort Name *</label>
                   <div class="input-group mb-3">
                   </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">
                   type="number"
                   step="any"
                   name="sellingPrice"
-                  v-model="sellItem.sellingPrice"
+                  v-model="sellItem.sellPrice"
                 />
               </div>
             </div>
             </div>
           </div>
 
-          <button type="submit" class="btn btn-b-n btn-lg">Submit</button>
+          <div class="btn btn-b-n btn-lg" @click="submitSale()">Submit</div>
 
           <hr />
-          {{sellItem}}
+          <h1>{{result}}</h1>
           <hr />
 
           <p>* A listing fee of R380 including VAT is payable to list your timeshare week/module on the Uni-Vate website</p>
       'regions',
       'detailedRegion',
       'seasons',
+      'result',
       'resortBedrooms',
       'maxSleep',
       'bankedEntities',
     },
   },
   methods: {
+    submitSale() {
+      this.saveWeek(this.sellItem);
+    },
     previewFiles(event) {
       console.log(event.target.files);
     },
       this.sellItem.currentYearBanked = !this.sellItem.currentYearBanked;
     },
     resortChange() {
+      this.onResortChange({
+        resortName: this.sellItem.resort.resortName,
+        resortCode: this.sellItem.resort.resortCode,
+      });
+
       if (this.sellItem && this.sellItem.resort === 'Other') {
         this.sellItem.otherResortName = undefined;
         this.sellItem.otherResort = true;
         this.sellItem.otherResort = false;
       }
     },
-    ...mapActions('timeshare', ['initTimeshare']),
+    regionChange() {
+      this.sellItem.regionId = this.sellItem.region
+        ? this.sellItem.region.id
+        : 1;
+    },
+    ...mapActions('timeshare', ['initTimeshare', 'onResortChange', 'saveWeek']),
   },
 };
 </script>

src/store/modules/timeshare/timeshare.js

 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 import axios from 'axios';
+import _ from 'lodash';
 import MyData from '../../../assets/myData';
 import MaritalStatus from '../../../assets/staticData/maritalStatus';
 
     agencies: [],
     agents: [],
     maritalStatus: MaritalStatus,
+    result: undefined,
     sellItem: {
       referedByAgent: false,
       agentId: undefined,
       otherResort: false,
       otherResortName: undefined,
       resort: undefined,
+      resortCode: undefined,
+      resortName: undefined,
       regionId: undefined,
       season: undefined,
       module: undefined,
       originalPurchaseDate: undefined,
       arrivalDate: undefined,
       departureDate: undefined,
-      sellingPrice: undefined,
+      sellPrice: undefined,
       agentCommission: undefined,
       mandate: undefined,
       status: undefined,
     addDetailedRegion(state, detailedRegion) {
       state.detailedRegion.push(detailedRegion);
     },
+    changeResort(state, resort) {
+      for (const reg in state.detailedRegion) {
+        const region = state.detailedRegion[reg];
+        if (_.find(region.children, x => x.resortCode === resort.resortCode)) {
+          state.regionId = reg;
+          break;
+        }
+      }
+      state.sellItem.resortCode = resort.resortCode;
+      state.sellItem.resortName = resort.resortName;
+    },
+    displayResult(state, result) {
+      state.result = result;
+    },
   },
   getters: {
 
     getAgencies({
       commit,
     }) {
-      console.log(123);
       axios
         .get('/api/agency')
         .then(result => commit('setAgency', result.data))
         }
       }
     },
+    onResortChange({
+      commit,
+    }, resort) {
+      commit('changeResort', resort);
+    },
     saveWeek({
       commit,
     }, week) {
       axios
         .post('/api/timeshareweek', week)
-        .then(result => commit('addDetailedRegion', {
-          week,
+        .then(result => commit('displayResult', {
+          result,
         }))
         .catch(console.error);
     },