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/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <section class="form-content-wrapper">

    <div class="steps-content-wrapper">
      <div class="content-inner">
        <div class="steps-content" :class="currentStep.classList || ''">
          <div class="form-logo-wrapper">
            <nuxt-link to="/" class="logo">
              <img src="/images/fl/logo-generic.svg" alt="VR">
            </nuxt-link>
            <div class="right">
              <img src="/images/fl/ratings-reveal-new.gif" alt="Ratings" class="animated-rating">
            </div>
          </div>

          <div class="breadcrumb-wrapper" v-if="currentStepPath != '/fl/thanks-page'">

            <template v-for="step in steps" v-if="!step.invisible">


              <a href="#" :class="{'selected':isStepSelected(step)}">{{ step.label }}</a>

              <svg :class="{'selected':isStepSelected(step)}" width="6" height="10" viewBox="0 0 6 10" fill="none"
                   v-if="!step.isLastStep"
                   xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L5 5L1 9" stroke="#868686" stroke-width="1.2" stroke-linecap="round"
                      stroke-linejoin="round"/>
              </svg>
            </template>
          </div>

          <NuxtChild/>
        </div>
      </div>
    </div>


    <component :is="sidebarComponent"/>

  </section>
</template>

<script>

export default {
  name: "fl",
  layout: 'forms',
  data() {
    return {
      steps: [
        {label: 'Owner', classList: 'step-1', path: '/fl/step-1'},
        {label: 'Information', classList: 'step-2', path: '/fl/step-2'},
        {label: 'Terms & Signature', classList: 'step-3', path: '/fl/step-3'},
        {label: 'Vehicle', classList: 'step-4', path: ['/fl/verify', '/fl/select-offline-plates', '/fl/step-4']},
        {label: 'Renewal type', classList: 'step-5', path: '/fl/step-5'},
        {label: 'Payment', classList: 'step-6', isLastStep: true, path: '/fl/step-6', sidebar: 'OrderSummarySidebar'},
        {
          label: 'Thanks Page',
          classList: '',
          isLastStep: false,
          path: '/fl/thanks-page',
          // sidebar: 'OrderSummarySidebar',
          invisible: true
        }
      ]
    }
  },
  methods: {
    isStepSelected(step) {

      if (Array.isArray(step.path)) {
        return step.path.includes(this.currentStepPath)
      }

      return this.currentStepPath === step.path;
    },
  },
  computed: {
    sidebarComponent() {

      let sidebar;

      if (this.currentStep.sidebar) {
        sidebar = this.currentStep.sidebar;
      } else {
        sidebar = 'DefaultSidebar';
      }


      return () => import('~/components/Forms/Sidebars/' + sidebar);

    },
    currentStepPath() {
      return this.$route.path;
    },
    currentStep() {
      return this.steps.find(step => this.isStepSelected(step)) || {};
    }
  },
  beforeCreate() {

    this.$store.commit('SET_CURRENT_STATE_CODE', 'fl');

    if (['/fl', '/fl/'].includes(this.$route.path)) {
      this.$router.push({path: '/fl/step-1'});
    }
  },
  watch: {
    currentStep() {
      setTimeout(() => {
        this.$scrollTo('.form-content-wrapper', 1000);
      }, 100)
    }
  }
}
</script>

<style scoped>

</style>