ADAS recal modal

src/layouts/coverage-statement/coverage-statement.vue

@@ -10,7 +10,7 @@
                     cmsWidgetName="SiteHeaderWidget" />
             </div>
             <div class="iss-heritage-container-width">
-                <div v-if="!isPageLoading"
+                <div v-show="!isPageLoading"
                     class="coverage-statement-container iss-heritage-content-container-width">
                     <h5
                         ref="siteSubHeader"
@@ -104,9 +104,6 @@
         <recalModal
             :ref="RECAL_MODAL_REF_NAME"
             cmsWidgetName="RecalModal" />
-        <!-- <contentGroupModal
-            :ref="RECAL_MODAL_REF_NAME"
-            cmsWidgetName="RecalModal" /> -->
         <cancelClaimModal
             :ref="CANCEL_CLAIM_REF_NAME"
             @cancelClaimConfirmation="cancelClaim"
@@ -125,7 +122,6 @@ 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 {
@@ -162,8 +158,7 @@ export default {
         siteFooter,
         cancelClaimModal,
         afterpayModalBanner,
-        recalModal,
-        // contentGroupModal
+        recalModal
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {

src/layouts/coverage-statement/recal-modal/recal-modal.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="recal-modal-container">
         <modal
-            ref="recalModal">
+            ref="recalModal"
+            :footerButtonText="modalCloseButtonText"
+            @footerButtonEvent="footerButtonClick">
             <h5
                 class="header-text"
                 v-html="modalHeaderText"></h5>
@@ -9,7 +11,7 @@
                 :src="modalImage"
                 class="mw-100 d-flex"
                 alt="" />
-            <div v-html="modalBodyText" class="modal-body"></div>
+            <div v-html="modalBodyText" class="recal-modal-body"></div>
         </modal>
     </div>
 </template>
@@ -34,15 +36,18 @@ export default {
         },
         modalImage() {
             return this.getCmsContent('RecalModal', 'Image');
+        },
+        modalCloseButtonText() {
+            return this.getCmsContent('RecalModal', 'FooterText');
         }
     },
     methods: {
-        // openModal() {
-        //     this.$refs['RecalModal'].openModal();
-        // },
-        // closeModal() {
-        //     this.$refs['RecalModal'].closeModal();
-        // },
+        openModal() {
+            this.$refs.recalModal.openModal();
+        },
+        footerButtonClick() {
+            this.$refs.recalModal.closeModal();
+        },
     }
 
 };
@@ -50,8 +55,34 @@ export default {
 
 <style lang="scss" scoped>
 :deep(.modal) {
-    .modal-body {
-        padding-top: 10px;
+    &.modal-component {
+        .modal-dialog {
+            .modal-content {
+                .modal-body {
+                    padding-left: 1.25rem;
+                    padding-right: 1.25rem;
+                }
+            }
+        }
+        .modal-footer {
+            button {
+                &:hover {
+                    background-color: $white;
+                    color: #167cac;
+                }
+            }
+        }
+    }
+    .recal-modal-body {
+        padding: 10px 0 10px 0;
+        p:first-child {
+            margin-bottom: 10px;
+        }
+        p {
+            strong {
+                font-weight: 600;
+            }
+        }
     }
 }
 </style>