64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
|
<div class="funnel-header d-flex justify-content-center align-items-center flex-column" v-if="imageSrc">
|
|
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
|
|
</div>
|
|
<alert class="position-absolute mt-6 w-100" v-if="displayGlobalAlert" :alertClass="globalAlertMessage.type" :alertHeadline="globalAlertMessage.messageCopy" :alertCopy="globalAlertMessage.messageHeadline" v-bind:isDismissible="globalAlertMessage.isDismissible" />
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import alert from "@/ux-components/alert/alert";
|
|
import eventBus from "@/helpers/event-bus/event-bus";
|
|
import {
|
|
globalEvents,
|
|
} from "@/constants/events";
|
|
|
|
export default {
|
|
name: "funnel-header",
|
|
data() {
|
|
return {
|
|
imageSrc: "",
|
|
displayGlobalAlert: false,
|
|
globalAlertMessage: {
|
|
isDismissible: false,
|
|
messageCopy: "",
|
|
messageHeadline: "",
|
|
type: "",
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
initializeComponent(cmsContent) {
|
|
this.imageSrc = cmsContent.LogoImage;
|
|
},
|
|
},
|
|
components: {
|
|
alert,
|
|
},
|
|
mounted() {
|
|
|
|
// Check if alert event is on the bus
|
|
const alertEvent = eventBus.readAndPopEventFromBus(
|
|
globalEvents.Categories.GLOBAL_ALERT,
|
|
globalEvents.SubCategories.PAGE_NOT_FOUND
|
|
);
|
|
|
|
// If alert event is on the bus, then display the alert
|
|
if (alertEvent !== undefined) {
|
|
this.displayGlobalAlert = true;
|
|
this.globalAlertMessage = alertEvent;
|
|
}
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.funnel-header {
|
|
height: 56px;
|
|
}
|
|
|
|
.logo-image {
|
|
max-width: 78px;
|
|
}
|
|
</style>
|