Merge branch 'develop' into feature/Digital/SSR-193

# Conflicts:
#	src/router/router-constants/routing-table.js

src/common-components/base-input-button/base-input-button.vue

@@ -169,10 +169,4 @@ input {
     width: 0;
     position: absolute;
 }
-
-@supports (-moz-appearance: none) {
-    input {
-        margin-top: -3.5px;
-    }
-}
 </style>

src/common-components/site-footer/site-footer.vue

@@ -58,7 +58,7 @@ export default {
         };
     },
     mounted() {
-        this.paddingHeight = this.includeFooterImage ?  this.getFooterInfoBoxHeight() + 89 : this.getFooterInfoBoxHeight() + 24;
+        this.paddingHeight = this.includeFooterImage ?  this.getFooterInfoBoxHeight() + 16 : this.getFooterInfoBoxHeight() + 24;
         this.$nextTick(() => {
             window.addEventListener("resize", this.onResize);
         });

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

@@ -0,0 +1,37 @@
+<template>
+    <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-4">
+                    <div class="col">
+                        <span>PlaceHolder for policy holder details</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
+    </template>
+    <script>
+        // Components
+    import siteHeader from '@/common-components/site-header/site-header';
+    import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
+
+      // 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 { errorMessages } from "@/constants/error-messages";
+    import BaseFormMixin from '@/mixins/base-form-mixin.js';
+    
+    export default {
+        name: "policy-holder-details",
+        components: {
+            siteHeader,
+            siteSubHeader,
+            Form,
+        },
+    }
+    </script>

src/layouts/welcome-page/welcome-page.spec.js

@@ -0,0 +1,92 @@
+import welcomePage from "@/layouts/welcome-page/welcome-page.vue";
+
+// Supporting files
+// Supporting files
+import { shallowMount } from '@vue/test-utils';
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { applicationConfig } from "@/constants/application-config";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+  
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+
+describe("welcome-page.vue", () => {
+    test("Should render welcomePage sub-components (policyNumber, policyZipCode, dateOfLoss, damageCause etc.)", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+        // Act
+        const policyNumber = wrapper.findComponent({ ref: "policyNumber" });
+        const dateOfLoss = wrapper.findComponent({ ref: "dateOfLoss" });
+        const damageCause = wrapper.findComponent({ ref: "damageCause" });
+        const damageCity = wrapper.findComponent({ ref: "damageCity" });
+        const state = wrapper.findComponent({ ref: "state" });
+        const glassOnlyDamage = wrapper.findComponent({ ref: "glassOnlyDamage" });
+        const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
+        const email = wrapper.findComponent({ ref: "email" });
+
+
+        // Assert
+        expect(policyNumber.exists()).toBe(true);
+        expect(dateOfLoss.exists()).toBe(true);
+        expect(damageCause.exists()).toBe(true);
+        expect(damageCity.exists()).toBe(true);
+        expect(state.exists()).toBe(true);
+        expect(glassOnlyDamage.exists()).toBe(true);
+        expect(phoneNumber.exists()).toBe(true);
+        expect(email.exists()).toBe(true);
+    });
+});
+
+function setupMocks({
+    pageHeaderWidgetHeaderText = {},
+    pageFooterWidgetCmsContent = {},
+    mountOptionsMockData = {},
+}) {
+    //Mock api responses
+    const apiResponses = {
+      cmsContent: {
+        SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
+        VehicleBannerWidget: {
+          GenericVehicleImage:
+            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
+        },
+        SiteHeaderWidget: {
+          LogoImage:
+            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
+        },
+        SiteFooterWidget: pageFooterWidgetCmsContent,
+        
+      },
+    };
+  
+    mountOptionsMockData = {
+        ...mountOptionsMockData,
+        router: {
+            navigate: jest.fn(),
+        },
+    };
+
+    const apiPromise = Promise.resolve(apiResponses);
+  
+    settleAllPromises.mockImplementation(() => apiPromise);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+    
+    const mountOptions = getMountOptions(mountOptionsMockData);
+
+    const wrapper = shallowMount(welcomePage, mountOptions);
+
+    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+    
+    return { wrapper, apiPromise };
+}
+

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

@@ -9,8 +9,9 @@
                     <textboxQuestion
                         inputId="policyNumberField"
                         cmsWidgetName="PolicyNumberQuestion"
-                        v-model="welcomePageModel.policyNumber"
+                        v-model="policyNumber"
                         isRequired
+                        ref="policyNumber"
                         disableAutoFill
                         validationRules="policy-number-required" />
                 </div>
@@ -20,9 +21,10 @@
                     <textboxQuestion
                         type="date"
                         cmsWidgetName="DateOfLossQuestion"
-                        v-model="welcomePageModel.dateOfLoss"
+                        v-model="dateOfLoss"
                         inputId="dateOfLossField"
                         isRequired
+                        ref="dateOfLoss"
                         disableAutoFill
                         :max="new Date().toJSON().slice(0,10)"
                         :min="'1972-12-01'"
@@ -39,7 +41,7 @@
                 <div class="col">
                     <dropdownQuestion
                         cmsWidgetName="DamageCauseQuestion"
-                        v-model="welcomePageModel.damageCause"
+                        v-model="damageCause"
                         ref="damageCause"
                         inputId="damageCauseQuestionField"
                         :options="DamageCauseOptions"
@@ -53,8 +55,9 @@
                     <textboxQuestion
                         inputId="damageCityField"
                         cmsWidgetName="DamageCityQuestion"
-                        v-model="welcomePageModel.damageCity"
+                        v-model="damageCity"
                         isRequired
+                        ref="damageCity"
                         disableAutoFill
                         validationRules="loss-city-required" />
                 </div>
@@ -63,7 +66,7 @@
                 <div class="col">
                     <dropdownQuestion
                         cmsWidgetName="DamageStateQuestion"
-                        v-model="welcomePageModel.damageState"
+                        v-model="damageState"
                         ref="state"
                         inputId="8fdf9dc2e13e430eb57529499dceb3eb"
                         :options="stateOptions"
@@ -76,13 +79,14 @@
             <div class="row mt-4">
                     <buttonQuestion
                         cmsWidgetName="GlassOnlyQuestion"
-                        v-model="welcomePageModel.isDamageGlassOnly"
+                        v-model="isDamageGlassOnly"
                         inputId = "isDamageGlassOnly"
                         :answers="DamageGlassOnlyOptions"
                         :questionText="DamageGlassOnlyQuestion"
                         buttonTypeString="listButtonHorizontal"
                         validationRules="damage-option-required" 
                         isRequired
+                        ref="glassOnlyDamage"
                         disableAutoFill/>
             </div>
             <div class="row mt-4">
@@ -90,9 +94,10 @@
                     <textboxQuestion
                         inputId="phoneNumberField"
                         cmsWidgetName="PhoneNumberQuestion"
-                        v-model="welcomePageModel.phoneNumber"
+                        v-model="phoneNumber"
                         validationRules="phone-number-required|phone-number-format"
                         isRequired
+                        ref="phoneNumber"
                         mask="###-###-####"
                         disableAutoFill />
                 </div>
@@ -102,7 +107,8 @@
                     <textboxQuestion
                         inputId="emailField"
                         cmsWidgetName="EmailAddressQuestion"
-                        v-model="welcomePageModel.email"
+                        v-model="email"
+                        ref="email"
                         validationRules="email-address-required|email-address-format"
                         isRequired
                         disableAutoFill />
@@ -168,23 +174,18 @@
     export default {
         name: "welcome-page",
         mixins: [BaseFormMixin],
-        data: {
+        data() {
-            modelValue: {
+            return {
-                type: Object,
+                    policyNumber: "",
-                default: () => ({
+                    policyZipCode: "",
-                    welcomePageModel: {
+                    dateOfLoss: "",
-                        policyNumber: "",
+                    damageCause: "",
-                        policyZipCode: "",
+                    damageState: "",
-                        dateOfLoss: "",
+                    damageCity: "",
-                        damageCause: "",
+                    isDamageGlassOnly: "",
-                        damageState: "",
+                    phoneNumber: "",
-                        damageCity: "",
+                    email: ""
-                        isDamageGlassOnly: "",
+            };
-                        phoneNumber: "",
-                        email: ""
-                    },
-                }),
-             },
         },
         async beforeRouteEnter(to, from, next) 
         {
@@ -213,16 +214,22 @@
             },
 
             navigateForward() {            
-                
+                this.$router.navigate(
+                    this.navigationScenarios.WELCOME_PAGE,
+                    this.$route
+                );
             },
         },
         computed:{
             DamageCauseOptions() {
                 const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
                 const answerArray = [];
-                for (let answer of Object.values(damageCauseAnswers)) {
+                if(damageCauseAnswers)
-                    if (answer?.Name) {
+                {
-                        answerArray.push(answer.Name);
+                   for (let answer of Object.values(damageCauseAnswers)) {
+                        if (answer?.Name) {
+                            answerArray.push(answer.Name);
+                        }
                     }
                 }
                 return answerArray;
@@ -315,22 +322,6 @@
 </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;
-}
 .my-2
 {
     margin-bottom: 0rem !important;

src/router/router-constants/issPage-values.js

@@ -1,5 +1,6 @@
 export const issPageValues = {
     WELCOME_PAGE: "welcome-page",
+    POLICY_HOLDER_DETAILS: "policy-holder-details",
     VEHICLE_MAKE: "vehicle-make",
     VEHICLE_YEAR: "vehicle-year",
     VEHICLE_MODEL: "vehicle-model",

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

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

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

@@ -273,16 +273,15 @@ const routingTable = function(store) {
       issPageValue: issPageValues.WELCOME_PAGE,
       maps: [
         {
-          scenario: navigationScenarios.CLICKED_FORWARD,
+          scenario: navigationScenarios.CLICKED_BACK,
-          destinationIssPageValue: issPageValues.VEHICLE_YEAR,
+          destinationIssPageValue: issPageValues.WELCOME_PAGE
         },
         {
-          scenario: navigationScenarios.CLICKED_TEST,
+          scenario: navigationScenarios.WELCOME_PAGE,
-          destinationUrl: "https://www.google.com"
+          destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
-        }
+        },
-      ]
+      ],
     },
-  
   ];
 };
 

src/router/router.spec.js

@@ -15,13 +15,13 @@ describe("Router", () => {
 
 
     it("Should push next view when navigating locally", () => {
-        let scenario = navigationScenarios.CLICKED_FORWARD;
+        let scenario = navigationScenarios.WELCOME_PAGE;
         let currentRoute = { query: { issPage: issPageValues.WELCOME_PAGE }};
 
         router.push = jest.fn();
         
         router.navigate(scenario, currentRoute);
-        expect(router.push.mock.calls[0][0].query.issPage).toBe(issPageValues.VEHICLE_YEAR);
+        expect(router.push.mock.calls[0][0].query.issPage).toBe(issPageValues.POLICY_HOLDER_DETAILS);
         
     });