Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/components/Pages/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>

    <h1>Information</h1>
    <p class="description">Enter the Address where you would like your Order Shipped.</p>
    <ValidationObserver v-slot="{ invalid }" ref="form">
      <form action="">

        <step1-fields :form="form"/>


        <div class="form-button-wrapper">
          <nuxt-link to="/" class="btn-return">
            <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5 9L1 5L5 1" stroke="#182D40" stroke-width="1.2" stroke-linecap="round"
                    stroke-linejoin="round"/>
            </svg>
            Return to State selection
          </nuxt-link>
          <button type="submit" class="btn btn-form-green" @click.prevent="frontendFormSubmitHandler"
                  :disabled=" invalid || !readyToContinue">
            <b-spinner class="mr-1" small v-if="!readyToContinue"></b-spinner>
            Continue
            <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1.5L6 6.5L1 11.5" stroke="white" stroke-width="1.2" stroke-linecap="round"
                    stroke-linejoin="round"/>
            </svg>
          </button>


        </div>

        <FormErrorMsg :msg="formErrorMsg"/>

      </form>
    </ValidationObserver>

  </div>

</template>

<script>
import forms from "@/mixins/forms";
import Step1Fields from "@/components/Forms/Step1Fields";
import savedSessions from "@/mixins/savedSessions";

export default {
  name: "Step1Page",
  components: {Step1Fields},
  mixins: [forms, savedSessions],
  data() {

    let step1Form = this.$copyObject(this.$store.state.step1Form);

    return {
      readyToContinue: true,
      form: this.$form({
        first_name: step1Form.first_name || '',
        middle_name: step1Form.middle_name || '',
        company_name: step1Form.company_name || '',
        last_name: step1Form.last_name || '',
        email: step1Form.email || '',
        phone: step1Form.phone || ''
      })
    }
  },
  methods: {
    submit() {
      this.readyToContinue = false;

      this.$store.commit('SET_STEP1_FORM', this.form.data());

      this.$axios.post(`orders/check-prospects-orders`, {
        formData: {...this.form.data()}
      }).then(({data}) => {
        this.setStoredOrderData(data.data);
      }).catch(this.catchError)
        .finally(() => this.readyToContinue = true);
    },
    setStoredOrderData(order) {
      this.$store.commit('SET_ORDER_ID', order.id);
      this.$store.commit('SET_CLIENT_IP_ADDRESS', order.ip_address);
      this.$store.commit('SET_ZIP_CODE', order.zip_code);

      if (this.handleSavedSession(order) === false) {
        this.$router.push({path: `/${this.currentStateCode}/step-2`});
      }

    }
  },
  mounted() {
    this.handleSavedOrder();
  },
  watch: {
    'form.phone'() {
      this.form.phone = this.form.phone
        .replace(/[^0-9]/g, '')
        .replace(/^[01]/g, '');
    }
  }
}
</script>

<style scoped>

</style>