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

<template>
  <div v-if="userLoggedIn">
    <section v-if="boolLoaded">
      <div class="container">
        <div v-if="boolMessage" class="row">
          <div class="col">
            <alert
              :text="'Your In formation has been sent!'"
              :type="'SUCCESS'"
            />
          </div>
        </div>
        <div v-if="boolValidationError" class="row">
          <div class="col">
            <alert :text="errorMessage" :type="errorOccurred" />
          </div>
        </div>
        <div class="row">
          <div class="col-sm-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 value=""></option> -->
                        <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 value=""></option> -->
                        <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="col-md-6 mt-2">
                  <div class="form-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()"
                        v-bind:class="{
                          'is-valid': sellItem.region,
                          'is-invalid':
                            !requiredField(sellItem.region) && regionLoad,
                        }"
                        v-on:keyup="regionLoad = true"
                        v-on:blur="regionLoad = true"
                      >
                        <option
                          v-for="(region, r) in regions"
                          :key="r"
                          :value="region"
                        >
                          {{ region.regionName }}
                        </option>
                      </select>
                      <div class="invalid-feedback">
                        Please select a region!
                      </div>
                    </float-label>
                  </div>
                </div>
                <div class="col-md-6 mt-2">
                  <div class="form-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()"
                        v-bind:class="{
                          'is-valid': sellItem.resort,
                          'is-invalid':
                            !requiredField(sellItem.resort) && resortLoad,
                        }"
                        v-on:keyup="resortLoad = true"
                        v-on:blur="resortLoad = true"
                      >
                        <option value="Other">Other</option>
                        <option
                          v-for="(res, r) in filteredResort"
                          :key="r"
                          :value="res"
                        >
                          {{ res.resortName }}
                        </option>
                      </select>
                      <div class="invalid-feedback">
                        Please select a resort!
                      </div>
                    </float-label>
                  </div>
                </div>
              </div>

              <div v-if="sellItem.otherResort">
                <div class="form-row">
                  <div class="col-md-6 mt-2">
                    <div class="form-group">
                      <float-label
                        label="Other Resort Name"
                        style="width: 100%;"
                      >
                        <input
                          type="text"
                          name="other"
                          id="other"
                          v-model="sellItem.otherResortName"
                          class="form-control uniInput"
                          v-if="sellItem.otherResort"
                          v-bind:class="{
                            'is-valid': sellItem.otherResortName,
                            'is-invalid':
                              !requiredField(sellItem.otherResortName) &&
                              otherResortLoad,
                          }"
                          v-on:keyup="otherResortLoad = true"
                          v-on:blur="otherResortLoad = true"
                          placeholder="Other Resort Name"
                        />
                        <div class="invalid-feedback">
                          Other Resort Name is required!
                        </div>
                      </float-label>
                    </div>
                  </div>
                  <div class="form-row"></div>
                  <div class="col-md-6 mt-2">
                    <div class="form-group">
                      <label
                        v-if="!sellItem.region"
                        class="uniSelectLabel"
                        for="otherResortregion"
                      >
                        Region
                      </label>

                      <float-label label="Region" style="width: 100%;">
                        <select
                          id="otherResortRegion"
                          name="otherResortRegion"
                          class="form-control uniSelect"
                          v-if="sellItem.otherResort"
                          v-model="sellItem.region"
                          v-bind:class="{
                            'is-valid': sellItem.region,
                            'is-invalid':
                              !requiredField(sellItem.region) &&
                              otherResorRegionLoad,
                          }"
                          v-on:keyup="otherResortRegionLoad = true"
                          v-on:blur="otherResortRegionLoad = true"
                        >
                          <option
                            v-for="(region, r) in regions"
                            :key="r"
                            :value="region"
                          >
                            {{ region.regionName }}
                          </option>
                        </select>
                        <div class="invalid-feedback">
                          Please select a region!
                        </div>
                      </float-label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="col-md-6 mt-2">
                  <div class="form-group">
                    <float-label label="Unit Number" style="width: 100%;">
                      <input
                        type="text"
                        class="form-control uniInput"
                        name="unitNumber"
                        id="unitNumber"
                        v-model="sellItem.unitNumber"
                        v-bind:class="{
                          'is-valid': sellItem.unitNumber,
                          'is-invalid':
                            !requiredField(sellItem.unitNumber) &&
                            unitNumberLoad,
                        }"
                        v-on:keyup="unitNumberLoad = true"
                        v-on:blur="unitNumberLoad = true"
                        placeholder="Unit Number"
                      />
                      <div class="invalid-feedback">
                        Unit Number is required!
                      </div>
                    </float-label>
                  </div>
                </div>

                <div class="col-md-6 mt-2">
                  <div class="form-group">
                    <float-label label="Week Module" style="width: 100%;">
                      <input
                        type="text"
                        class="form-control uniInput"
                        name="week"
                        id="week"
                        v-model="sellItem.module"
                        data-msg="Please enter week number"
                        v-bind:class="{
                          'is-valid': sellItem.module,
                          'is-invalid':
                            !requiredField(sellItem.module) && moduleLoad,
                        }"
                        v-on:keyup="moduleLoad = true"
                        v-on:blur="moduleLoad = true"
                        placeholder="Week Module"
                      />
                      <div class="invalid-feedback">
                        Week Module is required!
                      </div>
                    </float-label>
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="col-md-6 mt-2">
                  <div class="form-group">
                    <label
                      v-if="!sellItem.season"
                      class="uniSelectLabel"
                      for="season"
                    >
                      Season
                    </label>

                    <float-label label="Season" style="width: 100%;">
                      <select
                        id="season"
                        name="season"
                        class="form-control uniSelect"
                        v-model="sellItem.season"
                        v-bind:class="{
                          'is-valid': sellItem.season,
                          'is-invalid':
                            !requiredField(sellItem.season) && seasonLoad,
                        }"
                        v-on:keyup="seasonLoad = true"
                        v-on:blur="seasonLoad = true"
                      >
                        <option v-for="(season, r) in seasons" :key="r">
                          {{ season.name }}
                        </option>
                      </select>
                      <div class="invalid-feedback">
                        Please select a season!
                      </div>
                    </float-label>
                  </div>
                </div>
                <div class="col-md-6 mt-2">
                  <div class="form-group">
                    <label
                      v-if="!sellItem.bedrooms"
                      class="uniSelectLabel"
                      for="bedrooms"
                    >
                      Bedroom/s
                    </label>

                    <float-label label="Bedroom/s" style="width: 100%;">
                      <select
                        id="bedrooms"
                        name="bedrooms"
                        class="form-control uniSelect"
                        v-model="sellItem.bedrooms"
                        v-bind:class="{
                          'is-valid': sellItem.bedrooms,
                          'is-invalid':
                            !requiredField(sellItem.bedrooms) && bedroomsLoad,
                        }"
                        v-on:keyup="bedroomsLoad = true"
                        v-on:blur="bedroomsLoad = true"
                      >
                        <option
                          v-for="(item, i) in resortBedrooms"
                          :key="i"
                          :value="item"
                        >
                          {{ item }}
                        </option>
                      </select>
                      <div class="invalid-feedback">
                        Please select Bedroom/s!
                      </div>
                    </float-label>
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="col-md-6 mt-2">
                  <div class="form-group">
                    <label
                      v-if="!sellItem.maxSleep"
                      class="uniSelectLabel"
                      for="maxSleep"
                    >
                      Max Sleeper
                    </label>

                    <float-label label="Max Sleeper" style="width: 100%;">
                      <select
                        id="maxSleep"
                        name="maxSleep"
                        class="form-control uniSelect"
                        v-model="sellItem.maxSleep"
                        v-bind:class="{
                          'is-valid': sellItem.maxSleep,
                          'is-invalid':
                            !requiredField(sellItem.maxSleep) && maxSleepLoad,
                        }"
                        v-on:keyup="maxSleepLoad = true"
                        v-on:blur="maxSleepLoad = true"
                      >
                        <option
                          v-for="(item, i) in maxSleep"
                          :key="i"
                          :value="item"
                        >
                          {{ item }}
                        </option>
                      </select>
                      <div class="invalid-feedback">
                        Please select maximum sleeper!
                      </div>
                    </float-label>
                  </div>
                </div>

                <div class="col-md-6 mt-2">
                  <div class="form-group">
                    <float-label label="Levy Amount" style="width: 100%;">
                      <input
                        type="number"
                        id="levy"
                        v-model="sellItem.levyAmount"
                        class="form-control uniInput"
                        placeholder="Levy Amount"
                        v-bind="money"
                        v-bind:class="{
                          'is-valid': sellItem.levyAmount,
                          'is-invalid':
                            !requiredField(sellItem.levyAmount) &&
                            levyAmountLoad,
                        }"
                        v-on:keyup="levyAmountLoad = true"
                        v-on:blur="levyAmountLoad = true"
                      />
                      <div class="invalid-feedback">
                        Levy Amount is required!
                      </div>
                    </float-label>
                  </div>
                </div>
              </div>

              <div class="form-row">
                <div class="col-md-6 mt-2">
                  <div class="form-group">
                    <label
                      v-if="!sellItem.weekType"
                      class="uniSelectLabel"
                      for="weekType"
                    >
                      Week Type
                    </label>
                    <float-label label="Week Type" style="width: 100%;">
                      <select
                        id="weekType"
                        name="weekType"
                        class="form-control uniSelect"
                        v-model="sellItem.weekType"
                        v-bind:class="{
                          'is-valid': sellItem.weekType,
                          'is-invalid':
                            !requiredField(sellItem.weekType) && weekTypeLoad,
                        }"
                        v-on:keyup="weekTypeLoad = true"
                        v-on:blur="weekTypeLoad = true"
                      >
                        <option value="0" :key="0">Flexi</option>
                        <option value="1" :key="1">Fixed</option>
                        <option value="2" :key="2">Module</option>
                        <option value="3" :key="3">Syndicate</option>
                      </select>
                      <div class="invalid-feedback">
                        Please select Week Type!
                      </div>
                    </float-label>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <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"
                          v-bind:class="{
                            'is-valid': sellItem.bankedWith,
                            'is-invalid':
                              !requiredField(sellItem.bankedWith) &&
                              bankedWithLoad,
                          }"
                          v-on:keyup="bankedWithLoad = true"
                          v-on:blur="bankedWithLoad = true"
                        >
                          <option v-for="(item, i) in bankedEntities" :key="i">
                            {{ item }}
                          </option>
                        </select>
                        <div class="invalid-feedback">
                          Please select a Banking Entity!
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="section-header">
                <h2>Detailed Individual Information</h2>
              </div>
              <div class="form">
                <div class="row mb-4">
                  <div class="col-md-12">
                    <float-label label="Owner Type" fixed>
                      <select
                        class="form-control uniSelect"
                        name="ownerType"
                        id="ownerType"
                        v-model="selectedUserType"
                        @change="userChange()"
                        v-bind:class="{
                          'is-valid': selectedUserType,
                          'is-invalid':
                            !requiredField(selectedUserType) &&
                            selectedUserTypeLoad,
                        }"
                        v-on:keyup="selectedUserTypeLoad = true"
                        v-on:blur="selectedUserTypeLoad = true"
                      >
                        <option value="myself">Myself</option>
                        <option value="custom">Custom User</option>
                      </select>
                    </float-label>
                  </div>
                </div>
                <div class="row mb-2">
                  <div class="form-group col-md-6">
                    <float-label label="Name" style="width: 100%;">
                      <input
                        type="text"
                        name="name"
                        class="form-control uniSelect"
                        :disabled="ChangeCustomUser"
                        id="name"
                        placeholder="Name"
                        data-rule="minlen:4"
                        data-msg="Please enter your name"
                        v-model="indiv.name"
                        v-bind:class="{
                          'is-valid': indiv.name,
                          'is-invalid': !requiredField(indiv.name) && nameLoad,
                        }"
                        v-on:keyup="nameLoad = true"
                        v-on:blur="nameLoad = true"
                      />
                      <div class="invalid-feedback">Name is Required!</div>
                    </float-label>
                  </div>
                  <div class="form-group col-md-6">
                    <float-label label="Surname" style="width: 100%;">
                      <input
                        type="text"
                        class="form-control uniSelect"
                        :disabled="ChangeCustomUser"
                        name="surname"
                        id="surname"
                        placeholder="Surname"
                        data-msg="Please enter your surname"
                        v-model="indiv.surname"
                        v-bind:class="{
                          'is-valid': indiv.surname,
                          'is-invalid':
                            !requiredField(indiv.surname) && surnameLoad,
                        }"
                        v-on:keyup="surnameLoad = true"
                        v-on:blur="surnameLoad = true"
                      />
                      <div class="invalid-feedback">Surname is Required!</div>
                    </float-label>
                  </div>
                </div>
                <div class="row mb-2">
                  <div class="form-group col-md-6">
                    <float-label>
                      <input
                        type="text"
                        name="idnum"
                        class="form-control uniSelect"
                        :disabled="ChangeCustomUser"
                        id="idnum"
                        placeholder="ID Number"
                        data-rule="minlen:4"
                        data-msg="Please enter your ID number"
                        v-model="indiv.idNumber"
                        v-bind:class="{
                          'is-valid': indiv.idNumber,
                        }"
                      />
                    </float-label>
                  </div>
                  <div class="form-group col-md-6">
                    <float-label>
                      <input
                        type="text"
                        class="form-control uniSelect"
                        :disabled="ChangeCustomUser"
                        name="company"
                        id="company"
                        placeholder="Company Reg Number"
                        data-rule="minlen:4"
                        data-msg="Please enter your company reg number"
                        v-model="indiv.companyRegNumber"
                        v-bind:class="{
                          'is-valid': indiv.companyRegNumber,
                        }"
                      />
                      <div class="invalid-feedback">
                        Company Registration Number is required!
                      </div>
                    </float-label>
                  </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
                        fixed
                        label="Marital Status"
                        style="width: 100%;"
                      >
                        <select
                          class="form-control uniSelect"
                          id="howMarried"
                          :disabled="ChangeCustomUser"
                          v-model="indiv.howMarried"
                          v-bind:class="{
                            'is-valid': indiv.howMarried,
                          }"
                        >
                          <option v-bind:value="0">N/A</option>
                          <option v-bind:value="1">
                            In Community Of Property
                          </option>
                          <option v-bind:value="2">
                            Out of Community Of Property
                          </option>
                          <option v-bind:value="3">Other</option>
                          <option v-bind:value="4">Traditional Wedding</option>
                          <option v-bind:value="5">Single</option>
                          <option v-bind:value="6">Divorced</option>
                          <option v-bind:value="7">Widow</option>
                          <option v-bind:value="8">
                            Committed Relationship
                          </option>
                          <option v-bind:value="9">Partner</option>
                        </select>
                      </float-label>
                    </div>
                  </div>
                  <div class="form-group col-md-6">
                    <float-label label="Email Address" style="width: 100%;">
                      <input
                        type="text"
                        class="form-control uniInput"
                        name="email"
                        :disabled="ChangeCustomUser"
                        id="email"
                        placeholder="Email Address"
                        data-msg="Please enter your email address"
                        v-model="indiv.emailAddress"
                        v-bind:class="{
                          'is-valid': indiv.emailAddress,
                          'is-invalid':
                            !validEmail(indiv.emailAddress) && emailAddressLoad,
                        }"
                        v-on:keyup="emailAddressLoad = true"
                        v-on:blur="emailAddressLoad = true"
                      />
                      <div class="invalid-feedback">
                        Valid Email address is Required!
                      </div>
                    </float-label>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-6">
                    <float-label label="Cell Number" style="width: 100%;">
                      <input
                        type="text"
                        name="cell"
                        class="form-control uniSelect"
                        :disabled="ChangeCustomUser"
                        id="cell"
                        placeholder="Cell Number"
                        data-rule="minlen:4"
                        data-msg="Please enter your cell number"
                        v-model="indiv.cellNumber"
                        v-bind:class="{
                          'is-valid':
                            indiv.cellNumber &&
                            validPhoneNumber(indiv.cellNumber),
                          'is-invalid':
                            !requiredField(indiv.cellNumber) ||
                            (indiv.cellNumber &&
                              !validPhoneNumber(indiv.cellNumber) &&
                              cellNumberLoad),
                        }"
                        v-on:keyup="cellNumberLoad = true"
                        v-on:blur="cellNumberLoad = true"
                      />
                      <div class="invalid-feedback">
                        Cell Number is Required!
                      </div>
                    </float-label>
                  </div>
                  <div class="form-group col-md-6">
                    <float-label label="Landline Number" style="width: 100%;">
                      <input
                        type="text"
                        class="form-control uniSelect"
                        :disabled="ChangeCustomUser"
                        name="landline"
                        id="landline"
                        placeholder="Landline Number"
                        data-msg="Please enter your landline number"
                        v-model="indiv.landlineNumber"
                        v-bind:class="{
                          'is-valid':
                            indiv.landlineNumber &&
                            validPhoneNumber(indiv.landlineNumber),
                          'is-invalid':
                            indiv.landlineNumber &&
                            !validPhoneNumber(indiv.landlineNumber),
                        }"
                        v-on:keyup="landlineNumberLoad = true"
                        v-on:blur="landlineNumberLoad = true"
                      />
                      <div class="invalid-feedback">
                        Valid landline number is required!
                      </div>
                    </float-label>
                  </div>
                </div>
              </div>
              <div v-if="indiv.howMarried === 1" class="section-header">
                <h2>Spouse Details</h2>
              </div>
              <div v-if="indiv.howMarried === 1" class="form">
                <div class="form-row mb-2">
                  <div class="form-group col-md-6 mt-2">
                    <float-label label="Spouse Name" style="width: 100%;">
                      <input
                        type="text"
                        class="form-control uniSelect"
                        placeholder="Spouse Name"
                        data-msg="Please enter your spouse's name"
                        v-model="indiv.spouseName"
                        v-bind:class="{ 'is-valid': indiv.spouseName }"
                      />
                    </float-label>
                  </div>
                  <div class="form-group col-md-6 mt-2">
                    <float-label
                      fixed
                      label="Spouse Surname"
                      style="width: 100%;"
                    >
                      <input
                        type="text"
                        class="form-control uniInput"
                        placeholder="Spouse Surname"
                        data-msg="Please enter your spouse's surname"
                        v-model="indiv.spouseSurname"
                        v-bind:class="{ 'is-valid': indiv.spouseSurname }"
                      />
                    </float-label>
                  </div>
                  <div class="form-group col-md-6 mt-2">
                    <float-label label="Spouse Email" style="width: 100%;">
                      <input
                        type="email"
                        class="form-control uniSelect"
                        placeholder="Spouse Email"
                        data-rule="minlen:4"
                        data-msg="Please enter your spouse's email"
                        v-model="indiv.spouseEmail"
                        v-bind:class="{
                          'is-valid': indiv.spouseEmail,
                          'is-invalid':
                            !validEmail(indiv.spouseEmail) && spouseEmailLoad,
                        }"
                        v-on:keyup="spouseEmailLoad = true"
                        v-on:blur="spouseEmailLoad = true"
                      />

                      <div class="invalid-feedback">
                        Valid Email address is Required!
                      </div>
                    </float-label>
                  </div>
                  <div class="form-group col-md-6 mt-2">
                    <float-label label="Spouse Telephone" style="width: 100%;">
                      <input
                        type="text"
                        class="form-control uniSelect"
                        placeholder="Spouse Telephone"
                        data-rule="minlen:4"
                        data-msg="Please enter your spouse's telephone number"
                        v-model="indiv.spouseTelephone"
                        v-bind:class="{ 'is-valid': indiv.spouseTelephone }"
                      />
                    </float-label>
                  </div>
                  <div class="form-group col-md-6 mt-2">
                    <float-label
                      label="Spouse Cell Number"
                      style="width: 100%;"
                    >
                      <input
                        type="text"
                        class="form-control uniSelect"
                        placeholder="Spouse Cell Number"
                        data-rule="minlen:4"
                        data-msg="Please enter your spouse's cellphone number"
                        v-model="indiv.spouseCellnumber"
                        v-bind:class="{ 'is-valid': indiv.spouseCellNumber }"
                      />
                    </float-label>
                  </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 uniInput"
                      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 uniInput"
                      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 uniInput"
                      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 uniInput"
                      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 uniInput"
                      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 uniInput"
                      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"
                      v-bind:class="{
                        'is-valid': 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 uniInput"
                      placeholder="R"
                      type="number"
                      step="any"
                      name="purchasePrice"
                      v-model="sellItem.originalPurchasePrice"
                      v-bind:class="{
                        'is-valid': 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 uniInput"
                      name="occupationDate1"
                      v-model="sellItem.arrivalDate"
                      v-bind:class="{
                        'is-valid': sellItem.arrivalDate,
                        'is-invalid':
                          !requiredField(sellItem.arrivalDate) &&
                          arrivalDateLoad,
                      }"
                      v-on:keyup="arrivalDateLoad = true"
                      v-on:blur="arrivalDaterLoad = true"
                    />
                    <div class="invalid-feedback">
                      Arrival Date is Required!
                    </div>
                  </div>
                  <div class="form-group col-md-2">
                    Departure Date :
                    <input
                      type="date"
                      class="form-control"
                      name="occupationDate2"
                      v-model="sellItem.departureDate"
                      v-bind:class="{
                        'is-valid': sellItem.departureDate,
                        'is-invalid':
                          !requiredField(sellItem.departureDate) &&
                          departureDateLoad,
                      }"
                      v-on:keyup="departureDateLoad = true"
                      v-on:blur="departureDaterLoad = true"
                    />
                    <div class="invalid-feedback">
                      Departure Date is Required!
                    </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 uniInput"
                      type="number"
                      step="any"
                      name="sellingPrice"
                      v-model="sellItem.sellPrice"
                      placeholder="R"
                      v-bind:class="{
                        'is-valid': sellItem.sellPrice,
                        'is-invalid':
                          !requiredField(sellItem.sellPrice) &&
                          sellingPriceLoad,
                      }"
                      v-on:keyup="sellingPriceLoad = true"
                      v-on:blur="sellingPriceLoad = true"
                    />
                    <div class="invalid-feedback">
                      Selling Price is Required!
                    </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 uniInput"
                      type="number"
                      step="any"
                      name="commission"
                      v-model="sellItem.agentCommission"
                      placeholder="R"
                      v-bind:class="{
                        'is-valid': sellItem.agentCommission,
                      }"
                    />
                    <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 align="left" class="custom-control custom-switch mb-2">
                  <div class="row">
                    <div align="center" class="col">
                      <label class="mr-5">
                        I wish to receive future listings and special campaigns?
                      </label>
                      <input
                        type="checkbox"
                        class="custom-control-input"
                        id="customSwitch5"
                        :checked="sellItem.consent"
                        @change="changeConsent"
                      />
                      <label class="custom-control-label" for="customSwitch5">
                        {{ sellItem.consent ? 'Yes' : 'No' }}
                      </label>
                    </div>
                  </div>
                </div>
                <div class="text-center col-12" v-if="CanSave">
                  <button
                    class="btn-white-border"
                    v-if="!sellItem.id"
                    @click="submitSale()"
                  >
                    Submit
                  </button>
                  <button class="btn-white-border" v-else @click="newSale()">
                    New Week
                  </button>
                </div>
                <div class="row">
                  <div v-if="boolMessage" class="row">
                    <div class="col">
                      <alert
                        :text="'Your Information has been updated!'"
                        :type="'SUCCESS'"
                      />
                    </div>
                  </div>
                  <div v-if="boolValidationError" class="row">
                    <div class="col">
                      <alert :text="errorMessage" :type="errorOccurred" />
                    </div>
                  </div>
                </div>
                <!-- <div class="text-center col-12">
              <button class="btn-solid-blue" @click="paygateRedirect()">PayGate</button>
            </div>-->
              </div>
            </div>
          </div>
        </div>
        <div v-if="wait" id="preloader"></div>
      </div>
    </section>
    <div v-else>
      <vue-loaders
        class="my-auto"
        style="
          margin-top: 50px !important;
          margin-bottom: 50px !important;
          margin-left: 50%;
        "
        name="line-spin-fade-loader"
        color="black"
        scale="1"
      ></vue-loaders>
    </div>
  </div>
</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'
import md5 from 'js-md5'

export default {
  name: 'TimeshareToSell',
  props: {
    weekId: {
      default: 0,
    },
  },
  data() {
    return {
      wait: false,
      errorOccurred: '',
      errorMessage: '',
      boolMessage: '',
      boolValidationError: false,
      userLoggedIn: Log.isLoggedIn(),
      profileEmailError: false,
      selectedUserType: '',
      boolLoaded: false,
      regionLoad: false,
      resortLoad: false,
      otherResortLoad: false,
      otherResortRegionLoad: false,
      unitNumberLoad: false,
      moduleLoad: false,
      seasonLoad: false,
      bedroomsLoad: false,
      maxSleepLoad: false,
      levyAmountLoad: false,
      weekTypeLoad: false,
      bankedWithLoad: false,
      selectedUserTypeLoad: false,
      nameLoad: false,
      surnameLoad: false,
      emailAddressLoad: false,
      cellNumberLoad: false,
      landlineNumberLoad: false,
      spouseEmailLoad: false,
      arrivalDateLoad: false,
      departureDateLoad: false,
      sellingPriceLoad: false,
      money: {
        decimal: '.',
        thousands: '',
        prefix: ' ',
        suffix: ' R',
        precision: 2,
        masked: false,
      },
    }
  },

  components: {
    addressAutoComplete,
    Alert,
  },
  mounted() {
    if (this.sellItem.id) {
      this.newSale()
    }
    this.loadData().then(() => {
      setTimeout(() => {
        this.boolLoaded = true
      }, 100)
    })
  },
  created() {
    this.initTimeshare(this.weekId)
    if (this.selectedUserType === '') {
      this.selectedUserType = 'myself'
    }
  },
  computed: {
    ...mapState('timeshare', [
      'resorts',
      'regions',
      'detailedRegion',
      'seasons',
      'result',
      'resortBedrooms',
      'maxSleep',
      'bankedEntities',
      'sellItem',
      'agencies',
      'agents',
      'getTemplate',
    ]),
    ...mapState('individual', ['indiv']),
    ...mapState('authentication', ['isLoggedIn']),
    ...mapState('status', ['statusList']),
    ...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
    },
    ChangeCustomUser() {
      if (this.selectedUserType === 'myself') {
        return true
      } else {
        return false
      }
    },
    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']),
    ...mapActions('status', ['getStatusList']),
    async loadData() {
      await this.initTimeshare(0)
      await this.getIndividual(Log.getUser().id)
      await this.getBanks()
      await this.getStatusList()
    },
    newSale() {
      this.weekId = 0
      this.getBlankWeek()
    },
    capitalizeFirstLetter() {
      this.indiv.name =
        this.indiv.name.charAt(0).toUpperCase() + this.indiv.name.slice(1)
      this.indiv.surname =
        this.indiv.surname.charAt(0).toUpperCase() + this.indiv.surname.slice(1)
    },
    getPubDate() {
      var today = new Date()
      var dd = String(today.getDate()).padStart(2, '0')
      var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
      var yyyy = today.getFullYear()

      today = mm + '/' + dd + '/' + yyyy
      var isoDate = new Date(today).toISOString()
      var fixedDate = new Date(isoDate).setHours(+4)
      var pubDate = new Date(fixedDate).toISOString()
      return pubDate
    },
    generatePayment(id) {
      var myData = []
      // Merchant details
      myData['merchant_id'] = '10000100'
      myData['merchant_key'] = '46f0cd694581a'
      myData['return_url'] =
        'https://www.univateproperties.co.za/#/payments/success'
      myData['cancel_url'] = 'https://www.univateproperties.co.za/#/'
      myData['notify_url'] = 'http://www.yourdomain.co.za/notify_url'
      // Buyer details
      myData['name_first'] = this.indiv.name
      myData['name_last'] = this.indiv.surname
      myData['email_address'] = this.indiv.emailAddress
      // Transaction details
      //myData["m_payment_id"] = "1234";
      myData['amount'] = this.getListingFee.amount.toString()
      myData['item_name'] =
        'Uni-Vate Week sale. Resort: ' +
        this.sellItem.resort +
        ' Referemce: #' +
        id.toString()
      myData['signature'] = this.generateSignature(myData)
      //console.log(paymentObj);
      //axios.post("https://sandbox.payfast.co.za​/eng/process", paymentObj);
      //console.log(myData);
      var paymentObj = Object.assign({}, myData)
      console.log('Twas here')
      console.log(paymentObj)
      this.$router.push({
        name: 'PayFast',
        params: {
          paymentObj: paymentObj,
        },
      })
    },
    generateSignature(data, passPhrase = null) {
      let pfOutput = ''
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          if (data[key] !== '') {
            pfOutput += `${key}=${encodeURIComponent(data[key].trim()).replace(
              /%20/g,
              '+',
            )}&`
          }
        }
      }

      let getString = pfOutput.slice(0, -1)
      if (passPhrase !== null) {
        getString += `&passphrase=${encodeURIComponent(
          passPhrase.trim(),
        ).replace(/%20/g, '+')}`
      }
      var hash = md5.create()
      hash.update(getString)
      console.log(hash.hex())
      console.log(getString)
      return hash.toString()
    },
    submitSale() {
      this.boolError = false
      this.boolValidationError = false
      if (this.userLoggedIn) {
        if (this.validatePage()) {
          console.log('validated')
          //Capitalize the first letter of the first and last name of the indiv
          this.capitalizeFirstLetter()

          //Sets the status of the week to waiting for EFT Payment
          this.statusList.forEach((status) => {
            if (status.code === 'APEFT') {
              this.sellItem.statusId = status.id
            }
          })

          //Check if a custom owner is selected
          if (this.selectedUserType === 'custom') {
            this.sellItem.customOwner = true
          }

          //set the owner of the week to the indiv
          this.sellItem.ownerObject = this.indiv
          //set the publish date equal to today's date
          this.sellItem.pulbishedDate = this.getPubDate()

          //Set the user ID of the week equal to the user who listed the week
          this.sellItem.ownerId = Log.getUser().id
          this.sellItem.weekType = parseInt(this.sellItem.weekType)
          //console.log(this.sellItem.ownerObject);
          console.log(this.sellItem)
          console.log('here')
          //console.log(JSON.stringify(this.sellItem))
          //console.log('here1')
          // console.log(Log.getUser());

          if (!this.boolError) {
            console.log('saveweek')
            this.saveWeek(this.sellItem)
              .then((fulfilled) => {
                this.boolMessage = true
                // this.$router.push({
                //   name: "PaymentOption",
                //   params: { week: fulfilled, indiv: this.indiv }
                // });
                this.$router.push({
                  name: 'EFTPage',
                  params: { week: fulfilled },
                })
                //this.paygateRedirect();
                //this.generatePayment(fulfilled.id);
              })
              .catch((ex) => {
                console.log('error')
                this.errorOccurred = 'ERRORHTML'
                this.errorMessage = ex
              })
          }
        }
      } else {
        //If the user is not logged in they are redirected to the login
        this.$router.push('/user/login')
      }
    },

    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
    },
    changeConsent() {
      this.sellItem.consent = !this.sellItem.consent
    },
    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
      }
      console.log(this.detailedRegion)
      let resortlist = []
      if (this.sellItem.resortCode) {
        //console.log('Here')
        const item = this.detailedRegion.find(
          (detregion) =>
            detregion.children.resortCode === this.sellItem.resortCode,
        )
        if (item) {
          console.log('Item')
          this.sellItem.region = item.region.regionCode
        }
      }
      console.log(this.sellItem.region)
    },
    regionChange() {
      this.sellItem.regionId = this.sellItem.region
        ? this.sellItem.region.id
        : 1
    },
    userChange() {
      this.nameLoad = false
      this.surnameLoad = false
      this.emailAddressLoad = false
      this.cellNumberLoad = false
      this.spouseEmailLoad = false
    },
    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
      }
    },

    requiredField: function (tfield) {
      if (tfield) {
        return true
      } else {
        return false
      }
    },
    validEmail: function (email) {
      var re = /(.+)@(.+){2,}\.(.+){2,}/
      if (email) {
        return re.test(email.toLowerCase())
      } else {
        return re.test(email)
      }
    },
    validPhoneNumber(number) {
      if (number) {
        const rx = /^\(?\d{3}\)?[-\s]?\d{3}[-\s]?\d{4}$/
        // const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
        return rx.test(String(number))
      } else {
        return true
      }
    },
    validatePage: function () {
      console.log('validatePage')
      if (
        this.sellItem.region &&
        this.sellItem.resort &&
        this.sellItem.unitNumber &&
        this.sellItem.module &&
        this.sellItem.season &&
        this.sellItem.bedrooms &&
        this.sellItem.maxSleep &&
        this.sellItem.weekType &&
        this.sellItem.levyAmount &&
        this.sellItem.arrivalDate &&
        this.sellItem.departureDate &&
        this.sellItem.sellPrice
      ) {
        if (this.selectedUserType === 'custom') {
          if (
            this.indiv.name &&
            this.indiv.surname &&
            this.indiv.emailAddress &&
            this.indiv.cellNumber &&
            this.validEmail(this.indiv.emailAddress) &&
            this.validPhoneNumber(this.indiv.cellNumber) &&
            this.validPhoneNumber(this.indiv.landlineNumber)
          ) {
            console.log('passed custom')
            this.errorOccurred = ''
            this.errorMessage = ''
            this.boolValidationError = true
            return true
          } else {
            console.log('failed custom')
            this.nameLoad = true
            this.surnameLoad = true
            this.emailAddressLoad = true
            this.cellNumberLoad = true
            this.boolValidationError = true
            this.errorOccurred = 'ERROR'
            this.errorMessage =
              'Please check form and correct all input fields!'
            return false
          }
        } else {
          this.errorOccurred = ''
          this.errorMessage = ''
          this.boolValidationError = true
          return true
        }
      } else {
        this.regionLoad = true
        this.resortLoad = true
        this.otherResortLoad = true
        this.otherResortRegionLoad = true
        this.unitNumberLoad = true
        this.moduleLoad = true
        this.seasonLoad = true
        this.bedroomsLoad = true
        this.maxSleepLoad = true
        this.levyAmountLoad = true
        this.weekTypeLoad = true
        this.bankedWithLoad = true
        this.arrivalDateLoad = true
        this.departureDateLoad = true
        this.sellingPriceLoad = true
        if (this.selectedUserType === 'custom') {
          this.nameLoad = true
          this.surnameLoad = true
          this.emailAddressLoad = true
          this.cellNumberLoad = true
          this.spouseEmailLoad = true
        }
        this.boolValidationError = true
        this.errorOccurred = 'ERROR'
        this.errorMessage = 'Please check form and correct all input fields!'
        return false
      }
    },
  },
}
</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>