Merge pull request #161 from Safelite/feature/digital/SSR-140

Feature/digital/ssr 140

src/layouts/molding-questions/molding-questions.spec.js

@@ -0,0 +1,388 @@
+// Components
+import moldingQuestions from "@/layouts/molding-questions/molding-questions";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { useMainStore } from "@/store";
+import baseMixin from "../../mixins/base-mixin";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { nextTick } from "vue";
+
+// 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(),
+}));
+
+const baseStoreGettersPageData = () => {
+    return {
+        partsOrQuestions: [
+            {
+                parts: [
+                    {
+                        childPartQuestions: [
+                            {
+                                questionSequence: 1,
+                                questionText:
+                                    "Does the rubber seal around your windshield have a chrome strip running through it?",
+                                answers: [
+                                    {
+                                        answerResult: "WKT D1106 C",
+                                        answerText: "Yes",
+                                        nextQuestionSequence: null,
+                                    },
+                                    {
+                                        answerResult: "WKT D1106 B",
+                                        answerText: "No",
+                                        nextQuestionSequence: null,
+                                    },
+                                ],
+                            },
+                        ],
+                        basePartNumber: "DW01105",
+                        color: "Green Tint, Blue Shade",
+                        requiresRecalibration: false,
+                        recalibrationType: "",
+                        canSafeliteRecalibrate: false,
+                        requiresCapabilityQuestions: false,
+                        childParts: null,
+                        partNumber: "DW01105GBNN",
+                        description: "solar",
+                        partType: "WINDSHIELD",
+                    },
+                ],
+                partQuestions: [],
+                glassLocation: "Windshield",
+                glassName: "Single",
+                answerKey: "Windshield-Single",
+                answerData: null,
+            },
+        ],
+    };
+};
+const baseStoreGettersDamage = () => {
+    return {
+        partsQuestionAnswers: [
+            {
+                glassLocation: "Windshield",
+                glassName: "Single",
+                result: "FW04848",
+                answeredQuestions: [
+                    {
+                        questionText:
+                            "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?",
+                        selectedAnswer: "1|nextQuestion|3|Yes",
+                        selectedAnswerText: "Yes",
+                        questionNum: 1,
+                    },
+                    {
+                        questionText:
+                            "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?",
+                        selectedAnswer: "2|nextQuestion|3|Yes",
+                        selectedAnswerText: "Yes",
+                        questionNum: 2,
+                    },
+                ],
+            },
+        ],
+    };
+};
+
+useMainStore().pageData = baseStoreGettersPageData;
+useMainStore().damage = baseStoreGettersDamage;
+
+describe("moldingQuestions.vue", () => {
+    describe("method arePagePrerequisitesValid...", () => {
+        test("Should return true for valid page requisites if pageData exists", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.arePagePrerequisitesValid();
+
+            //Assert
+            expect(result).toBe(true);
+
+            wrapper.unmount();
+        });
+
+        test("Should return false for valid page requisites if partsOrQuestions in pageData is missing", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+            useMainStore().pageData = jest.fn(() => {
+                return undefined;
+            });
+
+            // Act
+            const result = wrapper.vm.arePagePrerequisitesValid();
+
+            //Assert
+            expect(result).toBeFalsy();
+
+            wrapper.unmount();
+        });
+
+        test("Should be at least one item in partsOrQuestions", () => {
+            // Arrange
+            useMainStore().pageData = jest.fn(() => {
+                return {
+                    partsOrQuestions: [],
+                };
+            });
+            useMainStore().damage = baseStoreGettersDamage;
+
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.arePagePrerequisitesValid();
+
+            //Assert
+            expect(result).toBeFalsy();
+
+            wrapper.unmount();
+        });
+    });
+
+    describe("watch on selectedAnswers should be set up...", () => {
+        test("Should trigger handleAnswerUpdates if watched data changes", async () => {
+            // Arrange
+            useMainStore().pageData = baseStoreGettersPageData;
+            useMainStore().damage = baseStoreGettersDamage;
+
+            const { wrapper } = setupMocks({});
+            const spy = jest.spyOn(wrapper.vm, "handleAnswerUpdates");
+
+            // Act
+            wrapper.setData({
+                selectedAnswers: {
+                    "Windshield-Single": {
+                        answerResult: "FW04848",
+                        answeredQuestions: [
+                            {
+                                questionText:
+                                    "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?",
+                                selectedAnswer: "1|nextQuestion|3|Yes",
+                                selectedAnswerText: "Yes",
+                                questionNum: 1,
+                            },
+                            {
+                                questionText:
+                                    "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?",
+                                selectedAnswer: "2|nextQuestion|3|Yes",
+                                selectedAnswerText: "Yes",
+                                questionNum: 2,
+                            },
+                        ],
+                        index: 0,
+                    },
+                },
+            });
+
+            await nextTick();
+
+            //Assert
+            expect(spy).toHaveBeenCalled();
+
+            wrapper.unmount();
+        });
+    });
+
+    describe("forwardButtonAction", () => {
+        test("Should clear out answerData", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            wrapper.vm.questionsData = [
+                {
+                    glassLocation: "Windshield",
+                    glassName: "Single",
+                    answerData: {
+                        answerResult: "FW04848",
+                        answeredQuestions: [],
+                    },
+                },
+            ];
+            wrapper.vm.dispatchStoreAction = jest.fn(() => {
+                return {
+                    data: {
+                        partsOrQuestions: [],
+                    },
+                };
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            //Assert
+            expect(wrapper.vm.questionsData[0].answerData).toEqual({});
+
+            wrapper.unmount();
+        });
+
+        test("Should save to pinia store", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            wrapper.vm.questionsData = [
+                {
+                    glassLocation: "Windshield",
+                    glassName: "Single",
+                    answerData: {
+                        answerResult: "FW04848",
+                        answeredQuestions: [],
+                    },
+                },
+            ];
+            useMainStore().getPartsOrQuestions = jest.fn(() => {
+                return {
+                    data: {
+                        partsOrQuestions: [],
+                    },
+                };
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            await nextTick();
+
+            //Assert
+            expect(wrapper.vm.saveMoldingQuestionAnswers).toHaveBeenCalled;
+            wrapper.unmount();
+        });
+
+        test("Should call GET_PARTS_OR_QUESTIONS API", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            wrapper.vm.questionsData = [
+                {
+                    glassLocation: "Windshield",
+                    glassName: "Single",
+                    answerData: {
+                        answerResult: "FW04848",
+                        answeredQuestions: [],
+                    },
+                },
+            ];
+            useMainStore().getPartsOrQuestions = jest.fn(() => {
+                return {
+                    data: {
+                        partsOrQuestions: [],
+                    },
+                };
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            await nextTick();
+
+            //Assert
+            expect(wrapper.vm.getPartsOrQuestions).toHaveBeenCalled;
+
+            wrapper.unmount();
+        });
+
+        test("Should trigger navigateForward", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            wrapper.vm.questionsData = [
+                {
+                    glassLocation: "Windshield",
+                    glassName: "Single",
+                    answerData: {
+                        answerResult: "FW04848",
+                        answeredQuestions: [],
+                    },
+                },
+            ];
+            useMainStore().getPartsOrQuestions = jest.fn(() => {
+                return {
+                    data: {
+                        partsOrQuestions: [],
+                    },
+                };
+            });
+            wrapper.vm.navigateForward = jest.fn();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            //Assert
+            expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+
+            wrapper.unmount();
+        });
+    });
+});
+
+function setupMocks({
+    mountOptionsMockData = {
+        router: {
+            navigate: jest.fn(),
+        },
+        actionList: [
+            {
+                actionName: "saveMoldingQuestionAnswers",
+                data: {},
+            },
+            {
+                actionName: "getPartsOrQuestions",
+                data: {},
+            },
+        ],
+        route: {
+            query: {
+                issPage: "molding-questions",
+            },
+        },
+        data() {
+            return {
+                computedSwitcher: [
+                    {
+                        glassLocation: "Windshield",
+                        glassName: "Single",
+                        answerData: {
+                            answerResult: "FW04848",
+                            answeredQuestions: [],
+                        },
+                    },
+                ],
+            };
+        },
+        questionsData: {
+            get() {
+                return this.computedSwitcher;
+            },
+            set(val) {
+                this.computedSwitcher = val;
+            },
+        },
+    },
+}) {
+
+    useMainStore().getPartsOrQuestions = jest.fn(() => {
+        return {
+            data: {
+                partsOrQuestions: [],
+            }
+        };
+    });
+
+    const mountOptions = getMountOptions({
+        ...mountOptionsMockData,
+        mixins: [baseMixin, vehicleQuestionsMixin],
+    });
+    mountOptions["attachTo"] = document.body;
+
+    const wrapper = shallowMount(moldingQuestions, mountOptions);
+
+    return { wrapper };
+}

src/layouts/molding-questions/molding-questions.vue

@@ -2,66 +2,54 @@
   <Form
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit"
+    ref="theForm"
     v-slot="{ meta }"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <questionsPageLayout
-      <siteHeader
+      isRequired
-        cmsWidgetName="SiteHeaderWidget"
+      ref="questionsPageLayout"
-      />
+      :isMetaValid="meta.valid"
-      <vehicleBanner
+      :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
-        cmsWidgetName="VehicleBannerWidget"
+      :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
-        :displayGenericVehicleImage="false"
+      :questionsData="questionsData"
-      />
+      validationRules="questions-required"
-      <siteSubHeader
+      v-model="selectedAnswers"
-        cmsWidgetName="SiteSubHeaderWidget"
+      @forwardButtonAction="forwardButtonAction"
-      />
+      @back-click="navigateBack"
-      <div class="fade-on-route-transition sub-container make-tall mt-5">
+      :index="currentGlassIndex"
-        <p>Placeholder for molding-questions page</p>
+      id="molding-question-wrapper"
-
+    />
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
   </Form>
 </template>
 <script>
 // Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from '@/helpers/layout-helper';
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { useMainStore } from "@/store";
+import { issPageValues } from "@/router/router-constants/issPage-values";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
 
 // Import Component
-import baseFormMixin from '@/mixins/base-form-mixin';
+import { Form } from "vee-validate";
-import { Form } from 'vee-validate';
+import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout.vue";
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+
-import siteHeader from '@/iss-components/site-header/site-header.vue';
+// DEFINE VALIDATION RULES
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 
 export default {
-  name: 'molding-questions',
+  name: "molding-questions",
-  mixins: [baseFormMixin],
+  mixins: [BaseFormMixin, vehicleQuestionsMixin],
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-    vehicleBanner,    
-  },  
-  data() {
-    return {};
-  },  
   async beforeRouteEnter(to, from, next) {
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
     // Settle promises and get results
     const promiseResultMap = [
       {
-        resultKey: 'cmsContent',
+        resultKey: "cmsContent",
         promise: cmsContentPromise,
       },
     ];
@@ -72,18 +60,127 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
+  data() {
+    return {
+      questionsData: [],
+      selectedAnswers: {},
+      currentGlassIndex: 0,
+    };
+  },
+  computed: {
+    AlertFewMoreQuestionsHeader() {
+      return this.getCmsContent(
+        "AdditionalPartsQuestionsAlert",
+        "HeadlineText"
+      );
+    },
+    AlertFewMoreQuestionsCopy() {
+      return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText");
+    },
+    partsOrQuestionsData() {
+      return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS)
+        .partsOrQuestions;
+    },
+  },
+  mounted() {
+    this.getInitialQuestionData();
+  },
   methods: {
-    arePagePrerequisiteValid() {
+    arePagePrerequisitesValid() {
-      return true;
+      const moldingQuestionsFromPageData = useMainStore().pageData(
+        issPageValues.MOLDING_QUESTIONS
+      );
+      return (
+        // has childPartQuestions array and has glassName not null
+        moldingQuestionsFromPageData?.partsOrQuestions?.some(
+          (part) => part?.glassName
+        ) &&
+        moldingQuestionsFromPageData.partsOrQuestions.some((glass) =>
+          glass.parts?.some((part) => part?.childPartQuestions?.length > 0)
+        )
+      );
     },
-    backButtonAction() {
+    getInitialQuestionData() {
-      /**
+      // get any questions that were already answered
-       * this.navigationScenarios comes from base-mixin
+      const alreadyAnsweredQuestions =
-       */
+        useMainStore().damage.moldingQuestionAnswers;
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+      this.questionsData = this.partsOrQuestionsData
+        .filter((x) => x.parts[0].childPartQuestions.length)
+        .map((glass, index) => {
+          // NOTE: questions for property "questions" can differ between layouts
+          glass.questions = glass.parts[0].childPartQuestions;
+          glass.answerKey = glass.glassLocation + "-" + glass.glassName;
+          // reset selectedAnswers for this glass
+          this.selectedAnswers[glass.answerKey] = [];
+          const updatedGlass = this.setupInitialData(
+            glass,
+            index,
+            alreadyAnsweredQuestions
+          );
+          // Set up watch for each set of glass questions
+          this.$watch(
+            "selectedAnswers." + glass.answerKey,
+            (newValue) => {
+              if (newValue && Object.keys(newValue).length > 0) {
+                this.handleAnswerUpdates(
+                  newValue,
+                  glass.answerKey
+                );
+              }
+            },
+            { deep: true }
+          );
+          return updatedGlass;
+        });
     },
-    async forwardButtonAction() {},    
+    async forwardButtonAction() {
-    resetDependentState() {},
+            const questionAnswersArray = this.questionsData.map((glass) => {
+                return {
+                    glassLocation: glass.glassLocation,
+                    glassName: glass.glassName,
+                    partNum: glass.answerData.answerResult,
+                    answeredQuestions: glass.answerData.answeredQuestions,
+                    isSuppressedPart: glass.isSuppressedPart,
+                };
+            });
+            // clear out answerData for future page loads; must occur prior to store save
+            this.questionsData.forEach((glass) => {
+                glass.answerData = {};
+            });
+            // save to store as order.damage.moldingQuestionArrays (array)
+            await this.mainStore.saveMoldingQuestionAnswers(questionAnswersArray);
+            
+            // get parts from the questionAnswers
+            let partsOrQuestions = this.partsOrQuestionsData;
+            for (let answer of questionAnswersArray) {
+                partsOrQuestions.find((partOrQuestion) => {
+                    return (
+                        partOrQuestion.glassLocation === answer.glassLocation &&
+                        partOrQuestion.glassName === answer.glassName
+                    );
+                }).parts[0].childParts = [
+                    {
+                        partNumber: answer.partNum,
+                    },
+                ];
+            }
+
+            this.navigateForward(partsOrQuestions, null);
+    },
+  },
+  components: {
+    Form,
+    questionsPageLayout,
   },
 };
 </script>
+
+<style lang="scss">
+#molding-question-wrapper p.text-body.small {
+  margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
+}
+
+#molding-question-wrapper .form-test-error {
+  margin-top: 0 !important; // Overrides extra margin-top on error message text
+}
+</style>

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

@@ -235,7 +235,7 @@ const routingTable = function(store) {
           },
           {
               scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
-              destinationIssPageValue: issPageValues.ESTIMATE,
+              destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
           },
           {
               scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,

src/store/index.js

@@ -341,7 +341,7 @@ export const useMainStore = defineStore({
             payload: {
                 carId: carId,
                 glassPieces: glassArrayForPayload,
-                zip: zipCode ? zipCode : "",
+                zip: zipCode,
                 vin: vin,
             },
         });
@@ -701,6 +701,34 @@ export const useMainStore = defineStore({
         //Save new values
         this.updatePartQuestionAnswers(partQuestionAnswersArray);
       },
+      saveMoldingQuestionAnswers(moldingQuestionAnswersArray) {
+        const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
+          this.order.damage.moldingQuestionAnswers, 
+          "result"
+        );
+        const sortedMoldingQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(
+          moldingQuestionAnswersArray, 
+          "result"
+        );
+        const haveMoldingQuestionAnswersChanged = 
+          sortedPreviousResultsArray?.length !== sortedMoldingQuestionAnswersArray.length ||
+          !sortedPreviousResultsArray?.every(
+            (x, i) => x.result === sortedMoldingQuestionAnswersArray[i].result
+          );
+        
+        if (haveMoldingQuestionAnswersChanged) {
+          this.updateGlassParts(null);
+          this.updateSupportingItems(null);
+          this.updateCapabilityQuestionAnswers(null);
+          this.updatePageData({
+            page: issPageValues.CAPABILITY_QUESTIONS,
+            data: null,
+          });
+        }
+
+        // Save new values
+        this.updateMoldingQuestionAnswers(moldingQuestionAnswersArray);
+      },
      
       addEventToBus (event) {
         this.applicationUser.eventBus.push(event);