more updates
policy-endorsements (formatting) license-plate-lookup coverage-statement
This commit is contained in:
parent
e5f80409d4
commit
95ed1c5b35
3 changed files with 60 additions and 57 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue