revisions based on PR feedback

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

@@ -30,12 +30,22 @@ describe('policyEndorsements.vue', () => {
             // Assert
             expect(siteSubHeader.exists()).toBe(true);
         });
-        test('Should render buttonQuestion component', () => {
+        test('Should render schoolProperty buttonQuestion component', () => {
             // Arrange
             const wrapper = shallowMount(policyEndorsements, getMountOptions());
 
             // Act
-            const buttonQuestion = wrapper.findComponent({ ref: 'endorsementQuestion' });
+            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);
@@ -85,7 +95,6 @@ describe('policyEndorsements.vue', () => {
             expect(wrapper.vm.$router.navigate)
                 .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
         });
-        // *TO DO: once service is ready, revise this test to ensure data is saved to the store
         test('Forward button clicked saves endorsement question answers', () => {
             // Arrange
             const mountOptions = getMountOptions({
@@ -96,13 +105,14 @@ describe('policyEndorsements.vue', () => {
                     plugins: [createTestingPinia()]
                 }
             });
+
             const wrapper = shallowMount(policyEndorsements, mountOptions);
 
             // Act
             wrapper.vm.forwardButtonAction();
 
             // Assert
-            expect(useMainStore().saveEndorsementQuestionAnswers).toHaveBeenCalled();
+            expect(useMainStore().saveEndorsementQuestionAnswers).toHaveBeenCalledWith(wrapper.vm.questionAnswersArray);
         });
     });
 });

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

@@ -4,48 +4,50 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
+        <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="endorsementQuestion"
-                    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
-                    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" />
+                    <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>
@@ -95,6 +97,7 @@ export default {
     emits: ['update:modelValue'],
     data() {
         return {
+            questionAnswersArray: [],
             schoolPropertyAnswer: '',
             parkingLotAnswer: '',
             rules: {
@@ -122,10 +125,8 @@ export default {
                 this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
             },
             async forwardButtonAction() {
-                // manually creating the array for now, will revise once service returns questions
-                const questionAnswersArray = [];
-
-                questionAnswersArray.push(
+                // TO DO: remove hard coding and update data format once service returns endorsement questions
+                this.questionAnswersArray.push(
                     {
                         questionNum: 1,
                         questionText: this.schoolPropertyQuestionText,
@@ -139,7 +140,7 @@ export default {
                 );
 
                 // save answers to store as order.policy.endorsementQuestionAnswers
-                useMainStore().saveEndorsementQuestionAnswers(questionAnswersArray);
+                useMainStore().saveEndorsementQuestionAnswers(this.questionAnswersArray);
 
                 return this.navigateForward();
             },
@@ -156,13 +157,13 @@ export default {
 <style lang="scss" scoped>
 
 :deep .subheader-primary {
-    margin-bottom: 0.5rem;
+    margin-bottom: map-get($spacers, 3);
 }
 
 :deep .subheader-secondary {
     p {
-        font-size: 0.875rem;
-        line-height: 1.5rem;
+        font-size: $h6-font-size;
+        line-height: map-get($spacers, 5);
     }
 }
 
@@ -173,19 +174,19 @@ export default {
     justify-content: left !important;
     padding-left: 0;
     padding-right: 0;
-    margin-bottom: 1.5rem;
+    margin-bottom: map-get($spacers, 5);
 }
 
 :deep .question-text {
     & > span {
         text-align: left;
-        line-height: 1.5rem;
+        line-height: map-get($spacers, 5);
     }
-    margin-bottom: 0.5rem;
+    margin-bottom: map-get($spacers, 2);
 }
 
 :deep div.question-text.d-flex {
-    margin-top: 1rem;
+    margin-top: map-get($spacers, 4);
 }
 
 </style>

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

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