jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Bryan Mauger 2024-11-11 15:03:14 -05:00
parent 5caa64bdab
commit ca06d2013d
14 changed files with 14 additions and 288 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -8,11 +8,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<div class="col-md-6 col-xl-4 mt-4">
<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,

134
src/fmg-components/vehicle-banner/vehicle-banner.spec.js
View file

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

98
src/fmg-components/vehicle-banner/vehicle-banner.vue
View file

@ -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>

8
src/layouts/address-lookup/address-lookup.vue
View file

@ -12,11 +12,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
ref="vehicleBanner"
:displayGenericVehicleImage="false" />
<div class="col-md-6 col-xl-4 mt-4">
<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,

7
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -7,10 +7,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<div class="col-md-6 col-xl-4 mt-4">
<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,

7
src/layouts/bailout/bailout.vue
View file

@ -8,10 +8,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<div class="col-md-6 col-xl-4 mt-4">
<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,
},

2
src/layouts/confirmation/confirmation.vue
View file

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

5
src/layouts/estimate/estimate.vue
View file

@ -8,8 +8,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<div class="col-md-6 col-xl-4 mt-4">
<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,

7
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -7,10 +7,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<div class="col-md-6 col-xl-4 mt-4">
<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,

7
src/layouts/payment-method/payment-method.vue
View file

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

2
src/layouts/quote/quote.vue
View file

@ -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"

4
src/layouts/service-location/service-location.vue
View file

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

5
src/layouts/service-zip/service-zip.vue
View file

@ -8,8 +8,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<div class="col-md-6 col-xl-4 mt-4">
<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,

8
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -9,11 +9,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<div class="col-md-6 col-xl-4 mt-4">
<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,