From bd623e09c55e9da02e4234125426c32ab6aa0466 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 4 Nov 2021 10:16:02 -0400
Subject: [PATCH] funnel process

---
 src/App.vue                                   |  2 +-
 src/assets/img/icons/back-forward.svg         |  3 +
 src/assets/scss/components/_SelectCar.scss    |  9 +-
 src/assets/scss/components/_buttons.scss      |  3 +
 .../baseTemplate/baseTemplate.vue             |  7 +-
 .../carAttributes/carAttributes.vue           | 10 +-
 src/constants/endpoints.js                    | 16 +++
 src/global-methods.js                         |  5 +
 src/layouts/selectDamage/selectDamage.vue     | 83 ++++++++++++----
 src/layouts/selectMake/selectMake.vue         |  5 +-
 src/layouts/selectModel/selectModel.vue       |  5 +-
 src/layouts/selectStyle/selectStyle.vue       |  5 +-
 src/layouts/selectYear/selectYear.vue         | 20 ++--
 src/router/index.js                           | 26 ++++-
 src/store/index.js                            | 97 ++++++++++++-------
 .../buttonPrimary/buttonPrimary.vue           |  6 +-
 src/uxComponents/radioCard/radioCard.vue      |  2 +-
 17 files changed, 222 insertions(+), 82 deletions(-)
 create mode 100644 src/assets/img/icons/back-forward.svg

diff --git a/src/App.vue b/src/App.vue
index 640ecadbb..24e965342 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -64,6 +64,6 @@ export default {
     buttonPrimary,
     radioCard,
     listButton
-  },
+  }
 };
 </script>
diff --git a/src/assets/img/icons/back-forward.svg b/src/assets/img/icons/back-forward.svg
new file mode 100644
index 000000000..3835f94cc
--- /dev/null
+++ b/src/assets/img/icons/back-forward.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.6 36.1" xml:space="preserve">
+  <path d="M43.6 0H18.1c-.4 0-.8.1-1.1.4l-.3.3-16 16c-.8.8-.8 2 0 2.8l16 16 .3.3c.3.2.7.4 1.1.4h25.5c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm-3.4 28.1-1.4 1.4-10-10-10 10-1.4-1.4 10-10-10-10 1.4-1.4 10 10 10-10L40.2 8l-10 10 10 10.1z" fill="#8e9292"/>
+</svg>
diff --git a/src/assets/scss/components/_SelectCar.scss b/src/assets/scss/components/_SelectCar.scss
index 541fe8960..e79519191 100644
--- a/src/assets/scss/components/_SelectCar.scss
+++ b/src/assets/scss/components/_SelectCar.scss
@@ -5,7 +5,7 @@
         background: $white;
         height: 100%;
 
-        form {
+        .list-view {
             height: calc(100% - 230px);
             overflow-y: scroll;
             overflow-x: hidden;
@@ -27,6 +27,13 @@
             position: absolute;
         }
     }
+
+    .back-button {
+        margin-left: 5px;
+        img {
+            width: 20px;
+        }
+    }
 }
 
 .slide-enter-from {
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index 857802c65..05f513114 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -50,6 +50,9 @@
     border-radius: $border-radius-lg;
     border: 1px solid rgba($gray-300,.3);
     width: 100%;
+    &:focus, &:focus-visible {
+      box-shadow: none;
+    }
     &.button-loader {
       padding: 0 40px 0 12px;
       &:after {
diff --git a/src/commonComponents/baseTemplate/baseTemplate.vue b/src/commonComponents/baseTemplate/baseTemplate.vue
index 0263616b0..6c39f8a66 100644
--- a/src/commonComponents/baseTemplate/baseTemplate.vue
+++ b/src/commonComponents/baseTemplate/baseTemplate.vue
@@ -13,11 +13,14 @@
           <transition appear name="fade">
             <div
               class="current_car_info-text"
-              v-on:click="backFunction ? backFunction() : null"
+              @click="backFunction ? backFunction() : null"
             >
-              <span class="text-center text-secondary fs-5 d-block">{{
+              <div class="d-flex align-items-center justify-content-center">
+                <span class="text-center text-secondary fs-5 d-block">{{
                 this.currentCarInfo
               }}</span>
+              <span v-if="backFunction" class="back-button"><img src="@/assets/img/icons/back-forward.svg" alt="back-button"></span>
+              </div>
               <span v-if="style" class="text-center text-secondary fs-6 mt-2">{{
                 style
               }}</span>
diff --git a/src/commonComponents/carAttributes/carAttributes.vue b/src/commonComponents/carAttributes/carAttributes.vue
index 1bb084cb4..ac187f700 100644
--- a/src/commonComponents/carAttributes/carAttributes.vue
+++ b/src/commonComponents/carAttributes/carAttributes.vue
@@ -1,11 +1,11 @@
 <template>
-<form class="list-view d-flex">
-    <div class="car_list">
-        <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
-            <listButton :buttonText="attritbute" v-on:click="selectAttribute(attritbute)" />
+    <div class="list-view d-flex">
+        <div class="car_list">
+            <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
+                <listButton :buttonText="attritbute" @click="selectAttribute(attritbute)" />
+            </div>
         </div>
     </div>
-</form>
 </template>
 
 <script>
diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index 504a55c46..74725eed4 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -2,6 +2,22 @@ const endpoints = {
     GetRouteInfoEndpoint: {
         url: '/content/api/v1/content/RouteInfo',
         method: 'POST'
+    },
+    GetYears: {
+        url: '/vehicle/api/v1/vehicle/years',
+        method: 'GET'
+    },
+    GetMakes: {
+        url: '/vehicle/api/v1/vehicle/Makes',
+        method: 'POST'
+    },
+    GetModels: {
+        url: '/vehicle/api/v1/vehicle/Models',
+        method: 'POST'
+    },
+    GetStyles: {
+        url: '/vehicle/api/v1/vehicle/Styles',
+        method: 'POST'
     }
 }
 
diff --git a/src/global-methods.js b/src/global-methods.js
index 3e2be040f..f64aceda6 100644
--- a/src/global-methods.js
+++ b/src/global-methods.js
@@ -28,4 +28,9 @@ export default {
       );
     });
   },
+  disableItems(arr) {
+    arr.forEach( (i) => {
+      i.disabled = true
+      })
+  },
 };
diff --git a/src/layouts/selectDamage/selectDamage.vue b/src/layouts/selectDamage/selectDamage.vue
index 0d78a2ead..5fb099794 100644
--- a/src/layouts/selectDamage/selectDamage.vue
+++ b/src/layouts/selectDamage/selectDamage.vue
@@ -6,36 +6,72 @@
     >
       <div class="damage-section text-center">
         <div class="choose-damage row">
-          <div class="col">
-            <radioCard />
-          </div>
-          <div class="col">
-            <radioCard />
-          </div>
-          <div class="col">
-            <radioCard />
-          </div>
+          <radioCard
+            radioLabel="Windshield"
+            radioImage="windshield-damage.svg"
+            altText="Windshield"
+            groupName="damageKey"
+            radioID="windshield"
+            name="damage"
+            @click="chooseDamage('windshield')"
+          />
+          <radioCard
+            radioLabel="Side Window"
+            radioImage="side-window-damage.svg"
+            altText="Side Window"
+            groupName="damageKey"
+            radioID="sidewindow"
+            name="damage"
+            @click="chooseDamage('side-window')"
+          />
+          <radioCard
+            radioLabel="Back Glass"
+            radioImage="back-glass-damage.svg"
+            altText="Back Glass"
+            groupName="damageKey"
+            radioID="backglass"
+            name="damage"
+            @click="chooseDamage('side-glass')"
+          />
         </div>
         <transition name="fade">
           <div v-if="damage" class="how-bad mt-3">
             <span class="text-center fs-6 fw-bold">How bad is it?</span>
             <div class="choose-how-bad row mt-2">
-              <div class="col">
-                <radioCard />
-              </div>
-              <div class="col">
-                <radioCard />
-              </div>
+              <radioCard
+                radioLabel="Crack"
+                radioImage="windshield-damage.svg"
+                altText="Crack"
+                groupName="severityKey"
+                radioID="Crack"
+                name="severity"
+                @click="chooseSeverity(Crack)"
+              />
+              <radioCard
+                radioLabel="Chip(s)"
+                radioImage="side-window-damage.svg"
+                altText="Chips"
+                groupName="severityKey"
+                radioID="Chips"
+                name="severity"
+                @click="chooseSeverity(Chips)"
+              />
             </div>
           </div>
         </transition>
-        <div class="next-action row">
-          <div class="col">
+        <transition appear name="fade">
+          <div class="next-action d-flex align-items-center justify-content-around fixed-bottom py-3 border border-top-1 border-top-light">
             <div v-on:click="goBack" class="change">
-              <span>Change Vehicle</span>
+              <span class="fw-bold text-decoration-underline">Change Vehicle</span>
+            </div>
+            <div>
+              <buttonPrimary
+                buttonText="Get your estimate"
+                :isDisabled="this.isDisabled"
+              />
             </div>
           </div>
-        </div>
+        </transition>
       </div>
     </baseTemplate>
   </div>
@@ -44,6 +80,7 @@
 <script>
 import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
 import radioCard from "@/uxComponents/radioCard/radioCard";
+import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
 import { mapState } from "vuex";
 
 export default {
@@ -54,12 +91,17 @@ export default {
   data() {
     return {
       damage: "",
+      severity: "",
+      isDisabled: true
     };
   },
   methods: {
     chooseDamage(damage) {
       this.damage = damage;
-      console.log(this.damage);
+    },
+    chooseSeverity(severity){
+      this.severity = severity;
+      this.isDisabled = false;
     },
     goBack() {
       this.$store.state.slideTransition = "slide_reverse";
@@ -72,6 +114,7 @@ export default {
   components: {
     baseTemplate,
     radioCard,
+    buttonPrimary,
   },
 };
 </script>
diff --git a/src/layouts/selectMake/selectMake.vue b/src/layouts/selectMake/selectMake.vue
index 412e235c1..eb5f8f1aa 100644
--- a/src/layouts/selectMake/selectMake.vue
+++ b/src/layouts/selectMake/selectMake.vue
@@ -9,6 +9,7 @@
 <script>
 import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
 import carAttributes from "@/commonComponents/carAttributes/carAttributes";
+import globalMethods from "@/global-methods";
 import {
     mapState
 } from "vuex";
@@ -20,7 +21,9 @@ export default {
     },
     methods: {
         selectMake(make) {
-            this.$store.dispatch("selectMake", make);
+            const listButtons = document.querySelectorAll('.list-button');
+            globalMethods.disableItems(listButtons);
+            this.dispatchNonBlockingStoreAction("selectMake", { make: make })
         },
         goBack() {
             this.$store.state.slideTransition = "slide_reverse";
diff --git a/src/layouts/selectModel/selectModel.vue b/src/layouts/selectModel/selectModel.vue
index f2becd40a..02b2a84aa 100644
--- a/src/layouts/selectModel/selectModel.vue
+++ b/src/layouts/selectModel/selectModel.vue
@@ -13,6 +13,7 @@
 <script>
 import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
 import carAttributes from "@/commonComponents/carAttributes/carAttributes";
+import globalMethods from "@/global-methods";
 import { mapState } from "vuex";
 
 export default {
@@ -22,7 +23,9 @@ export default {
   },
   methods: {
     selectModel(model) {
-      this.$store.dispatch("selectModel", model);
+      const listButtons = document.querySelectorAll('.list-button');
+      globalMethods.disableItems(listButtons);
+      this.dispatchNonBlockingStoreAction("selectModel", { model: model })
     },
     goBack() {
       this.$store.state.slideTransition = "slide_reverse";
diff --git a/src/layouts/selectStyle/selectStyle.vue b/src/layouts/selectStyle/selectStyle.vue
index e9dd0d143..0f9db51b7 100644
--- a/src/layouts/selectStyle/selectStyle.vue
+++ b/src/layouts/selectStyle/selectStyle.vue
@@ -13,6 +13,7 @@
 <script>
 import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
 import carAttributes from "@/commonComponents/carAttributes/carAttributes";
+import globalMethods from "@/global-methods";
 import { mapState } from "vuex";
 
 export default {
@@ -22,7 +23,9 @@ export default {
   },
   methods: {
     selectStyle(style) {
-      this.$store.dispatch("selectStyle", style);
+      const listButtons = document.querySelectorAll('.list-button');
+      globalMethods.disableItems(listButtons);
+      this.dispatchNonBlockingStoreAction("selectStyle", { style: style })
     },
     goBack() {
       this.$store.state.slideTransition = "slide_reverse";
diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue
index f7d49cf58..f5a363467 100644
--- a/src/layouts/selectYear/selectYear.vue
+++ b/src/layouts/selectYear/selectYear.vue
@@ -12,7 +12,8 @@
 <script>
 import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
 import carAttributes from "@/commonComponents/carAttributes/carAttributes";
-import axios from "axios";
+import { endpoints } from "@/constants/endpoints.js";
+import globalMethods from "@/global-methods";
 
 export default {
   name: "SelectCar",
@@ -22,14 +23,21 @@ export default {
     };
   },
   mounted() {
-    axios.get("https://consumerapidev.safelite.com/vehicle/api/v1/vehicle/years").then((response) => {
-      this.years = response.data.Result;
-    });
+    return globalMethods.callHttpClient({
+          method: endpoints.GetYears.method,
+          endpoint: endpoints.GetYears.url,
+          payload:{}
+        })
+        .then( (response) => {
+          this.years = response.data.Result;
+        });
   },
   methods: {
     selectYear(year) {
-      this.$store.dispatch("selectYear", year);
-    },
+      const listButtons = document.querySelectorAll('.list-button');
+      globalMethods.disableItems(listButtons);
+      this.dispatchNonBlockingStoreAction("selectYear", { year: year });
+    }
   },
   components: {
     baseTemplate,
diff --git a/src/router/index.js b/src/router/index.js
index e7dafb885..367b6e2aa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,8 +4,11 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
 import NotFound from "@/layouts/notFound/notFound.vue";
 import Home from "@/layouts/home/home.vue";
 import store from "@/store";
-import selectYear from "@/layouts/selectYear/selectYear.vue"
-import selectMake from "@/layouts/selectMake/selectMake.vue"
+import selectYear from "@/layouts/selectYear/selectYear.vue";
+import selectMake from "@/layouts/selectMake/selectMake.vue";
+import selectModel from "@/layouts/selectModel/selectModel.vue";
+import selectStyle from "@/layouts/selectStyle/selectStyle.vue";
+import selectDamage from "@/layouts/selectDamage/selectDamage.vue";
 
 const routes = [
   {
@@ -28,6 +31,21 @@ const routes = [
     name: "selectMake",
     component: selectMake,
   },
+  {
+    path: "/select-model",
+    name: "selectModel",
+    component: selectModel,
+  },
+  {
+    path: "/select-style",
+    name: "selectStyle",
+    component: selectStyle,
+  },
+  {
+    path: "/select-damage",
+    name: "selectDamage",
+    component: selectDamage,
+  },
 ];
 
 const router = createRouter({
@@ -36,7 +54,9 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to, from, next) => {
-  NavigateToDynamicCmsRoute(to, next);
+  console.log(to);
+  console.log(from);
+  next();
 });
 
 // Go to route if page exists in the CMS.
diff --git a/src/store/index.js b/src/store/index.js
index 6c35ceffb..b1da436f1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,6 @@
 import { createStore } from "vuex";
 import { endpoints } from "@/constants/endpoints.js";
 import createPersistedState from "vuex-persistedstate";
-import axios from "axios";
 import globalMethods from "@/global-methods";
 import router from "@/router";
 
@@ -55,41 +54,65 @@ export default createStore({
     },
   },
   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}`);
-    },
-    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}`);
-    },
-    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}`
-      );
-    },
-    selectStyle({ commit, state }, style) {
-      commit("updateStyle", { style });
-      router.push(
-        `/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`
-      );
-    },
-    getRouteInfo(context, { relativeUrl }) {
-      return globalMethods.callHttpClient({
-        method: endpoints.GetRouteInfoEndpoint.method,
-        endpoint: endpoints.GetRouteInfoEndpoint.url,
-        payload: {
-          relativeUrl: relativeUrl,
-        },
-      });
-    },
+      selectYear(context, { year }) {
+        return globalMethods.callHttpClient({
+          method: endpoints.GetMakes.method,
+          endpoint: endpoints.GetMakes.url,
+          payload:{
+            "Year": year
+          }
+        })
+        .then( (response) => {
+          const makes = response;
+          context.commit('updateYear', {year, makes});
+          router.push(`select-make?year=${year}`);
+        });
+      },
+      selectMake({ commit, state }, { make }) {
+        return globalMethods.callHttpClient({
+          method: endpoints.GetModels.method,
+          endpoint: endpoints.GetModels.url,
+          payload:{
+            "Year": state.year,
+            "Make": make
+          }
+        })
+        .then( (response) => {
+          const models = response;
+          commit("updateMake", { make, models });
+          router.push(`/select-model?year=${state.year}&make=${make}`);
+        });
+      },
+      selectModel({ commit, state }, { model }) {
+        return globalMethods.callHttpClient({
+          method: endpoints.GetStyles.method,
+          endpoint: endpoints.GetStyles.url,
+          payload:{
+            "Year": state.year,
+            "Make": state.make,
+            "Model": model
+          }
+        })
+        .then( (response) => {
+          const styles = response;
+          commit("updateModel", { model, styles });
+          router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`);
+        });
+      },
+      selectStyle({ commit, state }, { style }) {
+        commit("updateStyle", { style });
+        router.push(
+          `/select-damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`
+        );
+      },
+      getRouteInfo(context, { relativeUrl }) {
+        return globalMethods.callHttpClient({
+          method: endpoints.GetRouteInfoEndpoint.method,
+          endpoint: endpoints.GetRouteInfoEndpoint.url,
+          payload: {
+            relativeUrl: relativeUrl,
+          },
+        });
+      },
   },
 });
diff --git a/src/uxComponents/buttonPrimary/buttonPrimary.vue b/src/uxComponents/buttonPrimary/buttonPrimary.vue
index 5e0dd1dcf..9741d9c49 100644
--- a/src/uxComponents/buttonPrimary/buttonPrimary.vue
+++ b/src/uxComponents/buttonPrimary/buttonPrimary.vue
@@ -14,12 +14,12 @@
 export default {
   name: "buttonPrimary",
   props: {
-    buttonText: String
+    buttonText: String,
+    isDisabled: Boolean
   },
   data() {
     return {
-      isLoading: false,
-      isDisabled: false,
+      isLoading: false
     };
   },
   methods: {
diff --git a/src/uxComponents/radioCard/radioCard.vue b/src/uxComponents/radioCard/radioCard.vue
index 70a7cec82..249646f82 100644
--- a/src/uxComponents/radioCard/radioCard.vue
+++ b/src/uxComponents/radioCard/radioCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col-4 mb-3 d-flex radio-card">
+  <div class="col mb-3 d-flex radio-card">
     <input
       type="radio"
       class="position-absolute opacity-0"