refactored modals to their own files and added link to shop-preference modal if there is state steering text
This commit is contained in:
Jason Wheeler
parent
510bba3166
commit
7103951114
3 changed files with 210 additions and 47 deletions
|
|
@ -28,19 +28,15 @@
|
|||
</div>
|
||||
</Form>
|
||||
|
||||
<contentGroupModal cmsWidgetName="ShopPreferenceDrawer" ref="ShopPreferenceDrawer" />
|
||||
<recalModal ref="recalModal" cmsWidgetName="RecalModal" />
|
||||
<steeringModal cmsWidgetName="StateSteeringModal" ref="StateSteeringModal" />
|
||||
<shopPreferenceModal
|
||||
cmsWidgetName="ShopPreferenceDrawer"
|
||||
ref="ShopPreferenceDrawer"
|
||||
@openSteering="openStateSteeringModal"
|
||||
showSteeringLink=""/>
|
||||
|
||||
|
||||
<modal
|
||||
ref="SteeringModal"
|
||||
modalId="SteeringModal"
|
||||
@footer-button-event="closeSteeringModal"
|
||||
:footerButtonText="steeringModalFooter">
|
||||
<h5 class="text-center">{{steeringModalHeader}}</h5>
|
||||
<div class="steeringModalBody">
|
||||
<div class="mb-4" >{{steeringModalBody}}</div>
|
||||
<div v-if="steeringModalBody2">{{steeringModalBody2}}</div>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -51,8 +47,6 @@ import { required } from "@/helpers/validation-rules";
|
|||
import { errorMessages } from "@/constants/error-messages";
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal";
|
||||
import modal from "@/digital-components/modal/modal"
|
||||
import { states } from "@/constants/states"
|
||||
|
||||
// Import Component
|
||||
import baseFormMixin from "@/mixins/base-form-mixin";
|
||||
|
|
@ -60,7 +54,10 @@ import { Form, defineRule } from "vee-validate";
|
|||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
||||
import siteHeader from "@/iss-components/site-header/site-header";
|
||||
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
|
||||
import providerPrefRadio from "./provider-pref-radio/provider-pref-radio.vue"
|
||||
import providerPrefRadio from "./provider-pref-radio/provider-pref-radio";
|
||||
import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal";
|
||||
import steeringModal from "@/layouts/provider-preference/steering-modal/steering-modal";
|
||||
import shopPreferenceModal from "@/layouts/provider-preference/shop-preference-modal/shop-preference-modal";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
|
||||
|
|
@ -76,8 +73,10 @@ export default {
|
|||
Form,
|
||||
buttonQuestion,
|
||||
contentGroupModal,
|
||||
modal,
|
||||
providerPrefRadio
|
||||
providerPrefRadio,
|
||||
recalModal,
|
||||
steeringModal,
|
||||
shopPreferenceModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -102,14 +101,6 @@ export default {
|
|||
isForwardActionDisabled() {
|
||||
return this.selectedProvider === null;
|
||||
},
|
||||
|
||||
ProviderPreferenceHeaderText(){
|
||||
return this.getCmsContent("ProviderPreference", "HeaderText");
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent("ProviderPreference", "SubHeaderText");
|
||||
},
|
||||
|
||||
prefAnswers() {
|
||||
const cmsAnswersContent = [
|
||||
{
|
||||
|
|
@ -133,22 +124,10 @@ export default {
|
|||
));
|
||||
return modifiedAnswers;
|
||||
},
|
||||
|
||||
steeringModalHeader() {
|
||||
let header = this.getCmsContent("StateSteeringModal", "HeaderText");
|
||||
return header.replace("{custom:state}", states[this.mainStore.order.customer.address.state])
|
||||
},
|
||||
steeringModalBody() {
|
||||
showSteeringLink() {
|
||||
const bodyText = this.getCmsContent("StateSteeringModal", "BodyText");
|
||||
return processIfStatements(bodyText, "custom", this.getStateSpecificText);
|
||||
return !!bodyText;
|
||||
},
|
||||
steeringModalBody2() {
|
||||
const bodyText = this.getCmsContent("StateSteeringModal", "BodyText2");
|
||||
return processIfStatements(bodyText, "custom", this.getStateSpecificText);
|
||||
},
|
||||
steeringModalFooter() {
|
||||
return this.getCmsContent("StateSteeringModal", "FooterText");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getHeaderTextFromCms(cmsWidgetName) {
|
||||
|
|
@ -166,9 +145,7 @@ export default {
|
|||
const footerText = this.getCmsContent(cmsWidgetName, "FooterText");
|
||||
return processIfStatements(footerText, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getStateSpecificText(value) {
|
||||
return this.mainStore.order.customer.address.state?.toLowerCase() == value?.toLowerCase();
|
||||
},
|
||||
|
||||
arePagePrerequisiteValid() {
|
||||
return true;
|
||||
},
|
||||
|
|
@ -176,7 +153,6 @@ export default {
|
|||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
forwardButtonAction() {
|
||||
console.log("here!")
|
||||
if(this.selectedProvider.toLowerCase() == "safeliteoption")
|
||||
{
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
|
||||
|
|
@ -186,14 +162,14 @@ export default {
|
|||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA, this.$route);
|
||||
}
|
||||
},
|
||||
closeSteeringModal() {
|
||||
this.$refs["SteeringModal"].closeModal();
|
||||
openStateSteeringModal() {
|
||||
this.$refs["StateSteeringModal"].openModal();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setupModalLinks(this);
|
||||
if(this.steeringModalBody) {
|
||||
this.$refs["SteeringModal"].openModal();
|
||||
if(this.showSteeringLink) {
|
||||
this.openStateSteeringModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<modal
|
||||
:ref="ModalName"
|
||||
:modalId="ModalName"
|
||||
:footerButtonText="ModalCloseButtonText"
|
||||
@footer-button-event="footerButtonClick">
|
||||
<h5 class="text-center mb-4">{{ModalHeadline}}</h5>
|
||||
<div>
|
||||
<div class="mb-4" v-html="ModalBodyText"></div>
|
||||
<a
|
||||
v-if="showSteeringLink"
|
||||
v-html="ModalSubBodyText"
|
||||
@click="openSteeringModal">
|
||||
</a>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "@/digital-components/modal/modal";
|
||||
import { states } from "@/constants/states";
|
||||
|
||||
export default {
|
||||
name: "content-group-modal",
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
showSteeringLink: Boolean,
|
||||
},
|
||||
emits: ["openSteering"],
|
||||
computed: {
|
||||
ModalName() {
|
||||
return this.cmsWidgetName;
|
||||
},
|
||||
ModalHeadline() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||
},
|
||||
ModalSubheadertext() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
|
||||
},
|
||||
ModalBodyText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
||||
},
|
||||
ModalSubBodyText() {
|
||||
let header = this.getCmsContent(this.cmsWidgetName, "BodyText2");
|
||||
return header.replace("{custom:state}", states[this.mainStore.order.customer.address.state])
|
||||
},
|
||||
ModalImage() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "Image");
|
||||
},
|
||||
ModalCloseButtonText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.$refs[this.ModalName].openModal();
|
||||
},
|
||||
|
||||
footerButtonClick() {
|
||||
this.$refs[this.ModalName].closeModal();
|
||||
},
|
||||
openSteeringModal(){
|
||||
this.$refs[this.ModalName].closeModal();
|
||||
this.$emit("openSteering");
|
||||
}
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.modal {
|
||||
&.modal-component {
|
||||
.modal-dialog {
|
||||
.modal-content {
|
||||
.modal-body {
|
||||
.modal-sub-body {
|
||||
color: $gray-600;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<modal
|
||||
:ref="ModalName"
|
||||
:modalId="ModalName"
|
||||
:footerButtonText="ModalCloseButtonText"
|
||||
@footer-button-event="footerButtonClick">
|
||||
<h5 class="text-center mb-4">{{ModalHeadline}}</h5>
|
||||
<div>
|
||||
<div class="mb-4" v-html="ModalBodyText"></div>
|
||||
<div v-if="ModalSubBodyText" v-html="ModalSubBodyText"></div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "@/digital-components/modal/modal";
|
||||
import { processIfStatements } from '@/helpers/cms-content-helper';
|
||||
import { states } from "@/constants/states";
|
||||
|
||||
export default {
|
||||
name: "content-group-modal",
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
computed: {
|
||||
ModalName() {
|
||||
return this.cmsWidgetName;
|
||||
},
|
||||
ModalHeadline() {
|
||||
let header = this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||
return header.replace("{custom:state}", states[this.mainStore.order.customer.address.state])
|
||||
},
|
||||
ModalSubheadertext() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
|
||||
},
|
||||
ModalBodyText() {
|
||||
const bodyText = this.getCmsContent(this.cmsWidgetName, "BodyText");
|
||||
return processIfStatements(bodyText, "custom", this.getStateSpecificText);
|
||||
},
|
||||
ModalSubBodyText() {
|
||||
const bodyText = this.getCmsContent(this.cmsWidgetName, "BodyText2");
|
||||
return processIfStatements(bodyText, "custom", this.getStateSpecificText);
|
||||
},
|
||||
ModalImage() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "Image");
|
||||
},
|
||||
ModalCloseButtonText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.$refs[this.ModalName].openModal();
|
||||
},
|
||||
|
||||
footerButtonClick() {
|
||||
this.$refs[this.ModalName].closeModal();
|
||||
},
|
||||
|
||||
getStateSpecificText(value) {
|
||||
return this.mainStore.order.customer.address.state?.toLowerCase() == value?.toLowerCase();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.modal {
|
||||
&.modal-component {
|
||||
.modal-dialog {
|
||||
.modal-content {
|
||||
.modal-body {
|
||||
.modal-sub-body {
|
||||
color: $gray-600;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue