91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
<template>
|
|
<div class="steering-modal-container">
|
|
<modal
|
|
:ref="ModalName"
|
|
:modalId="ModalName"
|
|
:footerButtonText="ModalCloseButtonText"
|
|
@footerButtonEvent="footerButtonClick">
|
|
<h5 class="text-center mb-4 headline-text">
|
|
{{ ModalHeadline }}
|
|
</h5>
|
|
<div>
|
|
<div
|
|
class="mb-4"
|
|
v-html="ModalBodyText"></div>
|
|
<div
|
|
class="mb-4"
|
|
v-if="ModalSubBodyText"
|
|
v-html="ModalSubBodyText"></div>
|
|
</div>
|
|
</modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import modal from '@/digital-components/modal/modal.vue';
|
|
import { processIfStatements } from '@/helpers/cms-content-helper';
|
|
import states from '@/constants/states';
|
|
|
|
export default {
|
|
name: 'content-group-modal',
|
|
components: {
|
|
modal
|
|
},
|
|
props: {
|
|
cmsWidgetName: String
|
|
},
|
|
computed: {
|
|
ModalName() {
|
|
return this.cmsWidgetName;
|
|
},
|
|
ModalHeadline() {
|
|
const header = this.getCmsContent(this.cmsWidgetName, 'HeaderText');
|
|
return header.replace('{custom:state}', states[this.mainStore.order.customer.address.state]);
|
|
},
|
|
ModalSubheadertext() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
|
|
},
|
|
ModalBodyText() {
|
|
const bodyText = this.getCmsContent(this.cmsWidgetName, 'BodyText');
|
|
return processIfStatements(bodyText, 'custom', this.getStateSpecificText);
|
|
},
|
|
ModalSubBodyText() {
|
|
const bodyText = this.getCmsContent(this.cmsWidgetName, 'BodyText2');
|
|
return processIfStatements(bodyText, 'custom', this.getStateSpecificText);
|
|
},
|
|
ModalImage() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'Image');
|
|
},
|
|
ModalCloseButtonText() {
|
|
return this.getCmsContent(this.cmsWidgetName, 'FooterText');
|
|
}
|
|
},
|
|
methods: {
|
|
openModal() {
|
|
this.pushEventToGA('prefered_provider', 'display_modal', 'right_to_choose', true);
|
|
this.$refs[this.ModalName].openModal();
|
|
},
|
|
|
|
footerButtonClick() {
|
|
this.$refs[this.ModalName].closeModal();
|
|
},
|
|
|
|
getStateSpecificText(value) {
|
|
return this.mainStore.order.customer.address.state?.toLowerCase() === value?.toLowerCase();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.modal) {
|
|
.modal-footer {
|
|
justify-content: center;
|
|
button {
|
|
background-color: $heritage-blue-secondary;
|
|
color: $white;
|
|
width: 71%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|