commit

src/constants/error-messages.js

@@ -29,7 +29,8 @@ const errorMessages = {
     POLICY_ZIP_REQUIRED: "Please enter policy zip",
     POLICY_ZIP_FORMAT: "Please enter a valid policy ZIP",
     LOSS_CAUSE_REQUIRED: "Please enter loss cause",
-    LOSS_CITY_REQUIRED: "Please enter loss city"
+    LOSS_CITY_REQUIRED: "Please enter loss city",
+    LOSS_STATE_REQUIRED: "Please enter loss state"
 };
 
 export { errorMessages };

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

@@ -4,6 +4,17 @@
         <siteHeader cmsWidgetName="Header"/>
         <p>Welcome Page Placeholder</p>
         <br />
+        <div class="col">
+				<dropdownQuestion
+					cmsWidgetName="LossStateQuestionWidget"
+					v-model="addressModel.lossState"
+					ref="lossState"
+					inputId="LossStateQuestionWidget"
+					:options="stateOptions"
+					disableAutoFill
+					validationRules="loss-state-required"
+				/>
+		</div>
         <navButton type="button" text="Next" :scenario="this.navigationScenarios.CLICKED_FORWARD"></navButton>
         <navButton text="Google" :scenario="this.navigationScenarios.CLICKED_TEST"></navButton>
     </div>
@@ -15,32 +26,117 @@
     import siteHeader from '@/common-components/site-header/site-header';
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
     import { settleAllPromises } from "@/helpers/layout-helper";
+    import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+    import { defineRule } from "vee-validate";
+    import { required } from "@/helpers/validation-rules";
+    import { errorMessages } from "@/constants/error-messages";
 
+    //define validation rules
+    defineRule("loss-state-required", required(errorMessages.STATE_REQUIRED));
 
-    export default {
+    export default ({
         name: "welcome-page",
-        components: { navButton, siteHeader },
+        emits: ['update:modelValue'], // The component emits an event
+	    props: {
+		    modelValue: {
+			    type: Object,
+			    default: () => ({
+				    lossState: "",
+			    }),
+		    },
+		    validationRules: String,       
+	    }, 
+        components: { navButton, siteHeader, dropdownQuestion },
         async beforeRouteEnter(to, from, next) 
+        {
+            // Call APIs
+            const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+            // Settle promises and get results
+            const promiseResultMap = [
             {
-                // Call APIs
-                const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-
-                // Settle promises and get results
-                const promiseResultMap = [
-                    {
-                        resultKey: "cmsContent",
-                        promise: cmsContentPromise,
-                    },
-                ];
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+                },
+            ];
                 
-                //use resultMap to populate layout content.
-                let resultMap = await settleAllPromises(promiseResultMap);
+            //use resultMap to populate layout content.
+            let resultMap = await settleAllPromises(promiseResultMap);
 
-                next((vm) => {
-                    vm.setCmsContent(resultMap.cmsContent);
-                });
-            },
-    }
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+            });
+        },
+        computed: 
+        {
+		    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',            
+				    }
+			    }
+		    },
+            addressModel: 
+            {
+			    get: function() {
+				    return this.modelValue;
+			    },  
+			    set: function(newValue) {
+				    this.$emit("update:modelValue", newValue);
+			    }
+		    },
+        }
+    })
 </script>
 
 <style scoped>