validation updates.

src/constants/error-messages.js

@@ -32,17 +32,21 @@ const errorMessages = Object.freeze({
     OPTION_REQUIRED: 'Please select an option',
     VEHICLE_REQUIRED: 'Please select a vehicle',
     POLICY_NUMBER_REQUIRED: 'Please enter your policy number',
+    POLICY_NUMBER_FORMAT: 'Please enter an alpha-numeric string',
     PHONE_NUMBER_REQUIRED: 'Please enter phone number',
     PHONE_NUMBER_FORMAT: 'Please enter your phone number. The format must be ###-###-####',
     POLICY_ZIP_REQUIRED: 'Please enter your policy ZIP',
     POLICY_ZIP_FORMAT: 'Please enter a valid ZIP',
     LOSS_CAUSE_REQUIRED: 'Please enter loss cause',
     LOSS_CITY_REQUIRED: 'Please enter a city',
+    LOSS_CITY_FORMAT: 'Please enter only alpha characters',
     LOSS_STATE_REQUIRED: 'Please select an option',
     LOSS_DATE_REQUIRED:
         'Please select a date. Format must be MM/DD/YYYY and the date must be not in the future',
     DAMAGE_DATE_REQUIREMENT:
         'Damage date must be within the past 10 years',
+    DAMAGE_DATE_NO_FUTURE_DATE:
+        'Damage date may not be in the future',
     DAMAGE_OPTION_REQUIRED: 'Please select an option',
 
     POLICYHOLDER_FIRST_NAME_REQUIRED: 'Please enter the policyholder first name',

src/layouts/welcome-page/welcome-page.vue

@@ -85,7 +85,7 @@
                                 cmsWidgetName="PhoneNumberQuestion"
                                 :validationRules="rules.phoneNumber"
                                 isRequired
-                                mask="###-###-####"
+                                :mask="mask"
                                 disableAutoFill />
                         </div>
                     </div>
@@ -153,7 +153,15 @@
                         id="welcomeFooter"
                         class="row position-sticky top-100">
                         <div class="col">
+                            <alert
+                                v-if="displayInvalidZipAlert"
+                                ref="alertInvalidZip"
+                                class="my-4"
+                                cmsWidgetName="AlertInvalidZipWidget"
+                                alertClass="alert-danger"
+                                :isDismissible="false" />
                             <siteFooter
+                                ref="siteFooter"
                                 class="mt-3"
                                 cmsWidgetName="SiteFooterWidget"
                                 :isForwardActionDisabled="!meta.valid"
@@ -173,6 +181,7 @@ import { Form, defineRule } from 'vee-validate';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import alert from '@/ux-components/alert/alert.vue';
 import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
 import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
@@ -192,7 +201,15 @@ import routerParams from '@/router/router-constants/router-params';
 // define validation rules
 defineRule('loss-date-required', required(errorMessages.LOSS_DATE_REQUIRED));
 defineRule('policy-number-required', required(errorMessages.POLICY_NUMBER_REQUIRED));
+defineRule(
+    'policy-number-format',
+    regex(/^~?[a-zA-Z0-9]+$/, errorMessages.POLICY_NUMBER_FORMAT)
+);
 defineRule('loss-state-required', required(errorMessages.LOSS_STATE_REQUIRED));
+defineRule(
+    'loss-city-format',
+    regex(/^[a-zA-Z .]+$/, errorMessages.LOSS_CITY_FORMAT)
+);
 defineRule('loss-city-required', required(errorMessages.LOSS_CITY_REQUIRED));
 defineRule('damage-option-required', required(errorMessages.DAMAGE_OPTION_REQUIRED));
 defineRule('policy-zip-required', required(errorMessages.POLICY_ZIP_REQUIRED));
@@ -210,12 +227,23 @@ defineRule('loss-date-gt-10-years', (value) => {
 
     return true;
 });
+defineRule('loss-date-lt-tomorrow', (value) => {
+    const lossDate = new Date(Date.parse(`${value}T00:00:00`));
+    const today = new Date();
+    const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0, 0);
+    if (lossDate >= tomorrow) {
+        return errorMessages.DAMAGE_DATE_NO_FUTURE_DATE;
+    }
+
+    return true;
+});
 
 export default {
     name: 'welcome-page',
     components: {
         siteHeader,
         siteSubHeader,
+        alert,
         buttonQuestion,
         textboxQuestion,
         dropdownQuestion,
@@ -260,15 +288,16 @@ export default {
     data() {
         return {
             welcomePageModel: this.getWelcomePageModelFromStore(),
+            displayInvalidZipAlert: false,
             duplicates: [],
             rules: {
-                policyNumber: 'policy-number-required',
+                policyNumber: 'policy-number-required|policy-number-format',
                 policyZip: 'policy-zip-required|policy-zip-format',
-                lossDate: 'loss-date-required|loss-date-gt-10-years',
+                lossDate: 'loss-date-required|loss-date-gt-10-years|loss-date-lt-tomorrow',
                 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',
+                lossCity: 'loss-city-required|loss-city-format',
                 lossState: 'loss-state-required'
             }
         };
@@ -319,20 +348,42 @@ export default {
         },
         maxCoverageLookupAttemptsReached() {
             return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
+        },
+        mask() {
+            return {
+                mask: 'x##-###-####',
+                tokens: {
+                    x: {
+                        pattern: /[2-9]/
+                    }
+                }
+            };
         }
     },
     methods: {
         async forwardButtonAction() {
-            this.mainStore.updatePolicyData(this.welcomePageModel);
+            console.log('zip code...');
-            await this.mainStore.getDuplicateReferrals()
+            console.log(this.welcomePageModel.policyZipCode);
-                .then(() => {}, () => {})
+            await this.mainStore.validateZip({ zip: this.welcomePageModel.policyZipCode })
-                .finally(async () => {
+                .then(async (zipInfo) => {
-                    if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) {
+                    if (zipInfo?.data?.isValid === true) {
-                        await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {});
+                        this.mainStore.updatePolicyData(this.welcomePageModel);
+                        await this.mainStore.getDuplicateReferrals()
+                            .then(() => {}, () => {})
+                            .finally(async () => {
+                                if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) {
+                                    await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {});
+                                } else {
+                                    this.mainStore.order.policy.policyLookupSuccessful = false;
+                                }
+                                return this.navigateForward();
+                            });
                     } else {
-                        this.mainStore.order.policy.policyLookupSuccessful = false;
+                        // set manual error message
+                        console.log('zip invalid...');
+                        this.displayInvalidZipAlert = true;
+                        return this.$refs.siteFooter.removeLoader();
                     }
-                    this.navigateForward();
                 });
         },
         navigateForward() {