Merge pull request #1009 from Safelite/feature/richardson/welcome-page-updates

welcome page updates

src/iss-components/footer-menu/footer-menu.vue

@@ -38,7 +38,7 @@
                 <a
                     href=""
                     target="_blank"
-                    @click="openCookiePreferences">Cookie Preferences</a>
+                    @click="openCookiePreferences">Cookie preferences</a>
             </div>
             <div class="footer-menu-item">
                 <textLink

src/layouts/welcome-page/welcome-page.spec.js

@@ -136,7 +136,6 @@ describe('welcome-page.vue', () => {
         const state = wrapper.findComponent({ ref: 'state' });
         const glassOnlyDamage = wrapper.findComponent({ ref: 'glassOnlyDamage' });
         const phoneNumber = wrapper.findComponent({ ref: 'phoneNumber' });
-        const email = wrapper.findComponent({ ref: 'email' });
 
         // Assert
         expect(policyNumber.exists()).toBe(true);
@@ -146,7 +145,6 @@ describe('welcome-page.vue', () => {
         expect(state.exists()).toBe(false);
         expect(glassOnlyDamage.exists()).toBe(false);
         expect(phoneNumber.exists()).toBe(true);
-        expect(email.exists()).toBe(true);
     });
     test('Policy zip field should be visible at all times', async () => {
         // Arrange

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

@@ -12,7 +12,7 @@
                 <div class="welcome-page-container iss-heritage-content-container-width">
                     <siteSubHeader
                         cmsWidgetName="SiteSubHeaderWidget"
-                        class="mt-4" />
+                        class="form-group" />
                     <textboxQuestion
                         ref="policyNumber"
                         v-model="welcomePageModel.policyNumber"
@@ -22,16 +22,6 @@
                         disableAutoFill
                         :isDisabled="isPolicyHolderDisabled"
                         :validationRules="rules.policyNumber" />
-                    <textboxQuestion
-                        ref="policyZip"
-                        v-model="welcomePageModel.policyZipCode"
-                        inputId="policyZipCode"
-                        cmsWidgetName="PolicyZipQuestion"
-                        isRequired
-                        mask="#####"
-                        :isDisabled="isPolicyZipDisabled"
-                        :validationRules="rules.policyZip"
-                        class="mt-3" />
                     <textboxQuestion
                         ref="phoneNumber"
                         v-model="welcomePageModel.phoneNumber"
@@ -41,7 +31,8 @@
                         isRequired
                         :mask="phoneMask"
                         disableAutoFill
-                        class="mt-3" />
+                        placeholderText="###-###-####"
+                        class="form-group" />
                     <textboxQuestion
                         ref="extension"
                         v-model="welcomePageModel.extension"
@@ -49,7 +40,7 @@
                         cmsWidgetName="ExtensionQuestion"
                         :validationRules="rules.extension"
                         disableAutoFill
-                        class="mt-3" />
+                        class="form-group" />
                     <textboxQuestion
                         ref="dateOfLoss"
                         v-model="welcomePageModel.dateOfLoss"
@@ -62,7 +53,7 @@
                         :max="new Date().toJSON().slice(0, 10)"
                         :min="'1972-12-01'"
                         :validationRules="rules.lossDate"
-                        class="mt-3" />
+                        class="form-group" />
                     <textBlock
                         cmsWidgetName="DamageDateEstimateWidget"
                         typeStyle="small"
@@ -77,44 +68,45 @@
                         disableAutoFill
                         :validationRules="rules.damageOption"
                         placeHolderText="Select an option"
-                        class="mt-3" />
+                        class="form-group" />
+                    <textboxQuestion
+                        ref="policyZip"
+                        v-model="welcomePageModel.policyZipCode"
+                        inputId="policyZipCode"
+                        cmsWidgetName="PolicyZipQuestion"
+                        isRequired
+                        mask="#####"
+                        :isDisabled="isPolicyZipDisabled"
+                        :validationRules="rules.policyZip"
+                        class="form-group" />
                     <dropdownQuestion
                         v-if="displayDamageStateQuestion"
                         id="welcomeDropdown"
                         ref="state"
                         v-model="welcomePageModel.damageState"
-                        class="mt-3"
+                        class="form-group"
                         cmsWidgetName="DamageStateQuestion"
                         inputId="8fdf9dc2e13e430eb57529499dceb3eb"
                         :options="getStates"
                         :validationRules="rules.lossState"
                         isRequired
                         disableAutoFill
-                        placeHolderText="Select an option" />
+                        placeHolderText="Select State" />
                     <textboxQuestion
                         v-if="displayDamageCityQuestion"
                         ref="damageCity"
                         v-model="welcomePageModel.damageCity"
-                        class="mt-3"
+                        class="form-group"
                         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"
                         v-model="welcomePageModel.isDamageGlassOnly"
-                        class="px-0 mt-3"
+                        class="px-0 form-group"
                         cmsWidgetName="GlassOnlyQuestion"
                         inputId="isDamageGlassOnly"
                         :answers="DamageGlassOnlyOptions"
@@ -142,17 +134,9 @@
                             :isDismissible="false" />
                         <siteFooter
                             ref="siteFooter"
-                            class="mt-3"
                             cmsWidgetName="SiteFooterWidget"
                             :isForwardActionDisabled="!meta.valid"
                             @ForwardClicked="forwardButtonAction" />
-                        <textBlock
-                            id="requestCallbackLink"
-                            cmsWidgetName="HelpTextWidget"
-                            linkType="navigation"
-                            href="javascript:void(0)"
-                            class="mb-5 text-left"
-                            @clickEvent="handleHelpLinkClick" />
                     </div>
                 </div>
             </div>
@@ -257,7 +241,6 @@ export default {
             duplicates: [],
             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
@@ -302,7 +285,11 @@ export default {
             return !!this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
         },
         getStates() {
-            return states;
+            return Object.keys(states).reduce((acc, key) => {
+                // eslint-disable-next-line no-param-reassign
+                acc[key] = states[key].toUpperCase();
+                return acc;
+            }, {});
         },
         isPolicyHolderDisabled() {
             return !!this.mainStore.issConfig.disabledFields.policyNumber;
@@ -408,7 +395,6 @@ export default {
                 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
             };
         },
@@ -425,7 +411,6 @@ export default {
             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) {
             const damageCauseOptions = this.DamageCauseOptions;
@@ -481,13 +466,6 @@ export default {
             this.mainStore.order.loadedFromCookie = true;
             this.answeredContinueModal = true;
             this.$refs.continueModal.closeModal();
-        },
-        handleHelpLinkClick() {
-            useMainStore().setBailout(bailoutMessage.RequestCallback());
-            this.$router.navigate(
-                this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
-                this.$route
-            );
         }
     }
 };
@@ -508,6 +486,10 @@ form {
         min-height: 1px;
         padding-left: .9375rem;
         padding-right: .9375rem;
+
+        .form-group {
+            margin-top: 1.25rem;
+        }
     }
 }
 

src/store/index.js

@@ -2277,7 +2277,6 @@ export const useMainStore = defineStore({
             this.order.policy.damageState = welcomePageModel?.damageState;
             this.order.policy.damageCity = welcomePageModel?.damageCity;
             this.order.policy.isDamageGlassOnly = welcomePageModel?.isDamageGlassOnly;
-            this.order.customer.emailAddress = welcomePageModel?.email;
             this.order.serviceLocation.zipCode = welcomePageModel?.policyZipCode;
             this.updatePhoneNumbers({
                 home: welcomePageModel?.phoneNumber,

src/styles/common-styles.scss

@@ -174,6 +174,7 @@ body {
     div.textbox-question {
         label {
             span.sub-caption {
+                color: #525656;
                 font-weight: 400;
             }
         }
@@ -203,10 +204,10 @@ $heritage-btn-width: 9.0625rem; // 145px
     @include heritage-btn-variant('secondary', $white, $heritage-blue-secondary, transparent, true);
     @include heritage-btn-link('link', $blue, transparent, $heritage-blue-secondary);
 
-    @include heritage-btn-size('lg', 0.625rem,  1.25rem);
+    @include heritage-btn-size('lg', 0.625rem, 1.25rem);
     @include heritage-btn-size('md', 7px, 15px);
-    @include heritage-btn-size('sm', 3px,  6px);
+    @include heritage-btn-size('sm', 3px, 6px);
-    @include heritage-btn-size('xs', 1px,  5px);
+    @include heritage-btn-size('xs', 1px, 5px);
 
     &.btn-link {
         --bs-btn-padding-x: 0px;