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

add big truck alert to vehicle selection page, get vehicle info

Browse source
This commit is contained in:
Katie Kroell 2025-09-08 10:38:19 -04:00
parent f4eb96ecb3
commit f0413c2a90
1 changed files with 42 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/layouts/vehicle-selection/vehicle-selection.vue
View file

@ -52,18 +52,23 @@
: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"
class="mt-5"
cmsWidgetName="AlertVehicleSelection"
alertClass="alert-danger"
:isDismissable="false" />
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
@ForwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
@ -79,6 +84,7 @@ 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';
// Supporting files
@ -105,7 +111,8 @@ export default {
siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
vehicleQuestion
vehicleQuestion,
alert
},
mixins: [baseFormMixin],
@ -138,7 +145,8 @@ export default {
selectedYear: year,
selectedMake: make,
selectedModel: model,
selectedStyle: style
selectedStyle: style,
displayNoServiceAlert: false
};
},
computed: {
@ -146,9 +154,9 @@ export default {
return !this.selectedStyle;
}
},
watch: {
selectedYear(value) {
this.resetAlert();
this.mainStore.updateVehicleYear(value);
this.$refs.vehicleMakeQuestion.clearValues();
if (value) {
@ -156,6 +164,7 @@ export default {
}
},
selectedMake(value) {
this.resetAlert();
this.mainStore.updateVehicleMake(value);
this.$refs.vehicleModelQuestion.clearValues();
if (value) {
@ -163,6 +172,7 @@ export default {
}
},
selectedModel(value) {
this.resetAlert();
this.mainStore.updateVehicleModel(value);
this.$refs.vehicleStyleQuestion.clearValues();
if (value) {
@ -170,11 +180,16 @@ export default {
}
},
selectedStyle(value) {
this.resetAlert();
this.mainStore.updateVehicleStyle(value);
this.mainStore.setVehicle();
this.getVehicle(this.selectedYear, this.selectedMake, this.selectedModel, this.selectedStyle);
}
},
mounted() {
this.$refs.vehicleYearQuestion.clearValues();
this.$refs.vehicleMakeQuestion.clearValues();
this.$refs.vehicleModelQuestion.clearValues();
this.$refs.vehicleStyleQuestion.clearValues();
this.$refs.vehicleYearQuestion.getNewValues();
if (this.selectedYear) {
this.$refs.vehicleMakeQuestion.getNewValues();
@ -185,6 +200,9 @@ export default {
if (this.selectedModel) {
this.$refs.vehicleStyleQuestion.getNewValues();
}
if (this.selectedStyle) {
this.getVehicle(this.selectedYear, this.selectedMake, this.selectedModel, this.selectedStyle);
}
},
methods: {
arePagePrerequisitesValid() {
@ -196,6 +214,10 @@ export default {
navigateForward() {
this.mainStore.setVehicle().then(() => {
if (this.isBigTruck && !this.canSafeliteService) {
this.$refs.vehicleSelectionAlert.show();
return;
}
if (this.mainStore.isBailout) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
@ -264,7 +286,19 @@ export default {
this.$route
);
});
}
},
async getVehicle() {
const result = await this.mainStore.setVehicle(
this.selectedYear,
this.selectedMake,
this.selectedModel,
this.selectedStyle
);
this.displayNoServiceAlert = result.data.isBigTruck && !result.data.canSafeliteService;
},
resetAlert() {
this.displayNoServiceAlert = false;
}
}
};
</script>