From d78a082f6a3f430cbba125e8294bd2b459fd6b30 Mon Sep 17 00:00:00 2001
From: brydon1 <michaela.brydon@safelite.com>
Date: Fri, 7 Jul 2023 14:20:22 -0400
Subject: [PATCH] Refactoring global rules

---
 src/constants/global-rules.js                 | 13 ++++
 .../customer-questions/customer-questions.vue | 24 ++++---
 .../capability-questions.vue                  | 16 ++---
 .../contact-details/contact-details.spec.js   | 47 ++++++++++---
 .../contact-details/contact-details.vue       | 67 ++++++++++---------
 .../molding-questions/molding-questions.vue   | 12 ++--
 src/layouts/part-questions/part-questions.vue | 13 ++--
 .../policy-holder-details.vue                 | 17 +++--
 .../policy-vehicles/policy-vehicles.vue       | 14 ++--
 .../provider-preference.vue                   | 11 +--
 .../tpa-recal-modal/tpa-recal-modal.vue       |  8 ++-
 .../service-packages/service-packages.vue     | 10 +--
 .../vin-lookup-methods/vin-lookup-methods.vue | 16 ++---
 src/layouts/welcome-page/welcome-page.vue     | 47 ++++++-------
 src/main.js                                   | 24 +++++++
 15 files changed, 206 insertions(+), 133 deletions(-)
 create mode 100644 src/constants/global-rules.js

diff --git a/src/constants/global-rules.js b/src/constants/global-rules.js
new file mode 100644
index 00000000..becfe2f9
--- /dev/null
+++ b/src/constants/global-rules.js
@@ -0,0 +1,13 @@
+const globalRules = {
+    POLICYHOLDER_FIRST_NAME_REQUIRED: 'policyholder-first-name-required',
+    POLICYHOLDER_LAST_NAME_REQUIRED: 'policyholder-last-name-required',
+    FIRST_NAME_REQUIRED: 'first-name-required',
+    LAST_NAME_REQUIRED: 'last-name-required',
+    PHONE_NUMBER_REQUIRED: 'phone-number-required',
+    EMAIL_ADDRESS_REQUIRED: 'email-required',
+    EMAIL_ADDRESS_FORMAT: 'email-address-format',
+    PHONE_NUMBER_FORMAT: 'phone-number-format',
+    OPTION_REQUIRED: 'option-required'
+};
+
+export default globalRules;
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
index f4062fe6..349d0702 100644
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue
@@ -8,7 +8,7 @@
                 ref="firstName"
                 inputId="08497a2efd9a4a73a70360ab47b4838d"
                 disableAutoFill
-                validationRules="first-name-required" />
+                :validationRules="rules.firstName" />
         </div>
     </div>
     <div class="row mb-4">
@@ -19,21 +19,15 @@
                 ref="lastName"
                 inputId="0030e56a57e74a4ab92de7fb8e97fec5"
                 disableAutoFill
-                validationRules="last-name-required" />
+                :validationRules="rules.lastName" />
         </div>
     </div>
 </template>
 
 <script>
-import addressQuestions from "@/iss-components/address-questions/address-questions";
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import { defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
-
-// DEFINE VALIDATION RULES
-defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
-defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
+import addressQuestions from '@/iss-components/address-questions/address-questions.vue';
+import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
+import globalRules from '@/constants/global-rules';
 
 export default {
     name: "customer-questions",
@@ -56,6 +50,14 @@ export default {
         },
         validationRules: String,
     },
+    data() {
+        return {
+            rules: {
+                firstName: globalRules.FIRST_NAME_REQUIRED,
+                lastName: globalRules.LAST_NAME_REQUIRED
+            }
+        };
+    },
     computed: {
         customerModel: {
             get: function () {
diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue
index 0b5cca78..b459c024 100644
--- a/src/layouts/capability-questions/capability-questions.vue
+++ b/src/layouts/capability-questions/capability-questions.vue
@@ -11,7 +11,7 @@
             :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
             :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
             :questionsData="questionsData"
-            validationRules="questions-required"
+            :validationRules="rules.optionRequired"
             v-model="selectedAnswers"
             @forwardButtonAction="forwardButtonAction"
             @back-click="navigateBack"
@@ -26,14 +26,11 @@ import { settleAllPromises } from '@/helpers/layout-helper';
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
 import { issPageValues } from "@/router/router-constants/issPage-values";
-import { Form, defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
+import { Form } from "vee-validate";
 import { useMainStore } from "@/store";
-import { errorMessages } from "@/constants/error-messages";
+import globalRules from '@/constants/global-rules';
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout.vue";
-// DEFINE VALIDATION RULES
-defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
   name: 'capability-questions',
@@ -45,8 +42,11 @@ export default {
   data() {
     return {
       questionsData: [],
-            selectedAnswers: {},
-            currentGlassIndex: 0,
+      selectedAnswers: {},
+      currentGlassIndex: 0,
+      rules: {
+        optionRequired: globalRules.OPTION_REQUIRED
+      }
     };
   },
   async beforeRouteEnter(to, from, next) {
diff --git a/src/layouts/contact-details/contact-details.spec.js b/src/layouts/contact-details/contact-details.spec.js
index f8e5293a..4f690197 100644
--- a/src/layouts/contact-details/contact-details.spec.js
+++ b/src/layouts/contact-details/contact-details.spec.js
@@ -4,7 +4,7 @@ import contactDetails from '@/layouts/contact-details/contact-details.vue';
 // Supporting Files
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper';
-import { getRandomString } from '@/helpers/data-generator';
+import { getRandomString } from '@/helpers/data-generation';
 // import { useMainStore } from '@/store';
 // import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
 // import { nextTick } from 'vue';
@@ -75,13 +75,24 @@ describe('contactDetails.vue', () => {
         });
         test('Should render text updates checkbox subcomponent', () => {
             // Arrange
-            const wrapper = shallowMount(contactDetails, getMountOptions());
+            const checkboxLabel = getRandomString(50, 100);
+            const mockMixin = {
+                methods: {
+                    getCmsContent: jest.fn().mockImplementation(() =>
+                        checkboxLabel),
+                    setCmsContent: jest.fn()
+                }
+            };
+            const mountOptions = getMountOptions();
+            mountOptions.mixins = [mockMixin];
+            const wrapper = shallowMount(contactDetails, mountOptions);
 
             // Act
             const textUpdatesCheckbox = wrapper.findComponent({ ref: 'requestTextUpdatesCheckbox' });
 
             // Assert
             expect(textUpdatesCheckbox.exists()).toBe(true);
+            expect(wrapper.vm.textContentText).toBe(`${checkboxLabel}*`);
         });
         test('Should render technician notes textarea question subcomponent', () => {
             // Arrange
@@ -93,29 +104,48 @@ describe('contactDetails.vue', () => {
             // Assert
             expect(notesQuestion.exists()).toBe(true);
         });
-        test.only('Should render disclaimer text', () => {
+        test('Should render disclaimer text', () => {
             // Arrange
-            const disclaimerText = 'the disclaimer.';
+            const disclaimerText = getRandomString(50, 100);
             const mockMixin = {
                 methods: {
                     getCmsContent: jest.fn().mockImplementation(() =>
-                        disclaimerText)
+                        disclaimerText),
+                    setCmsContent: jest.fn()
                 }
             };
             const mountOptions = getMountOptions();
             mountOptions.mixins = [mockMixin];
             const wrapper = shallowMount(contactDetails, mountOptions);
-            wrapper.vm.setCmsContent = jest.fn();
             const expectedDisclaimerText = `*${disclaimerText} I also agree to Safelite\'s`;
 
             // Act
             const componentText = wrapper.text();
 
             // Assert
+            expect(wrapper.vm.textUpdateDisclaimerText).toBe(`*${disclaimerText}`);
             expect(componentText).toContain(expectedDisclaimerText);
         });
-        test('Should render privacy policy link', () => {});
-        test('Should render terms of use link', () => {});
+        test('Should render privacy policy link', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const privacyPolicyLink = wrapper.findComponent({ ref: 'privacyPolicyLink' });
+
+            // Assert
+            expect(privacyPolicyLink.exists()).toBe(true);
+        });
+        test('Should render terms of use link', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const termsOfUseLink = wrapper.findComponent({ ref: 'termsOfUseLink' });
+
+            // Assert
+            expect(termsOfUseLink.exists()).toBe(true);
+        });
         test('Should render site footer', () => {
             // Arrange
             const wrapper = shallowMount(contactDetails, getMountOptions());
@@ -137,6 +167,7 @@ describe('contactDetails.vue', () => {
         });
     });
 
+    // move error tests
     describe('Errors', () => {
         test('Error rendered when first name cleared', () => {});
         test('Error rendered when last name cleared', () => {});
diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
index 96aed43f..59919fe8 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -8,45 +8,45 @@
             <div class="fade-on-route-transition position-relative">
                 <siteHeader
                     ref="siteHeader"
-                    cmsWidgetName="SiteHeaderWidget" />
+                    :cmsWidgetName="widget.siteHeader" />
                 <div class="container-fluid pb-2">
                     <siteSubHeader
                         id="sub-header"
                         ref="siteSubHeader"
                         class="margin-top-16"
-                        cmsWidgetName="SiteSubHeaderWidget" />
+                        :cmsWidgetName="widget.siteSubHeader" />
                     <textboxQuestion
                         ref="firstNameQuestion"
                         v-model="firstName"
                         class="margin-top-24"
                         inputId="firstName"
-                        cmsWidgetName="FirstNameQuestionWidget"
+                        :cmsWidgetName="widget.firstNameQuestion"
                         isRequired
-                        validationRules="first-name-required" />
+                        :validationRules="rules.firstName" />
                     <textboxQuestion
                         ref="lastNameQuestion"
                         v-model="lastName"
                         class="margin-top-16"
                         inputId="lastName"
-                        cmsWidgetName="LastNameQuestionWidget"
+                        :cmsWidgetName="widget.lastNameQuestion"
                         isRequired
-                        validationRules="last-name-required" />
+                        :validationRules="rules.lastName" />
                     <textboxQuestion
                         ref="emailQuestion"
                         v-model="email"
                         class="margin-top-16"
                         inputId="email"
-                        cmsWidgetName="EmailQuestionWidget"
+                        :cmsWidgetName="widget.emailQuestion"
                         isRequired
-                        validationRules="email-address-required|email-address-format" />
+                        :validationRules="rules.email" />
                     <textboxQuestion
                         ref="phoneNumberQuestion"
                         v-model="phoneNumber"
                         class="margin-top-16"
                         inputId="phoneNumber"
-                        cmsWidgetName="PhoneNumberQuestionWidget"
+                        :cmsWidgetName="widget.phoneNumberQuestion"
                         isRequired
-                        validationRules="phone-number-required|phone-number-format" />
+                        :validationRules="rules.phoneNumber" />
                     <checkbox
                         ref="requestTextUpdatesCheckbox"
                         v-model="requestTextUpdates"
@@ -63,7 +63,7 @@
                         :isDisabled="false"
                         :isRequired="false"
                         hasError="hasError"
-                        cmsWidgetName="NotesQuestionWidget"
+                        :cmsWidgetName="widget.notesQuestion"
                         maxLength="500"
                         inputRows="30" />
 
@@ -72,6 +72,7 @@
                         class="disclaimer margin-top-24">
                     {{ textUpdateDisclaimerText }} I also agree to Safelite's
                         <textLink
+                            ref="privacyPolicyLink"
                             class="disclaimer-link"
                             linkType="text"
                             text="Privacy Policy"
@@ -79,6 +80,7 @@
                             target="_blank" />
                         and
                         <textLink
+                            ref="termsOfUseLink"
                             class="disclaimer-link"
                             linkType="text"
                             text="Terms of Use"
@@ -88,7 +90,7 @@
 
                     <siteFooter
                         ref="siteFooter"
-                        cmsWidgetName="SiteFooterWidget"
+                        :cmsWidgetName="widget.siteFooter"
                         :isForwardActionDisabled="!meta.valid"
                         @forwardClicked="navigateForward"
                         @backClicked="backButtonAction" />
@@ -110,23 +112,10 @@ import textLink from '@/ux-components/text-link/text-link.vue';
 // Supporting files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
-import { Form, defineRule } from 'vee-validate';
-import { errorMessages } from '@/constants/error-messages';
+import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin';
 import { useMainStore } from '@/store';
-import { required, regex } from '@/helpers/validation-rules';
-
-// TODO define these globally and reuse
-defineRule('first-name-required', required(errorMessages.FIRST_NAME_REQUIRED));
-defineRule('last-name-required', required(errorMessages.LAST_NAME_REQUIRED));
-defineRule('phone-number-required', required(errorMessages.PHONE_NUMBER_REQUIRED));
-defineRule('phone-number-format',
-    regex(/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
-        errorMessages.PHONE_NUMBER_FORMAT));
-defineRule('email-address-required', required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-defineRule('email-address-format',
-    regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
-        errorMessages.EMAIL_ADDRESS_FORMAT));
+import globalRules from '@/constants/global-rules';
 
 export default {
     name: 'contact-details',
@@ -168,15 +157,33 @@ export default {
             email: useMainStore().order.customer.emailAddress,
             phoneNumber: useMainStore().order.customer.phoneNumber,
             requestTextUpdates: false,
-            notesForTechnician: ''
+            notesForTechnician: '',
+            widget: {
+                siteHeader: 'SiteHeaderWidget',
+                siteSubHeader: 'SiteSubHeaderWidget',
+                firstNameQuestion: 'FirstNameQuestionWidget',
+                lastNameQuestion: 'LastNameQuestionWidget',
+                emailQuestion: 'EmailQuestionWidget',
+                phoneNumberQuestion: 'PhoneNumberQuestionWidget',
+                requestTextUpdates: 'TextContentWidget',
+                notesQuestion: 'NotesQuestionWidget',
+                disclaimer: 'TextUpdateDisclaimerWidget',
+                siteFooter: 'SiteFooterWidget'
+            },
+            rules: {
+                firstName: globalRules.FIRST_NAME_REQUIRED,
+                lastName: globalRules.LAST_NAME_REQUIRED,
+                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
+            }
         };
     },
     computed: {
         textContentText() {
-            return `${this.getCmsContent('TextContentWidget', 'Text')}*`;
+            return `${this.getCmsContent(this.widget.requestTextUpdates, 'Text')}*`;
         },
         textUpdateDisclaimerText() {
-            return `*${this.getCmsContent('TextUpdateDisclaimerWidget', 'Text')}`;
+            return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
         }
     },
     methods:
diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue
index e06dfe58..c842a312 100644
--- a/src/layouts/molding-questions/molding-questions.vue
+++ b/src/layouts/molding-questions/molding-questions.vue
@@ -12,7 +12,7 @@
       :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
       :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
       :questionsData="questionsData"
-      validationRules="questions-required"
+      :validationRules="rules.optionRequired"
       v-model="selectedAnswers"
       @forwardButtonAction="forwardButtonAction"
       @back-click="navigateBack"
@@ -25,9 +25,7 @@
 // Import Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
+import globalRules from '@/constants/global-rules';
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import { useMainStore } from "@/store";
 import { issPageValues } from "@/router/router-constants/issPage-values";
@@ -37,9 +35,6 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { Form } from "vee-validate";
 import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout.vue";
 
-// DEFINE VALIDATION RULES
-defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
-
 export default {
   name: "molding-questions",
   mixins: [BaseFormMixin, vehicleQuestionsMixin],
@@ -65,6 +60,9 @@ export default {
       questionsData: [],
       selectedAnswers: {},
       currentGlassIndex: 0,
+      rules: {
+        optionRequired: globalRules.OPTION_REQUIRED
+      }
     };
   },
   computed: {
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index 58a60621..dabf15c3 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -6,7 +6,7 @@
             :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
             :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
             :questionsData="questionsData"
-            validationRules="questions-required"
+            :validationRules="rules.optionRequired"
             v-model="selectedAnswers"
             @forwardButtonAction="forwardButtonAction"
             @back-click="navigateBack"
@@ -23,14 +23,10 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { useMainStore } from '@/store';
 import { issPageValues } from "@/router/router-constants/issPage-values";
-import { Form, defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
+import { Form } from "vee-validate";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
-
-// DEFINE VALIDATION RULES
-defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
+import globalRules from '@/helpers/global-rules';
 
 export default {
     name: "part-questions",
@@ -59,6 +55,9 @@ export default {
             questionsData: [],
             selectedAnswers: {},
             currentGlassIndex: 0,
+            rules: {
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
         };
     },
     computed: {
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index 42c266b2..a8e3e963 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -15,7 +15,7 @@
                             isRequired
                             ref="policyHolderFirstName"
                             disableAutoFill
-                            validationRules="first-name-required" />
+                            :validationRules="rules.firstName" />
                             <textboxQuestion
                             class="mt-4"
                             inputId="lastNameField"
@@ -24,7 +24,7 @@
                             isRequired
                             ref="policyHolderLastName"
                             disableAutoFill
-                            validationRules="last-name-required" />
+                            :validationRules="rules.lastName" />
                         </div>
                     </div>
                     <siteFooter
@@ -51,16 +51,11 @@ import siteFooter from "@/iss-components/site-footer/site-footer";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { Form, defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
+import { Form } from "vee-validate";
+import globalRules from '@/constants/global-rules';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
 
-//define validation rules
-defineRule("first-name-required", required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
-defineRule("last-name-required", required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
-
 export default {
     name: "policy-holder-details",
     mixins: [BaseFormMixin],
@@ -68,6 +63,10 @@ export default {
         return {
             customerQuestions: this.getPolicyHolderDetailsFromStore(),
             vehiclesFound: [],
+            rules: {
+                firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
+                lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED
+            }
         };
     },
     setup() {
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index 3466f5b9..99120a9c 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -13,7 +13,7 @@
                                     class="px-4" 
                                     cmsWidgetName="PolicyVehiclesQuestion" 
                                     :vehicles="VehiclesForQuestions" 
-                                    validationRules="option-required"
+                                    :validationRules="rules.optionRequired"
                                     v-model="selectedVehicleVin"
                                     />
                                     <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/>
@@ -35,17 +35,14 @@ import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-qu
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { required } from "@/helpers/validation-rules";
-import { Form, defineRule } from "vee-validate";
+import { Form } from "vee-validate";
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { issPageValues } from "@/router/router-constants/issPage-values";
 import { useMainStore } from '@/store';
-import { errorMessages } from "@/constants/error-messages";
+import globalRules from '@/constants/global-rules';
 import { vehicleSelectionOptions } from "@/constants/vehicle-selection-options";
 import { endorsementOptions } from "@/constants/endorsement-options";
 
-// DEFINE VALIDATION RULES
-defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 export default {
     name: "policy-vehicles",
     mixins: [BaseFormMixin],
@@ -57,7 +54,10 @@ export default {
                 ? policyVehicles[0].vin
                 : "",
             displayGeneric: true,
-            bailout: false
+            bailout: false,
+            rules: {
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
         }
     },
     async beforeRouteEnter(to, from, next)
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 144b97a8..d9571ec8 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -11,7 +11,7 @@
                     groupName="prefQuestions"
                     buttonTypeString="providerPrefRadio"
                     v-model="selectedProvider"
-                    validationRules="option-required"
+                    :validationRules="rules.optionRequired"
                     isRequired
                     class="mx-5" />
                 <div class="px-5">
@@ -44,7 +44,6 @@
 // Import Supporting Files
 import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal";
@@ -52,7 +51,7 @@ import { issPageValues } from "@/router/router-constants/issPage-values";
 
 // Import Component
 import baseFormMixin from "@/mixins/base-form-mixin";
-import { Form, defineRule } from "vee-validate";
+import { Form } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer";
 import siteHeader from "@/iss-components/site-header/site-header";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
@@ -61,9 +60,8 @@ import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal";
 import steeringModal from "@/layouts/provider-preference/steering-modal/steering-modal";
 import shopPreferenceModal from "@/layouts/provider-preference/shop-preference-modal/shop-preference-modal";
 import tpaRecalModal from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue"
+import globalRules from '@/constants/global-rules';
 
-// DEFINE VALIDATION RULES
-defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
 const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
 
 export default {
@@ -88,6 +86,9 @@ export default {
             selectedProvider : null,
             showSteeringLink: false,
             tpaAcknowledgement: false,
+            rules: {
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
         };
     },
     async beforeRouteEnter(to, from, next) {
diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
index 5aaea389..57035130 100644
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@@ -13,7 +13,7 @@
                 <checkBox
                     class="mb-2"
                     :class="showError && ' has-error'"
-                    validationRules="option-required"
+                    :validationRules="rules.optionRequired"
                     checkboxName="tpaAcknowledgement"
                     buttonID="tpaAcknowledgement"
                     :tabIndex="0"
@@ -35,6 +35,7 @@
 import modal from "@/digital-components/modal/modal";
 import tpaRecalToggle from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue" 
 import checkBox from "@/ux-components/checkbox/checkbox.vue"
+import globalRules from "@/constants/global-rules";
 
 export default {
     name: "content-group-modal",
@@ -45,7 +46,10 @@ export default {
     data() {
         return {
             acknowledged: false,
-            showError: false
+            showError: false,
+            rules: {
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
         };
     },
     emits: ["buttonClick"],
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index aa023a47..c38adedf 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -14,7 +14,7 @@
                     :availableLineItems="availableLineItems"
                     @vapsItemsSelected="vapsItemsSelectedAction"
                     v-on:link-event="openModalAction"
-                    validationRules="option-required"
+                    :validationRules="rules.optionRequired"
                     isRequired
                     />
                     <p class="caption disclaimer" v-html="PriceDisclaimerText"></p>
@@ -52,8 +52,7 @@ import { required }               from '@/helpers/validation-rules';
 import { errorMessages }          from '@/constants/error-messages';
 import { Form, defineRule }       from 'vee-validate';
 import { allGlassPartsAndItemsHavePrices } from '@/layouts/service-packages/service-package-helper/service-package-helper'
-
-defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
+import globalRules from "@/constants/global-rules";
 
 const store = useMainStore();
 
@@ -112,7 +111,10 @@ export default {
             selectedVaps:       [],
             availableLineItems: [],
             supportingItems:    [],
-            pricedGlassParts:   []
+            pricedGlassParts:   [],
+            rules: {
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
         };
     },
     computed: {
diff --git a/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue b/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue
index 392dbdfa..82077f0a 100644
--- a/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue
+++ b/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue
@@ -5,7 +5,7 @@
     button-type-string="listButton"
     :question-text="questionTextFromCms"
     is-required
-    validation-rules="option-required"
+    :validation-rules="rules.optionRequired"
     data-test-id="vin-lookup-methods-button-question"
   />
 </template>
@@ -13,32 +13,30 @@
 <script>
 
 // Import Other Supporting Files
-import { defineRule } from 'vee-validate';
-import { required } from '@/helpers/validation-rules';
-import { errorMessages } from '@/constants/error-messages';
 import { useMainStore } from "@/store";
-import {vinLookupMethodSelections} from '@/constants/vin-lookup-methods';
+import { vinLookupMethodSelections } from '@/constants/vin-lookup-methods';
 import { settleAllPromises } from "@/helpers/layout-helper";
+import globalRules from '@/constants/global-rules';
 
 // Import Component
 import ButtonQuestion from '@/digital-components/button-question/button-question.vue';
 
-// Define Validation Rules
-defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
-
 export default {
   name: 'vin-lookup-methods',
   data() {
     return {
       questionTextFromCms: '',
       answersFromCms: [],
+      rules: {
+        optionRequired: globalRules.OPTION_REQUIRED
+      }
     };
   },
   props: {
     modelValue: String,
     cmsWidgetName: {
       type: String,
-      required,
+      required: true
     },
   },
   
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 4be1f187..3c32a1b6 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -15,7 +15,7 @@
                             ref="policyNumber"
                             disableAutoFill
                             :isDisabled="isPolicyHolderEnabled"
-                            validationRules="policy-number-required" />
+                            :validationRules="rules.policyNumber" />
                         </div>
                     </div>
                     <div class="row mt-4" v-if="this.isCoverageEnabled">
@@ -26,7 +26,7 @@
                             v-model="welcomePageModel.policyZipCode"
                             isRequired
                             ref="policyZip"
-                            validationRules="policy-zip-required|policy-zip-format" />
+                            :validationRules="rules.policyZip" />
                         </div>
                     </div>
                     <div class="row mt-4">
@@ -41,7 +41,7 @@
                             disableAutoFill
                             :max="new Date().toJSON().slice(0,10)"
                             :min="'1972-12-01'"
-                            validationRules="loss-date-required"
+                            :validationRules="rules.lossDate"
                             />
                         </div>
                     </div>
@@ -59,7 +59,7 @@
                             inputId="damageCauseQuestionField"
                             :options="DamageCauseOptions"
                             disableAutoFill
-                            validationRules="damage-option-required"
+                            :validationRules="rules.damageOption"
                             placeHolderText="Select an option"
                             id="welcomeDropdown"
                             />
@@ -71,7 +71,7 @@
                             inputId="phoneNumberField"
                             cmsWidgetName="PhoneNumberQuestion"
                             v-model="welcomePageModel.phoneNumber"
-                            validationRules="phone-number-required|phone-number-format"
+                            :validationRules="rules.phoneNumber"
                             isRequired
                             ref="phoneNumber"
                             mask="###-###-####"
@@ -85,7 +85,7 @@
                             cmsWidgetName="EmailAddressQuestion"
                             v-model="welcomePageModel.email"
                             ref="email"
-                            validationRules="email-address-required|email-address-format"
+                            :validationRules="rules.email"
                             isRequired
                             disableAutoFill />
                         </div>
@@ -101,7 +101,7 @@
                             ref="damageCity"
                             disableAutoFill
                             v-if="this.displayDamageCityQuestion"
-                            validationRules="loss-city-required" />
+                            :validationRules="rules.lossCity" />
                         </div>
                     </div>
                     <div class="row">
@@ -113,7 +113,7 @@
                             ref="state"
                             inputId="8fdf9dc2e13e430eb57529499dceb3eb"
                             :options="getStates"
-                            validationRules="loss-state-required"
+                            :validationRules="rules.lossState"
                             isRequired
                             disableAutoFill
                             v-if="this.displayDamageStateQuestion"
@@ -127,11 +127,11 @@
                         class="px-0 mt-4"
                         cmsWidgetName="GlassOnlyQuestion"
                         v-model="welcomePageModel.isDamageGlassOnly"
-                        inputId = "isDamageGlassOnly"
+                        inputId="isDamageGlassOnly"
                         :answers="DamageGlassOnlyOptions"
                         :questionText="DamageGlassOnlyQuestion"
                         buttonTypeString="listButtonHorizontal"
-                        validationRules="damage-option-required"
+                        :validationRules="rules.damageOption"
                         isRequired
                         isSmallQuestionLabelText
                         ref="glassOnlyDamage"
@@ -173,32 +173,17 @@
     import BaseFormMixin from '@/mixins/base-form-mixin.js';
     import { useMainStore } from '@/store';
     import { states } from "@/constants/states"
+    import globalRules from '@/constants/global-rules';
 
     //define validation rules
     defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-    defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
     defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
-    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
     defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
     defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
-    defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
-    defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
     defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
     defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
     defineRule("policy-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
 
-    defineRule("email-address-format",
-    regex(
-        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
-        errorMessages.EMAIL_ADDRESS_FORMAT
-    ));
-
-    defineRule("phone-number-format",
-    regex(
-        /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
-        errorMessages.PHONE_NUMBER_FORMAT
-    ));
-
 export default {
     name: "welcome-page",
     mixins: [BaseFormMixin],
@@ -206,6 +191,16 @@ export default {
         return {
             welcomePageModel: this.getWelcomePageModelFromStore(),
             vehiclesFound: [],
+            rules: {
+                policyNumber: 'policy-number-required',
+                policyZip: 'policy-zip-required|policy-zip-format',
+                lossDate: 'loss-date-required',
+                damageOption: 'damage-option-required',
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
+                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+                lossCity: 'loss-city-required',
+                lossState: 'loss-state-required'
+            }
         };
     },
     setup() {
diff --git a/src/main.js b/src/main.js
index a7b26869..f22116f2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,11 @@ import LoadScript from "vue-plugin-load-script";
 import analyticsMixin from "@/mixins/analytics-mixin.js";
 import experimentMixin from "@/mixins/experiment-mixin.js";
 
+import { defineRule } from 'vee-validate';
+import { errorMessages } from '@/constants/error-messages';
+import globalRules from '@/constants/global-rules';
+import { required, regex } from '@/helpers/validation-rules';
+
 // Vue App Setup
 const vueApp = createApp(App);
 
@@ -44,3 +49,22 @@ vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);
 
 vueApp.mount("#app");
+
+// define global rules
+defineRule(globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
+    required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
+defineRule(globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
+    required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
+
+defineRule(globalRules.FIRST_NAME_REQUIRED, required(errorMessages.FIRST_NAME_REQUIRED));
+defineRule(globalRules.LAST_NAME_REQUIRED, required(errorMessages.LAST_NAME_REQUIRED));
+defineRule(globalRules.PHONE_NUMBER_REQUIRED, required(errorMessages.PHONE_NUMBER_REQUIRED));
+defineRule(globalRules.PHONE_NUMBER_FORMAT,
+    regex(/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
+        errorMessages.PHONE_NUMBER_FORMAT));
+defineRule(globalRules.EMAIL_ADDRESS_REQUIRED, required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(globalRules.EMAIL_ADDRESS_FORMAT,
+    regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
+        errorMessages.EMAIL_ADDRESS_FORMAT));
+
+defineRule(globalRules.OPTION_REQUIRED, required(errorMessages.OPTION_REQUIRED));