Button and transition updates

src/assets/scss/components/_buttons.scss

@@ -17,4 +17,8 @@
       z-index: -1;
     }
   }
+  &.btn-funnel {
+    display: flex;
+    justify-content: space-between;
+  }
 }

src/layouts/SelectCar/BaseTemplate.vue

@@ -7,10 +7,7 @@
                 </div>
                 <div class="current_car_info mb-4">
                     <transition appear name="fade">
-                        <div v-if="backFunction" class="current_car_info-text" v-on:click="backFunction()">
+                        <div class="current_car_info-text" v-on:click="backFunction ? backFunction() : null">
-                            <p class="text-center text-secondary fs-5">{{ this.currentCarInfo }}</p>
-                        </div>
-                        <div v-else class="current_car_info-text">
                             <p class="text-center text-secondary fs-5">{{ this.currentCarInfo }}</p>
                         </div>
                     </transition>
@@ -40,16 +37,19 @@
 
 <script>
 import Button from '@/sharedcomponents/Button';
+import { mapState } from 'vuex';
 
 export default {
   name: 'SCTemplate',
+  computed: {
+      ...mapState(['slideTransition'])
+  },
   props: {
       currentCarInfo: String,
       neededCarInfo: String,
       attritbutes: Array,
       backFunction: Function,
-      selectAttribute: Function, 
+      selectAttribute: Function 
-      slideTransition: String
   },
   components: {
       Button

src/layouts/SelectCar/SelectMake.vue

@@ -6,7 +6,6 @@
             :attritbutes="makes"
             :backFunction="goBack"
             :selectAttribute="selectMake"
-            :transition='slideTransition'
         />
     </div>
 </template>
@@ -18,14 +17,14 @@ import { mapState } from 'vuex';
 export default {
   name: 'SelectCar',
   computed: {
-      ...mapState(['year', 'makes', 'slideTransition'])
+      ...mapState(['year', 'makes'])
   },
   methods: {
       selectMake(make){
           this.$store.dispatch('selectMake', make);
       },
       goBack(){
-          this.$store.state.slideTransition = 'slide_reverse'
+          this.$store.state.slideTransition = 'slide_reverse';
           this.$router.push('/select-year');
       }
   }, 

src/layouts/SelectCar/SelectModel.vue

@@ -6,7 +6,6 @@
             :attritbutes="models"
             :backFunction="goBack"
             :selectAttribute="selectModel"
-            :transition='slideTransition'
         />
     </div>
 </template>
@@ -18,13 +17,14 @@ import { mapState } from 'vuex'
 export default {
   name: 'SelectCar',
   computed: {
-      ...mapState(['year', 'make', 'models', 'slideTransition'])
+      ...mapState(['year', 'make', 'models'])
   },
   methods: {
       selectModel(model){
           this.$store.dispatch('selectModel', model);
       },
       goBack(){
+          this.$store.state.slideTransition = 'slide_reverse';
           this.$router.push(`/select-make?year=${this.$store.state.year}`);
       }
   }, 

src/layouts/SelectCar/SelectStyle.vue

@@ -5,7 +5,6 @@
             :neededCarInfo="'What style is your ' + model + '?'"
             :attritbutes="styles"
             :backFunction="goBack"
-            :transition='slideTransition'
         />
     </div>
 </template>
@@ -17,10 +16,11 @@ import { mapState } from 'vuex'
 export default {
   name: 'SelectCar',
   computed: {
-      ...mapState(['year', 'make', 'model', 'styles', 'slideTransition'])
+      ...mapState(['year', 'make', 'model', 'styles'])
   },
   methods: {
       goBack(){
+          this.$store.state.slideTransition = 'slide_reverse';
           this.$router.push(`/select-model?year=${this.$store.state.year}&make=${this.$store.state.make}`);
       }
   }, 

src/layouts/SelectCar/SelectYear.vue

@@ -5,14 +5,12 @@
             neededCarInfo="What year is your vehicle?"
             :attritbutes="years"
             :selectAttribute="selectYear"
-            :transition='slideTransition'
         />
     </div>
 </template>
 
 <script>
 import baseTemplate from './BaseTemplate';
-import { mapState } from 'vuex';
 import axios from 'axios';
 
 export default {
@@ -22,9 +20,6 @@ export default {
           years: []
       }
   },
-  computed: {
-      ...mapState(['slideTransition'])
-  },
   mounted() {
       axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
           this.years = response.data.Result;

src/sharedcomponents/Button.vue

@@ -3,7 +3,15 @@
     type="button" 
     class="btn"
     v-bind:class="this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType"
-    >{{ this.buttonText }}
+    v-on:click="this.buttonType === 'btn-funnel' ? showLoader() : null"
+    >
+    {{ this.buttonText }}
+
+    <!-- Spinner for funnel Button -->
+    <div v-if="this.buttonType === 'btn-funnel' && this.isLoading" class="spinner-border spinner-border-sm text-success" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+    
   </button>
 </template>
 
@@ -13,6 +21,16 @@ export default {
   props: {
     buttonText: String,
     buttonType: String
+  }, 
+  data(){
+    return {
+      isLoading: false
+    }
+  },
+  methods: {
+    showLoader(){
+      this.isLoading = true;
+    }
   }
 }
 </script>

src/store/index.js

@@ -14,7 +14,7 @@ export default createStore({
         year: '',
         make: '',
         model: '',
-        slideTransition: 'none'
+        slideTransition: 'fade'
     },
     mutations: {
         updateYear(state, data){