104 lines
No EOL
3 KiB
Vue
104 lines
No EOL
3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="site-header d-flex justify-content-center align-items-center flex-column">
|
|
<img id="siteHeaderImage" class="img-fluid" :src="imageSrc" :alt="altText" />
|
|
<menuModal/>
|
|
</div>
|
|
<alert
|
|
v-if="displayGlobalAlert"
|
|
class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0"
|
|
cmsWidgetName="GlobalAlert"
|
|
:manualHeadline="globalAlertMessage.messageHeadline"
|
|
:manualCopy="globalAlertMessage.messageCopy"
|
|
:alertClass="globalAlertMessage.type"
|
|
v-bind:isDismissible="globalAlertMessage.isDismissible" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import menuModal from "@/common-components/site-header/menu-modal/menu-modal";
|
|
import alert from "@/ux-components/alert/alert";
|
|
import eventBus from "@/helpers/event-bus/event-bus";
|
|
import { globalEvents } from "@/constants/events";
|
|
|
|
export default({
|
|
name: "siteHeader",
|
|
data() {
|
|
return {
|
|
displayGlobalAlert: false,
|
|
globalAlertMessage: {
|
|
isDismissible: false,
|
|
messageCopy: "",
|
|
messageHeadline: "",
|
|
type: "",
|
|
},
|
|
};
|
|
},
|
|
props: {
|
|
cmsWidgetName: String,
|
|
},
|
|
computed: {
|
|
imageSrc()
|
|
{
|
|
return this.answersToDisplay().AnswerImageUrl;
|
|
},
|
|
altText()
|
|
{
|
|
return this.answersToDisplay().AltText;
|
|
},
|
|
hexCode()
|
|
{
|
|
return this.answersToDisplay().HexCode;
|
|
},
|
|
headerAnswers()
|
|
{
|
|
return this.getCmsContent(this.cmsWidgetName, "Answers")
|
|
}
|
|
},
|
|
methods:
|
|
{
|
|
answersToDisplay()
|
|
{
|
|
const filteredAnswers = Array.isArray(this.headerAnswers)
|
|
? this.headerAnswers.filter((ans) => {
|
|
const accountNumber = ans.AccountNumber;
|
|
return (
|
|
accountNumber === this.mainStore.order.accountNumber
|
|
);
|
|
})
|
|
: [];
|
|
return filteredAnswers;
|
|
},
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
components: {
|
|
menuModal,
|
|
alert
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.site-header {
|
|
padding: 0.97rem 0;
|
|
}
|
|
.logo-image {
|
|
max-width: 78px;
|
|
}
|
|
.alert {
|
|
left: 0;
|
|
top: 72px;
|
|
}
|
|
</style> |