From 6b44953d58a54a7cb183b94e2312e95e35d78ebb Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Tue, 3 Jan 2023 09:54:08 -0500
Subject: [PATCH 1/9] commit

---
 src/common-components/site-footer/site-footer.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/common-components/site-footer/site-footer.vue b/src/common-components/site-footer/site-footer.vue
index 49f84229..fa33f9d6 100644
--- a/src/common-components/site-footer/site-footer.vue
+++ b/src/common-components/site-footer/site-footer.vue
@@ -1,5 +1,7 @@
 <template>
     <div class="row" :style="`padding-bottom: ${paddingHeight}px`"></div>
+    <div class="row"><img id="siteFooterImage" class="footer container-fluid fixed-bottom g-5 bg-light py-4" :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 +75,10 @@ export default {
                 ? this.customButtontext
                 : this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
         },
+        footerImageURL()
+        {
+            return this.getCmsContent(this.cmsWidgetName, "FooterImageURL");
+        }
     },
     methods: {
         onResize() {

From 10c501b62661f2952c8404d52d63467167e4e5e9 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Tue, 3 Jan 2023 10:00:46 -0500
Subject: [PATCH 2/9] commit

---
 src/layouts/welcome-page/welcome-page.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 281a223d..214dcdc1 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,5 +1,5 @@
 <template>
-<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" >
     <div class="page-container-grouped-styles">
         <div class="fade-on-route-transition">
             <siteHeader cmsWidgetName="SiteHeaderWidget"/>
@@ -77,7 +77,6 @@
             <div class="row mt-2 mb-4">
                 <site-footer
                         cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
             </div>

From 5c3df3c7a1d646f120ddef59047c30f103213603 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Tue, 3 Jan 2023 12:54:37 -0500
Subject: [PATCH 3/9] commit

---
 src/common-components/site-footer/site-footer.vue | 4 ++--
 src/layouts/welcome-page/welcome-page.vue         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common-components/site-footer/site-footer.vue b/src/common-components/site-footer/site-footer.vue
index fa33f9d6..f33cd605 100644
--- a/src/common-components/site-footer/site-footer.vue
+++ b/src/common-components/site-footer/site-footer.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`"></div>
-    <div class="row"><img id="siteFooterImage" class="footer container-fluid fixed-bottom g-5 bg-light py-4" :src="footerImageURL" />
+    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
+        <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">
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 214dcdc1..46686f60 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,6 +1,6 @@
 <template>
 <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" >
-    <div class="page-container-grouped-styles">
+    <div class="page-container-grouped-styles overflow-auto">
         <div class="fade-on-route-transition">
             <siteHeader cmsWidgetName="SiteHeaderWidget"/>
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>

From ca5db18028e5e9a32a8804aec06d639db38415d0 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Wed, 4 Jan 2023 09:30:14 -0500
Subject: [PATCH 4/9] commit

---
 .../button-question/button-question.vue       | 17 +++++++
 .../site-footer/site-footer.vue               |  2 +
 src/layouts/welcome-page/welcome-page.vue     | 45 ++++++++++++++++---
 3 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index bb8e1391..82f402e0 100644
--- 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>
diff --git a/src/common-components/site-footer/site-footer.vue b/src/common-components/site-footer/site-footer.vue
index f33cd605..e29c3e54 100644
--- a/src/common-components/site-footer/site-footer.vue
+++ b/src/common-components/site-footer/site-footer.vue
@@ -1,5 +1,7 @@
 <template>
     <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">
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 46686f60..87fcfdc5 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,6 +1,6 @@
 <template>
 <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" >
-    <div class="page-container-grouped-styles overflow-auto">
+    <div class="page-container-grouped-styles overflow-auto welcome">
         <div class="fade-on-route-transition">
             <siteHeader cmsWidgetName="SiteHeaderWidget"/>
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
@@ -9,6 +9,7 @@
                         id="policyNumberField"
                         cmsWidgetName="PolicyNumberQuestion"
                         v-model="policyNumber"
+                        isRequired
                         validationRules="policy-number-required" />
             </div>
             <div class="row mt-2 mb-4">
@@ -16,6 +17,7 @@
                         id="policyZipField"
                         cmsWidgetName="PolicyZipQuestion"
                         v-model="policyZip"
+                        isRequired
                         validationRules="policy-zip-required" />
             </div>
             <div class="row mt-2 mb-4">
@@ -36,6 +38,7 @@
                     cmsWidgetName="DamageCauseQuestion"
                     v-model="damageCause"
                     ref="damageCause"
+                    isRequired
                     inputId="damageCauseQuestionField"
                     :options="DamageCauseOptions"
                     validationRules="loss-cause-required"
@@ -47,6 +50,7 @@
                         id="damageCityField"
                         cmsWidgetName="DamageCityQuestion"
                         v-model="damageCity"
+                        isRequired
                         validationRules="loss-city-required" />
             </div>
             <div class="row mt-2 mb-4">
@@ -57,22 +61,33 @@
                     inputId="8fdf9dc2e13e430eb57529499dceb3eb"
                     :options="stateOptions"
                     validationRules="loss-state-required" 
-                    placeholderText="Select an option"
+                    isRequired
                     />
             </div>
+            <div class="row mt-2 mb-4">
+                <buttonQuestion
+                    cmsWidgetName="GlassOnlyQuestion"
+                    v-model="isDamageGlassOnly"
+                    :answers="DamageGlassOnlyOptions"
+                    :questionText="DamageGlassOnlyQuestion"
+                    buttonTypeString="listButtonHorizontal"
+                    isRequired />
+            </div>
             <div class="row mt-2 mb-4">
                 <textboxQuestion
                         id="phoneNumberField"
                         cmsWidgetName="PhoneNumberQuestion"
                         v-model="phoneNumber"
-                        validationRules="phone-number-required" />
+                        validationRules="phone-number-required"
+                        isRequired />
             </div>
             <div class="row mt-2 mb-4">
                 <textboxQuestion
                         id="emailField"
                         cmsWidgetName="EmailAddressQuestion"
                         v-model="email"
-                        validationRules="email-address-required" />
+                        validationRules="email-address-required"
+                        isRequired />
             </div>
             <div class="row mt-2 mb-4">
                 <site-footer
@@ -94,7 +109,7 @@
     import { required } 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 buttonQuestion from "@/common-components/button-question/button-question";
     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';
@@ -144,6 +159,16 @@
                 vm.setCmsContent(resultMap.cmsContent);
             });
         },
+        methods:
+        {
+            async forwardButtonAction() {
+                return this.navigateForward();
+            },
+
+            navigateForward() {            
+                
+            },
+        },
         computed:{
             DamageCauseOptions() {
                 const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
@@ -155,6 +180,14 @@
                 }
                 return answerArray;
             },
+            DamageGlassOnlyOptions()
+            {
+                return this.getCmsContent("GlassOnlyQuestion", "Answers");
+            },
+            DamageGlassOnlyQuestion()
+            {
+                return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
+            },
             stateOptions: {
                 get: function () {
                     return {
@@ -216,7 +249,7 @@
         components: {
             siteHeader,
             siteSubHeader,
-            buttonQuestionModal,
+            buttonQuestion,
             textboxQuestion,
             dropdownQuestion,
             siteFooter

From 5614873010897ea893773e869e3fe1fbc780c59b Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Wed, 4 Jan 2023 13:46:25 -0500
Subject: [PATCH 5/9] commit

---
 src/layouts/welcome-page/welcome-page.vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 87fcfdc5..28381dcb 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,5 +1,5 @@
 <template>
-<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" >
+<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  >
     <div class="page-container-grouped-styles overflow-auto welcome">
         <div class="fade-on-route-transition">
             <siteHeader cmsWidgetName="SiteHeaderWidget"/>
@@ -42,7 +42,6 @@
                     inputId="damageCauseQuestionField"
                     :options="DamageCauseOptions"
                     validationRules="loss-cause-required"
-                    placeholderText="Select an option"
                     />
             </div>
             <div class="row mt-2 mb-4">
@@ -101,17 +100,20 @@
 </template>
 
 <script>
+    // Components
     import siteHeader from '@/common-components/site-header/site-header';
     import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
-    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 { errorMessages } from "@/constants/error-messages";
-	import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+    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 siteFooter from "@/common-components/site-footer/site-footer";
+    
+    // Supporting files
+    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+    import { settleAllPromises } from "@/helpers/layout-helper";
+    import { Form, defineRule } from "vee-validate";
+    import { required } from "@/helpers/validation-rules";
+    import { errorMessages } from "@/constants/error-messages";
     import BaseFormMixin from '@/mixins/base-form-mixin.js';
 
     //define validation rules
@@ -252,7 +254,7 @@
             buttonQuestion,
             textboxQuestion,
             dropdownQuestion,
-            siteFooter
+            siteFooter,
         },
     }
 </script>

From 50d111811f42793788f99f3439f568a81f60cd25 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Thu, 5 Jan 2023 15:59:15 -0500
Subject: [PATCH 6/9] COMMIT

---
 src/layouts/welcome-page/welcome-page.vue | 58 +++++++++++++----------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 28381dcb..1684ed8e 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,12 +1,12 @@
 <template>
-<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  >
+<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"
+                        inputId="policyNumberField"
                         cmsWidgetName="PolicyNumberQuestion"
                         v-model="policyNumber"
                         isRequired
@@ -14,11 +14,11 @@
             </div>
             <div class="row mt-2 mb-4">
                 <textboxQuestion
-                        id="policyZipField"
-                        cmsWidgetName="PolicyZipQuestion"
-                        v-model="policyZip"
-                        isRequired
-                        validationRules="policy-zip-required" />
+                    inputId="policyZipField"
+                    cmsWidgetName="PolicyZipQuestion"
+                    v-model="policyZip"
+                    isRequired
+                    validationRules="policy-zip-required" />
             </div>
             <div class="row mt-2 mb-4">
                 <textboxQuestion
@@ -33,6 +33,9 @@
                     validationRules="loss-date-required"
                 />
             </div>
+            <div class="row mb-4">
+                <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
+            </div>
             <div class="row mt-2 mb-4">
                 <dropdownQuestion
                     cmsWidgetName="DamageCauseQuestion"
@@ -46,11 +49,11 @@
             </div>
             <div class="row mt-2 mb-4">
                 <textboxQuestion
-                        id="damageCityField"
-                        cmsWidgetName="DamageCityQuestion"
-                        v-model="damageCity"
-                        isRequired
-                        validationRules="loss-city-required" />
+                    inputId="damageCityField"
+                    cmsWidgetName="DamageCityQuestion"
+                    v-model="damageCity"
+                    isRequired
+                    validationRules="loss-city-required" />
             </div>
             <div class="row mt-2 mb-4">
                 <dropdownQuestion
@@ -67,6 +70,7 @@
                 <buttonQuestion
                     cmsWidgetName="GlassOnlyQuestion"
                     v-model="isDamageGlassOnly"
+                    inputId = "isDamageGlassOnly"
                     :answers="DamageGlassOnlyOptions"
                     :questionText="DamageGlassOnlyQuestion"
                     buttonTypeString="listButtonHorizontal"
@@ -74,25 +78,26 @@
             </div>
             <div class="row mt-2 mb-4">
                 <textboxQuestion
-                        id="phoneNumberField"
-                        cmsWidgetName="PhoneNumberQuestion"
-                        v-model="phoneNumber"
-                        validationRules="phone-number-required"
-                        isRequired />
+                    inputId="phoneNumberField"
+                    cmsWidgetName="PhoneNumberQuestion"
+                    v-model="phoneNumber"
+                    validationRules="phone-number-required"
+                    isRequired />
             </div>
             <div class="row mt-2 mb-4">
                 <textboxQuestion
-                        id="emailField"
-                        cmsWidgetName="EmailAddressQuestion"
-                        v-model="email"
-                        validationRules="email-address-required"
-                        isRequired />
+                    inputId="emailField"
+                    cmsWidgetName="EmailAddressQuestion"
+                    v-model="email"
+                    validationRules="email-address-required"
+                    isRequired />
             </div>
             <div class="row mt-2 mb-4">
                 <site-footer
-                        cmsWidgetName="SiteFooterWidget"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
+                    cmsWidgetName="SiteFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
     </div>
@@ -107,6 +112,7 @@
     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";
@@ -255,6 +261,8 @@
             textboxQuestion,
             dropdownQuestion,
             siteFooter,
+            textBlock,
+            Form,
         },
     }
 </script>

From 20cbb9272ebd58c2aeffc023a81138f9513e5009 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Fri, 6 Jan 2023 11:28:33 -0500
Subject: [PATCH 7/9] commit

---
 .../dropdown-question/dropdown-question.vue   |   2 +
 src/constants/error-messages.js               |  11 +-
 src/layouts/welcome-page/welcome-page.vue     | 241 +++++++++++-------
 3 files changed, 159 insertions(+), 95 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index 43c81ccb..47dc3ca1 100644
--- 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: {
diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 81d3b693..d97be6a1 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -24,14 +24,15 @@ 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",
+    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_CITY_REQUIRED: "Please enter a city",
     LOSS_STATE_REQUIRED: "Please enter loss state",
-    LOSS_DATE_REQUIRED: "Please enter a loss date"
+    LOSS_DATE_REQUIRED: "Please enter a loss date",
+    DAMAGE_OPTION_REQUIRED: "Please select an option"
 };
 
 export { errorMessages };
\ No newline at end of file
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 1684ed8e..7f3ca797 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -4,107 +4,137 @@
         <div class="fade-on-route-transition">
             <siteHeader cmsWidgetName="SiteHeaderWidget"/>
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
-            <div class="row mt-2 mb-4">
-                <textboxQuestion
+            <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
-                    inputId="policyZipField"
-                    cmsWidgetName="PolicyZipQuestion"
-                    v-model="policyZip"
-                    isRequired
-                    validationRules="policy-zip-required" />
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="policyZipField"
+                        cmsWidgetName="PolicyZipQuestion"
+                        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 mb-4">
-                <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
+            <div class="row">
+                <div class="col">
+                    <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
+                </div>
             </div>
-            <div class="row mt-2 mb-4">
-                <dropdownQuestion
-                    cmsWidgetName="DamageCauseQuestion"
-                    v-model="damageCause"
-                    ref="damageCause"
-                    isRequired
-                    inputId="damageCauseQuestionField"
-                    :options="DamageCauseOptions"
-                    validationRules="loss-cause-required"
+            <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
-                    inputId="damageCityField"
-                    cmsWidgetName="DamageCityQuestion"
-                    v-model="damageCity"
-                    isRequired
-                    validationRules="loss-city-required" />
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="damageCityField"
+                        cmsWidgetName="DamageCityQuestion"
+                        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" 
-                    isRequired
+            <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">
-                <buttonQuestion
-                    cmsWidgetName="GlassOnlyQuestion"
-                    v-model="isDamageGlassOnly"
-                    inputId = "isDamageGlassOnly"
-                    :answers="DamageGlassOnlyOptions"
-                    :questionText="DamageGlassOnlyQuestion"
-                    buttonTypeString="listButtonHorizontal"
-                    isRequired />
+            <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-2 mb-4">
-                <textboxQuestion
-                    inputId="phoneNumberField"
-                    cmsWidgetName="PhoneNumberQuestion"
-                    v-model="phoneNumber"
-                    validationRules="phone-number-required"
-                    isRequired />
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="phoneNumberField"
+                        cmsWidgetName="PhoneNumberQuestion"
+                        v-model="welcomePageModel.phoneNumber"
+                        validationRules="phone-number-required"
+                        isRequired
+                        disableAutoFill />
+                </div>
             </div>
-            <div class="row mt-2 mb-4">
-                <textboxQuestion
-                    inputId="emailField"
-                    cmsWidgetName="EmailAddressQuestion"
-                    v-model="email"
-                    validationRules="email-address-required"
-                    isRequired />
+            <div class="row mt-4">
+                <div class="col">
+                    <textboxQuestion
+                        inputId="emailField"
+                        cmsWidgetName="EmailAddressQuestion"
+                        v-model="welcomePageModel.email"
+                        validationRules="email-address-required|email-address-format"
+                        isRequired
+                        disableAutoFill />
+                </div>
             </div>
-            <div class="row mt-2 mb-4">
-                <site-footer
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
+            <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';
@@ -118,7 +148,7 @@
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
     import { settleAllPromises } from "@/helpers/layout-helper";
     import { Form, defineRule } from "vee-validate";
-    import { required } from "@/helpers/validation-rules";
+    import { required, regex } from "@/helpers/validation-rules";
     import { errorMessages } from "@/constants/error-messages";
     import BaseFormMixin from '@/mixins/base-form-mixin.js';
 
@@ -132,21 +162,40 @@
     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
+        )
+    );
+    
     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
@@ -253,6 +302,14 @@
                     };
                 },
             },
+            welcomePageModel: {
+                get: function () {
+                    return this.modelValue;
+                },
+                set: function (newValue) {
+                    this.$emit("update:modelValue", newValue);
+                },
+            },
         },
         components: {
             siteHeader,
@@ -284,5 +341,9 @@
     color: #000000 !important;
     margin-bottom: 16px !important;
 }
+.my-2
+{
+    margin-bottom: 0rem !important;
+}
 </style>
 

From 230dc752b311e8b44a1f80af23509e657b6e98c6 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Fri, 6 Jan 2023 12:07:47 -0500
Subject: [PATCH 8/9] commit

---
 src/constants/error-messages.js           | 3 ++-
 src/layouts/welcome-page/welcome-page.vue | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index d97be6a1..19dda7e8 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -26,11 +26,12 @@ const errorMessages = {
     VEHICLE_REQUIRED: "Please select a vehicle",
     POLICY_NUMBER_REQUIRED: "Please enter your policy number",
     PHONE_NUMBER_REQUIRED: "Please enter phone number",
+    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 a city",
-    LOSS_STATE_REQUIRED: "Please enter loss state",
+    LOSS_STATE_REQUIRED: "Please select an option",
     LOSS_DATE_REQUIRED: "Please enter a loss date",
     DAMAGE_OPTION_REQUIRED: "Please select an option"
 };
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 7f3ca797..5b4e95d1 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -106,6 +106,7 @@
                         v-model="welcomePageModel.phoneNumber"
                         validationRules="phone-number-required"
                         isRequired
+                        mask="###-###-####"
                         disableAutoFill />
                 </div>
             </div>
@@ -174,6 +175,13 @@
             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",

From 2f0ce627ec20104f0a904e63596a0d817212ab1c Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Fri, 6 Jan 2023 12:36:41 -0500
Subject: [PATCH 9/9] commit

---
 src/layouts/address-lookup/address-lookup.vue             | 6 +++---
 src/layouts/license-plate-lookup/license-plate-lookup.vue | 6 +++---
 src/layouts/vehicle-lookup/vehicle-lookup.vue             | 6 +++---
 src/layouts/vin-lookup/vin-lookup.vue                     | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 996479e0..4dff1016 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -1,5 +1,5 @@
 <template>  
-  <VeeValidateForm @submit="onSubmit" @invalid-submit="onInvalidSubmit">
+  <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
     <div class="page-container-grouped-styles overflow-auto">
       <SiteHeader
         cms-widget-name="SiteHeaderWidget"
@@ -21,7 +21,7 @@
         />
       </div>
     </div>
-  </VeeValidateForm>
+  </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -40,7 +40,7 @@ export default {
   name: 'address-lookup',
   mixins: [BaseFormMixin],
   components: {
-    VeeValidateForm: Form,
+    Form,
     SiteFooter,
     SiteHeader,
     SiteSubHeader,
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index e6eb61f9..73a4c3c7 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,5 +1,5 @@
 <template>  
-  <VeeValidateForm @submit="onSubmit" @invalid-submit="onInvalidSubmit">
+  <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
     <div class="page-container-grouped-styles overflow-auto">
       <SiteHeader
         cms-widget-name="SiteHeaderWidget"
@@ -21,7 +21,7 @@
         />
       </div>
     </div>
-  </VeeValidateForm>
+  </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -40,7 +40,7 @@ export default {
   name: 'license-plate-lookup',
   mixins: [BaseFormMixin],
   components: {
-    VeeValidateForm: Form,
+    Form,
     SiteFooter,
     SiteHeader,
     SiteSubHeader,
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 8ebbd2c3..9e65310e 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -1,5 +1,5 @@
 <template>
-  <VeeValidateForm
+  <Form
     @submit="onSubmit"
     @invalid-submit="onInvalidSubmit"
   >
@@ -29,7 +29,7 @@
         />
       </div>
     </div>
-  </VeeValidateForm>
+  </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -50,7 +50,7 @@ export default {
   name: 'vehicle-lookup',
   mixins: [BaseFormMixin],
   components: {
-    VeeValidateForm: Form,
+    Form,
     SiteFooter,
     SiteHeader,
     SiteSubHeader,
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 88fa8171..0321b330 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,5 +1,5 @@
 <template>
-  <VeeValidateForm
+  <Form
     @submit="onSubmit"
     @invalid-submit="onInvalidSubmit"
     v-slot="{ meta }"
@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-  </VeeValidateForm>
+  </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -65,7 +65,7 @@ export default {
     SiteFooter,
     SiteHeader,
     SiteSubHeader,
-    VeeValidateForm: Form,
+    Form,
     VehicleBanner,
     VinLocationInformation,
     VinLookupAlerts,