modal content

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

@@ -12,17 +12,31 @@
     </div>
     <modal
         :ref="modalName"
-        cmsWidgetName="ServiceZipModalWidget"
         :onModalOpenedCallback="onModalOpened"
         :onModalClosedCallback="onModalClosed"
         :footerButtonText="modalFooterText"
-        @footer-button-event="setZipCode"
-    />
+        @footer-button-event="setZipCode" >
+        <serviceZipQuestion
+            ref="serviceZipQuestion"
+            customInputId="serviceZipCode"
+            v-model="internalModel.serviceZip"
+            v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
+            :cmsWidgetName="textboxQuestionWidgetName" />
+        <alert
+            ref="alertInvalidZip"
+            v-if="displayInvalidZipAlert"
+            class="my-4"
+            :cmsWidgetName="alertInvalidZipWidgetName"
+            alertClass="alert-danger"
+            v-bind:isDismissible="false" />
+    </modal>
 </template>
 
 <script>
-import modal from "@/digital-components/modal/modal.vue"
 import textLink from "@/ux-components/text-link/text-link";
+import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
+import modal from "@/digital-components/modal/modal.vue"
+import alert from "@/ux-components/alert/alert";
 
 export default {
     name: "service-zip-modal-question",
@@ -30,6 +44,8 @@ export default {
     data() {
         return {
             internalModel: this.copyModel(this.modelValue),
+            serviceZipCodeTextInputId: "",
+            displayInvalidZipAlert: false,
         };
     },
     props: {
@@ -42,12 +58,23 @@ export default {
         },
         modalWidgetName: String,
     },
+    setup() {
+        const textboxQuestionWidgetName = "ServiceZipQuestionWidget";
+        const alertInvalidZipWidgetName = "AlertInvalidZipWidget";
+        return {
+            textboxQuestionWidgetName,
+            alertInvalidZipWidgetName,
+        };
+    },
     computed: {
         serviceZipLinkText() {
             if (this.modelValue.serviceZip && this.modelValue.serviceZip.length > 0) {
                 return this.modelValue.serviceZipState + ", " + this.modelValue.serviceZip;
             }
         },
+        modalHeaderText() {
+            return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
+        },
         modalFooterText() {
             return this.getCmsContent(this.modalWidgetName, "FooterText");
         },
@@ -56,6 +83,16 @@ export default {
         },
     },
     methods: {
+        resetAlerts() {
+            this.displayInvalidZipAlert = false;
+        },
+        resetsOnZipInput() {
+            this.resetAlerts();
+        },
+        focusOnZipInput() {
+            const input = document.getElementById(this.serviceZipCodeTextInputId);
+            input?.focus();
+        },
         copyModel(modelToCopy) {
             return {
                 serviceZipState: modelToCopy.serviceZipState,
@@ -68,6 +105,12 @@ export default {
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
+        resetModalButtonStyle() {
+            this.$refs[this.modalName].resetButtonStyle();
+        },
+        onInputIdAssigned(inputId) {
+            this.serviceZipCodeTextInputId = inputId;
+        },
         onModalOpened() {
             this.internalModel.serviceZip = this.modelValue.serviceZip;
             this.focusOnZipInput();
@@ -89,7 +132,9 @@ export default {
     },
     components: {
         textLink,
-        modal
+        modal,
+        serviceZipQuestion,
+        alert
     },
     
 };

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

@@ -0,0 +1,49 @@
+<template>
+    <textboxQuestion
+        ref="zipInputTextQuestion"
+        :cmsWidgetName="cmsWidgetName"
+        v-model="value"
+        inputId="serviceZipCode"
+        questionAlignment="center"
+        cornerStyle="rounded"
+        mask="#####"
+        :displayQuestionText="false"
+        isRequired
+        validationRules="zip-required|zip-format" />
+</template>
+
+<script>
+import textboxQuestion from "@/digital-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";
+
+// Define Validation Rules
+defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
+
+export default {
+    name: "service-zip-question",
+    props: {
+        modelValue: {
+            serviceZipCode: String,
+        },
+        cmsWidgetName: String,
+    },
+    computed: {
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    components: {
+        textboxQuestion,
+    },
+};
+</script>