115 lines
4 KiB
Vue
115 lines
4 KiB
Vue
<template>
|
|
<div
|
|
class="funnel-header d-flex justify-content-center align-items-center flex-column"
|
|
v-if="imageSrc">
|
|
<!-- HIDDEN FOR 05.08 <salesforceWebchat hideSalesforceWebchatLaunchButton />-->
|
|
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
|
|
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
|
<menuModal />
|
|
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
|
<progressBar />
|
|
</div>
|
|
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
|
|
<transition name="fade" mode="out-in">
|
|
<alert
|
|
v-if="globalAlert.displayAlert"
|
|
class="rounded-0 w-100 border-0 shadow-sm"
|
|
cmsWidgetName="GlobalAlert"
|
|
:manualHeadline="globalAlert.messageHeadline"
|
|
:manualCopy="globalAlert.messageCopy"
|
|
:alertClass="globalAlert.type"
|
|
v-bind:isDismissible="globalAlert.isDismissible" />
|
|
</transition>
|
|
</template>
|
|
</template>
|
|
|
|
<script>
|
|
import alert from "@/ux-components/alert/alert";
|
|
import eventBus from "@/helpers/event-bus/event-bus";
|
|
import { globalEvents } from "@/constants/events";
|
|
import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
|
|
//import salesforceWebchat from "../../digital-components/salesforce-webchat/salesforce-webchat.vue";
|
|
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
|
|
|
|
// Constants
|
|
const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
|
|
|
|
export default {
|
|
name: "funnel-header",
|
|
data() {
|
|
return {
|
|
globalAlertMessages: [],
|
|
};
|
|
},
|
|
props: {
|
|
cmsWidgetName: String,
|
|
hideSalesforceWebchatLaunchButton: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
imageSrc() {
|
|
return this.getCmsContent(this.cmsWidgetName, "LogoImage");
|
|
},
|
|
},
|
|
methods: {
|
|
pushGlobalAlert(alertToPush, isAutoDismissing) {
|
|
alertToPush.displayAlert = true;
|
|
alertToPush.id = crypto.randomUUID();
|
|
if (isAutoDismissing) {
|
|
setTimeout(() => {
|
|
alertToPush.displayAlert = false;
|
|
// force a re-evaluation of the globalAlertMessages to detect the v-if change
|
|
this.globalAlertMessages = this.globalAlertMessages.splice(0);
|
|
}, ALERT_DURATION);
|
|
}
|
|
this.globalAlertMessages.push(alertToPush);
|
|
},
|
|
},
|
|
components: {
|
|
alert,
|
|
menuModal,
|
|
//salesforceWebchat,
|
|
progressBar,
|
|
},
|
|
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) {
|
|
alertEvent.displayAlert = true;
|
|
this.globalAlertMessages.push(alertEvent);
|
|
}
|
|
|
|
//Uknown alerts most likely were added by a failed api call in global-methods
|
|
const unknownAlertEvent = eventBus.readAndPopEventFromBus(
|
|
globalEvents.Categories.GLOBAL_ALERT,
|
|
globalEvents.SubCategories.UNKNOWN_ERROR
|
|
);
|
|
|
|
if (unknownAlertEvent !== undefined) {
|
|
unknownAlertEvent.displayAlert = true;
|
|
this.globalAlertMessages.push(unknownAlertEvent);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.menu-modal-container) {
|
|
display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
|
|
}
|
|
.funnel-header {
|
|
position: relative;
|
|
padding-top: 0.97rem;
|
|
}
|
|
|
|
.logo-image {
|
|
width: auto;
|
|
height: 1.1875rem;
|
|
}
|
|
</style>
|