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

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

Browse source 
more updates
This commit is contained in:
brich1212safe 2025-12-03 14:14:38 -05:00 committed by GitHub
commit ed8e20e6b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 222 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,23 +4,16 @@
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 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="address-lookup-container iss-heritage-content-container-width">
<vehicleBanner
ref="vehicleBanner"
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader <siteSubHeader
ref="siteSubHeader" ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="mb-5" /> class="mt-4" />
<alert <alert
v-if="displayVinNotFoundAlert" v-if="displayVinNotFoundAlert"
ref="alertVinNotFound" ref="alertVinNotFound"
@ -82,7 +75,6 @@
import baseFormMixin from '@/mixins/base-form-mixin'; import baseFormMixin from '@/mixins/base-form-mixin';
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.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 customerQuestions from '@/layouts/address-lookup/customer-questions/customer-questions.vue'; import customerQuestions from '@/layouts/address-lookup/customer-questions/customer-questions.vue';
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
@ -106,7 +98,6 @@ export default {
components: { components: {
siteHeader, siteHeader,
siteFooter, siteFooter,
vehicleBanner,
siteSubHeader, siteSubHeader,
customerQuestions, customerQuestions,
alert, alert,
@ -390,3 +381,14 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.address-lookup-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
</style>

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

@ -4,19 +4,15 @@
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 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="address-vehicles-container iss-heritage-content-container-width">
<vehicleBanner <siteSubHeader
class="mt-2 mb-4" cmsWidgetName="SiteSubHeaderWidget"
cmsWidgetName="VehicleBannerWidget" class="mt-4" />
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<alert <alert
id="multiple-vehicles-alert" id="multiple-vehicles-alert"
ref="alertFoundMultipleVehicles" ref="alertFoundMultipleVehicles"
@ -27,8 +23,8 @@
manualCopy="" manualCopy=""
:isDismissible="false" /> :isDismissible="false" />
<alert <alert
ref="AlertNoService"
v-if="displayNoServiceAlert" v-if="displayNoServiceAlert"
ref="AlertNoService"
class="mt-5" class="mt-5"
cmsWidgetName="AlertVehicleSelection" cmsWidgetName="AlertVehicleSelection"
alertClass="alert-danger" alertClass="alert-danger"
@ -110,7 +106,6 @@ import baseFormMixin from '@/mixins/base-form-mixin';
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from '@/iss-components/site-header/site-header.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 vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
import addressVehiclesQuestion from '@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue'; import addressVehiclesQuestion from '@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue';
@ -125,7 +120,6 @@ export default {
siteSubHeader, siteSubHeader,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
vehicleBanner,
alert, alert,
addressVehiclesQuestion addressVehiclesQuestion
}, },
@ -313,8 +307,16 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.iss-heritage-container-width {
.address-vehicles-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.alert-provide-vin { .alert-provide-vin {
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1.4; line-height: 1.4;

25
src/layouts/bailout-page/bailout-page.vue
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"> <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="bailout-page-container iss-heritage-content-container-width">
<siteSubHeader <siteSubHeader
ref="siteSubHeader" ref="siteSubHeader"
:cmsWidgetName="subHeaderCmsWidgetName" :cmsWidgetName="subHeaderCmsWidgetName"
@ -225,4 +223,13 @@ export default {
<style lang="scss"> <style lang="scss">
@import '@/styles/bailout-common.scss'; @import '@/styles/bailout-common.scss';
.iss-heritage-container-width {
.bailout-page-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
</style> </style>

38
src/layouts/contact-confirmation/contact-confirmation.vue
View file

@ -1,19 +1,19 @@
<template> <template>
<div class="container-fluid fade-on-route-transition"> <form>
<div class="row justify-content-center"> <div class="fade-on-route-transition">
<div class="col-md-6 px-0 px-md-2"> <div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
</div> </div>
</div> <div class="iss-heritage-container-width">
<div class="row justify-content-center"> <div class="contact-confirmation-container iss-heritage-content-container-width">
<div class="col-md-6 col-xl-4"> <siteSubHeader
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
cmsWidgetName="SiteSubHeaderWidget" class="sub-header-content mt-4"
class="sub-header-content" justification="left" />
justification="left" /> </div>
</div> </div>
</div> </div>
</div> </form>
</template> </template>
<script> <script>
// Components // Components
@ -64,9 +64,17 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.sub-header-content { .iss-heritage-container-width {
h5 { .contact-confirmation-container {
margin-bottom: 1rem; position: relative;
} min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
} }
}
.sub-header-content {
h5 {
margin-bottom: 1rem;
}
}
</style> </style>

25
src/layouts/contact-details/contact-details.vue
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"> <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="widget.siteHeader" />
:cmsWidgetName="widget.siteHeader" />
</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="contact-details-container iss-heritage-content-container-width">
<siteSubHeader <siteSubHeader
id="sub-header" id="sub-header"
ref="siteSubHeader" ref="siteSubHeader"
@ -236,6 +234,15 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.iss-heritage-container-width {
.contact-details-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.dark-gray { .dark-gray {
color: $darker-gray; color: $darker-gray;
} }

29
src/layouts/duplicate-check/duplicate-check.vue
View file

@ -4,20 +4,18 @@
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="widget.siteHeader" />
:cmsWidgetName="widget.siteHeader" />
</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="duplicate-check-container iss-heritage-content-container-width">
<siteSubHeader <siteSubHeader
id="sub-header" id="sub-header"
ref="siteSubHeader" ref="siteSubHeader"
class="mt-5 duplicate-check-subheader" class="mt-4 duplicate-check-subheader"
:cmsWidgetName="widget.siteSubHeader" /> :cmsWidgetName="widget.siteSubHeader" />
<buttonQuestion <buttonQuestion
ref="buttonQuestion" ref="buttonQuestion"
@ -56,7 +54,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store/index.js'; import { useMainStore } from '@/store/index.js';
import globalRules from '@/constants/global-rules.js'; import globalRules from '@/constants/global-rules.js';
import {formatDate, toTitleCase} from '@/helpers/text-helper.js'; import { formatDate, toTitleCase } from '@/helpers/text-helper.js';
const dupeCheckDateFormatter = new Intl.DateTimeFormat('en-US', { timeZone: 'UTC', month: '2-digit', day: '2-digit', year: 'numeric' }); const dupeCheckDateFormatter = new Intl.DateTimeFormat('en-US', { timeZone: 'UTC', month: '2-digit', day: '2-digit', year: 'numeric' });
@ -205,6 +203,15 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.iss-heritage-container-width {
.duplicate-check-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.duplicate-check-subheader { .duplicate-check-subheader {
.subheader-secondary { .subheader-secondary {
margin-top: map-get($spacers, 2); margin-top: map-get($spacers, 2);

27
src/layouts/policy-endorsements/policy-endorsements.vue
View file

@ -4,20 +4,18 @@
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="policy-endorsements-container iss-heritage-content-container-width">
<siteSubHeader <siteSubHeader
ref="siteSubHeader" ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="mt-5" /> class="mt-4" />
<buttonQuestion <buttonQuestion
v-if="educatorEndorsement" v-if="educatorEndorsement"
ref="schoolPropertyQuestion" ref="schoolPropertyQuestion"
@ -188,6 +186,15 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.iss-heritage-container-width {
.policy-endorsements-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
:deep(.subheader-primary) { :deep(.subheader-primary) {
margin-bottom: map-get($spacers, 2); margin-bottom: map-get($spacers, 2);
} }

40
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -4,29 +4,23 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition policy-vehicles"> <div class="fade-on-route-transition policy-vehicles">
<div class="row justify-content-center"> <div class="justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <siteHeader
<siteHeader class="header"
class="mb-2 header" 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="policy-vehicles-container iss-heritage-content-container-width">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-2" />
<policyVehiclesQuestion <policyVehiclesQuestion
v-model="selectedVehicleVin" v-model="selectedVehicleVin"
cmsWidgetName="PolicyVehiclesQuestion" cmsWidgetName="PolicyVehiclesQuestion"
:vehicles="VehiclesForQuestions" :vehicles="VehiclesForQuestions"
:validationRules="rules.optionRequired" /> :validationRules="rules.optionRequired" />
<alert <alert
ref="AlertNoService"
v-if="displayNoServiceAlert" v-if="displayNoServiceAlert"
ref="AlertNoService"
class="mt-3" class="mt-3"
cmsWidgetName="AlertVehicleSelection" cmsWidgetName="AlertVehicleSelection"
alertClass="alert-danger" alertClass="alert-danger"
@ -47,7 +41,6 @@
// Components // Components
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue'; import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue';
// Supporting files // Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
@ -72,7 +65,6 @@ export default {
components: { components: {
siteHeader, siteHeader,
siteFooter, siteFooter,
vehicleBanner,
policyVehiclesQuestion, policyVehiclesQuestion,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
@ -94,7 +86,6 @@ export default {
return { return {
policyVehicles, policyVehicles,
selectedVehicleVin: '', selectedVehicleVin: '',
displayGeneric: true,
policyVinFound: true, policyVinFound: true,
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED optionRequired: globalRules.OPTION_REQUIRED
@ -150,7 +141,6 @@ export default {
if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) { if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
// clear previously selected vehicle and image // clear previously selected vehicle and image
this.mainStore.resetVehicleState(); this.mainStore.resetVehicleState();
this.displayGeneric = true;
} else { } else {
// get vehicle details from selected VIN // get vehicle details from selected VIN
const vehicle = await this.lookupVehicleByVin(value); const vehicle = await this.lookupVehicleByVin(value);
@ -158,7 +148,6 @@ export default {
// handle error in case vehicle info doesn't come back for selected VIN // handle error in case vehicle info doesn't come back for selected VIN
if (vehicle?.error === true) { if (vehicle?.error === true) {
this.mainStore.resetVehicleState(); this.mainStore.resetVehicleState();
this.displayGeneric = true;
return; return;
} }
if (!vehicle?.data.canSafeliteService) { if (!vehicle?.data.canSafeliteService) {
@ -167,7 +156,6 @@ export default {
} }
if (vehicle) { if (vehicle) {
// save selected vehicle to the store // save selected vehicle to the store
this.displayGeneric = false;
useMainStore().updateVehicle({ useMainStore().updateVehicle({
...vehicle.data, ...vehicle.data,
policyVehicleId: this.selectedPolicyVehicle?.id, policyVehicleId: this.selectedPolicyVehicle?.id,
@ -232,8 +220,7 @@ export default {
repairWaived: this.repairWaivedForSelectedVehicle, repairWaived: this.repairWaivedForSelectedVehicle,
endorsements: this.endorsementsForSelectedVehicle endorsements: this.endorsementsForSelectedVehicle
}); });
} } else {
else {
useMainStore().updateCoverageType(coverageType.NONE); useMainStore().updateCoverageType(coverageType.NONE);
} }
return this.navigateForward(); return this.navigateForward();
@ -292,6 +279,15 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.iss-heritage-container-width {
.policy-vehicles-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.policy-vehicles { .policy-vehicles {
.button-question { .button-question {
.question-text { .question-text {

35
src/layouts/provider-preference/provider-preference.vue
View file

@ -1,26 +1,20 @@
<template> <template>
<Form <Form
ref="theForm" ref="theForm"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition provider-preference"> <div class="fade-on-route-transition provider-preference">
<div class="row justify-content-center"> <div class="justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <siteHeader
<siteHeader class="mt-4 header"
class="mb-2 header" 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="provider-preference-container iss-heritage-content-container-width">
<siteSubHeader <siteSubHeader
id="sub-header" id="sub-header"
cmsWidgetName="SiteSubHeader" cmsWidgetName="SiteSubHeader"
class="mb-0 mt-4 text-center" /> class="mb-0 mt-4 text-center" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<buttonQuestion <buttonQuestion
ref="buttonQuestion" ref="buttonQuestion"
v-model="selectedProvider" v-model="selectedProvider"
@ -267,6 +261,15 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.iss-heritage-container-width {
.provider-preference-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.provider-preference { .provider-preference {
#sub-header span { #sub-header span {
color: $black; color: $black;

25
src/layouts/schedule-page/schedule-page.vue
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"> <div class="fade-on-route-transition">
<div class="row justify-content-center"> <div class="justify-content-center">
<div class="col-md-6 col-xl-6"> <siteHeader
<siteHeader class="header"
class="mb-2 header" 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="schedule-page-container iss-heritage-content-container-width">
<siteSubHeader <siteSubHeader
cmsWidgetName="ScheduleSubHeaderWidget" cmsWidgetName="ScheduleSubHeaderWidget"
subTextClasses="text-center small sub-text" subTextClasses="text-center small sub-text"
@ -492,8 +490,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$page-side-padding: 1.5rem; $page-side-padding: 1.5rem;
.page-container-grouped-styles { .iss-heritage-container-width {
overflow: auto; .schedule-page-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
} }
:deep(.text-link-small) { :deep(.text-link-small) {

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

@ -4,13 +4,15 @@
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 col-xl-6"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteHeader cmsWidgetName="SiteHeaderWidget" /> </div>
<div class="iss-heritage-container-width">
<div class="service-location-container iss-heritage-content-container-width">
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="mt-5" /> class="mt-4" />
<serviceZipModalQuestion <serviceZipModalQuestion
ref="serviceZipCodeQuestion" ref="serviceZipCodeQuestion"
v-model="serviceZipCodeQuestion" v-model="serviceZipCodeQuestion"
@ -51,24 +53,18 @@
class="my-5" class="my-5"
cmsWidgetName="AlertNoShopsWidget" cmsWidgetName="AlertNoShopsWidget"
alertClass="alert-warning" /> alertClass="alert-warning" />
</div> <div class="appointment-type">
</div> <appointmentTypeQuestion
<div class="row justify-content-center appointment-type"> v-show="isAppointmentTypeDisplayed"
<div class="col-md-6"> ref="appointmentTypeQuestion"
<appointmentTypeQuestion v-model="selectedAppointmentType"
v-show="isAppointmentTypeDisplayed" :isServiceableMobile="isServiceableMobile"
ref="appointmentTypeQuestion" :isServiceableInshop="isServiceableInshop"
v-model="selectedAppointmentType" :isDisplayed="isAppointmentTypeDisplayed"
:isServiceableMobile="isServiceableMobile" groupName="appointmentTypeQuestion"
:isServiceableInshop="isServiceableInshop" cmsWidgetName="AppointmentTypeQuestionWidget"
:isDisplayed="isAppointmentTypeDisplayed" validationRules="option-required" />
groupName="appointmentTypeQuestion" </div>
cmsWidgetName="AppointmentTypeQuestionWidget"
validationRules="option-required" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<mobileLocationModalQuestions <mobileLocationModalQuestions
v-if="isMobileLocationDisplayed" v-if="isMobileLocationDisplayed"
ref="mobileLocationQuestions" ref="mobileLocationQuestions"
@ -537,8 +533,13 @@ export default {
<style lang="scss"> <style lang="scss">
$page-side-padding: 1.5rem; $page-side-padding: 1.5rem;
.fade-on-route-transition { .iss-heritage-container-width {
overflow: auto; .service-location-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
} }
.question-text { .question-text {

14
src/layouts/tpa-submit/tpa-submit.spec.js
View file

@ -120,20 +120,6 @@ describe('tpa-submit', () => {
expect(siteHeader.exists()).toBeTruthy(); expect(siteHeader.exists()).toBeTruthy();
expect(siteHeader.props().cmsWidgetName).toBe(expectedWidgetName); expect(siteHeader.props().cmsWidgetName).toBe(expectedWidgetName);
}); });
test('vehicle banner', () => {
// Arrange
const wrapper = shallowMount(tpaSubmit, getMountOptions());
const expectedWidgetName = 'VehicleBannerWidget';
// Act
const vehicleBanner = wrapper.findComponent({ ref: 'vehicleBanner' });
// Assert
expect(vehicleBanner.exists()).toBeTruthy();
expect(vehicleBanner.props().cmsWidgetName).toBe(expectedWidgetName);
expect(vehicleBanner.props().displayGenericVehicleImage).toBe(false);
expect(vehicleBanner.classes()).toContain('mt-5');
});
test('sub header', () => { test('sub header', () => {
// Arrange // Arrange
const wrapper = shallowMount(tpaSubmit, getMountOptions()); const wrapper = shallowMount(tpaSubmit, getMountOptions());

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

@ -5,21 +5,14 @@
class="tpa-submit" class="tpa-submit"
@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="widget.siteHeader" />
:cmsWidgetName="widget.siteHeader" />
</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-submit-container iss-heritage-content-container-width">
<vehicleBanner
ref="vehicleBanner"
:cmsWidgetName="widget.vehicleBanner"
:displayGenericVehicleImage="false"
class="mt-5" />
<!-- TODO fix styling --> <!-- TODO fix styling -->
<textBlock <textBlock
ref="subHeaderTitle" ref="subHeaderTitle"
@ -56,8 +49,8 @@
v-for="(section, index) in sections" v-for="(section, index) in sections"
:key="section.title"> :key="section.title">
<hr <hr
v-if="index !== 0" v-if="index !== 0"
class="my-3" /> class="my-3" />
<reviewBlock <reviewBlock
:id="'review-block-' + index" :id="'review-block-' + index"
:customHeaderText="section.title" :customHeaderText="section.title"
@ -107,7 +100,6 @@ class="my-3" />
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue'; import buttonMain from '@/ux-components/button-main/button-main.vue';
import textBlock from '@/digital-components/text-block/text-block.vue'; import textBlock from '@/digital-components/text-block/text-block.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue'; import reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue'; import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue'; import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue';
@ -144,7 +136,6 @@ export default {
name: 'tpa-submit', name: 'tpa-submit',
components: { components: {
siteHeader, siteHeader,
vehicleBanner,
textBlock, textBlock,
buttonMain, buttonMain,
reviewBlock, reviewBlock,
@ -326,12 +317,10 @@ export default {
this.getDamageLines, this.getDamageLines,
() => this.navigate(this.navigationScenarios.EDIT_DAMAGE) () => this.navigate(this.navigationScenarios.EDIT_DAMAGE)
), ),
// eslint-disable-next-line max-len
this.getSection( this.getSection(
this.widget.subheader.shop, this.widget.subheader.shop,
this.getPreferredShopLines, this.getPreferredShopLines,
() => () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
), ),
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
this.getSection( this.getSection(
@ -389,6 +378,15 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.iss-heritage-container-width {
.tpa-submit-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.tpa-submit { .tpa-submit {
#tpaSubmitOrderDetailsBody { #tpaSubmitOrderDetailsBody {
p { p {

1
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -41,7 +41,6 @@ const mountOptions = {
}, },
stubs: { stubs: {
siteHeader: true, siteHeader: true,
vehicleBanner: true,
siteSubHeader: true, siteSubHeader: true,
siteDoorOptions: true, siteDoorOptions: true,
damageLocationQuestion: true, damageLocationQuestion: true,

3
src/layouts/vehicle-lookup/vehicle-lookup.spec.js
View file

@ -118,8 +118,7 @@ function setupMocks() {
}, },
stubs: { stubs: {
SiteHeader: true, SiteHeader: true,
SiteSubHeader: true, SiteSubHeader: true
VehicleBanner: true
} }
} }
}); });

1
src/layouts/vin-lookup/vin-lookup.spec.js
View file

@ -202,7 +202,6 @@ const mountOptions = {
stubs: { stubs: {
siteHeader: true, siteHeader: true,
siteSubHeader: true, siteSubHeader: true,
vehicleBanner: true,
vinLocationInformation: true, vinLocationInformation: true,
vinLookupAlerts: true, vinLookupAlerts: true,
vinQuestion: true vinQuestion: true

4
src/layouts/welcome-page/welcome-page.spec.js
View file

@ -58,10 +58,6 @@ function setupMocks({
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`
},
SiteHeaderWidget: { SiteHeaderWidget: {
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`

4
src/styles/client-customizations.scss
View file

@ -15,10 +15,6 @@
//Variables //Variables
--iss-loader-color: #{$button-text-color}; --iss-loader-color: #{$button-text-color};
.site-header {
background-color: $header-background;
}
svg, svg,
.modal-text { .modal-text {
fill: $accent-color; fill: $accent-color;