111 lines
2.9 KiB
Vue
111 lines
2.9 KiB
Vue
<template>
|
|
<modal
|
|
:ref="ModalName"
|
|
:modalId="ModalName"
|
|
:onModalClosedCallback="onModalClosed"
|
|
:footerButtonText="ModalCloseButtonText"
|
|
@footerButtonEvent="footerButtonClick">
|
|
<h5 class="text-center mb-4">
|
|
{{ ModalHeadline }}
|
|
</h5>
|
|
<div>
|
|
<div
|
|
class="mb-4"
|
|
v-html="ModalBodyText"></div>
|
|
<a
|
|
v-if="showSteeringLink"
|
|
class="modal-text"
|
|
@click="openSteeringModal"
|
|
v-html="ModalSubBodyText">
|
|
</a>
|
|
</div>
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
import modal from '@/digital-components/modal/modal.vue';
|
|
import states from '@/constants/states';
|
|
|
|
export default {
|
|
name: 'content-group-modal',
|
|
components: {
|
|
modal
|
|
},
|
|
props: {
|
|
cmsWidgetName: String,
|
|
showSteeringLink: Boolean
|
|
},
|
|
emits: ['openSteering'],
|
|
data() {
|
|
return {
|
|
clickedSteeringLink: false
|
|
};
|
|
},
|
|
computed: {
|
|
ModalName() {
|
|
return this.cmsWidgetName;
|
|
},
|
|
ModalHeadline() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
|
|
},
|
|
ModalSubheadertext() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
|
|
},
|
|
ModalBodyText() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'BodyText');
|
|
},
|
|
ModalSubBodyText() {
|
|
const header = this.getCmsContent(this.cmsWidgetName, 'BodyText2');
|
|
return header.replace('{custom:state}', states[this.mainStore.order.customer.address.state]);
|
|
},
|
|
ModalImage() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'Image');
|
|
},
|
|
ModalCloseButtonText() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'FooterText');
|
|
}
|
|
},
|
|
methods: {
|
|
openModal() {
|
|
this.$refs[this.ModalName].openModal();
|
|
},
|
|
onModalClosed() {
|
|
if (this.clickedSteeringLink) {
|
|
this.$emit('openSteering');
|
|
this.clickedSteeringLink = false;
|
|
}
|
|
},
|
|
footerButtonClick() {
|
|
this.$refs[this.ModalName].closeModal();
|
|
},
|
|
openSteeringModal() {
|
|
this.clickedSteeringLink = true;
|
|
this.$refs[this.ModalName].closeModal();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal {
|
|
&.modal-component {
|
|
.modal-dialog {
|
|
.modal-content {
|
|
.modal-body {
|
|
.modal-sub-body {
|
|
color: $gray-600;
|
|
}
|
|
ul {
|
|
margin-bottom: 0;
|
|
}
|
|
p {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|