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

WIP Scrolling page.

Browse source
This commit is contained in:
Bryan Mauger 2023-04-07 19:03:12 -04:00
parent dac53b7a94
commit 92f1c58007
10 changed files with 943 additions and 863 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/digital-components/button-question/button-question.vue
View file

@ -4,7 +4,7 @@
:class="
isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
">
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex"
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex"
:class="{'small-question-text': isSmallQuestionText,'small-question-label-text':isSmallQuestionLabelText}">
<span class="fw-bold w-100">{{ questionText }}</span>
</div>
@ -13,7 +13,6 @@
<fieldset
class="w-100"
:aria-required="isRequired"
:class="getFieldSetClasses"
:role="isMultiSelect ? 'group' : 'radiogroup'"
:aria-labelledby="formatString(groupName)">
<legend
@ -145,7 +144,7 @@ export default {
const SmallQuestionTextClass = this.isSmallQuestionText
? baseClasses + "small-question-text"
: baseClasses;
: baseClasses;
const SmallQuestionLabelText = this.isSmallQuestionLabelText
? SmallQuestionTextClass + "small-question-label-text"
@ -234,16 +233,16 @@ export default {
</script>
<style lang="scss">
.button-question-overflow {
height: calc(100vh - 274px);
.overflow-scroll {
// Height will be determined by overall height of content above list
height: calc(100% - 400px);
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
}
}
// .button-question-overflow {
// height: calc(100vh - 274px);
//
// .overflow-scroll {
// // Height will be determined by overall height of content above list
// height: calc(100% - 400px);
// overflow-x: hidden !important;
// -webkit-overflow-scrolling: touch;
// }
// }
.button-question {
color: $black;

6
src/iss-components/site-header/menu-modal/menu-modal.vue
View file

@ -7,7 +7,7 @@
</button>
</div>
<!-- Modal -->
<div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
<div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }">
<div class="menu-modal-container">
<button
class="menu-button"
@ -78,8 +78,8 @@ export default {
show() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
this.isActive = true;
document.querySelector('.page-container-grouped-styles').scrollTo({
top: 0, behavior: 'smooth'
document.querySelector('.fade-on-route-transition,.page-container-grouped-styles').scrollTo({
top: 0, behavior: 'instant'
});
},
hide() {

195
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -1,13 +1,14 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles ">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition px-5 overflow-scroll">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
<addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
<div class="row mt-4 ">
<div class="col">
<textboxQuestion
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid">
<div class="row mt-4 px-3">
<div class="col">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
<addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
<textboxQuestion
inputId="firstNameField"
cmsWidgetName="PolicyholderFirstNameQuestion"
v-model="customerQuestions.firstName"
@ -15,11 +16,7 @@
ref="policyHolderFirstName"
disableAutoFill
validationRules="first-name-required" />
</div>
</div>
<div class="row mt-4 mb-2">
<div class="col">
<textboxQuestion
<textboxQuestion
inputId="lastNameField"
cmsWidgetName="PolicyholderLastNameQuestion"
v-model="customerQuestions.lastName"
@ -27,15 +24,16 @@
ref="policyHolderLastName"
disableAutoFill
validationRules="last-name-required" />
</div>
</div>
<siteFooter
</div>
</div>
<siteFooter
cmsWidgetName="SiteFooterWidget"
ref="siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@back-clicked="backButtonAction"
/>
/>
</div>
</div>
</div>
</Form>
@ -60,7 +58,7 @@ import { useMainStore } from '@/store';
//define validation rules
defineRule("first-name-required", required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
defineRule("last-name-required", required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
export default {
name: "policy-holder-details",
mixins: [BaseFormMixin],
@ -73,94 +71,101 @@ export default {
const mainStore = useMainStore();
return { mainStore };
},
async beforeRouteEnter(to, from, next)
async beforeRouteEnter(to, from, next)
{
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},];
//use resultMap to populate layout content.
let resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods:
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},];
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
//use resultMap to populate layout content.
let resultMap = await settleAllPromises(promiseResultMap);
forwardButtonAction()
{
this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
return this.navigateForward();
},
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods:
navigateForward() {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
this.$route
);
},
getPolicyHolderDetailsFromStore() {
return {
addressQuestions :
{
streetAddress: this.mainStore.order.customer.address.streetAddress,
streetAddress2: this.mainStore.order.customer.address.streetAddress2,
city: this.mainStore.order.customer.address.city,
state: this.mainStore.order.customer.address.state,
zipCode: this.mainStore.order.customer.address.zipCode,
},
firstName : this.mainStore.order.customer.firstName,
lastName : this.mainStore.order.customer.lastName,
}
},
},
components: {
siteHeader,
siteSubHeader,
textboxQuestion,
addressQuestions,
siteFooter,
Form,
},
}
</script>
<style lang="scss">
.fade-on-route-transition {
height: calc(100% - 120px);
overflow: scroll;
overflow-x: hidden;
}
.modal-open {
.fade-on-route-transition {
overflow: hidden;
}
}
.alert.alert-warning
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction()
{
this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
return this.navigateForward();
},
margin-top: 20px;
}
navigateForward() {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
this.$route
);
},
getPolicyHolderDetailsFromStore() {
return {
addressQuestions :
{
streetAddress: this.mainStore.order.customer.address.streetAddress,
streetAddress2: this.mainStore.order.customer.address.streetAddress2,
city: this.mainStore.order.customer.address.city,
state: this.mainStore.order.customer.address.state,
zipCode: this.mainStore.order.customer.address.zipCode,
},
firstName : this.mainStore.order.customer.firstName,
lastName : this.mainStore.order.customer.lastName,
}
},
},
components: {
siteHeader,
siteSubHeader,
textboxQuestion,
addressQuestions,
siteFooter,
Form,
},
}
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 168px);
overflow-X: hidden !important;
}
.alert.alert-warning
{
margin-top: 20px;
}
#sub-header p {
font-size: 16px;
line-height: 26px;
color: #4D5151;
}
#sub-header p {
font-size: 16px;
line-height: 26px;
color: #4D5151;
}
#address-questions-wrapper {
margin-top: 24px;
}
#address-questions-wrapper {
margin-top: 24px;
}
#address-questions-wrapper .alert.heading {
line-height: 24px;
}
#address-questions-wrapper .alert.heading {
line-height: 24px;
}
#address-questions-wrapper .form-test-error {
line-height: 24px;
}
</style>
#address-questions-wrapper .form-test-error {
line-height: 24px;
}
</style>

424
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -1,58 +1,64 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles vehicle-damage">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
<alert
ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<damageLocationQuestion
ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations"
groupName="DamageLocationQuestion" />
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations" />
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
<sideDoorOptions
ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations" />
<replaceOptionsQuestion
ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
<site-footer
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid">
<div class="row mt-4 px-3">
<div class="col">
<alert
ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<damageLocationQuestion
ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations"
groupName="DamageLocationQuestion" />
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations" />
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
<sideDoorOptions
ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations" />
<replaceOptionsQuestion
ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
<site-footer
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>
</div>
</div>
</Form>
@ -207,7 +213,7 @@ export default {
})
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
@ -222,7 +228,7 @@ export default {
})
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.DRIVER
);
@ -237,7 +243,7 @@ export default {
})
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.PASSENGER
);
@ -302,147 +308,147 @@ export default {
async forwardButtonAction() {
await this.mainStore.saveVehicleDamage(this.isWindshieldRepair,
this.selectedGlassToReplace(),
this.selectedWindshieldOptions.selectedWindshieldChipCount);
return this.navigateForward();
},
this.selectedGlassToReplace(),
this.selectedWindshieldOptions.selectedWindshieldChipCount);
return this.navigateForward();
},
navigateForward() {
if (this.mainStore.damage.isRepair) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
this.$route
);
}
else {
// If vin already exists, navigate directly to vin-lookup
if (this.mainStore.order.vehicle.vin) {
navigateForward() {
if (this.mainStore.damage.isRepair) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
this.$route
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
this.$route
);
}
}
},
selectedGlassToReplace() {
const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
(wsItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.WINDSHIELD,
glassName: wsItem,
});
else {
// If vin already exists, navigate directly to vin-lookup
if (this.mainStore.order.vehicle.vin) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
this.$route
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
this.$route
);
}
);
}
}
},
if (this.isDriverSideReplace) {
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.DRIVER,
glassName: driverItem,
selectedGlassToReplace() {
const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
(wsItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.WINDSHIELD,
glassName: wsItem,
});
}
);
}
if (this.isDriverSideReplace) {
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.DRIVER,
glassName: driverItem,
});
});
}
if (this.isPassengerSideReplace) {
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
(passengerItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem,
});
}
);
}
if (this.isRearWindowDamageLocation) {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.REAR,
glassName: this.selectedRearReplaceOptions,
});
}
return selectedGlassToReplace;
},
},
computed: {
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => {
return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
});
}
if (this.isPassengerSideReplace) {
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
(passengerItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem,
});
}
);
}
if (this.isRearWindowDamageLocation) {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.REAR,
glassName: this.selectedRearReplaceOptions,
},
isSideDoorDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => {
return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
});
}
return selectedGlassToReplace;
},
},
computed: {
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => {
return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
});
},
isSideDoorDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => {
return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
});
},
isRearWindowDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => {
return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
});
},
isWindshieldRepair() {
return (
this.isWindshieldDamageLocation &&
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
},
isRearWindowDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => {
return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
});
},
isWindshieldRepair() {
return (
this.isWindshieldDamageLocation &&
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR
);
},
isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
);
},
isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
});
},
isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
});
},
isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
});
},
hasRepairReplaceConflict() {
return (
this.isWindshieldDamageLocation &&
this.selectedDamageLocations.length > 1 &&
this.isWindshieldRepair
);
},
hasSplitSingleConflict() {
if (
!this.selectedDamageLocations?.includes("Windshield") ||
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
});
},
hasRepairReplaceConflict() {
return (
this.isWindshieldDamageLocation &&
this.selectedDamageLocations.length > 1 &&
this.isWindshieldRepair
);
},
hasSplitSingleConflict() {
if (
!this.selectedDamageLocations?.includes("Windshield") ||
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR ||
!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
)
!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
)
return false;
return (
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedSingleWindshield) => {
return (
selectedSingleWindshield.toUpperCase() ===
damageLocationsSelected.SINGLE.toUpperCase()
);
}
) &&
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedDriverWindshield) => {
return (
selectedDriverWindshield.toUpperCase() ===
damageLocationsSelected.DRIVER.toUpperCase()
);
}
) ||
return (
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedSingleWindshield) => {
return (
selectedSingleWindshield.toUpperCase() ===
damageLocationsSelected.SINGLE.toUpperCase()
);
}
) &&
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedDriverWindshield) => {
return (
selectedDriverWindshield.toUpperCase() ===
damageLocationsSelected.DRIVER.toUpperCase()
);
}
) ||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedPassengerWindshield) => {
return (
@ -451,31 +457,39 @@ export default {
);
}
))
);
);
},
shouldDisplayVehicleChangeAlert() {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
}
},
shouldDisplayVehicleChangeAlert() {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
}
},
components: {
siteHeader,
siteFooter,
vehicleBanner,
siteSubHeader,
sideDoorOptions,
damageLocationQuestion,
windshieldOptions,
replaceOptionsQuestion,
Form,
alert,
},
};
</script>
<style lang="scss">
components: {
siteHeader,
siteFooter,
vehicleBanner,
siteSubHeader,
sideDoorOptions,
damageLocationQuestion,
windshieldOptions,
replaceOptionsQuestion,
Form,
alert,
},
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.overflow-scroll {
height: calc(100% - 180px);
overflow-X: hidden !important;
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

142
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -1,51 +1,45 @@
<template>
<div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true"
@click-event="backButtonAction"
/>
<div class="fade-on-route-transition">
<makeQuestion
class="fade-on-route-transition"
v-model="selectedMake"
ref="makeQuestion"
cmsWidgetName="VehicleMakeQuestion"
/>
</div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
<div class="page-container-grouped-styles position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
<makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// Components
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
import siteHeader from "@/iss-components/site-header/site-header";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
import siteFooter from "@/iss-components/site-footer/site-footer";
// Components
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
import siteHeader from "@/iss-components/site-header/site-header";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
import siteFooter from "@/iss-components/site-footer/site-footer";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: 'vehicle-make',
data() {
return {
selectedMake: null,
shouldHideForwardButton: true
};
},
export default {
name: 'vehicle-make',
data() {
return {
selectedMake: null,
shouldHideForwardButton: true
};
},
async beforeRouteEnter(to, from, next) {
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
@ -53,12 +47,12 @@
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "makeQuestionInitialData",
promise: makeQuestionInitialDataPromise,
resultKey: "makeQuestionInitialData",
promise: makeQuestionInitialDataPromise,
},
];
@ -71,36 +65,52 @@
resultMap.makeQuestionInitialData
);
});
},
methods: {
backButtonAction() {
},
methods: {
backButtonAction() {
this.$router.navigate(
this.navigationScenarios.CLICKED_BACK,
this.$route
this.navigationScenarios.CLICKED_BACK,
this.$route
);
},
arePagePrerequisitesValid() {
},
arePagePrerequisitesValid() {
if (this.mainStore.order.vehicle.year){
return true;
return true;
}
return false;
},
},
components: {
makeQuestion,
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter
},
watch: {
selectedMake(make) {
},
components: {
makeQuestion,
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter
},
watch: {
selectedMake(make) {
this.mainStore.updateVehicleMake( make );
this.$router.navigate(
this.navigationScenarios.SELECTED_MAKE,
this.$route
this.navigationScenarios.SELECTED_MAKE,
this.$route
);
},
}
};
},
}
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

169
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -1,80 +1,78 @@
<template>
<div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true"
:backButtonAccessibleText="backButtonAccessibleText"
@click-event="backButtonAction"
/>
<div class="fade-on-route-transition">
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
</div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
<div class="page-container-grouped-styles position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
<script>
// Components
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
import siteHeader from "@/iss-components/site-header/site-header";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
import siteFooter from "@/iss-components/site-footer/site-footer";
<script>
// Components
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
import siteHeader from "@/iss-components/site-header/site-header";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
import siteFooter from "@/iss-components/site-footer/site-footer";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
export default {
name: "vehicle-model",
data() {
return {
selectedModel: null,
shouldHideForwardButton: true
};
return {
selectedModel: null,
shouldHideForwardButton: true
};
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const modelQuestionInitialDataPromise =
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const modelQuestionInitialDataPromise =
modelQuestion.methods.loadInitialData();
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "modelQuestionInitialData",
promise: modelQuestionInitialDataPromise,
},
];
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "modelQuestionInitialData",
promise: modelQuestionInitialDataPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.modelQuestion.initializeComponent(
resultMap.modelQuestionInitialData
);
});
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.modelQuestion.initializeComponent(
resultMap.modelQuestionInitialData
);
});
},
methods: {
backButtonAction() {
// route to move backwards
// route to move backwards
this.$router.navigate(
this.navigationScenarios.CLICKED_BACK,
this.$route
this.navigationScenarios.CLICKED_BACK,
this.$route
);
},
arePagePrerequisitesValid()
@ -86,26 +84,45 @@
},
},
computed: {
backButtonAccessibleText()
{
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
}
backButtonAccessibleText()
{
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
}
},
watch: {
selectedModel(model) {
this.mainStore.updateVehicleModel( model );
this.$router.navigate(
this.navigationScenarios.SELECTED_MODEL,
this.$route
);
},
selectedModel(model) {
this.mainStore.updateVehicleModel( model );
this.$router.navigate(
this.navigationScenarios.SELECTED_MODEL,
this.$route
);
},
},
components: {
modelQuestion,
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter
modelQuestion,
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter
},
};
</script>
};
</script>
<style lang="scss" scoped>
.container-fluid {
margin-bottom: 80px;
}
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

45
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -1,22 +1,18 @@
<template>
<div class="page-container-grouped-styles">
<div class="page-container-grouped-styles position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true"
:backButtonAccessibleText="backButtonAccessibleText"
@click-event="backButtonAction" />
<div class="fade-on-route-transition">
<styleQuestion
v-model="selectedStyle"
ref="styleQuestion"
cmsWidgetName="VehicleStyleQuestion" />
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
<styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" class="px-4" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div>
</div>
</div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div>
</div>
</div>
@ -124,3 +120,22 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.container-fluid {
margin-bottom: 80px;
}
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

164
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -1,101 +1,115 @@
<template>
<div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition">
<yearQuestion
class="fade-on-route-transition"
v-model="selectedYear"
ref="yearQuestion"
cmsWidgetName="VehicleYearQuestion"
/>
</div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
<div class="page-container-grouped-styles position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
<script>
// Components
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
import siteHeader from "@/iss-components/site-header/site-header";
import siteFooter from "@/iss-components/site-footer/site-footer";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
<script>
// Components
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
import siteHeader from "@/iss-components/site-header/site-header";
import siteFooter from "@/iss-components/site-footer/site-footer";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
export default {
name: "vehicle-year",
data() {
return {
selectedYear: null,
shouldHideForwardButton: true
};
return {
selectedYear: null,
shouldHideForwardButton: true
};
},
computed: {},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "yearQuestionInitialData",
promise: yearQuestionInitialDataPromise,
},
];
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "yearQuestionInitialData",
promise: yearQuestionInitialDataPromise,
},
];
let resultMap = await settleAllPromises(promiseResultMap);
let resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.yearQuestion.initializeComponent(
resultMap.yearQuestionInitialData
);
});
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.yearQuestion.initializeComponent(
resultMap.yearQuestionInitialData
);
});
},
watch: {
selectedYear(year) {
const parsedYear = parseInt(year);
this.mainStore.updateVehicleYear( parsedYear );
selectedYear(year) {
const parsedYear = parseInt(year);
this.mainStore.updateVehicleYear( parsedYear );
this.$router.navigate(
this.navigationScenarios.SELECTED_YEAR,
this.$route
);
},
this.$router.navigate(
this.navigationScenarios.SELECTED_YEAR,
this.$route
);
},
},
methods: {
arePagePrerequisitesValid() {
return true;
},
backButtonAction() {
arePagePrerequisitesValid() {
return true;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
},
},
components: {
yearQuestion,
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter
yearQuestion,
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter
},
};
</script>
};
</script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

634
src/layouts/welcome-page/welcome-page.vue
View file

@ -1,116 +1,115 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles welcome">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition overflow-scroll container">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="policyNumberField"
cmsWidgetName="PolicyNumberQuestion"
v-model="welcomePageModel.policyNumber"
isRequired
ref="policyNumber"
disableAutoFill
validationRules="policy-number-required" />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
type="date"
cmsWidgetName="DateOfLossQuestion"
v-model="welcomePageModel.dateOfLoss"
inputId="dateOfLossField"
isRequired
ref="dateOfLoss"
disableAutoFill
:max="new Date().toJSON().slice(0,10)"
:min="'1972-12-01'"
validationRules="loss-date-required"
/>
</div>
</div>
<div class="row px-5">
<div class="col px-0">
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<dropdownQuestion
cmsWidgetName="DamageCauseQuestion"
v-model="welcomePageModel.damageCause"
ref="damageCause"
inputId="damageCauseQuestionField"
:options="DamageCauseOptions"
disableAutoFill
validationRules="damage-option-required"
placeHolderText="Select an option"
id="welcomeDropdown"
/>
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion"
v-model="welcomePageModel.phoneNumber"
validationRules="phone-number-required|phone-number-format"
isRequired
ref="phoneNumber"
mask="###-###-####"
disableAutoFill />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="emailField"
cmsWidgetName="EmailAddressQuestion"
v-model="welcomePageModel.email"
ref="email"
validationRules="email-address-required|email-address-format"
isRequired
disableAutoFill />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion"
v-model="welcomePageModel.damageCity"
isRequired
ref="damageCity"
disableAutoFill
v-if="this.displayDamageCityQuestion"
validationRules="loss-city-required" />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<dropdownQuestion
cmsWidgetName="DamageStateQuestion"
v-model="welcomePageModel.damageState"
ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
validationRules="loss-state-required"
isRequired
disableAutoFill
v-if="this.displayDamageStateQuestion"
placeHolderText="Select an option"
id="welcomeDropdown"
/>
</div>
</div>
<div class="row mt-4">
<buttonQuestion
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles welcome">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="container-fluid">
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="policyNumberField"
cmsWidgetName="PolicyNumberQuestion"
v-model="welcomePageModel.policyNumber"
isRequired
ref="policyNumber"
disableAutoFill
validationRules="policy-number-required" />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
type="date"
cmsWidgetName="DateOfLossQuestion"
v-model="welcomePageModel.dateOfLoss"
inputId="dateOfLossField"
isRequired
ref="dateOfLoss"
disableAutoFill
:max="new Date().toJSON().slice(0,10)"
:min="'1972-12-01'"
validationRules="loss-date-required"
/>
</div>
</div>
<div class="row px-5">
<div class="col px-0">
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<dropdownQuestion
cmsWidgetName="DamageCauseQuestion"
v-model="welcomePageModel.damageCause"
ref="damageCause"
inputId="damageCauseQuestionField"
:options="DamageCauseOptions"
disableAutoFill
validationRules="damage-option-required"
placeHolderText="Select an option"
id="welcomeDropdown"
/>
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion"
v-model="welcomePageModel.phoneNumber"
validationRules="phone-number-required|phone-number-format"
isRequired
ref="phoneNumber"
mask="###-###-####"
disableAutoFill />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="emailField"
cmsWidgetName="EmailAddressQuestion"
v-model="welcomePageModel.email"
ref="email"
validationRules="email-address-required|email-address-format"
isRequired
disableAutoFill />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<textboxQuestion
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion"
v-model="welcomePageModel.damageCity"
isRequired
ref="damageCity"
disableAutoFill
v-if="this.displayDamageCityQuestion"
validationRules="loss-city-required" />
</div>
</div>
<div class="row mt-4 px-3">
<div class="col">
<dropdownQuestion
cmsWidgetName="DamageStateQuestion"
v-model="welcomePageModel.damageState"
ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
validationRules="loss-state-required"
isRequired
disableAutoFill
v-if="this.displayDamageStateQuestion"
placeHolderText="Select an option"
id="welcomeDropdown"
/>
</div>
</div>
<div class="row mt-4">
<buttonQuestion
class="px-0"
cmsWidgetName="GlassOnlyQuestion"
v-model="welcomePageModel.isDamageGlassOnly"
@ -124,234 +123,241 @@
ref="glassOnlyDamage"
v-if="this.displayGlassOnlyQuestion"
disableAutoFill/>
</div>
<div class="row mt-4 position-sticky top-100" id="welcomeFooter">
<div class="col">
<site-footer
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
<div class="row mt-4 position-sticky top-100" id="welcomeFooter">
<div class="col">
<site-footer
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
import siteFooter from "@/iss-components/site-footer/site-footer";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import buttonQuestion from "@/digital-components/button-question/button-question";
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
import textBlock from "@/digital-components/text-block/text-block";
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
import siteFooter from "@/iss-components/site-footer/site-footer";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import buttonQuestion from "@/digital-components/button-question/button-question";
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
import textBlock from "@/digital-components/text-block/text-block";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { Form, defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { Form, defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
//define validation rules
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
//define validation rules
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
defineRule("email-address-format",
regex(
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT
)
);
defineRule("email-address-format",
regex(
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT
)
);
defineRule("phone-number-format",
regex(
/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
errorMessages.PHONE_NUMBER_FORMAT
)
);
defineRule("phone-number-format",
regex(
/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
errorMessages.PHONE_NUMBER_FORMAT
)
);
export default {
name: "welcome-page",
mixins: [BaseFormMixin],
data() {
return {
welcomePageModel: this.getWelcomePageModelFromStore()
};
},
setup() {
const mainStore = useMainStore();
export default {
name: "welcome-page",
mixins: [BaseFormMixin],
data() {
return {
welcomePageModel: this.getWelcomePageModelFromStore()
};
},
setup() {
const mainStore = useMainStore();
// Set order account number from the issConfig.
mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
// Set order account number from the issConfig.
mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
return { mainStore };
},
async beforeRouteEnter(to, from, next)
{
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
return { mainStore };
},
async beforeRouteEnter(to, from, next)
{
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
},
];
//use resultMap to populate layout content.
let resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods:
{
async forwardButtonAction() {
this.mainStore.updatePolicyData(this.welcomePageModel);
return this.navigateForward();
},
//use resultMap to populate layout content.
let resultMap = await settleAllPromises(promiseResultMap);
navigateForward() {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
this.$route
);
},
getWelcomePageModelFromStore() {
return {
policyNumber : this.mainStore.order.policy.policyNumber,
dateOfLoss : this.mainStore.order.policy.dateOfLoss,
damageCause : this.mainStore.order.policy.damageCause,
damageState : this.mainStore.order.policy.damageState,
damageCity : this.mainStore.order.policy.damageCity,
isDamageGlassOnly : this.mainStore.order.policy.isDamageGlassOnly,
phoneNumber : this.mainStore.order.customer.phoneNumber,
email : this.mainStore.order.customer.emailAddress,
}
},
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods:
{
async forwardButtonAction() {
this.mainStore.updatePolicyData(this.welcomePageModel);
return this.navigateForward();
},
computed:{
DamageCauseOptions() {
const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers");
const damageCauseAnswersObj ={};
if(damageCauseAnswers)
{
for (let answer of Object.values(damageCauseAnswers)) {
if (answer?.Name) {
damageCauseAnswersObj[answer.Name] = answer.Name;
}
}
}
return damageCauseAnswersObj;
},
DamageGlassOnlyOptions()
{
return this.getCmsContent("GlassOnlyQuestion", "Answers");
},
DamageGlassOnlyQuestion()
{
return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
},
stateOptions: {
get: function () {
return {
AL: "Alabama",
AK: "Alaska",
AZ: "Arizona",
AR: "Arkansas",
CA: "California",
CO: "Colorado",
CT: "Connecticut",
DE: "Delaware",
DC: "District Of Columbia",
FL: "Florida",
GA: "Georgia",
HI: "Hawaii",
ID: "Idaho",
IL: "Illinois",
IN: "Indiana",
IA: "Iowa",
KS: "Kansas",
KY: "Kentucky",
LA: "Louisiana",
ME: "Maine",
MD: "Maryland",
MA: "Massachusetts",
MI: "Michigan",
MN: "Minnesota",
MS: "Mississippi",
MO: "Missouri",
MT: "Montana",
NE: "Nebraska",
NV: "Nevada",
NH: "New Hampshire",
NJ: "New Jersey",
NM: "New Mexico",
NY: "New York",
NC: "North Carolina",
ND: "North Dakota",
OH: "Ohio",
OK: "Oklahoma",
OR: "Oregon",
PA: "Pennsylvania",
RI: "Rhode Island",
SC: "South Carolina",
SD: "South Dakota",
TN: "Tennessee",
TX: "Texas",
UT: "Utah",
VT: "Vermont",
VA: "Virginia",
WA: "Washington",
WV: "West Virginia",
WI: "Wisconsin",
WY: "Wyoming",
};
},
},
displayDamageCityQuestion(){
return !!this.getCmsContent("DamageCityQuestion","QuestionText");
},
displayDamageStateQuestion(){
return !!this.getCmsContent("DamageStateQuestion","QuestionText");
},
displayGlassOnlyQuestion(){
return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
navigateForward() {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
this.$route
);
},
getWelcomePageModelFromStore() {
return {
policyNumber : this.mainStore.order.policy.policyNumber,
dateOfLoss : this.mainStore.order.policy.dateOfLoss,
damageCause : this.mainStore.order.policy.damageCause,
damageState : this.mainStore.order.policy.damageState,
damageCity : this.mainStore.order.policy.damageCity,
isDamageGlassOnly : this.mainStore.order.policy.isDamageGlassOnly,
phoneNumber : this.mainStore.order.customer.phoneNumber,
email : this.mainStore.order.customer.emailAddress,
}
},
components: {
siteHeader,
siteSubHeader,
buttonQuestion,
textboxQuestion,
dropdownQuestion,
siteFooter,
textBlock,
Form,
},
computed:{
DamageCauseOptions() {
const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers");
const damageCauseAnswersObj ={};
if(damageCauseAnswers)
{
for (let answer of Object.values(damageCauseAnswers)) {
if (answer?.Name) {
damageCauseAnswersObj[answer.Name] = answer.Name;
}
}
}
return damageCauseAnswersObj;
},
}
DamageGlassOnlyOptions()
{
return this.getCmsContent("GlassOnlyQuestion", "Answers");
},
DamageGlassOnlyQuestion()
{
return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
},
stateOptions: {
get: function () {
return {
AL: "Alabama",
AK: "Alaska",
AZ: "Arizona",
AR: "Arkansas",
CA: "California",
CO: "Colorado",
CT: "Connecticut",
DE: "Delaware",
DC: "District Of Columbia",
FL: "Florida",
GA: "Georgia",
HI: "Hawaii",
ID: "Idaho",
IL: "Illinois",
IN: "Indiana",
IA: "Iowa",
KS: "Kansas",
KY: "Kentucky",
LA: "Louisiana",
ME: "Maine",
MD: "Maryland",
MA: "Massachusetts",
MI: "Michigan",
MN: "Minnesota",
MS: "Mississippi",
MO: "Missouri",
MT: "Montana",
NE: "Nebraska",
NV: "Nevada",
NH: "New Hampshire",
NJ: "New Jersey",
NM: "New Mexico",
NY: "New York",
NC: "North Carolina",
ND: "North Dakota",
OH: "Ohio",
OK: "Oklahoma",
OR: "Oregon",
PA: "Pennsylvania",
RI: "Rhode Island",
SC: "South Carolina",
SD: "South Dakota",
TN: "Tennessee",
TX: "Texas",
UT: "Utah",
VT: "Vermont",
VA: "Virginia",
WA: "Washington",
WV: "West Virginia",
WI: "Wisconsin",
WY: "Wyoming",
};
},
},
displayDamageCityQuestion(){
return !!this.getCmsContent("DamageCityQuestion","QuestionText");
},
displayDamageStateQuestion(){
return !!this.getCmsContent("DamageStateQuestion","QuestionText");
},
displayGlassOnlyQuestion(){
return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
}
},
components: {
siteHeader,
siteSubHeader,
buttonQuestion,
textboxQuestion,
dropdownQuestion,
siteFooter,
textBlock,
Form,
},
}
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 165px);
overflow-X: hidden !important;
.fade-on-route-transition {
height: calc(100% - 80px);
overflow: scroll;
}
.modal-open {
.fade-on-route-transition {
overflow: hidden;
}
}
.my-2
{

2
src/styles/common-styles.scss
View file

@ -46,7 +46,7 @@ body {
}
.page-container-grouped-styles {
@extend .container-fluid, .shadow, .rounded-3, .p-0, .position-relative, .make-tall;
@extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
}
//Footer modal backdrop adjustments for positioning