demo.js

// @flow
import Vue from 'vue';
import component from 'vue-class-component';
import type { ErrorBag, ValidatorType } from 'vee-validate';
import get from 'lodash/get';
import api from 'src/api';
import config from 'src/config';
import { notify } from 'src/helpers/notifications';


type LeadEntryType = {
  fullName: string,
  email: string,
  phoneNumber: string,
  zip: string,
}

class ToolClickToCall extends Vue {
  errors: ErrorBag
  $validator: ValidatorType
  lead: LeadEntryType = {
    fullName: '',
    email: '',
    phoneNumber: '',
    zip: '',
  }

  get isFormValid() { return !Object.values(this.lead).some(x => !x) && !this.errors.count(); }

  async handleSubmit() {
    if (!await this.$validator.validateAll()) return;
    const { clickToCall } = config;
    try {
      await api().voip.clickToCall({
        to: clickToCall.phoneNumber,
        from: this.lead.phoneNumber.replace(/[^\d]/g, ''),
        say: clickToCall.say,
        play: clickToCall.play,
      });
      notify({
        style: 'success',
        position: 'bottom right',
        title: 'Success',
        text: 'You will receive call soon',
        delay: 8000,
      });
    } catch (e) {
      const message = get(e, 'response.data.message', e.message);
      notify({
        style: 'error',
        position: 'bottom right',
        title: 'Error',
        text: message,
        delay: 8000,
      });
    }
  }
}

export default component()(ToolClickToCall);