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

Merge pull request #970 from Safelite/feature/richardson/INSR-7740

Browse source 
Last Changes for this card
This commit is contained in:
brich1212safe 2025-12-03 15:56:23 -05:00 committed by GitHub
commit 62667545e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 259 additions and 528 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/iss-components/questions-page-layout/questions-page-layout.spec.js
View file

@ -19,60 +19,6 @@ jest.mock('@/helpers/cms-content-helper', () => ({
}));
function setupMocks() {
// TODO: Use or delete these
const unused1 = () => ({
partsOrQuestions: [
{
parts: null,
partQuestions: [
{
questionSequence: 1,
questionText:
'Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?',
answers: [
{
answerResult: '',
answerText: 'Yes',
nextQuestionSequence: 2
},
{
answerResult: '',
answerText: 'No',
nextQuestionSequence: 3
}
]
}
],
glassLocation: 'Windshield',
glassName: 'Single',
answerKey: 'Windshield-Single',
answerData: null
}
]
});
const unused2 = () => ({
partsQuestionAnswers: [
{
glassLocation: 'Windshield',
glassName: 'Single',
result: 'FW04848',
answeredQuestions: [
{
questionText:
'Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?',
selectedAnswerText: 'Yes',
questionNum: 1
},
{
questionText:
'Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?',
selectedAnswerText: 'Yes',
questionNum: 2
}
]
}
]
});
const mountOptions = getMountOptions({
mixins: [baseMixin, vehicleQuestionsMixin]
});

55
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -1,18 +1,13 @@
<template>
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<loadingModal ref="loadingModal" :textSlides="loadingText" />
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="iss-heritage-container-width">
<div class="questions-page-layout-container iss-heritage-content-container-width">
<siteSubHeader
class="mt-4"
cmsWidgetName="SiteSubHeaderWidget" />
<alert
ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget"
@ -48,23 +43,19 @@
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import alert from '@/ux-components/alert/alert.vue';
import questionChain from '@/digital-components/question-chain/question-chain.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
export default {
name: 'questions-page',
components: {
siteHeader,
vehicleBanner,
alert,
questionChain,
siteSubHeader,
siteFooter,
loadingModal,
siteFooter
},
props: {
isMetaValid: Boolean,
@ -74,7 +65,7 @@ export default {
validationRules: String,
modelValue: Object,
loadingText: Array,
index: Number,
index: Number
},
emits: ['update:modelValue', 'forwardButtonAction', 'back-click'],
computed: {
@ -84,16 +75,16 @@ export default {
},
set(newValue) {
this.$emit('update:modelValue', newValue);
},
},
}
}
},
methods: {
showThisQuestionChain(glass, i) {
// return false if no questions or if suppressed
if (
!glass.questions ||
glass.questions?.length < 1 ||
glass.isSuppressedPart
!glass.questions
|| glass.questions?.length < 1
|| glass.isSuppressedPart
) {
return false;
}
@ -106,15 +97,21 @@ export default {
},
handleBackButtonAction() {
this.$emit('back-click');
},
showLoadingModal() {
this.$refs.loadingModal.showModal();
},
},
}
}
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.questions-page-layout-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.questions-page {
.question-text {
margin-bottom: 0.5rem;

114
src/iss-components/vehicle-banner/vehicle-banner.spec.js
View file

@ -1,114 +0,0 @@
import { shallowMount } from '@vue/test-utils';
import vehicleCategories from '@/constants/vehicle-categories.js';
import { useMainStore } from '@/store';
import { createApp } from 'vue';
import { createPinia, mapStores } from 'pinia';
import App from '@/App.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
const cmsData = { VehicleBannerWidget:
{
GenericVehicleImage: 'blurred-image.jpg',
GenericVehicleImageFilePath: 'images/default-source/default-album/blurred-image.jpg',
CarUnmatchedVehicleIcon: 'car-placeholder.jpg',
TruckUnmatchedVehicleIcon: 'truck-placeholder.jpg',
VanUnmatchedVehicleIcon: 'van-placeholder.jpg',
CommercialVanUnmatchedVehicleIcon: 'commercial-placeholder.jpg',
SuvUnmatchedVehicleIcon: 'suv-placeholder.jpg'
} };
const vueApp = createApp(App);
const pinia = createPinia();
vueApp.use(pinia);
const store = useMainStore();
const mockMixin = {
methods: {
getCmsContent(widgetName, fieldName) {
return cmsData[widgetName][fieldName];
}
},
computed: {
...mapStores(useMainStore),
vehicleCategories() {
return vehicleCategories;
}
}
};
describe('vehicleBanner', () => {
test('renders the blurrycar image when displayGenericVehicleImage is true', async () => {
const wrapper = shallowMount(vehicleBanner, {
propsData: {
displayGenericVehicleImage: true,
cmsWidgetName: 'VehicleBannerWidget'
},
mixins: [mockMixin]
});
expect(wrapper.vm.vehicleImageToDisplay).toEqual(wrapper.vm.genericVehicleImage);
expect(wrapper.find('img').attributes('class')).toContain('vehicle-image');
wrapper.unmount();
});
test('renders expected vehicle image', async () => {
store.order.vehicle.imageUrl = 'url_to_vehicle_image';
const wrapper = shallowMount(vehicleBanner, {
propsData: {
displayGenericVehicleImage: false,
cmsWidgetName: 'VehicleBannerWidget'
},
mixins: [mockMixin]
});
expect(wrapper.vm.vehicleImageToDisplay).toEqual('url_to_vehicle_image');
expect(wrapper.find('img').attributes('class')).toContain('vehicle-image');
wrapper.unmount();
});
test('should render default car icon when imageUrl is null and category is default', async () => {
store.order.vehicle.imageUrl = null;
const wrapper = shallowMount(vehicleBanner, {
propsData: {
displayGenericVehicleImage: false,
cmsWidgetName: 'VehicleBannerWidget'
},
mixins: [mockMixin]
});
const iconUrl = wrapper.vm.vehicleImageToDisplay;
expect(iconUrl).toEqual('car-placeholder.jpg');
wrapper.unmount();
});
const params = [['CAR', 'car-placeholder.jpg'],
['TRUCK', 'truck-placeholder.jpg'],
['VAN', 'van-placeholder.jpg'],
['COMMERCIAL VAN', 'commercial-placeholder.jpg'],
['SUV', 'suv-placeholder.jpg'],
['OTHER', 'car-placeholder.jpg']];
test.each(params)('renders correct icon when imageUrl is not populated for %s and %s', async (category, expectedIcon) => {
store.order.vehicle.imageUrl = null;
store.order.vehicle.category = category;
const wrapper = shallowMount(vehicleBanner, {
propsData: {
displayGenericVehicleImage: false,
cmsWidgetName: 'VehicleBannerWidget'
},
mixins: [mockMixin]
});
const vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
expect(vehicleIcon).toEqual(expectedIcon);
expect(wrapper.find('img').attributes('class')).toContain('vehicle-image');
wrapper.unmount();
});
});

84
src/iss-components/vehicle-banner/vehicle-banner.vue
View file

@ -1,84 +0,0 @@
<template>
<div class="vehicle_banner 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
},
computed: {
vehicleImageToDisplay() {
if (this.displayGenericVehicleImage) {
return this.genericVehicleImage;
}
const imageUrl = (this.mainStore.hasSubmittedOrder())
? this.mainStore.getSubmittedOrder().vehicle.imageUrl
: this.mainStore.order.vehicle.imageUrl;
if (!imageUrl || imageUrl === 'NULL') {
return this.getUnmatchedVehicleIcon();
}
return 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.mainStore.getSubmittedOrder()?.vehicle.category ?? this.mainStore.order.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>

2
src/layouts/access-denied/access-denied.vue
View file

@ -1,4 +1,5 @@
<template>
<form>
<div class="page-container-grouped-styles access-denied">
<div class="fade-on-route-transition position-relative">
<div class="container-fluid">
@ -10,6 +11,7 @@
</div>
</div>
</div>
</form>
</template>
<script>

186
src/layouts/order-confirmation/order-confirmation.spec.js
View file

@ -13,7 +13,7 @@ import coverageStatuses from '@/constants/coverage-statuses';
import coverageType from '@/constants/coverage-type';
import { deepClone } from '@/helpers/object-helper';
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
import { paymentMethods } from "@/constants/payment-method-constants";
import { paymentMethods } from '@/constants/payment-method-constants';
jest.mock('@/helpers/layout-helper.js', () => jest.fn());
@ -42,10 +42,6 @@ const headerStub = {
render: () => {}
};
const vehicleBannerStub = {
render: () => {}
};
const addToCalendarStub = {
render: () => {}
};
@ -148,7 +144,6 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
mountOptions.global.stubs = {
siteFooter: footerStub,
siteHeader: headerStub,
vehicleBanner: vehicleBannerStub,
addToCalendar: addToCalendarStub
};
@ -181,7 +176,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
describe('OrderConfirmation.vue', () => {
afterEach(() => {
jest.resetAllMocks();
})
});
describe('Page pre-requisites', () => {
test('If submitted order saved to store, page pre-reqs return true', async () => {
// Arrange
@ -204,7 +199,7 @@ describe('OrderConfirmation.vue', () => {
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage);
};
wrapper = getMountedComponent({}, {}, mockStoreActions).wrapper;
wrapper = getMountedComponent({}, {}, mockStoreActions).wrapper;
});
test('Should render Site Header', () => {
// Act
@ -213,13 +208,6 @@ describe('OrderConfirmation.vue', () => {
// Assert
expect(siteHeader.exists()).toBe(true);
});
test('Should render Vehicle Banner', () => {
// Act
const vehicleBanner = wrapper.findComponent(vehicleBannerStub);
// Assert
expect(vehicleBanner.exists()).toBe(true);
});
test('If Advanced flow, should display Site Footer', () => {
// Arrange
const mockStoreActions = () => {
@ -287,7 +275,7 @@ describe('OrderConfirmation.vue', () => {
});
});
describe('Computed properties', () => {
describe('customValueMap', () =>{
describe('customValueMap', () => {
test.each([
'inShopAppointment',
'dropOffAppointment',
@ -314,7 +302,7 @@ describe('OrderConfirmation.vue', () => {
});
test('returns expected vehicle info', () => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
const year = 1998;
const make = 'Toyota';
const model = 'Cruse';
@ -327,9 +315,9 @@ describe('OrderConfirmation.vue', () => {
const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
// Act
const actualYear = wrapper.vm.customValueMap['vehicleYear'];
const actualMake = wrapper.vm.customValueMap['vehicleMake'];
const actualModel = wrapper.vm.customValueMap['vehicleModel'];
const actualYear = wrapper.vm.customValueMap.vehicleYear;
const actualMake = wrapper.vm.customValueMap.vehicleMake;
const actualModel = wrapper.vm.customValueMap.vehicleModel;
// Assert
expect(actualYear).toBe(year);
@ -338,7 +326,7 @@ describe('OrderConfirmation.vue', () => {
});
test('returns expected customer email', () => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
const emailAddress = 'email@google.com';
order.customer.emailAddress = emailAddress;
const mockStoreActions = () => {
@ -347,19 +335,15 @@ describe('OrderConfirmation.vue', () => {
const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
// Act
const actualEmail = wrapper.vm.customValueMap['email'];
const actualEmail = wrapper.vm.customValueMap.email;
// Assert
expect(actualEmail).toBe(emailAddress);
});
})
});
describe('confirmationEmailText', () => {
const greaterId = "&gt;";
const lessId = "&lt;";
const mobileWording = "Mobile wording";
const nonMobileWording = "Non mobile wording";
const mobileWidget = "MobileWordingWidget";
const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
const greaterId = '&gt;';
const lessId = '&lt;';
test.each([
['test', 'test'],
[`te${greaterId}st`, 'te>st'],
@ -394,7 +378,7 @@ describe('OrderConfirmation.vue', () => {
['Between 11 PM - 12 AM', '23:00', '00:00']
])('should return Mobile time in expected format "%p" when start time "%p" and end time "%p"', (expected, startTime, endTime) => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
order.schedule.startTime = startTime;
order.schedule.endTime = endTime;
order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
@ -416,7 +400,7 @@ describe('OrderConfirmation.vue', () => {
['01:00', '02:00']
])('should return Drop off time in same format regardless of start/end time', (startTime, endTime) => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
order.schedule.startTime = startTime;
order.schedule.endTime = endTime;
order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
@ -440,7 +424,7 @@ describe('OrderConfirmation.vue', () => {
['at 12:00 PM', '12:00', '02:00']
])('should return In Shop time in expected format "%p" when start time "%p"', (expected, startTime, endTime) => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
order.schedule.startTime = startTime;
order.schedule.endTime = endTime;
order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
@ -457,19 +441,19 @@ describe('OrderConfirmation.vue', () => {
});
});
describe('appointmentLocation', () => {
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
order.serviceLocation = {
address: "123 Service Rd.",
address2: "Box 4",
city: "Columbus",
state: "OH",
zipCode: "12345",
address: '123 Service Rd.',
address2: 'Box 4',
city: 'Columbus',
state: 'OH',
zipCode: '12345',
provider: {
address: {
streetAddress: "304 provider Ln.",
city: "pittsburg",
state: "PA",
zipCode: "16001"
streetAddress: '304 provider Ln.',
city: 'pittsburg',
state: 'PA',
zipCode: '16001'
}
}
};
@ -509,9 +493,7 @@ describe('OrderConfirmation.vue', () => {
// Assert
expect(text).toBe(expectedShopLocation);
});
test.each(
['turtle', undefined, null]
)('unknown appointment type %p returns null', (type) => {
test.each(['turtle', undefined, null])('unknown appointment type %p returns null', (type) => {
// Arrange
order.serviceLocation.appointmentType = type;
const mockStoreActions = () => {
@ -527,20 +509,20 @@ describe('OrderConfirmation.vue', () => {
});
});
describe('serviceLocationFullAddress', () => {
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
beforeEach(() => {
order.serviceLocation = {
address: "123 Service Rd.",
address2: "Box 4",
city: "Columbus",
state: "OH",
zipCode: "12345",
address: '123 Service Rd.',
address2: 'Box 4',
city: 'Columbus',
state: 'OH',
zipCode: '12345',
provider: {
address: {
streetAddress: "304 provider Ln.",
city: "pittsburg",
state: "PA",
zipCode: "16001"
streetAddress: '304 provider Ln.',
city: 'pittsburg',
state: 'PA',
zipCode: '16001'
}
}
};
@ -550,7 +532,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., Box 4,<br/> Columbus, OH 12345";
const expected = '123 Service Rd., Box 4,<br/> Columbus, OH 12345';
// Act
const text = wrapper.vm.serviceLocationFullAddress;
@ -564,7 +546,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = ", Box 4,<br/> Columbus, OH 12345";
const expected = ', Box 4,<br/> Columbus, OH 12345';
// Act
const text = wrapper.vm.serviceLocationFullAddress;
@ -578,7 +560,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., <br/> Columbus, OH 12345";
const expected = '123 Service Rd., <br/> Columbus, OH 12345';
// Act
const text = wrapper.vm.serviceLocationFullAddress;
@ -592,7 +574,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., Box 4,<br/> , OH 12345";
const expected = '123 Service Rd., Box 4,<br/> , OH 12345';
// Act
const text = wrapper.vm.serviceLocationFullAddress;
@ -606,7 +588,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., Box 4,<br/> Columbus, 12345";
const expected = '123 Service Rd., Box 4,<br/> Columbus, 12345';
// Act
const text = wrapper.vm.serviceLocationFullAddress;
@ -620,7 +602,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., Box 4,<br/> Columbus, OH ";
const expected = '123 Service Rd., Box 4,<br/> Columbus, OH ';
// Act
const text = wrapper.vm.serviceLocationFullAddress;
@ -638,7 +620,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = ", <br/> , ";
const expected = ', <br/> , ';
// Act
const text = wrapper.vm.serviceLocationFullAddress;
@ -648,20 +630,20 @@ describe('OrderConfirmation.vue', () => {
});
});
describe('providerFullAddress', () => {
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
beforeEach(() => {
order.serviceLocation = {
address: "123 Service Rd.",
address2: "Box 4",
city: "Columbus",
state: "OH",
zipCode: "12345",
address: '123 Service Rd.',
address2: 'Box 4',
city: 'Columbus',
state: 'OH',
zipCode: '12345',
provider: {
address: {
streetAddress: "304 provider Ln.",
city: "pittsburg",
state: "PA",
zipCode: "16001"
streetAddress: '304 provider Ln.',
city: 'pittsburg',
state: 'PA',
zipCode: '16001'
}
}
};
@ -671,7 +653,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "304 Provider Ln.,<br/> Pittsburg, PA 16001";
const expected = '304 Provider Ln.,<br/> Pittsburg, PA 16001';
// Act
const text = wrapper.vm.providerFullAddress;
@ -685,7 +667,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "";
const expected = '';
// Act
const text = wrapper.vm.providerFullAddress;
@ -699,7 +681,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "304 Provider Ln.,<br/> , PA 16001";
const expected = '304 Provider Ln.,<br/> , PA 16001';
// Act
const text = wrapper.vm.providerFullAddress;
@ -713,7 +695,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "304 Provider Ln.,<br/> Pittsburg, 16001";
const expected = '304 Provider Ln.,<br/> Pittsburg, 16001';
// Act
const text = wrapper.vm.providerFullAddress;
@ -727,7 +709,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "304 Provider Ln.,<br/> Pittsburg, PA ";
const expected = '304 Provider Ln.,<br/> Pittsburg, PA ';
// Act
const text = wrapper.vm.providerFullAddress;
@ -744,7 +726,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "";
const expected = '';
// Act
const text = wrapper.vm.providerFullAddress;
@ -754,10 +736,10 @@ describe('OrderConfirmation.vue', () => {
});
});
describe('appointmentWordingText', () => {
const mobileWording = "Mobile wording";
const nonMobileWording = "Non mobile wording";
const mobileWidget = "MobileWordingWidget";
const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
const mobileWording = 'Mobile wording';
const nonMobileWording = 'Non mobile wording';
const mobileWidget = 'MobileWordingWidget';
const dropOffAndInShopWidget = 'DropOffAndInShopWordingWidget';
let mixin;
beforeEach(() => {
processIfStatements.mockImplementation((content) => content);
@ -765,13 +747,13 @@ describe('OrderConfirmation.vue', () => {
mixin = {
methods: {
getCmsContent: jest.fn().mockImplementation((widget, _) => {
if (widget == mobileWidget){
if (widget === mobileWidget) {
return mobileWording;
}
if (widget == dropOffAndInShopWidget){
if (widget === dropOffAndInShopWidget) {
return nonMobileWording;
}
return "";
return '';
}),
setCmsContent: jest.fn()
}
@ -784,15 +766,15 @@ describe('OrderConfirmation.vue', () => {
[AppointmentTypeStrings.IN_SHOP, nonMobileWording],
['unknown', null],
[null, null],
[undefined, null],
[undefined, null]
])('appointment type %p returns wording %p', (type, wording) => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type;
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions, mixin);
// Act
@ -803,10 +785,10 @@ describe('OrderConfirmation.vue', () => {
});
});
describe('appointmentWordingText2', () => {
const mobileWording = "Mobile wording";
const nonMobileWording = "Non mobile wording";
const mobileWidget = "MobileWordingWidget";
const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
const mobileWording = 'Mobile wording';
const nonMobileWording = 'Non mobile wording';
const mobileWidget = 'MobileWordingWidget';
const dropOffAndInShopWidget = 'DropOffAndInShopWordingWidget';
let mixin;
beforeEach(() => {
processIfStatements.mockImplementation((content) => content);
@ -814,13 +796,13 @@ describe('OrderConfirmation.vue', () => {
mixin = {
methods: {
getCmsContent: jest.fn().mockImplementation((widget, _) => {
if (widget == mobileWidget){
if (widget === mobileWidget) {
return mobileWording;
}
if (widget == dropOffAndInShopWidget){
if (widget === dropOffAndInShopWidget) {
return nonMobileWording;
}
return "";
return '';
}),
setCmsContent: jest.fn()
}
@ -833,10 +815,10 @@ describe('OrderConfirmation.vue', () => {
[AppointmentTypeStrings.IN_SHOP, nonMobileWording],
['unknown', null],
[null, null],
[undefined, null],
[undefined, null]
])('appointment type %p returns wording "%p"', (type, wording) => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type;
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@ -861,7 +843,7 @@ describe('OrderConfirmation.vue', () => {
[undefined, false]
])('appointment type %p returns %p', (type, expected) => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type;
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@ -886,7 +868,7 @@ describe('OrderConfirmation.vue', () => {
[undefined, false]
])('appointment type %p returns %p', (type, expected) => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type;
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@ -911,7 +893,7 @@ describe('OrderConfirmation.vue', () => {
[undefined, false]
])('appointment type %p returns %p', (type, expected) => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type;
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@ -957,7 +939,7 @@ describe('OrderConfirmation.vue', () => {
['Wednesday, December 30', '2026-12-30']
])('returns %p given %p', (expected, date) => {
// Arrange
var order = deepClone(sessionStorage);
const order = deepClone(sessionStorage);
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
@ -970,5 +952,5 @@ describe('OrderConfirmation.vue', () => {
expect(result).toBe(expected);
});
});
})
});
});

88
src/layouts/order-confirmation/order-confirmation.vue
View file

@ -4,14 +4,12 @@
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader :cmsWidgetName="widgets.siteHeader" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader :cmsWidgetName="widgets.siteHeader" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="iss-heritage-container-width">
<div class="order-confirmation-container iss-heritage-content-container-width">
<div class="text-center text-color--black pt-5 pb-5 fs-5">
<img :src="orderConfirmationImage" />
<span
@ -19,15 +17,11 @@
v-html="orderConfirmationHeaderText"></span>
</div>
<div class="appointment-details">
<div>
<vehicleBanner
:cmsWidgetName="widgets.vehicleBanner"
:displayGenericVehicleImage="false">
</vehicleBanner>
</div>
<div class="appointment-date-time text-center mt-4">
<p>{{ formatDate(schedule.date) }}</p>
<p class="mt-2">{{ appointmentTimeText }}</p>
<p class="mt-2">
{{ appointmentTimeText }}
</p>
</div>
<addToCalendar
mobileWidgetName="AddToCalendar_Mobile"
@ -85,7 +79,6 @@
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue';
import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
@ -117,7 +110,6 @@ export default {
// eslint-disable-next-line vue/no-reserved-component-names
Form,
siteHeader,
vehicleBanner,
siteFooter,
addToCalendar,
cartDropdown
@ -174,14 +166,13 @@ export default {
referralNumber: referralNumber?.toString(),
widgets: {
siteHeader: 'SiteHeaderWidget',
vehicleBanner: 'VehicleBannerWidget',
emailConfirmation: 'EmailConfirmationWordingWidget',
orderConfirmation: 'OrderConfirmationContent',
mobile: 'MobileWordingWidget',
dropOffAndInShop: 'DropOffAndInShopWordingWidget',
siteFooter: 'SiteFooterWidget'
}
}
};
},
computed: {
customValueMap() {
@ -196,12 +187,13 @@ export default {
email: this.customerEmail,
CUSTOMER_PORTAL_URL: applicationConfig.CUSTOMER_PORTAL_URL,
CUSTOMER_PORTAL_LOGIN_TOKEN: this.customerPortalLoginToken
}
};
},
confirmationEmailText() {
var content = this.getCmsContentWithCustomValues(
const content = this.getCmsContentWithCustomValues(
this.widgets.emailConfirmation,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
return content
?.replaceAll('&lt;', '<')
?.replaceAll('&gt;', '>');
@ -209,41 +201,47 @@ export default {
orderConfirmationHeaderText() {
return this.getCmsContent(
this.widgets.orderConfirmation,
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
);
},
orderConfirmationImage() {
return this.getCmsContent(
this.widgets.orderConfirmation,
widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
widgetFields.CONTENT_GROUP_WIDGET.IMAGE
);
},
mobileWordingText() {
return this.getCmsContentWithCustomValues(
this.widgets.mobile,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
},
mobileWordingText2() {
return this.getCmsContent(
this.widgets.mobile,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
);
},
nonMobileWordingText() {
return this.getCmsContentWithCustomValues(
this.widgets.dropOffAndInShop,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
},
nonMobileWordingText2() {
return this.getCmsContentWithCustomValues(
this.widgets.dropOffAndInShop,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
);
},
appointmentTimeText() {
const { startTime, endTime } = this.schedule;
if (this.isDropOffAppointment){
if (this.isDropOffAppointment) {
return 'Drop off before 9:30 AM';
}
if (this.isInShopAppointment){
if (this.isInShopAppointment) {
const formattedStartTime = get12HourTimeFormat(startTime);
return `at ${formattedStartTime}`
return `at ${formattedStartTime}`;
}
if (this.isMobileAppointment) {
const mobileStartTime = get12HourTimeMobileFormat(startTime);
@ -253,38 +251,38 @@ export default {
return null;
},
appointmentLocation() {
if (this.isMobileAppointment){
if (this.isMobileAppointment) {
return this.serviceLocationFullAddress;
}
if (this.isDropOffAppointment || this.isInShopAppointment){
if (this.isDropOffAppointment || this.isInShopAppointment) {
return this.providerFullAddress;
}
return null
return null;
},
serviceLocationFullAddress() {
var { address, address2, city, state, zipCode } = this.serviceLocation;
const { address, address2, city, state, zipCode } = this.serviceLocation;
return `${address ?? ''}, ${address2 ? `${address2},` : ''}<br/> ${city ?? ''}, ${state ?? ''} ${zipCode ?? ''}`;
},
providerFullAddress() {
var { streetAddress, city, state, zipCode } = this.providerAddress;
const { streetAddress, city, state, zipCode } = this.providerAddress;
return streetAddress
? `${toTitleCase(streetAddress)},<br/> ${toTitleCase(city)}, ${state ?? ''} ${zipCode ?? ''}`
: '';
},
appointmentWordingText() {
if (this.isMobileAppointment){
if (this.isMobileAppointment) {
return this.mobileWordingText;
}
if (this.isInShopAppointment || this.isDropOffAppointment){
if (this.isInShopAppointment || this.isDropOffAppointment) {
return this.nonMobileWordingText;
}
return null;
},
appointmentWordingText2() {
if (this.isMobileAppointment){
if (this.isMobileAppointment) {
return this.mobileWordingText2;
}
if (this.isInShopAppointment || this.isDropOffAppointment){
if (this.isInShopAppointment || this.isDropOffAppointment) {
return this.nonMobileWordingText2;
}
return null;
@ -293,7 +291,7 @@ export default {
const mobileAppointmentTypes = [
AppointmentTypeStrings.MOBILE,
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
]
];
return mobileAppointmentTypes.includes(this.appointmentType);
},
isInShopAppointment() {
@ -402,7 +400,7 @@ export default {
const processedIfStatements = processIfStatements(
rawText,
'custom',
(v) => { return this.customValueMap[v] }
(v) => this.customValueMap[v]
);
return getStringWithCustomValues(processedIfStatements, this.customValueMap);
},
@ -420,6 +418,14 @@ export default {
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.order-confirmation-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.page-container-grouped-styles {
overflow: auto;

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

@ -4,24 +4,19 @@
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<div class="iss-heritage-container-width">
<div class="payment-method-container iss-heritage-content-container-width">
<siteSubHeader
class="mb-5 mt-4 px-3"
cmsWidgetName="SiteSubHeaderWidget"
subTextClasses="text-center"
subHeaderClasses="mt-2" />
subHeaderClasses="mt-4" />
<div class="main-content-container">
<hr class="my-0" />
<reviewDropdown ref="reviewDropdown" />
@ -88,7 +83,6 @@ import { Form } from 'vee-validate';
import issPageValues from '@/router/router-constants/issPage-values';
import bailoutMessage from '@/constants/bailoutMessage';
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import { saveSession, submitWorkOrder } from '@/helpers/order-helper.js';
import { experimentSettings } from '@/constants/experiments';
import submitType from '@/constants/submit-type';
@ -106,8 +100,7 @@ export default {
reviewDropdown,
cartDropdown,
paymentMethodQuestion,
alert,
VehicleBanner
alert
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -305,10 +298,18 @@ export default {
<style lang="scss" scoped>
$page-side-padding: 1.5rem;
.iss-heritage-container-width {
.payment-method-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.main-content-container {
padding: 0;
}
padding: 0;
}
.page-container-grouped-styles {
overflow: auto;

6
src/layouts/payment-page/payment-page.spec.js
View file

@ -191,7 +191,7 @@ const defaultOrder = {
damage: {
isRepair: false,
numberOfChips: null,
glassToReplace: [{location: 'windshield'}]
glassToReplace: [{ location: 'windshield' }]
},
lineItems: {
glassParts: [parts.windshield],
@ -380,7 +380,7 @@ describe('payment-page.vue', () => {
// Arrange
const { wrapper } = getMountedComponent(defaultOrder);
const outerDiv = wrapper.find('.container-fluid');
const outerDiv = wrapper.find('.fade-on-route-transition');
const clickFn = jest.fn();
outerDiv.element.addEventListener('click', clickFn);
@ -443,7 +443,7 @@ describe('payment-page.vue', () => {
const { wrapper } = getMountedComponent(defaultOrder);
useMainStore().order.payment.paymentMethod = paymentMethods.PayNow;
useMainStore().savePaymentMethodChoice = jest.fn().mockImplementation((value) => {useMainStore().order.payment.paymentMethod = value});
useMainStore().savePaymentMethodChoice = jest.fn().mockImplementation((value) => { useMainStore().order.payment.paymentMethod = value; });
// Act
wrapper.vm.handleIFrameContentWindowMessage(event);

25
src/layouts/payment-page/payment-page.vue
View file

@ -1,13 +1,11 @@
<template>
<Form>
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="iss-heritage-container-width">
<div class="payment-page-container iss-heritage-content-container-width">
<alert
v-if="displayPayInAdvanceCreditCardAlert"
name="payInAdvanceCreditCardErrorAlert"
@ -787,12 +785,19 @@ export default {
};
</script>
<style lang="scss" scoped>
.container-fluid {
&.fade-on-route-transition {
height: unset;
.iss-heritage-container-width {
.payment-page-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.fade-on-route-transition {
height: unset;
}
.payment p {
margin-bottom: 0.75rem;
}

23
src/layouts/service-packages/service-packages.vue
View file

@ -4,16 +4,14 @@
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition service-packages">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition service-packages">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="iss-heritage-container-width">
<div class="service-packages-container iss-heritage-content-container-width">
<siteSubHeader
class="mb-2 mt-4"
class="mt-4"
subHeaderClasses="mt-5"
justification="left"
cmsWidgetName="SiteSubHeaderWidget"
@ -199,6 +197,15 @@ export default {
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.service-packages-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.subheader-secondary {
margin-top: 0.5rem;
padding: 0px;

17
src/layouts/tpa-confirmation/tpa-confirmation.spec.js
View file

@ -78,18 +78,18 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
const defaultOrder = {
serviceLocation: {
provider: {
companyName: "Hershey",
phoneNumber: "726-117-0377"
companyName: 'Hershey',
phoneNumber: '726-117-0377'
}
},
currentDeductible: 479,
isVerified: false,
carrierPhoneNumber: "757-277-0388",
carrierPhoneNumber: '757-277-0388',
vehicle: {
imageUrl: 'url for image',
category: 'car'
}
}
};
describe('TPAConfirmation.vue', () => {
describe('Rendering', () => {
@ -108,13 +108,6 @@ describe('TPAConfirmation.vue', () => {
// Assert
expect(siteHeader.exists()).toBe(true);
});
test('Should render Vehicle Banner', () => {
// Act
const vehicleBanner = wrapper.findComponent({ ref: 'vehicleBanner' });
// Assert
expect(vehicleBanner.exists()).toBe(true);
});
test('Should render Confirmation Body One', () => {
// Act
const bodyOne = wrapper.findComponent({ ref: 'tpaConfirmationBodyOne' });
@ -249,7 +242,7 @@ describe('TPAConfirmation.vue', () => {
[false, false, 0],
[false, false, 500],
[true, true, 0],
[false, true, 500]
[false, true, 500]
])('with argument zeroDeductible', (expected, isVerified, deductible) => {
test(`returns ${expected} when coverageStatus is ${getEnumName(coverageStatuses, status)} and currentDeductible is ${deductible}`, () => {
// Arrange

32
src/layouts/tpa-confirmation/tpa-confirmation.vue
View file

@ -4,21 +4,14 @@
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
ref="vehicleBanner"
class="mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<div class="iss-heritage-container-width">
<div class="tpa-confirmation-container iss-heritage-content-container-width">
<div class="d-flex justify-content-center align-items-center text-color--black pb-2 fs-5">
<img :src="tpaConfirmationImage" />
<span
@ -69,7 +62,6 @@
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
@ -96,7 +88,6 @@ export default {
components: {
siteHeader,
siteFooter,
vehicleBanner,
textBlock,
deductibleBox,
// eslint-disable-next-line vue/no-reserved-component-names
@ -219,6 +210,15 @@ export default {
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.tpa-confirmation-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.text-color--black {
color: $black;
}

1
src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
View file

@ -20,7 +20,6 @@ Object {
"shop": "PreferredShopSubTitle",
"vehicle": "VehicleSubTitle",
},
"vehicleBanner": "VehicleBannerWidget",
},
}
`;

1
src/layouts/tpa-submit/tpa-submit.vue
View file

@ -161,7 +161,6 @@ export default {
siteHeader: 'SiteHeaderWidget',
siteSubHeader: 'SiteSubHeaderWidget',
serviceSummary: 'ServiceSummaryContent',
vehicleBanner: 'VehicleBannerWidget',
subheader: {
vehicle: 'VehicleSubTitle',
damage: 'DamageSubTitle',

4
src/layouts/vehicle-parts/vehicle-parts.spec.js
View file

@ -62,10 +62,6 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
const apiResponses = {
cmsContent: {
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
VehicleBannerWidget: {
GenericVehicleImage:
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`
},
FunnelHeaderWidget: {
LogoImage:
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`

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

@ -1,47 +1,36 @@
<template>
<Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<Form
ref="theForm"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
ref="vehicleBanner"
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<div class="iss-heritage-container-width">
<div class="vehicle-parts-container iss-heritage-content-container-width">
<siteSubHeader
ref="siteSubHeader"
class="mt-4"
cmsWidgetName="SiteSubHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
id="vehicle-parts-alert"
class="mt-3 mb-3"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<div
v-for="(item, i) in PartsOrQuestions"
:key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="
selectedGlassParts[
item.glassLocation + '-' + item.glassName
]
"
v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="
alreadyPopulatedPartsData
" />
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
</div>
<siteFooter
ref="siteFooter"
@ -60,7 +49,6 @@
// Components
import glassPartQuestion from '@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import alert from '@/ux-components/alert/alert.vue';
@ -81,7 +69,6 @@ export default {
Form,
glassPartQuestion,
siteHeader,
vehicleBanner,
siteSubHeader,
siteFooter,
alert
@ -239,9 +226,18 @@ export default {
};
</script>
<style lang="scss" scoped>
#vehicle-parts-alert {
.alert-heading {
margin-top: 0.25rem !important;
.iss-heritage-container-width {
.vehicle-parts-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
#vehicle-parts-alert {
.alert-heading {
margin-top: 0.25rem !important;
}
}
}
}
</style>