ISS NextGen - Heritage Parity - Welcome_Page

src/constants/error-messages.js

@@ -31,22 +31,23 @@ const errorMessages = Object.freeze({
         'Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q',
     OPTION_REQUIRED: 'Please select an option',
     VEHICLE_REQUIRED: 'Please select a vehicle',
-    POLICY_NUMBER_REQUIRED: 'Please enter your policy number',
+    POLICY_NUMBER_REQUIRED: 'Policy number is required.',
     POLICY_NUMBER_FORMAT: 'Please enter an alpha-numeric string',
-    PHONE_NUMBER_REQUIRED: 'Please enter your phone number. The format must be ###-###-####',
+    PHONE_NUMBER_REQUIRED: 'Please specify a valid phone number, the format is "###-###-####".',
+    EXTENSION_FORMAT: 'The specified extension is invalid',
     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_REQUIRED: 'Loss City damage occurred in is required.',
     LOSS_CITY_FORMAT: 'Please enter only alpha characters',
-    LOSS_STATE_REQUIRED: 'Please select an option',
+    LOSS_STATE_REQUIRED: 'Loss State damage occurred in is required.',
     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',
+    DAMAGE_OPTION_REQUIRED: 'How damage occurred is required.',
 
     POLICYHOLDER_FIRST_NAME_REQUIRED: 'Please enter the policyholder first name',
     POLICYHOLDER_LAST_NAME_REQUIRED: 'Please enter the policyholder last name',

src/constants/global-rules.js

@@ -23,6 +23,7 @@ const globalRules = Object.freeze({
     EMAIL_ADDRESS_FORMAT: 'email-address-format',
     PHONE_NUMBER_REQUIRED: 'phone-number-required',
     PHONE_NUMBER_FORMAT: 'phone-number-format',
+    EXTENSION_FORMAT: 'extension-format',
     ZIP_CODE_REQUIRED: 'zip-code-required',
     ZIP_CODE_SEARCH_FORMAT: 'zip-code-search-format',
     OPTION_REQUIRED: 'option-required'

src/helpers/global-rule-definer.js

@@ -80,6 +80,16 @@ function defineGlobalPhoneNumberRules() {
     );
 }
 
+/**
+ * @summary Define global rules related to extensions
+ */
+function defineGlobalExtensionRules() {
+    defineRule(
+        globalRules.EXTENSION_FORMAT,
+        regex(/^[0-9]{5}$/, errorMessages.EXTENSION_FORMAT)
+    );
+}
+
 /**
  * @summary Define global rules related to policy numbers
  */
@@ -122,6 +132,7 @@ export default function defineGlobalRules() {
     defineGlobalDateOfLossRules();
     defineGlobalEmailRules();
     defineGlobalPhoneNumberRules();
+    defineGlobalExtensionRules();
     defineGlobalPolicyNumberRules();
     defineGlobalPolicyZipCodeRules();
     defineGlobalZipCodeRules();

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

@@ -23,14 +23,22 @@
                         :isDisabled="isPolicyHolderDisabled"
                         :validationRules="rules.policyNumber" />
                     <textboxQuestion
-                        ref="policyZip"
+                        ref="phoneNumber"
-                        v-model="welcomePageModel.policyZipCode"
+                        v-model="welcomePageModel.phoneNumber"
-                        inputId="policyZipCode"
+                        inputId="phoneNumberField"
-                        cmsWidgetName="PolicyZipQuestion"
+                        cmsWidgetName="PhoneNumberQuestion"
+                        :validationRules="rules.phoneNumber"
                         isRequired
-                        mask="#####"
+                        :mask="phoneMask"
-                        :isDisabled="isPolicyZipDisabled"
+                        disableAutoFill
-                        :validationRules="rules.policyZip"
+                        class="mt-3" />
+                    <textboxQuestion
+                        ref="extension"
+                        v-model="welcomePageModel.extension"
+                        inputId="extensionField"
+                        cmsWidgetName="ExtensionQuestion"
+                        :validationRules="rules.extension"
+                        disableAutoFill
                         class="mt-3" />
                     <textboxQuestion
                         ref="dateOfLoss"
@@ -60,35 +68,6 @@
                         :validationRules="rules.damageOption"
                         placeHolderText="Select an option"
                         class="mt-3" />
-                    <textboxQuestion
-                        ref="phoneNumber"
-                        v-model="welcomePageModel.phoneNumber"
-                        inputId="phoneNumberField"
-                        cmsWidgetName="PhoneNumberQuestion"
-                        :validationRules="rules.phoneNumber"
-                        isRequired
-                        :mask="phoneMask"
-                        disableAutoFill
-                        class="mt-3" />
-                    <textboxQuestion
-                        ref="email"
-                        v-model="welcomePageModel.email"
-                        inputId="emailField"
-                        cmsWidgetName="EmailAddressQuestion"
-                        :validationRules="rules.email"
-                        isRequired
-                        disableAutoFill
-                        class="mt-3" />
-                    <textboxQuestion
-                        v-if="displayDamageCityQuestion"
-                        ref="damageCity"
-                        v-model="welcomePageModel.damageCity"
-                        class="mt-3"
-                        inputId="damageCityField"
-                        cmsWidgetName="DamageCityQuestion"
-                        isRequired
-                        disableAutoFill
-                        :validationRules="rules.lossCity" />
                     <dropdownQuestion
                         v-if="displayDamageStateQuestion"
                         id="welcomeDropdown"
@@ -102,6 +81,25 @@
                         isRequired
                         disableAutoFill
                         placeHolderText="Select an option" />
+                    <textboxQuestion
+                        v-if="displayDamageCityQuestion"
+                        ref="damageCity"
+                        v-model="welcomePageModel.damageCity"
+                        class="mt-3"
+                        inputId="damageCityField"
+                        cmsWidgetName="DamageCityQuestion"
+                        isRequired
+                        disableAutoFill
+                        :validationRules="rules.lossCity" />
+                    <textboxQuestion
+                        ref="email"
+                        v-model="welcomePageModel.email"
+                        inputId="emailField"
+                        cmsWidgetName="EmailAddressQuestion"
+                        :validationRules="rules.email"
+                        isRequired
+                        disableAutoFill
+                        class="mt-3" />                                       
                     <buttonQuestion
                         v-if="displayGlassOnlyQuestion"
                         ref="glassOnlyDamage"
@@ -243,6 +241,7 @@ export default {
             rules: {
                 damageOption: 'damage-option-required',
                 email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+                extension: `${globalRules.EXTENSION_FORMAT}`,
                 lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
                 // eslint-disable-next-line max-len
                 lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`,
@@ -392,6 +391,7 @@ export default {
                 damageCity: this.mainStore.order.policy.damageCity,
                 isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
                 phoneNumber: this.mainStore.order.contactInfo.homePhone,
+                extension: this.mainStore.order.contactInfo.extension,
                 email: this.mainStore.order.customer.emailAddress,
                 isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled
             };
@@ -408,6 +408,7 @@ export default {
             this.welcomePageModel.damageCity = response.policy.damageCity;
             this.welcomePageModel.isDamageGlassOnly = response.policy.isDamageGlassOnly;
             this.welcomePageModel.phoneNumber = response.customer.homePhone;
+            this.welcomePageModel.extension = response.customer.extension;
             this.welcomePageModel.email = response.customer.emailAddress;
         },
         findDamageCause(damageCause) {