added missing alert to vin-lookup
This commit is contained in:
parent
2d73c30c4d
commit
162743b75f
3 changed files with 37 additions and 0 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue