more updates

policy-endorsements (formatting)
license-plate-lookup
coverage-statement
This commit is contained in:
Bill Richardson 2025-12-03 09:29:11 -05:00
parent e5f80409d4
commit 95ed1c5b35
3 changed files with 60 additions and 57 deletions

View file

@ -5,27 +5,25 @@
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition coverage-statement">
<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 coverage-statement">
<div class="justify-content-center">
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center pt-5">
<div class="col-md-6 col-xl-4">
<div class="iss-heritage-container-width">
<div class="coverage-statement-container iss-heritage-content-container-width">
<h5
ref="siteSubHeader"
class="sub-header text-center text-black"
class="sub-header text-black mt-4"
v-html="coverageStatementSubHeader"></h5>
<div
ref="explanatoryText"
class="body-text text-center mt-2"
class="body-text mt-2"
v-html="explanatoryText"></div>
<div
ref="secondaryText"
class="text-center mt-4 mb-1 fw-bold text-black"
class="mt-4 mb-1 fw-bold text-black"
v-html="secondaryText"></div>
<div
v-if="isDeductibleVisible"
@ -100,6 +98,7 @@
@returnToClaim="continueClaim" />
</Form>
</template>
<script>
// Import Component
import { Form } from 'vee-validate';
@ -498,6 +497,15 @@ export default {
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.coverage-statement-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.coverage-statement {
.cost {
color: $green;
@ -511,7 +519,7 @@ export default {
.sub-header {
line-height: 2rem;
}
:deep ol {
:deep(ol) {
padding: 0;
padding-left: 1.125rem;
padding-right: 1.125rem;
@ -522,7 +530,7 @@ export default {
margin-bottom: .5rem;
}
}
:deep p {
:deep(p) {
line-height: 1.5rem;
font-size: 0.875rem;
margin-bottom: 0.5rem;
@ -530,11 +538,11 @@ export default {
color: $black;
}
}
:deep .body-text {
:deep(.body-text) {
font-size: 0.875rem;
line-height: 1.5rem;
}
:deep .question-text {
:deep(.question-text) {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1rem;
@ -554,7 +562,7 @@ export default {
}
}
:deep .deductible-modal {
:deep(.deductible-modal) {
p {
margin-bottom: 0 !important;
}

View file

@ -4,21 +4,15 @@
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="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" />
<div class="iss-heritage-container-width">
<div class="license-plate-lookup-container iss-heritage-content-container-width">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mb-5"
class="mt-4"
subHeaderMarginClasses="mt-1" />
<alert
v-if="displayVinNotFoundAlert"
@ -105,7 +99,6 @@ import vinPagesMixin from '@/mixins/vin-pages-mixin';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-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 textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import alert from '@/ux-components/alert/alert.vue';
@ -125,7 +118,6 @@ export default {
siteFooter,
siteHeader,
siteSubHeader,
vehicleBanner,
textboxQuestion,
dropdownQuestion,
alert
@ -354,6 +346,15 @@ export default {
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.license-plate-lookup-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
#license-plate-question-wrapper .form-test-error {
/**
Override extra margin-bottom in the error message in TextboxQuestion

View file

@ -82,7 +82,7 @@ export default {
siteFooter,
buttonQuestion,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
Form
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -92,8 +92,8 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
promise: cmsContentPromise
}
];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
@ -113,11 +113,11 @@ export default {
schoolPropertyAnswer: '',
parkingLotAnswer: '',
hasValidCarId:
this.mainStore.vehicle.carId &&
this.mainStore.vehicle.carId !== '0',
this.mainStore.vehicle.carId
&& this.mainStore.vehicle.carId !== '0',
rules: {
selectionRequired: globalRules.OPTION_REQUIRED,
},
selectionRequired: globalRules.OPTION_REQUIRED
}
};
},
computed: {
@ -135,18 +135,14 @@ export default {
},
educatorEndorsement() {
return (
useMainStore().order.policy.endorsements?.includes(
endorsementOptions.EDUCATOR
) ?? false
useMainStore().order.policy.endorsements?.includes(endorsementOptions.EDUCATOR) ?? false
);
},
parkingGuardEndorsement() {
return (
useMainStore().order.policy.endorsements?.includes(
endorsementOptions.PARKING_GUARD
) ?? false
useMainStore().order.policy.endorsements?.includes(endorsementOptions.PARKING_GUARD) ?? false
);
},
}
},
methods: {
async forwardButtonAction() {
@ -156,7 +152,7 @@ export default {
questionNum: 1,
endorsementName: endorsementOptions.EDUCATOR,
questionText: this.schoolPropertyQuestionText,
selectedAnswer: this.schoolPropertyAnswer,
selectedAnswer: this.schoolPropertyAnswer
});
}
if (this.parkingGuardEndorsement) {
@ -164,14 +160,12 @@ export default {
questionNum: 2,
endorsementName: endorsementOptions.PARKING_GUARD,
questionText: this.parkingLotQuestionText,
selectedAnswer: this.parkingLotAnswer,
selectedAnswer: this.parkingLotAnswer
});
}
// save answers to store as order.policy.endorsementQuestionAnswers
useMainStore().saveEndorsementQuestionAnswers(
this.questionAnswersArray
);
useMainStore().saveEndorsementQuestionAnswers(this.questionAnswersArray);
return this.navigateForward();
},
@ -188,24 +182,24 @@ export default {
this.$route
);
}
},
},
}
}
};
</script>
<style lang="scss" scoped>
:deep .subheader-primary {
:deep(.subheader-primary) {
margin-bottom: map-get($spacers, 2);
}
:deep .subheader-secondary {
:deep(.subheader-secondary) {
p {
font-size: $h6-font-size;
line-height: map-get($spacers, 5);
}
}
:deep .subheader-secondary.justify-content-center {
:deep(.subheader-secondary.justify-content-center) {
p {
text-align: left;
}
@ -215,7 +209,7 @@ export default {
margin-bottom: map-get($spacers, 5);
}
:deep .question-text {
:deep(.question-text) {
& > span {
text-align: left;
line-height: map-get($spacers, 5);
@ -223,7 +217,7 @@ export default {
margin-bottom: map-get($spacers, 2);
}
:deep div.question-text.d-flex {
:deep(div.question-text.d-flex) {
margin-top: map-get($spacers, 4);
}
</style>