From fc3e57321e495d133a1fb2a85ac39385a225f8bb Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Sun, 12 Jan 2025 15:41:57 -0500
Subject: [PATCH 01/15] CASH-79: fix problems when loader suppressed

---
 src/ux-components/button-main/button-main.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 9cc61e051..848cf3866 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -5,7 +5,7 @@
         :class="[
             isPrimary ? 'btn-primary' : 'btn-secondary',
             isFloat ? 'float-end' : '',
-            isLoaderDisplayed ? 'has-loader' : '',
+            (isLoaderDisplayed && !suppressLoader) ? 'has-loader' : '',
         ]"
         @click="clicked">
         <span class="m-0">{{ this.buttonText }}</span>
@@ -47,7 +47,7 @@ export default {
                 true
             );
             if (!this.isDisabled) {
-                this.isLoaderDisplayed = true;
+                if (!this.suppressLoader) this.isLoaderDisplayed = true;
                 this.$emit("click-event");
             }
         },

From 4bf51c09ea70cfee25480021e081e4fc06136b7b Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Sun, 12 Jan 2025 15:54:52 -0500
Subject: [PATCH 02/15] create new save progress components

---
 .../questions-page-layout.vue                 |   5 +
 .../save-progress-modal-question.vue          | 112 ++++++++++++++++++
 .../save-progress-question.vue                |  62 ++++++++++
 3 files changed, 179 insertions(+)
 create mode 100644 src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
 create mode 100644 src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.vue

diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index 982738394..281ffff0e 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -43,6 +43,9 @@
                         :isForwardActionDisabled="!isMetaValid"
                         @back-clicked="handleBackButtonAction"
                         @ForwardClicked="handleForwardButtonAction" />
+
+                    <saveProgressModalQuestion
+                        modalWidgetName="SaveProgressModalWidget" />
                 </div>
             </div>
         </div>
@@ -57,6 +60,7 @@ import questionChain from "@/digital-components/question-chain/question-chain";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 
 export default {
     name: "questions-page",
@@ -99,6 +103,7 @@ export default {
         funnelSubHeader,
         navbar,
         loadingModal,
+        saveProgressModalQuestion,
     },
 };
 </script>
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
new file mode 100644
index 000000000..e9c04f5e8
--- /dev/null
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -0,0 +1,112 @@
+<template>
+    <div class="save-progress-modal-question">
+        <buttonMain
+            ref="buttonMain"
+            :buttonText="buttonText"
+            loaderColor="white"
+            :suppressLoader="true"
+            @click-event="openModal" />
+        <modal
+            :ref="modalName"
+            :headerText="modalHeaderText"
+            :footerButtonText="modalButtonText"
+            @footer-button-event="saveProgress">
+            <p class="modal-body">{{ modalBodyText }}</p>
+            <saveProgressQuestion
+                ref="saveProgressQuestion"
+                v-model="userInput"
+                cmsWidgetName="SaveProgressQuestionWidget" />
+            <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";
+
+export default {
+    name: "save-progress-modal-question",
+
+    data() {
+        return {
+            userInput: "",
+        };
+    },
+    props: {
+        modelValue: Object,
+        modalWidgetName: String,
+        pageName: String,
+    },
+    computed: {
+        buttonText() {
+            return this.getCmsContent(this.modalWidgetName, "SubheaderText");
+        },
+        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: {
+        openModal() {
+            this.modal.openModal();
+            this.modal.resetButtonStyle();
+        },
+        closeModal() {
+            this.modal.closeModal();
+        },
+        async saveProgress() {
+            console.log("Saving Progress! userInput is: ", this.userInput);
+
+            // save email address to store
+            await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
+
+            // TODO send store call to send to new API (that triggers an email send)
+
+            // TODO hide button trigger and replace with success message
+
+        },
+    },
+
+    components: {
+        modal,
+        buttonMain,
+        saveProgressQuestion,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.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/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.vue
new file mode 100644
index 000000000..221aa3415
--- /dev/null
+++ b/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.vue
@@ -0,0 +1,62 @@
+<template>
+    <textboxQuestion
+        ref="saveProgressInputTextQuestion"
+        :cmsWidgetName="cmsWidgetName"
+        v-model="value"
+        inputId="saveProgressUserInput"
+        questionAlignment="center"
+        cornerStyle="rounded"
+        :displayQuestionText="true"
+        isRequired
+        @input="validateEmail"
+        validationRules="email-address-required|email-address-format" />
+</template>
+
+<script>
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+
+//Supporting Files
+import { defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// Define Validation Rules
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
+    "email-address-format",
+    regex(
+        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
+        errorMessages.EMAIL_ADDRESS_FORMAT
+    )
+);
+
+const EMAIL_REGEX = /[^a-zA-Z0-9_\-.+@]/g;
+
+export default {
+    name: "save-progress-question",
+    props: {
+        modelValue: String,
+        cmsWidgetName: String,
+    },
+    computed: {
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    methods: {
+        validateEmail() {
+            setTimeout(() => {
+                this.value = this.value.replace(EMAIL_REGEX, "");
+            });
+        },
+    },
+    components: {
+        textboxQuestion,
+    },
+};
+</script>

From ba32c8e417957df167a256873cd2b5f55f160229 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Sun, 12 Jan 2025 17:46:01 -0500
Subject: [PATCH 03/15] CASH-79: add ability to stop page scroll on modal
 open/close

---
 src/digital-components/modal/modal.vue                         | 3 +++
 .../layouts/questions-page-layout/questions-page-layout.vue    | 3 +--
 .../save-progress-modal-question.vue                           | 2 +-
 src/styles/common-styles.scss                                  | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 37ebee18e..f61238c2a 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -53,6 +53,7 @@ export default {
     props: {
         headerText: String,
         footerButtonText: String,
+        suppressPageScroll: Boolean,
         onModalOpenedCallback: {
             type: Function,
         },
@@ -107,8 +108,10 @@ export default {
         onModalClosed() {
             this.resetButtonStyle();
             this.onModalClosedCallback?.();
+            if (this.suppressPageScroll) document.querySelector("body").classList.remove("prevent-modal-scroll");
         },
         openModal() {
+            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);
diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index 281ffff0e..a82d77ff0 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -44,8 +44,7 @@
                         @back-clicked="handleBackButtonAction"
                         @ForwardClicked="handleForwardButtonAction" />
 
-                    <saveProgressModalQuestion
-                        modalWidgetName="SaveProgressModalWidget" />
+                    <saveProgressModalQuestion modalWidgetName="SaveProgressModalWidget" />
                 </div>
             </div>
         </div>
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 e9c04f5e8..748825b62 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
@@ -9,6 +9,7 @@
         <modal
             :ref="modalName"
             :headerText="modalHeaderText"
+            suppressPageScroll
             :footerButtonText="modalButtonText"
             @footer-button-event="saveProgress">
             <p class="modal-body">{{ modalBodyText }}</p>
@@ -80,7 +81,6 @@ export default {
             // TODO send store call to send to new API (that triggers an email send)
 
             // TODO hide button trigger and replace with success message
-
         },
     },
 
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 002debed8..a378f881e 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -77,7 +77,7 @@ body {
         }
     }
 }
-.modal-open {
+.modal-open:not(.prevent-modal-scroll) {
     .container-fluid {
         &.page-container-grouped-styles {
             overflow: hidden;

From 14b899453f069e66ea7411f54fa24d7c13398d03 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 10:01:42 -0500
Subject: [PATCH 04/15] CASH-79: add Save Progress success alert message

---
 .../save-progress-modal-question.vue          | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

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 748825b62..627900ef9 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
@@ -2,14 +2,21 @@
     <div class="save-progress-modal-question">
         <buttonMain
             ref="buttonMain"
+            v-if="!isProgressSaved"
             :buttonText="buttonText"
             loaderColor="white"
             :suppressLoader="true"
             @click-event="openModal" />
+        <alert
+            class="my-4"
+            v-else
+            cmsWidgetName="SaveProgressModalAlertWidget"
+            alertClass="alert-success" />
         <modal
             :ref="modalName"
             :headerText="modalHeaderText"
             suppressPageScroll
+            :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
             @footer-button-event="saveProgress">
             <p class="modal-body">{{ modalBodyText }}</p>
@@ -27,6 +34,7 @@ import saveProgressQuestion from "@/fmg-components/save-progress-modal-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-modal-question",
@@ -34,6 +42,7 @@ export default {
     data() {
         return {
             userInput: "",
+            isProgressSaved: false,
         };
     },
     props: {
@@ -69,15 +78,18 @@ export default {
             this.modal.openModal();
             this.modal.resetButtonStyle();
         },
-        closeModal() {
-            this.modal.closeModal();
-        },
+        // onModalClosed() {
+        //     this.isProgressSaved = true;
+        // },
         async saveProgress() {
             console.log("Saving Progress! userInput is: ", this.userInput);
 
             // 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;
+
             // TODO send store call to send to new API (that triggers an email send)
 
             // TODO hide button trigger and replace with success message
@@ -88,6 +100,7 @@ export default {
         modal,
         buttonMain,
         saveProgressQuestion,
+        alert,
     },
 };
 </script>

From 7a7ed5a17ad3947efbaac4f834e53cd9dd4c646c Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 10:03:27 -0500
Subject: [PATCH 05/15] CASH-79: add Save Progress success alert message

---
 .../save-progress-modal-question.vue                          | 4 ----
 1 file changed, 4 deletions(-)

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 627900ef9..6d0472541 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
@@ -16,7 +16,6 @@
             :ref="modalName"
             :headerText="modalHeaderText"
             suppressPageScroll
-            :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
             @footer-button-event="saveProgress">
             <p class="modal-body">{{ modalBodyText }}</p>
@@ -78,9 +77,6 @@ export default {
             this.modal.openModal();
             this.modal.resetButtonStyle();
         },
-        // onModalClosed() {
-        //     this.isProgressSaved = true;
-        // },
         async saveProgress() {
             console.log("Saving Progress! userInput is: ", this.userInput);
 

From ca5939d1efcd64554a0cc9be9959ac16866c0b84 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 11:36:51 -0500
Subject: [PATCH 06/15] CASH-79: move save progress out of
 questions-page-layout up to page level

---
 .../questions-page-layout.vue                    | 16 +++++++++++-----
 .../save-progress-modal-question.vue             |  3 +++
 src/layouts/part-questions/part-questions.vue    |  9 ++++++++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index a82d77ff0..2c4d71803 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -25,7 +25,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 question-chain-wrapper">
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                         <questionChain
                             ref="questionChain"
@@ -37,14 +37,14 @@
                             :validationRules="validationRules" />
                     </div>
 
+                    <slot></slot>
+
                     <navbar
                         ref="navbar"
                         cmsWidgetName="FunnelFooterWidget"
                         :isForwardActionDisabled="!isMetaValid"
                         @back-clicked="handleBackButtonAction"
                         @ForwardClicked="handleForwardButtonAction" />
-
-                    <saveProgressModalQuestion modalWidgetName="SaveProgressModalWidget" />
                 </div>
             </div>
         </div>
@@ -59,7 +59,6 @@ import questionChain from "@/digital-components/question-chain/question-chain";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 
 export default {
     name: "questions-page",
@@ -102,7 +101,6 @@ export default {
         funnelSubHeader,
         navbar,
         loadingModal,
-        saveProgressModalQuestion,
     },
 };
 </script>
@@ -116,5 +114,13 @@ export default {
             text-align: left;
         }
     }
+    .question-chain-wrapper {
+        display: flex;
+        flex-direction: column;
+
+        .nav-bar {
+            order: 1;
+        }
+    }
 }
 </style>
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 6d0472541..7df928ac8 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
@@ -102,6 +102,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.save-progress-modal-question {
+    order: 2;
+}
 .applied-promo {
     font-size: 0.875rem;
     font-weight: 500;
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index bc1ec308e..2c9e2c32c 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -12,13 +12,19 @@
             @forwardButtonAction="forwardButtonAction"
             @back-click="navigateBack"
             :key="currentGlassIndex"
-            :index="currentGlassIndex" />
+            :index="currentGlassIndex">
+            
+            <!-- save progress goes into <slot> on questions-page-layout -->
+            <saveProgressModalQuestion modalWidgetName="SaveProgressModalWidget" />
+
+        </questions-page-layout>
     </Form>
 </template>
 
 <script>
 // Components
 import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
+import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -185,6 +191,7 @@ export default {
     components: {
         Form,
         questionsPageLayout,
+        saveProgressModalQuestion,
     },
 };
 </script>

From 9d0322081c8b1b9488192ea32b3b680ebdd7d79b Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 12:53:04 -0500
Subject: [PATCH 07/15] CASH-79: conditionally show save progress based on
 email address in store

---
 .../save-progress-modal-question.vue                      | 2 ++
 src/layouts/part-questions/part-questions.vue             | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

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 7df928ac8..d462e8309 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
@@ -86,6 +86,8 @@ export default {
             // hide save progress button; show success message alert
             this.isProgressSaved = true;
 
+            this.modal.closeModal();
+
             // TODO send store call to send to new API (that triggers an email send)
 
             // TODO hide button trigger and replace with success message
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index 2c9e2c32c..5d146fbef 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -15,7 +15,9 @@
             :index="currentGlassIndex">
             
             <!-- save progress goes into <slot> on questions-page-layout -->
-            <saveProgressModalQuestion modalWidgetName="SaveProgressModalWidget" />
+            <saveProgressModalQuestion 
+                modalWidgetName="SaveProgressModalWidget"
+                v-if="!isEmailInStoreOnPageLoad" />
 
         </questions-page-layout>
     </Form>
@@ -58,9 +60,12 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
+        const emailFromStore = store.getters.order.customer.emailAddress;
+
         // Call the "next" function to complete the transition to this page.
         next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
             if (store.getters.externalParameterState?.isExternalParameter) {
                 if (store.getters.externalParameterServiceZip.zipCode) {
                     const serviceState = store.getters.order.serviceLocation.state;
@@ -84,6 +89,7 @@ export default {
             questionsData: null,
             selectedAnswers: {},
             currentGlassIndex: 0,
+            isEmailInStoreOnPageLoad: null,
         };
     },
     computed: {

From 6d8e1dfd47fb1ad0ac432f45c4c3be0343f20b09 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 13 Jan 2025 13:35:20 -0500
Subject: [PATCH 08/15] CASH-79-bm Styles and modal update for order of items.

---
 src/digital-components/modal/modal.vue        | 45 ++++++++++++-----
 .../save-progress-modal-question.vue          | 49 +++++++++++++++++++
 2 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index f61238c2a..e412678ff 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -25,17 +25,17 @@
                 </div>
                 <div class="modal-body ps-5 pe-5 pb-4 pt-1">
                     <slot></slot>
-                </div>
-                <div class="modal-footer px-5 py-4">
-                    <modalButtonMain
-                        isPrimary
-                        class="w-100"
-                        id="modalbtn"
-                        ref="modalButtonMain"
-                        loaderColor="white"
-                        :buttonText="footerButtonText"
-                        @click-event="validateAndEmit"
-                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
+                    <div class="modal-footer px-5 py-4">
+                        <modalButtonMain
+                            isPrimary
+                            class="w-100"
+                            id="modalbtn"
+                            ref="modalButtonMain"
+                            loaderColor="white"
+                            :buttonText="footerButtonText"
+                            @click-event="validateAndEmit"
+                            :class="isFooterButtonDisabled && 'form-test-invalid'" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -234,6 +234,29 @@ export default {
         }
     }
 }
+.save-progress-modal-question {
+    p.modal-body {
+        padding: 0;
+    }
+    .modal-body {
+        display: flex;
+        flex-direction: column;
+        .textbox-question {
+            padding: .25rem 0;
+            label {
+                text-align: left;
+                font-weight: 600;
+            }
+        }
+    }
+    .modal-disclaimer {
+        font-size: .75rem;
+        order: 2;
+    }
+    .modal-footer {
+        padding: 1.5rem 0;
+    }
+}
 body {
     .modal-backdrop {
         height: 100%;
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 6d0472541..609668de9 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
@@ -102,6 +102,55 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.save-progress-modal-question {
+    .btn-secondary {
+        position: relative;
+        background: $blue-100;
+        border: 1px solid transparent;
+        border-radius: $border-radius-lg;
+        color: $blue;
+        font-weight: 500;
+        font-size: .875rem;
+        transition: all 150ms linear;
+        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
+            transition: background 0s 0s ease-in-out;
+        }
+    }
+}
 .applied-promo {
     font-size: 0.875rem;
     font-weight: 500;

From 2b9ac34b48f9ea8ae9c9cee9f78516edfaaa5f83 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 14:20:17 -0500
Subject: [PATCH 09/15] CASH-79: hook up with new Save Quote and API

---
 src/layouts/part-questions/part-questions.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index 5d146fbef..199a39493 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -17,7 +17,8 @@
             <!-- save progress goes into <slot> on questions-page-layout -->
             <saveProgressModalQuestion 
                 modalWidgetName="SaveProgressModalWidget"
-                v-if="!isEmailInStoreOnPageLoad" />
+                v-if="!isEmailInStoreOnPageLoad"
+                @save-progress="saveProgress" />
 
         </questions-page-layout>
     </Form>
@@ -39,6 +40,7 @@ import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import baseMixin from "@/mixins/base-mixin.js";
+import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@@ -156,6 +158,9 @@ export default {
                 this.questionsData
             );
         },
+        saveProgress() {
+            saveQuote({ pageNameToLog: "part-questions" });
+        },
         async forwardButtonAction() {
             const questionAnswersArray = this.questionsData.map((glass) => {
                 return {

From 38dd729b0fa63b3dd9085284c44caf5946a73366 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 14:33:14 -0500
Subject: [PATCH 10/15] CASH-79: add emit trigger

---
 .../save-progress-modal-question.vue                       | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

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 a230c6ce3..dee45e242 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
@@ -88,9 +88,8 @@ export default {
 
             this.modal.closeModal();
 
-            // TODO send store call to send to new API (that triggers an email send)
-
-            // TODO hide button trigger and replace with success message
+            // send store call to send to new API (that triggers an email send)
+            this.$emit("save-progress");
         },
     },
 
@@ -106,7 +105,7 @@ export default {
 <style lang="scss" scoped>
 .save-progress-modal-question {
     order: 2;
-    
+
     .btn-secondary {
         position: relative;
         background: $blue-100;

From 2951d32275a1ac59c10bc413d5e3330adb7d4af0 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 14:45:19 -0500
Subject: [PATCH 11/15] CASH-79: add save progress feature to other questions
 pages

---
 .../capability-questions.vue                  | 20 ++++++++++++++++++-
 .../molding-questions/molding-questions.vue   | 20 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue
index 4d637c978..fa6371e0d 100644
--- a/src/layouts/capability-questions/capability-questions.vue
+++ b/src/layouts/capability-questions/capability-questions.vue
@@ -12,13 +12,22 @@
             @forwardButtonAction="forwardButtonAction"
             @back-click="navigateBack"
             :key="currentGlassIndex"
-            :index="currentGlassIndex" />
+            :index="currentGlassIndex">
+            
+            <!-- save progress goes into <slot> on questions-page-layout -->
+            <saveProgressModalQuestion 
+                modalWidgetName="SaveProgressModalWidget"
+                v-if="!isEmailInStoreOnPageLoad"
+                @save-progress="saveProgress" />
+
+        </questions-page-layout>
     </Form>
 </template>
 
 <script>
 // Components
 import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
+import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -31,6 +40,7 @@ import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import baseMixin from "@/mixins/base-mixin.js";
+import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@@ -52,9 +62,12 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
+        const emailFromStore = store.getters.order.customer.emailAddress;
+
         // Call the "next" function to complete the transition to this page.
         next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
             if (store.getters.externalParameterState?.isExternalParameter) {
                 if (store.getters.externalParameterServiceZip.zipCode) {
                     await baseMixin.methods.dispatchStoreAction(
@@ -76,6 +89,7 @@ export default {
             questionsData: null,
             selectedAnswers: {},
             currentGlassIndex: 0,
+            isEmailInStoreOnPageLoad: null,
         };
     },
     computed: {
@@ -145,6 +159,9 @@ export default {
                 this.questionsData
             );
         },
+        saveProgress() {
+            saveQuote({ pageNameToLog: "part-questions" });
+        },
         async forwardButtonAction() {
             const questionAnswersArray = this.questionsData.map((glass) => {
                 // get answerResult2 of returned answer
@@ -205,6 +222,7 @@ export default {
     components: {
         Form,
         questionsPageLayout,
+        saveProgressModalQuestion,
     },
 };
 </script>
diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue
index 00df8c04b..c054f0b35 100644
--- a/src/layouts/molding-questions/molding-questions.vue
+++ b/src/layouts/molding-questions/molding-questions.vue
@@ -12,13 +12,22 @@
             @forwardButtonAction="forwardButtonAction"
             @back-click="navigateBack"
             :key="currentGlassIndex"
-            :index="currentGlassIndex" />
+            :index="currentGlassIndex">
+            
+            <!-- save progress goes into <slot> on questions-page-layout -->
+            <saveProgressModalQuestion 
+                modalWidgetName="SaveProgressModalWidget"
+                v-if="!isEmailInStoreOnPageLoad"
+                @save-progress="saveProgress" />
+
+        </questions-page-layout>
     </Form>
 </template>
 
 <script>
 // Components
 import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
+import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -31,6 +40,7 @@ import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import baseMixin from "@/mixins/base-mixin.js";
+import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@@ -52,9 +62,12 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
+        const emailFromStore = store.getters.order.customer.emailAddress;
+
         // Call the "next" function to complete the transition to this page.
         next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
             if (store.getters.externalParameterState?.isExternalParameter) {
                 if (store.getters.externalParameterServiceZip.zipCode) {
                     await baseMixin.methods.dispatchStoreAction(
@@ -77,6 +90,7 @@ export default {
             questionsData: null,
             selectedAnswers: {},
             currentGlassIndex: 0,
+            isEmailInStoreOnPageLoad: null,
         };
     },
     computed: {
@@ -145,6 +159,9 @@ export default {
                 this.questionsData
             );
         },
+        saveProgress() {
+            saveQuote({ pageNameToLog: "part-questions" });
+        },
         async forwardButtonAction() {
             const questionAnswersArray = this.questionsData.map((glass) => {
                 return {
@@ -189,6 +206,7 @@ export default {
     components: {
         Form,
         questionsPageLayout,
+        saveProgressModalQuestion,
     },
 };
 </script>

From fb492119d30efddc58203927f958c2c04988025f Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 14:59:59 -0500
Subject: [PATCH 12/15] CASH-79: fix page names passed in

---
 src/layouts/capability-questions/capability-questions.vue | 2 +-
 src/layouts/molding-questions/molding-questions.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue
index fa6371e0d..d189f0f44 100644
--- a/src/layouts/capability-questions/capability-questions.vue
+++ b/src/layouts/capability-questions/capability-questions.vue
@@ -160,7 +160,7 @@ export default {
             );
         },
         saveProgress() {
-            saveQuote({ pageNameToLog: "part-questions" });
+            saveQuote({ pageNameToLog: "capability-questions" });
         },
         async forwardButtonAction() {
             const questionAnswersArray = this.questionsData.map((glass) => {
diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue
index c054f0b35..c314d7225 100644
--- a/src/layouts/molding-questions/molding-questions.vue
+++ b/src/layouts/molding-questions/molding-questions.vue
@@ -160,7 +160,7 @@ export default {
             );
         },
         saveProgress() {
-            saveQuote({ pageNameToLog: "part-questions" });
+            saveQuote({ pageNameToLog: "molding-questions" });
         },
         async forwardButtonAction() {
             const questionAnswersArray = this.questionsData.map((glass) => {

From 88356a0aaa5e5a1088d44ee4f0a94933ac0c555c Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 13 Jan 2025 15:24:25 -0500
Subject: [PATCH 13/15] Style for green checkmark and alert.

---
 .../save-progress-modal-question.vue          | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

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 dee45e242..420d0f9a8 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
@@ -105,7 +105,6 @@ export default {
 <style lang="scss" scoped>
 .save-progress-modal-question {
     order: 2;
-
     .btn-secondary {
         position: relative;
         background: $blue-100;
@@ -153,6 +152,27 @@ export default {
             transition: background 0s 0s ease-in-out;
         }
     }
+    :deep(.alert) {
+        border-radius: $border-radius-lg;
+        border: 1px solid $green;
+    }
+    :deep(.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;
+        }
+    }
 }
 .applied-promo {
     font-size: 0.875rem;

From 72526efcf288d8c274e71a391b9c1d14f54bd8c1 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 16:29:41 -0500
Subject: [PATCH 14/15] CASH-79: remove console log

---
 .../save-progress-modal-question.vue                            | 2 --
 1 file changed, 2 deletions(-)

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 420d0f9a8..dcbc5d76e 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
@@ -78,8 +78,6 @@ export default {
             this.modal.resetButtonStyle();
         },
         async saveProgress() {
-            console.log("Saving Progress! userInput is: ", this.userInput);
-
             // save email address to store
             await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
 

From b3457512fad21bd7a2fb12ed9381d4c9c2734dfb Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jan 2025 17:10:54 -0500
Subject: [PATCH 15/15] CASH-79: add unit test files

---
 .../save-progress-modal-question.spec.js      | 51 +++++++++++++++++++
 .../save-progress-question.spec.js            | 40 +++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 src/fmg-components/save-progress-modal-question/save-progress-modal-question.spec.js
 create mode 100644 src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.spec.js

diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.spec.js b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.spec.js
new file mode 100644
index 000000000..15fb1481d
--- /dev/null
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.spec.js
@@ -0,0 +1,51 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import saveProgressModalQuestion from "./save-progress-modal-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+jest.mock("@/digital-components/modal/modal", () => ({
+    methods: {
+        openModal: jest.fn(),
+        resetButtonStyle: jest.fn(),
+    },
+}));
+
+describe("save-progress-modal-question ", () => {
+    describe("when openModal is run ", () => {
+        test("the modal should open ", () => {
+            // Arrange
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: "",
+                    modalWidgetName: "testModal",
+                },
+            });
+
+            // Act
+            wrapper.vm.openModal();
+
+            // 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(saveProgressModalQuestion, mountOptions);
+
+    return { wrapper };
+}
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.spec.js b/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.spec.js
new file mode 100644
index 000000000..7cc3d100c
--- /dev/null
+++ b/src/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question.spec.js
@@ -0,0 +1,40 @@
+import { shallowMount } from "@vue/test-utils";
+import saveProgressQuestion from "./save-progress-question";
+
+describe("save-progress-question.vue", () => {
+    it("Should get the modelValue", async () => {
+        // Arrange
+        const text = "test";
+        const wrapper = shallowMount(saveProgressQuestion, {
+            props: {
+                modelValue: text,
+            },
+            attachTo: document.body,
+        });
+
+        // Act
+        const modelValueText = wrapper.vm.value;
+        wrapper.vm.value = "test also";
+
+        // Assert
+        expect(modelValueText).toEqual("test");
+    });
+
+    it("Should emit to set value", async () => {
+        // Arrange
+        const text = "test";
+        const wrapper = shallowMount(saveProgressQuestion, {
+            props: {
+                modelValue: text,
+            },
+            attachTo: document.body,
+        });
+
+        // Act
+        const modelValueText = wrapper.vm.value;
+        wrapper.vm.value = "test also";
+
+        // Assert
+        expect(wrapper.emitted("update:modelValue")).toEqual([["test also"]]);
+    });
+});