Merge pull request #94 from Safelite/feature/SSR-135

Feature/ssr 135
2023-01-06 12:32:27 -05:00 · 2023-01-06 12:32:27 -05:00 · 3f2cbc1673
commit 3f2cbc1673
parent a8dd886012 230dc752b3
5 changed files with 223 additions and 83 deletions
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@ -271,4 +271,21 @@ export default {
      }
  }
 }
+
+.welcome {
+  .question-text {
+      span {
+          text-align: left;
+          margin: 0 0 0.25rem 0;
+      }
+  }
+  .question-text {
+      margin: 0;
+  }
+  fieldset {
+      .ui-radio {
+          margin: 0;
+      }
+  }
+}
 </style>
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@ -65,6 +65,7 @@ export default {
 			handleBlur,
 			handleChange,
 			meta,
+			errors
 		} = useField(props.inputId, props.validationRules, fieldOptions);

 		return { 
@ -72,6 +73,7 @@ export default {
 			handleBlur,
 			handleChange,
 			meta, 
+			errors
 		};
 	},  
 	computed: {
--- a/src/common-components/site-footer/site-footer.vue
+++ b/src/common-components/site-footer/site-footer.vue
@ -1,5 +1,9 @@
 <template>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`"></div>
+    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
+    </div>
+    <div class="row">
+        <img id="siteFooterImage" :src="footerImageURL" />
+    </div>
    <footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
        <div class="row d-flex flex-row-reverse align-items-center vw-100">
            <div class="col button-col d-flex" id="stacked">
@ -73,6 +77,10 @@ export default {
                ? this.customButtontext
                : this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
        },
+        footerImageURL()
+        {
+            return this.getCmsContent(this.cmsWidgetName, "FooterImageURL");
+        }
    },
    methods: {
        onResize() {
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@ -24,14 +24,16 @@ const errorMessages = {
    VIN_FORMAT: "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 policy number",
+    POLICY_NUMBER_REQUIRED: "Please enter your policy number",
    PHONE_NUMBER_REQUIRED: "Please enter phone number",
-    POLICY_ZIP_REQUIRED: "Please enter policy zip",
-    POLICY_ZIP_FORMAT: "Please enter a valid policy ZIP",
+    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 loss city",
-    LOSS_STATE_REQUIRED: "Please enter loss state",
-    LOSS_DATE_REQUIRED: "Please enter a loss date"
+    LOSS_CITY_REQUIRED: "Please enter a city",
+    LOSS_STATE_REQUIRED: "Please select an option",
+    LOSS_DATE_REQUIRED: "Please enter a loss date",
+    DAMAGE_OPTION_REQUIRED: "Please select an option"
 };

 export { errorMessages };
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@ -1,103 +1,156 @@
 <template>
-<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-    <div class="page-container-grouped-styles">
+<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+    <div class="page-container-grouped-styles overflow-auto welcome">
        <div class="fade-on-route-transition">
            <siteHeader cmsWidgetName="SiteHeaderWidget"/>
            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
-            <div class="row mt-2 mb-4">
-                <textboxQuestion
-                        id="policyNumberField"
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="policyNumberField"
                        cmsWidgetName="PolicyNumberQuestion"
-                        v-model="policyNumber"
+                        v-model="welcomePageModel.policyNumber"
+                        isRequired
+                        disableAutoFill
                        validationRules="policy-number-required" />
+                </div>
            </div>
-            <div class="row mt-2 mb-4">
-                <textboxQuestion
-                        id="policyZipField"
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="policyZipField"
                        cmsWidgetName="PolicyZipQuestion"
-                        v-model="policyZip"
-                        validationRules="policy-zip-required" />
+                        ref="policyZip"
+                        v-model="welcomePageModel.policyZipCode"
+                        isRequired
+                        disableAutoFill
+                        mask="#####"
+                        validationRules="policy-zip-required|policy-zip-format" />
+                </div>
            </div>
-            <div class="row mt-2 mb-4">
-                <textboxQuestion
-                    type="date"
-                    cmsWidgetName="DateOfLossQuestion"
-                    v-model="test"
-                    inputId="dateOfLossField"
-                    isRequired
-                    disableAutoFill
-                    :max="new Date().toJSON().slice(0,10)"
-                    :min="'1972-12-01'"
-                    validationRules="loss-date-required"
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        type="date"
+                        cmsWidgetName="DateOfLossQuestion"
+                        v-model="welcomePageModel.dateOfLoss"
+                        inputId="dateOfLossField"
+                        isRequired
+                        disableAutoFill
+                        :max="new Date().toJSON().slice(0,10)"
+                        :min="'1972-12-01'"
+                        validationRules="loss-date-required"
                />
+                </div>
            </div>
-            <div class="row mt-2 mb-4">
-                <dropdownQuestion
-                    cmsWidgetName="DamageCauseQuestion"
-                    v-model="damageCause"
-                    ref="damageCause"
-                    inputId="damageCauseQuestionField"
-                    :options="DamageCauseOptions"
-                    validationRules="loss-cause-required"
-                    placeholderText="Select an option"
+            <div class="row">
+                <div class="col">
+                    <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
+                </div>
+            </div>
+            <div class="row mt-4">
+                <div class="col">
+                    <dropdownQuestion
+                        cmsWidgetName="DamageCauseQuestion"
+                        v-model="welcomePageModel.damageCause"
+                        ref="damageCause"
+                        inputId="damageCauseQuestionField"
+                        :options="DamageCauseOptions"
+                        disableAutoFill
+                        validationRules="loss-cause-required"
                    />
+                </div>
            </div>
-            <div class="row mt-2 mb-4">
-                <textboxQuestion
-                        id="damageCityField"
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="damageCityField"
                        cmsWidgetName="DamageCityQuestion"
-                        v-model="damageCity"
+                        v-model="welcomePageModel.damageCity"
+                        isRequired
+                        disableAutoFill
                        validationRules="loss-city-required" />
+                </div>
            </div>
-            <div class="row mt-2 mb-4">
-                <dropdownQuestion
-                    cmsWidgetName="DamageStateQuestion"
-                    v-model="state"
-                    ref="state"
-                    inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                    :options="stateOptions"
-                    validationRules="loss-state-required" 
-                    placeholderText="Select an option"
+            <div class="row mt-4">
+                <div class="col">
+                    <dropdownQuestion
+                        cmsWidgetName="DamageStateQuestion"
+                        v-model="welcomePageModel.damageState"
+                        ref="state"
+                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                        :options="stateOptions"
+                        validationRules="loss-state-required" 
+                        isRequired
+                        disableAutoFill
                    />
+                </div>    
            </div>
-            <div class="row mt-2 mb-4">
-                <textboxQuestion
-                        id="phoneNumberField"
+            <div class="row mt-4">
+                    <buttonQuestion
+                        cmsWidgetName="GlassOnlyQuestion"
+                        v-model="welcomePageModel.isDamageGlassOnly"
+                        inputId = "isDamageGlassOnly"
+                        :answers="DamageGlassOnlyOptions"
+                        :questionText="DamageGlassOnlyQuestion"
+                        buttonTypeString="listButtonHorizontal"
+                        validationRules="damage-option-required" 
+                        isRequired
+                        disableAutoFill/>
+            </div>
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="phoneNumberField"
                        cmsWidgetName="PhoneNumberQuestion"
-                        v-model="phoneNumber"
-                        validationRules="phone-number-required" />
+                        v-model="welcomePageModel.phoneNumber"
+                        validationRules="phone-number-required"
+                        isRequired
+                        mask="###-###-####"
+                        disableAutoFill />
+                </div>
            </div>
-            <div class="row mt-2 mb-4">
-                <textboxQuestion
-                        id="emailField"
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="emailField"
                        cmsWidgetName="EmailAddressQuestion"
-                        v-model="email"
-                        validationRules="email-address-required" />
+                        v-model="welcomePageModel.email"
+                        validationRules="email-address-required|email-address-format"
+                        isRequired
+                        disableAutoFill />
+                </div>
            </div>
-            <div class="row mt-2 mb-4">
-                <site-footer
+            <div class="row mt-4">
+                <div class="col">
+                    <site-footer
                        cmsWidgetName="SiteFooterWidget"
                        :isForwardActionDisabled="!meta.valid"
                        @back-clicked="backButtonAction"
                        @ForwardClicked="forwardButtonAction" />
+                </div>
            </div>
        </div>
    </div>
 </Form>
 </template>

-<script>
+    <script>
+    // Components
    import siteHeader from '@/common-components/site-header/site-header';
    import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+    import siteFooter from "@/common-components/site-footer/site-footer";
+    import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+    import buttonQuestion from "@/common-components/button-question/button-question";
+    import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+    import textBlock from "@/common-components/text-block/text-block";
+    
+    // Supporting files
    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
    import { settleAllPromises } from "@/helpers/layout-helper";
-    import { defineRule } from "vee-validate";
-    import { required } from "@/helpers/validation-rules";
+    import { Form, defineRule } from "vee-validate";
+    import { required, regex } from "@/helpers/validation-rules";
    import { errorMessages } from "@/constants/error-messages";
-	import textboxQuestion from "@/common-components/textbox-question/textbox-question";
-    import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal";
-    import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
-    import siteFooter from "@/common-components/site-footer/site-footer";
    import BaseFormMixin from '@/mixins/base-form-mixin.js';

    //define validation rules
@ -110,21 +163,47 @@
    defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
    defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_REQUIRED));
    defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-    
+    defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));

+    defineRule("policy-zip-format",
+        regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT)
+    );
+
+    defineRule("email-address-format",
+        regex(
+            /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
+            errorMessages.EMAIL_ADDRESS_FORMAT
+        )
+    );
+
+    defineRule("phone-number-format",
+        regex(
+            /\A[0-9]{3}-[0-9]{3}-[0-9]{4}\z/,
+            errorMessages.PHONE_NUMBER_FORMAT
+        )
+    );
+    
    export default {
        name: "welcome-page",
        mixins: [BaseFormMixin],
-        emits: ['update:modelValue'], // The component emits an event
-	    props: {
-		    modelValue: {
-			    type: Object,
-			    default: () => ({
-				    lossState: "",
-			    }),
-		    },
-		    validationRules: String,       
-	    }, 
+        data: {
+            modelValue: {
+                type: Object,
+                default: () => ({
+                    welcomePageModel: {
+                        policyNumber: "",
+                        policyZipCode: "",
+                        dateOfLoss: "",
+                        damageCause: "",
+                        damageState: "",
+                        damageCity: "",
+                        isDamageGlassOnly: "",
+                        phoneNumber: "",
+                        email: ""
+                    },
+                }),
+             },
+        },
        async beforeRouteEnter(to, from, next) 
        {
            // Call APIs
@ -145,6 +224,16 @@
                vm.setCmsContent(resultMap.cmsContent);
            });
        },
+        methods:
+        {
+            async forwardButtonAction() {
+                return this.navigateForward();
+            },
+
+            navigateForward() {            
+                
+            },
+        },
        computed:{
            DamageCauseOptions() {
                const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
@ -156,6 +245,14 @@
                }
                return answerArray;
            },
+            DamageGlassOnlyOptions()
+            {
+                return this.getCmsContent("GlassOnlyQuestion", "Answers");
+            },
+            DamageGlassOnlyQuestion()
+            {
+                return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
+            },
            stateOptions: {
                get: function () {
                    return {
@ -213,14 +310,24 @@
                    };
                },
            },
+            welcomePageModel: {
+                get: function () {
+                    return this.modelValue;
+                },
+                set: function (newValue) {
+                    this.$emit("update:modelValue", newValue);
+                },
+            },
        },
        components: {
            siteHeader,
            siteSubHeader,
-            buttonQuestionModal,
+            buttonQuestion,
            textboxQuestion,
            dropdownQuestion,
-            siteFooter
+            siteFooter,
+            textBlock,
+            Form,
        },
    }
 </script>
@ -242,5 +349,9 @@
    color: #000000 !important;
    margin-bottom: 16px !important;
 }
+.my-2
+{
+    margin-bottom: 0rem !important;
+}
 </style>