109 lines
3.3 KiB
Vue
109 lines
3.3 KiB
Vue
<template>
|
|
<transition
|
|
name="fade"
|
|
mode="out-in">
|
|
<div class="continue-modal-container">
|
|
<modal
|
|
ref="continueModal"
|
|
:headerText="modalHeaderText"
|
|
:footerButtonText="modalFooterText"
|
|
@isModalOpened="setModalStatus"
|
|
@footerButtonEvent="startNewReferral">
|
|
<p class="mb-2 subheader-text text-center">
|
|
{{ modalSubHeaderText }}
|
|
</p>
|
|
<button
|
|
id="btnContinueReferral"
|
|
type="button"
|
|
class="btn btn-white-blue continue-referral
|
|
align-items-center justify-content-center d-inline-flex mt-2 py-3 px-4 delay w-100"
|
|
@click="continueReferral">
|
|
{{ modalBodyText }}
|
|
<loader
|
|
v-if="isLoaderDisplayed"
|
|
class="ms-2 button-loader" />
|
|
</button>
|
|
</modal>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import loader from '@/ux-components/loader/loader.vue';
|
|
import modal from '@/digital-components/modal/modal.vue';
|
|
import { getISSCookie } from '@/helpers/cookie-helper.js';
|
|
|
|
export default {
|
|
name: 'continue-modal',
|
|
components: {
|
|
loader,
|
|
modal
|
|
},
|
|
props: {
|
|
loaderColor: String,
|
|
loaderPosition: String
|
|
},
|
|
emits: ['continue-previous-referral', 'start-new-referral'],
|
|
data() {
|
|
return {
|
|
isLoaderDisplayed: false,
|
|
isModalOpened: false
|
|
};
|
|
},
|
|
computed: {
|
|
getMakeModelString() {
|
|
const cookie = getISSCookie();
|
|
return `${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);
|
|
}
|
|
},
|
|
methods: {
|
|
openModal() {
|
|
this.$refs.continueModal.openModal();
|
|
},
|
|
removeLoader() {
|
|
this.isLoaderDisplayed = false;
|
|
},
|
|
setModalStatus(isOpened) {
|
|
this.isModalOpened = isOpened;
|
|
},
|
|
closeModal() {
|
|
this.$refs.continueModal.closeModal();
|
|
},
|
|
continueReferral() {
|
|
this.isLoaderDisplayed = true;
|
|
this.$emit('continue-previous-referral');
|
|
},
|
|
startNewReferral() {
|
|
this.$emit('start-new-referral');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn-white-blue {
|
|
border-radius: 0.5rem;
|
|
border-color: $blue;
|
|
color: $blue;
|
|
font-size: 1rem;
|
|
font-weight: $font-weight-bold;
|
|
line-height: 1.5rem;
|
|
background-color: #ffffff;
|
|
|
|
--bs-btn-focus-shadow-rgb: 218, 72, 62;
|
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
}
|
|
</style>
|