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