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 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-solid-blue">
              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.amount = this.item.offer;
      this.bidItem.comment = this.item.comment;
      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.";
    },
    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"])
  },
  mounted() {
    this.getTemplate();
  },
  watch: {
    item() {
      this.isSaved = false;
      this.canEdit = this.item.statusCode === "E1";
    }
  }
};
</script>

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