INSR-10489: Add benefit-recal-modal to schedule-page
This commit is contained in:
Alex Humphries
parent
8755ce6ba6
commit
3edc040b6a
2 changed files with 194 additions and 3 deletions
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<div class="benefit-recal-modal-container">
|
||||
<modal
|
||||
class="benefit-recal-modal"
|
||||
ref="benefitRecalModal"
|
||||
:displayCloseButton="true"
|
||||
:displayFooterButton="false"
|
||||
:closeLinkText="modalCloseLinkText"
|
||||
:footerButtonText="modalFooterButtonText"
|
||||
:onModalClosedCallback="onModalClosed">
|
||||
<img
|
||||
:src="modalImage"
|
||||
class="recal-image"
|
||||
alt="" />
|
||||
<h5
|
||||
class="header-text"
|
||||
v-html="modalHeaderText"></h5>
|
||||
<div v-html="modalBodyText" class="recal-modal-body"></div>
|
||||
<div class="recal-modal-footer">
|
||||
<buttonMain
|
||||
id="modalbtn"
|
||||
ref="modalButtonMain"
|
||||
class="w-100"
|
||||
:buttonText="modalFooterButtonText"
|
||||
@clickEvent="continueWithSafeliteClicked" />
|
||||
<textLink
|
||||
class="mt-4 mb-0"
|
||||
linkType="text"
|
||||
:text="modalCloseLinkText"
|
||||
href="#!"
|
||||
@click="scheduleElsewhereClicked" />
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import widgetFields from '@/constants/cms-widget-fields';
|
||||
import modal from '@/digital-components/modal/modal.vue';
|
||||
import buttonMain from '@/ux-components/button-main/button-main.vue';
|
||||
import textLink from '@/ux-components/text-link/text-link.vue';
|
||||
|
||||
export default {
|
||||
name: 'benefit-recal-modal',
|
||||
components: {
|
||||
modal,
|
||||
buttonMain,
|
||||
textLink
|
||||
},
|
||||
emits: ['continue-safelite-clicked', 'schedule-elsewhere-clicked'],
|
||||
data() {
|
||||
return {
|
||||
schedulingElsewhere: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
cmsWidgetName: {
|
||||
type: String,
|
||||
default: 'BenefitRecalModalWidget'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
modalBodyText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT)
|
||||
},
|
||||
modalCloseLinkText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
},
|
||||
modalHeaderText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
|
||||
},
|
||||
modalFooterButtonText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT);
|
||||
},
|
||||
modalImage() {
|
||||
return this.getCmsContent(this.cmsWidgetName, 'Image');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
continueWithSafeliteClicked() {
|
||||
this.$refs.benefitRecalModal.closeModal();
|
||||
},
|
||||
scheduleElsewhereClicked() {
|
||||
this.schedulingElsewhere = true;
|
||||
this.$refs.benefitRecalModal.closeModal();
|
||||
},
|
||||
onModalClosed() {
|
||||
this.pushEvent();
|
||||
if (!this.schedulingElsewhere) {
|
||||
console.log('Emitting continue-safelite-clicked event');
|
||||
this.$emit('continue-safelite-clicked');
|
||||
}
|
||||
else {
|
||||
console.log('Emitting schedule-elsewhere-clicked event');
|
||||
this.$emit('schedule-elsewhere-clicked');
|
||||
}
|
||||
},
|
||||
openModal() {
|
||||
this.$refs.benefitRecalModal.openModal();
|
||||
},
|
||||
pushEvent() {
|
||||
const gaLabel = this.schedulingElsewhere ? 'schedule_elsewhere_clicked' : 'continue_with_safelite_clicked';
|
||||
this.pushEventToGA(
|
||||
'safelite_benefit_modal',
|
||||
'modal_closed',
|
||||
gaLabel,
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.benefit-recal-modal-container {
|
||||
.recal-image {
|
||||
margin: 1rem 0;
|
||||
width: 23.5rem;
|
||||
height: auto;
|
||||
}
|
||||
.recal-modal-footer {
|
||||
border-top: none;
|
||||
padding: .625rem 1.5rem 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
background-color: $green;
|
||||
color: $white;
|
||||
border-color: $blue;
|
||||
font-weight: $font-weight-bold;
|
||||
&:hover {
|
||||
background-color: $green;
|
||||
color: $white;
|
||||
border-color: $heritage-blue-secondary;
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $green;
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $green;
|
||||
}
|
||||
}
|
||||
a {
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.modal) {
|
||||
.modal-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardButtonHidden="!hasNeededServiceLocationData"
|
||||
:isForwardButtonNavigationDisabled="!isFormValid"
|
||||
@backClicked="navigateBack(this, navigateBackScenario)"
|
||||
@backClicked="backButtonAction"
|
||||
@forwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,6 +69,11 @@
|
|||
cmsWidgetName="RecalAckModalWidget"
|
||||
:ackError="ackError"
|
||||
@recalAcknowledged="updateIsRecalAcknowledged"/>
|
||||
<benefitRecalModal
|
||||
:ref="BENEFIT_RECAL_MODAL_REF_NAME"
|
||||
cmsWidgetName="BenefitRecalModalWidget"
|
||||
@continue-safelite-clicked="continueWithSafeliteClicked"
|
||||
@schedule-elsewhere-clicked="scheduleElsewhereClicked" />
|
||||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -81,6 +86,7 @@ import serviceLocation from '@/layouts/schedule-page/service-location/service-lo
|
|||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import suggestTimeslotModal from '@/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue';
|
||||
import recalAckModal from '@/layouts/schedule-page/recal-ack-modal/recal-ack-modal.vue';
|
||||
import benefitRecalModal from '@/layouts/schedule-page/benefit-recal-modal/benefit-recal-modal.vue';
|
||||
|
||||
// Supporting files
|
||||
import { experimentSettings, experimentTest, experimentVariation, experimentUniverses } from '@/constants/experiments';
|
||||
|
|
@ -118,6 +124,7 @@ import errorMessages from '@/constants/error-messages';
|
|||
const SUGGEST_TIMESLOT_MODAL_REF_NAME = 'SuggestTimeslotModal';
|
||||
const TIME_SLOTS_CALL_DAYS_LIMIT = 15;
|
||||
const RECAL_ACK_MODAL_REF_NAME = 'recalAckModal';
|
||||
const BENEFIT_RECAL_MODAL_REF_NAME = 'benefitRecalModal';
|
||||
|
||||
const getAvailableDates = async (
|
||||
startDateString,
|
||||
|
|
@ -240,7 +247,8 @@ export default {
|
|||
siteFooter,
|
||||
suggestTimeslotModal,
|
||||
Form,
|
||||
recalAckModal
|
||||
recalAckModal,
|
||||
benefitRecalModal
|
||||
},
|
||||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -382,7 +390,9 @@ export default {
|
|||
showDatePickerError: false,
|
||||
SUGGEST_TIMESLOT_MODAL_REF_NAME,
|
||||
RECAL_ACK_MODAL_REF_NAME,
|
||||
isRecalAcknowledged: this.getIsRecalAcknowledgedForScheduling()
|
||||
isRecalAcknowledged: this.getIsRecalAcknowledgedForScheduling(),
|
||||
BENEFIT_RECAL_MODAL_REF_NAME,
|
||||
benefitRecalModalAcknowledged: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -439,6 +449,9 @@ export default {
|
|||
},
|
||||
ackError() {
|
||||
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
|
||||
},
|
||||
hasBenefitRecalModal() {
|
||||
return this.getCmsContent('BenefitRecalModalWidget', 'HeaderText');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -1017,6 +1030,29 @@ export default {
|
|||
getIsRecalAcknowledgedForScheduling() {
|
||||
return this.mainStore.order.isRecalAcknowledgedForScheduling;
|
||||
},
|
||||
continueWithSafeliteClicked() {
|
||||
console.log('continueWithSafeliteClicked');
|
||||
this.benefitRecalModalAcknowledged = true;
|
||||
},
|
||||
scheduleElsewhereClicked() {
|
||||
console.log('scheduleElsewhereClicked');
|
||||
this.navigateBack(this, this.navigateBackScenario)
|
||||
},
|
||||
backButtonAction() {
|
||||
if (this.hasBenefitRecalModal && !this.benefitRecalModalAcknowledged) {
|
||||
this.$refs[BENEFIT_RECAL_MODAL_REF_NAME].openModal();
|
||||
const gaLabel = this.mainStore.hasRecalibrationPart ? 'recalibration_version' : 'non-recalibration_version';
|
||||
this.pushEventToGA(
|
||||
'safelite_benefit_modal_displayed',
|
||||
this.mainStore.accountNameForEvents,
|
||||
gaLabel,
|
||||
true
|
||||
);
|
||||
}
|
||||
else {
|
||||
this.navigateBack(this, this.navigateBackScenario)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue