Merge pull request #313 from Safelite/feature/digital/SSR-448

Feature/digital/ssr 448

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

@@ -83,135 +83,95 @@ export default {
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
-            },];
-
-            //use resultMap to populate layout content.
-            let resultMap = await settleAllPromises(promiseResultMap);
-
-            next((vm) => {
-                vm.setCmsContent(resultMap.cmsContent);
-            });
-            
-        },
-        created(){
-            this.getVehiclesfromPolicyLookup();
-        },
-        methods:
-        {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
             },
+        ];
 
-           async forwardButtonAction()
+        //use resultMap to populate layout content.
-            {                
+        let resultMap = await settleAllPromises(promiseResultMap);
-                this.mainStore.updatePolicyHolderDetails(this.customerQuestions); 
-                return this.navigateForward();
-            },
 
-           navigateForward() {
+        next((vm) => {
-                if(this.vehiclesCount > 0)
+            vm.setCmsContent(resultMap.cmsContent);
+        });  
+        
+    },
+    methods:
+    {
+        backButtonAction() {
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+
+        async forwardButtonAction()
+        {                
+            this.mainStore.updatePolicyHolderDetails(this.customerQuestions); 
+            return this.navigateForward();
+        },
+
+        navigateForward() {
+            if(this.vehiclesCount > 0)
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED,
+                    this.$route,
+                    {},
+                    {},
+                    this.vehiclesFound
+                );        
+                else
                     this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED,
+                        this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-                        this.$route,
+                        this.$route
-                        {},
+                    );
-                        {},
-                        this.vehiclesFound
-                    );        
-                    else
-                        this.$router.navigate(
-                            this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-                            this.$route
-                        );
-            },
-            getPolicyHolderDetailsFromStore() {
-                return {
-                    addressQuestions :
-                    {
-                        streetAddress: this.mainStore.order.customer.address.streetAddress,
-                        streetAddress2: this.mainStore.order.customer.address.streetAddress2,
-                        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,
-                }
-            },
-           async getPolicyLookupResponse(){
-                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);
-                    return policyLookupResultMap.policyLookupResponse;
-            },
-           async getVehiclesfromPolicyLookup()
-            {
-                //call coverage policy lookup if isCoverageEnabled flag enabled            
-                if(this.isCoverageEnabled){                    
-                    const policyLookupResponse = await this.getPolicyLookupResponse();
-                    if(policyLookupResponse!=null){
-                       var policy = policyLookupResponse.policies?.[0];
-                       if(policy!=null){
-                        //populate policy holder details from policy lookup
-                        this.mainStore.order.customer.address.streetAddress = policy.insureds?.[0]?.address;
-                        this.mainStore.order.customer.address.city=policy.insureds?.[0]?.city;
-                        this.mainStore.order.customer.address.state=policy.insureds?.[0]?.state;
-                        this.mainStore.order.customer.address.zipCode=policy.insureds?.[0]?.zipCode;
-                        this.mainStore.order.customer.firstName = policy.insureds?.[0]?.firstName;
-                        this.mainStore.order.customer.lastName = policy.insureds?.[0]?.lastName;
-
-                        this.customerQuestions = this.getPolicyHolderDetailsFromStore();
-                        //populate vehicles   
-                        this.vehiclesFound= policy.vehicles;               
-                       }
-                    }
-                }                
-            },
-            
         },
-        computed:{
+
-            isCoverageEnabled(){
+        getPolicyHolderDetailsFromStore() {
-                return this.mainStore.issConfig.isCoverageEnabled;
+            return {
-            },
+                addressQuestions :
-            vehiclesCount(){
+                {
-                return this.vehiclesFound.length;
+                    streetAddress: this.mainStore.order.customer.address.streetAddress,
-            }        
+                    streetAddress2: this.mainStore.order.customer.address.streetAddress2,
+                    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,
+            }
+        },  
+    },
+    computed:{
+        isCoverageEnabled(){
+            return this.mainStore.issConfig.isCoverageEnabled;
         },
-        components: {
+        vehiclesCount(){
-            siteHeader,
+            return this.vehiclesFound.length;
-            siteSubHeader,
+        }        
-            textboxQuestion,
+    },
-            addressQuestions,
+    components: {
-            siteFooter,
+        siteHeader,
-            Form,
+        siteSubHeader,
-        },
+        textboxQuestion,
-    }
+        addressQuestions,
-    </script>
+        siteFooter,
-    <style lang="scss">
+        Form,
-    #sub-header p {
+    },
-        font-size: 16px;
+}
-        line-height: 26px;
+</script>
-        color: #4D5151;
-    }
 
-    #address-questions-wrapper {
+<style lang="scss">
-        margin-top: 24px;
+#sub-header p {
-    }
+    font-size: 16px;
+    line-height: 26px;
+    color: #4D5151;
+}
 
-    #address-questions-wrapper .alert.heading  {
+#address-questions-wrapper {
-        line-height: 24px;
+    margin-top: 24px;
-    }
+}
 
-    #address-questions-wrapper .form-test-error {
+#address-questions-wrapper .alert.heading  {
-        line-height: 24px;
+    line-height: 24px;
-    }
+}
-    </style>
+
+#address-questions-wrapper .form-test-error {
+    line-height: 24px;
+}
+</style>

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

@@ -8,6 +8,9 @@ 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";
+import { useMainStore } from "@/store";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
     settleAllPromises: jest.fn(),    
@@ -22,9 +25,7 @@ jest.mock("@/helpers/cms-content-helper", () => ({
 describe("welcome-page.vue", () => {
     test("Should render welcomePage sub-components (policyNumber, policyZipCode, dateOfLoss, damageCause etc.)", async () => {
         // Arrange   
-            
+        const { wrapper } = setupMocks({});       
-         const { wrapper } = setupMocks({});       
-       
         
         // Act
         const policyNumber = wrapper.findComponent({ ref: "policyNumber" });
@@ -36,7 +37,6 @@ describe("welcome-page.vue", () => {
         const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
         const email = wrapper.findComponent({ ref: "email" });
 
-
         // Assert
         expect(policyNumber.exists()).toBe(true);
         expect(dateOfLoss.exists()).toBe(true);
@@ -49,26 +49,152 @@ describe("welcome-page.vue", () => {
     });
 });
 
+describe("navigation", () => {
+    test("if policy and vehicles are found, navigate to policy-vehicle page", async () => {         
+        // Arrange
+        const mockvehicles = [            
+            {
+                vin: "TEST_VIN",
+            },
+            {
+                vin: "TEST_VIN2",
+            }
+        ];
+
+        const { wrapper } = setupMocks({
+            policies: [{
+                vehicles: [
+                    {
+                        vin: "TEST_VIN"
+                    },
+                    {
+                        vin: "TEST_VIN2"
+                    }
+                ]
+            }]
+        });
+
+        await wrapper.setData({
+            isCoverageEnabled: true,
+        });
+        
+        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_WITH_VEHICLES,
+            undefined,
+            {},
+            {},
+            mockvehicles
+        );
+    });
+    test("if policy is found, but no vehicles, navigate to vehicle-selection page", async () => {         
+        // Arrange
+        const { wrapper } = setupMocks({
+            policies: [{}]
+        });
+
+        await wrapper.setData({
+            isCoverageEnabled: true,
+            vehiclesCount: 0,
+            vehiclesFound: null,
+        });
+        
+        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_NO_VEHICLES,
+            undefined
+        );
+    });
+    test("if policy is not found, navigate to policy-holder-details page", async () => {         
+        // Arrange
+        const { wrapper } = setupMocks({
+            policies: null
+        });
+
+        await wrapper.setData({
+            isCoverageEnabled: true,
+        });
+        
+        useMainStore().order.policy.policyNumber = "p_0001";
+        useMainStore().order.policy.dateOfLoss = "2022-01-28";
+        useMainStore().order.accountNumber = "00000";
+
+        // Act
+        await wrapper.vm.navigateForward();
+
+        // Assert
+        expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+            navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+            undefined
+        );
+    });
+});
+
 function setupMocks({
     pageHeaderWidgetHeaderText = {},
     pageFooterWidgetCmsContent = {},
     mountOptionsMockData = {},
+    policies = [],
+    getCoveragePolicyInfoResponse
 }) {
+    useMainStore().getCoveragePolicyInfo = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: getCoveragePolicyInfoResponse
+            ? getCoveragePolicyInfoResponse
+            : {
+                policies: [
+                    {
+                        insureds: [
+                            {
+                                customerId: "TEST_ID"
+                            },
+                        ],
+                        vehicles: [
+                            {
+                                vin: "TEST_VIN"
+                            },
+                            {
+                                vin: "TEST_VIN2"
+                            }
+                        ]
+                    },
+                ],
+            },
+        })
+    })
+    
     //Mock api responses
     const apiResponses = {
       cmsContent: {
-        SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
+            SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
-        VehicleBannerWidget: {
+            VehicleBannerWidget: {
-          GenericVehicleImage:
+            GenericVehicleImage:
-            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
+                `${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,
         },
-        SiteHeaderWidget: {
+        policyLookupResponse: {
-          LogoImage:
+            policies: policies
-            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
+        }
-        },
-        SiteFooterWidget: pageFooterWidgetCmsContent,
-        
-      },
     };
     
     mountOptionsMockData = {
@@ -76,8 +202,6 @@ function setupMocks({
         router: {
             navigate: jest.fn(),
         },
-       
-       
     };
 
     const apiPromise = Promise.resolve(apiResponses);

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

@@ -45,7 +45,7 @@
                             />
                         </div>
                     </div>
-                    <div class="row px-5">
+                    <div class="row px-4">
                         <div class="col px-0">
                             <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
                         </div>
@@ -203,7 +203,8 @@ export default {
     mixins: [BaseFormMixin],
     data() {
         return {
-            welcomePageModel: this.getWelcomePageModelFromStore()
+            welcomePageModel: this.getWelcomePageModelFromStore(),
+            vehiclesFound: [],
         };
     },
     setup() {
@@ -238,15 +239,79 @@ export default {
     {
         async forwardButtonAction() {
             this.mainStore.updatePolicyData(this.welcomePageModel);
+
+            //call coverage policy lookup if isCoverageEnabled flag enabled
+            if (this.isCoverageEnabled) {
+                const policyLookupResponse = useMainStore().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);
+                const policyInfo = policyLookupResultMap.policyLookupResponse;
+                
+                // if policy lookup fails, navigate directly to policy-holder-details page
+                if (!policyInfo) {
+                    this.navigateForward();
+                }
+                
+                const policy = policyInfo.policies?.[0];
+                if (policy) {
+                    //populate policy holder details from policy lookup
+                    this.mainStore.order.customer.address.streetAddress = policy.insureds?.[0]?.address;
+                    this.mainStore.order.customer.address.city = policy.insureds?.[0]?.city;
+                    this.mainStore.order.customer.address.state = policy.insureds?.[0]?.state;
+                    this.mainStore.order.customer.address.zipCode = policy.insureds?.[0]?.zipCode;
+                    this.mainStore.order.customer.firstName = policy.insureds?.[0]?.firstName;
+                    this.mainStore.order.customer.lastName = policy.insureds?.[0]?.lastName;
+        
+                    //populate vehicles   
+                    this.vehiclesFound = policy.vehicles;
+                }
+                return this.navigateForward(policy);
+            }
             return this.navigateForward();
         },
 
-        navigateForward() {
+        navigateForward(policy) {
-            this.$router.navigate(
+            if (policy) {
-                this.navigationScenarios.CLICKED_FORWARD,
+                if (this.vehiclesFound) {
-                this.$route
+                    // if policy lookup is successful and vehicles are found, navigate to policy-vehicles page
-            );
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+                        this.$route, 
+                        {},
+                        {},
+                        this.vehiclesFound
+                    );
+                }
+                else {
+                    // if policy lookup is successful, but no vehicles are associated with the policy
+                    // navigate to vehicle-selection page (manual entry)
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+                        this.$route
+                    );
+                }
+            }
+            else {
+                // if policy lookup is unsuccessful, navigate to policy-holder-details page
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+                    this.$route
+                );
+            }
         },
+        
         getWelcomePageModelFromStore() {
             return {
                 policyNumber: this.mainStore.order.policy.policyNumber,
@@ -265,7 +330,7 @@ export default {
     computed:{
         DamageCauseOptions() {
             const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
-            const damageCauseAnswersObj ={};
+            const damageCauseAnswersObj = {};
             if(damageCauseAnswers)
             {
                 for (let answer of Object.values(damageCauseAnswers)) {
@@ -276,24 +341,22 @@ export default {
             }
             return damageCauseAnswersObj;
         },
-        DamageGlassOnlyOptions()
+        DamageGlassOnlyOptions() {
-        {
             return this.getCmsContent("GlassOnlyQuestion", "Answers");
         },
-        DamageGlassOnlyQuestion()
+        DamageGlassOnlyQuestion() {
-        {
             return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
         },
-        displayDamageCityQuestion(){
+        displayDamageCityQuestion() {
             return !!this.getCmsContent("DamageCityQuestion","QuestionText");
         },
-        displayDamageStateQuestion(){
+        displayDamageStateQuestion() {
             return !!this.getCmsContent("DamageStateQuestion","QuestionText");
         },
-        displayGlassOnlyQuestion(){
+        displayGlassOnlyQuestion() {
             return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
         },
-        displayPolicyZip(){
+        displayPolicyZip() {
             if (this.mainStore.issConfig.isAuthenticated &&
                 !!this.mainStore.issConfig.disabledFields.policyZipCode) {
                 return false;
@@ -305,10 +368,12 @@ export default {
         getStates() {
             return states;
         },
-        isPolicyHolderEnabled()
+        isPolicyHolderEnabled() {
-        {
             return !!this.mainStore.issConfig.disabledFields.policyNumber;
-        }
+        },
+        isCoverageEnabled() {
+            return this.mainStore.issConfig.isCoverageEnabled;
+        },
     },
     components: {
         siteHeader,

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

@@ -6,6 +6,11 @@ const navigationScenarios = {
     // Entry
     MOVE_FORWARD_ENTRY_PAGE: "MOVE_FORWARD_ENTRY_PAGE",
 
+    // Welcome
+    CLICKED_FORWARD_POLICY_UNVERIFIED: "CLICKED_FORWARD_POLICY_UNVERIFIED",
+    CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES: "CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES",
+    CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES: "CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES",
+
     // YMMS
     SELECTED_YEAR: "SELECTED_YEAR",
     SELECTED_MAKE: "SELECTED_MAKE",
@@ -51,6 +56,7 @@ const navigationScenarios = {
     CLICKED_FORWARD_WITH_SAFELITE: "CLICKED_FORWARD_WITH_SAFELITE",
     CLICKED_FORWARD_WITH_TPA_ENABLED: "CLICKED_FORWARD_WITH_TPA_ENABLED",
     CLICKED_FORWARD_WITH_TPA_DISABLED: "CLICKED_FORWARD_WITH_TPA_DISABLED",
+    CLICKED_FORWARD_WITH_POLICY_AND_VEHICLES: "CLICKED_FORWARD_WITH_POLICY_AND_VEHICLES",
     
     //Bailout
     CLICKED_FORWARD_WITH_BAILOUT: "CLICKED_FORWARD_WITH_BAILOUT",

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

@@ -394,7 +394,19 @@ const routingTable = function(store) {
         {
           scenario: navigationScenarios.CLICKED_FORWARD,
           destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
-        }        
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+          destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+          destinationIssPageValue: issPageValues.VEHICLE_SELECTION
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+          destinationIssPageValue: issPageValues.POLICY_VEHICLES
+        }
       ]
     },
     {
@@ -406,12 +418,12 @@ const routingTable = function(store) {
         },
         {
           scenario: navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-          destinationIssPageValue: issPageValues.VEHICLE_YEAR
+          destinationIssPageValue: issPageValues.VEHICLE_SELECTION
         },
         {
           scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED,
           destinationIssPageValue: issPageValues.POLICY_VEHICLES
-        }
+        },
       ]
     },
     {