From 4dc6887560a3b3f6571d153d21b817f1d079bd5d Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 17 Jul 2024 16:42:18 -0400
Subject: [PATCH 1/8] Mostly done

---
 .../cart-dropdown/cart-dropdown.vue           |  2 +-
 .../content-group-modal.vue                   |  1 +
 .../coverage-statement/coverage-statement.vue | 73 ++++++--------
 .../recal-modal/recal-modal.spec.js           | 66 -------------
 .../recal-modal/recal-modal.vue               | 89 -----------------
 .../review-dropdown/review-dropdown.vue       |  2 +-
 .../provider-preference.vue                   | 96 +++++++++----------
 src/router/index.js                           |  6 +-
 src/styles/common-typography-styles.scss      |  2 +-
 9 files changed, 83 insertions(+), 254 deletions(-)
 delete mode 100644 src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
 delete mode 100644 src/layouts/coverage-statement/recal-modal/recal-modal.vue

diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index 887a99f5..2013d0af 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/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;
     }
 
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..5c2651fa 100644
--- a/src/iss-components/content-group-modal/content-group-modal.vue
+++ b/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();
         },
 
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index eda94e71..d0d89d24 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/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"
-            class="recal-modal" />
+            cmsWidgetName="RecalModal" />
         <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 {
-    color: $green;
-    font-size: 2rem;
-    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;
+.coverage-statement {
+    .cost {
+        color: $green;
+        font-size: 2rem;
+        font-weight: $font-weight-light;
+        line-height: 2.75rem;
     }
-}
-
-:deep .question-text {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    & > span {
-        text-align: left;
+    .deductible-text {
+        line-height: 1.5rem;
+    }
+    :deep p {
+        line-height: 1.5rem;
+        font-size: 0.875rem;
+        margin-bottom: 0.5rem;
+        strong {
+            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;
 }
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js b/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
deleted file mode 100644
index 640f6572..00000000
--- a/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js
+++ /dev/null
@@ -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));
-    });
-});
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
deleted file mode 100644
index cca6b539..00000000
--- a/src/layouts/coverage-statement/recal-modal/recal-modal.vue
+++ /dev/null
@@ -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>
diff --git a/src/layouts/payment-method/review-dropdown/review-dropdown.vue b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
index 6979983b..5e836e82 100644
--- a/src/layouts/payment-method/review-dropdown/review-dropdown.vue
+++ b/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>
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 355d5364..6c51ea04 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/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 {
-    color: $black;
-}
-
-.question-text {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    & > span {
-        text-align: left;
+.provider-preference {
+    #sub-header span {
+        color: $black;
     }
-}
-
-: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;
-}
-
-:deep(.recal-modal) {
-    p {
-        font-size: 1rem;
-        line-height: 1.625rem;
-
-        &.modal-body {
-            padding: 0;
+    .question-text {
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+        & > span {
+            text-align: left;
         }
     }
+    :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>
diff --git a/src/router/index.js b/src/router/index.js
index 53dfb91f..2e3bd657 100644
--- a/src/router/index.js
+++ b/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;
         }
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index 30368d39..8d7d4210 100644
--- a/src/styles/common-typography-styles.scss
+++ b/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;
 }
 

From c4648df1f5a3a042bb89276d8c4f4cf95ed7554b Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 17 Jul 2024 17:14:39 -0400
Subject: [PATCH 2/8] More tweaks

---
 src/iss-components/cart-dropdown/cart-dropdown.vue   | 12 ++++++++----
 .../provider-preference/provider-preference.vue      | 10 ++++------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index 2013d0af..654be120 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -93,7 +93,7 @@
                                    linkType="text"
                                    :text="item?.name ?? ''"
                                    href="javascript:void(0)"
-                                   @clickEvent="openModal(recyclingModalCmsWidgetName)" />
+                                   @clickEvent="openModal(RECYCLING_MODAL_REF_NAME)" />
                             </span>
                             <span v-else>{{ item?.name ?? '' }}</span>
                             <span>{{ formatAmountInDollars(item?.subTotal ?? 0) }}</span>
@@ -146,7 +146,7 @@
                 </div>
             </div>
             <contentGroupModal
-                ref="RecycleModal"
+                :ref="RECYCLING_MODAL_REF_NAME"
                 :cmsWidgetName="recyclingModalCmsWidgetName">
                 <textBlock cmsWidgetName="RecycleTextBlock" />
             </contentGroupModal>
@@ -178,6 +178,7 @@ import {
 import { getPriceOfLineItems, getTaxOfLineItems } from '@/helpers/price-calculator';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
+const RECYCLING_MODAL_REF_NAME = "RecycleModal";
 
 export default {
     name: 'cart-dropdown',
@@ -209,7 +210,8 @@ export default {
                 servicePackage: 'ServicePackageTitle',
                 vapsItemDescriptions: 'VapsItemDescriptions'
             },
-            cartItemType
+            cartItemType,
+            RECYCLING_MODAL_REF_NAME
         };
     },
     computed: {
@@ -467,6 +469,8 @@ export default {
 <style lang="scss" scoped>
 @import "@/styles/ux-variables-svg-strings.scss";
 
+$RECYCLING_MODAL_REF_NAME: 'RecycleModal';
+
 .force-no-top-margin {
     margin-top: 0 !important;
 }
@@ -536,7 +540,7 @@ export default {
     max-width: fit-content;
 }
 
-:deep(#RecycleModal h5) {
+:deep(##{$MY_CONSTANT} h5) {
     text-align: center;
 }
 
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 6c51ea04..30c9ebef 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -41,9 +41,8 @@ ref="theForm"
                 </div>
             </div>
         </div>
-        <!--TODO update-->
         <contentGroupModal
-            ref="recalModal" 
+            :ref="RECAL_MODAL_REF_NAME" 
             cmsWidgetName="RecalModal" />
         <steeringModal
             ref="StateSteeringModal"
@@ -86,6 +85,7 @@ 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";
 
 export default {
     name: 'provider-preference',
@@ -124,6 +124,7 @@ export default {
     },
     data() {
         return {
+            RECAL_MODAL_REF_NAME,
             selectedProvider: null,
             showSteeringLink: false,
             tpaAcknowledgement: false,
@@ -173,7 +174,7 @@ export default {
     watch: {
         prefAnswers(newValue, oldValue) {
             if (newValue !== oldValue) {
-                setupModalLink(this, 'recalModal'); // TODO update
+                setupModalLink(this, RECAL_MODAL_REF_NAME);
             }
         }
     },
@@ -188,9 +189,6 @@ export default {
             : false;
     },
     methods: {
-        openModalAction(modalName) {
-            this.$refs[modalName.args].openModal();
-        },
         getHeaderTextFromCms(cmsWidgetName) {
             const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
             return headerText?.replace(

From ba8e1cf5f006cdcb9a7e8312e7205d7b41647fa5 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Thu, 18 Jul 2024 10:57:03 -0400
Subject: [PATCH 3/8] making consts for refs

---
 .../coverage-statement/coverage-statement.vue | 22 ++++++++-----
 .../provider-preference.vue                   | 31 ++++++++++++-------
 .../service-location/service-location.vue     | 15 ++++++---
 3 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index d0d89d24..4d0b2f59 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -76,7 +76,7 @@
                         cmsWidgetName="DisclaimerWidget"
                         typeStyle="caption" />
                     <siteFooter
-                        ref="siteFooter"
+                        :ref="SITE_FOOTER_REF_NAME"
                         class="mt-5"
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
@@ -86,10 +86,10 @@
             </div>
         </div>
         <contentGroupModal
-            ref="RecalModal"
+            :ref="RECAL_MODAL_REF_NAME"
             cmsWidgetName="RecalModal" />
         <contentGroupModal
-            ref="DeductibleModal"
+            :ref="DEDUCTIBLE_MODAL_REF_NAME"
             cmsWidgetName="DeductibleModal"
             class="deductible-modal" />
     </Form>
@@ -127,6 +127,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";
 
 export default {
     name: 'coverage-statement',
@@ -206,7 +209,10 @@ export default {
                 explanatoryText: 'ExplanatoryTextWidget',
                 nextStep: 'NextStepsWidget',
                 serviceProviderQuestion: 'ServiceProviderQuestion'
-            }
+            },
+            RECAL_MODAL_REF_NAME,
+            DEDUCTIBLE_MODAL_REF_NAME,
+            SITE_FOOTER_REF_NAME
         };
     },
     computed: {
@@ -328,17 +334,17 @@ export default {
                 this.selectedProvider === SAFELITE_PROVIDER
                     ? 'Continue with Safelite'
                     : 'Continue';
-            this.$refs.siteFooter.updateButtonText(buttonText);
+            this.$refs[SITE_FOOTER_REF_NAME].updateButtonText(buttonText);
         },
         nextStepsBody(newValue, oldValue) {
             if (newValue !== oldValue) {
-                setupModalLink(this, 'RecalModal');
-                setupModalLink(this, 'DeductibleModal');
+                setupModalLink(this, RECAL_MODAL_REF_NAME);
+                setupModalLink(this, DEDUCTIBLE_MODAL_REF_NAME);
             }
         },
         verifiedItacAlertBody(newValue, oldValue) {
             if (newValue !== oldValue) {
-                setupModalLink(this, 'DeductibleModal');
+                setupModalLink(this, DEDUCTIBLE_MODAL_REF_NAME);
             }
         }
     },
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 30c9ebef..bf3f500b 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -32,7 +32,7 @@ ref="theForm"
                         :validationRules="rules.optionRequired"
                         isRequired />
                     <siteFooter
-                        ref="siteFooter"
+                        :ref="SITE_FOOTER_REF_NAME"
                         class="mt-5"
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="isForwardActionDisabled"
@@ -45,15 +45,15 @@ ref="theForm"
             :ref="RECAL_MODAL_REF_NAME" 
             cmsWidgetName="RecalModal" />
         <steeringModal
-            ref="StateSteeringModal"
+            :ref="STEERING_MODAL_REF_NAME"
             cmsWidgetName="StateSteeringModal" />
         <shopPreferenceModal
-            ref="ShopPreferenceDrawer"
+            :ref="SHOP_PREFERENCE_MODAL_REF_NAME"
             cmsWidgetName="ShopPreferenceDrawer"
             :showSteeringLink="showSteeringLink"
             @openSteering="openStateSteeringModal" />
         <tpaRecalModal
-            ref="TPARecalModal"
+            :ref="TPA_RECAL_MODAL_REF_NAME"
             cmsWidgetName="TPARecalModal"
             :ackError="ackError"
             @buttonClick="navigateWithTPAAck" />
@@ -86,10 +86,13 @@ import contentGroupModal from '@/iss-components/content-group-modal/content-grou
 
 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";
 
 export default {
     name: 'provider-preference',
-
     components: {
         siteFooter,
         siteHeader,
@@ -116,21 +119,25 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
 
-            vm.showSteeringLink = !!vm.$refs.StateSteeringModal.ModalBodyText;
+            vm.showSteeringLink = !!vm.$refs[STEERING_MODAL_REF_NAME].ModalBodyText;
             if (vm.showSteeringLink) {
-                vm.$refs.StateSteeringModal.openModal();
+                vm.openStateSteeringModal();
             }
         });
     },
     data() {
         return {
-            RECAL_MODAL_REF_NAME,
             selectedProvider: null,
             showSteeringLink: false,
             tpaAcknowledgement: false,
             rules: {
                 optionRequired: globalRules.OPTION_REQUIRED
-            }
+            },
+            RECAL_MODAL_REF_NAME,
+            STEERING_MODAL_REF_NAME,
+            SHOP_PREFERENCE_MODAL_REF_NAME,
+            TPA_RECAL_MODAL_REF_NAME,
+            SITE_FOOTER_REF_NAME
         };
     },
     computed: {
@@ -229,8 +236,8 @@ export default {
                         this.mainStore.updateIsSafeliteProvider(false);
                         if (this.mainStore.issConfig.enableTPAFlow) {
                             if (this.mainStore.hasRecalibrationPart) {
-                                this.$refs.TPARecalModal.openModal();
-                                this.$refs.siteFooter.removeLoader();
+                                this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
+                                this.$refs[SITE_FOOTER_REF_NAME].removeLoader();
                                 return;
                             }
                             scenario =
@@ -253,7 +260,7 @@ export default {
             }
         },
         openStateSteeringModal() {
-            this.$refs.StateSteeringModal.openModal();
+            this.$refs[STEERING_MODAL_REF_NAME].openModal();
         }
     }
 };
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 831c826d..0bf33501 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -86,7 +86,7 @@
                         " />
                     <shopQuestion
                         v-show="isShopQuestionDisplayed"
-                        ref="shopQuestion"
+                        :ref="SHOP_QUESTION_REF_NAME"
                         v-model="selectedProvider"
                         :selectedAppointmentType="selectedAppointmentType"
                         :isDisplayed="isShopQuestionDisplayed"
@@ -95,10 +95,10 @@
                             setMobileProviderNumber
                         " />
                     <contentGroupModal
-                        ref="RecalModal"
+                        :ref="RECAL_MODAL_REF_NAME"
                         cmsWidgetName="RecalModal" />
                     <siteFooter
-                        ref="siteFooter"
+                        :ref="SITE_FOOTER_REF_NAME"
                         class="mt-5"
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="
@@ -152,6 +152,11 @@ defineRule('mobile-location-required', (value) => {
     return true;
 });
 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";
+
 export default {
     name: 'service-location',
     components: {
@@ -217,7 +222,7 @@ export default {
                 resultMap.mobileFeePart,
                 resultMap.shopQuestionInitialData?.mobileProviderNumber
             );
-            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
+            vm.$refs[SHOP_QUESTION_REF_NAME].initializeComponent(resultMap.shopQuestionInitialData);
         });
     },
     setup() {
@@ -389,7 +394,7 @@ export default {
             );
         },
         async reloadShopData(zipCode) {
-            await this.$refs.shopQuestion.reloadShopData(zipCode);
+            await this.$refs[SHOP_QUESTION_REF_NAME].reloadShopData(zipCode);
         },
         async forwardButtonAction() {
             let provider = this.selectedProvider;

From c91d526dc198bee043ffaa154b7611cd0cb19646 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Thu, 18 Jul 2024 10:58:48 -0400
Subject: [PATCH 4/8] Fixing bug

---
 src/iss-components/cart-dropdown/cart-dropdown.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index 654be120..ebb083fa 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -540,7 +540,7 @@ $RECYCLING_MODAL_REF_NAME: 'RecycleModal';
     max-width: fit-content;
 }
 
-:deep(##{$MY_CONSTANT} h5) {
+:deep(##{$RECYCLING_MODAL_REF_NAME} h5) {
     text-align: center;
 }
 

From e88c28708cb48f4dc91c874c5d38c4ea43a3fda3 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Thu, 18 Jul 2024 10:59:56 -0400
Subject: [PATCH 5/8] Remove comment

---
 src/iss-components/content-group-modal/content-group-modal.vue | 1 -
 1 file changed, 1 deletion(-)

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 5c2651fa..b66a5113 100644
--- a/src/iss-components/content-group-modal/content-group-modal.vue
+++ b/src/iss-components/content-group-modal/content-group-modal.vue
@@ -61,7 +61,6 @@ export default {
     },
     methods: {
         openModal() {
-            console.log(JSON.stringify(this.$refs));
             this.$refs[this.ModalName].openModal();
         },
 

From 1cbf2435433e06922745fdec1b4978cf24f62ed9 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Thu, 18 Jul 2024 11:03:08 -0400
Subject: [PATCH 6/8] Adding consts to data

---
 src/layouts/service-location/service-location.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 0bf33501..98f28e45 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -246,7 +246,10 @@ export default {
             mobileFeePart: null,
             mobileProviderNumber: null,
             zipContainsMilitaryBase: false,
-            zipCodeCtu: null
+            zipCodeCtu: null,
+            SHOP_QUESTION_REF_NAME,
+            RECAL_MODAL_REF_NAME,
+            SITE_FOOTER_REF_NAME
         };
     },
     computed: {

From ec98a1916c18307e95e065301e335d475072e40d Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Thu, 18 Jul 2024 11:04:19 -0400
Subject: [PATCH 7/8] Remove comments

---
 src/router/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 2e3bd657..53dfb91f 100644
--- a/src/router/index.js
+++ b/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); // TODO maybe here
+                    await GoToStartOn404(next);
                 }
 
                 // Process ISS cookie.
@@ -73,7 +73,7 @@ const routes = [
                     }
 
                     if (!arePagePrerequisitesValid(component)) {
-                        await GoToStartOn404(next);  // TODO maybe here
+                        await GoToStartOn404(next);
                     }
 
                     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);  // TODO maybe here
+                await GoToStartOn404(next);
             }
             return null;
         }

From 2895264c57181a76248185343598ff8eb96c123f Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Thu, 18 Jul 2024 11:24:26 -0400
Subject: [PATCH 8/8] updating snapshot tests

---
 .../cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap     | 1 +
 .../__snapshots__/coverage-statement.spec.js.snap              | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap
index dc913570..8f41a38c 100644
--- a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap
+++ b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`cart-dropdown component initial data rendered as expected 1`] = `
 Object {
+  "RECYCLING_MODAL_REF_NAME": "RecycleModal",
   "cartItemType": Object {
     "MOBILE_FEE": "MOBILE FEE",
     "RECYCLE_FEE": "RECYCLE FEE",
diff --git a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
index 32a0ca21..d0ca1a73 100644
--- a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
+++ b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
@@ -2,6 +2,9 @@
 
 exports[`coverageStatement.vue returns the initial data 1`] = `
 Object {
+  "DEDUCTIBLE_MODAL_REF_NAME": "DeductibleModal",
+  "RECAL_MODAL_REF_NAME": "RecalModal",
+  "SITE_FOOTER_REF_NAME": "siteFooter",
   "baseServiceLineItems": Array [],
   "deductibleText": "Your deductible is",
   "rules": Object {