From a50e9b8e5511fca290b599ac9fb07561790c323a Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 25 Feb 2026 12:33:26 -0500
Subject: [PATCH] modals WIP

---
 .../coverage-statement/coverage-statement.vue |   2 +-
 .../tpa-recal-modal/tpa-recal-modal.vue       | 139 ++++++++----------
 2 files changed, 62 insertions(+), 79 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 2026f289..4af90c42 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -355,7 +355,7 @@ export default {
     watch: {
         nextStepsBody(newValue, oldValue) {
             if (newValue !== oldValue) {
-                setupModalLink(this, RECAL_MODAL_REF_NAME);
+                setupModalLink(this, 'RecalModal');
             }
         }
     },
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
index 9ec70e28..0ef236c1 100644
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@@ -1,53 +1,56 @@
 <template>
-    <modal
-        :ref="ModalName"
-        :modalId="ModalName"
-        :footerButtonText="ModalCloseButtonText"
-        :isButtonDisabled="isButtonDisabled"
-        @footerButtonEvent="footerButtonClick">
-        <div class="form-test-invalid">
-            <h5 class="text-center mb-4">
-            {{ ModalHeadline }}
-            </h5>
-            <div>
-                <div
-                    class="mb-4"
-                    v-html="ModalBodyText"></div>
-                <tpaRecalToggle
-                    class="mb-5"
-                    cmsWidgetName="TPARecalModalToggle" />
-                <buttonQuestion
-                    ref="tpaRecalQuestion"
-                    v-model="tpaRecalAnswer"
-                    class="radioQuestion safelite-or-tpa-question windshield-chip-count-question mb-4"
-                    :cmsWidgetName="buttonCmsWidgetName"
-                    :questionText="tpaRecalQuestionText"
-                    :answers="tpaRecalAnswersFromCms"
-                    groupName="tpaRecalQuestion"
-                    buttonID="tpaRecalQuestion"
-                    buttonTypeString="listButtonHorizontal"
-                    isRequired></buttonQuestion>
-                <checkBox
-                v-if="showAcknowledgementCheckbox"
-                    ref="tpaAcknowledgement"
-                    v-model="acknowledged"
-                    class="mb-2"
-                    :class="showAcknowledgementError && ' has-error'"
-                    :validationRules="rules.optionRequired"
-                    checkboxName="tpaAcknowledgement"
-                    buttonID="tpaAcknowledgement"
-                    :tabIndex="0"
-                    :checkboxLabel="ModalSubBodyText"
-                    :screenReaderOnlyText="ModalSubBodyText"
-                    isRequired />
-                <div
-                    v-if="showAcknowledgementError || showNoSelectionError"
-                    class="row form-test-error mt-1">
-                    <p>{{ errorMessage }}</p>
+    <div class="tpa-recal-modal-container">
+        <modal
+            :ref="ModalName"
+            :modalId="ModalName"
+            :footerButtonText="ModalCloseButtonText"
+            :isButtonDisabled="isButtonDisabled"
+            @footerButtonEvent="footerButtonClick">
+            <div class="form-test-invalid">
+                <h5 class="text-center mb-4">
+                {{ ModalHeadline }}
+                </h5>
+                <div>
+                    <div
+                        class="mb-4"
+                        v-html="ModalBodyText"></div>
+                    <tpaRecalToggle
+                        class="mb-5"
+                        cmsWidgetName="TPARecalModalToggle" />
+                    <buttonQuestion
+                        ref="tpaRecalQuestion"
+                        v-model="tpaRecalAnswer"
+                        class="tpa-recal-question"
+                        :cmsWidgetName="buttonCmsWidgetName"
+                        :questionText="tpaRecalQuestionText"
+                        :answers="tpaRecalAnswersFromCms"
+                        groupName="tpaRecalQuestion"
+                        buttonID="tpaRecalQuestion"
+                        buttonTypeString="listButtonHorizontal"
+                        isRequired>
+                    </buttonQuestion>
+                    <checkBox
+                    v-if="showAcknowledgementCheckbox"
+                        ref="tpaAcknowledgement"
+                        v-model="acknowledged"
+                        class="mb-2"
+                        :class="showAcknowledgementError && ' has-error'"
+                        :validationRules="rules.optionRequired"
+                        checkboxName="tpaAcknowledgement"
+                        buttonID="tpaAcknowledgement"
+                        :tabIndex="0"
+                        :checkboxLabel="ModalSubBodyText"
+                        :screenReaderOnlyText="ModalSubBodyText"
+                        isRequired />
+                    <div
+                        v-if="showAcknowledgementError || showNoSelectionError"
+                        class="row form-test-error mt-1">
+                        <p>{{ errorMessage }}</p>
+                    </div>
                 </div>
             </div>
-        </div>
-    </modal>
+        </modal>
+    </div>
 </template>
 
 <script>
@@ -152,39 +155,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.modal {
-    &.modal-component {
-        .modal-dialog {
-            .modal-content {
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                        margin-bottom: .5rem;
-                    }
-                }
-            }
+:deep(.modal) {
+    .modal-body {
+        color: #4d4e53;
+    }
+    .modal-footer {
+        padding-top: 20px;
+        button {
+            background-color: $green;
+            color: $white;
         }
     }
-    .safelite-or-tpa-question {
-        :deep(.question-text) {
-            span {
-                font-weight: 500;
-            }
-        }
-    }
-}
-
-.form-test-error {
-    p {
-        font-weight: 500;
+    .tpa-recal-question > div:first-of-type { 
+        margin-bottom: 20px;
     }
 }
 </style>