95 lines
No EOL
2.5 KiB
Vue
95 lines
No EOL
2.5 KiB
Vue
<template>
|
|
<buttonQuestion
|
|
class="address-vehicles-question"
|
|
buttonType="listButton"
|
|
groupName="ChooseAddressVehicle"
|
|
:questionText="questionText"
|
|
:answers="vehicles"
|
|
v-model="selectedVehicleVin"
|
|
isRequired
|
|
:validation-rules="validationRules"
|
|
:valueToLogType="ValueToLogTypes.LAST_5"
|
|
/>
|
|
<alert ref="differentVehicleAlert"
|
|
v-if="isCarIdDifferent"
|
|
class="my-3"
|
|
cmsWidgetName="FoundWindshield"
|
|
:manualHeadline="differentVehicleAlertHeader"
|
|
:manualCopy="differentVehicleAlertBody"
|
|
alertClass="alert-warning"
|
|
v-bind:isDismissible="false"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonQuestion from "@/common-components/button-question/button-question";
|
|
import alert from "@/ux-components/alert/alert";
|
|
|
|
// Supporting files
|
|
import { getDamageString } from "@/helpers/damage-helper";
|
|
|
|
export default {
|
|
name: "address-vehicles-question",
|
|
props: {
|
|
vehicles: Array,
|
|
modelValue: String,
|
|
cmsWidgetName: String,
|
|
validationRules: String,
|
|
isCarIdDifferent: Boolean,
|
|
},
|
|
computed: {
|
|
differentVehicleAlertHeader() {
|
|
return this.getCmsContent("FoundWindshield", "HeadlineText").replaceAll("{custom:damage}", getDamageString());
|
|
},
|
|
differentVehicleAlertBody() {
|
|
return this.getCmsContent(
|
|
"FoundWindshield",
|
|
"BodyText"
|
|
)
|
|
.replaceAll("{custom:damage}", getDamageString())
|
|
.replaceAll(
|
|
"{custom:vinlookupYear}",
|
|
this.selectedVehicle?.vehicle.year
|
|
)
|
|
.replaceAll(
|
|
"{custom:vinlookupMake}",
|
|
this.selectedVehicle?.vehicle.make
|
|
)
|
|
.replaceAll(
|
|
"{custom:vinlookupModel}",
|
|
this.selectedVehicle?.vehicle.model
|
|
);
|
|
},
|
|
questionText() {
|
|
return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
|
|
},
|
|
selectedVehicleVin: {
|
|
get: function() {
|
|
return this.modelValue;
|
|
},
|
|
set: function(newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
}
|
|
},
|
|
selectedVehicle() { // this computed is only needed for the computed differentVehicleAlertBody text above
|
|
return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVin[this.selectedVehicleVin.length-1] );
|
|
},
|
|
},
|
|
components: {
|
|
buttonQuestion,
|
|
alert,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.address-vehicles-question {
|
|
.question-text {
|
|
margin-bottom: .5rem;
|
|
|
|
& > span {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
</style> |