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/sell.jpg"
              alt="Timeshare To Sell"
              class="img-fluid"
              style="width:800px;height:400px;"
            />
          </div>
          <div class="sinse-box">
            <h3 class="sinse-title">
              Timeshare To Sell
              <span></span>
            </h3>
          </div>
        </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>
        </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 v-for="(item, i) in unitConfigurationList" :key="i">{{item}}</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="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>Name of Agency</label>
              <input
                class="form-control"
                placeholder="Name of Agency"
                type="text"
                name="name of agency"
                value
              />
            </div>
            <div class="col-md-4" v-if="refAgent">
              <label>Name of Agent</label>
              <input
                class="form-control"
                placeholder="Name of Agent"
                type="text"
                name="name of agenct"
                value
              />
            </div>
          </div>

          <div class="form-group row">
            <div class="col-md-6">
              <label>Resort Name</label>
              <select class="form-control" id="resort" name="resort">
                <option value>Please select Resort Name</option>
                <option value></option>
                <option value="Other">Other</option>
              </select>
            </div>
            <div class="col-md-6">
              <label>* If other</label>
              <input class="form-control" placeholder="* If other" type="text" name="other" value />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label>Region</label>
              <select class="form-control" name="region" id="region">
                <option value>Please select Region</option>
                <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
              </select>
            </div>
            <div class="col-md-6">
              <label>Season</label>
              <select class="form-control" name="season">
                <option value>Please select Season</option>
                <option value="Peak">Peak</option>
                <option value="Peak 1">Peak 1</option>
                <option value="Peak 2">Peak 2</option>
                <option value="Peak 3">Peak 3</option>
                <option value="Peak 4">Peak 4</option>
                <option value="Red">Red</option>
                <option value="White">White</option>
                <option value="Blue">Blue</option>
                <option value="Flexi">Flexi</option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label>Module</label>
              <input class="form-control" placeholder="Module" type="text" name="module" value />
            </div>
            <div class="col-md-6">
              <label>Week Number</label>
              <input class="form-control" placeholder="Week Number" type="text" name="week" value />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label>Bedrooms</label>
              <select class="form-control" name="bedrooms">
                <option value>Please select Bedrooms</option>
                <option value="Studio">Studio</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
              </select>
            </div>
            <div class="col-md-6">
              <label>Sleeps maximum</label>
              <select class="form-control" name="sleeps">
                <option value>Please select Sleeps maximum</option>
                <option value="2">2</option>
                <option value="4">4</option>
                <option value="6">6</option>
                <option value="8">8</option>
                <option value="10">10</option>
                <option value="12">12</option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label>Unit number</label>
              <input class="form-control" placeholder="Unit Number" type="text" name="unit" value />
            </div>
            <div class="col-md-6">
              <label>Owner</label>
              <input class="form-control" placeholder="Owner" type="text" name="owner" value />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-6">
              <label>Levy</label>
              <input
                class="form-control"
                placeholder="Levy"
                type="number"
                step="any"
                name="levy"
                value
              />
            </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"
                  checked
                />
                <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
                />
                <label class="form-check-label" for="spacebankedyearno">No</label>
              </div>
            </div>
            <div class="col-md-6">
              <label for="If yes, please confirm with whom"></label>
              <select class="form-control" name="spacebankOwner">
                <option value>If yes, please confirm with whom</option>
                <option value="Dial an Exchange">Dial an Exchange</option>
                <option value="RCI">RCI</option>
                <option value="First Exchange">First Exchange</option>
                <option value="iExchange">iExchange</option>
                <option value="Interval International">Interval International</option>
              </select>
            </div>
          </div>
          <br />
          <hr />
          <br />
          <h3>Share transfer information</h3>
          <br />
          <tr>
            <td>1. With respect to my timeshare module/week, I confirm that:</td>
          </tr>

          <div class="form-group row">
            <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">
                <input class="form-check-input" type="radio" name="paid" value="Yes" checked />
                <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 />
                <label class="form-check-label" for="paid">No</label>
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <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">
                <input class="form-check-input" type="radio" name="rental" value="Yes" checked />
                <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 />
                <label class="form-check-label" for="paidno">No</label>
              </div>
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <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 type="date" class="form-control" name="date" value />
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <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">
              <input
                class="form-control"
                type="number"
                step="any"
                name="purchasePrice"
                placeholder="R"
                value
              />
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <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 :
              <input type="date" class="form-control" name="occupationDate1" value />
              Departure Date :
              <input
                type="date"
                class="form-control"
                name="occupationDate2"
                value
              />
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <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">
              <input
                class="form-control"
                type="number"
                step="any"
                name="sellingPrice"
                placeholder="R"
                value
              />
            </div>
          </div>

          <hr />

          <div class="form-group row">
            <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">
              <input
                class="form-control"
                type="number"
                step="any"
                name="commission"
                placeholder="R"
                value
              />
            </div>
          </div>

          <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="col-md-4">
              <input class="btn btn-b-n" type="file" name="mandate" value />
            </div>
          </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>
          <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';

export default {
  name: 'TimeshareToSell',
  created() {
    this.initTimeshare();
  },
  computed: {
    ...mapState('timeshare', [
      'resorts',
      'regions',
      'detailedRegion',
      'seasons',
      'unitConfigurationList',
      'resortBedrooms',
      'maxBedrooms',
      'bankedEntities',
      'sellItem',
      'agencies',
      'agents',
    ]),
    refAgent() {
      return this.sellItem && this.sellItem.referedByAgent;
    },
  },
  methods: {
    changeRef() {
      this.sellItem.referedByAgent = !this.sellItem.referedByAgent;
    },
    ...mapActions('timeshare', ['initTimeshare']),
  },
};
</script>