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
2025-12-26 11:58:37 -05:00 · 2025-12-26 11:58:37 -05:00 · 4edd086a8f
commit 4edd086a8f
parent e138a09499
5 changed files with 94 additions and 42 deletions
--- a/src/constants/error-messages.js
+++ b/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',
-    CITY_REQUIRED: 'Please enter your city',
-    STATE_REQUIRED: 'Please enter your state',
-    ZIP_REQUIRED: 'Please enter your ZIP',
-    ZIP_FORMAT: 'Please enter a valid ZIP',
+    STREET_ADDRESS_REQUIRED: 'Street Address is required.',
+    CITY_REQUIRED: 'City is required.',
+    STATE_REQUIRED: 'State is required.',
+    ZIP_REQUIRED: 'ZIP is required.',
+    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_FORMAT: 'Please enter a valid email address',
+    EMAIL_ADDRESS_REQUIRED: 'Email is required.',
+    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_LAST_NAME_REQUIRED: 'Please enter the policyholder last name',
+    POLICYHOLDER_FIRST_NAME_REQUIRED: 'First name is required.',
+    POLICYHOLDER_LAST_NAME_REQUIRED: 'Last name is required.',
    ACKNOWLEDGEMENT_REQUIRED: 'You must agree to the terms to continue',

    YEAR_REQUIRED: 'Vehicle year is required.',
--- a/src/global-methods.js
+++ b/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({
--- a/src/helpers/global-rule-definer.js
+++ b/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(
--- a/src/iss-components/address-questions/address-questions.vue
+++ b/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: {
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/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,
            };
        }
    }