156 lines
4.5 KiB
Vue
156 lines
4.5 KiB
Vue
<template>
|
|
<transition
|
|
name="fade"
|
|
mode="out-in">
|
|
<div class="continue-modal-container">
|
|
<modal
|
|
ref="continueModal"
|
|
:headerText="modalHeaderText"
|
|
:footerButtonText="modalFooterText"
|
|
buttonVariant="primary"
|
|
:displayCloseButton="false"
|
|
@isModalOpened="setModalStatus"
|
|
@footerButtonEvent="startNewReferral">
|
|
<p class="continue-subheader">
|
|
{{ modalSubHeaderText }}
|
|
</p>
|
|
<buttonMain
|
|
id="btnContinueReferral"
|
|
variant="success"
|
|
class="continue-btn w-100"
|
|
:buttonText="modalBodyText"
|
|
@click-event="continueReferral">
|
|
</buttonMain>
|
|
<div class="or-container">
|
|
<hr/>
|
|
<span>or</span>
|
|
</div>
|
|
</modal>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import modal from '@/digital-components/modal/modal.vue';
|
|
import { getISSCookie } from '@/helpers/cookie-helper.js';
|
|
import ButtonMain from '@/ux-components/button-main/button-main.vue';
|
|
|
|
export default {
|
|
name: 'continue-modal',
|
|
components: {
|
|
ButtonMain,
|
|
modal
|
|
},
|
|
emits: ['continue-previous-referral', 'start-new-referral'],
|
|
data() {
|
|
return {
|
|
isModalOpened: false
|
|
};
|
|
},
|
|
computed: {
|
|
getMakeModelString() {
|
|
const cookie = getISSCookie();
|
|
return cookie ? `${cookie.VehicleMake} ${cookie.VehicleModel}` : '';
|
|
},
|
|
modalBodyText() {
|
|
return this.getCmsContent('ContinueReferralModalWidget', 'BodyText');
|
|
},
|
|
modalHeaderText() {
|
|
return this.getCmsContent('ContinueReferralModalWidget', 'HeaderText');
|
|
},
|
|
modalFooterText() {
|
|
return this.getCmsContent('ContinueReferralModalWidget', 'FooterText');
|
|
},
|
|
modalSubHeaderText() {
|
|
return this.getCmsContent('ContinueReferralModalWidget', 'SubheaderText')
|
|
.replaceAll('{custom:mmFound}', this.getMakeModelString.toUpperCase());
|
|
},
|
|
accountName() {
|
|
return this.mainStore.issConfig.clientName.replaceAll(" ", "").replaceAll("&", "amp");
|
|
}
|
|
},
|
|
methods: {
|
|
openModal() {
|
|
this.pushEventToGA("existing_claim", "pop_up_displayed", this.accountName, true);
|
|
this.$refs.continueModal.openModal();
|
|
},
|
|
setModalStatus(isOpened) {
|
|
this.isModalOpened = isOpened;
|
|
},
|
|
closeModal() {
|
|
this.$refs.continueModal.closeModal();
|
|
},
|
|
continueReferral() {
|
|
this.pushEventToGA("existing_claim", "finish_claim", this.accountName, true);
|
|
this.$emit('continue-previous-referral');
|
|
},
|
|
startNewReferral() {
|
|
this.pushEventToGA("existing_claim", "start_new_claim", this.accountName, true);
|
|
this.$emit('start-new-referral');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.continue-modal-container {
|
|
.continue-subheader {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.continue-btn {
|
|
background-color: #098649;
|
|
}
|
|
|
|
.or-container {
|
|
position: relative;
|
|
hr {
|
|
margin: 1.875rem 0 1.25rem;
|
|
}
|
|
span {
|
|
position: absolute;
|
|
top: -0.75rem;
|
|
left: 50%;
|
|
margin-left: -1.625rem;
|
|
padding: 0 1.125rem;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
:deep(.modal) {
|
|
.modal-dialog {
|
|
.modal-content {
|
|
.modal-header {
|
|
padding: 1.25rem 1rem .625rem;
|
|
|
|
.modal-title {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 0rem 1rem;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 0rem 1rem 1rem;
|
|
|
|
button {
|
|
background-color: $heritage-blue-primary;
|
|
color: $white;
|
|
font-weight: 600;
|
|
margin-bottom: 1.25rem;
|
|
|
|
&:hover {
|
|
background-color: #00559e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include media-breakpoint-down(md) {
|
|
margin: 1.625rem 1rem 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|