jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactoring global rules

Browse source
This commit is contained in:
brydon1 2023-07-07 14:20:22 -04:00
parent c0352e703b
commit d78a082f6a
15 changed files with 206 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/constants/global-rules.js Normal file
View file

@ -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;

24
src/layouts/address-lookup/customer-questions/customer-questions.vue
View file

@ -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 () {

16
src/layouts/capability-questions/capability-questions.vue
View file

@ -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) {

47
src/layouts/contact-details/contact-details.spec.js
View file

@ -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', () => {});

67
src/layouts/contact-details/contact-details.vue
View file

@ -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:

12
src/layouts/molding-questions/molding-questions.vue
View file

@ -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: {

13
src/layouts/part-questions/part-questions.vue
View file

@ -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: {

17
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -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() {

14
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -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)

11
src/layouts/provider-preference/provider-preference.vue
View file

@ -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) {

8
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
View file

@ -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"],

10
src/layouts/service-packages/service-packages.vue
View file

@ -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: {

16
src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue
View file

@ -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
},
},

47
src/layouts/welcome-page/welcome-page.vue
View file

@ -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() {

24
src/main.js
View file

@ -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));