95 lines
2.3 KiB
Vue
95 lines
2.3 KiB
Vue
<template>
|
|
<div class="recal-modal-container">
|
|
<modal
|
|
ref="recalModal"
|
|
:footerButtonText="modalCloseButtonText"
|
|
@footerButtonEvent="footerButtonClick">
|
|
<h5
|
|
class="header-text"
|
|
v-html="modalHeaderText"></h5>
|
|
<img
|
|
:src="modalImage"
|
|
class="mw-100 d-flex"
|
|
alt="" />
|
|
<div v-html="modalBodyText" class="recal-modal-body"></div>
|
|
</modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import modal from '@/digital-components/modal/modal.vue';
|
|
|
|
export default {
|
|
name: 'recal-modal',
|
|
components: {
|
|
modal
|
|
},
|
|
props: {
|
|
cmsWidgetName: {
|
|
type: String,
|
|
default: 'RecalModal'
|
|
}
|
|
},
|
|
computed: {
|
|
modalBodyText() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'BodyText').replaceAll('{custom:vehicleMake}', this.vehicleMake);
|
|
},
|
|
modalHeaderText() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
|
|
},
|
|
modalImage() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'Image');
|
|
},
|
|
modalCloseButtonText() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'FooterText');
|
|
},
|
|
vehicleMake() {
|
|
return this.mainStore.order.vehicle.make.toUpperCase();
|
|
}
|
|
},
|
|
methods: {
|
|
openModal() {
|
|
this.$refs.recalModal.openModal();
|
|
},
|
|
footerButtonClick() {
|
|
this.$refs.recalModal.closeModal();
|
|
},
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.modal) {
|
|
&.modal-component {
|
|
.modal-dialog {
|
|
.modal-content {
|
|
.modal-body {
|
|
padding-left: 1.25rem;
|
|
padding-right: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
.modal-footer {
|
|
button {
|
|
&:hover {
|
|
background-color: $white;
|
|
color: #167cac;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.recal-modal-body {
|
|
padding: 10px 0 10px 0;
|
|
p:first-child {
|
|
margin-bottom: 10px;
|
|
}
|
|
p {
|
|
strong {
|
|
font-weight: 600;
|
|
color: $black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|