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