commit

src/constants/error-messages.js

@@ -33,7 +33,11 @@ const errorMessages = {
     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"
+    DAMAGE_OPTION_REQUIRED: "Please select an option",
+
+    POLICYHOLDER_FIRST_NAME_REQUIRED: "Please enter the policyholder first name",
+    POLICYHOLDER_LAST_NAME_REQUIRED: "Please enter the policyholder last name",
+
 };
 
 export { errorMessages };

src/layouts/policy-holder-details/policy-holder-details.vue

@@ -6,7 +6,26 @@
                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
                 <div class="row mt-4">
                     <div class="col">
-                        <span>PlaceHolder for policy holder details</span>
+                        <textboxQuestion
+                            inputId="firstNameField"
+                            cmsWidgetName="PolicyholderFirstNameQuestion"
+                            v-model="policyHolderModel.firstName"
+                            isRequired
+                            ref="policyHolderFirstName"
+                            disableAutoFill
+                            validationRules="first-name-required" />
+                    </div>        
+                </div>
+                <div class="row mt-4">
+                    <div class="col">
+                        <textboxQuestion
+                            inputId="lastNameField"
+                            cmsWidgetName="PolicyholderLastNameQuestion"
+                            v-model="policyHolderModel.lastName"
+                            isRequired
+                            ref="policyHolderLastName"
+                            disableAutoFill
+                            validationRules="last-name-required" />
                     </div>        
                 </div>
             </div>
@@ -17,20 +36,61 @@
 // Components
 import siteHeader from '@/common-components/site-header/site-header';
 import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { Form, defineRule } from "vee-validate";
-    import { required, regex } from "@/helpers/validation-rules";
+import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
+
+//define validation rules
+defineRule("first-name-required", required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
+defineRule("last-cause-required", required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
     
 export default {
     name: "policy-holder-details",
+    mixins: [BaseFormMixin],
+    data() {
+        return {
+            policyHolderModel: 
+            {
+                firstName: "",
+                lastName: "",
+            }
+        };
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    async beforeRouteEnter(to, from, next) 
+    {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+        {
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
+        },];
+
+                
+        //use resultMap to populate layout content.
+        let resultMap = await settleAllPromises(promiseResultMap);
+
+        next((vm) => {
+           vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
     components: {
         siteHeader,
         siteSubHeader,
+        textboxQuestion,
         Form,
     },
 }