Address province changes & required fields

src/components/misc/address.vue

       <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>
+          <label>Street Number *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Street Name</label>
+          <label>Street Name *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Suburb</label>
+          <label>Province *</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" />
+            <select
+              class="form-control"
+              name="propertyType"
+              id="propertyType"
+              @change="ProvinceSelected"
+              v-model="address.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-6" style="margin-bottom: 1em">
-          <label>City</label>
+          <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" />
+            <select
+              class="form-control"
+              name="propertyType"
+              id="propertyType"
+              @change="CitySelected"
+              v-model="address.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-6" style="margin-bottom: 1em">
-          <label>Province</label>
+          <label>Suburb *</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
+              class="form-control"
+              name="propertyType"
+              id="suburbselector"
+              v-model="address.suburbId"
+              @change="getPostalCode"
+            >
+              <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>
+          <label>Postal Code *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 
 export default {
+  data() {
+    return {
+      propertyType: 'Residential',
+    };
+  },
   props: {
     address: {},
   },
   computed: {
-    ...mapState('timeshare', ['regions']),
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
+  },
+  methods: {
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
+    ProvinceSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedProvince = this.provinces[
+          item.target.options.selectedIndex - 1
+        ].description;
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
+      }
+    },
+    CitySelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedCity = this.cities[
+          item.target.options.selectedIndex - 1
+        ].description;
+        this.getSuburbs(
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
+        );
+      }
+    },
+    getPostalCode(item) {
+      this.address.postalCode = this.suburbs[
+        item.target.options.selectedIndex - 1
+      ].postalCode;
+    },
+  },
+  mounted() {
+    this.getProvince();
   },
 };
 </script>

src/components/shared/bankAccount.vue

       <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>
+          <label>Bank *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="behance-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Account Number</label>
+          <label>Account Number *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="navigation-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Account Holder</label>
+          <label>Account Holder *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="person-done-outline" fill="#60CBEB"></eva-icon>

src/components/timeshare/sell/sellPage.vue

           </div>
 
           <button type="submit" class="btn btn-b-n btn-lg">Submit</button>
-
           <hr />
 
           <p>* A listing fee of R380 including VAT is payable to list your timeshare week/module on the Uni-Vate website</p>

src/components/user/timeshareIndividual.vue

       <div class="form-group row"></div>
       <div class="row" style="text-align:left">
         <div class="col-md-6">
-          <label>Name</label>
+          <label>Name *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Surname</label>
+          <label>Surname *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>ID Number</label>
+          <label>ID Number *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="archive" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Company Reg Number</label>
+          <label>Company Reg Number *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="npm-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Marital Status</label>
+          <label>Marital Status *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Email Address</label>
+          <label>Email Address *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Cell Number</label>
+          <label>Cell Number *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Landline Number</label>
+          <label>Landline Number *</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>