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/pages/pa/

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="">

        <Address :form="form" address-field="residential_address"/>

        <div class="form-button-wrapper">
          <nuxt-link to="/pa/step-1" 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 Owner
          </nuxt-link>
          <button type="submit" class="btn btn-form-green" @click.prevent="frontendFormSubmitHandler"
                  :disabled=" invalid || !readyToContinue">
            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>

    <address-confirmation @goNext="goNext"
                          @close-address-confirmation-modal="showAddressConfirmationModal=false"
                          @setSelectedAddress="setSelectedAddress"
                          :original-address="form.residential_address"
                          v-if="showAddressConfirmationModal"/>

  </div>
</template>

<script>

import forms from "@/mixins/forms";
import Address from "@/components/Forms/Address";
import AddressConfirmation from "@/components/Forms/AddressConfirmation";

export default {
  name: "step-2.vue",
  middleware({store: {state}, redirect, route: {path}}) {

    if (Object.keys(state.step1Form).length === 0) {
      return redirect('/pa/step-1');
    }

  },
  components: {AddressConfirmation, Address},
  mixins: [forms],
  data() {
    let step2Form = this.$copyObject(this.$store.state.step2Form);

    return {
      showAddressConfirmationModal: false,
      readyToContinue: true,
      form: this.$form({
        state_code: 'PA',
        residential_address: step2Form.residential_address || {
          street: '',
          city: '',
          address_2: '',
          country_code: 'US',
          zip: '',
          state_code: 'PA'
        },
      }),
    }
  },
  methods: {
    submit() {
      this.showAddressConfirmation();
    },
    showAddressConfirmation() {
      this.showAddressConfirmationModal = true
    },
    goNext() {
      this.$store.commit('SET_STEP2_FORM', this.form.data());
      this.storeSavedSession('step-2', '/pa/step-3', this.form.data());
    },
    setSelectedAddress(selectedAddress) {
      this.form.residential_address = this.$copyObject(selectedAddress);
    }
  }
}
</script>

<style scoped>

</style>