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

<template>
  <section id="contact2">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="section-header">
            <h2>Week Information</h2>
          </div>

          <div align="left" class="custom-control custom-switch mb-2">
            <div class="row">
              <div align="center" class="col">
                <label class="mr-5">Were you referred by an agent?</label>
                <input
                  type="checkbox"
                  class="custom-control-input"
                  id="customSwitch1"
                  :checked="refAgent"
                  @change="changeRef"
                />
                <label class="custom-control-label" for="customSwitch1">
                  {{
                  refAgent ? "Yes" : "No"
                  }}
                </label>
                <div class="refbyAgent" :class="{ 'refbyAgent--clicked': refAgent }">
                  <div class="col-md-6" v-if="refAgent">
                    <label for="Name of Agency">Agency</label>
                    <select
                      class="form-control uniSelect"
                      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-6" v-if="refAgent">
                    <label for="Name of Agent">Agent</label>
                    <select
                      class="form-control uniSelect"
                      id="agent"
                      name="agent"
                      v-model="sellItem.agentId"
                      :disabled="!sellItem.agencyId"
                    >
                      <option
                        v-for="(item, i) in displayNotDeletedAgents"
                        :key="i"
                        :value="item.id"
                      >
                        <div>{{ item.name + " " + item.surname }}</div>
                      </option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="form">
            <div id="sendmessage">Your details has been sent. Thank you!</div>
            <div id="errormessage"></div>
            <div class="form-row">
              <div class="form-group col-md-6 mt-2">
                <div class="input-group">
                  <label
                    v-if="!sellItem.region"
                    class="uniSelectLabel"
                    for="weekInfoRegionSelect"
                  >REGION</label>
                  <float-label label="REGION" style="width:100%">
                    <select
                      id="weekInfoRegionSelect"
                      class="form-control uniSelect"
                      v-model="sellItem.region"
                      @change="regionChange()"
                      style="font-size: 15px"
                    >
                      <option v-for="(region, r) in regions" :key="r" :value="region">
                        {{
                        region.regionName
                        }}
                      </option>
                    </select>
                  </float-label>
                </div>

                <!-- <input
                    type="text"
                    name="region"
                    class="form-control"
                    id="region"
                    placeholder="Region"
                    data-rule="minlen:4"
                    data-msg="Please enter the region"
                />-->
                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <div class="input-group">
                  <label
                    v-if="!sellItem.resort"
                    class="uniSelectLabel"
                    for="weekInfoResortSelect"
                  >RESORT NAME</label>
                  <float-label label="RESORT NAME" style="width:100%">
                    <select
                      id="weekInfoResortSelect"
                      class="form-control uniSelect"
                      v-model="sellItem.resort"
                      @change="resortChange()"
                    >
                      <option value="Other">Other</option>
                      <option v-for="(resort, r) in filteredResort" :key="r" :value="resort">
                        {{
                        resort.resortName
                        }}
                      </option>
                    </select>
                  </float-label>
                </div>
                <!-- <input
                    type="text"
                    class="form-control"
                    name="resort"
                    id="resort"
                    placeholder="Resort Name"
                    data-rule="minlen:4"
                    data-msg="Please enter resort name"
                />-->
                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <input
                  class="form-control"
                  v-if="sellItem.otherResort"
                  placeholder="NAME OF RESORT (* IF OTHER)"
                  type="text"
                  name="other"
                  v-model="sellItem.otherResortName"
                />
              </div>
              <div class="form-group col-md-6 mt-2">
                <div v-if="sellItem.otherResort">
                  <label v-if="!sellItem.region" class="uniSelectLabel" for="region">REGION</label>
                </div>

                <select
                  class="form-control uniSelect"
                  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 class="form-group col-md-6 mt-2">
                <float-label>
                  <input
                    type="number"
                    class="form-control"
                    name="unitNumber"
                    id="unitNumber"
                    placeholder="UNIT NUMBER"
                    v-model="sellItem.unitNumber"
                    data-msg="Please enter unit number"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <float-label>
                  <input
                    type="number"
                    class="form-control"
                    name="week"
                    id="week"
                    placeholder="UNIT / WEEK NUMBER"
                    v-model="sellItem.module"
                    data-msg="Please enter week number"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <label v-if="!sellItem.season" class="uniSelectLabel" for="region">SEASON</label>
                <float-label label="SEASON">
                  <select
                    class="form-control uniSelect"
                    name="region"
                    id="region"
                    v-model="sellItem.season"
                  >
                    <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
                  </select>
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <label v-if="!sellItem.bedrooms" class="uniSelectLabel" for="region">BEDROOM/S</label>
                <float-label label="BEDROOM/S">
                  <select
                    class="form-control uniSelect"
                    name="region"
                    id="region"
                    v-model="sellItem.bedrooms"
                  >
                    <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
                  </select>
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <label v-if="!sellItem.maxSleep" class="uniSelectLabel" for="region">SLEEP MAX</label>
                <float-label label="SLEEP MAX">
                  <select
                    class="form-control uniSelect"
                    name="region"
                    id="region"
                    v-model="sellItem.maxSleep"
                  >
                    <option v-for="(item, i) in maxSleep" :key="i">{{ item }}</option>
                  </select>
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <float-label>
                  <input
                    type="number"
                    class="form-control"
                    name="levy"
                    id="levy"
                    placeholder="Levy Amount"
                    v-model="sellItem.levyAmount"
                    data-msg="Please enter levy amount"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <label v-if="!sellItem.weekType" class="uniSelectLabel" for="region">WEEK TYPE</label>
                <float-label label="WEEK TYPE">
                  <select
                    class="form-control uniSelect"
                    name="region"
                    id="region"
                    v-model="sellItem.weekType"
                  >
                    <option :key="0">Flexi</option>
                    <option :key="1">Fixed</option>
                    <option :key="2">Module</option>
                    <option :key="3">Syndicate</option>
                  </select>
                </float-label>
              </div>
            </div>
          </div>
          <div align="left" class="custom-control custom-switch mb-2">
            <div class="row">
              <div align="center" class="col">
                <label class="mr-5">Has your week been spacebanked for the current year?</label>
                <input
                  type="checkbox"
                  class="custom-control-input"
                  id="customSwitch2"
                  :checked="sellItem.currentYearBanked"
                  @change="changeCurrentBanked"
                />
                <label class="custom-control-label" for="customSwitch2">
                  {{
                  sellItem.currentYearBanked ? "Yes" : "No"
                  }}
                </label>
                <div
                  class="spacebanked1"
                  :class="{ 'spacebanked1--clicked': sellItem.currentYearBanked }"
                >
                  <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 uniSelect"
                      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>
            </div>
          </div>

          <div class="section-header">
            <h2>Detailed Individual Information</h2>
          </div>
          <div class="form">
            <div class="row mb-2">
              <div class="form-group col-md-6">
                <float-label>
                  <input
                    type="text"
                    name="name"
                    class="form-control"
                    id="name"
                    placeholder="Name"
                    data-rule="minlen:4"
                    data-msg="Please enter your name"
                    v-model="indiv.name"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <float-label>
                  <input
                    type="text"
                    class="form-control"
                    name="surname"
                    id="surname"
                    placeholder="Surname"
                    data-msg="Please enter your surname"
                    v-model="indiv.surname"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
            </div>
            <div class="row mb-2">
              <div class="form-group col-md-6">
                <float-label>
                  <input
                    type="text"
                    name="idnum"
                    class="form-control"
                    id="idnum"
                    placeholder="ID Number"
                    data-rule="minlen:4"
                    data-msg="Please enter your ID number"
                    v-model="indiv.idNumber"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <float-label>
                  <input
                    type="text"
                    class="form-control"
                    name="company"
                    id="company"
                    placeholder="Company Reg Number"
                    data-rule="minlen:4"
                    data-msg="Please enter your company reg number"
                    v-model="indiv.companyRegNumber"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
            </div>
            <div class="row mb-2">
              <div class="form-group col-md-6">
                <div class="input-group">
                  <span v-if="!indiv.howMarried">
                    <label
                      v-if="indiv.howMarried === 'N/A'"
                      for="howMarried"
                      class="uniSelectLabel"
                    >Marital Status</label>
                  </span>

                  <float-label label="Marital Status" style="width:100%">
                    <select
                      class="form-control uniSelect"
                      id="howMarried"
                      v-model="indiv.howMarried"
                    >
                      <option value="N/A">N/A</option>
                      <option value="In Community Of Property">In Community Of Property</option>
                      <option value="Out of Community Of Property">Out of Community Of Property</option>
                      <option value="Other">Other</option>
                      <option value="Traditional Wedding">Traditional Wedding</option>
                      <option value="Single">Single</option>
                      <option value="Divorced">Divorced</option>
                      <option value="Widow">Widow</option>
                      <option value="Committed Relationship">Committed Relationship</option>
                      <option value="Partner">Partner</option>
                    </select>
                  </float-label>
                </div>
                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <float-label>
                  <input
                    type="text"
                    class="form-control"
                    name="email"
                    id="email"
                    placeholder="Email Address"
                    data-msg="Please enter your email address"
                    v-model="indiv.emailAddress"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-md-6">
                <float-label>
                  <input
                    type="text"
                    name="cell"
                    class="form-control"
                    id="cell"
                    placeholder="Cell Number"
                    data-rule="minlen:4"
                    data-msg="Please enter your cell number"
                    v-model="indiv.cellNumner"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <float-label>
                  <input
                    type="text"
                    class="form-control"
                    name="landline"
                    id="landline"
                    placeholder="Landline Number"
                    data-msg="Please enter your landline number"
                    v-model="indiv.landlineNumber"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
            </div>
          </div>
          <div v-if="indiv.howMarried === 'In Community Of Property'" class="section-header">
            <h2>Spouse Details</h2>
          </div>
          <div v-if="indiv.howMarried === 'In Community Of Property'" class="form">
            <div class="form-row mb-2">
              <div class="form-group col-md-6 mt-2">
                <float-label>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="SPOUSE NAME"
                    data-msg="Please enter your spouse's name"
                    v-model="indiv.spouseName"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <float-label>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="SPOUSE SURNAME"
                    data-msg="Please enter your spouse's surname"
                    v-model="indiv.spouseSurname"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <float-label>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="SPOUSE EMAIL"
                    data-rule="minlen:4"
                    data-msg="Please enter your spouse's email"
                    v-model="indiv.spouseEmail"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <float-label>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="SPOUSE TELEPHONE"
                    data-rule="minlen:4"
                    data-msg="Please enter your spouse's telephone number"
                    v-model="indiv.spouseTelephone"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6 mt-2">
                <float-label>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="SPOUSE CELL NUMBER"
                    data-rule="minlen:4"
                    data-msg="Please enter your spouse's cellphone number"
                    v-model="indiv.spouseCellnumber"
                  />
                </float-label>

                <div class="validation"></div>
              </div>
            </div>
          </div>

          <div class="section-header">
            <h2>Address</h2>
          </div>
          <div class="form">
            <div class="row">
              <div class="form-group col-md-12">
                <addressAutoComplete @GoogleAddress="UpdateAddress" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md-6">
                <input
                  type="text"
                  name="street-nr"
                  class="form-control"
                  id="street-nr"
                  placeholder="Street Number"
                  data-rule="minlen:4"
                  data-msg="Please enter your street number"
                  v-model="indiv.address.streetNumber"
                  disabled
                />

                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <input
                  type="text"
                  class="form-control"
                  name="street"
                  id="street"
                  placeholder="Street Name"
                  data-msg="Please enter your street name"
                  disabled
                  v-model="indiv.address.street"
                />
                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <input
                  type="text"
                  name="province"
                  class="form-control"
                  id="province"
                  placeholder="Province"
                  data-rule="minlen:4"
                  data-msg="Please enter your province"
                  disabled
                  v-model="indiv.address.province"
                />
                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <input
                  type="text"
                  class="form-control"
                  name="city"
                  id="city"
                  placeholder="City"
                  data-rule="minlen:4"
                  data-msg="Please enter your city"
                  v-model="indiv.address.city"
                  disabled
                />
                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <input
                  type="text"
                  name="suburb"
                  class="form-control"
                  id="suburb"
                  placeholder="Suburb"
                  data-rule="minlen:4"
                  data-msg="Please enter your suburb"
                  v-model="indiv.address.suburb"
                  disabled
                />
                <div class="validation"></div>
              </div>
              <div class="form-group col-md-6">
                <input
                  type="text"
                  class="form-control"
                  name="postal"
                  id="postal"
                  placeholder="Postal Code"
                  data-msg="Please enter your postal code"
                  v-model="indiv.address.postalCode"
                  disabled
                />
                <div class="validation"></div>
              </div>
            </div>
          </div>

          <div class="section-header">
            <h2>Share Transfer Information</h2>
          </div>
          <div class="form">
            <div id="sendmessage">Your details has been sent. Thank you!</div>
            <div id="errormessage"></div>

            <div class="form-row">
              <div
                class="form-group col-md-12"
                style="border:solid;border-width:2px; border-color:rgb(27, 117, 187); border-radius: 3px"
              >
                <p
                  style="text-align: left; margin:auto; padding:10px"
                >1. With respect to my timeshare module/week, I confirm that:</p>
                <div class="validation"></div>
              </div>
            </div>

            <div class="form-row">
              <div class="col-md-8">
                <p>1.1. All levy amounts for the current cycle have been paid in full</p>
              </div>
              <div class="form-group col-md-2">
                <div class="custom-control custom-switch">
                  <input
                    type="checkbox"
                    class="custom-control-input"
                    id="customSwitch3"
                    :checked="sellItem.leviesPaidInFull"
                    @change="changeLeviesPaidInFull"
                  />
                  <label class="custom-control-label" for="customSwitch3">
                    {{
                    sellItem.leviesPaidInFull ? "Yes" : "No"
                    }}
                  </label>
                </div>
                <div class="validation"></div>
              </div>
            </div>

            <div class="form-row">
              <div class="col-md-8">
                <p>1.2. My week is placed on rental or exchange this year</p>
              </div>
              <div class="form-group col-md-2">
                <div class="custom-control custom-switch">
                  <input
                    type="checkbox"
                    class="custom-control-input"
                    id="customSwitch4"
                    :checked="sellItem.weekPlacedForRental"
                    @change="changeWeekPlacedForRental"
                  />
                  <label class="custom-control-label" for="customSwitch4">
                    {{
                    sellItem.weekPlacedForRental ? "Yes" : "No"
                    }}
                  </label>
                </div>
                <div class="validation"></div>
              </div>
            </div>

            <div class="form-row">
              <div class="col-md-8">
                <p>1.3. I / We bought the timeshare module/week on the following date:</p>
              </div>
              <div class="form-group col-md-2">
                <input
                  type="date"
                  class="form-control"
                  name="date"
                  v-model="sellItem.originalPurchaseDate"
                />
                <div class="validation"></div>
              </div>
            </div>

            <div class="form-row">
              <div class="col-md-8">
                <p>1.4. The purchase price for which I / we bought timeshare module / week was:</p>
              </div>
              <div class="form-group col-md-2">
                <input
                  class="form-control"
                  placeholder="R"
                  type="number"
                  step="any"
                  name="purchasePrice"
                  v-model="sellItem.originalPurchasePrice"
                />
                <div class="validation"></div>
              </div>
            </div>

            <div class="form-row">
              <div class="col-md-8">
                <p>
                  1.5. I / We bought the timeshare module / week for the following dates for the
                  current year:
                </p>
              </div>
              <div class="form-group col-md-2">
                Arrival Date :
                <input
                  type="date"
                  class="form-control"
                  name="occupationDate1"
                  v-model="sellItem.arrivalDate"
                />
                <div class="validation"></div>
              </div>
              <div class="form-group col-md-2">
                Departure Date :
                <input
                  type="date"
                  class="form-control"
                  name="occupationDate2"
                  v-model="sellItem.departureDate"
                />
                <div class="validation"></div>
              </div>
            </div>

            <div class="form-row">
              <div class="col-md-8">
                <p>
                  1.6. The selling price for the timeshare module / week for which I / we want to
                  sell is: (Incl. Vat)
                </p>
              </div>
              <div class="form-group col-md-2">
                <input
                  class="form-control"
                  type="number"
                  step="any"
                  name="sellingPrice"
                  v-model="sellItem.sellPrice"
                  placeholder="R"
                />
                <div class="validation"></div>
              </div>
            </div>

            <div class="form-row">
              <div class="col-md-8">
                <p>1.7. Estate agent's commission agreed to (state Rand value)</p>
              </div>
              <div class="form-group col-md-2">
                <input
                  class="form-control"
                  type="number"
                  step="any"
                  name="commission"
                  v-model="sellItem.agentCommission"
                  placeholder="R"
                />
                <div class="validation"></div>
              </div>
            </div>

            <div class="form-row">
              <div class="col-md-8">
                <p>
                  1.8. I hereby Mandate Uni-Vate properties to sell the timeshare listed above on my
                  behalf
                </p>
              </div>
              <div class="form-group col-md-4">
                <input type="checkbox" @change="SetMandateDate" v-model="sellItem.mandate" />
              </div>
            </div>
            <div class="form-row" v-if="!CanSave">
              <div class="col-md-12">
                <p class="alert myError">Please ensure that you add spouse details.</p>
              </div>
            </div>
            <div class="text-center col-12" v-if="CanSave">
              <button class="btn-solid-blue" v-if="!sellItem.id" @click="submitSale()">SUBMIT</button>
              <button class="btn-solid-blue" v-else @click="newSale()">NEW WEEK</button>
            </div>
            <!-- <div class="text-center col-12">
              <button class="btn-solid-blue" @click="paygateRedirect()">PayGate</button>
            </div>-->
            <br />
            <br />
          </div>
        </div>

        <br />
        <br />
      </div>
      <div v-if="wait" id="preloader"></div>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from "vuex";
import addressAutoComplete from "../../shared/addressAutoComplete";
import Alert from "../../shared/alert.vue";
import Log from "../../../assets/Log";
import _ from "lodash";

export default {
  name: "TimeshareToSell",
  props: {
    weekId: {
      default: 0
    }
  },
  data() {
    return {
      wait: false,
      userLoggedIn: Log.isLoggedIn()
    };
  },
  components: {
    addressAutoComplete,
    Alert
  },
  mounted() {
    if (this.sellItem.id) {
      this.newSale();
    }
    this.initTimeshare(0);
    this.getIndividual(Log.getUser().id);
    this.getBanks();
  },
  created() {
    this.initTimeshare(this.weekId);
  },
  computed: {
    ...mapState("timeshare", [
      "resorts",
      "regions",
      "detailedRegion",
      "seasons",
      "result",
      "resortBedrooms",
      "maxSleep",
      "bankedEntities",
      "sellItem",
      "agencies",
      "agents",
      "getTemplate"
    ]),
    ...mapState("individual", ["indiv"]),
    ...mapState("authentication", ["isLoggedIn"]),
    ...mapGetters({
      user: "authentication/getUser",
      person: "authentication/getPerson"
    }),
    ...mapState("bank", ["banks"]),
    refAgent() {
      return this.sellItem && this.sellItem.referedByAgent;
    },
    ...mapGetters("fees", ["getListingFee"]),
    filteredResort() {
      let list = [];
      if (
        this.sellItem &&
        this.sellItem.region &&
        this.sellItem.region.regionCode
      ) {
        const item = this.detailedRegion.find(
          region => region.region.regionCode === this.sellItem.region.regionCode
        );
        if (item) {
          list = item.children;
        }
      } else {
        list = this.resorts;
      }
      return _.sortBy(list, x => x.resortName);
    },
    isLoggedIn() {
      return this.user && this.person;
    },
    displayNotDeletedAgents() {
      var notDeletedArr = [];
      this.agents.forEach(agent => {
        if (!agent.isDeleted) {
          if (agent.agencyId === this.sellItem.agencyId) {
            notDeletedArr.push(agent);
          }
        }
      });
      return notDeletedArr;
    },
    CanSave() {
      if (this.indiv.howMarried === "In Community Of Property") {
        if (
          this.indiv.spouseName ||
          this.indiv.spouseSurname ||
          this.spouseEmail
        ) {
          return true;
        }
        return false;
      }
      return true;
    }
  },
  methods: {
    ...mapActions("individual", ["getIndividual"]),
    ...mapActions("timeshare", [
      "initTimeshare",
      "onResortChange",
      "saveWeek",
      "getBlankWeek"
    ]),
    ...mapActions("payment", ["addPayment"]),
    ...mapActions("bank", ["getBanks"]),
    newSale() {
      this.weekId = 0;
      this.getBlankWeek();
    },
    submitSale() {
      if (this.userLoggedIn) {
        this.sellItem.ownerObject = this.indiv;
        this.sellItem.status = undefined;
        console.log(this.sellItem);
        //   this.saveWeek(this.sellItem).then(fulfilled => {
        //     this.paygateRedirect();
        //   });
      }
    },
    paygateRedirect() {
      var amount = this.getListingFee.amount;
      var paymentObj = {
        timeshareWeekId: this.sellItem.id, // this.sellItem.Id,
        propertyId: 0,
        creatydById: Log.getUser().id, //Log.getUser().id,
        amount: amount,
        paymentStatus: "",
        paymentToken: ""
      };

      this.addPayment(paymentObj).then(res => {
        this.$router.push({
          name: "PaymentGateway",
          params: {
            paymentReqId: res.PAY_REQUEST_ID,
            checksum: res.CHECKSUM
          }
        });
      });
    },
    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;
    },
    UpdateAddress(address) {
      this.indiv.address.streetNumber = address.streetNumber;
      this.indiv.address.street = address.streetName;
      this.indiv.address.province = address.province;
      this.indiv.address.city = address.city;
      this.indiv.address.suburb = address.suburb;
      this.indiv.address.postalCode = address.postalCode;
    },
    SetMandateDate() {
      if (this.sellItem.mandate) {
        this.sellItem.mandateDate = new Date();
      } else {
        this.sellItem.mandateDate = undefined;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.refbyAgent {
  will-change: transform;
  transition: height 500ms;
  height: 0px;
}

.refbyAgent--clicked {
  height: 150px;
}

.spacebanked1 {
  will-change: transform;
  transition: height 500ms;
  height: 0px;
}

.spacebanked1--clicked {
  height: 150px;
}

.custom-file-label {
  border-width: 2px;
  border-color: rgb(27, 117, 187);
  margin-bottom: 20px;
}

.custom-file-label::after {
  border-left: none;
  border-bottom: solid;
  border-width: 2px;
  border-color: rgb(27, 117, 187);
  font-family: "Muli";
}
</style>