CSR-319: add new alert error if no windshield replace option is available

This commit is contained in:
Adam Caouette 2022-03-08 17:36:34 -05:00
parent 00e62c4240
commit a3c8998345

View file

@ -1,12 +1,20 @@
<template>
<div class="windshield-options">
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation
:suppressError="hasRepairReplaceConflict"
:suppressError="hasRepairReplaceConflict || showNoReplaceAvailableError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValues"
validationRules="windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion"
:validationRules="isWindshieldReplaceAvailable ? 'windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion' : 'windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion|repairOnly'"
/>
<alert
class="my-3"
v-show="showNoReplaceAvailableError"
alertClass="alert-danger"
alertHeadline="Service not available"
alertCopy="We're sorry, but we currently offer only repair service for your vehicle type. Need help with next steps? Call us at 800-394-0288."
:isDismissible="false"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
:isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
groupName="WindshieldChipCountQuestion"
@ -27,6 +35,8 @@
import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import alert from "@/ux-components/alert/alert";
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
@ -47,9 +57,22 @@ defineRule("checkForRepairAndReplace", (value, [other]) => {
return true;
});
defineRule("repairOnly", (value) => {
if (value.toString().toUpperCase() === 'REPAIR') {
return true;
}
return false;
});
export default ({
name: "windshieldOptions",
data(){
return {
isWindshieldReplaceAvailable: Boolean,
}
},
props: {
modelValue: Array,
selectedDamageLocations: Array,
@ -63,6 +86,8 @@ export default ({
this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
this.isWindshieldReplaceAvailable = !(Array.isArray(windshieldAvailableReplacementOptions) && windshieldAvailableReplacementOptions.length < 1);
},
getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
return {
@ -121,11 +146,18 @@ export default ({
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
},
showNoReplaceAvailableError() {
if (this.isReplaceOptionSelected && !this.isWindshieldReplaceAvailable) {
return true;
}
return false;
},
},
components: {
windshieldDamageTypeQuestion,
windshieldChipCountQuestion,
replaceOptionsQuestion
replaceOptionsQuestion,
alert,
},
})
</script>