Merge pull request #628 from Safelite/feature/CSR-702

Feature/csr 702

src/common-components/button-question/button-question.vue

@@ -89,7 +89,7 @@ export default {
     modelValue: [Array, String],
     validationRules: String,
     suppressError: Boolean,
-    useTextForValue: Boolean
+    useTextForValue: Boolean,
   },
   computed: {
     formattedGroupName() {

src/layouts/part-questions/part-questions.vue

@@ -88,7 +88,7 @@ export default {
     data() {
         return {
             selectedModel: [],
-            partsQuestionsData: this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS).partsOrQuestions.filter((p) => {
+            partsQuestionsData: this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS)?.partsOrQuestions.filter((p) => {
                 if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
                     return {
                         glassName: p.glassName,
@@ -142,7 +142,7 @@ export default {
 
             if (!partsLookup) { return }
 
-            const glassNameAndPartsForStore = partsLookup.data.glassNameAndPartsForStore;
+            const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts;
 
             // test response data for multiple parts
             const hasMultipleParts = glassNameAndPartsForStore.some((glass) => glass.parts?.length > 1);

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -112,7 +112,7 @@ export default ({
                 this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
             }
         },
-         answersToDisplay(){
+        answersToDisplay(){
             const filteredAnswers = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -49,23 +49,25 @@
 </template>
 
 <script>
-// Components
+  // Components
-import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
+  import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+  import funnelHeader from "@/common-components/funnel-header/funnel-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+  import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+  import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+  import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
-import alert from "@/ux-components/alert/alert";
+  import alert from "@/ux-components/alert/alert";
-// Supporting Files
+  // 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 { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+  import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
-import store from "@/store";
+  import store from "@/store";
-import { Form } from "vee-validate";
+  import { Form } from "vee-validate";
-import { storeActions } from "@/constants/store-actions";
+  import { storeActions } from "@/constants/store-actions";
+  import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 
 export default {
     name: "vehicle-parts",
+    mixins: [vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@@ -149,76 +151,80 @@ export default {
         },
     },
     methods: {
-        arePagePrerequisitesValid() {
+      arePagePrerequisitesValid() {
-            // Check if isRepair is populated and if the pageData we need is here (Parts data)
+        // Check if isRepair is populated and if the pageData we need is here (Parts data)
-            if (store.getters.damage.isRepair != null && Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0) {
+        return store.getters.damage.isRepair != null &&
-                return true;
+          Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0;
-            }
+      },
-            return false;
+      backButtonAction() {
-        },
+        const hasPartQuestions = this.hasPartQuestions(this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS).partsOrQuestions);
-        backButtonAction() {
+        const backNavigationScenario = hasPartQuestions ? this.navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS : this.navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS;
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-        async forwardButtonAction() {
-            let isMoldingQuestions = false;
 
-            // Match them to the parts from the API.
+        this.$router.navigate(
-            for (let [key, value] of Object.entries(
+          backNavigationScenario,
-                this.PartsFromApi.partsOrQuestions
+          this.$route
-            )) {
+        );
-                for (let [partKey, partValue] of Object.entries(value.parts)) {
+      },
+      async forwardButtonAction() {
+        let isMoldingQuestions = false;
 
-                    const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+        // Match them to the parts from the API.
+        for (let [key, value] of Object.entries(
+            this.PartsFromApi.partsOrQuestions
+        )) {
+            for (let [partKey, partValue] of Object.entries(value.parts)) {
 
-                    const isMatched = this.selectedGlassPartNumbers.some(
+                const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
-                        (p) => p === currentPart.partNumber
-                    );
 
-                    if (isMatched) {
+                const isMatched = this.selectedGlassPartNumbers.some(
-                        this.matchedParts.push(currentPart);
+                    (p) => p === currentPart.partNumber
-                        // check if there are childPartQuestions (for molding-questions)
+                );
-                        if (Array.isArray(currentPart.childPartQuestions) && currentPart.childPartQuestions.length > 0) { 
+
-                            isMoldingQuestions = true
+                if (isMatched) {
-                        }
+                    this.matchedParts.push(currentPart);
+                    // check if there are childPartQuestions (for molding-questions)
+                    if (Array.isArray(currentPart.childPartQuestions) && currentPart.childPartQuestions.length > 0) { 
+                        isMoldingQuestions = true
                     }
                 }
             }
+        }
 
-            // If no parts could be matched, throw an error (isForwardActionDisabled is based off of this.matchedParts)
+        // If no parts could be matched, throw an error (isForwardActionDisabled is based off of this.matchedParts)
-            if (this.isForwardActionDisabled) {
+        if (this.isForwardActionDisabled) {
-                this.$refs.funnelFooter.removeLoader();
+            this.$refs.funnelFooter.removeLoader();
-                throw new Error("Could not match any parts to the selected parts");
+            throw new Error("Could not match any parts to the selected parts");
-            }
+        }
 
-            // Navigate to the next page
+        // Navigate to the next page
-            if (isMoldingQuestions) {
+        if (isMoldingQuestions) {
-                this.$router.navigate(
+            this.$router.navigate(
-                    this.navigationScenarios.HAS_MOLDING_QUESTIONS,
+                this.navigationScenarios.HAS_MOLDING_QUESTIONS,
-                    this.$route,
+                this.$route,
-                    {},
+                {},
-                    {},
+                {},
-                    this.moldingQuestionsForStore
+                this.moldingQuestionsForStore
-                );
+            );
-            }
+        }
-            else {
+        else {
-                // Save parts to the store
+            // Save parts to the store
-                await this.dispatchStoreAction(
+            await this.dispatchStoreAction(
-                    storeActions.SAVE_GLASS_PARTS,
+                storeActions.SAVE_GLASS_PARTS,
-                    this.matchedParts,
+                this.matchedParts,
-                    false
+                false
-                );
+            );
-                // Navigate to the quote page
+            // Navigate to the quote page
-                this.$router.navigate(
+            this.$router.navigate(
-                    this.navigationScenarios.SELECTED_PARTS,
+                this.navigationScenarios.SELECTED_PARTS,
-                    this.$route
+                this.$route
-                );
+            );
-            }
+        }
 
-            // TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
+        // TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
 
         },
 
-        LoadInitialPartsData() {
+      LoadInitialPartsData() {
             const partsData = this.PartsFromApi;
             const alreadyPopulatedPartsData =
                 this.$store.getters.lineItems.glassParts === null

src/mixins/vehicle-questions-mixin.js

@@ -0,0 +1,15 @@
+export default {
+    methods: {
+        hasPartQuestions(partsOrQuestions) {
+            return partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
+        },
+        hasGlassLocationWithMultipleParts(partsOrQuestions) {
+            return partsOrQuestions.some(pq => pq.parts?.length > 1);
+        },
+        hasChildPartQuestions(partsOrQuestions) {
+            return partsOrQuestions.some(pq => {
+                return pq.parts?.some(part => part.childPartQuestions?.length > 0);
+            });
+        }
+    }
+}

src/mixins/vehicle-questions-mixin.spec.js

@@ -0,0 +1,161 @@
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { shallowMount } from "@vue/test-utils";
+import { setupMocksForJsFiles, getMountOptions } from "@/helpers/unit-test-helper.js";
+
+describe("vehicle-questions-mixin", () => {
+    describe("hasPartQuestions", () => {
+        test("has no part questions => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasPartQuestions = wrapper.vm.hasPartQuestions([
+                {
+                    partQuestions: []
+                }
+            ])
+
+            // Assert
+            expect(hasPartQuestions).toBe(false);
+        });
+
+        test("has undefined part questions => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasPartQuestions = wrapper.vm.hasPartQuestions([])
+
+            // Assert
+            expect(hasPartQuestions).toBe(false);
+        });
+
+        test("has part questions => return true", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasPartQuestions = wrapper.vm.hasPartQuestions([
+                {
+                    partQuestions: [{
+                        testProperty: "some value"
+                    }]
+                }
+            ])
+
+            // Assert
+            expect(hasPartQuestions).toBe(true);
+        });
+    });
+
+    describe("hasGlassLocationWithMultipleParts", () => {
+        test("has one part for one glass location => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
+                {
+                    glassName: "Something",
+                    glassLocation: "somewhere",
+                    parts: [{
+                        partNumber: "1234567"
+                    }]
+                }
+            ])
+
+            // Assert
+            expect(hasGlassLocationWithMultipleParts).toBe(false);
+        });
+
+        test("has one part for every glass location => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
+                {
+                    glassName: "Something",
+                    glassLocation: "somewhere",
+                    parts: [{
+                        partNumber: "1234567"
+                    }]
+                },
+                {
+                    glassName: "Another glass",
+                    glassLocation: "somewhere else",
+                    parts: [{
+                        partNumber: "1234568"
+                    }]
+                },
+                {
+                    glassName: "Special glass",
+                    glassLocation: "Another where",
+                    parts: [{
+                        partNumber: "1234569"
+                    }]
+                }
+            ])
+
+            // Assert
+            expect(hasGlassLocationWithMultipleParts).toBe(false);
+        });
+
+        test("has multiple parts for one glass location => return true", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
+                {
+                    glassName: "Something",
+                    glassLocation: "somewhere",
+                    parts: [{
+                        partNumber: "1234567"
+                    }]
+                },
+                {
+                    glassName: "Another glass",
+                    glassLocation: "somewhere else",
+                    parts: [{
+                        partNumber: "1234568"
+                    }]
+                },
+                {
+                    glassName: "Special glass",
+                    glassLocation: "Another where",
+                    parts: [
+                        {
+                            partNumber: "1234569"
+                        },
+                        {
+                            partNumber: "1234560"
+                        }
+                    ]
+                }
+            ])
+
+            // Assert
+            expect(hasGlassLocationWithMultipleParts).toBe(true);
+        });
+    });
+});
+
+function setupMocks({}) {
+    const baseMixin = setupMocksForJsFiles({});
+
+    const mocks = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        },
+    });
+
+    const mockVehicleQuestionComponent = {
+        template: '<div></div>',
+        mixins: [vehicleQuestionsMixin, baseMixin.baseMixin]
+    };
+
+    const wrapper = shallowMount(mockVehicleQuestionComponent, mocks);
+
+    return { wrapper };
+}

src/mixins/vin-pages-mixin.js

@@ -2,17 +2,17 @@ import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 
 export default {
+    mixins: [vehicleQuestionsMixin],
     methods: {
         async navigateForwardWithSingleCarMatch() {
             const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS);
             const partsOrQuestions = result.data.partsOrQuestions;
-            const hasPartsQuestions = partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
+            const hasPartsQuestions = this.hasPartQuestions(partsOrQuestions);
-            const hasGlassLocationWithMultipleParts = partsOrQuestions.some(pq => pq.parts?.length > 1);
+            const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
-            const hasChildPartQuestions = partsOrQuestions.some(pq => {
+            const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);
-                return pq.parts?.some(part => part.childPartQuestions?.length > 0);
-            });
 
             // TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
 
@@ -30,6 +30,6 @@ export default {
                 this.$refs.loadingModal.showModal();
                 navigateToHeritageFunnel();
             }
-        }
+        },
     }
 }

src/router/index.js

@@ -176,8 +176,11 @@ async function navigate(scenario, currentRoute, optionalQuery = {}, optionalPara
   if (destinationFmgPageValue !== undefined) {
     // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
 
-    // Append page data to the store for the NEXT page, if any. It will be an empty object if none is provided.
+    // Update page data to the store for next page if provided. Otherwise, use existing page data or override with empty object
-    baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
+    const existingPageData = store.getters.pageData(destinationFmgPageValue) ?? {};
+    if (Object.keys(optionalPageData).length > 0 && Object.keys(existingPageData).length === 0) {
+      baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
+    }
 
     // if cookie and referralNumber/Date exists OR an emailAddress has been saved
     if ((getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) || store.getters.order.customer?.emailAddress) {

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

@@ -20,8 +20,10 @@ const navigationScenarios = {
   SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
   ANSWERED_QUESTIONS_WITH_SINGLE_PART: "ANSWERED_QUESTIONS_WITH_SINGLE_PART",
   ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS: "ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS",
+  SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY",
+  CLICKED_BACK_WITH_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITH_PART_QUESTION_ANSWERS",
+  CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS",
   HAS_MOLDING_QUESTIONS: "HAS_MOLDING_QUESTIONS",
-  SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY"
 };
 
 export { navigationScenarios };

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

@@ -82,10 +82,6 @@ const routingTable = function(store) {
     {
       fmgPageValue: fmgPageValues.VEHICLE_PARTS,
       maps: [
-        {
-          scenario: navigationScenarios.CLICKED_BACK,
-          destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
-        },
         {
           scenario: navigationScenarios.SELECTED_PARTS,
           destinationFmgPageValue: fmgPageValues.QUOTE,
@@ -94,6 +90,14 @@ const routingTable = function(store) {
           scenario: navigationScenarios.CLICKED_FORWARD,
           destinationFmgPageValue: fmgPageValues.REVEAL,
         },
+        {
+          scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS,
+          destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS,
+          destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+        },
       ],
     },
     {

src/store/index.js

@@ -5,6 +5,7 @@ import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/se
 import createPersistedState from "vuex-persistedstate";
 import globalMethods from "@/global-methods";
 import { storeActions } from "../constants/store-actions";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 
 // Export State
 const getDefaultState = () => {
@@ -265,6 +266,8 @@ export const mutations = {
   },
   resetGlassPartsState(state) {
     state.order.lineItems.glassParts = null;
+    state.order.damage.partQuestionAnswers = null;
+    state.applicationUser.pageData[fmgPageValues.PART_QUESTIONS] = null;
   },
   resetState(state) {
     Object.assign(state, getDefaultState());

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -92,10 +92,6 @@ export default {
         : this.selectedValues[0];
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed
-    this.checkValue = false;
-    this.handleCheckChange();
-  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;

src/ux-components/list-button/list-button.vue

@@ -92,10 +92,6 @@ export default {
         : this.selectedValues[0];
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed
-    this.checkValue = false;
-    this.handleCheckChange();
-  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;

src/ux-components/list-card/list-card.vue

@@ -110,10 +110,6 @@ export default {
       this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed
-    this.checkValue = false;
-    this.handleCheckChange();
-  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {