UnivateProperties/src/components/property/enquireNow/contentSection.vue

<template>
  <div class="container pt-5">
    <div class="row mb-8">
      <div class="col-md-6">
        <h3>{{ property.propertyName }}</h3>
        <p v-html="property.description"></p>
        <p>
          <strong>View by Appointment only!</strong>
        </p>
        <br />
        <p></p>
        <!-- To arrange a viewing contact Mynie:
        <div class="col-md-4">
          <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a><br />
          <a href="tel:0124921238">+27 (0) 12 492 1238</a>
        </div>-->
      </div>
      <div class="col-md-6">
        <div class="form-group row">
          <div class="form-group col-md-6 mb-4">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control"
                id="Unit"
                placeholder="Unit"
                data-rule="minlen:4"
                v-model="property.unit"
                disabled
              />
            </float-label>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-6">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control"
                id="Price"
                placeholder="Price"
                data-rule="minlen:4"
                v-model="property.price"
                disabled
              />
            </float-label>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-6">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control"
                id="Size"
                placeholder="Size"
                data-rule="minlen:4"
                v-model="size"
                disabled
              />
            </float-label>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-6 mb-4">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control"
                id="Suburb"
                placeholder="Suburb"
                data-rule="minlen:4"
                v-model="property.suburb"
                disabled
              />
            </float-label>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-12 mb-4">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control"
                id="Name"
                placeholder="Name"
                data-rule="minlen:4"
                v-model="name"
              />
            </float-label>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-12 mb-4">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control"
                id="ContactNumber"
                placeholder="ContactNumber"
                data-rule="minlen:4"
                v-model="contactNumber"
              />
            </float-label>

            <div class="validation"></div>
          </div>
          <div class="form-group col-md-12">
            <float-label>
              <input
                type="text"
                name="name"
                class="form-control"
                id="Email"
                placeholder="Email"
                data-rule="minlen:4"
                v-model="email"
              />
            </float-label>

            <div class="validation"></div>
          </div>
        </div>
        <div class="text-center">
          <button class="btn-solid-blue" @click="sendMail()">ENQUIRE NOW</button>
        </div>
        <div v-if="boolSent">
          <alert :text="alertMsg" :type="'SUCCESS'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import axios from "axios";
import alert from "../../shared/alert";

export default {
  components: {
    alert,
  },
  data() {
    return {
      alertMsg: "Sent! You can expect a reply soon!",
      name: null,
      email: null,
      contactNumber: null,
      property: null,
      message: null,
      boolSent: false,
    };
  },
  mounted() {
    this.boolSent = false;
  },
  props: {
    property: {},
  },
  methods: {
    async sendMail() {
      var mailObj = {
        toAddress: "jlouw365@gmail.com",
        fromAddress: "jlouw365@gmail.com",
        name: this.name,
        email: this.email,
        phone: this.contactNumber,
        property: this.property.id.toString(),
        message: this.message,
      };

      const response = await axios.post("/api/mail/1", mailObj);

      if (response.status === 200) {
        this.boolSent = true;
      } else {
        console.log("Error");
      }
    },
    countDownChanged(dismissCountDown) {
      this.dismissCountDown = dismissCountDown;
    },
  },
  created() {
    this.$emit("Loaded", true);
  },
};
</script>

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