From 1ff96792dccff990a6921fe958476df289bc68f8 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 18 Oct 2021 10:00:22 -0400
Subject: [PATCH] Breaking out funnel into repeatable template

---
 src/assets/scss/components/_SelectCar.scss    |  14 +-
 ...SelectCarTemplate.vue => BaseTemplate.vue} |  21 ++-
 src/layouts/SelectCar/SelectCar.vue           | 140 ------------------
 src/layouts/SelectCar/SelectMake.vue          |  49 ++----
 src/layouts/SelectCar/SelectModel.vue         |  50 ++-----
 src/layouts/SelectCar/SelectStyle.vue         |  48 ++----
 src/layouts/SelectCar/SelectYear.vue          |  49 ++----
 src/router/index.js                           |   6 -
 src/store/index.js                            |  12 +-
 9 files changed, 88 insertions(+), 301 deletions(-)
 rename src/layouts/SelectCar/{SelectCarTemplate.vue => BaseTemplate.vue} (70%)
 delete mode 100644 src/layouts/SelectCar/SelectCar.vue

diff --git a/src/assets/scss/components/_SelectCar.scss b/src/assets/scss/components/_SelectCar.scss
index 329d69438..541fe8960 100644
--- a/src/assets/scss/components/_SelectCar.scss
+++ b/src/assets/scss/components/_SelectCar.scss
@@ -34,13 +34,25 @@
     transform: translateX(30vw);
 }
 .slide-enter-active, .slide-leave-active {
-    transition: all .3s;
+    transition: all .4s;
 }
 .slide-leave-to {
     opacity: 0;
     transform: translateX(-30vw);
 }
 
+.slide_reverse-enter-from {
+    opacity: 0;
+    transform: translateX(-30vw);
+}
+.slide_reverse-enter-active, .slide_reverse-leave-active {
+    transition: all .4s;
+}
+.slide_reverse-leave-to {
+    opacity: 0;
+    transform: translateX(30vw);
+}
+
 .fade-enter-from, .fade-leave-to {
     opacity: 0;
 }
diff --git a/src/layouts/SelectCar/SelectCarTemplate.vue b/src/layouts/SelectCar/BaseTemplate.vue
similarity index 70%
rename from src/layouts/SelectCar/SelectCarTemplate.vue
rename to src/layouts/SelectCar/BaseTemplate.vue
index c11908be0..e89c4f27d 100644
--- a/src/layouts/SelectCar/SelectCarTemplate.vue
+++ b/src/layouts/SelectCar/BaseTemplate.vue
@@ -7,24 +7,27 @@
                 </div>
                 <div class="current_car_info mb-4">
                     <transition appear name="fade">
-                        <div class="current_car_info-text" v-on:click="goBack()">
+                        <div v-if="backFunction" class="current_car_info-text" v-on:click="backFunction()">
+                            <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>
                 </div>
-                <transition appear name="slide">
+                <transition appear :name="slideTransition">
                     <div class="needed_car_info d-flex overflow-hidden">
                         <p class="text-center fs-6 fw-bold needed_car_info-text">{{ this.neededCarInfo }}</p>
                     </div>
                 </transition>
             </div>
-            <transition appear name="slide">
+            <transition appear :name="slideTransition">
                 <form class="list-view d-flex ">
                     <div class="car_list car_models">
                         <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
                             <Button
                                 :buttonText="attritbute"
-                                v-on:click="backFunction(attritbute)"
+                                v-on:click="selectAttribute(attritbute)"
                                 buttonType="btn-funnel"
                             />
                         </div>
@@ -36,14 +39,20 @@
 </template>
 
 <script>
+import Button from '@/sharedcomponents/Button';
 
 export default {
-  name: 'SelectCarTemplate',
+  name: 'SCTemplate',
   props: {
       currentCarInfo: String,
       neededCarInfo: String,
       attritbutes: Array,
-      backFunction: Function
+      backFunction: Function,
+      selectAttribute: Function, 
+      slideTransition: String
+  },
+  components: {
+      Button
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/layouts/SelectCar/SelectCar.vue b/src/layouts/SelectCar/SelectCar.vue
deleted file mode 100644
index 530b0ef50..000000000
--- a/src/layouts/SelectCar/SelectCar.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-    <div class="select-car sticky-lg-top py-4">
-        <div class="select-car-form overflow-hidden p-3 rounded">
-            <div class="car_info text-center">
-                <div class="car-image mb-3">
-                    <img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
-                </div>
-                <div class="current_car_info mb-4">
-                    <transition name="slide-fade">
-                        <div class="current_car_info-text" v-if="translate === 0">
-                            <p class="text-center text-secondary fs-5">Select a year to get started</p>
-                        </div>
-                    </transition>
-                    <transition name="slide-fade">
-                        <div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -100">
-                            <p class="text-center text-secondary fs-5">{{ this.year }}</p>
-                        </div>
-                    </transition>
-                    <transition name="slide-fade">
-                        <div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -200">
-                            <p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }}</p>
-                        </div>
-                    </transition>
-                    <transition name="slide-fade">
-                        <div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -300">
-                            <p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }} {{ this.model }}</p>
-                        </div>
-                    </transition>
-                </div>
-                <div class="needed_car_info d-flex overflow-hidden">
-                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What year is your vehicle?</p>
-                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What make is your vehicle?</p>
-                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What is the model of your {{ this.make }}?</p>
-                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What style is your {{ this.model }}?</p>
-                </div>
-            </div>
-            <form class="list-view d-flex ">
-                <div class="car_list car_years" v-bind:style="{transform: carViewTranslate}">
-                    <div v-for="year in years" :key="year" class="mb-2">
-                        <Button
-                            :buttonText="year"
-                            v-on:click="selectAttribute(year, 'year')"
-                            buttonType="btn-funnel"
-                         />
-                    </div>
-                </div>
-                <div class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
-                    <div v-for="make in makes" :key="make" class="mb-2">
-                        <Button
-                            :buttonText="make"
-                            v-on:click="selectAttribute(make, 'make')"
-                            buttonType="btn-funnel"
-                         />
-                    </div>
-                </div>
-                <div class="car_list car_models" v-bind:style="{transform: carViewTranslate}">
-                    <div v-for="model in models" :key="model" class="mb-2">
-                        <Button
-                            :buttonText="model"
-                            v-on:click="selectAttribute(model, 'model')"
-                            buttonType="btn-funnel"
-                         />
-                    </div>
-                </div>
-                <div class="car_list car_styles" v-bind:style="{transform: carViewTranslate}">
-                    <div v-for="style in styles" :key="style" class="mb-2">
-                        <Button
-                            :buttonText="style"
-                            buttonType="btn-funnel"
-                         />
-                    </div>
-                </div>
-            </form>
-        </div>
-    </div>
-</template>
-
-<script>
-import axios from 'axios';
-import Button from '../../sharedcomponents/Button';
-
-export default {
-  name: 'SelectCar',
-  data() {
-      return {
-          years: [],
-          makes: [],
-          models: [],
-          styles: [],
-          translate: 0,
-          carViewTranslate: 'translateX(0%)',
-          year: '',
-          make: '',
-          model: ''
-      }
-  },
-  mounted() {
-      axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
-          this.years = response.data.Result;
-          console.log(this.years);
-      });
-  },
-  methods: {
-      translateView(forward=true) {
-          this.translate = forward ? this.translate - 100 : this.translate + 100;
-          this.carViewTranslate = `translateX(${this.translate}%)`;
-      },
-      selectAttribute(attribute, attributeType){
-          let link;
-          switch (attributeType) {
-              case 'year':
-                  link = `https://mockey.qa.sagaws.net/service/makes/year=${attribute}`;
-                  this.year = attribute;
-                  axios.get(link).then((response) => {
-                     this.makes = response.data.Result;
-                  });
-                  break;
-              case 'make':
-                  link = `https://mockey.qa.sagaws.net/service/models/year=${this.year}/make=${attribute}`;
-                  this.make = attribute;
-                  axios.get(link).then((response) => {
-                     this.models = response.data.Result;
-                  });
-                  break;
-              case 'model':
-                  link = `https://mockey.qa.sagaws.net/service/styles/year=${this.year}/make=${this.make}/model=${attribute}`;
-                  this.model = attribute;
-                  axios.get(link).then((response) => {
-                     this.styles = response.data.Result;
-                  });
-                  break;
-          }
-          this.translateView();
-      }
-  }, 
-  components: {
-      Button
-  }
-}
-</script>
\ No newline at end of file
diff --git a/src/layouts/SelectCar/SelectMake.vue b/src/layouts/SelectCar/SelectMake.vue
index 338541825..e5998e137 100644
--- a/src/layouts/SelectCar/SelectMake.vue
+++ b/src/layouts/SelectCar/SelectMake.vue
@@ -1,59 +1,36 @@
 <template>
-    <div class="select-car sticky-lg-top py-4">
-        <div class="select-car-form overflow-hidden p-3 rounded">
-            <div class="car_info text-center">
-                <div class="car-image mb-3">
-                    <img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
-                </div>
-                <div class="current_car_info mb-4">
-                    <transition appear name="fade">
-                        <div class="current_car_info-text" v-on:click="goBack()">
-                            <p class="text-center text-secondary fs-5">{{ year }}</p>
-                        </div>
-                    </transition>
-                </div>
-                <transition appear name="slide">
-                    <div class="needed_car_info d-flex overflow-hidden">
-                        <p class="text-center fs-6 fw-bold needed_car_info-text">What make is your vehicle?</p>
-                    </div>
-                </transition>
-            </div>
-            <transition appear name="slide">
-                <form class="list-view d-flex ">
-                    <div class="car_list car_makes">
-                        <div v-for="make in makes" :key="make" class="mb-2">
-                            <Button
-                                :buttonText="make"
-                                v-on:click="selectMake(make)"
-                                buttonType="btn-funnel"
-                            />
-                        </div>
-                    </div>
-                </form>
-            </transition>
-        </div>
+    <div>
+        <baseTemplate
+            :currentCarInfo="year"
+            neededCarInfo="What make is your vehicle?"
+            :attritbutes="makes"
+            :backFunction="goBack"
+            :selectAttribute="selectMake"
+            :transition='slideTransition'
+        />
     </div>
 </template>
 
 <script>
-import Button from '@/sharedcomponents/Button';
+import baseTemplate from './BaseTemplate';
 import { mapState } from 'vuex';
 
 export default {
   name: 'SelectCar',
   computed: {
-      ...mapState(['year', 'makes'])
+      ...mapState(['year', 'makes', 'slideTransition'])
   },
   methods: {
       selectMake(make){
           this.$store.dispatch('selectMake', make);
       },
       goBack(){
+          this.$store.state.slideTransition = 'slide_reverse'
           this.$router.push('/select-year');
       }
   }, 
   components: {
-      Button
+      baseTemplate
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/layouts/SelectCar/SelectModel.vue b/src/layouts/SelectCar/SelectModel.vue
index 3a4ae5bf7..a865d09c5 100644
--- a/src/layouts/SelectCar/SelectModel.vue
+++ b/src/layouts/SelectCar/SelectModel.vue
@@ -1,59 +1,35 @@
 <template>
-    <div class="select-car sticky-lg-top py-4">
-        <div class="select-car-form overflow-hidden p-3 rounded">
-            <div class="car_info text-center">
-                <div class="car-image mb-3">
-                    <img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
-                </div>
-                <div class="current_car_info mb-4">
-                    <transition appear name="fade">
-                        <div class="current_car_info-text" v-on:click="goBack()">
-                            <p class="text-center text-secondary fs-5">{{ year }} {{ make }}</p>
-                        </div>
-                    </transition>
-                </div>
-                <transition appear name="slide">
-                    <div class="needed_car_info d-flex overflow-hidden">
-                        <p class="text-center fs-6 fw-bold needed_car_info-text">What is the model of your {{ make }}?</p>
-                    </div>
-                </transition>
-            </div>
-            <transition appear name="slide">
-                <form class="list-view d-flex ">
-                    <div class="car_list car_models">
-                        <div v-for="model in models" :key="model" class="mb-2">
-                            <Button
-                                :buttonText="model"
-                                v-on:click="selectModel(model)"
-                                buttonType="btn-funnel"
-                            />
-                        </div>
-                    </div>
-                </form>
-            </transition>
-        </div>
+    <div>
+        <baseTemplate
+            :currentCarInfo="year + ' ' + make"
+            :neededCarInfo="'What is the model of your ' + make + '?'"
+            :attritbutes="models"
+            :backFunction="goBack"
+            :selectAttribute="selectModel"
+            :transition='slideTransition'
+        />
     </div>
 </template>
 
 <script>
-import Button from '@/sharedcomponents/Button';
+import baseTemplate from './BaseTemplate';
 import { mapState } from 'vuex'
 
 export default {
   name: 'SelectCar',
   computed: {
-      ...mapState(['year', 'make', 'models'])
+      ...mapState(['year', 'make', 'models', 'slideTransition'])
   },
   methods: {
       selectModel(model){
           this.$store.dispatch('selectModel', model);
       },
       goBack(){
-          this.$router.push(`/select-make#year=${this.$store.state.year}`);
+          this.$router.push(`/select-make?year=${this.$store.state.year}`);
       }
   }, 
   components: {
-      Button
+      baseTemplate
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/layouts/SelectCar/SelectStyle.vue b/src/layouts/SelectCar/SelectStyle.vue
index 414fefcf8..42be51a55 100644
--- a/src/layouts/SelectCar/SelectStyle.vue
+++ b/src/layouts/SelectCar/SelectStyle.vue
@@ -1,55 +1,31 @@
 <template>
-    <div class="select-car sticky-lg-top py-4">
-        <div class="select-car-form overflow-hidden p-3 rounded">
-            <div class="car_info text-center">
-                <div class="car-image mb-3">
-                    <img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
-                </div>
-                <div class="current_car_info mb-4">
-                    <transition appear name="fade">
-                        <div class="current_car_info-text" v-on:click="goBack()">
-                            <p class="text-center text-secondary fs-5">{{ year }} {{ make }} {{ model }}</p>
-                        </div>
-                    </transition>
-                </div>
-                <transition appear name="slide">
-                    <div class="needed_car_info d-flex overflow-hidden">
-                        <p class="text-center fs-6 fw-bold needed_car_info-text">What style is your {{ model }}?</p>
-                    </div>
-                </transition>
-            </div>
-            <transition appear name="slide">
-                <form class="list-view d-flex ">
-                    <div class="car_list car_models">
-                        <div v-for="style in styles" :key="style" class="mb-2">
-                            <Button
-                                :buttonText="style"
-                                buttonType="btn-funnel"
-                            />
-                        </div>
-                    </div>
-                </form>
-            </transition>
-        </div>
+    <div>
+        <baseTemplate
+            :currentCarInfo="year + ' ' + make + ' ' + model"
+            :neededCarInfo="'What style is your ' + model + '?'"
+            :attritbutes="styles"
+            :backFunction="goBack"
+            :transition='slideTransition'
+        />
     </div>
 </template>
 
 <script>
-import Button from '@/sharedcomponents/Button';
+import baseTemplate from './BaseTemplate';
 import { mapState } from 'vuex'
 
 export default {
   name: 'SelectCar',
   computed: {
-      ...mapState(['year', 'make', 'model', 'styles'])
+      ...mapState(['year', 'make', 'model', 'styles', 'slideTransition'])
   },
   methods: {
       goBack(){
-          this.$router.push(`/select-model#year=${this.$store.state.year}/make=${this.$store.state.make}`);
+          this.$router.push(`/select-model?year=${this.$store.state.year}&make=${this.$store.state.make}`);
       }
   }, 
   components: {
-      Button
+      baseTemplate
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/layouts/SelectCar/SelectYear.vue b/src/layouts/SelectCar/SelectYear.vue
index 8afa516d8..f6efbddc5 100644
--- a/src/layouts/SelectCar/SelectYear.vue
+++ b/src/layouts/SelectCar/SelectYear.vue
@@ -1,43 +1,19 @@
 <template>
-    <div class="select-car sticky-lg-top py-4">
-        <div class="select-car-form overflow-hidden p-3 rounded">
-            <div class="car_info text-center">
-                <div class="car-image mb-3">
-                    <img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
-                </div>
-                <div class="current_car_info mb-4">
-                    <transition appear name="fade">
-                        <div class="current_car_info-text">
-                            <p class="text-center text-secondary fs-5">Select a year to get started</p>
-                        </div>
-                    </transition>
-                </div>
-                <transition appear name="slide">
-                    <div class="needed_car_info d-flex overflow-hidden">
-                        <p class="text-center fs-6 fw-bold needed_car_info-text">What year is your vehicle?</p>
-                    </div>
-                </transition>
-            </div>
-            <transition appear name="slide">
-                <form class="list-view d-flex ">
-                    <div class="car_list car_years">
-                        <div v-for="year in years" :key="year" class="mb-2">
-                            <Button
-                                :buttonText="year"
-                                v-on:click="selectYear(year)"
-                                buttonType="btn-funnel"
-                            />
-                        </div>
-                    </div>
-                </form>
-            </transition>
-        </div>
+    <div>
+        <baseTemplate
+            currentCarInfo="Select a year to get started"
+            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';
-import Button from '@/sharedcomponents/Button';
 
 export default {
   name: 'SelectCar',
@@ -46,6 +22,9 @@ export default {
           years: []
       }
   },
+  computed: {
+      ...mapState(['slideTransition'])
+  },
   mounted() {
       axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
           this.years = response.data.Result;
@@ -57,7 +36,7 @@ export default {
       }
   }, 
   components: {
-      Button
+      baseTemplate
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index cd1f7dc0f..f78d3a808 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,5 @@
 import { createWebHistory, createRouter } from "vue-router";
 import Home from "@/layouts/ContentSite/Home.vue";
-import SelectCar from "@/layouts/SelectCar/SelectCar.vue";
 import SelectYear from "@/layouts/SelectCar/SelectYear.vue";
 import SelectMake from "@/layouts/SelectCar/SelectMake.vue";
 import SelectModel from "@/layouts/SelectCar/SelectModel.vue";
@@ -12,11 +11,6 @@ const routes = [
     name: "Home",
     component: Home,
   },
-  {
-    path: "/select-car",
-    name: "SelectCar",
-    component: SelectCar,
-  },
   {
     path: "/select-year",
     name: "SelectYear",
diff --git a/src/store/index.js b/src/store/index.js
index 6a650aeb5..997c292d9 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,37 +13,41 @@ export default createStore({
         styles: [],
         year: '',
         make: '',
-        model: ''
+        model: '',
+        slideTransition: 'none'
     },
     mutations: {
         updateYear(state, data){
             state.year = data.year;
             state.makes = data.makes.data.Result;
+            state.slideTransition = 'slide'
         },
         updateMake(state, data){
             state.make = data.make;
             state.models = data.models.data.Result;
+            state.slideTransition = 'slide'
         },
         updateModel(state, data){
             state.model = data.model;
             state.styles = data.styles.data.Result;
+            state.slideTransition = 'slide'
         }
     },
     actions: {
         async selectYear(context, year){
             const makes = await axios.get(`https://mockey.qa.sagaws.net/service/makes/year=${year}`);
             context.commit('updateYear', {year, makes});
-            router.push(`/select-make#year=${year}`);
+            router.push(`/select-make?year=${year}`);
         },
         async selectMake({commit, state}, make){
             const models = await axios.get(`https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`);
             commit('updateMake', {make, models});
-            router.push(`/select-model#year=${state.year}/make=${make}`);
+            router.push(`/select-model?year=${state.year}&make=${make}`);
         },
         async selectModel({commit, state}, model){
             const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`);
             commit('updateModel', {model, styles});
-            router.push(`/select-style#year=${state.year}/make=${state.make}/model=${model}`);
+            router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`);
         }
     }