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

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

@ -13,7 +13,6 @@
<fieldset <fieldset
class="w-100" class="w-100"
:aria-required="isRequired" :aria-required="isRequired"
:class="getFieldSetClasses"
:role="isMultiSelect ? 'group' : 'radiogroup'" :role="isMultiSelect ? 'group' : 'radiogroup'"
:aria-labelledby="formatString(groupName)"> :aria-labelledby="formatString(groupName)">
<legend <legend
@ -234,16 +233,16 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.button-question-overflow { // .button-question-overflow {
height: calc(100vh - 274px); // height: calc(100vh - 274px);
//
.overflow-scroll { // .overflow-scroll {
// Height will be determined by overall height of content above list // // Height will be determined by overall height of content above list
height: calc(100% - 400px); // height: calc(100% - 400px);
overflow-x: hidden !important; // overflow-x: hidden !important;
-webkit-overflow-scrolling: touch; // -webkit-overflow-scrolling: touch;
} // }
} // }
.button-question { .button-question {
color: $black; color: $black;

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

@ -7,7 +7,7 @@
</button> </button>
</div> </div>
<!-- Modal --> <!-- 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"> <div class="menu-modal-container">
<button <button
class="menu-button" class="menu-button"
@ -78,8 +78,8 @@ export default {
show() { show() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72; this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
this.isActive = true; this.isActive = true;
document.querySelector('.page-container-grouped-styles').scrollTo({ document.querySelector('.fade-on-route-transition,.page-container-grouped-styles').scrollTo({
top: 0, behavior: 'smooth' top: 0, behavior: 'instant'
}); });
}, },
hide() { hide() {

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

@ -1,13 +1,14 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" > <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles "> <div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <div class="fade-on-route-transition position-relative">
<div class="fade-on-route-transition px-5 overflow-scroll"> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/> <div class="container-fluid">
<addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/> <div class="row mt-4 px-3">
<div class="row mt-4 "> <div class="col">
<div class="col"> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
<textboxQuestion <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
<textboxQuestion
inputId="firstNameField" inputId="firstNameField"
cmsWidgetName="PolicyholderFirstNameQuestion" cmsWidgetName="PolicyholderFirstNameQuestion"
v-model="customerQuestions.firstName" v-model="customerQuestions.firstName"
@ -15,11 +16,7 @@
ref="policyHolderFirstName" ref="policyHolderFirstName"
disableAutoFill disableAutoFill
validationRules="first-name-required" /> validationRules="first-name-required" />
</div> <textboxQuestion
</div>
<div class="row mt-4 mb-2">
<div class="col">
<textboxQuestion
inputId="lastNameField" inputId="lastNameField"
cmsWidgetName="PolicyholderLastNameQuestion" cmsWidgetName="PolicyholderLastNameQuestion"
v-model="customerQuestions.lastName" v-model="customerQuestions.lastName"
@ -27,15 +24,16 @@
ref="policyHolderLastName" ref="policyHolderLastName"
disableAutoFill disableAutoFill
validationRules="last-name-required" /> validationRules="last-name-required" />
</div>
</div> </div>
</div> <siteFooter
<siteFooter
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
ref="siteFooter" ref="siteFooter"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
/> />
</div>
</div> </div>
</div> </div>
</Form> </Form>
@ -80,87 +78,94 @@ export default {
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ 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", backButtonAction() {
promise: cmsContentPromise, this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},]; },
forwardButtonAction()
{
this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
return this.navigateForward();
},
//use resultMap to populate layout content. navigateForward() {
let resultMap = await settleAllPromises(promiseResultMap); 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;
}
next((vm) => { .modal-open {
vm.setCmsContent(resultMap.cmsContent); .fade-on-route-transition {
}); overflow: hidden;
}, }
methods: }
.alert.alert-warning
{ {
backButtonAction() { margin-top: 20px;
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); }
},
forwardButtonAction() #sub-header p {
{ font-size: 16px;
this.mainStore.updatePolicyHolderDetails(this.customerQuestions); line-height: 26px;
return this.navigateForward(); color: #4D5151;
}, }
navigateForward() { #address-questions-wrapper {
this.$router.navigate( margin-top: 24px;
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 { #address-questions-wrapper .alert.heading {
font-size: 16px; line-height: 24px;
line-height: 26px; }
color: #4D5151;
}
#address-questions-wrapper { #address-questions-wrapper .form-test-error {
margin-top: 24px; line-height: 24px;
} }
</style>
#address-questions-wrapper .alert.heading {
line-height: 24px;
}
#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> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles vehicle-damage"> <div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<alert <div class="container-fluid">
ref="vehicleChangeAlert" <div class="row mt-4 px-3">
v-if="shouldDisplayVehicleChangeAlert" <div class="col">
class="mt-5 mb-0" <alert
cmsWidgetName="VehicleChangeAlert" ref="vehicleChangeAlert"
alertClass="alert-warning" v-if="shouldDisplayVehicleChangeAlert"
:isDismissible="false" /> class="mt-5 mb-0"
<vehicleBanner cmsWidgetName="VehicleChangeAlert"
class="mb-3" alertClass="alert-warning"
cmsWidgetName="VehicleBannerWidget" :isDismissible="false" />
:displayGenericVehicleImage="false" /> <vehicleBanner
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> class="mb-3"
<damageLocationQuestion cmsWidgetName="VehicleBannerWidget"
ref="damageLocation" :displayGenericVehicleImage="false" />
cmsWidgetName="DamageLocationQuestion" <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
v-model="selectedDamageLocations" <damageLocationQuestion
groupName="DamageLocationQuestion" /> ref="damageLocation"
<windshieldOptions cmsWidgetName="DamageLocationQuestion"
ref="windshieldOptions" v-model="selectedDamageLocations"
v-model="selectedWindshieldOptions" groupName="DamageLocationQuestion" />
:hasRepairReplaceConflict="hasRepairReplaceConflict" <windshieldOptions
:hasSplitSingleConflict="hasSplitSingleConflict" ref="windshieldOptions"
:selectedDamageLocations="selectedDamageLocations" /> v-model="selectedWindshieldOptions"
<alert :hasRepairReplaceConflict="hasRepairReplaceConflict"
v-if="hasRepairReplaceConflict" :hasSplitSingleConflict="hasSplitSingleConflict"
class="my-5" :selectedDamageLocations="selectedDamageLocations" />
cmsWidgetName="HasReplacementConflict" <alert
alertClass="alert-danger" v-if="hasRepairReplaceConflict"
:isDismissible="false" /> class="my-5"
<sideDoorOptions cmsWidgetName="HasReplacementConflict"
ref="sideDoorOptions" alertClass="alert-danger"
cmsWidgetName="SideDoorSideQuestion" :isDismissible="false" />
groupName="SideDoorSideQuestion" <sideDoorOptions
v-model="sideDoorOptionsData" ref="sideDoorOptions"
v-show="!hasRepairReplaceConflict" cmsWidgetName="SideDoorSideQuestion"
:selectedDamageLocations="selectedDamageLocations" /> groupName="SideDoorSideQuestion"
<replaceOptionsQuestion v-model="sideDoorOptionsData"
ref="backGlassOptions" v-show="!hasRepairReplaceConflict"
cmsWidgetName="RearReplaceOptionsQuestion" :selectedDamageLocations="selectedDamageLocations" />
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict" <replaceOptionsQuestion
v-model="selectedRearReplaceOptions" ref="backGlassOptions"
groupName="BackGlassReplaceOptionsQuestion" cmsWidgetName="RearReplaceOptionsQuestion"
validationRules="replace-options-required" /> :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
<site-footer v-model="selectedRearReplaceOptions"
cmsWidgetName="SiteFooterWidget" groupName="BackGlassReplaceOptionsQuestion"
:isForwardActionDisabled="!meta.valid" validationRules="replace-options-required" />
@backClicked="backButtonAction" <site-footer
@forwardClicked="forwardButtonAction" cmsWidgetName="SiteFooterWidget"
ref="siteFooter" :isForwardActionDisabled="!meta.valid"
/> @backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>
</div> </div>
</div> </div>
</Form> </Form>
@ -207,7 +213,7 @@ export default {
}) })
) { ) {
windShieldOptions.selectedWindshieldDamageType = windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE; damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push( windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE damageLocationsSelected.SINGLE
); );
@ -222,7 +228,7 @@ export default {
}) })
) { ) {
windShieldOptions.selectedWindshieldDamageType = windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE; damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push( windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.DRIVER damageLocationsSelected.DRIVER
); );
@ -237,7 +243,7 @@ export default {
}) })
) { ) {
windShieldOptions.selectedWindshieldDamageType = windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE; damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push( windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.PASSENGER damageLocationsSelected.PASSENGER
); );
@ -302,147 +308,147 @@ export default {
async forwardButtonAction() { async forwardButtonAction() {
await this.mainStore.saveVehicleDamage(this.isWindshieldRepair, await this.mainStore.saveVehicleDamage(this.isWindshieldRepair,
this.selectedGlassToReplace(), this.selectedGlassToReplace(),
this.selectedWindshieldOptions.selectedWindshieldChipCount); this.selectedWindshieldOptions.selectedWindshieldChipCount);
return this.navigateForward(); return this.navigateForward();
}, },
navigateForward() { navigateForward() {
if (this.mainStore.damage.isRepair) { 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) {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
this.$route
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
this.$route this.$route
); );
} }
} else {
}, // If vin already exists, navigate directly to vin-lookup
if (this.mainStore.order.vehicle.vin) {
selectedGlassToReplace() { this.$router.navigate(
const selectedGlassToReplace = []; this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) { this.$route
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach( );
(wsItem) => { } else {
selectedGlassToReplace.push({ this.$router.navigate(
glassLocation: damageLocationsSelected.WINDSHIELD, this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
glassName: wsItem, this.$route
}); );
} }
); }
} },
if (this.isDriverSideReplace) { selectedGlassToReplace() {
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => { const selectedGlassToReplace = [];
selectedGlassToReplace.push({ if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
glassLocation: damageLocationsSelected.DRIVER, this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
glassName: driverItem, (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;
}); });
} },
isSideDoorDamageLocation() {
if (this.isPassengerSideReplace) { return this.selectedDamageLocations.some((selectedDamages) => {
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach( return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
(passengerItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem,
});
}
);
}
if (this.isRearWindowDamageLocation) {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.REAR,
glassName: this.selectedRearReplaceOptions,
}); });
} },
isRearWindowDamageLocation() {
return selectedGlassToReplace; return this.selectedDamageLocations.some((selectedDamages) => {
}, return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
}, });
computed: { },
isWindshieldDamageLocation() { isWindshieldRepair() {
return this.selectedDamageLocations.some((selectedDamages) => { return (
return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD; this.isWindshieldDamageLocation &&
}); this.selectedWindshieldOptions.selectedWindshieldDamageType ===
},
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 ===
damageLocationsSelected.REPAIR damageLocationsSelected.REPAIR
); );
}, },
isDriverSideReplace() { isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false; if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => { return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE; return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
}); });
}, },
isPassengerSideReplace() { isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false; if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => { return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE; return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
}); });
}, },
hasRepairReplaceConflict() { hasRepairReplaceConflict() {
return ( return (
this.isWindshieldDamageLocation && this.isWindshieldDamageLocation &&
this.selectedDamageLocations.length > 1 && this.selectedDamageLocations.length > 1 &&
this.isWindshieldRepair this.isWindshieldRepair
); );
}, },
hasSplitSingleConflict() { hasSplitSingleConflict() {
if ( if (
!this.selectedDamageLocations?.includes("Windshield") || !this.selectedDamageLocations?.includes("Windshield") ||
this.selectedWindshieldOptions.selectedWindshieldDamageType === this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR || damageLocationsSelected.REPAIR ||
!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
) )
return false; return false;
return ( return (
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some( this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedSingleWindshield) => { (selectedSingleWindshield) => {
return ( return (
selectedSingleWindshield.toUpperCase() === selectedSingleWindshield.toUpperCase() ===
damageLocationsSelected.SINGLE.toUpperCase() damageLocationsSelected.SINGLE.toUpperCase()
); );
} }
) && ) &&
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some( (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedDriverWindshield) => { (selectedDriverWindshield) => {
return ( return (
selectedDriverWindshield.toUpperCase() === selectedDriverWindshield.toUpperCase() ===
damageLocationsSelected.DRIVER.toUpperCase() damageLocationsSelected.DRIVER.toUpperCase()
); );
} }
) || ) ||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some( this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedPassengerWindshield) => { (selectedPassengerWindshield) => {
return ( 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: { components: {
siteHeader, siteHeader,
siteFooter, siteFooter,
vehicleBanner, vehicleBanner,
siteSubHeader, siteSubHeader,
sideDoorOptions, sideDoorOptions,
damageLocationQuestion, damageLocationQuestion,
windshieldOptions, windshieldOptions,
replaceOptionsQuestion, replaceOptionsQuestion,
Form, Form,
alert, alert,
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.overflow-scroll { .modal-open {
height: calc(100% - 180px); .page-container-grouped-styles {
overflow-X: hidden !important; overflow: hidden;
}
} }
</style> </style>

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

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

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

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

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

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

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

@ -1,116 +1,115 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" > <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles welcome">
<div class="page-container-grouped-styles welcome"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition overflow-scroll container"> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="container-fluid">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/> <div class="row mt-4 px-3">
<div class="row mt-4 px-3"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion inputId="policyNumberField"
inputId="policyNumberField" cmsWidgetName="PolicyNumberQuestion"
cmsWidgetName="PolicyNumberQuestion" v-model="welcomePageModel.policyNumber"
v-model="welcomePageModel.policyNumber" isRequired
isRequired ref="policyNumber"
ref="policyNumber" disableAutoFill
disableAutoFill validationRules="policy-number-required" />
validationRules="policy-number-required" /> </div>
</div> </div>
</div> <div class="row mt-4 px-3">
<div class="row mt-4 px-3"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion type="date"
type="date" cmsWidgetName="DateOfLossQuestion"
cmsWidgetName="DateOfLossQuestion" v-model="welcomePageModel.dateOfLoss"
v-model="welcomePageModel.dateOfLoss" inputId="dateOfLossField"
inputId="dateOfLossField" isRequired
isRequired ref="dateOfLoss"
ref="dateOfLoss" disableAutoFill
disableAutoFill :max="new Date().toJSON().slice(0,10)"
:max="new Date().toJSON().slice(0,10)" :min="'1972-12-01'"
:min="'1972-12-01'" validationRules="loss-date-required"
validationRules="loss-date-required" />
/> </div>
</div> </div>
</div> <div class="row px-5">
<div class="row px-5"> <div class="col px-0">
<div class="col px-0"> <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" /> </div>
</div> </div>
</div> <div class="row mt-4 px-3">
<div class="row mt-4 px-3"> <div class="col">
<div class="col"> <dropdownQuestion
<dropdownQuestion cmsWidgetName="DamageCauseQuestion"
cmsWidgetName="DamageCauseQuestion" v-model="welcomePageModel.damageCause"
v-model="welcomePageModel.damageCause" ref="damageCause"
ref="damageCause" inputId="damageCauseQuestionField"
inputId="damageCauseQuestionField" :options="DamageCauseOptions"
:options="DamageCauseOptions" disableAutoFill
disableAutoFill validationRules="damage-option-required"
validationRules="damage-option-required" placeHolderText="Select an option"
placeHolderText="Select an option" id="welcomeDropdown"
id="welcomeDropdown" />
/> </div>
</div> </div>
</div> <div class="row mt-4 px-3">
<div class="row mt-4 px-3"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion inputId="phoneNumberField"
inputId="phoneNumberField" cmsWidgetName="PhoneNumberQuestion"
cmsWidgetName="PhoneNumberQuestion" v-model="welcomePageModel.phoneNumber"
v-model="welcomePageModel.phoneNumber" validationRules="phone-number-required|phone-number-format"
validationRules="phone-number-required|phone-number-format" isRequired
isRequired ref="phoneNumber"
ref="phoneNumber" mask="###-###-####"
mask="###-###-####" disableAutoFill />
disableAutoFill /> </div>
</div> </div>
</div> <div class="row mt-4 px-3">
<div class="row mt-4 px-3"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion inputId="emailField"
inputId="emailField" cmsWidgetName="EmailAddressQuestion"
cmsWidgetName="EmailAddressQuestion" v-model="welcomePageModel.email"
v-model="welcomePageModel.email" ref="email"
ref="email" validationRules="email-address-required|email-address-format"
validationRules="email-address-required|email-address-format" isRequired
isRequired disableAutoFill />
disableAutoFill /> </div>
</div> </div>
</div> <div class="row mt-4 px-3">
<div class="row mt-4 px-3"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion inputId="damageCityField"
inputId="damageCityField" cmsWidgetName="DamageCityQuestion"
cmsWidgetName="DamageCityQuestion" v-model="welcomePageModel.damageCity"
v-model="welcomePageModel.damageCity" isRequired
isRequired ref="damageCity"
ref="damageCity" disableAutoFill
disableAutoFill v-if="this.displayDamageCityQuestion"
v-if="this.displayDamageCityQuestion" validationRules="loss-city-required" />
validationRules="loss-city-required" /> </div>
</div> </div>
</div> <div class="row mt-4 px-3">
<div class="row mt-4 px-3"> <div class="col">
<div class="col"> <dropdownQuestion
<dropdownQuestion cmsWidgetName="DamageStateQuestion"
cmsWidgetName="DamageStateQuestion" v-model="welcomePageModel.damageState"
v-model="welcomePageModel.damageState" ref="state"
ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb"
inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions"
:options="stateOptions" validationRules="loss-state-required"
validationRules="loss-state-required" isRequired
isRequired disableAutoFill
disableAutoFill v-if="this.displayDamageStateQuestion"
v-if="this.displayDamageStateQuestion" placeHolderText="Select an option"
placeHolderText="Select an option" id="welcomeDropdown"
id="welcomeDropdown" />
/> </div>
</div> </div>
</div> <div class="row mt-4">
<div class="row mt-4"> <buttonQuestion
<buttonQuestion
class="px-0" class="px-0"
cmsWidgetName="GlassOnlyQuestion" cmsWidgetName="GlassOnlyQuestion"
v-model="welcomePageModel.isDamageGlassOnly" v-model="welcomePageModel.isDamageGlassOnly"
@ -124,234 +123,241 @@
ref="glassOnlyDamage" ref="glassOnlyDamage"
v-if="this.displayGlassOnlyQuestion" v-if="this.displayGlassOnlyQuestion"
disableAutoFill/> disableAutoFill/>
</div> </div>
<div class="row mt-4 position-sticky top-100" id="welcomeFooter"> <div class="row mt-4 position-sticky top-100" id="welcomeFooter">
<div class="col"> <div class="col">
<site-footer <site-footer
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </Form>
</Form>
</template> </template>
<script> <script>
// Components // Components
import siteHeader from '@/iss-components/site-header/site-header'; import siteHeader from '@/iss-components/site-header/site-header';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header'; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
import siteFooter from "@/iss-components/site-footer/site-footer"; import siteFooter from "@/iss-components/site-footer/site-footer";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question"; import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import buttonQuestion from "@/digital-components/button-question/button-question"; import buttonQuestion from "@/digital-components/button-question/button-question";
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question"; import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
import textBlock from "@/digital-components/text-block/text-block"; import textBlock from "@/digital-components/text-block/text-block";
// Supporting files // Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
import { Form, defineRule } from "vee-validate"; import { Form, defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules"; import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
//define validation rules //define validation rules
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED)); defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED)); defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED)); defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED)); defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED)); defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED)); defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT)); defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED)); defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED)); defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
defineRule("email-address-format", defineRule("email-address-format",
regex( regex(
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/, /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT errorMessages.EMAIL_ADDRESS_FORMAT
) )
); );
defineRule("phone-number-format", defineRule("phone-number-format",
regex( regex(
/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/, /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
errorMessages.PHONE_NUMBER_FORMAT errorMessages.PHONE_NUMBER_FORMAT
) )
); );
export default { export default {
name: "welcome-page", name: "welcome-page",
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
data() { data() {
return { return {
welcomePageModel: this.getWelcomePageModelFromStore() welcomePageModel: this.getWelcomePageModelFromStore()
}; };
}, },
setup() { setup() {
const mainStore = useMainStore(); const mainStore = useMainStore();
// Set order account number from the issConfig. // Set order account number from the issConfig.
mainStore.order.accountNumber = mainStore.issConfig.accountNumber; mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
return { mainStore }; return { mainStore };
}, },
async beforeRouteEnter(to, from, next) async beforeRouteEnter(to, from, next)
{ {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: "cmsContent",
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
]; ];
//use resultMap to populate layout content. //use resultMap to populate layout content.
let resultMap = await settleAllPromises(promiseResultMap); let resultMap = await settleAllPromises(promiseResultMap);
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
},
methods:
{
async forwardButtonAction() {
this.mainStore.updatePolicyData(this.welcomePageModel);
return this.navigateForward();
}, },
methods:
{
async forwardButtonAction() {
this.mainStore.updatePolicyData(this.welcomePageModel);
return this.navigateForward();
},
navigateForward() { navigateForward() {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE, this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
this.$route 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,
}
},
}, },
computed:{ getWelcomePageModelFromStore() {
DamageCauseOptions() { return {
const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers"); policyNumber : this.mainStore.order.policy.policyNumber,
const damageCauseAnswersObj ={}; dateOfLoss : this.mainStore.order.policy.dateOfLoss,
if(damageCauseAnswers) damageCause : this.mainStore.order.policy.damageCause,
{ damageState : this.mainStore.order.policy.damageState,
for (let answer of Object.values(damageCauseAnswers)) { damageCity : this.mainStore.order.policy.damageCity,
if (answer?.Name) { isDamageGlassOnly : this.mainStore.order.policy.isDamageGlassOnly,
damageCauseAnswersObj[answer.Name] = answer.Name; phoneNumber : this.mainStore.order.customer.phoneNumber,
} email : this.mainStore.order.customer.emailAddress,
}
}
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, computed:{
siteSubHeader, DamageCauseOptions() {
buttonQuestion, const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers");
textboxQuestion, const damageCauseAnswersObj ={};
dropdownQuestion, if(damageCauseAnswers)
siteFooter, {
textBlock, for (let answer of Object.values(damageCauseAnswers)) {
Form, 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> </script>
<style lang="scss"> <style lang="scss">
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 165px); height: calc(100% - 80px);
overflow-X: hidden !important; overflow: scroll;
}
.modal-open {
.fade-on-route-transition {
overflow: hidden;
}
} }
.my-2 .my-2
{ {

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

@ -46,7 +46,7 @@ body {
} }
.page-container-grouped-styles { .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 //Footer modal backdrop adjustments for positioning