UnivateProperties/src/components/processFlow/makeOffer.vue

<template>
  <!-- eslint-disable max-len -->
  <div style="padding-left: 30px; padding-right: 30px; padding-bottom: 30px;">
    <div v-if="!isLoggedIn">
      <div class="container col-md-10">
        <p class="alert myError">Please Login to add a property</p>
      </div>
      <button
        type="button"
        class="btn btn-b-n"
        style="width: 150px; height: 40px;"
        data-dismiss="modal"
      >
        OK
      </button>
    </div>
    <div v-else>
      <div v-if="!isSaved">
        <br />
        <div v-if="isProperty">
          <div class="form-group row">
            <div style="text-align: left;">
              <div class="title-box-d">
                <h3 class="title-d">{{ item.shortDescription }}</h3>
              </div>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-12" style="text-align: left;">
              <div v-html="item.description"></div>
            </div>
          </div>
        </div>
        <div v-if="!isProperty">
          <div class="form-group row">
            <div style="text-align: left;">
              <div class="intro-content">
                <h2>
                  {{
                    item.resort.resortName
                      ? item.resort.resortName
                      : item.resort
                  }}
                </h2>
              </div>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-12">
              <label for="resortunit">Unit:</label>
              <h5>{{ item.unitNumber }}</h5>
            </div>
            <div class="col-md-12">
              <label for="resortWeek">Module / Week Number:</label>
              <h5>{{ item.weekNumber }}</h5>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-12">
            <label>Current Price:</label>
            <h4>{{ item.sellPrice | toCurrency }}</h4>
          </div>
          <div class="col-md-12">
            <label>Offer:</label>

            <input
              class="form-control"
              type="number"
              step="any"
              id="minPrice"
              name="minPrice"
              v-model="item.offer"
              :disabled="!isMakeOffer"
            />
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-12">
            <label>Comments</label>
            <textarea
              class="form-control editor form-control-lg form-control-a"
              name="description"
              v-model="item.comment"
              :disabled="!isMakeOffer"
            ></textarea>
          </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="customSwitch1"
                :checked="item.consent"
                @change="changeConsent"
              />
              <label class="custom-control-label" for="customSwitch1">
                {{ item.consent ? 'Yes' : 'No' }}
              </label>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-12">
            <p>
              *Occupation for the current year is not guaranteed, Uni-Vate
              Properties will confirm upon reply.
            </p>
          </div>
        </div>
      </div>
      <div v-if="!isSaved" class="container">
        <div class="row">
          <div algin="center" class="col">
            <button
              v-if="isMakeOffer"
              type="button"
              @click="SendOffer()"
              class="btn-white-border"
            >
              Send Offer
            </button>
            <button
              v-if="!isMakeOffer && !isDecline && canEdit"
              type="submit"
              @click="Accept()"
              class="btn btn-b-n"
              style="width: 150px; height: 40px;"
            >
              Accept
            </button>
            <button
              v-if="!isMakeOffer && !isDecline && canEdit"
              type="button"
              @click="Decline()"
              class="btn btn-b-n"
              style="width: 150px; height: 40px;"
            >
              Decline
            </button>
          </div>
        </div>
      </div>
      <div v-if="isDecline || item.statusCode === 'E3'" class="form-group row">
        <div class="col-md-12">
          <br />
          <label>Decline Reason</label>
          <textarea
            class="form-control editor form-control-lg form-control-a"
            name="description"
            v-model="item.declineReason"
            :disabled="item.statusCode === 'E3'"
          ></textarea>
        </div>
      </div>
      <button
        v-if="isDecline"
        type="button"
        @click="Complete()"
        class="btn btn-b-n"
        style="width: 150px; height: 40px;"
      >
        Complete
      </button>
      <div v-if="isSaved">
        <div class="form-group row">
          <br />
          <div class="container col-md-10">
            <p :class="[isInfo ? 'alert myInfo' : 'alert myWarning']">
              {{ message }}
            </p>
          </div>
        </div>
        <button
          v-if="isSaved"
          type="button"
          class="btn btn-b-n"
          style="width: 150px; height: 40px;"
          data-dismiss="modal"
        >
          OK
        </button>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from 'vuex'
import Log from '../../assets/Log'

export default {
  name: 'MakeOffer',
  props: {
    isMakeOffer: Boolean,
    isProperty: Boolean,
    canEdit: Boolean,
    item: Object,
    bidId: Number,
    updateItem: Function,
  },
  data() {
    return {
      isDecline: false,
      isSaved: false,
      message: '',
      isInfo: true,
      isLoggedIn: Log.isLoggedIn(),
    }
  },
  methods: {
    ...mapActions('bid', ['getTemplate', 'saveBid', 'acceptBid', 'declineBid']),
    SendOffer() {
      //alert("Under Development");
      this.bidItem.id = 0
      this.bidItem.userId = this.item.userId
      this.bidItem.amount = this.item.offer
      this.bidItem.comment = this.item.comment
      this.bidItem.consent = this.item.consent
      if (this.isProperty) {
        this.bidItem.propertyId = this.item.id
      } else {
        this.bidItem.timeshareWeekId = this.item.id
        if (this.item.isTender) {
          this.bidItem.tenderWeek = this.item
        }
      }
      this.saveBid(this.bidItem)

      this.isSaved = true
      this.isInfo = true
      this.message = 'Offer was submitted.'
    },
    changeConsent() {
      this.item.consent = !this.item.consent
    },
    Accept() {
      this.acceptBid(this.item.id)
      this.isSaved = true
      this.message = 'Offer Accepted.'
      this.isInfo = true
    },
    Decline() {
      this.isDecline = true
    },
    Complete() {
      this.isDecline = false

      const decline = {
        id: this.item.id,
        comment: this.item.declineReason,
      }

      this.declineBid(decline)
      this.isSaved = true
      this.message = 'Offer Declined.'
      this.isInfo = false
    },
  },
  computed: {
    ...mapState('bid', ['bidItem']),
  },
  created() {
    this.item.consent = true
  },
  mounted() {
    this.getTemplate()
  },
  watch: {
    item() {
      this.isSaved = false
      this.canEdit = this.item.statusCode === 'E1'
    },
  },
}
</script>

<style lang="scss" scoped></style>