From 73671f908c010b0f72df9fd0aaca103e1731ffa4 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Fri, 24 Jul 2026 13:29:19 -0400
Subject: [PATCH] Update various components for compatibility

---
 .../date-picker/date-picker.vue               | 36 +++++------
 src/digital-components/modal/modal.vue        |  1 +
 .../textbox-question/textbox-question.vue     |  7 +--
 src/experiment-components/donation-block.vue  |  1 +
 .../save-progress-popup-question.spec.js      | 60 +++++++++++++++++++
 .../save-progress-popup-question.vue          | 19 ++++--
 .../shop-question/shop-question-popup.vue     |  4 +-
 7 files changed, 96 insertions(+), 32 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index ae6ca6229..a94a4e079 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -114,11 +114,9 @@
                     </label>
                 </div>
             </div>
-            <loader
-                class="date-picker-loader"
-                :class="[loadingStatus !== 'none' ? 'show-loader' : '']"
-                loaderColor="blue"
-                loaderPosition="center" />
+            <div v-if="loadingStatus !== 'none'" class="date-picker-loader">
+                <loader loaderColor="blue" loaderPosition="center" />
+            </div>
             <div class="row form-test-error" id="date-of-month-error">
                 <ErrorMessage :name="customComponentId" class="small mt-1"></ErrorMessage>
             </div>
@@ -742,15 +740,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.date-picker-loader {
-    opacity: 0;
-    max-height: 0;
-
-    &.show-loader {
-        opacity: 1;
-        max-height: none;
-    }
-}
 .date-picker {
     position: relative;
     flex-grow: 0;
@@ -769,13 +758,20 @@ export default {
             font-family: UrbanistSemiBold;
         }
     }
-    .loader {
-        height: 2rem;
-        width: calc(100% - 1.5rem);
+    .date-picker-loader {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
 
-        &::after {
-            width: 1.5rem;
-            height: 1.5rem;
+        :deep(.loader) {
+            height: 2rem;
+            width: calc(100% - 1.5rem);
+
+            &::after {
+                width: 1.5rem;
+                height: 1.5rem;
+            }
         }
     }
     .month {
diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 9f2be7764..3518287fc 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -39,6 +39,7 @@
                         :id="modalId + '-modalbtn'"
                         ref="modalButtonMain"
                         loaderColor="white"
+                        loaderPosition="center"
                         :isDisabled="footerButtonDisabled"
                         :buttonText="footerButtonText"
                         @click-event="validateAndEmit"
diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 041af416c..ee9d06d69 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -65,10 +65,9 @@
                             data-test="image-upload"
                             @change="imageChanged" />
                     </label>
-                    <loader
-                        v-show="isImageProcessing"
-                        loaderColor="blue"
-                        class="loading-icon"></loader>
+                    <span v-if="isImageProcessing" class="loading-icon">
+                        <loader loaderColor="blue" />
+                    </span>
                 </template>
             </template>
         </div>
diff --git a/src/experiment-components/donation-block.vue b/src/experiment-components/donation-block.vue
index e48e66860..46d209d3b 100644
--- a/src/experiment-components/donation-block.vue
+++ b/src/experiment-components/donation-block.vue
@@ -50,6 +50,7 @@
                             ref="buttonMain"
                             :buttonText="DonationAddButtonCopy"
                             loaderColor="blue"
+                            loaderPosition="center"
                             class="w-100 mb-2 custom-secondary"
                             @click-event="handleDonationAction" />
                     </div>
diff --git a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js
index 29d102d01..1ba53a3a2 100644
--- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js
+++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js
@@ -233,6 +233,66 @@ describe("save-progress-popup-question ", () => {
         });
     });
 
+    describe("footer button suppression", () => {
+        test("should suppress the modal footer button on the phone tab", async () => {
+            const { wrapper } = setupMocks({
+                props: {
+                    modalWidgetName: "SaveProgressPopupWidget",
+                },
+            });
+
+            wrapper.vm.selectContactMethod("PhoneAnswer");
+            await wrapper.vm.$nextTick();
+
+            expect(wrapper.vm.isFooterButtonSuppressed).toBe(true);
+        });
+
+        test("should show the modal footer button on the email tab before save", () => {
+            const { wrapper } = setupMocks({
+                props: {
+                    modalWidgetName: "SaveProgressPopupWidget",
+                },
+            });
+
+            expect(wrapper.vm.isFooterButtonSuppressed).toBe(false);
+        });
+
+        test("should suppress the modal footer button after a successful email save", async () => {
+            const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);
+            const { wrapper } = setupMocks({
+                props: {
+                    modalWidgetName: "SaveProgressPopupWidget",
+                    pageName: "quote",
+                },
+            });
+
+            wrapper.vm.dispatchStoreAction = dispatchStoreAction;
+            wrapper.vm.userInput = "test@example.com";
+
+            await wrapper.vm.saveProgress();
+
+            expect(wrapper.vm.isFooterButtonSuppressed).toBe(true);
+        });
+
+        test("should reset the modal footer button loader before suppressing it after save", async () => {
+            const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);
+            const { wrapper } = setupMocks({
+                props: {
+                    modalWidgetName: "SaveProgressPopupWidget",
+                    pageName: "quote",
+                },
+            });
+
+            wrapper.vm.dispatchStoreAction = dispatchStoreAction;
+            wrapper.vm.userInput = "test@example.com";
+            wrapper.vm.modal.resetButtonStyle = jest.fn();
+
+            await wrapper.vm.saveProgress();
+
+            expect(wrapper.vm.modal.resetButtonStyle).toHaveBeenCalled();
+        });
+    });
+
     describe("saveProgress", () => {
         test("should save phone number and sms consent when phone tab is selected", async () => {
             const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);
diff --git a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
index fc4e95530..df5387543 100644
--- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
+++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
@@ -7,7 +7,7 @@
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
             :isFooterButtonPrimary="true"
-            :isFooterButtonSuppressed="isPhoneTabSelected && !isProgressSaved"
+            :isFooterButtonSuppressed="isFooterButtonSuppressed"
             @footer-button-event="saveProgress">
             <p class="modal-body-inner">{{ modalBodyText }}</p>
             <fieldset class="save-progress-popup-question__tabs">
@@ -71,9 +71,14 @@
                     ref="phoneSendButton"
                     :isPrimary="true"
                     class="w-100 modal-footer-button"
+                    loaderColor="white"
+                    loaderPosition="center"
                     :buttonText="modalButtonText"
                     @click-event="validatePhoneAndSave" />
-                <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
+                <p
+                    v-if="!isProgressSaved"
+                    class="modal-disclaimer"
+                    v-html="modalDisclaimerText"></p>
             </template>
             <alert
                 class="my-4"
@@ -193,6 +198,9 @@ export default {
         isPhoneTabSelected() {
             return this.contactMethod === saveProgressPopupContactMethods.PHONE;
         },
+        isFooterButtonSuppressed() {
+            return this.isProgressSaved || this.isPhoneTabSelected;
+        },
         phoneQuestionWidgetName() {
             return PHONE_QUESTION_WIDGET;
         },
@@ -272,6 +280,9 @@ export default {
             // send store call to send to new API (that triggers an email/SMS send)
             await saveQuote({ pageNameToLog: this.pageName });
 
+            this.modal?.resetButtonStyle();
+            this.resetPhoneSendButtonStyle();
+
             // hide save progress button; show success message alert
             this.savedContactMethod = this.contactMethod;
             this.isProgressSaved = true;
@@ -528,10 +539,6 @@ export default {
     }
 
     &.progress-saved {
-        .modal-footer-button,
-        .modal-disclaimer {
-            display: none;
-        }
         .skip-button {
             margin-bottom: 0;
         }
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 c66f4c79a..385fc27a3 100644
--- a/src/layouts/service-location/shop-question/shop-question-popup.vue
+++ b/src/layouts/service-location/shop-question/shop-question-popup.vue
@@ -32,10 +32,10 @@
                 :isRequired="false"
                 :validationRules="''" />
         </form>
-        <div v-show="isLoading" class="loader-wrapper">
+        <div v-if="isLoading" class="loader-wrapper">
             <loader loaderColor="blue" loaderPosition="center" />
         </div>
-        <div v-show="!isLoading">
+        <div v-if="!isLoading">
             <alert
                 ref="alertInvalidZip"
                 v-if="displayInvalidZipAlert"