Update various components for compatibility

src/digital-components/date-picker/date-picker.vue

@@ -114,11 +114,9 @@
                     </label>
                 </div>
             </div>
-            <loader
+            <div v-if="loadingStatus !== 'none'" class="date-picker-loader">
-                class="date-picker-loader"
+                <loader loaderColor="blue" loaderPosition="center" />
-                :class="[loadingStatus !== 'none' ? 'show-loader' : '']"
+            </div>
-                loaderColor="blue"
-                loaderPosition="center" />
             <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 {
+    .date-picker-loader {
-        height: 2rem;
+        display: flex;
-        width: calc(100% - 1.5rem);
+        justify-content: center;
+        align-items: center;
+        width: 100%;
 
-        &::after {
+        :deep(.loader) {
-            width: 1.5rem;
+            height: 2rem;
-            height: 1.5rem;
+            width: calc(100% - 1.5rem);
+
+            &::after {
+                width: 1.5rem;
+                height: 1.5rem;
+            }
         }
     }
     .month {

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"

src/digital-components/textbox-question/textbox-question.vue

@@ -65,10 +65,9 @@
                             data-test="image-upload"
                             @change="imageChanged" />
                     </label>
-                    <loader
+                    <span v-if="isImageProcessing" class="loading-icon">
-                        v-show="isImageProcessing"
+                        <loader loaderColor="blue" />
-                        loaderColor="blue"
+                    </span>
-                        class="loading-icon"></loader>
                 </template>
             </template>
         </div>

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>

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);

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;
         }

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"