Merge pull request #131 from Safelite/feature/SSR-215

Feature/ssr 215

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

@@ -1,37 +1,137 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-        <div class="page-container-grouped-styles overflow-auto welcome">
+        <div class="page-container-grouped-styles overflow-auto">
             <div class="fade-on-route-transition">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
                 <div class="row mt-4">
                     <div class="col">
-                        <span>PlaceHolder for policy holder details</span>
+                        <textboxQuestion
-                    </div>
+                            inputId="firstNameField"
+                            cmsWidgetName="PolicyholderFirstNameQuestion"
+                            v-model="customerQuestions.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="customerQuestions.lastName"
+                            isRequired
+                            ref="policyHolderLastName"
+                            disableAutoFill
+                            validationRules="last-name-required" />
+                    </div>        
+                </div>
+                <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" />
+                <siteFooter
+                    cmsWidgetName="SiteFooterWidget"
+                    ref="siteFooter"
+                    :isForwardActionDisabled="!meta.valid"
+                    @ForwardClicked="forwardButtonAction"
+                    @back-clicked="backButtonAction"
+                     />
             </div>
         </div>
     </Form>
-    </template>
+</template>
-    <script>
+<script>
-        // Components
+// Components
-    import siteHeader from '@/common-components/site-header/site-header';
+import siteHeader from '@/common-components/site-header/site-header';
-    import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import addressQuestions from "@/common-components/address-questions/address-questions";
+import siteFooter from "@/common-components/site-footer/site-footer";
 
-      // Supporting files
+// Supporting files
-    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    import { settleAllPromises } from "@/helpers/layout-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
-    import { Form, defineRule } from "vee-validate";
+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 { errorMessages } from "@/constants/error-messages";
-    import BaseFormMixin from '@/mixins/base-form-mixin.js';
+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-name-required", required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
     
-    export default {
+export default {
-        name: "policy-holder-details",
+    name: "policy-holder-details",
-        components: {
+    mixins: [BaseFormMixin],
-            siteHeader,
+    data() {
-            siteSubHeader,
+        return {
-            Form,
+            customerQuestions: this.getPolicyHolderDetailsFromStore()
+        };
+    },
+    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);
+        });
+    },
+    methods:
+    {
+        backButtonAction() {
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
-    }
+        
-    </script>
+        forwardButtonAction()
+        {
+            this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
+            return this.navigateForward();
+        },
+
+        navigateForward() {            
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
+                this.$route
+            );
+        },
+        getPolicyHolderDetailsFromStore() {
+            return {
+                addressQuestions :
+                {
+                    streetAddress: this.mainStore.order.customer.address.streetAddress,
+                    city: this.mainStore.order.customer.address.city,
+                    state: this.mainStore.order.customer.address.state,
+                    zipCode: this.mainStore.order.customer.address.zipCode,
+                },
+                firstName : this.mainStore.order.customer.firstName,
+                lastName : this.mainStore.order.customer.lastName,
+            }
+        },
+    },
+    components: {
+        siteHeader,
+        siteSubHeader,
+        textboxQuestion,
+        addressQuestions,
+        siteFooter,
+        Form,
+    },
+}
+</script>

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

@@ -215,7 +215,7 @@
 
             navigateForward() {            
                 this.$router.navigate(
-                    this.navigationScenarios.WELCOME_PAGE,
+                    this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
                     this.$route
                 );
             },

src/router/router-constants/navigation-scenarios.js

@@ -8,7 +8,8 @@ const navigationScenarios = {
     SELECTED_MAKE: "SELECTED_MAKE",
     SELECTED_MODEL: "SELECTED_MODEL",
     SELECTED_STYLE: "SELECTED_STYLE",
-    WELCOME_PAGE: "WELCOME_PAGE",
+    CLICKED_FORWARD_WELCOME_PAGE: "CLICKED_FORWARD_WELCOME_PAGE",
+    CLICKED_FORWARD_POLICY_HOLDER_DETAILS: "CLICKED_FORWARD_POLICY_HOLDER_DETAILS",
     
     // Vin selection
     CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",

src/router/router-constants/routing-table.js

@@ -301,11 +301,24 @@ const routingTable = function(store) {
           destinationIssPageValue: issPageValues.WELCOME_PAGE
         },
         {
-          scenario: navigationScenarios.WELCOME_PAGE,
+          scenario: navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
           destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
         },
       ],
     },
+    {
+      issPageValue: issPageValues.POLICY_HOLDER_DETAILS,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.WELCOME_PAGE
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
+          destinationIssPageValue: issPageValues.VEHICLE_YEAR
+        },
+      ],
+    },
   ];
 };
 

src/router/router.spec.js

@@ -15,7 +15,7 @@ describe("Router", () => {
 
 
     it("Should push next view when navigating locally", () => {
-        let scenario = navigationScenarios.WELCOME_PAGE;
+        let scenario = navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE;
         let currentRoute = { query: { issPage: issPageValues.WELCOME_PAGE }};
 
         router.push = jest.fn();

src/store/index.js

@@ -665,6 +665,15 @@ export const useMainStore = defineStore({
         this.order.customer.phoneNumber = welcomePageModel?.phoneNumber;
         this.order.customer.emailAddress = welcomePageModel?.email;
       },
+      updatePolicyHolderDetails(customerQuestions)
+      {
+        this.order.customer.address.streetAddress = customerQuestions.addressQuestions.streetAddress;
+        this.order.customer.address.city = customerQuestions.addressQuestions.city;
+        this.order.customer.address.state = customerQuestions.addressQuestions.state;
+        this.order.customer.address.zipCode = customerQuestions.addressQuestions.zipCode;
+        this.order.customer.firstName = customerQuestions.firstName;
+        this.order.customer.lastName = customerQuestions.lastName;
+      },
       savePartQuestionAnswers(partQuestionAnswersArray) {
         // if part question answers have changed, reset subsequent question answers
         const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(