Merge pull request #2098 from Safelite/CSR-2337-remove-evox-2

CSR-2337 remove references to EVOX and vehicle-banner.

src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue

@@ -8,11 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
-
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                 </div>
             </div>
@@ -56,7 +52,6 @@
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import alert from "@/ux-components/alert/alert";
 import questionChain from "@/digital-components/question-chain/question-chain";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
@@ -99,7 +94,6 @@ export default {
     },
     components: {
         funnelHeader,
-        vehicleBanner,
         alert,
         questionChain,
         funnelSubHeader,

src/fmg-components/vehicle-banner/vehicle-banner.spec.js

@@ -1,134 +0,0 @@
-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
-        const { wrapper } = setupMocks({
-            displayGenericVehicleImageProp: true,
-            imageUrlValue: "NULL",
-            displayUnmatchedVehicleIconProp: true,
-        });
-
-        // Assert
-        expect(wrapper.vm.vehicleImageToDisplay).toEqual(wrapper.vm.genericVehicleImage);
-        expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
-        wrapper.unmount();
-    });
-});
-
-describe("vehicleBanner", () => {
-    test("renders expected vehicle image", async () => {
-        // Arrange
-        const { wrapper } = setupMocks({
-            displayGenericVehicleImageProp: false,
-            imageUrlValue: "url_to_vehicle_image",
-        });
-
-        // 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 } = setupMocks({
-            displayGenericVehicleImageProp: false,
-            imageUrlValue: "NULL",
-        });
-
-        var iconUrl = wrapper.vm.vehicleImageToDisplay;
-
-        // Assert
-        expect(iconUrl).toEqual(undefined);
-        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
-            var vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
-            // Assert
-            expect(store.getters.vehicle.category).toEqual(category);
-            expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
-            wrapper.unmount();
-        }
-    );
-});
-
-function setupMocks({
-    displayGenericVehicleImageProp,
-    displayUnmatchedVehicleIconProp,
-    imageUrlValue,
-    categoryValue = "CAR",
-}) {
-    const mockGetCmsContent = jest.fn();
-    mockGetCmsContent((cmsWidget, field) => {
-        return field;
-    });
-    const mockMixin = {
-        methods: {
-            getCmsContent: mockGetCmsContent,
-        },
-    };
-    //Mock store
-    store.dispatch = jest.fn(() => {});
-    store.getters = { vehicle: { category: categoryValue, imageUrl: imageUrlValue } };
-    const mountOptions = getMountOptions({
-        store: {
-            dispatch: store.dispatch,
-            getters: store.getters,
-        },
-    });
-
-    //Mock props
-    mountOptions.propsData = {
-        displayGenericVehicleImage: displayGenericVehicleImageProp,
-        displayUnmatchedVehicleIconProp: displayUnmatchedVehicleIconProp,
-    };
-    mountOptions.mixins = [mockMixin];
-    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/fmg-components/vehicle-banner/vehicle-banner.vue

@@ -1,98 +0,0 @@
-<template>
-    <div class="vehicle_banner mb-4 text-center">
-        <img class="vehicle-image img-fluid" :src="vehicleImageToDisplay" alt="" />
-    </div>
-</template>
-
-<script>
-export default {
-    name: "vehicle-banner",
-    props: {
-        displayGenericVehicleImage: {
-            type: Boolean,
-            required: true,
-        },
-        cmsWidgetName: String,
-        displayVehicleImage: {
-            type: String,
-            required: false,
-            default: null,
-        },
-        displayUnmatchedVehicleIcon: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        vehicleCategory: {
-            type: String,
-            required: false,
-            default: null,
-        },
-    },
-    computed: {
-        vehicleImageToDisplay() {
-            if (this.displayVehicleImage !== null) {
-                return this.displayVehicleImage;
-            }
-            if (this.displayGenericVehicleImage) {
-                return this.genericVehicleImage;
-            }
-            if (
-                this.$store.getters.vehicle.imageUrl === null ||
-                this.$store.getters.vehicle.imageUrl === "NULL" ||
-                this.displayUnmatchedVehicleIcon
-            ) {
-                return this.getUnmatchedVehicleIcon();
-            }
-
-            return this.$store.getters.vehicle.imageUrl;
-        },
-        genericVehicleImage() {
-            return this.getCmsContent(this.cmsWidgetName, "GenericVehicleImage");
-        },
-        carUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, "CarUnmatchedVehicleIcon");
-        },
-        truckUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, "TruckUnmatchedVehicleIcon");
-        },
-        vanUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, "VanUnmatchedVehicleIcon");
-        },
-        commercialUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, "CommercialVanUnmatchedVehicleIcon");
-        },
-        suvUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, "SuvUnmatchedVehicleIcon");
-        },
-    },
-    methods: {
-        getUnmatchedVehicleIcon() {
-            const category = this.vehicleCategory ?? this.$store.getters.vehicle.category;
-            switch (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: 132px;
-}
-</style>

src/layouts/address-lookup/address-lookup.vue

@@ -12,11 +12,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        ref="vehicleBanner"
-                        :displayGenericVehicleImage="false" />
 
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
 
@@ -103,7 +99,6 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
 import alert from "@/ux-components/alert/alert";
@@ -480,7 +475,6 @@ export default {
     components: {
         funnelHeader,
         navbar,
-        vehicleBanner,
         funnelSubHeader,
         customerQuestions,
         textboxQuestion,

src/layouts/address-vehicles/address-vehicles.vue

@@ -7,10 +7,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
 
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
@@ -54,7 +51,6 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
 import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
@@ -243,7 +239,6 @@ export default {
     components: {
         Form,
         funnelHeader,
-        vehicleBanner,
         funnelSubHeader,
         alert,
         navbar,

src/layouts/bailout/bailout.vue

@@ -8,10 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
 
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
@@ -30,7 +27,6 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
@@ -71,7 +67,6 @@ export default {
     components: {
         funnelHeader,
         navbar,
-        vehicleBanner,
         funnelSubHeader,
         loadingModal,
     },

src/layouts/confirmation/confirmation.vue

@@ -512,7 +512,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 1rem 0 1.5rem 0;
+    padding: 1.5rem 0;
 
     p {
         display: inline-block;

src/layouts/estimate/estimate.vue

@@ -8,8 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
-                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
                         <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
@@ -40,7 +39,6 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
@@ -218,7 +216,6 @@ export default {
     },
     components: {
         funnelHeader,
-        vehicleBanner,
         funnelSubHeader,
         navbar,
         buttonQuestion,

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -7,10 +7,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
 
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
@@ -97,7 +94,6 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
@@ -403,7 +399,6 @@ export default {
     components: {
         funnelHeader,
         navbar,
-        vehicleBanner,
         funnelSubHeader,
         textboxQuestion,
         alert,

src/layouts/payment-method/payment-method.vue

@@ -8,12 +8,9 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
 
-                    <funnelSubHeader class="mb-5 mt-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <hr class="my-0" />
 

src/layouts/quote/quote.vue

@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
                     <cashOrInsuranceQuestion
                         ref="cashOrInsurance"

src/layouts/service-location/service-location.vue

@@ -8,8 +8,8 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-2" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <serviceZipModalQuestion
                         editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"

src/layouts/service-zip/service-zip.vue

@@ -8,8 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 mt-4">
-                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
                         <textboxQuestion
@@ -65,7 +64,6 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import alert from "@/ux-components/alert/alert";
@@ -278,7 +276,6 @@ export default {
     },
     components: {
         funnelHeader,
-        vehicleBanner,
         funnelSubHeader,
         navbar,
         Form,

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -9,11 +9,7 @@
                     </div>
                 </div>
                 <div class="row justify-content-center">
-                    <div class="col-md-6 col-xl-4">
+                    <div class="col-md-6 col-xl-4 mt-4">
-                        <vehicleBanner
-                            ref="vehicleBanner"
-                            cmsWidgetName="VehicleBannerWidget"
-                            :displayGenericVehicleImage="false" />
                         <funnelSubHeader
                             ref="funnelSubHeader"
                             cmsWidgetName="FunnelSubHeaderWidget" />
@@ -60,7 +56,6 @@
 // Components
 import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import alert from "@/ux-components/alert/alert";
@@ -238,7 +233,6 @@ export default {
         Form,
         glassPartQuestion,
         funnelHeader,
-        vehicleBanner,
         funnelSubHeader,
         navbar,
         alert,