CSR-1012 | created content-group-modal

src/digital-components/modal/modal.vue

@@ -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"
+                        :buttonText="footerButtonText"
-                        @click-event="footerButtonClick" />
+                        @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));
+        this.modal = new Modal(document.getElementById(this.modalId));
-    },
-    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;
-        },
     },
     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,

src/fmg-components/content-group-modal/content-group-modal.spec.js

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

src/fmg-components/content-group-modal/content-group-modal.vue

@@ -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>

src/layouts/service-location/service-location.vue

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

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -17,10 +17,11 @@
         </div>
     </div>
     <modal
-        ref="zipCodeInputModal"
+        :ref="modalName"
-        :cmsWidgetName="this.modalWidgetName"
+        :modalId="modalName"
-        :onModalOpenedCallback="onModalOpen"
+        :onModalOpenedCallback="onModalOpened"
-        :footerButtonCallback="setZip">
+        :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
+                this.$refs[this.modalName].closeModal();
-                return true;
             }
-
-            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() {