added missing alert to vin-lookup

This commit is contained in:
Kroell 2023-03-09 12:08:41 -05:00
parent 2d73c30c4d
commit 162743b75f
3 changed files with 37 additions and 0 deletions

View file

@ -1,6 +1,7 @@
const vehicleLookupAlertTypes = Object.freeze({ const vehicleLookupAlertTypes = Object.freeze({
NOT_FOUND: 'notFound', NOT_FOUND: 'notFound',
NOT_MATCHED: 'notMatched', NOT_MATCHED: 'notMatched',
PERFECT_MATCH: 'perfectMatch',
}); });
export default vehicleLookupAlertTypes; export default vehicleLookupAlertTypes;

View file

@ -0,0 +1,27 @@
<template>
<alert
alertClass="alert-success"
cmsWidgetName="AlertPerfectMatchInsuranceNotVerified"
id="perfect-match-alert"
aria-label="perfect-match-alert"
/>
</template>
<script>
import alert from '@/ux-components/alert/alert.vue';
export default {
name: 'perfect-match-alert',
components: {
alert,
},
};
</script>
<style>
/**
Override wrong margin-bottom rule in the Alert component.
*/
#perfect-match-found-alert p:last-of-type {
margin-bottom: 0 !important;
}
</style>

View file

@ -9,18 +9,24 @@
<vehicleNotMatchedAlert <vehicleNotMatchedAlert
v-else-if="isVehicleNotMatchedVisible" v-else-if="isVehicleNotMatchedVisible"
/> />
<perfectMatchAlert
v-else-if="isPerfectMatchVisible"
/>
</div> </div>
</template> </template>
<script> <script>
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types'; import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue'; import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue'; import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
import perfectMatchAlert from './perfect-match-alert/perfect-match-alert.vue';
export default { export default {
name: 'vin-lookup-alerts', name: 'vin-lookup-alerts',
components: { components: {
vehicleNotFoundAlert, vehicleNotFoundAlert,
vehicleNotMatchedAlert, vehicleNotMatchedAlert,
perfectMatchAlert,
}, },
props: { props: {
activeAlertType: { activeAlertType: {
@ -39,6 +45,9 @@ export default {
isVehicleNotMatchedVisible() { isVehicleNotMatchedVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED; return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
}, },
isPerfectMatchVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.PERFECT_MATCH;
},
wrapperCssClass() { wrapperCssClass() {
return { return {
'mb-5': this.activeAlertType !== null, 'mb-5': this.activeAlertType !== null,