Merge pull request #820 from Safelite/CSR-946-qa-fix-button-state

CSR-946 fix button state and disable loader for modal buttons.

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"]));
     });

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,13 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
     },
+    mounted() {
+        console.log("#1", document);
+        const modal = document.querySelector("#" + this.cmsWidgetName);
+        modal.addEventListener("hidden.bs.modal", (event) => {
+            this.$refs.buttonMain.resetButtonStyle();
+        });
+    },
     components: {
         buttonMain,
     },

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,