272 lines
8.6 KiB
Vue
272 lines
8.6 KiB
Vue
<template>
|
|
<div class="save-progress-popup-question" :class="[isProgressSaved ? 'progress-saved' : '']">
|
|
<modal
|
|
:ref="modalName"
|
|
:headerText="modalHeaderText"
|
|
suppressPageScroll
|
|
:onModalClosedCallback="onModalClosed"
|
|
:footerButtonText="modalButtonText"
|
|
:isFooterButtonPrimary="true"
|
|
@footer-button-event="saveProgress">
|
|
<p class="modal-body-inner">{{ modalBodyText }}</p>
|
|
<saveProgressQuestion
|
|
ref="saveProgressQuestion"
|
|
v-model="userInput"
|
|
cmsWidgetName="SaveProgressPopupQuestionWidget"
|
|
class="save-progress-popup-question" />
|
|
<template v-slot:modal-footer-slot>
|
|
<buttonMain
|
|
ref="skipButton"
|
|
type="button"
|
|
:buttonText="buttonText"
|
|
loaderColor="white"
|
|
:suppressLoader="true"
|
|
class="skip-button"
|
|
@click-event="closeModal" />
|
|
<p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
|
|
</template>
|
|
<alert
|
|
class="my-4"
|
|
v-if="isProgressSaved"
|
|
cmsWidgetName="SaveProgressModalAlertWidget"
|
|
alertClass="alert-success" />
|
|
</modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import saveProgressQuestion from "@/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question";
|
|
import modal from "@/digital-components/modal/modal";
|
|
import { storeActions } from "@/constants/store-actions.js";
|
|
import buttonMain from "@/ux-components/button-main/button-main";
|
|
import alert from "@/ux-components/alert/alert";
|
|
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
|
|
|
|
export default {
|
|
name: "save-progress-popup-question",
|
|
|
|
data() {
|
|
return {
|
|
userInput: "",
|
|
isProgressSaved: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
if (this.showSaveProgressPopup) this.modal.openModal();
|
|
},
|
|
emits: ["close-save-progress-popup", "save-progress"], // <--- should remove oodles of warnings in dev tools
|
|
props: {
|
|
modelValue: Object,
|
|
modalWidgetName: String,
|
|
pageName: String,
|
|
showSaveProgressPopup: Boolean,
|
|
},
|
|
computed: {
|
|
buttonText() {
|
|
return this.isProgressSaved
|
|
? "Close"
|
|
: this.getCmsContent(this.modalWidgetName, "BodyText2");
|
|
},
|
|
modalHeaderText() {
|
|
return this.getCmsContent(this.modalWidgetName, "HeaderText");
|
|
},
|
|
modalBodyText() {
|
|
return this.getCmsContent(this.modalWidgetName, "BodyText");
|
|
},
|
|
modalButtonText() {
|
|
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
|
},
|
|
modalDisclaimerText() {
|
|
return this.getCmsContent(this.modalWidgetName, "FooterText2");
|
|
},
|
|
modalName() {
|
|
return this.modalWidgetName;
|
|
},
|
|
modal() {
|
|
return this.$refs[this.modalName];
|
|
},
|
|
},
|
|
methods: {
|
|
closeModal() {
|
|
this.modal.closeModal();
|
|
},
|
|
onModalClosed() {
|
|
// send call to close popup
|
|
this.$emit("close-save-progress-popup");
|
|
},
|
|
async saveProgress() {
|
|
// save email address to store
|
|
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
|
|
|
|
// send store call to send to new API (that triggers an email send)
|
|
await saveQuote({ pageNameToLog: this.pageName });
|
|
|
|
// hide save progress button; show success message alert
|
|
this.isProgressSaved = true;
|
|
|
|
// communicate to parent the new status
|
|
this.$emit("save-progress-saved");
|
|
},
|
|
},
|
|
|
|
components: {
|
|
modal,
|
|
buttonMain,
|
|
saveProgressQuestion,
|
|
alert,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.save-progress-popup-question {
|
|
order: 2;
|
|
margin-bottom: 1.5rem;
|
|
|
|
.modal-header {
|
|
padding-top: 1rem;
|
|
|
|
.modal-title {
|
|
padding-top: 4.25rem;
|
|
}
|
|
|
|
.modal-title::before {
|
|
position: absolute;
|
|
content: "";
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 63 62'%3E%3Cpath fill='%23B3B4B5' d='M31.5 62c17.052 0 30.876-1.503 30.876-3.358 0-1.854-13.824-3.358-30.876-3.358S.624 56.788.624 58.642C.624 60.497 14.448 62 31.5 62Z' opacity='.4'/%3E%3Cpath fill='%23DA291C' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m33.358 52.715-4.574 4.573-24.192-24.2 4.491-4.491 24.275 24.118Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M58.408 13.402 55.61 30.469 33.356 52.715 9.083 28.597 31.411 6.269l17.067-2.797 9.93 9.93Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M45.586 19.907a3.618 3.618 0 1 0 0-7.237 3.618 3.618 0 0 0 0 7.237Z'/%3E%3C/svg%3E");
|
|
width: 3.875rem;
|
|
height: 3.875rem;
|
|
top: 2.5rem;
|
|
left: calc(50% - 3.875rem / 2);
|
|
}
|
|
}
|
|
|
|
.btn.btn-secondary.skip-button {
|
|
order: 4;
|
|
position: relative;
|
|
color: $black;
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
font-weight: 900;
|
|
font-size: 0.875rem;
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: auto;
|
|
height: auto;
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.25rem;
|
|
line-height: 1rem;
|
|
padding: 0 0 4px 0;
|
|
margin: 0 auto 1.5rem auto;
|
|
transition: all 150ms linear;
|
|
background: none;
|
|
@include media-breakpoint-up(md) {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: $blue-700;
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
&:focus-visible {
|
|
outline: none;
|
|
box-shadow:
|
|
0 0 0 3px $white,
|
|
0 0 0 5.5px $blue-300;
|
|
}
|
|
|
|
&.delay {
|
|
// fixes flicker while transitioning between states
|
|
transition: background 0s 0s ease-in-out;
|
|
}
|
|
}
|
|
.alert {
|
|
border-radius: $border-radius-lg;
|
|
border: 1px solid $green;
|
|
order: 2;
|
|
margin: 0 0 1.5rem 0;
|
|
}
|
|
.alert-heading {
|
|
position: relative;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
color: $black;
|
|
text-align: left;
|
|
padding-left: 1.5rem;
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
|
|
width: 1rem;
|
|
height: 1rem;
|
|
top: 6px;
|
|
left: 0;
|
|
}
|
|
}
|
|
.modal.modal-component .modal-dialog .modal-content {
|
|
p.modal-body {
|
|
padding: 0;
|
|
}
|
|
.modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 1.5rem;
|
|
|
|
.textbox-question {
|
|
padding: 0;
|
|
margin: 0 0 1.5rem 0;
|
|
|
|
label {
|
|
text-align: left;
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
}
|
|
.modal-body-inner {
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.modal-footer {
|
|
padding: 0 1.5rem;
|
|
margin: 0 0 1.5rem 0;
|
|
|
|
button.btn {
|
|
order: 1;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
button.btn.skip-button {
|
|
padding: 0;
|
|
order: 2;
|
|
font-size: 0.875rem;
|
|
@include media-breakpoint-up(md) {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
.modal-disclaimer {
|
|
font-size: 0.8125rem;
|
|
color: #525656;
|
|
text-align: left;
|
|
order: 3;
|
|
margin: 0;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.progress-saved {
|
|
.modal-footer-button,
|
|
.modal-disclaimer {
|
|
display: none;
|
|
}
|
|
.skip-button {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|