From 341d1b3ed36827ca2b30b75046564c0c23a10451 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 15 Jan 2025 11:54:08 -0500
Subject: [PATCH] Revert "Merge pull request #2198 from
 Safelite/feature/CASH-77"

This reverts commit 4d462fdb0af8e4a7f4cfe7e10bafc1dae94b5115, reversing
changes made to 94504194ea846c3b6313840daad7b2461b943cf6.
---
 src/digital-components/modal/modal.vue        |  49 +---
 .../save-progress-modal-question.vue          |  73 +++---
 .../save-progress-popup-question.spec.js      |  51 ----
 .../save-progress-popup-question.vue          | 227 ------------------
 .../capability-questions.vue                  |   4 +-
 .../molding-questions/molding-questions.vue   |   4 +-
 src/layouts/part-questions/part-questions.vue |   4 +-
 src/layouts/quote/quote.spec.js               |   4 +-
 src/layouts/quote/quote.vue                   |  49 +---
 9 files changed, 67 insertions(+), 398 deletions(-)
 delete mode 100644 src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js
 delete mode 100644 src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 2f9534750..e412678ff 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -2,9 +2,7 @@
     <!-- Modal -->
     <div
         class="modal fade modal-component"
-        :class="modalId"
         v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
-        :data-bs-backdrop="backdropSetting"
         :id="modalId"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
@@ -31,7 +29,7 @@
                         <modalButtonMain
                             isPrimary
                             class="w-100"
-                            :id="modalId + '-modalbtn'"
+                            id="modalbtn"
                             ref="modalButtonMain"
                             loaderColor="white"
                             :buttonText="footerButtonText"
@@ -56,7 +54,6 @@ export default {
         headerText: String,
         footerButtonText: String,
         suppressPageScroll: Boolean,
-        staticBackdrop: Boolean,
         onModalOpenedCallback: {
             type: Function,
         },
@@ -95,7 +92,7 @@ export default {
             e.preventDefault();
             if (this.isEnterClicked) return;
             this.isEnterClicked = true;
-            document.getElementById(this.modalId + "-modalbtn")?.focus();
+            document.getElementById("modalbtn")?.focus();
             this.$refs.modalButtonMain.clicked();
             document.getElementById(this.modalId)?.focus();
             setTimeout(() => {
@@ -111,12 +108,10 @@ export default {
         onModalClosed() {
             this.resetButtonStyle();
             this.onModalClosedCallback?.();
-            if (this.suppressPageScroll)
-                document.querySelector("body").classList.remove("prevent-modal-scroll");
+            if (this.suppressPageScroll) document.querySelector("body").classList.remove("prevent-modal-scroll");
         },
         openModal() {
-            if (this.suppressPageScroll)
-                document.querySelector("body").classList.add("prevent-modal-scroll");
+            if (this.suppressPageScroll) document.querySelector("body").classList.add("prevent-modal-scroll");
             const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
             modal.show();
             this.$emit("isModalOpened", true);
@@ -134,9 +129,6 @@ export default {
             }
             return !this.meta.dirty || !this.meta.valid;
         },
-        backdropSetting() {
-            return this.staticBackdrop ? "static" : "true";
-        },
     },
     components: {
         modalButtonMain,
@@ -249,45 +241,20 @@ export default {
     .modal-body {
         display: flex;
         flex-direction: column;
-
         .textbox-question {
-            padding: 0;
-
-            margin: 0 0 1.5rem 0;
-        }
-    }
-}
-
-.save-progress-modal-question,
-.save-progress-popup-question {
-    p.modal-body {
-        padding: 0;
-    }
-    .modal-body {
-        display: flex;
-        flex-direction: column;
-
-        .textbox-question {
-            padding: 0;
-
+            padding: .25rem 0;
             label {
                 text-align: left;
-                font-weight: 900;
+                font-weight: 600;
             }
         }
     }
-    .modal-body-inner {
-        text-align: center;
-        margin-bottom: 1.5rem;
-    }
     .modal-disclaimer {
-        font-size: 0.75rem;
+        font-size: .75rem;
         order: 2;
     }
     .modal-footer {
-        margin: 0 0 1.5rem 0;
-        padding-top: 0;
-        padding-bottom: 0;
+        padding: 1.5rem 0;
     }
 }
 body {
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
index c8465fef7..4ff6304f5 100644
--- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -6,7 +6,6 @@
             :buttonText="buttonText"
             loaderColor="white"
             :suppressLoader="true"
-            class="save-progress-button"
             @click-event="openModal" />
         <alert
             class="my-4"
@@ -19,7 +18,7 @@
             suppressPageScroll
             :footerButtonText="modalButtonText"
             @footer-button-event="saveProgress">
-            <p class="modal-body-inner">{{ modalBodyText }}</p>
+            <p class="modal-body">{{ modalBodyText }}</p>
             <saveProgressQuestion
                 ref="saveProgressQuestion"
                 v-model="userInput"
@@ -103,42 +102,50 @@ export default {
 
 <style lang="scss" scoped>
 .save-progress-modal-question {
-    margin-bottom: 1.5rem;
     order: 2;
-    text-align: center;
-    background: $blue-100;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
 
-    .save-progress-button {
-        order: 4;
+    .btn-secondary {
         position: relative;
+        background: $blue-100;
+        border: 1px solid transparent;
+        border-radius: $border-radius-lg;
         color: $blue;
-        border: none;
-        font-weight: 900;
-        font-size: 0.875rem;
-        text-align: center;
-        display: inline-block;
-        width: auto;
-        height: auto;
-        text-decoration: underline;
-        text-underline-offset: 0.375rem;
-        line-height: 1rem;
-        padding: 1rem;
-        margin: 0 auto;
+        font-weight: 500;
+        font-size: .875rem;
         transition: all 150ms linear;
-        background: none;
-
-        &:hover,
-        &:active,
-        &:focus,
-        &:focus-visible {
-            color: $blue-700;
-            background: none;
-            box-shadow: none;
+        height: 3.5rem;
+        width: 100%;
+        text-decoration: underline;
+        text-underline-offset: .5rem;
+        &:hover {
+            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+            color: $white;
+        }
+        &:focus, // Mouse, touch, stylus focus
+    &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow:
+                0 0 0 3px $white,
+                0 0 0 5.5px $blue-700;
+            color: $white;
+            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+        }
+        &:disabled {
+            background: transparent;
+            color: $gray-550 !important;
+            font-weight: 400;
+            height: 48px;
+            border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $blue;
+            background-color: $blue;
+            pointer-events: none;
         }
         &.delay {
             // fixes flicker while transitioning between states
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
deleted file mode 100644
index e2ca84f1d..000000000
--- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { mount, shallowMount } from "@vue/test-utils";
-import saveProgressPopupQuestion from "./save-progress-popup-question";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-
-jest.mock("@/digital-components/modal/modal", () => ({
-    methods: {
-        closeModal: jest.fn(),
-        resetButtonStyle: jest.fn(),
-    },
-}));
-
-describe("save-progress-popup-question ", () => {
-    describe("when closeModal is run ", () => {
-        test("the modal should close ", () => {
-            // Arrange
-            const { wrapper } = setupMocks({
-                props: {
-                    modelValue: "",
-                    modalWidgetName: "testModal",
-                },
-            });
-
-            // Act
-            wrapper.vm.closeModal();
-
-            // Assert
-            expect(wrapper.vm.modal).not.toBeNull();
-        });
-    });
-});
-
-function setupMocks({ options, props }) {
-    const mountOptions = getMountOptions({
-        ...options,
-    });
-
-    const mockBaseMixin = {
-        methods: {
-            getCmsContent: jest.fn(),
-            dispatchStoreAction: jest.fn(),
-        },
-    };
-
-    if (props) mountOptions.propsData = props;
-
-    mountOptions.global.mixins = [mockBaseMixin];
-
-    const wrapper = mount(saveProgressPopupQuestion, mountOptions);
-
-    return { wrapper };
-}
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
deleted file mode 100644
index 740385dac..000000000
--- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<template>
-    <div class="save-progress-popup-question" :class="[isProgressSaved ? 'progress-saved' : '']">
-        <modal
-            :ref="modalName"
-            :headerText="modalHeaderText"
-            suppressPageScroll
-            :staticBackdrop="true"
-            :onModalClosedCallback="onModalClosed"
-            :footerButtonText="modalButtonText"
-            @footer-button-event="saveProgress">
-            <p class="modal-body-inner">{{ modalBodyText }}</p>
-            <saveProgressQuestion
-                ref="saveProgressQuestion"
-                v-model="userInput"
-                cmsWidgetName="SaveProgressPopupQuestionWidget"
-                class="save-progress-popup-question" />
-            <buttonMain
-                ref="skipButton"
-                :buttonText="buttonText"
-                loaderColor="white"
-                :suppressLoader="true"
-                class="skip-button"
-                @click-event="closeModal" />
-            <alert
-                class="my-4"
-                v-if="isProgressSaved"
-                cmsWidgetName="SaveProgressModalAlertWidget"
-                alertClass="alert-success" />
-            <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
-        </modal>
-    </div>
-</template>
-
-<script>
-import saveProgressQuestion from "@/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question";
-import modal from "@/digital-components/modal/modal";
-import { storeActions } from "@/constants/store-actions.js";
-import buttonMain from "@/ux-components/button-main/button-main";
-import alert from "@/ux-components/alert/alert";
-
-export default {
-    name: "save-progress-popup-question",
-
-    data() {
-        return {
-            userInput: "",
-            isProgressSaved: false,
-        };
-    },
-    mounted() {
-        if (this.showSaveProgressPopup) this.modal.openModal();
-    },
-    emits: ["close-save-progress-popup", "save-progress"], // <--- should remove oodles of warnings in dev tools
-    props: {
-        modelValue: Object,
-        modalWidgetName: String,
-        pageName: String,
-        showSaveProgressPopup: Boolean,
-    },
-    computed: {
-        buttonText() {
-            return this.isProgressSaved
-                ? "Close"
-                : this.getCmsContent(this.modalWidgetName, "BodyText2");
-        },
-        modalHeaderText() {
-            return this.getCmsContent(this.modalWidgetName, "HeaderText");
-        },
-        modalBodyText() {
-            return this.getCmsContent(this.modalWidgetName, "BodyText");
-        },
-        modalButtonText() {
-            return this.getCmsContent(this.modalWidgetName, "FooterText");
-        },
-        modalDisclaimerText() {
-            return this.getCmsContent(this.modalWidgetName, "FooterText2");
-        },
-        modalName() {
-            return this.modalWidgetName;
-        },
-        modal() {
-            return this.$refs[this.modalName];
-        },
-    },
-    methods: {
-        closeModal() {
-            this.modal.closeModal();
-        },
-        onModalClosed() {
-            // send call to close popup
-            this.$emit("close-save-progress-popup");
-        },
-        async saveProgress() {
-            // save email address to store
-            await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
-
-            // hide save progress button; show success message alert
-            this.isProgressSaved = true;
-
-            // send store call to send to new API (that triggers an email send)
-            this.$emit("save-progress");
-
-            // send call to close popup
-            this.closeModal();
-            this.$emit("close-save-progress-popup");
-        },
-    },
-
-    components: {
-        modal,
-        buttonMain,
-        saveProgressQuestion,
-        alert,
-    },
-};
-</script>
-
-<style lang="scss">
-.save-progress-popup-question {
-    order: 2;
-    margin-bottom: 1.5rem;
-
-    .modal-header {
-        padding-top: 1rem;
-
-        .modal-title {
-            padding-top: 3rem;
-        }
-
-        .modal-title::before {
-            position: absolute;
-            content: "";
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 63 62'%3E%3Cpath fill='%23B3B4B5' d='M31.5 62c17.052 0 30.876-1.503 30.876-3.358 0-1.854-13.824-3.358-30.876-3.358S.624 56.788.624 58.642C.624 60.497 14.448 62 31.5 62Z' opacity='.4'/%3E%3Cpath fill='%23DA291C' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m33.358 52.715-4.574 4.573-24.192-24.2 4.491-4.491 24.275 24.118Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M58.408 13.402 55.61 30.469 33.356 52.715 9.083 28.597 31.411 6.269l17.067-2.797 9.93 9.93Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M45.586 19.907a3.618 3.618 0 1 0 0-7.237 3.618 3.618 0 0 0 0 7.237Z'/%3E%3C/svg%3E");
-            width: 3.875rem;
-            height: 3.875rem;
-            top: 2.5rem;
-            left: calc(50% - 3.875rem / 2);
-        }
-    }
-
-    .skip-button {
-        order: 4;
-        position: relative;
-        color: $black;
-        border: none;
-        font-weight: 900;
-        font-size: 0.875rem;
-        text-align: center;
-        display: inline-block;
-        width: auto;
-        height: auto;
-        text-decoration: underline;
-        text-underline-offset: 0.375rem;
-        line-height: 1rem;
-        padding: 0 0 4px 0;
-        margin: 0 auto 1.5rem auto;
-        transition: all 150ms linear;
-        background: none;
-
-        &:hover,
-        &:active,
-        &:focus,
-        &:focus-visible {
-            color: $blue-700;
-            background: none;
-            box-shadow: none;
-        }
-
-        &.delay {
-            // fixes flicker while transitioning between states
-            transition: background 0s 0s ease-in-out;
-        }
-    }
-    .alert {
-        border-radius: $border-radius-lg;
-        border: 1px solid $green;
-        order: 2;
-        margin: 0 0 1.5rem 0;
-    }
-    .alert-heading {
-        position: relative;
-        font-weight: 600;
-        font-size: 1rem;
-        color: $black;
-        text-align: left;
-        padding-left: 1.5rem;
-        &::before {
-            position: absolute;
-            content: "";
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
-            width: 1rem;
-            height: 1rem;
-            top: 6px;
-            left: 0;
-        }
-    }
-    .modal-footer {
-        order: 3;
-    }
-    .modal-disclaimer {
-        order: 4;
-    }
-
-    &.progress-saved {
-        .modal-footer,
-        .save-progress-popup-question {
-            display: none;
-        }
-    }
-}
-.applied-promo {
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 24px;
-    color: $green;
-
-    .promo-code {
-        text-transform: uppercase;
-    }
-}
-.alert {
-    color: $red;
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 24px;
-}
-</style>
diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue
index 9d51ec2f7..d189f0f44 100644
--- a/src/layouts/capability-questions/capability-questions.vue
+++ b/src/layouts/capability-questions/capability-questions.vue
@@ -13,11 +13,13 @@
             @back-click="navigateBack"
             :key="currentGlassIndex"
             :index="currentGlassIndex">
+            
             <!-- save progress goes into <slot> on questions-page-layout -->
-            <saveProgressModalQuestion
+            <saveProgressModalQuestion 
                 modalWidgetName="SaveProgressModalWidget"
                 v-if="!isEmailInStoreOnPageLoad"
                 @save-progress="saveProgress" />
+
         </questions-page-layout>
     </Form>
 </template>
diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue
index 2f2cc346c..c314d7225 100644
--- a/src/layouts/molding-questions/molding-questions.vue
+++ b/src/layouts/molding-questions/molding-questions.vue
@@ -13,11 +13,13 @@
             @back-click="navigateBack"
             :key="currentGlassIndex"
             :index="currentGlassIndex">
+            
             <!-- save progress goes into <slot> on questions-page-layout -->
-            <saveProgressModalQuestion
+            <saveProgressModalQuestion 
                 modalWidgetName="SaveProgressModalWidget"
                 v-if="!isEmailInStoreOnPageLoad"
                 @save-progress="saveProgress" />
+
         </questions-page-layout>
     </Form>
 </template>
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index a5441acd6..199a39493 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -13,11 +13,13 @@
             @back-click="navigateBack"
             :key="currentGlassIndex"
             :index="currentGlassIndex">
+            
             <!-- save progress goes into <slot> on questions-page-layout -->
-            <saveProgressModalQuestion
+            <saveProgressModalQuestion 
                 modalWidgetName="SaveProgressModalWidget"
                 v-if="!isEmailInStoreOnPageLoad"
                 @save-progress="saveProgress" />
+
         </questions-page-layout>
     </Form>
 </template>
diff --git a/src/layouts/quote/quote.spec.js b/src/layouts/quote/quote.spec.js
index deca0d6d1..0d25eed9b 100644
--- a/src/layouts/quote/quote.spec.js
+++ b/src/layouts/quote/quote.spec.js
@@ -123,7 +123,7 @@ store.getters = {
         },
         customer: {
             emailAddress: "test@test.com",
-        },
+        }
     },
 };
 
@@ -141,7 +141,7 @@ afterEach(() => {
         },
         customer: {
             emailAddress: "test@test.com",
-        },
+        }
     };
 });
 
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 366a9d2cc..7fcb506ce 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,10 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div
-            class="container-fluid page-container-grouped-styles quote-page"
-            :class="showSaveProgressPopup ? 'show-save-progress-popup' : ''">
-            <div class="row justify-content-center funnel-header-wrapper">
+        <div class="container-fluid page-container-grouped-styles">
+            <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
@@ -79,9 +77,8 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
 
-                    <saveProgressModalQuestion
+                    <saveProgressModalQuestion 
                         modalWidgetName="SaveProgressModalWidget"
-                        modalName="SaveProgressModal"
                         v-if="!isEmailInStoreOnPageLoad"
                         @save-progress="saveProgress" />
 
@@ -92,18 +89,6 @@
                         class="mb-5 quote-disclaimer" />
                 </div>
             </div>
-
-            <div class="row justify-content-center save-progress-popup">
-                <div class="col-md-6 col-xl-4">
-                    <saveProgressPopupQuestion
-                        modalWidgetName="SaveProgressPopupWidget"
-                        modalName="SaveProgressPopup"
-                        v-if="!isEmailInStoreOnPageLoad && showSaveProgressPopup"
-                        :showSaveProgressPopup="showSaveProgressPopup"
-                        @save-progress="saveProgress"
-                        @close-save-progress-popup="closeSaveProgressPopup" />
-                </div>
-            </div>
         </div>
     </Form>
 </template>
@@ -121,7 +106,6 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import afterpayModalBanner from "@/layouts/quote/afterpay-modal-banner/afterpay-modal-banner";
 import recalDisclaimer from "@/layouts/quote/recal-disclaimer/recal-disclaimer.vue";
 import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
-import saveProgressPopupQuestion from "@/fmg-components/save-progress-popup-question/save-progress-popup-question";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -207,9 +191,7 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
         const emailFromStore = store.getters.order.customer.emailAddress;
-        const isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
-        const showSaveProgressPopup = isEmailInStoreOnPageLoad ? false : true;
-
+        
         const lineItems = deepClone(store.getters.order.lineItems);
         lineItems.vaps = lineItems.vaps ?? [];
         const nullSafeGlassParts = lineItems.glassParts ?? [];
@@ -290,8 +272,7 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.isEmailInStoreOnPageLoad = isEmailInStoreOnPageLoad;
-            vm.showSaveProgressPopup = showSaveProgressPopup;
+            vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
             vm.addableVaps = addableVaps;
             vm.lineItems = lineItems;
             vm.availableLineItems = pricingResults;
@@ -439,7 +420,6 @@ export default {
             holdParentAccountNumber: null,
             holdBillToAccountNumber: null,
             isEmailInStoreOnPageLoad: null,
-            showSaveProgressPopup: null,
         };
     },
     computed: {
@@ -486,6 +466,9 @@ export default {
         },
     },
     methods: {
+        async handleClick() {
+            await saveQuote({ pageNameToLog: "quote" });
+        },
         openModalAction(modalName) {
             this.$refs[modalName].openModal();
         },
@@ -527,13 +510,8 @@ export default {
             vehicleQuestionsMixin.methods.navigateBack(this);
         },
         saveProgress() {
-            this.isEmailInStoreOnPageLoad = true;
-            this.showSaveProgressPopup = false;
             saveQuote({ pageNameToLog: "quote" });
         },
-        closeSaveProgressPopup() {
-            this.showSaveProgressPopup = false;
-        },
         forwardButtonAction() {
             this.dispatchStoreAction(
                 this.storeActions.SAVE_PAYMENT_TYPE,
@@ -720,21 +698,10 @@ export default {
         promoModalQuestion,
         recalDisclaimer,
         saveProgressModalQuestion,
-        saveProgressPopupQuestion,
     },
 };
 </script>
-
 <style>
-.quote-page.show-save-progress-popup .row.justify-content-center {
-    display: none;
-
-    &.funnel-header-wrapper,
-    &.save-progress-popup {
-        display: block;
-    }
-}
-
 .funnel-sub-header {
     p {
         font-size: 1rem;