From c454c1d5ffea998d8b2026b11bd78a919764cb59 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Tue, 1 Feb 2022 08:15:19 -0500
Subject: [PATCH 1/5] Auto stash before merge of "develop" and "origin/develop"

---
 .../vehicle-banner/vehicle-banner.vue         | 61 +++++++++++++++++--
 src/constants/vehicle-categories.js           | 11 ++++
 src/layouts/address-poc/address-poc.vue       |  2 +-
 src/layouts/component-test/component-test.vue |  3 +-
 src/layouts/vehicle-damage/vehicle-damage.vue | 12 ++--
 src/layouts/vehicle-make/vehicle-make.vue     | 12 ++--
 src/layouts/vehicle-model/vehicle-model.vue   |  2 +-
 src/layouts/vehicle-style/vehicle-style.vue   |  2 +-
 src/layouts/vehicle-year/vehicle-year.vue     |  6 +-
 src/mixins/base-mixin.js                      |  4 ++
 src/store/index.js                            |  6 ++
 11 files changed, 99 insertions(+), 22 deletions(-)
 create mode 100644 src/constants/vehicle-categories.js

diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 1d01bda83..5d4a398a2 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/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>
diff --git a/src/constants/vehicle-categories.js b/src/constants/vehicle-categories.js
new file mode 100644
index 000000000..4fab279d8
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index 65ca768b4..1c10e927d 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/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">
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 2f5dc0308..4b59af5fd 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/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>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index e18b594e0..565986f86 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/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>
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 111b16e5f..bd1621e6c 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/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>
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index b27b98d40..dc45c3bb7 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/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"
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 7193c9e39..e654ffff1 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/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"
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index ddef0d5a8..257c866d7 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/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>
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 5c1e8946d..d37ba38d7 100644
--- a/src/mixins/base-mixin.js
+++ b/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;
+    },
   },
 };
 
diff --git a/src/store/index.js b/src/store/index.js
index 9d5078f74..64a06758f 100644
--- a/src/store/index.js
+++ b/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);

From 6328bbf5febc2125d06afdb8152f01f91b9ff366 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Wed, 2 Feb 2022 13:57:44 -0500
Subject: [PATCH 2/5] CSR-78 jest test coverage

---
 .../funnel-sub-header/funnel-sub-header.vue   |  24 ++--
 .../vehicle-banner/vehicle-banner.spec.js     | 118 ++++++++++++++++--
 .../vehicle-banner/vehicle-banner.vue         |   6 +-
 src/helpers/unit-test-helper.js               |   2 +
 src/layouts/vehicle-damage/vehicle-damage.vue |   4 +-
 5 files changed, 128 insertions(+), 26 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 40c3995a2..72b9c21cb 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="current_car_info-text">
-    <div
-      class="d-flex align-items-center justify-content-center container-fluid overflow-hidden"
-    >
-      <h5 class="text-center fw-normal mb-0">
+    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+      <h5 class="text-center fw-normal mb-0" :class="hasSubText ? 'dark-header' : 'light-header'">
         <span>
           {{ text }}
         </span>
@@ -14,9 +12,7 @@
         />
       </h5>
     </div>
-    <div
-      class="d-flex align-items-center justify-content-center container-fluid overflow-hidden"
-    >
+    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
       <p class="text-center small fw-normal mb-0">
         <span>
           {{ subText }}
@@ -40,6 +36,7 @@ export default {
   props: {
     hasBackButton: Boolean,
     backButtonAccessibleText: String,
+    hasSubText: Boolean
   },
   components: {
     buttonBack,
@@ -58,11 +55,22 @@ export default {
 
 <style lang="scss">
 h5 {
-  color: $gray-550;
   line-height: 32px;
 
   button {
     color: inherit;
   }
 }
+
+.dark-header {
+  color: $black;
+}
+
+.light-header {
+  color: $gray-550;
+}
+
+p.small {
+  color: $gray-550
+}
 </style>
diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js
index 44fdeec84..a6dc13154 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.spec.js
+++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js
@@ -1,24 +1,120 @@
 import { shallowMount } from "@vue/test-utils";
 import vehicleBanner from "./vehicle-banner";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
+
+jest.mock(
+  "@/store",
+  () => {
+    return {};
+  },
+  { virtual: true }
+);
 
 describe("vehicleBanner", () => {
   test("renders the blurrycar image", async () => {
     // Arrange
-
-    // Act
-    const wrapper = shallowMount(vehicleBanner);
-    await wrapper.setData({
-      vehicleImageSrc: "image_url",
-    });
+    const { wrapper, cmsContent } = setupMocks({ displayGenericVehicleImageProp: true, imageUrlValue: "NULL" });
+    
+    //Act
     wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
-    expect(wrapper.find("img").attributes("class")).toContain("blurrycar");
+    expect(wrapper.vm.vehicleImageToDisplay).toEqual( "image_url");
+    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
     wrapper.unmount();
   });
 });
 
-//Mock CMS content
-const cmsContent = {
-  GenericVehicleImage: "image_url",
-};
+describe("vehicleBanner", () => {
+  test("renders expected vehicle image", async () => {
+    // Arrange
+    const { wrapper, cmsContent } = setupMocks({ displayGenericVehicleImageProp: false, imageUrlValue: "url_to_vehicle_image" });
+    
+    //Act
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.vm.vehicleImageToDisplay).toEqual( "url_to_vehicle_image");
+    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+    wrapper.unmount();
+  });
+});
+
+describe("vehicleBanner", () => {
+  test("should render car icon when imageUrl is null and category is default", async () => {
+    // Arrange
+    const { wrapper, cmsContent } = setupMocks({ displayGenericVehicleImageProp: false, imageUrlValue: "NULL" });
+    
+    //Act
+    wrapper.vm.initializeComponent(cmsContent);
+    var iconUrl = wrapper.vm.vehicleImageToDisplay;
+
+    // Assert
+    expect(iconUrl).toEqual( "car_icon_url");
+    wrapper.unmount();
+  });
+});
+
+const params = [["CAR", "car_icon_url"],
+               ["TRUCK", "truck_icon_url"],
+               ["VAN", "van_icon_url"],
+               ["COMMERCIAL VAN", "commercial_van_icon_url"],
+               ["SUV", "suv_icon_url"],
+               ["OTHER", "car_icon_url"]];
+
+describe("vehicleBanner", () => {
+  test.each(params)("renders an icon instead of an image for %s and %s", async (category, expectedIcon) => {
+    // Arrange
+    const { wrapper, cmsContent } = setupMocks({ displayGenericVehicleImageProp: false, imageUrlValue: expectedIcon, categoryValue: category });
+    
+    //Act
+    wrapper.vm.initializeComponent(cmsContent);
+    var vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
+
+    // Assert
+    expect(wrapper.vm.carUnmatchedVehicleIcon).toEqual(cmsContent.CarUnmatchedVehicleIcon);
+    expect(wrapper.vm.truckUnmatchedVehicleIcon).toEqual(cmsContent.TruckUnmatchedVehicleIcon);
+    expect(wrapper.vm.vanUnmatchedVehicleIcon).toEqual(cmsContent.VanUnmatchedVehicleIcon);
+    expect(wrapper.vm.commercialUnmatchedVehicleIcon).toEqual(cmsContent.CommercialVanUnmatchedVehicleIcon);
+    expect(wrapper.vm.suvUnmatchedVehicleIcon).toEqual(cmsContent.SuvUnmatchedVehicleIcon);
+
+    expect(store.getters.vehicle.category).toEqual(category);
+    expect(wrapper.vm.vehicleImageToDisplay).toEqual(vehicleIcon);
+    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+    wrapper.unmount();
+  });
+});
+
+function setupMocks({
+  displayGenericVehicleImageProp,
+  imageUrlValue,
+  categoryValue = "CAR"
+}) {
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: { category: categoryValue, imageUrl: imageUrlValue } };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = { displayGenericVehicleImage: displayGenericVehicleImageProp };
+
+  const wrapper = shallowMount(vehicleBanner, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    GenericVehicleImage: "image_url",
+    CarUnmatchedVehicleIcon: "car_icon_url",
+    TruckUnmatchedVehicleIcon: "truck_icon_url",
+    VanUnmatchedVehicleIcon: "van_icon_url",
+    CommercialVanUnmatchedVehicleIcon: "commercial_van_icon_url",
+    SuvUnmatchedVehicleIcon: "suv_icon_url",
+  };
+  return { wrapper, cmsContent };
+}
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 5d4a398a2..0c164717c 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vehicle_banner mb-3 text-center">
     <img
-      class="vehicle-image img-fluid blurrycar"
+      class="vehicle-image img-fluid"
       :src="vehicleImageToDisplay"
       alt=""
     />
@@ -50,7 +50,7 @@ export default {
       this.commercialUnmatchedVehicleIcon = cmsContent.CommercialVanUnmatchedVehicleIcon;
       this.suvUnmatchedVehicleIcon = cmsContent.SuvUnmatchedVehicleIcon;
     },
-    getUnmatchedVehicleIcon: function(){
+    getUnmatchedVehicleIcon(){
        switch(this.$store.getters.vehicle.category){
           case this.vehicleCategories.CAR:
             return this.carUnmatchedVehicleIcon;
@@ -58,8 +58,6 @@ export default {
             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:
diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js
index 268a8e524..4e5d86786 100644
--- a/src/helpers/unit-test-helper.js
+++ b/src/helpers/unit-test-helper.js
@@ -1,6 +1,7 @@
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
 
 export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
@@ -23,6 +24,7 @@ export function getMountOptions(mockData) {
   mocks.storeActions = storeActions;
   mocks.storeMutations = storeMutations;
   mocks.navigationScenarios = navigationScenarios;
+  mocks.vehicleCategories = vehicleCategories;
 
   // Mock $store and $router when accessing this.$store/$router
   mocks.$store = mockData.store;
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 565986f86..021db39ef 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -2,9 +2,7 @@
     <div class="container-fluid shadow rounded-3 p-0 position-relative">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
-        <funnelSubHeader 
-            ref="funnelSubHeader"
-        />
+        <funnelSubHeader ref="funnelSubHeader" :hasSubText=true />
     </div>
 </template>
 

From 26a8eaa99a75d581d528738fd444935023361260 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Thu, 3 Feb 2022 06:10:37 -0500
Subject: [PATCH 3/5] CSR-78

---
 src/constants/store-mutations.js |  3 +++
 src/store/index.js               | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index f779b11cf..c572c4f69 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -7,6 +7,9 @@ const storeMutations = {
   UPDATE_STYLE: "updateStyle",
   UPDATE_CAR_ID: "updateCarId",
   UPDATE_VEHICLE_CATEGORY: "updateVehicleCategory",
+  UPDATE_VEHICLE_IMAGE_URL: "updateVehicleImageUrl",
+  UPDATE_VEHICLE_IMAGE_VIF_NUMBER: "updateVehicleImageVifNumber",
+  UPDATE_VEHICLE_IMAGE_COLOR: "updateVehicleImageColor",
 
   // EVENT BUS MUTATIONS
   ADD_EVENT_TO_BUS: "addEventToBus",
diff --git a/src/store/index.js b/src/store/index.js
index b4177f8d8..c7227de47 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -52,6 +52,15 @@ export const mutations = {
   updateVehicleCategory(state, category) {
     state.order.vehicle.category = category;
   },
+  updateVehicleImageUrl(state, imageUrl) {
+    state.order.vehicle.imageUrl = imageUrl;
+  },
+  updateVehicleImageVifNumber(state, imageVifNumber) {
+    state.order.vehicle.imageVifNumber = imageVifNumber;
+  },
+  updateVehicleImageColor(state, imageColor) {
+    state.order.vehicle.imageColor = imageColor;
+  },
 
   // EVENT BUS MUTATIONS
   addEventToBus(state, event) {
@@ -168,6 +177,9 @@ export const actions = {
       .then((response) => {
         context.commit(storeMutations.UPDATE_CAR_ID, response.data.carId);
         context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, response.data.category);
+        context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, response.data.imageUrl);
+        context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, response.data.imageVifNumber);
+        context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, response.data.imageVifColor);
         return response;
       });
   },

From 984ceb8225be0fbd5049b2029928cad5b8bcb57a Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Thu, 3 Feb 2022 06:20:12 -0500
Subject: [PATCH 4/5] CSR-78 formatting

---
 src/layouts/vehicle-year/vehicle-year.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 4756fad3c..b484eb24c 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -4,9 +4,7 @@
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
-        <funnelSubHeader 
-            ref="funnelSubHeader"
-        />
+        <funnelSubHeader vref="funnelSubHeader" />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
     </div>

From dce56fd900e71bd48663476b9d3b815ab940b3d5 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Thu, 3 Feb 2022 06:21:32 -0500
Subject: [PATCH 5/5] CSR-78 typo

---
 src/layouts/vehicle-year/vehicle-year.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index b484eb24c..7bc28c30d 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -4,7 +4,7 @@
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
-        <funnelSubHeader vref="funnelSubHeader" />
+        <funnelSubHeader ref="funnelSubHeader" />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
     </div>