CSR-1012 | service zip modal question

new component service-zip-modal-question added to the service-location page

src/digital-components/modal/modal.vue

@@ -35,7 +35,7 @@
                         ref="buttonMain"
                         suppressLoader
                         :buttonText="ModalCloseButtonText"
-                        @click-event="footerButtonClick" />
+                        @click-event="buttonMainClick" />
                 </div>
             </div>
         </div>
@@ -49,15 +49,9 @@ export default {
     name: "modal",
     props: {
         cmsWidgetName: String,
-        onShownCallback: {
+        buttonClick: {
             type: Function,
         },
-
-        footerButtonCallback: {
-            type: Function,
-            // return true to close modal
-            // if undefined, footer button closes modal
-        },
     },
     computed: {
         ModalHeadline() {
@@ -79,7 +73,12 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
         showModalBody() {
-            return this.ModalBodyText;
+            return (
+                this.ModalImage ||
+                this.ModalHeadline ||
+                this.ModalSubheadertext ||
+                this.ModalBodyText
+            );
         },
     },
     methods: {
@@ -89,11 +88,9 @@ export default {
         closeModal() {
             this.$refs.modalXButton.click();
         },
-        async footerButtonClick() {
+        buttonMainClick() {
-            if (this.footerButtonCallback) {
+            if (this.buttonClick) {
-                if (await this.footerButtonCallback()) {
+                this.buttonClick();
-                    this.closeModal();
-                }
             } else {
                 this.closeModal();
             }

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

@@ -4,12 +4,7 @@ fmg
         <div class="page-container-grouped-styles">
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-            <serviceZipModalQuestion
+            <serviceZipModalQuestion />
-                cmsWidgetName="ServiceZipModalWidget"
-                modalWidgetName="ZipModalWidget"
-                textboxQuestionWidgetName="ServiceZipQuestionWidget"
-                alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
-                alertInvalidZipWidgetName="AlertInvalidZipWidget" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 :isForwardActionDisabled="!meta.valid"
@@ -22,9 +17,9 @@ fmg
 <script>
 // Components
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
-import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
-import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
-import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 
 //Supporting Files
 import { Form } from "vee-validate";

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

@@ -12,19 +12,14 @@
                 :text="this.serviceZipDisplayText"
                 href="#!"
                 data-bs-toggle="modal"
-                :data-bs-target="getModalId"
+                data-bs-target="#ZipModal"
                 aria-label="Modal window" />
         </div>
     </div>
-    <modal
+    <modal ref="zipCodeInputModal" cmsWidgetName="ZipModal" :buttonClick="setZip">
-        ref="zipCodeInputModal"
-        :cmsWidgetName="this.modalWidgetName"
-        :onModalOpenedCallback="onModalOpen"
-        :footerButtonCallback="setZip">
         <div class="ps-4 pe-4 pb-4">
             <textboxQuestion
-                ref="zipInputTextQuestion"
+                cmsWidgetName="ServiceZipQuestionWidget"
-                :cmsWidgetName="this.textboxQuestionWidgetName"
                 v-model="serviceZipCodeInput"
                 inputId="serviceZipCodeInput"
                 questionAlignment="center"
@@ -36,14 +31,14 @@
                 ref="alertInvalidZip"
                 v-if="displayInvalidZipAlert"
                 class="my-4"
-                :cmsWidgetName="this.alertInvalidZipWidgetName"
+                cmsWidgetName="AlertInvalidZipWidget"
                 alertClass="alert-danger"
                 v-bind:isDismissible="false" />
             <alert
                 ref="alertNonServiceableZip"
                 v-if="displayNonServiceableZipAlert"
                 class="my-4"
-                :cmsWidgetName="this.alertNonServiceableZipWidgetName"
+                cmsWidgetName="AlertNonServiceableZipWidget"
                 :manualHeadline="AlertNonServiceableZipHeader"
                 alertClass="alert-danger"
                 v-bind:isDismissible="false" />
@@ -54,15 +49,16 @@
 <script>
 // Components
 import textLink from "@/ux-components/text-link/text-link";
-import modal from "@/digital-components/modal/modal";
+import modal from "@/common-components/modal/modal";
 import alert from "@/ux-components/alert/alert";
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 
 //Supporting Files
 import { defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import { isNoUnitNumericStyleProp } from "@vue/shared";
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin";
 
 // Define Validation Rules
 defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@@ -81,18 +77,14 @@ export default {
     },
     props: {
         cmsWidgetName: String,
-        modalWidgetName: String,
-        textboxQuestionWidgetName: String,
-        alertNonServiceableZipWidgetName: String,
-        alertInvalidZipWidgetName: String,
     },
     methods: {
         getZipFromStore() {
-            return this.$store.getters.order.serviceLocation.zipCode;
+            return store.getters.order.serviceLocation.zipCode;
         },
 
         getZipStateFromStore() {
-            return this.$store.getters.order.serviceLocation.state;
+            return store.getters.order.serviceLocation.state;
         },
 
         resetAlerts() {
@@ -100,34 +92,16 @@ export default {
             this.displayNonServiceableZipAlert = false;
         },
 
-        resetsOnZipInput() {
-            this.resetAlerts();
-            this.$refs.zipCodeInputModal.resetButtonStyle();
-        },
-
-        focusOnZipInput() {
-            this.$nextTick(() => {
-                const input = this.$refs.zipInputTextQuestion.$refs.serviceZipCodeInput;
-                input.focus();
-            });
-        },
-
-        onModalOpen() {
-            this.serviceZipCodeInput = this.serviceZip;
-            this.resetsOnZipInput();
-            this.focusOnZipInput();
-        },
-
         async setZip() {
             this.resetAlerts();
 
             const zipLength = 5;
-            if (!this.serviceZipCodeInput || this.serviceZipCodeInput.length < zipLength) {
+            if (this.serviceZipCodeInput.length < zipLength) {
                 // prevent reading 1111 as 01111
-                return false;
+                return;
             }
 
-            const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
+            const zipCodeData = await baseMixin.methods.getZipCodeData(this.serviceZipCodeInput);
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
@@ -137,25 +111,19 @@ export default {
                 this.serviceZip = this.serviceZipCodeInput;
                 this.serviceZipState = zipCodeData.state;
 
-                // close modal
+                this.$refs.zipCodeInputModal.closeModal();
-                return true;
             }
-
-            return false;
         },
     },
     computed: {
-        getModalId() {
-            return "#" + this.modalWidgetName;
-        },
         questionText() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+            return this.getCmsContent("LocationQuestionWidget", "QuestionText");
         },
         serviceZipDisplayText() {
             if (this.serviceZip && this.serviceZip != 0) {
                 return this.serviceZipState + ", " + this.serviceZip;
             }
-            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+            return this.getCmsContent("ZipPlaceholderText", "QuestionText");
         },
         AlertNonServiceableZipHeader() {
             const zipCode = this.serviceZipCodeInput;
@@ -166,16 +134,6 @@ export default {
             return text;
         },
     },
-    mounted() {
-        this.$watch(
-            () => {
-                return this.$refs.zipInputTextQuestion.value;
-            },
-            (val) => {
-                this.resetsOnZipInput();
-            }
-        );
-    },
     components: {
         textLink,
         modal,