UnivateProperties/src/components/shared/contactUsSection.vue

<template>
  <div>
    <h4 align="left" class="contactHeader">Send us a message</h4>
    <div class="form">
      <div v-if="boolValidationError" class="row">
        <div class="col">
          <alert :text="errorMessage" :type="errorOccurred" />
        </div>
      </div>
      <div class="row">
        <div class="form-group col-md-6">
          <float-label label="Name" style="width: 100%;">
            <input
              type="text"
              id="name"
              class="form-control uniInput my-2"
              v-model="name"
              v-bind:class="{
                'is-valid': name,
                'is-invalid': !requiredField(name) && nameLoad,
              }"
              v-on:keyup="nameLoad = true"
              v-on:blur="nameLoad = true"
              placeholder="Name"
            />
            <div class="invalid-feedback">Name is required!</div>
          </float-label>
        </div>
        <div class="form-group col-md-6">
          <float-label label="Email" style="width: 100%;">
            <input
              type="email"
              id="contactemail"
              v-model="contactemail"
              class="form-control uniInput my-2"
              v-bind:class="{
                'is-valid': contactemail,
                'is-invalid': !validEmail(contactemail) && contactemailLoad,
              }"
              v-on:keyup="contactemailLoad = true"
              v-on:blur="contactemailLoad = true"
              placeholder="Email"
            />
            <div class="invalid-feedback">Valid email address is required!</div>
          </float-label>
        </div>
        <div class="form-group col-md-6">
          <float-label label="Phone Number" style="width: 100%;">
            <input
              type="text"
              id="phone"
              v-model="phone"
              class="form-control uniInput my-2"
              v-bind:class="{ 'is-valid': phone }"
              placeholder="Phone Number"
            />
          </float-label>
        </div>
        <div class="form-group col-md-6">
          <float-label label="Property" style="width: 100%;">
            <input
              type="text"
              id="property"
              v-model="property"
              class="form-control uniInput my-2"
              v-bind:class="{ 'is-valid': property }"
              placeholder="Property"
            />
          </float-label>
        </div>
      </div>
      <div class="form-group">
        <label v-if="!mailSource" class="uniSelectLabel" for="SourceSelect">
          Heard About
        </label>
        <float-label label="Heard About" style="width: 100%;">
          <select
            id="SourceSelect"
            class="form-control uniSelect"
            v-model="mailSource"
            @change="sourceSelect()"
            v-bind:class="{
              'is-valid': mailSource,
              'is-invalid': !requiredField(mailSource) && mailSourceLoad,
            }"
            v-on:keyup="mailSourceLoad = true"
            v-on:blur="mailSourceLoad = true"
          >
            <option
              v-for="(source, s) in contactUsSources"
              :key="s"
              :value="source"
            >
              {{ source.description }}
            </option>
          </select>
          <div class="invalid-feedback">
            Please select a source!
          </div>
        </float-label>
      </div>

      <div class="form-group">
        <float-label label="Message" style="width: 100%;">
          <textarea
            type="text"
            id="message"
            rows="5"
            class="form-control uniInput my-2"
            v-model="message"
            v-bind:class="{
              'is-valid': message,
              'is-invalid': !requiredField(message) && messageLoad,
            }"
            v-on:keyup="messageLoad = true"
            v-on:blur="messageLoad = true"
            placeholder="Message"
          ></textarea>
          <div class="invalid-feedback">Message is required!</div>
        </float-label>
      </div>
      <div class="text-center">
        <button class="btn-white-border" @click="sendMail()">Send</button>
      </div>
      <div v-if="boolSent">
        <alert :text="alertMsg" :type="'SUCCESS'" />
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from 'vuex'
import axios from 'axios'
import alert from '../shared/alert'

export default {
  components: {
    alert,
  },
  data() {
    return {
      sourceObj: {},
      source: '',
      mailSource: '',
      mailSourceId: '',
      alertMsg: 'Sent! You can expect a reply soon!',
      name: '',
      contactemail: '',
      phone: '',
      property: '',
      message: '',
      boolSent: false,
      errorOccurred: '',
      errorMessage: '',
      boolValidationError: false,
      nameLoad: false,
      contactemailLoad: false,
      messageLoad: false,
      mailSourceLoad: false,
    }
  },
  mounted() {
    this.boolSent = false
    console.log('Email')
    console.log(this.contactemail)
    this.getContactUsSources()
  },
  computed: {
    ...mapState('contactUsSources', ['contactUsSources']),
  },
  methods: {
    ...mapActions('contactUsSources', ['getContactUsSources']),
    sourceSelect() {
      console.log('sourceSelect')
      console.log(this.mailSource.id)
      console.log(this.mailSource)
      this.mailSourceId = this.mailSource ? this.mailSource.id : 1
    },
    async sendMail() {
      if (this.validatePage()) {
        var mailObj = {
          name: this.name,
          email: this.contactemail,
          phone: this.phone,
          property: this.property,
          message: this.message,
          mailSourceId: this.mailSourceId,
        }
        await axios
          .post('/api/mail/0', mailObj)
          .then((response) => {
            //console.log('Response');
            //console.log(response);
            this.boolSent = true
          })
          .catch((err) => {
            this.boolValidationError = true
            this.errorOccurred = 'ERROR'
            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
            if (err) {
              //console.log('Error');
              //console.log(err.response.status);
              if (err.response.status) {
                this.boolSent = true
                this.boolValidationError = false
              } else {
                this.boolSent = false
              }
            } else {
              console.log('no err')
              boolSent = false
            }
          })
        this.name = ''
        this.contactemail = ''
        this.phone = ''
        this.property = ''
        this.message = ''
        this.mailSource = ''
        this.nameLoad = false
        this.contactemailLoad = false
        this.messageLoad = false
        this.mailSourceLoad = false
      }
    },
    countDownChanged(dismissCountDown) {
      this.dismissCountDown = dismissCountDown
    },
    validatePage: function () {
      //console.log('validatePage')
      if (this.name && this.contactemail && this.mailSource) {
        this.errorOccurred = ''
        this.errorMessage = ''
        this.boolValidationError = false
        return true
      } else {
        this.boolValidationError = true
        this.nameLoad = true
        this.contactemailLoad = true
        this.mailSourceLoad = true
        this.messageLoad = true
        this.errorOccurred = 'ERROR'
        this.errorMessage = 'Please check form and correct all input fields!'
        return false
      }
    },
    requiredField: function (tfield) {
      if (tfield) {
        return true
      } else {
        return false
      }
    },
    validEmail: function (temail) {
      var re = /(.+)@(.+){2,}\.(.+){2,}/
      return re.test(temail.toLowerCase())
    },
  },
}
</script>

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