making consts for refs

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, RECAL_MODAL_REF_NAME);
-                setupModalLink(this, 'DeductibleModal');
+                setupModalLink(this, DEDUCTIBLE_MODAL_REF_NAME);
             }
         },
         verifiedItacAlertBody(newValue, oldValue) {
             if (newValue !== oldValue) {
-                setupModalLink(this, 'DeductibleModal');
+                setupModalLink(this, DEDUCTIBLE_MODAL_REF_NAME);
             }
         }
     },

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[TPA_RECAL_MODAL_REF_NAME].openModal();
-                                this.$refs.siteFooter.removeLoader();
+                                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();
         }
     }
 };

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;