From 593c5470cba33c709efea30c941cffbeb26e11d0 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 19 Oct 2021 16:20:38 -0400
Subject: [PATCH] Button modification and car image stored in state

---
 src/layouts/SelectCar/BaseTemplate.vue | 10 +++++++---
 src/sharedcomponents/Button.vue        |  3 ++-
 src/store/index.js                     |  4 +++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/layouts/SelectCar/BaseTemplate.vue b/src/layouts/SelectCar/BaseTemplate.vue
index 95a39dba5..d6af1ecfb 100644
--- a/src/layouts/SelectCar/BaseTemplate.vue
+++ b/src/layouts/SelectCar/BaseTemplate.vue
@@ -3,7 +3,11 @@
         <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" />
+                    <img 
+                        class="vehicle-image img-fluid" 
+                        :class="{ blur: blurImg }"
+                        :src="carImg" 
+                    />
                 </div>
                 <div class="current_car_info mb-4">
                     <transition appear name="fade">
@@ -40,9 +44,9 @@ import Button from '@/sharedcomponents/Button';
 import { mapState } from 'vuex';
 
 export default {
-  name: 'SCTemplate',
+  name: 'BaseTemplate',
   computed: {
-      ...mapState(['slideTransition'])
+      ...mapState(['slideTransition', 'carImg', 'blurImg'])
   },
   props: {
       currentCarInfo: String,
diff --git a/src/sharedcomponents/Button.vue b/src/sharedcomponents/Button.vue
index fcb8fe50a..c6b8703c8 100644
--- a/src/sharedcomponents/Button.vue
+++ b/src/sharedcomponents/Button.vue
@@ -2,11 +2,12 @@
   <button 
     type="button" 
     class="btn"
-    v-bind:class="this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType"
+    v-bind:class="[(this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType)]"
     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>
diff --git a/src/store/index.js b/src/store/index.js
index 71122e2f0..2dff8165b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -14,7 +14,9 @@ export default createStore({
         year: '',
         make: '',
         model: '',
-        slideTransition: 'fade'
+        slideTransition: 'fade',
+        carImg: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
+        blurImg: true
     },
     mutations: {
         updateYear(state, data){