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

more updates

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/layouts/coverage-statement/coverage-statement.vue
View file

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

29
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -4,21 +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="license-plate-lookup-container iss-heritage-content-container-width">
<vehicleBanner
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="mb-5" class="mt-4"
subHeaderMarginClasses="mt-1" /> subHeaderMarginClasses="mt-1" />
<alert <alert
v-if="displayVinNotFoundAlert" 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 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 textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue'; import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue'; import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
@ -125,7 +118,6 @@ export default {
siteFooter, siteFooter,
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
vehicleBanner,
textboxQuestion, textboxQuestion,
dropdownQuestion, dropdownQuestion,
alert alert
@ -354,6 +346,15 @@ export default {
</script> </script>
<style lang="scss" scoped> <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 { #license-plate-question-wrapper .form-test-error {
/** /**
Override extra margin-bottom in the error message in TextboxQuestion Override extra margin-bottom in the error message in TextboxQuestion

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

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