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>Tell us about your vehicle</h1>
    <ValidationObserver v-slot="{ invalid }" ref="form">
      <form action="">
        <offline-vehicle-form v-for="(offlinePlate,index) in  offlineFormPlates"
                              :plate="offlinePlate"
                              :index="index"
                              :key="`${index}_offline_vehicle_form`"
                              :wrapper-class="{ 'another-vehicle-wrapper':index >0 }"/>

        <template v-if="!isEmptyEstimates">
          <div class="add-new-vehicle" v-if="!showUnselectedPlates && unselectedPlates.length">
            <a href="#" @click.prevent="showUnselectedPlates=true">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.5" y="0.5" width="19" height="19" rx="1.5" fill="white" stroke="#DCDCDC"/>
                <path d="M10 6.37207V13.5156" stroke="#182D40" stroke-linecap="round"/>
                <path d="M13.5723 9.94385L6.42869 9.94385" stroke="#182D40" stroke-linecap="round"/>
              </svg>
              Add another vehicle to this renewal
            </a>
          </div>

          <template v-if="showUnselectedPlates">
            <plate-box v-for="(unselectedPlat,index) of unselectedPlates"
                       :plate="unselectedPlat"
                       :key="`unselected_plate_${index}`"/>
          </template>

        </template>

        <template v-else>
          <div class="add-new-vehicle">
            <a href="#" @click.prevent="addMoreVehicles">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.5" y="0.5" width="19" height="19" rx="1.5" fill="white" stroke="#DCDCDC"/>
                <path d="M10 6.37207V13.5156" stroke="#182D40" stroke-linecap="round"/>
                <path d="M13.5723 9.94385L6.42869 9.94385" stroke="#182D40" stroke-linecap="round"/>
              </svg>
              Add another vehicle to this renewal
            </a>
          </div>

        </template>

        <div class="form-button-wrapper">
          <nuxt-link :to="isEmptyEstimates ?  '/pa/step-3': '/pa/select-offline-plates'" 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 terms & conditions
          </nuxt-link>
          <button type="submit" class="btn btn-form-green"
                  :disabled="!offlineFormPlates.length"
                  @click.prevent="frontendFormSubmitHandler">
            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>

      </form>
    </ValidationObserver>
  </div>
</template>

<script>
import OfflineVehicleForm from "@/components/States/PA/OfflineVehicleForm";
import forms from "@/mixins/forms";
import PlateBox from "@/components/Forms/PlateBox";

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

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

  },
  mixins: [forms],
  components: {PlateBox, OfflineVehicleForm},
  data() {
    return {
      showUnselectedPlates: false
    }
  },
  methods: {
    submit() {

      let offlineFormPlates = this.offlineFormPlates;

      for (let index in offlineFormPlates) {
        this.$eventBus.$emit(`submitOfflineStep_${index}`);
      }

      let payload = {
        order_type: this.isEmptyEstimates ? 'unverified' : 'verified',
        storedPlates: offlineFormPlates
      }

      this.storeSavedSession('offline-step', '/pa/step-5', payload);
    },
    addMoreVehicles() {
      this.$store.commit('SET_OFFLINE_FORM_PLATE', {
        index: this.offlineFormPlates.length,
        'license_plate': '',
        'license_make': '',
        'license_plate_label': '',
        offline_processing: true,
        'prices': [{
          price: ''
        }],
      });
    }
  },
  computed: {
    offlineFormPlates() {
      return this.$store.getters.getOfflineFormPlates;
    },
    isEmptyEstimates() {
      return this.$store.state.emptyEstimates;
    },
    apiPlates() {
      return this.$store.getters.getAPIPlates;
    },
    unselectedPlates() {
      let offlinePlatesArray = [],
        apiPlates = this.apiPlates,
        storedPlatesNumbers = [];

      for (let storedPlate of this.offlineFormPlates) {
        storedPlatesNumbers.push(storedPlate.license_plate);
      }


      for (let plate in apiPlates) {
        if (apiPlates[plate].offline_processing && !storedPlatesNumbers.includes(apiPlates[plate].license_plate)) {
          offlinePlatesArray.push(apiPlates[plate]);
        }
      }

      return offlinePlatesArray;
    }
  }
}
</script>

<style scoped>

</style>