last updates for this card for now.

remove vehicle banner
blindly make header/css changes
This commit is contained in:
Bill Richardson 2025-12-03 15:15:59 -05:00
parent 4d14c07fcd
commit 1413140bef
10 changed files with 67 additions and 80 deletions

View file

@ -166,7 +166,6 @@ export default {
referralNumber: referralNumber?.toString(), referralNumber: referralNumber?.toString(),
widgets: { widgets: {
siteHeader: 'SiteHeaderWidget', siteHeader: 'SiteHeaderWidget',
vehicleBanner: 'VehicleBannerWidget',
emailConfirmation: 'EmailConfirmationWordingWidget', emailConfirmation: 'EmailConfirmationWordingWidget',
orderConfirmation: 'OrderConfirmationContent', orderConfirmation: 'OrderConfirmationContent',
mobile: 'MobileWordingWidget', mobile: 'MobileWordingWidget',

View file

@ -83,7 +83,6 @@ import { Form } from 'vee-validate';
import issPageValues from '@/router/router-constants/issPage-values'; import issPageValues from '@/router/router-constants/issPage-values';
import bailoutMessage from '@/constants/bailoutMessage'; import bailoutMessage from '@/constants/bailoutMessage';
import { AppointmentTypeStrings } from '@/constants/schedule-constants'; 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 { saveSession, submitWorkOrder } from '@/helpers/order-helper.js';
import { experimentSettings } from '@/constants/experiments'; import { experimentSettings } from '@/constants/experiments';
import submitType from '@/constants/submit-type'; import submitType from '@/constants/submit-type';
@ -101,8 +100,7 @@ export default {
reviewDropdown, reviewDropdown,
cartDropdown, cartDropdown,
paymentMethodQuestion, paymentMethodQuestion,
alert, alert
VehicleBanner
}, },
mixins: [baseFormMixin], mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {

View file

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

View file

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

View file

@ -78,18 +78,18 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
const defaultOrder = { const defaultOrder = {
serviceLocation: { serviceLocation: {
provider: { provider: {
companyName: "Hershey", companyName: 'Hershey',
phoneNumber: "726-117-0377" phoneNumber: '726-117-0377'
} }
}, },
currentDeductible: 479, currentDeductible: 479,
isVerified: false, isVerified: false,
carrierPhoneNumber: "757-277-0388", carrierPhoneNumber: '757-277-0388',
vehicle: { vehicle: {
imageUrl: 'url for image', imageUrl: 'url for image',
category: 'car' category: 'car'
} }
} };
describe('TPAConfirmation.vue', () => { describe('TPAConfirmation.vue', () => {
describe('Rendering', () => { describe('Rendering', () => {
@ -108,13 +108,6 @@ describe('TPAConfirmation.vue', () => {
// Assert // Assert
expect(siteHeader.exists()).toBe(true); 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', () => { test('Should render Confirmation Body One', () => {
// Act // Act
const bodyOne = wrapper.findComponent({ ref: 'tpaConfirmationBodyOne' }); const bodyOne = wrapper.findComponent({ ref: 'tpaConfirmationBodyOne' });

View file

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

View file

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

View file

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

View file

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

View file

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