From 12bd0ff08c5639236c94b722a41b69a47cbf038b Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 24 Jul 2024 16:39:35 -0400
Subject: [PATCH] add cssModalHeadlineClass  prop to add custom css

---
 .../content-group-modal/content-group-modal.vue     |  9 ++++++++-
 .../coverage-statement/coverage-statement.vue       |  7 ++++---
 .../provider-preference/provider-preference.vue     | 13 +++++++------
 src/layouts/service-location/service-location.vue   |  7 ++++---
 src/layouts/service-packages/service-packages.vue   |  1 +
 5 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/iss-components/content-group-modal/content-group-modal.vue b/src/iss-components/content-group-modal/content-group-modal.vue
index b66a5113..df4e8f45 100644
--- a/src/iss-components/content-group-modal/content-group-modal.vue
+++ b/src/iss-components/content-group-modal/content-group-modal.vue
@@ -10,6 +10,7 @@
             alt="" />
         <h5
             class="mb-4"
+            :class="cssModalHeadlineClass"
             v-html="ModalHeadline"></h5>
         <p
             class="fw-bold mb-2 subheader-text"
@@ -34,7 +35,8 @@ export default {
         modal
     },
     props: {
-        cmsWidgetName: String
+        cmsWidgetName: String,
+        cssModalHeadlineClass: String
     },
     computed: {
         ModalName() {
@@ -88,6 +90,11 @@ export default {
                             margin-bottom: 0;
                         }
                     }
+                    h5 {
+                        &.text-center {
+                            text-align: center;
+                        }
+                    }
                 }
             }
         }
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 4d0b2f59..41f6d3b8 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -87,6 +87,7 @@
         </div>
         <contentGroupModal
             :ref="RECAL_MODAL_REF_NAME"
+            cssModalHeadlineClass="text-center"
             cmsWidgetName="RecalModal" />
         <contentGroupModal
             :ref="DEDUCTIBLE_MODAL_REF_NAME"
@@ -127,9 +128,9 @@ import coverageStatuses from '@/constants/coverage-statuses';
 import coverageType from '@/constants/coverage-type';
 
 const SAFELITE_PROVIDER = 'Safelite';
-const RECAL_MODAL_REF_NAME = "RecalModal";
-const DEDUCTIBLE_MODAL_REF_NAME = "DeductibleModal";
-const SITE_FOOTER_REF_NAME = "siteFooter";
+const RECAL_MODAL_REF_NAME = 'RecalModal';
+const DEDUCTIBLE_MODAL_REF_NAME = 'DeductibleModal';
+const SITE_FOOTER_REF_NAME = 'siteFooter';
 
 export default {
     name: 'coverage-statement',
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index bf3f500b..c6eb6986 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -42,7 +42,8 @@ ref="theForm"
             </div>
         </div>
         <contentGroupModal
-            :ref="RECAL_MODAL_REF_NAME" 
+            :ref="RECAL_MODAL_REF_NAME"
+            cssModalHeadlineClass="text-center"
             cmsWidgetName="RecalModal" />
         <steeringModal
             :ref="STEERING_MODAL_REF_NAME"
@@ -85,11 +86,11 @@ import bailoutMessage from '@/constants/bailoutMessage';
 import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
 
 const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
-const RECAL_MODAL_REF_NAME = "RecalModal";
-const STEERING_MODAL_REF_NAME = "StateSteeringModal";
-const SHOP_PREFERENCE_MODAL_REF_NAME = "ShopPreferenceDrawer";
-const TPA_RECAL_MODAL_REF_NAME = "TPARecalModal";
-const SITE_FOOTER_REF_NAME = "siteFooter";
+const RECAL_MODAL_REF_NAME = 'RecalModal';
+const STEERING_MODAL_REF_NAME = 'StateSteeringModal';
+const SHOP_PREFERENCE_MODAL_REF_NAME = 'ShopPreferenceDrawer';
+const TPA_RECAL_MODAL_REF_NAME = 'TPARecalModal';
+const SITE_FOOTER_REF_NAME = 'siteFooter';
 
 export default {
     name: 'provider-preference',
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 98f28e45..cdbaa9c4 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -96,6 +96,7 @@
                         " />
                     <contentGroupModal
                         :ref="RECAL_MODAL_REF_NAME"
+                        cssModalHeadlineClass="text-center"
                         cmsWidgetName="RecalModal" />
                     <siteFooter
                         :ref="SITE_FOOTER_REF_NAME"
@@ -153,9 +154,9 @@ defineRule('mobile-location-required', (value) => {
 });
 defineRule('selection-required', required(errorMessages.OPTION_REQUIRED));
 
-const SHOP_QUESTION_REF_NAME = "shopQuestion";
-const RECAL_MODAL_REF_NAME = "RecalModal";
-const SITE_FOOTER_REF_NAME = "siteFooter";
+const SHOP_QUESTION_REF_NAME = 'shopQuestion';
+const RECAL_MODAL_REF_NAME = 'RecalModal';
+const SITE_FOOTER_REF_NAME = 'siteFooter';
 
 export default {
     name: 'service-location',
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 0849ef35..658b5c37 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -51,6 +51,7 @@
                 cmsWidgetName="RearWiperModal" />
             <contentGroupModal
                 ref="RecalModal"
+                cssModalHeadlineClass="text-center"
                 cmsWidgetName="RecalModal" />
         </div>
     </Form>