jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-1012 | created content-group-modal

Browse source
This commit is contained in:
Matt Caimi 2023-01-27 10:28:46 -05:00
parent c18af0e897
commit c782dd7e9f
5 changed files with 116 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/digital-components/modal/modal.vue
View file

@ -3,7 +3,7 @@
<div
class="modal fade modal-component"
v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onModalOpenedCallback }"
:id="cmsWidgetName"
:id="modalId"
tabindex="-1"
aria-labelledby="ModalComponentLabel"
aria-hidden="true">
@ -11,22 +11,12 @@
<div class="modal-content">
<div class="modal-header">
<button
ref="modalXButton"
ref="closeButton"
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body ps-5 pe-5 pt-5 pb-4" v-if="showModalBody">
<img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
<h5 class="mb-4" v-html="ModalHeadline"></h5>
<p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
<p class="mb-0" v-html="ModalBodyText"></p>
<p
class="my-4 caption modal-sub-body"
v-if="ModalSubBodyText"
v-html="ModalSubBodyText"></p>
</div>
<slot></slot>
<div class="modal-footer px-5 py-4">
<buttonMain
@ -34,8 +24,8 @@
class="w-100"
ref="buttonMain"
suppressLoader
:buttonText="ModalCloseButtonText"
@click-event="footerButtonClick" />
:buttonText="footerButtonText"
@click="$emit('footerButtonEvent')" />
</div>
</div>
</div>
@ -49,16 +39,11 @@ import { Modal } from "bootstrap";
export default {
name: "modal",
props: {
cmsWidgetName: String,
modalId: String,
footerButtonText: String,
onModalOpenedCallback: {
type: Function,
},
footerButtonCallback: {
type: Function,
// return true to close modal
// if undefined, footer button closes modal
},
},
data() {
return {
@ -66,30 +51,7 @@ export default {
};
},
mounted() {
this.modal = new Modal(document.getElementById(this.cmsWidgetName));
},
computed: {
ModalHeadline() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
},
ModalSubheadertext() {
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
},
ModalBodyText() {
return this.getCmsContent(this.cmsWidgetName, "BodyText");
},
ModalSubBodyText() {
return this.getCmsContent(this.cmsWidgetName, "BodyText2");
},
ModalImage() {
return this.getCmsContent(this.cmsWidgetName, "Image");
},
ModalCloseButtonText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
showModalBody() {
return this.ModalBodyText;
},
this.modal = new Modal(document.getElementById(this.modalId));
},
methods: {
resetButtonStyle() {
@ -101,15 +63,6 @@ export default {
closeModal() {
this.modal.hide();
},
async footerButtonClick() {
if (this.footerButtonCallback) {
if (await this.footerButtonCallback()) {
this.closeModal();
}
} else {
this.closeModal();
}
},
},
components: {
buttonMain,

3
src/fmg-components/content-group-modal/content-group-modal.spec.js Normal file
View file

@ -0,0 +1,3 @@
describe("content-group-modal.vue", () => {
test.todo("test this");
});

88
src/fmg-components/content-group-modal/content-group-modal.vue Normal file
View file

@ -0,0 +1,88 @@
<template>
<modal
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
@footer-button-event="footerButtonClick">
<div class="modal-body ps-4 pe-4 pt-5 pb-4">
<img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
<h5 class="mb-4" v-html="ModalHeadline"></h5>
<p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
<p class="mb-0" v-html="ModalBodyText"></p>
<p
class="my-4 caption modal-sub-body"
v-if="ModalSubBodyText"
v-html="ModalSubBodyText"></p>
</div>
</modal>
</template>
<script>
import modal from "@/digital-components/modal/modal";
export default {
name: "content-group-modal",
props: {
cmsWidgetName: String,
},
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() {
return this.getCmsContent(this.cmsWidgetName, "BodyText2");
},
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();
},
},
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>

1
src/layouts/service-location/service-location.vue
View file

@ -6,7 +6,6 @@ fmg
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<serviceZipModalQuestion
cmsWidgetName="ServiceZipModalWidget"
modalWidgetName="ZipModalWidget"
textboxQuestionWidgetName="ServiceZipQuestionWidget"
alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
alertInvalidZipWidgetName="AlertInvalidZipWidget" />

31
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -17,10 +17,11 @@
</div>
</div>
<modal
ref="zipCodeInputModal"
:cmsWidgetName="this.modalWidgetName"
:onModalOpenedCallback="onModalOpen"
:footerButtonCallback="setZip">
:ref="modalName"
:modalId="modalName"
:onModalOpenedCallback="onModalOpened"
:footerButtonText="footerButtonText"
@footer-button-event="setZip">
<div class="ps-4 pe-4 pb-4">
<textboxQuestion
ref="zipInputTextQuestion"
@ -80,14 +81,13 @@ export default {
},
props: {
cmsWidgetName: String,
modalWidgetName: String,
textboxQuestionWidgetName: String,
alertNonServiceableZipWidgetName: String,
alertInvalidZipWidgetName: String,
},
methods: {
openZipCodeModal() {
this.$refs.zipCodeInputModal.openModal();
this.$refs[this.modalName].openModal();
},
getZipFromStore() {
return this.$store.getters.order.serviceLocation.zipCode;
@ -104,7 +104,7 @@ export default {
resetsOnZipInput() {
this.resetAlerts();
this.$refs.zipCodeInputModal.resetButtonStyle();
this.$refs[this.modalName].resetButtonStyle();
},
focusOnZipInput() {
@ -114,7 +114,7 @@ export default {
});
},
onModalOpen() {
onModalOpened() {
this.serviceZipCodeInput = this.serviceZip;
this.resetsOnZipInput();
this.focusOnZipInput();
@ -126,7 +126,7 @@ export default {
const zipLength = 5;
if (!this.serviceZipCodeInput || this.serviceZipCodeInput.length < zipLength) {
// prevent reading 1111 as 01111
return false;
return;
}
const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
@ -139,14 +139,14 @@ export default {
this.serviceZip = this.serviceZipCodeInput;
this.serviceZipState = zipCodeData.state;
// close modal
return true;
this.$refs[this.modalName].closeModal();
}
return false;
},
},
computed: {
modalName() {
return this.cmsWidgetName;
},
questionText() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
},
@ -154,6 +154,11 @@ export default {
if (this.serviceZip && this.serviceZip != 0) {
return this.serviceZipState + ", " + this.serviceZip;
}
return (
this.getCmsContent(this.cmsWidgetName, "SubheaderText") || "Enter your service ZIP"
);
},
footerButtonText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
AlertNonServiceableZipHeader() {