From dac63255f1028d1b384ebc2a8f032e5aacafe4d5 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Thu, 29 Dec 2022 14:04:08 -0500
Subject: [PATCH] commit

---
 .../site-sub-header/site-sub-header.vue       |   4 +-
 src/layouts/welcome-page/welcome-page.vue     | 206 +++++++++++++++---
 2 files changed, 183 insertions(+), 27 deletions(-)

diff --git a/src/common-components/site-sub-header/site-sub-header.vue b/src/common-components/site-sub-header/site-sub-header.vue
index 231cd94e..5775b406 100644
--- a/src/common-components/site-sub-header/site-sub-header.vue
+++ b/src/common-components/site-sub-header/site-sub-header.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
       <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
-        <h5 class="text-center fw-normal mb-0" :class="headerColor">
+        <h5 class="text-center fw-normal mb-0 subheader-primary" :class="headerColor">
           <span>
             {{ content }}
           </span>
@@ -13,7 +13,7 @@
         </h5>
       </div>
       <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
-            <p class="text-center small fw-normal mb-0">
+            <p class="text-center small fw-normal mb-0 subheader-secondary">
                 <span>
                     {{ subText }}
                 </span>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 9ea64244..281a223d 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,35 +1,89 @@
 <template>
-<div class="page-container-grouped-styles">
-    <div class="fade-on-route-transition">
-        <siteHeader cmsWidgetName="Header"/>
-        <siteSubHeader cmsWidgetName="SubHeader"/>
-		<div class="row mt-2">
-			<textboxQuestion
-				type="date"
-				cmsWidgetName="dmgDate"
-				v-model="test"
-				inputId="dmgDate"
-				isRequired
-                disableAutoFill
-				:max="new Date().toJSON().slice(0,10)"
-                :min="'1972-12-01'"
-			/>
-		</div>
-        <div class="row mt-2 mb-4">
-            <div class="col">
+<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+    <div class="page-container-grouped-styles">
+        <div class="fade-on-route-transition">
+            <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
+            <div class="row mt-2 mb-4">
                 <textboxQuestion
-                    id="damageCauseField"
+                        id="policyNumberField"
+                        cmsWidgetName="PolicyNumberQuestion"
+                        v-model="policyNumber"
+                        validationRules="policy-number-required" />
+            </div>
+            <div class="row mt-2 mb-4">
+                <textboxQuestion
+                        id="policyZipField"
+                        cmsWidgetName="PolicyZipQuestion"
+                        v-model="policyZip"
+                        validationRules="policy-zip-required" />
+            </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>
+            <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"
-                    includeSelectIcon
-                    disableAutoFill
-                    validationRules="damage-cause-required" />
+                    />
+            </div>
+            <div class="row mt-2 mb-4">
+                <textboxQuestion
+                        id="damageCityField"
+                        cmsWidgetName="DamageCityQuestion"
+                        v-model="damageCity"
+                        validationRules="loss-city-required" />
+            </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>
+            <div class="row mt-2 mb-4">
+                <textboxQuestion
+                        id="phoneNumberField"
+                        cmsWidgetName="PhoneNumberQuestion"
+                        v-model="phoneNumber"
+                        validationRules="phone-number-required" />
+            </div>
+            <div class="row mt-2 mb-4">
+                <textboxQuestion
+                        id="emailField"
+                        cmsWidgetName="EmailAddressQuestion"
+                        v-model="email"
+                        validationRules="email-address-required" />
+            </div>
+            <div class="row mt-2 mb-4">
+                <site-footer
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
-        <buttonQuestionModal cmsWidgetName="DamageCauseQuestion" validationRules="damage-cause-required" />
     </div>
-</div>
+</Form>
 </template>
 
 <script>
@@ -42,13 +96,25 @@
     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
     defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-    defineRule("damage-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
+    defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
+    defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
+    defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
+    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+    defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
+    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));
+    
 
     export default {
         name: "welcome-page",
+        mixins: [BaseFormMixin],
         emits: ['update:modelValue'], // The component emits an event
 	    props: {
 		    modelValue: {
@@ -79,12 +145,102 @@
                 vm.setCmsContent(resultMap.cmsContent);
             });
         },
+        computed:{
+            DamageCauseOptions() {
+                const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
+                const answerArray = [];
+                for (let answer of Object.values(damageCauseAnswers)) {
+                    if (answer?.Name) {
+                        answerArray.push(answer.Name);
+                    }
+                }
+                return answerArray;
+            },
+            stateOptions: {
+                get: function () {
+                    return {
+                        AL: "Alabama",
+                        AK: "Alaska",
+                        AZ: "Arizona",
+                        AR: "Arkansas",
+                        CA: "California",
+                        CO: "Colorado",
+                        CT: "Connecticut",
+                        DE: "Delaware",
+                        DC: "District Of Columbia",
+                        FL: "Florida",
+                        GA: "Georgia",
+                        HI: "Hawaii",
+                        ID: "Idaho",
+                        IL: "Illinois",
+                        IN: "Indiana",
+                        IA: "Iowa",
+                        KS: "Kansas",
+                        KY: "Kentucky",
+                        LA: "Louisiana",
+                        ME: "Maine",
+                        MD: "Maryland",
+                        MA: "Massachusetts",
+                        MI: "Michigan",
+                        MN: "Minnesota",
+                        MS: "Mississippi",
+                        MO: "Missouri",
+                        MT: "Montana",
+                        NE: "Nebraska",
+                        NV: "Nevada",
+                        NH: "New Hampshire",
+                        NJ: "New Jersey",
+                        NM: "New Mexico",
+                        NY: "New York",
+                        NC: "North Carolina",
+                        ND: "North Dakota",
+                        OH: "Ohio",
+                        OK: "Oklahoma",
+                        OR: "Oregon",
+                        PA: "Pennsylvania",
+                        RI: "Rhode Island",
+                        SC: "South Carolina",
+                        SD: "South Dakota",
+                        TN: "Tennessee",
+                        TX: "Texas",
+                        UT: "Utah",
+                        VT: "Vermont",
+                        VA: "Virginia",
+                        WA: "Washington",
+                        WV: "West Virginia",
+                        WI: "Wisconsin",
+                        WY: "Wyoming",
+                    };
+                },
+            },
+        },
         components: {
             siteHeader,
             siteSubHeader,
             buttonQuestionModal,
             textboxQuestion,
+            dropdownQuestion,
+            siteFooter
         },
     }
 </script>
 
+<style lang="scss">
+.subheader-primary
+{
+    font-weight: 300 !important;
+    font-size: 26px;
+    line-height: 36px !important;
+    margin-top: 16px;
+}
+
+.subheader-secondary
+{
+    font-weight: 300 !important;
+    font-size: 26px;
+    line-height: 36px;
+    color: #000000 !important;
+    margin-bottom: 16px !important;
+}
+</style>
+