Make last alert a computed

src/layouts/service-location/shop-question/shop-question-popup.vue

@@ -13,8 +13,8 @@
     <modal
         ref="shopQuestionModal"
         :headerText="modalHeaderText"
-        :onModalClosedCallback="onModalClosed"
         :onModalOpenedCallback="updateSelectedAnswer"
+        :onModalClosedCallback="resetZipCodeData"
         :footerButtonText="modalFooterText"
         :footerButtonDisabled="isModalFooterButtonDisabled"
         @footer-button-event="setZipCodeAndShop">
@@ -108,7 +108,6 @@ export default {
             numberOfShopsToDisplay: 0,
             localShopProviderData: this.shopProviderDataFromParent,
             localSelectedProviderNumber: null,
-            displayNoShopsAlert: false, // part of big refactor of asyn calls
             zipCodeData: null,
         };
     },
@@ -139,6 +138,9 @@ export default {
         displayInvalidZipAlert() {
             return this.zipCodeData && !this.zipCodeData.isValid;
         },
+        displayNoShopsAlert() {
+            return !this.shopProviders.length && !this.displayInvalidZipAlert;
+        },
         modal() {
             return this.$refs.shopQuestionModal;
         },
@@ -187,6 +189,7 @@ export default {
     methods: {
         openModal() {
             // Reset local state from parent
+            this.zipCodeData = null;
             this.localShopProviderData = this.shopProviderDataFromParent;
             this.localZipCode = this.zipCodeFromParent;
             // This will be set once the modal is open (updateSelectedAnswer()) to ensure that the
@@ -242,14 +245,10 @@ export default {
             );
         },
         closeModal() {
-            this.modal.closeModal();
-        },
-        onModalClosed() {
-            this.resetAlerts();
+            this.modal.closeModal();            
         },
         async onSearchZip(event) {
             event.preventDefault();
-            this.resetAlerts();
             this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
             // Add zipCode to zipCodeData as it does not come back from endpoint
             this.zipCodeData.zipCode = this.localZipCode;
@@ -263,12 +262,11 @@ export default {
                     );
 
                     if (!closestShops || closestShops.providers?.length === 0) {
-                        this.displayNoServiceAlert = true;
+                        // We need an alert for heavy trucks
                         return null;
                     }
                 } else {
                     getShopProviderData(this.localZipCode).then(async (result) => {
-                        this.displayNoShopsAlert = false;
                         this.localShopProviderData = result.data;
                         this.numberOfShopsToDisplay = 3;
                         this.updateShopsForZip();
@@ -278,8 +276,6 @@ export default {
         },
         updateShopsForZip() {
             if (!this.shopProviders.length) {
-                this.displayNoShopsAlert = true;
-                this.displaySeeMoreLocationsLink = false;
                 return;
             }
             if (
@@ -290,11 +286,6 @@ export default {
                 this.localSelectedProviderNumber = null;
             }
             // I think we should call our new pushGA Event here with new mapped data
-            this.displayNoShopsAlert = this.answers.length === 0;
-        },
-        resetAlerts() {
-            this.displayNoServiceAlert = false;
-            this.displayNoShopsAlert = false;
         },
         async setZipCodeAndShop() {
             const selectedProvider = this.shopProviders.find(