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

Merge pull request #233 from Safelite/SSR-348-site-header-unstick-2

Browse source 
Ssr 348 site header unstick 2
This commit is contained in:
bmauger 2023-04-10 15:08:27 -04:00 committed by GitHub
commit 785a75fa62
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 2250 additions and 2097 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/digital-components/button-question/button-question.spec.js
View file

@ -2,22 +2,6 @@ import { shallowMount } from "@vue/test-utils";
import buttonQuestion from "@/digital-components/button-question/button-question"; import buttonQuestion from "@/digital-components/button-question/button-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { getMountOptions } from "@/helpers/unit-test-helper.js";
describe("buttonQuestion.vue", () => {
it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
// Act
const wrapper = shallowMount(buttonQuestion, {
propsData: {
isOverflowScrollable: true,
groupName: "group-name",
},
});
// Assert
const fieldSet = wrapper.find("fieldset");
expect(fieldSet.classes()).toContain("overflow-scroll");
});
});
describe("buttonQuestion.vue", () => { describe("buttonQuestion.vue", () => {
it("Fieldset classes should contain row if button type is listCard", () => { it("Fieldset classes should contain row if button type is listCard", () => {
// Act // Act

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;

29
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -1,14 +1,18 @@
<template> <template>
<div :class="`page-container-grouped-styles questions-page`"> <div :class="`page-container-grouped-styles questions-page`">
<div class="fade-on-route-transition position-relative">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<alert <alert
ref="alertFewMoreQuestions" ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget" cmsWidgetName="alertWidget"
class="mt-5"
alertClass="alert-warning" alertClass="alert-warning"
:manualHeadline="alertFewMoreQuestionsHeader" :manualHeadline="alertFewMoreQuestionsHeader"
:manualCopy="alertFewMoreQuestionsCopy" :manualCopy="alertFewMoreQuestionsCopy"
@ -31,6 +35,11 @@
@ForwardClicked="handleForwardButtonAction" /> @ForwardClicked="handleForwardButtonAction" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
@ -94,11 +103,19 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 180px); margin-bottom: 100px;
overflow-x: hidden !important; }
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
} }
}
.questions-page { .questions-page {
.question-text { .question-text {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;

4
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"
@ -79,7 +79,7 @@ export default {
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('.page-container-grouped-styles').scrollTo({
top: 0, behavior: 'smooth' top: 0, behavior: 'instant'
}); });
}, },
hide() { hide() {

55
src/layouts/address-lookup/address-lookup.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ meta }"
autocomplete="off">
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" /> <div class="fade-on-route-transition position-relative">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<vehicleBanner <vehicleBanner
class="mb-3" class="mb-3"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
@ -57,6 +57,11 @@
:isForwardActionDisabled="!meta.valid" /> :isForwardActionDisabled="!meta.valid" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
@ -281,12 +286,12 @@ export default {
this.displayVinLookupByHomeAddressNotAllowedAlert = false; this.displayVinLookupByHomeAddressNotAllowedAlert = false;
this.$refs.siteFooter.enableForwardAction(); this.$refs.siteFooter.enableForwardAction();
}, },
}, },
mounted() { mounted() {
this.attachCustomEvents(); this.attachCustomEvents();
}, },
computed: { computed: {
AlertMatchedDifferentVehicleHeader() { AlertMatchedDifferentVehicleHeader() {
return this.getCmsContent( return this.getCmsContent(
"AlertMatchedDifferentVehicleWidget", "AlertMatchedDifferentVehicleWidget",
@ -322,8 +327,8 @@ export default {
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase()); return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
} }
}, },
watch: { watch: {
customerQuestions: { customerQuestions: {
handler(newValue) { handler(newValue) {
// if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote" // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
@ -334,8 +339,8 @@ export default {
}, },
deep: true, deep: true,
} }
}, },
components: { components: {
siteHeader, siteHeader,
siteFooter, siteFooter,
vehicleBanner, vehicleBanner,
@ -344,14 +349,20 @@ export default {
textboxQuestion, textboxQuestion,
alert, alert,
Form, Form,
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.fade-on-route-transition {
.overflow-scroll { margin-bottom: 100px;
height: calc(100% - 180px); }
overflow-X: hidden !important; .page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

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

@ -1,14 +1,13 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader <div class="fade-on-route-transition position-relative">
cmsWidgetName="SiteHeaderWidget" <siteHeader cmsWidgetName="SiteHeaderWidget" />
/> <div class="select-car">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<textBlock <textBlock
cmsWidgetName="verifyingCoverageStatement" cmsWidgetName="verifyingCoverageStatement"
typeStyle="h5" typeStyle="h5"
@ -17,10 +16,7 @@
id="coverage-statement-text-block" id="coverage-statement-text-block"
/> />
<div> <div>
<p <p v-html="continueWithSchedulingBodyText" class="mt-0 small" ></p>
v-html="continueWithSchedulingBodyText"
class="mt-0 small" >
</p>
</div> </div>
<textBlock <textBlock
cmsWidgetName="whatHappensNextCopy" cmsWidgetName="whatHappensNextCopy"
@ -28,10 +24,7 @@
id="coverage-statement-text-block" id="coverage-statement-text-block"
/> />
<div> <div>
<p class="small" <p class="small" v-html="bodyText" ref="coverageStatementBodyText"></p>
v-html="bodyText"
ref="coverageStatementBodyText">
</p>
</div> </div>
<recalModal cmsWidgetName="RecalModal" /> <recalModal cmsWidgetName="RecalModal" />
<steeringText cmsWidgetName="MASteeringText" ></steeringText> <steeringText cmsWidgetName="MASteeringText" ></steeringText>
@ -44,6 +37,11 @@
/> />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -75,7 +73,7 @@ export default {
textBlock, textBlock,
recalModal, recalModal,
steeringText steeringText
}, },
computed: { computed: {
bodyText() { bodyText() {
if (useMainStore().order.damage.isRepair) { if (useMainStore().order.damage.isRepair) {
@ -151,10 +149,18 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 168px); margin-bottom: 100px;
overflow-X: hidden !important; }
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
ol { ol {
margin-left: -1rem; margin-left: -1rem;

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

@ -1,15 +1,14 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
v-slot="{ meta }">
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader cms-widget-name="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner <div class="select-car">
class="mb-3" <div class="container-fluid pb-2">
cms-widget-name="VehicleBannerWidget" <div class="row px-3">
:display-generic-vehicle-image="false" /> <div class="col">
<div class="select-car-form rounded">
<vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" /> <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<alert <alert
ref="alertVinNotFound" ref="alertVinNotFound"
@ -61,6 +60,11 @@
ref="siteFooter" /> ref="siteFooter" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -309,19 +313,26 @@ export default {
dropdownQuestion, dropdownQuestion,
alert alert
}, },
}; };
</script> </script>
<style> <style lang="scss" scoped>
.fade-on-route-transition {
.overflow-scroll { margin-bottom: 100px;
height: calc(100% - 220px);
overflow-x: hidden !important;
} }
#license-plate-question-wrapper .form-test-error { .page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
#license-plate-question-wrapper .form-test-error {
/** /**
Override extra margin-bottom in the error message in TextboxQuestion Override extra margin-bottom in the error message in TextboxQuestion
*/ */
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
</style> </style>

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

@ -1,12 +1,13 @@
<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">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition px-5 overflow-scroll"> <div class="container-fluid pb-2">
<div class="row mt-4 px-3">
<div class="col">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
<addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/> <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
<div class="row mt-4 ">
<div class="col">
<textboxQuestion <textboxQuestion
inputId="firstNameField" inputId="firstNameField"
cmsWidgetName="PolicyholderFirstNameQuestion" cmsWidgetName="PolicyholderFirstNameQuestion"
@ -15,10 +16,6 @@
ref="policyHolderFirstName" ref="policyHolderFirstName"
disableAutoFill disableAutoFill
validationRules="first-name-required" /> validationRules="first-name-required" />
</div>
</div>
<div class="row mt-4 mb-2">
<div class="col">
<textboxQuestion <textboxQuestion
inputId="lastNameField" inputId="lastNameField"
cmsWidgetName="PolicyholderLastNameQuestion" cmsWidgetName="PolicyholderLastNameQuestion"
@ -38,6 +35,7 @@
/> />
</div> </div>
</div> </div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -134,33 +132,40 @@ export default {
siteFooter, siteFooter,
Form, Form,
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 168px); height: calc(100% - 120px);
overflow-X: hidden !important; overflow: scroll;
} overflow-x: hidden;
.alert.alert-warning }
{
margin-top: 20px;
}
#sub-header p { .modal-open {
.fade-on-route-transition {
overflow: hidden;
}
}
.alert.alert-warning
{
margin-top: 20px;
}
#sub-header p {
font-size: 16px; font-size: 16px;
line-height: 26px; line-height: 26px;
color: #4D5151; color: #4D5151;
} }
#address-questions-wrapper { #address-questions-wrapper {
margin-top: 24px; margin-top: 24px;
} }
#address-questions-wrapper .alert.heading { #address-questions-wrapper .alert.heading {
line-height: 24px; line-height: 24px;
} }
#address-questions-wrapper .form-test-error { #address-questions-wrapper .form-test-error {
line-height: 24px; line-height: 24px;
} }
</style> </style>

36
src/layouts/provider-preference/provider-preference.vue
View file

@ -1,16 +1,19 @@
<template> <template>
<Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles overflow-auto"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" /> <div class="select-car">
<div class="fade-on-route-transition sub-container make-tall overflow-scroller px-5"> <div class="container-fluid pb-2">
<div v-html="ProviderPreferenceHeaderText" class="text-center mb-5 modal-link" ></div> <div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<div v-html="ProviderPreferenceHeaderText" class="text-center mb-4 modal-link" ></div>
<div <div
v-html="ProviderPreferenceBodyText" v-html="ProviderPreferenceBodyText"
class="mt-0 body-text" class="mt-0 body-text"
></div> ></div>
<shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" /> <shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" />
<buttonQuestion <buttonQuestion
cmsWidgetName="ServiceLocationQuestion" cmsWidgetName="ServiceLocationQuestion"
:questionText="questionText" :questionText="questionText"
@ -29,6 +32,11 @@
/> />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -117,10 +125,18 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroller { .fade-on-route-transition {
height: calc(100% - 220px) !important; margin-bottom: 100px;
overflow-X: hidden !important; }
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
#sub-header span{ #sub-header span{
color: $black; color: $black;

42
src/layouts/service-location/service-location.vue
View file

@ -1,10 +1,13 @@
<template> <template>
<div> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }"> <div class="page-container-grouped-styles">
<div class="page-container-grouped-styles overflow-auto"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <div class="select-car">
<div class="fade-on-route-transition sub-container make-tall px-5"> <div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<p>Placeholder for service-location page</p> <p>Placeholder for service-location page</p>
<siteFooter <siteFooter
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
@ -15,11 +18,15 @@
/> />
</div> </div>
</div> </div>
</Form>
</div> </div>
</template> </div>
<script> </div>
// Import Supporting Files </div>
</div>
</Form>
</template>
<script>
// Import 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 Component // Import Component
@ -68,4 +75,19 @@ export default {
resetDependentState() {}, resetDependentState() {},
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

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

@ -1,8 +1,11 @@
<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"/>
<div class="container-fluid pb-2">
<div class="row mt-4 px-3">
<div class="col">
<alert <alert
ref="vehicleChangeAlert" ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert" v-if="shouldDisplayVehicleChangeAlert"
@ -55,6 +58,9 @@
/> />
</div> </div>
</div> </div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
@ -470,12 +476,20 @@ export default {
Form, Form,
alert, alert,
}, },
}; };
</script> </script>
<style lang="scss">
.overflow-scroll { <style lang="scss" scoped>
height: calc(100% - 180px); .fade-on-route-transition {
overflow-X: hidden !important; margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

63
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -1,33 +1,22 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
@submit="onSubmit" <div class="page-container-grouped-styles">
@invalid-submit="onInvalidSubmit" <div class="fade-on-route-transition position-relative">
> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="page-container-grouped-styles vehicle-lookup"> <div class="select-car">
<SiteHeader <div class="container-fluid pb-2">
cms-widget-name="SiteHeaderWidget" <div class="row px-3">
/> <div class="col">
<div class="fade-on-route-transition sub-container overflow-scroll container gx-0 px-5"> <div class="select-car-form rounded">
<VehicleBanner <VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
class="mb-3" <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" />
cms-widget-name="VehicleBannerWidget" <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
:display-generic-vehicle-image="false" <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
/> </div>
<SiteSubHeader </div>
cms-widget-name="SiteSubHeaderWidget" </div>
/> </div>
<VinLookupMethods </div>
v-model="selectedVinLookupMethod"
cms-widget-name="VINLookupMethod"
group-name="VinLookupMethods"
ref="VinLookupMethods"
/>
<SiteFooter
cms-widget-name="SiteFooterWidget"
:is-forward-action-disabled="isForwardActionDisabled"
@back-clicked="backButtonAction"
@forward-clicked="forwardButtonAction"
/>
</div> </div>
</div> </div>
</Form> </Form>
@ -117,10 +106,18 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.overflow-scroll { <style lang="scss" scoped>
height: calc(100% - 180px); .fade-on-route-transition {
overflow-X: hidden !important; margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

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

@ -1,42 +1,38 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles position-relative">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
cmsWidgetName="SiteSubHeaderWidget" <makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
:hasBackButton="true" <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
@click-event="backButtonAction" </div>
/> </div>
<div class="fade-on-route-transition"> </div>
<makeQuestion
class="fade-on-route-transition"
v-model="selectedMake"
ref="makeQuestion"
cmsWidgetName="VehicleMakeQuestion"
/>
</div> </div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </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 {
@ -102,5 +98,20 @@
); );
}, },
} }
}; };
</script> </script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

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

@ -1,38 +1,38 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles position-relative">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
cmsWidgetName="SiteSubHeaderWidget" <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" />
:hasBackButton="true" <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
: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> </div>
</div> </div>
</div> </div>
</template> </div>
</div>
</div>
</div>
</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 {
@ -107,5 +107,23 @@
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 {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

54
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -1,8 +1,13 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts small-question-text"> <div class="page-container-grouped-styles">
<siteHeader ref="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" />
<div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<vehicleBanner <vehicleBanner
class="mb-3" class="mb-3"
ref="vehicleBanner" ref="vehicleBanner"
@ -40,6 +45,11 @@
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</Form> </Form>
</template> </template>
@ -88,15 +98,15 @@ export default {
}) })
); );
}); });
}, },
data() { data() {
return { return {
selectedGlassParts: {}, selectedGlassParts: {},
alertWidgetData: Object, alertWidgetData: Object,
alreadyPopulatedPartsData: [], alreadyPopulatedPartsData: [],
}; };
}, },
computed: { computed: {
isForwardActionDisabled() { isForwardActionDisabled() {
return ( return (
this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
@ -146,8 +156,8 @@ export default {
RefPrefix() { RefPrefix() {
return "partQuestion"; return "partQuestion";
}, },
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data) // Check if isRepair is populated and if the pageData we need is here (Parts data)
return ( return (
@ -207,11 +217,11 @@ export default {
}); });
}); });
}, },
}, },
mounted() { mounted() {
this.LoadInitialPartsData(); this.LoadInitialPartsData();
}, },
components: { components: {
Form, Form,
glassPartQuestion, glassPartQuestion,
siteHeader, siteHeader,
@ -219,13 +229,21 @@ export default {
siteSubHeader, siteSubHeader,
siteFooter, siteFooter,
alert, alert,
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 180px); margin-bottom: 100px;
overflow-x: hidden !important; }
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
#vehicle-parts-alert { #vehicle-parts-alert {

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

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

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

@ -1,38 +1,38 @@
<template> <template>
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles position-relative">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition"> <yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
<yearQuestion <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
class="fade-on-route-transition"
v-model="selectedYear"
ref="yearQuestion"
cmsWidgetName="VehicleYearQuestion"
/>
</div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </div>
</div> </div>
</div> </div>
</template> </div>
</div>
</div>
</div>
</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 {
@ -97,5 +97,20 @@
vehicleBanner, vehicleBanner,
siteFooter siteFooter
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 80px;
}
.page-container-grouped-styles {
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

75
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -1,47 +1,27 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit" <div class="page-container-grouped-styles">
@invalidSubmit="onInvalidSubmit" <div class="fade-on-route-transition position-relative">
v-slot="{ meta }" <siteHeader cmsWidgetName="SiteHeaderWidget" />
> <div class="select-car">
<div class="page-container-grouped-styles "> <div class="container-fluid pb-2">
<siteHeader <div class="row px-3">
cmsWidgetName="SiteHeaderWidget" <div class="col">
/> <div class="select-car-form rounded">
<div class="px-4 overflow-scroll "> <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<div class="fade-on-route-transition sub-container px-2"> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<vehicleBanner <vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
class="mb-3" <vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
/>
<vinLookupAlerts
class="mt-5"
:activeAlertType="activeVehicleLookupAlertType"
/>
<vinQuestion
v-model="vin"
:mask="vinMask"
:isDisabled="vinPopulatedOnPageLoad"
/>
<vinLocationInformation /> <vinLocationInformation />
<siteFooter cmsWidgetName="SiteFooterWidget" :isForwardActionDisabled="!meta.valid" @backClicked="backButtonAction" @forwardClicked="forwardButtonAction" ref="siteFooter" />
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div> </div>
</div> </div>
</div> </div>
</Form> </div>
</div>
</div>
</div>
</Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
@ -274,11 +254,18 @@ export default {
}, },
}; };
</script> </script>
<style>
.overflow-scroll { <style lang="scss" scoped>
height: calc(100% - 180px); .fade-on-route-transition {
overflow-X: hidden !important; margin-bottom: 100px;
}
.page-container-grouped-styles {
overflow: auto;
} }
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style> </style>

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

@ -1,11 +1,10 @@
<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"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="container-fluid pb-2">
<div class="row mt-4 px-3"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion
@ -136,54 +135,55 @@
</div> </div>
</div> </div>
</div> </div>
</Form> </div>
</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() {
@ -344,14 +344,20 @@
textBlock, textBlock,
Form, 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