molding question updates

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

@@ -17,7 +17,7 @@
                 class="w-100"
                 :class="questionTextClasses">{{ questionText }}</span>
         </div>
-        <div class="w-100 d-flex justify-content-center">
+        <div class="w-100 d-flex justify-content-center fieldset-wrapper">
             <fieldset
                 class="w-100"
                 :aria-required="isRequired"

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -19,7 +19,8 @@
                     class="mt-5" />
                 <div
                     v-for="(questionsDatum, i) in questionsData"
-                    :key="questionsDatum.key">
+                    :key="questionsDatum.key"
+                    class="question-chain-wrapper">
                     <questionChain
                         v-if="showThisQuestionChain(questionsDatum, i)"
                         ref="questionChain"

src/layouts/molding-questions/molding-questions.vue

@@ -16,7 +16,8 @@
             :validationRules="rules.optionRequired"
             :index="currentGlassIndex"
             @forwardButtonAction="forwardButtonAction"
-            @backClick="navigateBackByVehicleQuestions" />
+            @backClick="navigateBackByVehicleQuestions"
+            @needHelpClick="requestCallbackBailout" />
     </Form>
 </template>
 <script>
@@ -28,6 +29,8 @@ import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
 import { useMainStore } from '@/store';
 import issPageValues from '@/router/router-constants/issPage-values';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import bailoutMessage from '@/constants/bailoutMessage';
+import navigationScenarios from '@/router/router-constants/navigation-scenarios';
 
 // Import Component
 import { Form } from 'vee-validate';
@@ -82,8 +85,7 @@ export default {
             );
         },
         partsOrQuestionsData() {
-            return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS)
-                .partsOrQuestions;
+            return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS).partsOrQuestions;
         }
     },
     mounted() {
@@ -101,8 +103,7 @@ export default {
         },
         getInitialQuestionData() {
             // get any questions that were already answered
-            const alreadyAnsweredQuestions =
-                useMainStore().damage.moldingQuestionAnswers;
+            const alreadyAnsweredQuestions = useMainStore().damage.moldingQuestionAnswers;
             this.questionsData = this.partsOrQuestionsData
                 .filter((x) => x.parts[0].childPartQuestions.length)
                 .map((glass, index) => {
@@ -161,17 +162,43 @@ export default {
             }
 
             this.navigateForward(partsOrQuestions, null);
+        },
+        requestCallbackBailout() {
+            this.mainStore.setBailout(bailoutMessage.RequestCallback());
+            this.$router.navigate(navigationScenarios.CLICKED_NEED_HELP_WITH_BAILOUT, this.$route);
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-#molding-question-wrapper p.text-body.small {
-    margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
-}
+#molding-question-wrapper {
+    :deep(.subheader-secondary) {
+        margin-top: .625rem;
 
-#molding-question-wrapper .form-test-error {
-    margin-top: 0 !important; // Overrides extra margin-top on error message text
+        p {
+            margin-bottom: 0;
+        }
+    }
+
+    :deep(.question-chain-wrapper) {
+        margin-top: 1.25rem;
+
+        .button-question:has(.list-button-horizontal) .question-text {
+            margin-bottom: 0;
+        }
+
+        .fieldset-wrapper {
+            margin-top: 0.625rem;
+        }
+    }
+
+    p.text-body.small {
+        margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
+    }
+
+    .form-test-error {
+         margin-top: 0 !important; // Overrides extra margin-top on error message text
+    }
 }
 </style>

src/router/router-constants/routing-table.js

@@ -277,6 +277,10 @@ const routingTable = () => [
             {
                 scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
                 destinationIssPageValue: issPageValues.COVERAGE_STATEMENT
+            },
+            {
+                scenario: navigationScenarios.CLICKED_NEED_HELP_WITH_BAILOUT,
+                destinationIssPageValue: issPageValues.BAILOUT_PAGE
             }
         ]
     },