INSR-7763: Policy Holder Details Heritage parity

- Added phone, extension, and email fields
- Rearranged/resized fields to match Heritage
- Updated validation errors to match Heritage
- Added "Select State" placeholder to state dropdown

src/constants/error-messages.js

@@ -12,17 +12,17 @@ const errorMessages = Object.freeze({
     WINDSHIELD_CHIP_COUNT_REQUIRED: 'Please select chip(s)',
     WINDSHIELD_REPLACE_OPTIONS_REQUIRED: 'Please select windshield part',
     REPLACE_OPTIONS_REQUIRED: 'Please select rear window type',
-    STREET_ADDRESS_REQUIRED: 'Please enter your street address',
+    STREET_ADDRESS_REQUIRED: 'Street Address is required.',
-    CITY_REQUIRED: 'Please enter your city',
+    CITY_REQUIRED: 'City is required.',
-    STATE_REQUIRED: 'Please enter your state',
+    STATE_REQUIRED: 'State is required.',
-    ZIP_REQUIRED: 'Please enter your ZIP',
+    ZIP_REQUIRED: 'ZIP is required.',
-    ZIP_FORMAT: 'Please enter a valid ZIP',
+    ZIP_FORMAT: 'Please enter a valid ZIP.',
     LICENSE_PLATE_REQUIRED: 'Please enter your license plate number',
     REGISTRATION_ZIP_REQUIRED: 'Please enter your registration ZIP code',
     FIRST_NAME_REQUIRED: 'Please enter your first name',
     LAST_NAME_REQUIRED: 'Please enter your last name',
-    EMAIL_ADDRESS_REQUIRED: 'Please enter your email address',
+    EMAIL_ADDRESS_REQUIRED: 'Email is required.',
-    EMAIL_ADDRESS_FORMAT: 'Please enter a valid email address',
+    EMAIL_ADDRESS_FORMAT: 'Please enter a valid email address.',
     SERVICE_ZIP_REQUIRED: 'Please enter your service ZIP',
     SERVICE_ZIP_FORMAT: 'Please enter a valid service ZIP',
     VIN_REQUIRED: 'Please enter your VIN',
@@ -49,8 +49,8 @@ const errorMessages = Object.freeze({
         'Damage date may not be in the future',
     DAMAGE_OPTION_REQUIRED: 'How damage occurred is required.',
 
-    POLICYHOLDER_FIRST_NAME_REQUIRED: 'Please enter the policyholder first name',
+    POLICYHOLDER_FIRST_NAME_REQUIRED: 'First name is required.',
-    POLICYHOLDER_LAST_NAME_REQUIRED: 'Please enter the policyholder last name',
+    POLICYHOLDER_LAST_NAME_REQUIRED: 'Last name is required.',
     ACKNOWLEDGEMENT_REQUIRED: 'You must agree to the terms to continue',
 
     YEAR_REQUIRED: 'Vehicle year is required.',

src/global-methods.js

@@ -63,7 +63,8 @@ export default {
                 [headerKeys.TRANSACTION_ID]: crypto.randomUUID(),
                 [headerKeys.ENTERPRISE_ORDER_NUMBER]: store.order.eon,
                 [headerKeys.REFERRAL_SEQUENCE_NUMBER]: store.order.referralSequenceNumber,
-                [headerKeys.SESSION_SEQUENCE_NUMBER]: sessionKey
+                [headerKeys.SESSION_SEQUENCE_NUMBER]: sessionKey,
+                // 'Cache-Control': 'max-age=0,no-cache,no-store',
             };
 
             axios({

src/helpers/global-rule-definer.js

@@ -23,7 +23,7 @@ function defineGlobalNameRules() {
  * @summary Define global rules related to email addresses
  */
 function defineGlobalEmailRules() {
-    defineRule(globalRules.EMAIL_ADDRESS_REQUIRED, required(errorMessages.EMAIL_ADDRESS_FORMAT));
+    defineRule(globalRules.EMAIL_ADDRESS_REQUIRED, required(errorMessages.EMAIL_ADDRESS_REQUIRED));
     defineRule(
         globalRules.EMAIL_ADDRESS_FORMAT,
         regex(

src/iss-components/address-questions/address-questions.vue

@@ -1,6 +1,6 @@
 <template>
     <div role="application">
-        <div class="row mt-2 mb-4">
+        <div class="row">
             <div class="col">
                 <textboxQuestion
                     id="streetAddressField"
@@ -12,7 +12,8 @@
                     hasIcon
                     disableAutoFill
                     validationRules="street-address-required"
-                    @keydown.enter.prevent />
+                    @keydown.enter.prevent
+                    class="mb-4" />
             </div>
         </div>
         <transition
@@ -21,18 +22,19 @@
             <div v-show="showAllFields">
                 <div
                     v-if="includeStreetAddress2"
-                    class="row mt-2 mb-4">
+                    class="row">
                     <div class="col">
                         <textboxQuestion
                             ref="streetAddress2"
                             v-model="addressModel.streetAddress2"
                             cmsWidgetName="StreetAddress2QuestionWidget"
                             aria-haspopup=""
-                            inputId="streetAddress2Field" />
+                            inputId="streetAddress2Field"
+                            class="mb-4" />
                     </div>
                 </div>
                 <div
-                    class="row mb-4"
+                    class="row"
                     aria-live="polite">
                     <div class="col">
                         <textboxQuestion
@@ -41,22 +43,25 @@
                             cmsWidgetName="CityQuestionWidget"
                             inputId="cbf28188fdf2436688fd735915f7ee56"
                             disableAutoFill
-                            validationRules="city-required" />
+                            validationRules="city-required"
+                            class="mb-4" />
                     </div>
-                </div>
-                <div
-                    class="row mb-4"
-                    aria-live="polite">
                     <div class="col">
                         <dropdownQuestion
                             ref="state"
                             v-model="addressModel.state"
                             cmsWidgetName="StateQuestionWidget"
+                            :placeHolderText="statePlaceHolderText"
                             inputId="8fdf9dc2e13e430eb57529499dceb3eb"
                             :options="stateOptions"
                             disableAutoFill
-                            validationRules="state-required" />
+                            validationRules="state-required"
+                            class="mb-4" />
                     </div>
+                </div>
+                <div
+                    class="row"
+                    aria-live="polite">
                     <div class="col">
                         <textboxQuestion
                             ref="zipCode"
@@ -65,7 +70,8 @@
                             inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
                             mask="#####"
                             disableAutoFill
-                            validationRules="zip-code-required|zip-code-format" />
+                            validationRules="zip-code-required|zip-code-format"
+                            class="mb-4" />
                     </div>
                 </div>
             </div>
@@ -162,6 +168,9 @@ export default {
             get() {
                 return states;
             }
+        },
+        statePlaceHolderText() {
+            return this.getCmsContent('StateQuestionWidget', 'ButtonText');
         }
     },
     watch: {

src/layouts/policy-holder-details/policy-holder-details.vue

@@ -14,28 +14,64 @@
                         id="sub-header"
                         cmsWidgetName="SiteSubHeaderWidget"
                         class="mt-4" />
+                    <div class="row mb-4">
+                        <div class="col">
+                            <textboxQuestion
+                                ref="policyHolderFirstName"
+                                v-model="customerQuestions.firstName"
+                                inputId="firstNameField"
+                                cmsWidgetName="PolicyholderFirstNameQuestion"
+                                isRequired
+                                disableAutoFill
+                                :validationRules="rules.firstName" />
+                        </div>
+                        <div class="col">
+                            <textboxQuestion
+                                ref="policyHolderLastName"
+                                v-model="customerQuestions.lastName"
+                                inputId="lastNameField"
+                                cmsWidgetName="PolicyholderLastNameQuestion"
+                                isRequired
+                                disableAutoFill
+                                :validationRules="rules.lastName" />
+                        </div>
+                    </div>
+                    <div class="row mb-4">
+                        <div class="col-md-8">
+                            <textboxQuestion
+                                ref="phoneNumber"
+                                v-model="customerQuestions.phoneNumber"
+                                inputId="phoneNumberField"
+                                cmsWidgetName="PhoneNumberQuestion"
+                                :validationRules="rules.phoneNumber"
+                                isRequired
+                                :mask="phoneMask"
+                                disableAutoFill />
+                        </div>
+                        <div class="col-md-4">
+                            <textboxQuestion
+                                ref="extension"
+                                v-model="customerQuestions.extension"
+                                inputId="extensionField"
+                                cmsWidgetName="ExtensionQuestion"
+                                :validationRules="rules.extension"
+                                disableAutoFill />
+                        </div>
+                    </div>
+                    <textboxQuestion
+                        ref="email"
+                        v-model="customerQuestions.email"
+                        inputId="emailField"
+                        cmsWidgetName="EmailAddressQuestion"
+                        :validationRules="rules.email"
+                        isRequired
+                        disableAutoFill
+                        class="mb-4" />
                     <addressQuestions
                         id="address-questions-wrapper"
                         ref="addressQuestions"
                         v-model="customerQuestions.addressQuestions"
                         :includeStreetAddress2="true" />
-                    <textboxQuestion
-                        ref="policyHolderFirstName"
-                        v-model="customerQuestions.firstName"
-                        inputId="firstNameField"
-                        cmsWidgetName="PolicyholderFirstNameQuestion"
-                        isRequired
-                        disableAutoFill
-                        :validationRules="rules.firstName" />
-                    <textboxQuestion
-                        ref="policyHolderLastName"
-                        v-model="customerQuestions.lastName"
-                        class="mt-4"
-                        inputId="lastNameField"
-                        cmsWidgetName="PolicyholderLastNameQuestion"
-                        isRequired
-                        disableAutoFill
-                        :validationRules="rules.lastName" />
                     <siteFooter
                         ref="siteFooter"
                         class="mt-5"
@@ -105,7 +141,10 @@ export default {
             vehiclesFound: [],
             rules: {
                 firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
-                lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED
+                lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
+                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+                extension: `${globalRules.EXTENSION_FORMAT}`,
             }
         };
     },
@@ -152,7 +191,10 @@ export default {
                     zipCode: this.mainStore.order.customer.address.zipCode
                 },
                 firstName: this.mainStore.order.customer.firstName,
-                lastName: this.mainStore.order.customer.lastName
+                lastName: this.mainStore.order.customer.lastName,
+                phoneNumber: this.mainStore.order.contactInfo.homePhone,
+                extension: this.mainStore.order.contactInfo.extension,
+                email: this.mainStore.order.customer.emailAddress,
             };
         }
     }