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