From f4b2b96c91669aca5c252f48f7d14aa47ce13e5e Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Tue, 19 Sep 2023 16:59:09 -0400
Subject: [PATCH] Updates to service location when coming out of a modal.

---
 .../button-question/button-question.vue       | 31 ++++++++++++++++++-
 .../mobile-location-modal-questions.vue       |  2 +-
 .../service-location/service-location.vue     |  4 +++
 .../service-zip-modal-question.vue            |  9 +++++-
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 6f01e6d2..f4a3597c 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -80,7 +80,7 @@ import listButton from '@/ux-components/list-button/list-button.vue';
 import listButtonHorizontal from '@/ux-components/list-button-horizontal/list-button-horizontal.vue';
 import listCard from '@/ux-components/list-card/list-card.vue';
 import radio from '@/ux-components/radio/radio.vue';
-import { ErrorMessage } from 'vee-validate';
+import { useField, ErrorMessage } from 'vee-validate';
 import providerPrefRadio from '@/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue';
 
 export default {
@@ -134,6 +134,28 @@ export default {
         isSmallQuestionLabelText: Boolean
     },
     emits: ['update:modelValue'],
+    setup(props) {
+        const propsClone = { ...props };
+        const { modelValue } = propsClone;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue: null
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
+            useField(props.groupName, props.validationRules, fieldOptions);
+
+        return {
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+            resetField
+        };
+    },
     data() {
         return {
             lastValuePushedToGa: null
@@ -231,6 +253,13 @@ export default {
             }
         }
     },
+    watch: {
+        modelValue(newValue) {
+            this.resetField({
+                value: newValue
+            });
+        }
+    },
     beforeMount() {
         if (this.buttonTypeObject) {
             this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index 1c87c331..d6d850b6 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -128,7 +128,7 @@ export default {
             type: Function
         }
     },
-    emits: ['update:modelValue', 'updated-mobile-fee-part', 'updated-contains-military-base'],
+    emits: ['update:modelValue', 'updated-mobile-fee-part', 'updated-contains-military-base', 'updated-serviceability'],
     setup(props) {
         const uuid = crypto.randomUUID();
         const componentId = !props.customComponentId
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 4dacfcd6..665b85ad 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -14,6 +14,7 @@
                     ref="serviceZipCodeQuestion"
                     v-model="serviceZipCodeQuestion"
                     modalWidgetName="ServiceZipModalWidget"
+                    :onZipUpdateCallback="reloadShopData"
                     @updatedServiceability="setServiceabilityDetails"
                     @updatedContainsMilitaryBase="setContainsMilitaryBase" />
                 <alert
@@ -329,6 +330,9 @@ export default {
              */
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
+        async reloadShopData() {
+            await this.$refs.shopQuestion.reloadShopData(this.zipCode);
+        },
         async forwardButtonAction() {
             useMainStore().saveServiceLocation({
                 address: this.streetAddress,
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index 6b9994d2..9f0c13b1 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -57,7 +57,10 @@ export default {
                 zipCode: ''
             })
         },
-        modalWidgetName: String
+        modalWidgetName: String,
+        onZipUpdateCallback: {
+            type: Function
+        }
     },
     emits: ['update:modelValue', 'updated-serviceability', 'updated-contains-military-base'],
     setup() {
@@ -162,6 +165,10 @@ export default {
 
                     // Update the page level model
                     this.$emit('update:modelValue', this.internalModel);
+                    if (this.onZipUpdateCallback) {
+                        await this.onZipUpdateCallback(serviceZipCode);
+                    }
+
                     this.closeModal();
                 }
             } else {