Merge pull request #190 from Safelite/feature/CSR-78

Feature/csr 78

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>

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 };
+}

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

@@ -1,8 +1,8 @@
 <template>
   <div class="vehicle_banner mb-3 text-center">
     <img
-      class="vehicle-image img-fluid blurrycar"
-      :src="vehicleImageSrc"
+      class="vehicle-image img-fluid"
+      :src="vehicleImageToDisplay"
       alt=""
     />
   </div>
@@ -11,21 +11,70 @@
 <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(){
+       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.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/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",

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/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;

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

@@ -822,7 +822,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,10 +1,8 @@
 <template>
     <div class="container-fluid shadow rounded-3 p-2 position-relative">
         <funnelHeader ref="funnelHeader" />
-        <vehicleBanner ref="vehicleBanner" />
-        <funnelSubHeader 
-            ref="funnelSubHeader"
-        />
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+        <funnelSubHeader ref="funnelSubHeader" :hasSubText=true />
         <damageLocationQuestion ref="damageLocation" isMultiSelect v-model="damageLocationQuestionData" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect v-model="driverSideOptionsData" />
     </div>

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,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" />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </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

@@ -16,6 +16,9 @@ export const state = {
       style: null,
       carId: null,
       category: null,
+      imageUrl: null,
+      imageVifNumber: null,
+      imageColor: null,
     },
     damage: {
       isRepair: null,
@@ -49,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) {
@@ -165,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;
       });
   },