Merge pull request #70 from Safelite/feature/CSR-120_vehicle-banner-2

Feature/CSR-120 vehicle banner 2

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

@@ -8,7 +8,7 @@
     />
     <img
       class="vehicle-image img-fluid blurrycar"
-      src='@/assets/img/blurrycar.png'
+      :src="genericVehicleImageSrc"
       alt=""
       v-else
     />
@@ -28,11 +28,12 @@ export default {
           make: this.$store.state.order.vehicle.make,
           model: this.$store.state.order.vehicle.model,
           style: this.$store.state.order.vehicle.style
-        }
-      }
+        };
+      },
   },
   props: {
-    passedCarId: String
+    passedCarId: String,
+    genericVehicleImageSrc: String
   },
   data() {
       return {
@@ -69,8 +70,8 @@ export default {
           this.vehicleImageSrc = response.data.imgSrc;
         }
       });
-    }
-  }
+    },
+  },
 }
 </script>
 

src/constants/widget-names.js

@@ -1,6 +1,7 @@
 const widgetNames = {
   PAGE_HEADER_WIDGET: "PageHeaderWidget",
   RADIO_QUESTION_WIDGET: "RadioQuestionWidget",
+  VEHICLE_BANNER_WIDGET: "VehicleBannerWidget",
 };
 
 export { widgetNames };

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

@@ -314,12 +314,8 @@
     </div>
     <div class="row my-3">
       <div class="col">
-        <vehicleBanner
-          passedCarId=""
-        />
-        <vehicleBanner
-          passedCarId="CR00068434"
-        />
+        <vehicleBanner genericVehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" />
+        <vehicleBanner passedCarId="CR00068434" />
       </div>
     </div>
   </div>

src/layouts/vehicle-year/vehicle-year.spec.js

@@ -19,6 +19,7 @@ describe("vehicle-year.vue", () => {
       getPageContent: {
         PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
         RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
+        VehicleBannerWidget: [{ GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" }],
         isCmsContentReady: true,
       },
       getVehicleYear: [2023, 2022, 2021]

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

@@ -1,7 +1,7 @@
 <template v-if="isCmsContentReady">
   <div class="select-car">
     <div class="select-car-form rounded text-center">
-      <vehicleBanner />
+      <vehicleBanner :genericVehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
       <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
       <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" />
     </div>
@@ -27,6 +27,7 @@ export default {
       pageHeaderWidgets: {},
       radioQuestionWidgets: {},
       vehicleYears: [],
+      vehicleBannerWidget: {}
     };
   },
   computed: {},
@@ -54,6 +55,7 @@ export default {
       next((vm) => {
         vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
         vm.radioQuestionWidgets = resultMap.getPageContent.RadioQuestionWidget[0];
+        vm.vehicleBannerWidget = resultMap.getPageContent.VehicleBannerWidget[0];
         vm.vehicleYears = resultMap.getVehicleYear;
       });      
     });