From 2bcf303fd1b12b3b00700ea53448c065b9d466ac Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 26 Feb 2026 09:15:57 -0500
Subject: [PATCH] recal modal WIP

---
 .../coverage-statement/coverage-statement.vue | 19 ++++---
 .../recal-modal/recal-modal.vue               | 57 +++++++++++++++++++
 .../service-packages/service-packages.vue     |  2 +-
 3 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 src/layouts/coverage-statement/recal-modal/recal-modal.vue

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 4af90c42..02d1b23f 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -101,9 +101,11 @@
                 </div>
             </div>
         </div>
+        <!-- <recalModal
+            :ref="RECAL_MODAL_REF_NAME"
+            cmsWidgetName="RecalModal" /> -->
         <contentGroupModal
             :ref="RECAL_MODAL_REF_NAME"
-            cssModalHeadlineClass="text-center"
             cmsWidgetName="RecalModal" />
         <cancelClaimModal
             :ref="CANCEL_CLAIM_REF_NAME"
@@ -116,13 +118,15 @@
 // Import Component
 import { Form } from 'vee-validate';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
 import cancelClaimModal from '@/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 import textLink from '@/ux-components/text-link/text-link.vue';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import afterpayModalBanner from '@/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue';
+// import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
+import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
+
 // Import Supporting Files
 import {
     fetchCmsContentForPage,
@@ -152,13 +156,14 @@ export default {
     components: {
         siteHeader,
         Form,
-        contentGroupModal,
         buttonMain,
         textBlock,
         textLink,
         siteFooter,
         cancelClaimModal,
-        afterpayModalBanner
+        afterpayModalBanner,
+        // recalModal,
+        contentGroupModal
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -355,7 +360,7 @@ export default {
     watch: {
         nextStepsBody(newValue, oldValue) {
             if (newValue !== oldValue) {
-                setupModalLink(this, 'RecalModal');
+                setupModalLink(this, RECAL_MODAL_REF_NAME);
             }
         }
     },
@@ -622,8 +627,4 @@ export default {
         }
     }
 }
-
-.modal {
-    overflow: hidden;
-}
 </style>
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
new file mode 100644
index 00000000..e9581411
--- /dev/null
+++ b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="recal-modal-container">
+        <modal
+            ref="recalModal">
+            <h5
+                class="header-text"
+                v-html="modalHeaderText"></h5>
+            <img
+                :src="modalImage"
+                class="mw-100 d-flex"
+                alt="" />
+            <div v-html="modalBodyText" class="modal-body"></div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from '@/digital-components/modal/modal.vue';
+
+export default {
+    name: 'recal-modal',
+    components: {
+        modal
+    },
+    computed: {
+        modalBodyText() {
+            return this.getCmsContent('RecalModal', 'BodyText');
+        },
+        modalHeaderText() {
+            return this.getCmsContent('RecalModal', 'HeaderText');
+        },
+        modalFooterText() {
+            return this.getCmsContent('RecalModal', 'FooterText');
+        },
+        modalImage() {
+            return this.getCmsContent('RecalModal', 'Image');
+        }
+    },
+    methods: {
+        openModal() {
+            this.$refs['RecalModal'].openModal();
+        },
+        closeModal() {
+            this.$refs['RecalModal'].closeModal();
+        },
+    }
+
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.modal) {
+    .modal-body {
+        padding-top: 10px;
+    }
+}
+</style>
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 403f327e..3b76c75b 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -57,7 +57,7 @@
                 cmsWidgetName="RearWiperModal" />
             <contentGroupModal
                 ref="RecalModal"
-                cssModalHeadlineClass="text-center"
+                cssModalHeadlineClass="text-start"
                 cmsWidgetName="RecalModal" />
         </div>
     </Form>