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

<template>
  <div class="container pt-5">
    <div class="row mb-8">
      <div class="col-md-6">
        <h3>Mooikloof Office Park</h3>
        <p>
          The cream of the crop, no costs were spared on the finishing touches of this beautiful
          office. This 160m2 office is ideally situated in Pretoria East in the hub of business
          expansion for Pretoria. Two superb, air-conditioned ground floor units divided only by
          glass and completed with two small recording studios. The Space is currently used for
          corporate boardroom and training centre functions and can accommodate up to 25 delegates.
          Stunning finishes y interior designer complete the unit with style and class. The perfect
          address and office for the established professional for the training centre of your
          dreams!
        </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">
        <form>
          <div class="form-group row">
            <div class="form-group col-md-6">
              <input
                type="text"
                name="name"
                class="form-control"
                id="Unit"
                placeholder="Unit"
                data-rule="minlen:4"
                v-model="Unit"
              />
              <div class="validation"></div>
            </div>
            <div class="form-group col-md-6">
              <input
                type="text"
                name="name"
                class="form-control"
                id="Price"
                placeholder="Price"
                data-rule="minlen:4"
                v-model="Price"
              />
              <div class="validation"></div>
            </div>
            <div class="form-group col-md-6">
              <input
                type="text"
                name="name"
                class="form-control"
                id="Size"
                placeholder="Size"
                data-rule="minlen:4"
                v-model="Size"
              />
              <div class="validation"></div>
            </div>
            <div class="form-group col-md-6">
              <input
                type="text"
                name="name"
                class="form-control"
                id="Suburb"
                placeholder="Suburb"
                data-rule="minlen:4"
                v-model="Suburb"
              />
              <div class="validation"></div>
            </div>
            <div class="form-group col-md-12">
              <input
                type="text"
                name="name"
                class="form-control"
                id="Name"
                placeholder="Name"
                data-rule="minlen:4"
                v-model="Name"
              />
              <div class="validation"></div>
            </div>
            <div class="form-group col-md-12">
              <input
                type="text"
                name="name"
                class="form-control"
                id="ContactNumber"
                placeholder="ContactNumber"
                data-rule="minlen:4"
                v-model="ContactNumber"
              />
              <div class="validation"></div>
            </div>
            <div class="form-group col-md-12">
              <input
                type="text"
                name="name"
                class="form-control"
                id="Email"
                placeholder="Email"
                data-rule="minlen:4"
                v-model="email"
              />
              <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>
        </form>
      </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,
      phone: null,
      property: null,
      message: null,
      boolSent: false
    };
  },
  mounted() {
    this.boolSent = false;
  },
  methods: {
    async sendMail() {
      var mailObj = {
        toAddress: "lenes@provision-sa.com",
        fromAddress: "jlouw365@gmail.com",
        name: this.name,
        email: this.email,
        phone: this.phone,
        property: this.property,
        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;
    }
  }
};
</script>

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