CSR-1012 | reset modal on text input

added prop to textbox-question to fire custom function on text updates

src/digital-components/textbox-question/textbox-question.vue

@@ -70,6 +70,7 @@ export default {
         questionAlignment: String, // Left or center. Left is default.
         cornerStyle: String, // Rounded or square. Square is default.
         includeSearchIcon: Boolean,
+        customOnChange: Function,
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
@@ -145,6 +146,7 @@ export default {
     },
     watch: {
         async value(newValue) {
+            this.customOnChange();
             const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
             if (result.valid) {
                 this.handleChange(newValue); // trigger full validation on this field only

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

@@ -26,7 +26,8 @@
                 mask="#####"
                 isRequired
                 disableAutoFill
-                validationRules="zip-required|zip-format" />
+                validationRules="zip-required|zip-format" 
+                :customOnChange="this.resetsOnZipInput" />
             <alert
                 ref="alertInvalidZip"
                 v-if="displayInvalidZipAlert"
@@ -39,7 +40,7 @@
                 v-if="displayNonServiceableZipAlert"
                 class="my-4"
                 :cmsWidgetName="this.alertNonServiceableZipWidgetName"
-                :manualHeadline="this.invalidAlertHeader"
+                :manualHeadline="AlertNonServiceableZipHeader"
                 alertClass="alert-danger"
                 v-bind:isDismissible="false" />
         </div>
@@ -71,7 +72,6 @@ export default {
             serviceZipCodeInput: this.getZipFromStore(),
             displayInvalidZipAlert: false,
             displayNonServiceableZipAlert: false,
-            invalidAlertHeader: null,
         };
     },
     props: {
@@ -95,6 +95,11 @@ export default {
             this.displayNonServiceableZipAlert = false;
         },
 
+        resetsOnZipInput() {
+            this.resetAlerts();
+            this.$refs.zipCodeInputModal.resetButtonStyle();
+        },
+
         async setZip() {
             this.resetAlerts();
 
@@ -109,10 +114,6 @@ export default {
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
             } else if (!zipCodeData.isServiceable) {
-                this.invalidAlertHeader = this.getCmsContent(
-                    this.alertNonServiceableZipWidgetName,
-                    "HeadlineText"
-                ).replaceAll("{custom:serviceZipCodeInput}", this.serviceZipCodeInput);
                 this.displayNonServiceableZipAlert = true;
             } else {
                 this.serviceZip = this.serviceZipCodeInput;
@@ -135,6 +136,14 @@ export default {
             }
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
+        AlertNonServiceableZipHeader() {
+            const zipCode = this.serviceZipCodeInput;
+            const text = this.getCmsContent(
+                "AlertNonServiceableZipWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:serviceZipCodeInput}", zipCode);
+            return text;
+        },
     },
     components: {
         textLink,