From caf67637b3466ae5c66cf8af24305a05804b28e1 Mon Sep 17 00:00:00 2001
From: Johnny shultz <John.Shultz@safelite.com>
Date: Fri, 18 Jul 2025 11:46:14 -0400
Subject: [PATCH] CASH-1077

CASH-1077 added loader to popup
---
 .../shop-question/shop-question-popup.vue     | 100 +++++++++++-------
 1 file changed, 62 insertions(+), 38 deletions(-)

diff --git a/src/layouts/service-location/shop-question/shop-question-popup.vue b/src/layouts/service-location/shop-question/shop-question-popup.vue
index 84b6f3d3a..3198ca50f 100644
--- a/src/layouts/service-location/shop-question/shop-question-popup.vue
+++ b/src/layouts/service-location/shop-question/shop-question-popup.vue
@@ -31,43 +31,48 @@
                 :isRequired="false"
                 :validationRules="''" />
         </form>
-        <alert
-            ref="alertInvalidZip"
-            v-if="displayInvalidZipAlert"
-            class="mb-4"
-            cmsWidgetName="AlertInvalidZipWidget"
-            alertClass="alert-danger"
-            v-bind:isDismissible="false" />
-        <alert
-            ref="alertNoShops"
-            class="my-5"
-            cmsWidgetName="AlertNoShopsWidget"
-            v-if="displayNoShopsAlert"
-            alertClass="alert-warning" />
-        <div v-if="!displayInvalidZipAlert">
-            <buttonQuestion
-                ref="buttonQuestion"
-                buttonTypeString="shopListButton"
-                :buttonTypeObject="shopListButton"
-                class="radioQuestion"
-                :questionText="questionText"
-                :answers="answers"
-                groupName="chooseShop"
-                textPosition="text-start"
-                v-model="localSelectedProviderNumber"
-                isRequired
-                :validationRules="this.localSelectedProviderNumber ? '' : 'option-required'" />
-            <div class="show-more-shops-link">
-                <textLink
-                    v-if="displaySeeMoreLocationsLink"
-                    ref="showMoreShopsLink"
-                    id="showMoreShopsId2"
-                    cmsWidgetName="ShowMoreShopsLinkWidget"
-                    linkType="text"
-                    :text="showMoreShopsLinkText"
-                    href="#!"
-                    @click-event="updateShopListWithNextShops()"
-                    :aria-label="showMoreShopsLinkText" />
+        <div v-show="isLoading" class="loader-wrapper">
+            <loader loaderColor="blue" loaderPosition="center" />
+        </div>
+        <div v-show="!isLoading">
+            <alert
+                ref="alertInvalidZip"
+                v-if="displayInvalidZipAlert"
+                class="mb-4"
+                cmsWidgetName="AlertInvalidZipWidget"
+                alertClass="alert-danger"
+                v-bind:isDismissible="false" />
+            <alert
+                ref="alertNoShops"
+                class="my-5"
+                cmsWidgetName="AlertNoShopsWidget"
+                v-if="displayNoShopsAlert"
+                alertClass="alert-warning" />
+            <div v-if="!displayInvalidZipAlert">
+                <buttonQuestion
+                    ref="buttonQuestion"
+                    buttonTypeString="shopListButton"
+                    :buttonTypeObject="shopListButton"
+                    class="radioQuestion"
+                    :questionText="questionText"
+                    :answers="answers"
+                    groupName="chooseShop"
+                    textPosition="text-start"
+                    v-model="localSelectedProviderNumber"
+                    isRequired
+                    :validationRules="this.localSelectedProviderNumber ? '' : 'option-required'" />
+                <div class="show-more-shops-link">
+                    <textLink
+                        v-if="displaySeeMoreLocationsLink"
+                        ref="showMoreShopsLink"
+                        id="showMoreShopsId2"
+                        cmsWidgetName="ShowMoreShopsLinkWidget"
+                        linkType="text"
+                        :text="showMoreShopsLinkText"
+                        href="#!"
+                        @click-event="updateShopListWithNextShops()"
+                        :aria-label="showMoreShopsLinkText" />
+                </div>
             </div>
         </div>
     </modal>
@@ -87,6 +92,7 @@ import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
+import loader from "@/ux-components/loader/loader";
 
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
@@ -109,6 +115,7 @@ export default {
             localShopProviderData: this.shopProviderDataFromParent,
             localSelectedProviderNumber: null,
             zipCodeData: null,
+            isLoading: false,
         };
     },
     props: {
@@ -160,6 +167,7 @@ export default {
         },
         isModalFooterButtonDisabled() {
             return (
+                this.isLoading ||
                 this.displayInvalidZipAlert ||
                 this.displayNoShopsAlert ||
                 !this.localSelectedProviderNumber
@@ -248,8 +256,14 @@ export default {
             this.modal.closeModal();            
         },
         async onSearchZip(event) {
+            this.isLoading = true;
             event.preventDefault();
-            this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
+            if (this.localZipCode) {
+                this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
+            } else {
+                this.zipCodeData = { containsMilitaryBase: false, isServiceable: false, isValid: false, state: "", zipCode: this.localZipCode, zipCodeCtu: "" };
+                this.isLoading = false;
+            }
             // Add zipCode to zipCodeData as it does not come back from endpoint
             this.zipCodeData.zipCode = this.localZipCode;
             if (this.zipCodeData.isValid) {
@@ -270,8 +284,11 @@ export default {
                         this.localShopProviderData = result.data;
                         this.numberOfShopsToDisplay = 3;
                         this.updateShopsForZip();
+                        this.isLoading = false;
                     });
                 }
+            } else {
+                this.isLoading = false;
             }
         },
         updateShopsForZip() {
@@ -317,6 +334,7 @@ export default {
         serviceZipQuestion,
         buttonQuestion,
         alert,
+        loader,
     },
 };
 </script>
@@ -444,4 +462,10 @@ export default {
     display: block;
     width: 100%;
 }
+.loader-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+}
 </style>