UnivateProperties/src/components/timeshare/sell/sellPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="col-sm-12">
          <div class="about-img-box">
            <img
              src="img/sell3.jpg"
              alt="Timeshare To Sell"
              class="img-fluid"
              style="width:800px;height:400px; border-radius:10px"
            />
          </div>
          <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
            <h3 class="sinse-title">Timeshare To Sell</h3>
          </div>
        </div>
        <div>
          <div class="container col-md-10">
            <div style="float: right;" class="btn btn-link color-b"></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 class="form-group row">
            <div class="col-md-4">
              <label>Were you referred by an agent?</label>
              <br />
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input radiogroup"
                  type="radio"
                  value="true"
                  :checked="refAgent"
                  @change="changeRef"
                />
                <label class="form-check-label" for="referedBy">Yes</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input radiogroup"
                  type="radio"
                  value="false"
                  :checked="!refAgent"
                  @change="changeRef"
                />
                <label class="form-check-label" for="referedBy">No</label>
              </div>
            </div>
            <div class="col-md-4" v-if="refAgent">
              <label for="Name of Agency">Agency</label>
              <select class="form-control" id="Agency" name="agency" v-model="sellItem.agencyId">
                <option v-for="(item, i) in agencies" :key="i" :value="item.id">{{item.agencyName}}</option>
              </select>
            </div>
            <div class="col-md-4" v-if="refAgent">
              <label for="Name of Agent">Agent</label>
              <select class="form-control" id="agent" name="agent" v-model="sellItem.agentId">
                <option
                  v-for="(item, i) in agents"
                  :key="i"
                  :value="item.id"
                >{{item.name + ' ' + item.surname}}</option>
              </select>
            </div>
          </div>
          <hr />
          <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 />
        </div>
      </div>
    </div>
    <div class="row mb-4">
      <div class="container col-md-10">
        <form
          id="mainForm"
          method="POST"
          action="/to-sell"
          accept-charset="UTF-8"
          enctype="multipart/form-data"
        >
          <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 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-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-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>

            <DetailIndividual :owner="sellItem.owner" />
            <hr />
            <Address :address="sellItem.owner.address" />
            <hr />
            <BankDetails :bankingDetails="sellItem.owner.bankingDetails" />
            <hr />
          </div>
          <hr />
          <br />
          <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" style="text-align:left">
            <label
              for="name"
              class="col-form-label col-md-8"
            >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">
                <input
                  class="form-check-input"
                  type="radio"
                  name="paid"
                  value="Yes"
                  :checked="sellItem.leviesPaidInFull"
                  @change="changeLeviesPaidInFull()"
                />
                <label class="form-check-label" for="paid">Yes</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="paid"
                  value="No"
                  :checked="!sellItem.leviesPaidInFull"
                  @change="changeLeviesPaidInFull()"
                />
                <label class="form-check-label" for="paid">No</label>
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row" style="text-align:left">
            <label
              for="name"
              class="col-form-label col-md-8"
            >1.2 My week is placed for rental this year</label>
            <div class="col-md-4">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="rental"
                  value="Yes"
                  :checked="sellItem.weekPlacedForRental"
                  @change="changeWeekPlacedForRental()"
                />
                <label class="form-check-label" for="paidyes">Yes</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  name="rental"
                  value="No"
                  :checked="!sellItem.weekPlacedForRental"
                  @change="changeWeekPlacedForRental()"
                />
                <label class="form-check-label" for="paidno">No</label>
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row" style="text-align:left">
            <label
              for="name"
              class="col-form-label col-md-8"
            >1.3 I/We bought the timeshare module/week on the following date:</label>
            <div class="col-md-4">
              <input
                type="date"
                class="form-control"
                name="date"
                v-model="sellItem.originalPurchaseDate"
              />
            </div>
          </div>

          <hr />

          <div class="form-group row" style="text-align:left">
            <label
              for="name"
              class="col-form-label col-md-8"
            >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">
                <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="purchasePrice"
                  v-model="sellItem.originalPurchasePrice"
                />
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row" style="text-align:left">
            <label
              for="name"
              class="col-form-label col-md-8"
            >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 :
              <input
                type="date"
                class="form-control"
                name="occupationDate1"
                v-model="sellItem.arrivalDate"
              />
              Departure Date :
              <input
                type="date"
                class="form-control"
                name="occupationDate2"
                v-model="sellItem.departureDate"
              />
            </div>
          </div>

          <hr />

          <div class="form-group row" style="text-align:left">
            <label
              for="name"
              class="col-form-label col-md-8"
            >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">
                <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="sellingPrice"
                  v-model="sellItem.sellPrice"
                />
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row" style="text-align:left">
            <label
              for="name"
              class="col-form-label col-md-8"
            >1.7 Estate agent’s commission agreed to (state Rand value)</label>
            <div class="col-md-4">
              <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="commission"
                  v-model="sellItem.agentCommission"
                />
              </div>
            </div>
          </div>

          <hr />

          <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>
          </div>

          <div class="btn btn-b-n btn-lg" @click="submitSale()">Submit</div>

          <hr />
          <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>
          <br />
          <br />
          <p style="text-align:center;">
            To rent your week out
            <a href="https://www.tradeunipoint.com/" target="_blank">click here</a>
          </p>
        </form>
      </div>
    </div>
  </div>
</template>
<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, BankDetails, Address },
  created() {
    this.initTimeshare();
  },
  computed: {
    ...mapState('timeshare', [
      'resorts',
      'regions',
      'detailedRegion',
      'seasons',
      'result',
      'resortBedrooms',
      'maxSleep',
      'bankedEntities',
      'sellItem',
      'agencies',
      'agents',
    ]),
    refAgent() {
      return this.sellItem && this.sellItem.referedByAgent;
    },
  },
  methods: {
    submitSale() {
      this.saveWeek(this.sellItem);
    },
    previewFiles(event) {
      console.log(event.target.files);
    },
    changeRef() {
      this.sellItem.agent = undefined;
      this.sellItem.agency = undefined;
      this.sellItem.referedByAgent = !this.sellItem.referedByAgent;
    },
    changeLeviesPaidInFull() {
      this.sellItem.leviesPaidInFull = !this.sellItem.leviesPaidInFull;
    },
    changeWeekPlacedForRental() {
      this.sellItem.weekPlacedForRental = !this.sellItem.weekPlacedForRental;
    },
    changeCurrentBanked() {
      this.sellItem.bankedWith = undefined;
      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;
      } else {
        this.sellItem.otherResortName = undefined;
        this.sellItem.otherResort = false;
      }
    },
    regionChange() {
      this.sellItem.regionId = this.sellItem.region
        ? this.sellItem.region.id
        : 1;
    },
    ...mapActions('timeshare', ['initTimeshare', 'onResortChange', 'saveWeek']),
  },
};
</script>
<style>
.myWell {
  width: 100%;
  background-color: #60cbeb;
  border-radius: 6px;
  padding: 5px;
  margin: 3px;
}
</style>