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

2023-05-02 16:44:54 +05:30 · 2023-05-02 16:44:54 +05:30 · bdf58d4ffa
commit bdf58d4ffa
parent 513be29045 276737f8c9
26 changed files with 318 additions and 138 deletions
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@ -121,7 +121,11 @@ const endpoints = {
  IsVinbyAddressPermissible:{
    url:'/vehicle/api/v1/vehicle/is-vin-by-address-permissible',
    method:'Get'
-  }
+  },
+  CoveragePolicyInfo: {
+    url: '/coverage/api/v1/coverage/get-policy-information',
+    method: 'POST'
+}
 };
  
 export { endpoints };
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@ -8,7 +8,7 @@
                    <div class="row px-3">
                        <div class="col">
                            <div class="select-car-form rounded">
-                                <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                                <vehicleBanner class="mt-2 mb-4" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
                                <alert
                                ref="alertFewMoreQuestions"
@ -16,7 +16,8 @@
                                alertClass="alert-warning"
                                :manualHeadline="alertFewMoreQuestionsHeader"
                                :manualCopy="alertFewMoreQuestionsCopy"
-                                v-bind:isDismissible="false" />
+                                v-bind:isDismissible="false" 
+                                class="mt-5"/>
                                <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                                    <questionChain
                                    ref="questionChain"
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@ -63,7 +63,7 @@ export default {
    },
    methods: {
        show() {
-            this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
+            this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
            this.isActive = true;
            document.querySelector('.fade-on-route-transition').scrollTo({
                top: 0,  behavior: 'instant'
@ -123,8 +123,8 @@ export default {
    &.menu-modal {
        max-width: 576px;
        left: auto;
-        height: calc(100% - 72px);
-        top: 72px;
+        height: calc(100% - 56px);
+        top: 56px;
        border-top: 1px solid $gray-300;
        overflow-x: visible;
        overflow-y: visible;
--- a/src/iss-components/site-header/site-header.vue
+++ b/src/iss-components/site-header/site-header.vue
@ -1,6 +1,6 @@
 <template>
    <div>
-        <div class="site-header d-flex justify-content-center align-items-center flex-column py-2 mb-4" :style="logoBackgroundStyle">
+        <div class="site-header d-flex justify-content-center align-items-center flex-column py-2" :style="logoBackgroundStyle">
            <img id="siteHeaderImage" class="img-fluid" :src="imageSrc" :alt="altText" />
            <menuModal/>
        </div>
@ -53,12 +53,19 @@ export default({
            };
        }
    },
+    methods: {
+        setupHeader(){
+            const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
+            if(Array.isArray(answers))
+            {
+                this.headerAnswers = answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0]
+                this.headerAnswers = !this.headerAnswers ? answers.filter(x => x.AccountNumber === '0')[0] : this.headerAnswers;
+            }
+        }
+    },
    mounted() {
-        const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
-        this.headerAnswers = Array.isArray(answers)
-        ? answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0]
-        : null;
-
+        this.$nextTick(this.setupHeader);
+    
        // Check if alert event is on the bus
        const alertEvent = eventBus.readAndPopEventFromBus(
            globalEvents.Categories.GLOBAL_ALERT,
@ -78,23 +85,22 @@ export default({
            {
                document.getElementsByTagName("body")[0].className += " " + clientOverrideClass;
            }
-        },
-        components: {
-            menuModal,
-            alert
-        },
+    }, 
+    components: {
+        menuModal,
+        alert
+    },
    })
    </script>

    <style lang="scss" scoped>
    .site-header {
-        height: 72px;
+        height: 56px;
    }
    .alert {
        left: 0;
        top: 72px;
    }
-
    #siteHeaderImage {
        height: 2.5rem;
    }
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@ -9,11 +9,11 @@
                            <div class="col">
                                <div class="select-car-form rounded">
                                    <vehicleBanner
-                                    class="mb-3"
+                                    class="mt-2 mb-4"
                                    cmsWidgetName="VehicleBannerWidget"
                                    ref="vehicleBanner"
                                    :displayGenericVehicleImage="false" />
-                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
+                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" class="mb-5" />
                                    <alert
                                    ref="alertVinNotFound"
                                    v-if="displayVinNotFoundAlert"
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@ -8,7 +8,7 @@
      <siteHeader cmsWidgetName="SiteHeaderWidget" />
      <div class="fade-on-route-transition sub-container overflow-scroll px-5">
        <vehicleBanner
-          class="mb-3"
+          class="mt-2 mb-4"
          cmsWidgetName="VehicleBannerWidget"
          :displayGenericVehicleImage="false" />
        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@ -12,7 +12,7 @@
                                  cmsWidgetName="verifyingCoverageStatement"
                                  typeStyle="h5"
                                  justifyText="center"
-                                  class="mt-0 mb-4"
+                                  class="mt-4 mb-4"
                                  id="coverage-statement-text-block"
                                  />
                                  <div>
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@ -8,7 +8,7 @@
                        <div class="row px-3">
                            <div class="col">
                                <div class="select-car-form rounded">
-                                    <vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <vehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
                                    <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
                                    <alert
                                    ref="alertVinNotFound"
--- a/src/layouts/policy-holder-details/policy-holder-details.spec.js
+++ b/src/layouts/policy-holder-details/policy-holder-details.spec.js
@ -6,7 +6,8 @@ import { shallowMount } from '@vue/test-utils';
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-
+import { useMainStore } from "@/store";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";

 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@ -65,8 +66,9 @@ describe("navigation", () => {
            customerQuestions: {
                addressQuestions: mockRegistrationAddress,
            },
+            isCoverageEnabled:false
        });
-
+        
        wrapper.vm.navigateForward = jest.fn();

        // Act
@ -76,6 +78,53 @@ describe("navigation", () => {
        expect(wrapper.vm.navigateForward).toHaveBeenCalled();
       
    });
+
+    test("if the coverage policy verified navigate forward to policy-vehicle page", async () => {         
+        // Arrange
+        const mockRegistrationAddress = {
+            streetAddress: "1234 Main St",
+            city: "Columbus",
+            state: "OH",
+            zipCode: "43215",
+        };
+
+        const { wrapper } = setupMocks();
+
+        await wrapper.setData({
+            firstName: "KK",
+            lastName:"KK",
+            customerQuestions: {
+                addressQuestions: mockRegistrationAddress,
+            },
+            isCoverageEnabled : true,
+        });
+        const vehiclesFound = [{
+            vehicles:[
+                {
+                    vin: "TEST_VIN",
+                },
+                {
+                    vin: "TEST_VIN2",
+                }
+            ]}];
+
+        useMainStore().order.policy.policyNumber = "p_0001";
+        useMainStore().order.policy.dateOfLoss = "2022-01-28";
+        useMainStore().order.accountNumber = "00000";        
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert
+        expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+            navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED,
+            undefined,
+            {},
+            {},
+            vehiclesFound
+        );
+       
+    });
    
 });

@ -97,8 +146,29 @@ function setupMocks()

        })
    );
+    const policies = [{
+        vehicles:[
+            {
+                vin: "TEST_VIN",
+            },
+            {
+                vin: "TEST_VIN2",
+            }
+        ]
+    },
+];
+    useMainStore().getCoveragePolicyInfo = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: {                
+                policies:policies,
+            },
+        })
+    })

    const apiResponses = {
+        policyLookupResponse:{
+            policies:policies
+        }
    };

    settleAllPromises.mockImplementation(() => apiResponses);
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@ -17,6 +17,7 @@
                            disableAutoFill
                            validationRules="first-name-required" />
                            <textboxQuestion
+                            class="mt-4"
                            inputId="lastNameField"
                            cmsWidgetName="PolicyholderLastNameQuestion"
                            v-model="customerQuestions.lastName"
@ -97,17 +98,44 @@ export default {
                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
            },

-            forwardButtonAction()
-            {
-                this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
-                return this.navigateForward();
+           async forwardButtonAction()
+            {                
+                this.mainStore.updatePolicyHolderDetails(this.customerQuestions);                
+                //call coverage policy lookup if isCoverageEnabled flag enabled
+                var vehiclesFound = {};
+                if(this.isCoverageEnabled){                    
+                    const policyLookupResponse = this.mainStore.getCoveragePolicyInfo({
+                        accountNumber:this.mainStore.order.accountNumber.toString(),
+                        policyNumber:this.mainStore.order.policy.policyNumber,
+                        dateOfLoss:this.mainStore.order.policy.dateOfLoss});
+
+                    // Settle promises and get results
+                    const promisePolicyLookupResultMap = [
+                        {
+                            resultKey: "policyLookupResponse",
+                            promise: policyLookupResponse,
+                        }
+                    ];
+                    const policyLookupResultMap = await settleAllPromises(promisePolicyLookupResultMap);
+                    vehiclesFound = policyLookupResultMap.policyLookupResponse?.policies;
+                }
+                return this.navigateForward(vehiclesFound);
            },

-            navigateForward() {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
-                    this.$route
-                );
+            navigateForward(vehiclesFound) {
+                if(vehiclesFound?.length > 0)
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED,
+                        this.$route,
+                        {},
+                        {},
+                        vehiclesFound
+                    );        
+                    else
+                        this.$router.navigate(
+                            this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+                            this.$route
+                        );
            },
            getPolicyHolderDetailsFromStore() {
                return {
@ -124,6 +152,11 @@ export default {
                }
            },
        },
+        computed:{
+            isCoverageEnabled(){
+                return this.mainStore.issConfig.isCoverageEnabled;
+            }
+        },
        components: {
            siteHeader,
            siteSubHeader,
@ -135,11 +168,6 @@ export default {
    }
    </script>
    <style lang="scss">
-    .alert.alert-warning
-    {
-        margin-top: 20px;
-    }
-
    #sub-header p {
        font-size: 16px;
        line-height: 26px;
--- a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
@ -3,26 +3,39 @@
    :questionText="questionText" 
    ref="policyVehiclesQuestion"
    buttonTypeString="listButton"
-    isOverflowScrollable
+    isOverflowScrollable    
    :answers="answers"
    isRequired />
 </template>
 <script>
 import buttonQuestion from "@/digital-components/button-question/button-question";
-
 export default ({
    name: "policy-vehicles-question",    
    components: {
        buttonQuestion,
    },
+    props:{
+        vehicles: Array,
+    },
    computed: {
      questionText() {
            return this.getCmsContent("PolicyVehiclesQuestion", "QuestionText");
        },
        answers(){
-            return this.getCmsContent("PolicyVehiclesQuestion", "Answers");
+            const policyVehiclesAnswerfromCMS =  this.getCmsContent("PolicyVehiclesQuestion", "Answers");            
+            const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerfromCMS];
+            return combinedVehicles;
        },
    },
 })
 </script>
-  
+<style lang="scss">
+.question-text {
+  margin-top: 1rem;
+    & > span {
+        font-size: 1.25rem;
+        font-weight: 400 !important;
+        line-height: 2rem;
+    }
+}
+</style>
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@ -2,14 +2,14 @@
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
        <div class="page-container-grouped-styles">
            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget"/>
                <div class="select-car">
                    <div class="container-fluid pb-2">
                        <div class="row">
                            <div class="col">
                                <div class="select-car-form rounded text-center">
-                                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
-                                    <policyVehiclesQuestion class="px-4" cmsWidgetName="PolicyVehiclesQuestion"/>
+                                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-4" />
+                                    <policyVehiclesQuestion class="px-4" cmsWidgetName="PolicyVehiclesQuestion" :vehicles="VehiclesForQuestions" validationRules="option-required"/>
                                    <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/>
                                </div>
                            </div>
@ -29,8 +29,15 @@ import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-qu
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { Form } from "vee-validate";
+import { Form,defineRule } from "vee-validate";
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { issPageValues } from "@/router/router-constants/issPage-values";
+import { useMainStore } from '@/store';
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+
+// DEFINE VALIDATION RULES
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 export default {
    name: "policy-vehicles",
    mixins: [BaseFormMixin],
@ -59,6 +66,29 @@ export default {
            },
            navigateForward() {
            },
+           
+        },
+        computed:{
+            VehiclesForQuestions() {
+                // Map API result data, to address-vehicles data structure
+                const vehicles = this.VehiclesFromApi?.[0].vehicles;
+                const mappedData = vehicles.map((v) => {
+                    const maskSymbol = "X";
+                    const vinStart = maskSymbol.repeat(v.vin.length - 6);
+                    const vinEnd = v.vin.substring(v.vin.length - 6);
+                    return {
+                    vin: v.vin,
+                    vehicle: v,
+                    Text: v.vehicleYear + " " + v.vehicleMake + " " + v.vehicleModel,
+                    Name: v.vin,
+                    SubText: "VIN " + vinStart + vinEnd,
+                    };
+                });
+                return mappedData;
+            },
+            VehiclesFromApi() {
+                return useMainStore().pageData(issPageValues.POLICY_VEHICLES);
+            },
        },
        components: {
            siteHeader,
@ -68,4 +98,14 @@ export default {
            Form,
        },
    }
-</script>
+</script>
+<style lang="scss">
+.header{
+    margin-bottom: 0rem !important;
+}
+.form-test-error{
+    text-align: left;
+    margin-top: 0rem !important;
+    line-height: 1.50rem;
+}
+</style>
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@ -6,7 +6,7 @@
        <div class="page-container-grouped-styles">
            <div class="fade-on-route-transition position-relative">
                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
+                <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" class="mt-4"/>
                <button v-on:click="forwardButtonAction">Temp Forward Button</button>
                <div>
                    <siteFooter
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@ -3,7 +3,7 @@
        <div class="page-container-grouped-styles">
            <div class="fade-on-route-transition position-relative">
                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" class="mt-5 mb-1" />
                <div class="select-car">
                    <div class="container-fluid pb-2">
                        <div class="row px-3">
@ -30,7 +30,7 @@
                                        v-model="selectedAppointmentType"
                                        validationRules="selection-required"
                                        class="service-location-button-question mb-1"/>
-                                    <div class="select-car">
+                                        <div class="select-car">
                                        <div class="container-fluid pb-2">
                                            <div class="row px-3">
                                                <div class="col">
@ -233,7 +233,7 @@ export default {
 }
 .question-text {
    & > span {
-        line-height: 1.500rem;
+        line-height: 1.5rem;
    }
 }
 .list-card-content p {
@ -244,12 +244,6 @@ export default {
        line-height: 1.250rem;
    }
 }
-.siteHeader{
-    .site-header{
-        margin-bottom: 1.25rem !important;
-    }
-
-}
 .choose-option{
    .button-question >div {
        &:first-of-type {
@ -260,13 +254,7 @@ export default {
 }
 .button-question{
    .row.form-test-error{
-        line-height:1.500rem;
-        padding-left: 0rem !important;
-    }
-}
-.service-location-button-question {
-    .question-text {
-        margin-top: 1.5rem;
+        line-height:1.5rem;
    }
 }
 </style>
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@ -5,8 +5,9 @@
            <siteHeader cmsWidgetName="SiteHeaderWidget" />
            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
                           justification="left"
-                           issContainingPage="service-packages"/>
-            <div class="fade-on-route-transition ">
+                           issContainingPage="service-packages"
+                           class="my-5"/>
+            <div class="fade-on-route-transition">
                <servicePackageQuestion ref="servicePackage"
                                        cmsWidgetName="ServicePackage"
                                        groupName="ServicePackageQuestion"
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@ -4,7 +4,7 @@
            <div class="fade-on-route-transition position-relative">
                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
                <div class="container-fluid pb-2">
-                    <div class="row mt-4 px-3">
+                    <div class="row mt-2 px-3">
                        <div class="col">
                            <alert
                            ref="vehicleChangeAlert"
@ -14,7 +14,7 @@
                            alertClass="alert-warning"
                            :isDismissible="false" />
                            <vehicleBanner
-                            class="mb-3"
+                            class="mb-4"
                            cmsWidgetName="VehicleBannerWidget"
                            :displayGenericVehicleImage="false" />
                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@ -8,8 +8,8 @@
                        <div class="row px-3">
                            <div class="col">
                                <div class="select-car-form rounded">
-                                    <VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
-                                    <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" />
+                                    <VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" />
                                    <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
                                    <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
                                </div>
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@ -9,7 +9,7 @@
                            <div class="col">
                                <div class="select-car-form rounded">
                                    <vehicleBanner
-                                    class="mb-3"
+                                    class="mt-2 mb-4"
                                    ref="vehicleBanner"
                                    cmsWidgetName="VehicleBannerWidget"
                                    :displayGenericVehicleImage="false" />
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@ -8,7 +8,7 @@
                        <div class="row px-3">
                            <div class="col">
                                <div class="select-car-form rounded">
-                                    <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                                    <vehicleBanner class="mt-2 mb-4" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
                                    <vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
                                    <vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@ -3,9 +3,9 @@
        <div class="page-container-grouped-styles welcome">
            <div class="fade-on-route-transition position-relative">
                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4"/>
                <div class="container-fluid pb-2">
-                    <div class="row mt-4 px-3">
+                    <div class="row mt-5 px-3">
                        <div class="col">
                            <textboxQuestion
                            inputId="policyNumberField"
@ -243,7 +243,7 @@ export default {

        navigateForward() {
            this.$router.navigate(
-                this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
+                this.navigationScenarios.CLICKED_FORWARD,
                this.$route
            );
        },
--- a/src/router/router-constants/issPage-values.js
+++ b/src/router/router-constants/issPage-values.js
@ -31,6 +31,7 @@ export const issPageValues = {
    VIN_LOOKUP: 'vin-lookup',
    TPA_SUBMIT: 'tpa-submit',
    BAILOUT_PAGE: 'bailout-page',
-    TPA_SEARCH: 'tpa-search'
+    TPA_SEARCH: 'tpa-search',
+    POLICY_VEHICLES:'policy-vehicles'
  };
  
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@ -10,10 +10,12 @@ const navigationScenarios = {
    SELECTED_YEAR: "SELECTED_YEAR",
    SELECTED_MAKE: "SELECTED_MAKE",
    SELECTED_MODEL: "SELECTED_MODEL",
-    SELECTED_STYLE: "SELECTED_STYLE",
-    CLICKED_FORWARD_WELCOME_PAGE: "CLICKED_FORWARD_WELCOME_PAGE",
-    CLICKED_FORWARD_POLICY_HOLDER_DETAILS: "CLICKED_FORWARD_POLICY_HOLDER_DETAILS",
-    
+    SELECTED_STYLE: "SELECTED_STYLE",      
+
+    //Policy Holder Details
+    CLICKED_FORWARD_POLICY_UNVERIFIED: "CLICKED_FORWARD_POLICY_UNVERIFIED",
+    CLICKED_FORWARD_POLICY_VERIFIED: "CLICKED_FORWARD_POLICY_VERIFIED",
+
    // Vehicle Damage    
    CLICKED_FORWARD_WITH_REPAIR: 'CLICKED_FORWARD_WITH_REPAIR',

--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@ -375,9 +375,9 @@ const routingTable = function(store) {
          destinationIssPageValue: issPageValues.WELCOME_PAGE
        },
        {
-          scenario: navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
+          scenario: navigationScenarios.CLICKED_FORWARD,
          destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
-        }
+        }        
      ]
    },
    {
@ -388,8 +388,12 @@ const routingTable = function(store) {
          destinationIssPageValue: issPageValues.WELCOME_PAGE
        },
        {
-          scenario: navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
+          scenario: navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
          destinationIssPageValue: issPageValues.VEHICLE_YEAR
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED,
+          destinationIssPageValue: issPageValues.POLICY_VEHICLES
        }
      ]
    },
--- a/src/router/router.spec.js
+++ b/src/router/router.spec.js
@ -15,7 +15,7 @@ describe("Router", () => {


    it("Should push next view when navigating locally", () => {
-        let scenario = navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE;
+        let scenario = navigationScenarios.CLICKED_FORWARD;
        let currentRoute = { query: { issPage: issPageValues.WELCOME_PAGE }};

        router.push = jest.fn();
--- a/src/store/index.js
+++ b/src/store/index.js
@ -322,6 +322,26 @@ export const useMainStore = defineStore({
        };
      }
      },
+      getCoveragePolicyInfo({accountNumber,policyNumber,dateOfLoss}){
+        try{
+        const response = globalMethods.callHttpClient({
+          method:endpoints.CoveragePolicyInfo.method,
+          endpoint:endpoints.CoveragePolicyInfo.url,
+          payload: {   
+              accountNumber: accountNumber,
+              policyNumber: policyNumber,
+              dateOfLoss: dateOfLoss
+          }
+        });
+        return response;
+      } catch (responseError) {
+        return {
+          error: {
+            status: responseError.status
+          }
+        };
+      }
+      },
      async lookupVinByPlate(licensePlate, licenseState) {
        try {
          const response = await globalMethods.callHttpClient({
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@ -158,65 +158,67 @@ export default {
  }
 }

-.col,
-.list-group {
-  border-radius: 0;
+.windshield-chip-count-question {
+    .col,
+    .list-group {
+        border-radius: 0;

-  &:first-of-type {
-      .list-button-horizontal {
-          border-bottom-left-radius: 0.5rem;
-          border-top-left-radius: 0.5rem;
+        &:first-of-type {
+            .list-button-horizontal {
+                border-bottom-left-radius: 0.5rem;
+                border-top-left-radius: 0.5rem;

-          .list-button-horizontal-content {
-              border-bottom-left-radius: 0.5rem;
-              border-top-left-radius: 0.5rem;
-          }
-      }
-  }
+                .list-button-horizontal-content {
+                    border-bottom-left-radius: 0.5rem;
+                    border-top-left-radius: 0.5rem;
+                }
+            }
+        }

-  &:last-of-type {
-      .list-button-horizontal {
-          border-bottom-right-radius: 0.5rem;
-          border-top-right-radius: 0.5rem;
+        &:last-of-type {
+            .list-button-horizontal {
+                border-bottom-right-radius: 0.5rem;
+                border-top-right-radius: 0.5rem;

-          .list-button-horizontal-content {
-              border-bottom-right-radius: 0.5rem;
-              border-top-right-radius: 0.5rem;
-          }
-      }
-  }
+                .list-button-horizontal-content {
+                    border-bottom-right-radius: 0.5rem;
+                    border-top-right-radius: 0.5rem;
+                }
+            }
+        }

-  //Cash/insurance styling
-  &:first-of-type {
-      .list-button-horizontal.strong {
-          input[type="radio"] {
-              &:checked + .list-button-horizontal-content {
-                  border-bottom-right-radius: 0;
-                  border-top-right-radius: 0;
-              }
+        //Cash/insurance styling
+        &:first-of-type {
+            .list-button-horizontal.strong {
+                input[type="radio"] {
+                    &:checked + .list-button-horizontal-content {
+                        border-bottom-right-radius: 0;
+                        border-top-right-radius: 0;
+                    }

-              &:checked:focus + .list-button-horizontal-content {
-                  border-bottom-right-radius: 0.5rem;
-                  border-top-right-radius: 0.5rem;
-              }
-          }
-      }
-  }
+                    &:checked:focus + .list-button-horizontal-content {
+                        border-bottom-right-radius: 0.5rem;
+                        border-top-right-radius: 0.5rem;
+                    }
+                }
+            }
+        }

-  &:last-of-type {
-      .list-button-horizontal.strong {
-          input[type="radio"] {
-              &:checked + .list-button-horizontal-content {
-                  border-bottom-left-radius: 0;
-                  border-top-left-radius: 0;
-              }
+        &:last-of-type {
+            .list-button-horizontal.strong {
+                input[type="radio"] {
+                    &:checked + .list-button-horizontal-content {
+                        border-bottom-left-radius: 0;
+                        border-top-left-radius: 0;
+                    }

-              &:checked:focus + .list-button-horizontal-content {
-                  border-bottom-left-radius: 0.5rem;
-                  border-top-left-radius: 0.5rem;
-              }
-          }
-      }
-  }
+                    &:checked:focus + .list-button-horizontal-content {
+                        border-bottom-left-radius: 0.5rem;
+                        border-top-left-radius: 0.5rem;
+                    }
+                }
+            }
+        }
+    }
 }
 </style>