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/az/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <h3 class="">Confirm Address</h3>
    <hr>

    <p>
          <span class="d-block mt-1 ml-5">
          RECIPIENT <b>{{ apiAddress.recipient }}</b>
            <br>
            ADDRESS <b>{{ apiAddress.address }}</b>
            <br>
            ADDRESS ZIP CODE <b>{{ apiAddress.zip_code }}</b>
          </span>
    </p>

    <p class="mt-3 alert alert-danger">
      <b style="font: 600 16px / 19px sfProDisplay-Regular">
        Is the information above your current address with the MVD?
      </b>
    </p>

    <div class="row">
      <div class="col-md-12">
        <button type="submit" class="btn btn-form-green w-100" @click.prevent="goNext">
          Yes, my address is up to date.
          <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>
    </div>

    <div class="row mt-2">

      <div class="col-md-12">
        <a href="#" class="btn btn-outline-secondary w-100"
           @click.prevent="dontProcessed">
          No, I have recently moved and need to update my address.
        </a>
      </div>
    </div>

    <div class="form-button-wrapper">
      <nuxt-link to="/az/step-2" 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 vehicle
      </nuxt-link>

    </div>

    <b-modal id="cantProcessed-modal" hide-footer hide-header
             modal-class="address-confirm-modal"
             no-close-on-backdrop>
      <div class="text-center">
        <p class="text-danger text-center mt-3">
          <b> Danger! </b>We cannot process your order. Please visit official MVD website <a
          href="https://servicearizona.com/" target="_blank">Here</a> to update your address first.
          <br/>
          <b-button class="dark-btn mt-4" @click="$bvModal.hide('cantProcessed-modal')">Close</b-button>
        </p>
      </div>
    </b-modal>

  </div>

</template>

<script>
export default {
  name: "address-confirmation",
  middleware({store: {state}, redirect, route: {path}}) {
    if (Object.keys(state.apiAddress).length === 0) {
      return redirect('/az/step-1');
    }
  },
  methods: {
    dontProcessed() {
      this.$bvModal.show('cantProcessed-modal');
    },
    goNext() {
      this.$router.push({path: '/az/step-3'});
    }

  },
  computed: {
    apiAddress() {
      return this.$store.state.apiAddress;
    }
  }
}
</script>

<style scoped>

</style>