Merge pull request #440 from Safelite/feature/digital/SSR-621

Feature/digital/ssr 621

src/layouts/policy-endorsements/policy-endorsements.spec.js

@@ -0,0 +1,118 @@
+// Components
+import policyEndorsements from '@/layouts/policy-endorsements/policy-endorsements.vue';
+
+// Supporting Files
+import { shallowMount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import navigationScenarios from '@/router/router-constants/navigation-scenarios';
+import { createTestingPinia } from '@pinia/testing';
+import { useMainStore } from '@/store';
+
+describe('policyEndorsements.vue', () => {
+    describe('Rendering', () => {
+        test('Should render site header', () => {
+            // Arrange
+            const wrapper = shallowMount(policyEndorsements, getMountOptions());
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBe(true);
+        });
+        test('Should render site subheader', () => {
+            // Arrange
+            const wrapper = shallowMount(policyEndorsements, getMountOptions());
+
+            // Act
+            const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' });
+
+            // Assert
+            expect(siteSubHeader.exists()).toBe(true);
+        });
+        test('Should render schoolProperty buttonQuestion component', () => {
+            // Arrange
+            const wrapper = shallowMount(policyEndorsements, getMountOptions());
+
+            // Act
+            const buttonQuestion = wrapper.findComponent({ ref: 'schoolPropertyQuestion' });
+
+            // Assert
+            expect(buttonQuestion.exists()).toBe(true);
+        });
+        test('Should render parkingLot buttonQuestion component', () => {
+            // Arrange
+            const wrapper = shallowMount(policyEndorsements, getMountOptions());
+
+            // Act
+            const buttonQuestion = wrapper.findComponent({ ref: 'parkingLotQuestion' });
+
+            // Assert
+            expect(buttonQuestion.exists()).toBe(true);
+        });
+        test('Should render site footer', () => {
+            // Arrange
+            const wrapper = shallowMount(policyEndorsements, getMountOptions());
+
+            // Act
+            const siteFooter = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(siteFooter.exists()).toBe(true);
+        });
+    });
+    describe('Navigation', () => {
+        test('Back button clicked triggers navigation', () => {
+            // Arrange
+            const wrapper = shallowMount(policyEndorsements, getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                }
+            }));
+
+            // Act
+            wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
+        });
+        test('Forward button clicked triggers navigation', () => {
+            // Arrange
+            const wrapper = shallowMount(policyEndorsements, getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                }
+            }));
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+            wrapper.vm.navigateForward();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
+        });
+        test('Forward button clicked saves endorsement question answers', () => {
+            // Arrange
+            const mountOptions = getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                },
+                global: {
+                    plugins: [createTestingPinia()]
+                }
+            });
+
+            const wrapper = shallowMount(policyEndorsements, mountOptions);
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(useMainStore().saveEndorsementQuestionAnswers).toHaveBeenCalledWith(wrapper.vm.questionAnswersArray);
+        });
+    });
+});

src/layouts/policy-endorsements/policy-endorsements.vue

@@ -0,0 +1,192 @@
+<template>
+    <Form
+        ref="theForm"
+        v-slot="{ meta }"
+        @submit="onSubmit"
+        @invalidSubmit="onInvalidSubmit">
+        <div
+            class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader
+                    ref="siteHeader"
+                    cmsWidgetName="SiteHeaderWidget" />
+                <div class="container-fluid mt-0 px-5">
+                    <siteSubHeader
+                        ref="siteSubHeader"
+                        cmsWidgetName="SiteSubHeaderWidget"
+                        class="mt-5" />
+                    <buttonQuestion
+                        ref="schoolPropertyQuestion"
+                        v-model="schoolPropertyAnswer"
+                        class="radioQuestion windshield-chip-count-question mb-4"
+                        cmsWidgetName="SchoolPropertyQuestion"
+                        :questionText="schoolPropertyQuestionText"
+                        :answers="schoolPropertyAnswersFromCms"
+                        groupName="schoolProperty"
+                        buttonID="schoolPropertyQuestion"
+                        buttonTypeString="listButtonHorizontal"
+                        isRequired
+                        :validationRules="rules.selectionRequired">
+                    </buttonQuestion>
+                    <buttonQuestion
+                        ref="parkingLotQuestion"
+                        v-model="parkingLotAnswer"
+                        class="radioQuestion windshield-chip-count-question"
+                        cmsWidgetName="ParkingLotQuestion"
+                        :questionText="parkingLotQuestionText"
+                        :answers="parkingLotAnswersFromCms"
+                        groupName="parkingLot"
+                        buttonID="parkingLotQuestion"
+                        buttonTypeString="listButtonHorizontal"
+                        isRequired
+                        :validationRules="rules.selectionRequired">
+                    </buttonQuestion>
+                    <siteFooter
+                        ref="siteFooter"
+                        class="pt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @forwardClicked="forwardButtonAction"
+                        @backClicked="backButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+
+// Supporting files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import settleAllPromises from '@/helpers/layout-helper';
+import { Form } from 'vee-validate';
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import globalRules from '@/constants/global-rules.js';
+import { useMainStore } from '@/store';
+
+export default {
+    name: 'policy-endorsements',
+    components: {
+        siteHeader,
+        siteSubHeader,
+        siteFooter,
+        buttonQuestion,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form
+    },
+    mixins: [BaseFormMixin],
+    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.
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            questionAnswersArray: [],
+            schoolPropertyAnswer: '',
+            parkingLotAnswer: '',
+            rules: {
+                selectionRequired: globalRules.OPTION_REQUIRED
+            }
+        };
+    },
+    computed: {
+        schoolPropertyQuestionText() {
+            return this.getCmsContent('SchoolPropertyQuestion', 'QuestionText');
+        },
+        schoolPropertyAnswersFromCms() {
+            return this.getCmsContent('SchoolPropertyQuestion', 'Answers');
+        },
+        parkingLotQuestionText() {
+            return this.getCmsContent('ParkingLotQuestion', 'QuestionText');
+        },
+        parkingLotAnswersFromCms() {
+            return this.getCmsContent('ParkingLotQuestion', 'Answers');
+        }
+    },
+    methods:
+        {
+            backButtonAction() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            },
+            async forwardButtonAction() {
+                // TO DO: remove hard coding and update data format once service returns endorsement questions
+                this.questionAnswersArray.push(
+                    {
+                        questionNum: 1,
+                        questionText: this.schoolPropertyQuestionText,
+                        selectedAnswer: this.schoolPropertyAnswer
+                    },
+                    {
+                        questionNum: 2,
+                        questionText: this.parkingLotQuestionText,
+                        selectedAnswer: this.parkingLotAnswer
+                    }
+                );
+
+                // save answers to store as order.policy.endorsementQuestionAnswers
+                useMainStore().saveEndorsementQuestionAnswers(this.questionAnswersArray);
+
+                return this.navigateForward();
+            },
+            navigateForward() {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.$route
+                );
+            }
+        }
+};
+</script>
+
+<style lang="scss" scoped>
+
+:deep .subheader-primary {
+    margin-bottom: map-get($spacers, 3);
+}
+
+:deep .subheader-secondary {
+    p {
+        font-size: $h6-font-size;
+        line-height: map-get($spacers, 5);
+    }
+}
+
+:deep .subheader-secondary.justify-content-center {
+    p {
+        text-align: left;
+    }
+    justify-content: left !important;
+    padding-left: 0;
+    padding-right: 0;
+    margin-bottom: map-get($spacers, 5);
+}
+
+:deep .question-text {
+    & > span {
+        text-align: left;
+        line-height: map-get($spacers, 5);
+    }
+    margin-bottom: map-get($spacers, 2);
+}
+
+:deep div.question-text.d-flex {
+    margin-top: map-get($spacers, 4);
+}
+
+</style>

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -118,6 +118,14 @@ export default {
                 ? vehicle?.coverages[0].deductible
                 : 0;
         },
+        selectedVehicleHasEndorsements() {
+            const vehicle = this.policyVehicles.find((policyVehicle) =>
+                policyVehicle?.vin === this.selectedVehicleVin);
+            if (!vehicle) {
+                return false;
+            }
+            return vehicle.endorsements?.length > 0;
+        },
         repairWaivedForSelectedVehicle() {
             const vehicle = this.policyVehicles.find((policyVehicle) =>
                 policyVehicle.vin === this.selectedVehicleVin);
@@ -198,6 +206,11 @@ export default {
                             {},
                             {}
                         );
+                } else if (this.selectedVehicleHasEndorsements) {
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
+                        this.$route
+                    );
                 } else {
                     this.$router.navigate(
                         this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,

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

@@ -9,6 +9,7 @@ const issPageValues = Object.freeze({
     CAPABILITY_QUESTIONS: 'capability-questions',
     CONTACT_CONFIRMATION: 'contact-confirmation',
     CONTACT_DETAILS: 'contact-details',
+    POLICY_ENDORSEMENTS: 'policy-endorsements',
     ESTIMATE: 'estimate',
     COVERAGE_STATEMENT: 'coverage-statement',
     LICENSE_PLATE_LOOKUP: 'license-plate-lookup',

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

@@ -25,6 +25,7 @@ const navigationScenarios = Object.freeze({
     // Policy Vehicle
     CLICKED_FORWARD_LISTED_VEHICLE: 'CLICKED_FORWARD_LISTED_VEHICLE',
     CLICKED_FORWARD_NON_LISTED_VEHICLE: 'CLICKED_FORWARD_NON_LISTED_VEHICLE',
+    CLICKED_FORWARD_WITH_ENDORSEMENTS: 'CLICKED_FORWARD_WITH_ENDORSEMENTS',
 
     // Vehicle Damage
     CLICKED_FORWARD_WITH_REPAIR: 'CLICKED_FORWARD_WITH_REPAIR',

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

@@ -409,7 +409,12 @@ const routingTable = () => [
             {
                 scenario: navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
                 destinationIssPageValue: issPageValues.BAILOUT_PAGE
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
+                destinationIssPageValue: issPageValues.POLICY_ENDORSEMENTS
             }
+
         ]
     },
     {
@@ -620,7 +625,21 @@ const routingTable = () => [
                 destinationIssPageValue: issPageValues.CONTACT_CONFIRMATION
             }
         ]
+    },
+    {
+        issPageValue: issPageValues.POLICY_ENDORSEMENTS,
+        maps: [
+            {
+                scenario: navigationScenarios.CLICKED_BACK,
+                destinationIssPageValue: issPageValues.POLICY_VEHICLES
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD,
+                destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+            }
+        ]
     }
+
 ];
 
 export { routingTable };

src/store/index.js

@@ -59,7 +59,8 @@ const getDefaultState = () => ({
             deductible: {
                 repair: null, // numerical value; how much customer owes on deductible in repair case
                 replace: null // numerical value; how much customer owes on deductible in replace case,
-            }
+            },
+            endorsementQuestionAnswers: null
         },
         customer: {
             address: {
@@ -910,6 +911,20 @@ export const useMainStore = defineStore({
             this.applicationUser.saveSessionPromise = null;
         },
 
+        saveEndorsementQuestionAnswers(endorsementQuestionAnswersArray) {
+            // if endorsement question answers have changed, reset question answers
+            const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(this.order.policy.endorsementQuestionAnswers, 'result');
+            const sortedEndorsementQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(endorsementQuestionAnswersArray, 'result'); 
+            const haveEndorsementQuestionAnswersChanged = sortedPreviousResultsArray?.length !== sortedEndorsementQuestionAnswersArray.length
+                || !sortedPreviousResultsArray?.every((x, i) => x.result === sortedEndorsementQuestionAnswersArray[i].result);
+
+            if (haveEndorsementQuestionAnswersChanged) {
+                this.updateEndorsementQuestionAnswers(null);
+            }
+
+            this.updateEndorsementQuestionAnswers(endorsementQuestionAnswersArray);
+        },
+
         saveVehicleDamage(isWindshieldRepair, selectedGlassToReplace, selectedWindshieldChipCount) {
             const selectedGlassPassedInSorted = selectedGlassToReplace.slice().sort();
             const isGlassToReplaceTheSame = this.order.damage.glassToReplace?.length === selectedGlassToReplace.length
@@ -1159,6 +1174,10 @@ export const useMainStore = defineStore({
             }
         },
 
+        updateEndorsementQuestionAnswers(answersArray) {
+            this.order.policy.endorsementQuestionAnswers = answersArray;
+        },
+
         updateIsRepair(isRepair) {
             this.order.damage.isRepair = isRepair;
         },

src/store/store.spec.js

@@ -955,4 +955,26 @@ describe('Store', () => {
             );
         });
     });
+
+    describe('saveEndorsementQuestionAnswers method', () => {
+        it('method should update endorsement question data in store', () => {
+            // Arrange
+            const questionNum = getRandomInt(1, 100);
+            const questionText = getRandomString(50, 300);
+            const selectedAnswer = getRandomString(2, 3);
+            const endorsementQuestionAnswersArray = [
+                {
+                    questionNum,
+                    questionText,
+                    selectedAnswer
+                }
+            ];
+
+            // Act
+            store.saveEndorsementQuestionAnswers(endorsementQuestionAnswersArray);
+
+            // Assert
+            expect(store.order.policy.endorsementQuestionAnswers).toEqual(endorsementQuestionAnswersArray);
+        });
+    });
 });