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 1/2] 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,

From 39966abc9f05fa331ec9601265685293cd3e39ad Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 16 Nov 2022 10:23:32 -0500
Subject: [PATCH 2/2] Update unit test.

---
 src/common-components/modal/modal.spec.js | 16 ++++++++++++++++
 src/common-components/modal/modal.vue     |  1 +
 2 files changed, 17 insertions(+)

diff --git a/src/common-components/modal/modal.spec.js b/src/common-components/modal/modal.spec.js
index 85472d6eb..2664accfa 100644
--- a/src/common-components/modal/modal.spec.js
+++ b/src/common-components/modal/modal.spec.js
@@ -6,6 +6,10 @@ describe("modal.vue", () => {
         // Act
         const wrapper = shallowMount(Modal, {
             mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
         });
         expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
     });
@@ -14,6 +18,10 @@ describe("modal.vue", () => {
         // Act
         const wrapper = shallowMount(Modal, {
             mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
         });
         expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
     });
@@ -22,6 +30,10 @@ describe("modal.vue", () => {
         // Act
         const wrapper = shallowMount(Modal, {
             mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
         });
         expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
     });
@@ -30,6 +42,10 @@ describe("modal.vue", () => {
         // Act
         const wrapper = shallowMount(Modal, {
             mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
         });
         expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
     });
diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index 9a8e6c211..d28e87bdd 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -61,6 +61,7 @@ export default {
         },
     },
     mounted() {
+        console.log("#1", document);
         const modal = document.querySelector("#" + this.cmsWidgetName);
         modal.addEventListener("hidden.bs.modal", (event) => {
             this.$refs.buttonMain.resetButtonStyle();