Auto stash before merge of "develop" and "origin/develop"

src/common-components/vehicle-banner/vehicle-banner.vue

@@ -2,7 +2,7 @@
   <div class="vehicle_banner mb-3 text-center">
     <img
       class="vehicle-image img-fluid blurrycar"
-      :src="vehicleImageSrc"
+      :src="vehicleImageToDisplay"
       alt=""
     />
   </div>
@@ -11,21 +11,72 @@
 <script>
 export default {
   name: "vehicle-banner",
+  props: {
+    displayGenericVehicleImage: {
+      type: Boolean,
+      required: true
+    }
+  },
   data() {
     return {
-      vehicleImageSrc: "",
-    };
+      vehicleImageSrc: '',
+      genericVehicleImage: '',
+      carUnmatchedVehicleIcon: '',
+      truckUnmatchedVehicleIcon: '',
+      vanUnmatchedVehicleIcon: '',
+      commercialUnmatchedVehicleIcon: '',
+      suvUnmatchedVehicleIcon: ''
+    }
   },
+  computed: {
+    vehicleImageToDisplay(){
+        if (this.displayGenericVehicleImage){
+          return this.genericVehicleImage;  
+        }
+  
+        if (this.$store.getters.vehicle.imageUrl === null || this.$store.getters.vehicle.imageUrl === "NULL"){
+          return this.getUnmatchedVehicleIcon();
+        }
+
+        return this.$store.getters.vehicle.imageUrl;
+    }
+    },
   methods: {
     initializeComponent(cmsContent) {
-      this.vehicleImageSrc = cmsContent.GenericVehicleImage;
+      this.genericVehicleImage = cmsContent.GenericVehicleImage;
+      this.carUnmatchedVehicleIcon = cmsContent.CarUnmatchedVehicleIcon;
+      this.truckUnmatchedVehicleIcon = cmsContent.TruckUnmatchedVehicleIcon;
+      this.vanUnmatchedVehicleIcon = cmsContent.VanUnmatchedVehicleIcon;
+      this.commercialUnmatchedVehicleIcon = cmsContent.CommercialVanUnmatchedVehicleIcon;
+      this.suvUnmatchedVehicleIcon = cmsContent.SuvUnmatchedVehicleIcon;
     },
-  },
+    getUnmatchedVehicleIcon: function(){
+       switch(this.$store.getters.vehicle.category){
+          case this.vehicleCategories.CAR:
+            return this.carUnmatchedVehicleIcon;
+          case this.vehicleCategories.SUV:
+            return this.suvUnmatchedVehicleIcon;
+          case this.vehicleCategories.TRUCK:
+            return this.truckUnmatchedVehicleIcon;
+          case this.vehicleCategories.PICKUP:
+            return this.truckUnmatchedVehicleIcon;
+          case this.vehicleCategories.VAN:
+            return this.vanUnmatchedVehicleIcon;
+          case this.vehicleCategories.COMMERCIALVAN:
+            return this.commercialUnmatchedVehicleIcon;
+          default:
+            return this.carUnmatchedVehicleIcon;
+       }
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .vehicle-image {
   max-width: 290px;
+  object-fit: cover;
+  width: 100%;
+  height: 118px;
 }
 </style>

src/constants/vehicle-categories.js

@@ -0,0 +1,11 @@
+const vehicleCategories = {
+    CAR: "CAR",
+    TRUCK: "TRUCK",
+    VAN: "VAN",
+    COMMERCIALVAN: "COMMERCIAL VAN",
+    SUV: "SUV",
+    MOTORHOME: "MOTOR HOME",
+    SEMI: "SEMI",
+  };
+  
+  export { vehicleCategories };

src/layouts/address-poc/address-poc.vue

@@ -2,7 +2,7 @@
   <div class="container-fluid container-shadow p-2 rounded-3">
     <div class="row my-3">
       <div class="col">
-        <vehicleBanner ref="vehicleBanner" />
+        <vehicleBanner ref="vehicleBanner"  :displayGenericVehicleImage=true />
       </div>
     </div>
     <div class="row my-4">

src/layouts/component-test/component-test.vue

@@ -797,7 +797,8 @@
     <div class="row my-3">
       <div class="col">
         <vehicleBanner
-          vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
+        vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
+         :displayGenericVehicleImage=true
         />
       </div>
     </div>

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
-    <funnelHeader ref="funnelHeader" />
-    <vehicleBanner ref="vehicleBanner" />
-    <funnelSubHeader ref="funnelSubHeader" />
-  </div>
+    <div class="container-fluid shadow rounded-3 p-0 position-relative">
+        <funnelHeader ref="funnelHeader" />
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+        <funnelSubHeader 
+            ref="funnelSubHeader"
+        />
+    </div>
 </template>
 
 <script>

src/layouts/vehicle-make/vehicle-make.vue

@@ -3,12 +3,12 @@
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner ref="vehicleBanner" />
-        <funnelSubHeader
-          ref="funnelSubHeader"
-          :hasBackButton="true"
-          backButtonAccessibleText="Change Vehicle Year"
-          @click-event="backButtonAction"
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
+        <funnelSubHeader 
+            ref="funnelSubHeader"
+            :hasBackButton="true"
+            backButtonAccessibleText="Change Vehicle Year"
+            @click-event="backButtonAction"
         />
         <makeQuestion v-model="selectedMake" ref="makeQuestion" />
       </div>

src/layouts/vehicle-model/vehicle-model.vue

@@ -3,7 +3,7 @@
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner ref="vehicleBanner" />
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
         <funnelSubHeader
           ref="funnelSubHeader"
           :hasBackButton="true"

src/layouts/vehicle-style/vehicle-style.vue

@@ -3,7 +3,7 @@
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner ref="vehicleBanner" />
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
         <funnelSubHeader
           ref="funnelSubHeader"
           :hasBackButton="true"

src/layouts/vehicle-year/vehicle-year.vue

@@ -3,8 +3,10 @@
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner ref="vehicleBanner" />
-        <funnelSubHeader ref="funnelSubHeader" />
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
+        <funnelSubHeader 
+            ref="funnelSubHeader"
+        />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
     </div>

src/mixins/base-mixin.js

@@ -3,6 +3,7 @@ import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import { widgetNames } from "@/constants/widget-names.js";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
 
 export default {
   data() {
@@ -31,6 +32,9 @@ export default {
     widgetNames() {
       return widgetNames;
     },
+    vehicleCategories() {
+      return vehicleCategories;
+    },
   },
 };
 

src/store/index.js

@@ -21,6 +21,9 @@ export default createStore({
         style: null,
         carId: null,
         category: null,
+        imageUrl: null,
+        imageVifNumber: null,
+        imageColor: null,
         damage: {
           isRepair: null,
           numberOfChips: null,
@@ -50,6 +53,9 @@ export default createStore({
     updateVehicle(state, data) {
       state.order.vehicle.carId = data.carId;
       state.order.vehicle.category = data.category;
+      state.order.vehicle.imageUrl = data.imageUrl;
+      state.order.vehicle.imageVifNumber = data.imageVifNumber;
+      state.order.vehicle.imageColor = data.imageVifColor;
     },
     addEventToBus(state, event) {
       state.applicationUser.eventBus.push(event);