Mostly done

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -492,7 +492,7 @@ export default {
 
     :deep(a) {
         padding-bottom: 0 !important;
-        line-height: 1.625 !important;
+        line-height: 1.625rem !important;
         text-underline-offset: auto !important;
     }
 

src/iss-components/content-group-modal/content-group-modal.vue

@@ -61,6 +61,7 @@ export default {
     },
     methods: {
         openModal() {
+            console.log(JSON.stringify(this.$refs));
             this.$refs[this.ModalName].openModal();
         },
 

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

@@ -4,7 +4,7 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="container-fluid fade-on-route-transition">
+        <div class="container-fluid fade-on-route-transition coverage-statement">
             <div class="row justify-content-center">
                 <div class="col-md-6 px-0 px-md-2">
                     <siteHeader
@@ -85,10 +85,9 @@
                 </div>
             </div>
         </div>
-        <recalModal
+        <contentGroupModal
             ref="RecalModal"
-            cmsWidgetName="RecalModal"
+            cmsWidgetName="RecalModal" />
-            class="recal-modal" />
         <contentGroupModal
             ref="DeductibleModal"
             cmsWidgetName="DeductibleModal"
@@ -100,7 +99,6 @@
 import { Form } from 'vee-validate';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
 import alert from '@/ux-components/alert/alert.vue';
 import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
@@ -137,7 +135,6 @@ export default {
         siteHeader,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        recalModal,
         alert,
         contentGroupModal,
         buttonQuestion,
@@ -464,41 +461,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.cost {
+.coverage-statement {
-    color: $green;
+    .cost {
-    font-size: 2rem;
+        color: $green;
-    font-weight: $font-weight-light;
+        font-size: 2rem;
-    line-height: 2.75rem;
+        font-weight: $font-weight-light;
-}
+        line-height: 2.75rem;
-
-.deductible-text {
-    line-height: 1.5rem;
-}
-
-:deep p {
-    line-height: 1.5rem;
-    font-size: 0.875rem;
-    margin-bottom: 0.5rem;
-    strong {
-        color: $black;
     }
-}
+    .deductible-text {
-
+        line-height: 1.5rem;
-:deep .question-text {
+    }
-    margin-top: 1.5rem;
+    :deep p {
-    margin-bottom: 0.5rem;
+        line-height: 1.5rem;
-    font-size: 1rem;
+        font-size: 0.875rem;
-    line-height: 1.5rem;
+        margin-bottom: 0.5rem;
-    & > span {
+        strong {
-        text-align: left;
+            color: $black;
+        }
+    }
+    :deep .question-text {
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+        font-size: 1rem;
+        line-height: 1.5rem;
+        & > span {
+            text-align: left;
+        }
     }
 }
 
 :deep .deductible-modal {
     p {
         margin-bottom: 0 !important;
-        font-size: 1rem;
-        line-height: 1.625rem;
     }
     img.mb-4 {
         margin: 0 !important;
@@ -511,17 +505,6 @@ export default {
     }
 }
 
-:deep(.recal-modal) {
-    p {
-        font-size: 1rem;
-        line-height: 1.625rem;
-
-        &.modal-body {
-            padding: 0;
-        }
-    }
-}
-
 .modal {
     overflow: hidden;
 }

src/layouts/coverage-statement/recal-modal/recal-modal.spec.js

@@ -1,66 +0,0 @@
-import { mount } from '@vue/test-utils';
-import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
-
-const mockCmsContent = {
-    HeaderText: 'Sample header text here.',
-    SubheaderText: 'Sample subheader text here.',
-    Image: 'https://www.sampleImage.sample',
-    BodyText: 'Sample body text here.',
-    FooterText: 'Sample footer text here.'
-};
-
-const mockMixin = {
-    methods: {
-        getCmsContent: jest.fn((widgetName, cmsFieldName) => mockCmsContent[cmsFieldName])
-    }
-};
-
-describe('modal.vue', () => {
-    it('Should display header text when HeaderText is defined in the CMS', async () => {
-        // Act
-        const wrapper = mount(recalModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: 'test'
-            },
-            attachTo: document.body
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent.HeaderText));
-    });
-
-    it('Should display subheader text when SubheaderText is defined in the CMS', async () => {
-        // Act
-        const wrapper = mount(recalModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: 'test'
-            },
-            attachTo: document.body
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent.SubheaderText));
-    });
-
-    it('Should insert image url when Image is defined in the CMS', async () => {
-        // Act
-        const wrapper = mount(recalModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: 'test'
-            },
-            attachTo: document.body
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent.Image));
-    });
-
-    it('Should display body text when BodyText is defined in the CMS', async () => {
-        // Act
-        const wrapper = mount(recalModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: 'test'
-            },
-            attachTo: document.body
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent.BodyText));
-    });
-});

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

@@ -1,89 +0,0 @@
-<template>
-    <modal
-        :ref="ModalName"
-        :modalId="ModalName"
-        :footerButtonText="ModalCloseButtonText"
-        @footerButtonEvent="closeModal">
-        <div class="recal-modal-body">
-            <h5
-                class="mb-4 text-center"
-                v-html="ModalHeadline"></h5>
-            <img
-                :src="ModalImage"
-                class="mw-100 d-flex mx-auto mb-4"
-                alt="" />
-            <p
-                class="fw-bold mb-2 subheader-text"
-                v-html="ModalSubheadertext"></p>
-            <p
-                class="mb-0 small modal-body"
-                v-html="ModalBodyText"></p>
-            <p
-                v-if="ModalSubBodyText"
-                class="my-4 caption modal-sub-body"
-                v-html="ModalSubBodyText">
-            </p>
-        </div>
-    </modal>
-</template>
-
-<script>
-import modal from '@/digital-components/modal/modal.vue';
-
-export default {
-    name: 'recal-modal',
-    components: {
-        modal
-    },
-    props: {
-        cmsWidgetName: String
-    },
-    computed: {
-        ModalName() {
-            return this.cmsWidgetName;
-        },
-        ModalHeadline() {
-            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
-        },
-        ModalSubheadertext() {
-            return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
-        },
-        ModalBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, 'BodyText');
-        },
-        ModalSubBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, 'BodyText2');
-        },
-        ModalImage() {
-            return this.getCmsContent(this.cmsWidgetName, 'Image');
-        },
-        ModalCloseButtonText() {
-            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
-        }
-    },
-    methods: {
-        openModal() {
-            this.$refs[this.ModalName].openModal();
-        },
-        closeModal() {
-            this.$refs[this.ModalName].closeModal();
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-
-:deep .recal-modal-body {
-    h5 {
-        color: $black;
-    }
-    .modal-body {
-        strong {
-            color: $black;
-            font-weight: 400;
-        }
-    }
-}
-
-</style>

src/layouts/payment-method/review-dropdown/review-dropdown.vue

@@ -163,7 +163,7 @@ export default {
     .label {
         color: $black;
         font-weight: 500;
-        line-height: 1.625;
+        line-height: 1.625rem;
     }
 }
 </style>

src/layouts/provider-preference/provider-preference.vue

@@ -3,7 +3,7 @@
 ref="theForm"
 @submit="onSubmit"
 @invalidSubmit="onInvalidSubmit">
-        <div class="container-fluid fade-on-route-transition">
+        <div class="container-fluid fade-on-route-transition provider-preference">
             <div class="row justify-content-center">
                 <div class="col-md-6 px-0 px-md-2">
                     <siteHeader
@@ -40,30 +40,31 @@ ref="theForm"
                         @forwardClicked="forwardButtonAction" />
                 </div>
             </div>
-            <recalModal
-                ref="recalModal"
-                cmsWidgetName="RecalModal"
-                class="recal-modal" />
-            <steeringModal
-                ref="StateSteeringModal"
-                cmsWidgetName="StateSteeringModal" />
-            <shopPreferenceModal
-                ref="ShopPreferenceDrawer"
-                cmsWidgetName="ShopPreferenceDrawer"
-                :showSteeringLink="showSteeringLink"
-                @openSteering="openStateSteeringModal" />
-            <tpaRecalModal
-                ref="TPARecalModal"
-                cmsWidgetName="TPARecalModal"
-                :ackError="ackError"
-                @buttonClick="navigateWithTPAAck" />
         </div>
+        <!--TODO update-->
+        <contentGroupModal
+            ref="recalModal" 
+            cmsWidgetName="RecalModal" />
+        <steeringModal
+            ref="StateSteeringModal"
+            cmsWidgetName="StateSteeringModal" />
+        <shopPreferenceModal
+            ref="ShopPreferenceDrawer"
+            cmsWidgetName="ShopPreferenceDrawer"
+            :showSteeringLink="showSteeringLink"
+            @openSteering="openStateSteeringModal" />
+        <tpaRecalModal
+            ref="TPARecalModal"
+            cmsWidgetName="TPARecalModal"
+            :ackError="ackError"
+            @buttonClick="navigateWithTPAAck" />
     </Form>
 </template>
 <script>
 // Import Supporting Files
 import {
     fetchCmsContentForPage,
+    setupModalLink,
     setupModalLinks
 } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
@@ -77,12 +78,12 @@ import { Form } from 'vee-validate';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
 import steeringModal from '@/layouts/provider-preference/steering-modal/steering-modal.vue';
 import shopPreferenceModal from '@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue';
 import tpaRecalModal from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue';
 import globalRules from '@/constants/global-rules';
 import bailoutMessage from '@/constants/bailoutMessage';
+import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
 
 const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
 
@@ -96,10 +97,10 @@ export default {
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
         buttonQuestion,
-        recalModal,
         steeringModal,
         shopPreferenceModal,
-        tpaRecalModal
+        tpaRecalModal,
+        contentGroupModal
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -169,6 +170,13 @@ export default {
             return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
         }
     },
+    watch: {
+        prefAnswers(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                setupModalLink(this, 'recalModal'); // TODO update
+            }
+        }
+    },
     mounted() {
         setupModalLinks(this);
         const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
@@ -180,6 +188,9 @@ export default {
             : false;
     },
     methods: {
+        openModalAction(modalName) {
+            this.$refs[modalName.args].openModal();
+        },
         getHeaderTextFromCms(cmsWidgetName) {
             const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
             return headerText?.replace(
@@ -250,35 +261,24 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-#sub-header span {
+.provider-preference {
-    color: $black;
+    #sub-header span {
-}
+        color: $black;
-
-.question-text {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    & > span {
-        text-align: left;
     }
-}
+    .question-text {
-
+        margin-top: 0;
-:deep(.safeliteLogo) {
+        margin-bottom: 0.5rem;
-    background-image: url(~@/assets/img/icons/logo.svg);
+        & > span {
-    background-repeat: no-repeat;
+            text-align: left;
-    background-size: 4.5rem;
-    margin: 0 0.25rem 0 0.25rem;
-    padding: 0 2.5rem 0 2.5rem;
-    background-position: center;
-}
-
-:deep(.recal-modal) {
-    p {
-        font-size: 1rem;
-        line-height: 1.625rem;
-
-        &.modal-body {
-            padding: 0;
         }
     }
+    :deep(.safeliteLogo) {
+        background-image: url(~@/assets/img/icons/logo.svg);
+        background-repeat: no-repeat;
+        background-size: 4.5rem;
+        margin: 0 0.25rem 0 0.25rem;
+        padding: 0 2.5rem 0 2.5rem;
+        background-position: center;
+    }
 }
 </style>

src/router/index.js

@@ -57,7 +57,7 @@ const routes = [
                 // If the saved session has timed out, clear the session, execute 404 logic.
                 if (getISSCookie() !== null && !isSavedSessionStillActive()) {
                     // await baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
-                    await GoToStartOn404(next);
+                    await GoToStartOn404(next); // TODO maybe here
                 }
 
                 // Process ISS cookie.
@@ -73,7 +73,7 @@ const routes = [
                     }
 
                     if (!arePagePrerequisitesValid(component)) {
-                        await GoToStartOn404(next);
+                        await GoToStartOn404(next);  // TODO maybe here
                     }
 
                     return next({ name: issPageToUse, query: to.query, params: to.params });
@@ -113,7 +113,7 @@ const routes = [
                 });
             } catch (error) {
                 window.console.warn(error);
-                await GoToStartOn404(next);
+                await GoToStartOn404(next);  // TODO maybe here
             }
             return null;
         }

src/styles/common-typography-styles.scss

@@ -2,7 +2,7 @@
 p,
 body {
   font-size: 1rem;
-  line-height: 1.625;
+  line-height: 1.625rem;
   font-weight: 400;
 }