94 lines
2.7 KiB
Vue
94 lines
2.7 KiB
Vue
<!-- eslint-disable vue/no-v-html -->
|
|
<template>
|
|
<transition
|
|
name="fade"
|
|
mode="out-in">
|
|
<div class="cancel-claim-modal-container">
|
|
<modal
|
|
ref="cancelClaimModal"
|
|
:headerText="modalHeaderText"
|
|
:footerButtonText="modalFooterText"
|
|
additionalClassesString="navigation-link"
|
|
:useDefaultButton="false"
|
|
@isModalOpened="setModalStatus"
|
|
@footerButtonEvent="cancelClaimConfirmation">
|
|
<div v-html="modalBodyText"></div>
|
|
<button
|
|
id="btnContinueReferral"
|
|
type="button"
|
|
:aria-disabled="false"
|
|
class="btn btn-primary btn-override
|
|
align-items-center justify-content-center d-inline-flex mt-4 py-3 px-4 delay w-100"
|
|
@click="returnToClaim">
|
|
{{ modalBodyText2 }}
|
|
</button>
|
|
</modal>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import modal from '@/digital-components/modal/modal.vue';
|
|
|
|
export default {
|
|
name: 'cancel-claim-modal',
|
|
components: {
|
|
modal
|
|
},
|
|
emits: ['cancel-claim-confirmation', 'return-to-claim'],
|
|
data() {
|
|
return {
|
|
isModalOpened: false
|
|
};
|
|
},
|
|
computed: {
|
|
modalBodyText() {
|
|
return this.getCmsContent('CancelClaimModal', 'BodyText');
|
|
},
|
|
modalBodyText2() {
|
|
return this.getCmsContent('CancelClaimModal', 'BodyText2');
|
|
},
|
|
modalHeaderText() {
|
|
return this.getCmsContent('CancelClaimModal', 'HeaderText');
|
|
},
|
|
modalFooterText() {
|
|
return this.getCmsContent('CancelClaimModal', 'FooterText');
|
|
}
|
|
},
|
|
methods: {
|
|
openModal() {
|
|
this.$refs.cancelClaimModal.openModal();
|
|
},
|
|
setModalStatus(isOpened) {
|
|
this.isModalOpened = isOpened;
|
|
},
|
|
closeModal() {
|
|
this.$refs.cancelClaimModal.closeModal();
|
|
},
|
|
cancelClaimConfirmation() {
|
|
this.$emit('cancel-claim-confirmation');
|
|
},
|
|
returnToClaim() {
|
|
this.$emit('return-to-claim');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn {
|
|
&.btn-primary {
|
|
position: relative;
|
|
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
|
|
border: none;
|
|
border-radius: $border-radius-lg;
|
|
color: $white;
|
|
justify-content: center;
|
|
font-weight: $font-weight-bold;
|
|
letter-spacing: inherit;
|
|
@media (hover: hover) {
|
|
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
|
|
}
|
|
}
|
|
}
|
|
</style>
|