From 66e4184bcacd95159e2be71148bfe630777381aa Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 15 Nov 2022 15:50:05 -0500
Subject: [PATCH] CSR-946 fix button state and disable loader for modal
 buttons.

---
 src/common-components/modal/modal.vue         |  8 +++++++-
 src/ux-components/button-main/button-main.vue | 11 +++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index aa88fe9ea..9a8e6c211 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -25,7 +25,7 @@
                     <buttonMain
                         class="w-100"
                         ref="buttonMain"
-                        isPrimary
+                        suppressLoader
                         :buttonText="ModalCloseButtonText"
                         @click-event="buttonClick"
                         data-bs-dismiss="modal" />
@@ -60,6 +60,12 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
     },
+    mounted() {
+        const modal = document.querySelector("#" + this.cmsWidgetName);
+        modal.addEventListener("hidden.bs.modal", (event) => {
+            this.$refs.buttonMain.resetButtonStyle();
+        });
+    },
     components: {
         buttonMain,
     },
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 47d608b5b..5c705f49d 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,7 +1,7 @@
 <template>
     <button
         :aria-disabled="isDisabled"
-        class="btn d-flex align-items-center py-3 px-4 delay"
+        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
         :class="[
             isPrimary ? 'btn-primary' : 'btn-secondary',
             isFloat ? 'float-end' : '',
@@ -11,7 +11,7 @@
         <span class="m-0">{{ this.buttonText }}</span>
         <loader
             class="ms-2"
-            v-if="isLoaderDisplayed"
+            v-if="isLoaderDisplayed && !suppressLoader"
             v-bind:class="[this.loaderColor, this.loaderPosition]" />
     </button>
 </template>
@@ -28,6 +28,7 @@ export default {
         loaderColor: String,
         loaderPosition: String,
         isFloat: Boolean,
+        suppressLoader: Boolean,
     },
     data() {
         return {
@@ -50,6 +51,12 @@ export default {
                 this.$emit("click-event");
             }
         },
+        resetButtonStyle() {
+            this.isLoaderDisplayed = false;
+        },
+    },
+    mounted() {
+        this.isLoaderDisplayed = false;
     },
     components: {
         loader,