<template>

  <form>

    <section class="d-flex flex-column justify-content-between h-100 setup-content animated">

      <div class="d-flex flex-column">

        <div class="d-flex flex-column justify-content-around px-2">

          <mdb-input id="contact_name"

                     :customValidation="true"

                     v-model="name"

                     :isValid="!$v.name.$invalid"

                     :label="trans('marketplaces.checkout.identification.name.label')" 

                     icon="user">

          </mdb-input>

          <mdb-input id="contact_email"

                     :customValidation="true"

                     v-model="email"

                     :isValid="!$v.email.$invalid"

                     :label="trans('marketplaces.checkout.identification.email.label')" 

                     icon="envelope">

          </mdb-input>

        </div>

​

        <div class="d-flex flex-column justify-content-around px-2">

          <mdb-input id="contact_phone_number" 

                     :customValidation="true"

                     v-model="phoneNumber"

                     type="tel"

                     :isValid="!$v.phoneNumber.$invalid"

                     :label="trans('marketplaces.checkout.identification.phone_number.label')" 

                     icon="phone"

                     v-mask="['(##) ####-####','(##) #####-####']">

          </mdb-input>

          <mdb-input id="contact_doc" 

                     :customValidation="true"

                     v-model="document"

                     type="tel"

                     :isValid="!$v.document.$invalid"

                     :label="trans(`marketplaces.checkout.identification.${settings.document_type}.label`)" 

                     icon="id-card"

                     v-mask="documentMask">

          </mdb-input>

        </div>

      </div>

      <div class="d-flex step-buttons">

        <button

          type="button"

          class="btn btn-guru btn-guru--next btn-guru--step-1 btn-rounded w-100"

          @click.prevent="submit"

        >

          <span class="d-flex align-items-center justify-content-center">

              {{trans('marketplaces.checkout.next')}}

            <i class="uil uil-angle-right"></i>

          </span>

        </button>

      </div>

    </section>

  </form>

</template>

​

​

import { mdbInput } from "mdbvue";

import { required, email } from "vuelidate/lib/validators";

import {

  brDocumentIsValid,

  brPhoneNumberIsValid

} from "../../../../common/brValidators";

import { emailValidator, fullNameValidator } from "../../../../common/globalValidators";

​

export default {

  name: "brContact",

  components: {

    mdbInput

  },

  props: ["contact", "settings"],

  data() {

    return {

      name: this.contact.name + "",

      email: this.contact.email + "",

      phoneNumber: this.contact.phone.number + "",

      document: this.contact.document + "",

      submitting: false

    };

  },

  computed: {

    documentMask() {

      switch (this.settings.document_type) {

        case "cpf":

          return "###.###.###-##";

        case "cnpj":

          return "##.###.###/####-##";

        case "cpfcnpj":

          return "###.###.###-##,##.###.###/####-##";

        default:

          return "###.###.###-##";

      }

    }

  },

  validations() {

    return {

      name: {

        required,

        fullNameValidator

      },

      email: {

        required,

        email,

        emailValidator: emailValidator(this.settings.transactionId)

      },

      phoneNumber: {

        required,

        brPhoneNumberIsValid

      },

      document: {

        required,

        brDocumentIsValid: brDocumentIsValid(this.settings.document_type)

      }

    }

  },

  mounted() {

    if (this.name) {

      this.$v.name.$touch();

    }

    if (this.email) {

      this.$v.email.$touch();

    }

    if (this.phoneNumber) {

      this.$v.phoneNumber.$touch();

    }

    if (this.document) {

      this.$v.document.$touch();

    }

  },

  methods: {

    submit() {

      if (this.$v.$invalid) {

        console.log("inválido");

        return;

      }

​

      let contact = {

        email: this.email,

        name: this.name,

        phone: {

          country_code: '+55',

          number: this.phoneNumber

        },

        document: this.document

      };

​

      this.$emit("validated", contact);

​

      console.log("válido");

    }

  }

};