page updates
policy holder details vehicle-selection - remove image - auto formatting
This commit is contained in:
Bill Richardson
parent
a0a6a8ab0d
commit
85e920c35b
2 changed files with 94 additions and 105 deletions
|
|
@ -4,17 +4,16 @@
|
||||||
v-slot="{ meta }"
|
v-slot="{ meta }"
|
||||||
@submit="onSubmit"
|
@submit="onSubmit"
|
||||||
@invalidSubmit="onInvalidSubmit">
|
@invalidSubmit="onInvalidSubmit">
|
||||||
<div class="container-fluid fade-on-route-transition">
|
<div class="fade-on-route-transition">
|
||||||
<div class="row justify-content-center">
|
<div class="justify-content-center">
|
||||||
<div class="col-md-6 px-0 px-md-2 mb-5">
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="iss-heritage-container-width">
|
||||||
<div class="col-md-6 col-xl-4">
|
<div class="policy-holder-details-container iss-heritage-content-container-width">
|
||||||
<siteSubHeader
|
<siteSubHeader
|
||||||
id="sub-header"
|
id="sub-header"
|
||||||
cmsWidgetName="SiteSubHeaderWidget" />
|
cmsWidgetName="SiteSubHeaderWidget"
|
||||||
|
class="mt-4" />
|
||||||
<addressQuestions
|
<addressQuestions
|
||||||
id="address-questions-wrapper"
|
id="address-questions-wrapper"
|
||||||
ref="addressQuestions"
|
ref="addressQuestions"
|
||||||
|
|
@ -161,14 +160,13 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#sub-header p {
|
.iss-heritage-container-width {
|
||||||
font-size: 16px;
|
.policy-holder-details-container {
|
||||||
line-height: 26px;
|
position: relative;
|
||||||
color: #4d5151;
|
min-height: 1px;
|
||||||
}
|
padding-left: .9375rem;
|
||||||
|
padding-right: .9375rem;
|
||||||
#address-questions-wrapper {
|
}
|
||||||
margin-top: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#address-questions-wrapper .alert.heading {
|
#address-questions-wrapper .alert.heading {
|
||||||
|
|
|
||||||
|
|
@ -4,22 +4,16 @@
|
||||||
v-slot="{ meta }"
|
v-slot="{ meta }"
|
||||||
@submit="onSubmit"
|
@submit="onSubmit"
|
||||||
@invalidSubmit="onInvalidSubmit">
|
@invalidSubmit="onInvalidSubmit">
|
||||||
<div class="container-fluid fade-on-route-transition">
|
<div class="fade-on-route-transition">
|
||||||
<div class="row justify-content-center">
|
<div class="justify-content-center">
|
||||||
<div class="col-md-6 px-0 px-md-2">
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||||
<siteHeader
|
|
||||||
class="mb-2 header"
|
|
||||||
cmsWidgetName="SiteHeaderWidget" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="iss-heritage-container-width">
|
||||||
<div class="col-md-6 col-xl-4">
|
<div class="vehicle-selection-container iss-heritage-content-container-width">
|
||||||
<siteSubHeader
|
<siteSubHeader
|
||||||
cmsWidgetName="SiteSubHeaderWidget"
|
cmsWidgetName="SiteSubHeaderWidget"
|
||||||
class="siteSubHeader"
|
class="mt-4"
|
||||||
justification="center"
|
|
||||||
darkGraySubText />
|
darkGraySubText />
|
||||||
|
|
||||||
<vehicleQuestion
|
<vehicleQuestion
|
||||||
ref="vehicleYearQuestion"
|
ref="vehicleYearQuestion"
|
||||||
v-model="selectedYear"
|
v-model="selectedYear"
|
||||||
|
|
@ -52,14 +46,9 @@
|
||||||
:updateValues="updateStyleValues"
|
:updateValues="updateStyleValues"
|
||||||
validationRules="style-required"
|
validationRules="style-required"
|
||||||
inputId="styleQuestionField" />
|
inputId="styleQuestionField" />
|
||||||
<vehicleBanner
|
|
||||||
ref="banner"
|
|
||||||
cmsWidgetName="VehicleBannerWidget"
|
|
||||||
:displayGenericVehicleImage="displayGeneric"
|
|
||||||
class="mt-5 mb-3" />
|
|
||||||
<alert
|
<alert
|
||||||
ref="AlertNoService"
|
|
||||||
v-if="displayNoServiceAlert"
|
v-if="displayNoServiceAlert"
|
||||||
|
ref="AlertNoService"
|
||||||
class="mt-5"
|
class="mt-5"
|
||||||
cmsWidgetName="AlertVehicleSelection"
|
cmsWidgetName="AlertVehicleSelection"
|
||||||
alertClass="alert-danger"
|
alertClass="alert-danger"
|
||||||
|
|
@ -82,7 +71,6 @@
|
||||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||||
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
|
|
||||||
import vehicleQuestion from '@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue';
|
import vehicleQuestion from '@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue';
|
||||||
import alert from '@/ux-components/alert/alert.vue';
|
import alert from '@/ux-components/alert/alert.vue';
|
||||||
import { useMainStore } from '@/store';
|
import { useMainStore } from '@/store';
|
||||||
|
|
@ -107,7 +95,6 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
siteHeader,
|
siteHeader,
|
||||||
siteSubHeader,
|
siteSubHeader,
|
||||||
vehicleBanner,
|
|
||||||
siteFooter,
|
siteFooter,
|
||||||
// eslint-disable-next-line vue/no-reserved-component-names
|
// eslint-disable-next-line vue/no-reserved-component-names
|
||||||
Form,
|
Form,
|
||||||
|
|
@ -150,9 +137,6 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
displayGeneric() {
|
|
||||||
return !this.selectedStyle;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
selectedYear(value) {
|
selectedYear(value) {
|
||||||
|
|
@ -188,7 +172,7 @@ export default {
|
||||||
this.selectedModel,
|
this.selectedModel,
|
||||||
this.selectedStyle
|
this.selectedStyle
|
||||||
).then((result) => {
|
).then((result) => {
|
||||||
this.displayNoServiceAlert = !result.data.canSafeliteService;
|
this.displayNoServiceAlert = !result.data.canSafeliteService;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -210,7 +194,7 @@ export default {
|
||||||
this.selectedModel,
|
this.selectedModel,
|
||||||
this.selectedStyle
|
this.selectedStyle
|
||||||
).then((result) => {
|
).then((result) => {
|
||||||
this.displayNoServiceAlert = !result.data.canSafeliteService;
|
this.displayNoServiceAlert = !result.data.canSafeliteService;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -223,94 +207,101 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
navigateForward() {
|
navigateForward() {
|
||||||
this.mainStore.setVehicle().then(() => {
|
this.mainStore.setVehicle().then(
|
||||||
if (this.mainStore.isBailout) {
|
() => {
|
||||||
|
if (this.mainStore.isBailout) {
|
||||||
|
this.$router.navigate(
|
||||||
|
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||||
|
this.$route
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$router.navigate(
|
||||||
|
this.navigationScenarios.CLICKED_FORWARD,
|
||||||
|
this.$route
|
||||||
|
);
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
// eslint-disable-next-line max-len
|
||||||
|
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, this.mainStore.vehicle.model, this.mainStore.vehicle.style, error));
|
||||||
this.$router.navigate(
|
this.$router.navigate(
|
||||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||||
this.$route
|
this.$route
|
||||||
);
|
);
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
);
|
||||||
this.$router.navigate(
|
|
||||||
this.navigationScenarios.CLICKED_FORWARD,
|
|
||||||
this.$route
|
|
||||||
);
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, this.mainStore.vehicle.model, this.mainStore.vehicle.style, error));
|
|
||||||
this.$router.navigate(
|
|
||||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
|
||||||
this.$route
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
async updateYearValues() {
|
async updateYearValues() {
|
||||||
return this.mainStore.getVehicleYears().then((response) => {
|
return this.mainStore.getVehicleYears().then(
|
||||||
return response;
|
(response) => response,
|
||||||
},
|
(error) => {
|
||||||
(error) => {
|
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(null, null, null, null, error));
|
||||||
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(null, null, null, null, error));
|
this.$router.navigate(
|
||||||
this.$router.navigate(
|
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
this.$route
|
||||||
this.$route
|
);
|
||||||
);
|
}
|
||||||
});
|
);
|
||||||
},
|
},
|
||||||
async updateMakeValues() {
|
async updateMakeValues() {
|
||||||
return this.mainStore.getVehicleMakes().then((response) => {
|
return this.mainStore.getVehicleMakes().then(
|
||||||
return response;
|
(response) => response,
|
||||||
},
|
(error) => {
|
||||||
(error) => {
|
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, null, null, null, error));
|
||||||
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, null, null, null, error));
|
this.$router.navigate(
|
||||||
this.$router.navigate(
|
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
this.$route
|
||||||
this.$route
|
);
|
||||||
);
|
}
|
||||||
});
|
);
|
||||||
},
|
},
|
||||||
async updateModelValues() {
|
async updateModelValues() {
|
||||||
return this.mainStore.getVehicleModels().then((response) => {
|
return this.mainStore.getVehicleModels().then(
|
||||||
return response;
|
(response) => response,
|
||||||
},
|
(error) => {
|
||||||
(error) => {
|
// eslint-disable-next-line max-len
|
||||||
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, null, null, error));
|
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, null, null, error));
|
||||||
this.$router.navigate(
|
this.$router.navigate(
|
||||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||||
this.$route
|
this.$route
|
||||||
);
|
);
|
||||||
});
|
}
|
||||||
|
);
|
||||||
},
|
},
|
||||||
async updateStyleValues() {
|
async updateStyleValues() {
|
||||||
return this.mainStore.getVehicleStyles().then((response) => {
|
return this.mainStore.getVehicleStyles().then(
|
||||||
return response;
|
(response) => response,
|
||||||
},
|
(error) => {
|
||||||
(error) => {
|
// eslint-disable-next-line max-len
|
||||||
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, this.mainStore.vehicle.model, null, error));
|
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, this.mainStore.vehicle.model, null, error));
|
||||||
this.$router.navigate(
|
this.$router.navigate(
|
||||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||||
this.$route
|
this.$route
|
||||||
);
|
);
|
||||||
});
|
}
|
||||||
|
);
|
||||||
},
|
},
|
||||||
resetAlert() {
|
resetAlert() {
|
||||||
this.displayNoServiceAlert = false;
|
this.displayNoServiceAlert = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.iss-heritage-container-width {
|
||||||
|
.vehicle-selection-container {
|
||||||
|
position: relative;
|
||||||
|
min-height: 1px;
|
||||||
|
padding-left: .9375rem;
|
||||||
|
padding-right: .9375rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.select-car-form {
|
.select-car-form {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.siteSubHeader {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subheader-secondary {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue