Updates to service location when coming out of a modal.

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;

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

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,

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 {