Merge branch 'develop' into CSR-465-add-validation-to-parts-page

jest.config.js

@@ -23,6 +23,7 @@ module.exports = {
     "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
     "!src/ux-components/alert/alert.vue",
     "!src/helpers/validation-rules.js",
+    "!src/common-components/question-chain/question-chain",
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

src/common-components/button-question/button-question.spec.js

@@ -112,7 +112,8 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, setupMocks({}));
     await wrapper.setProps({
       answers: ["2022", "2021", "2020"],
-      isMultiSelect: false
+      isMultiSelect: false,
+      modelValue: []
     });
     const val = { checkValue: true, value: "2021", }
     wrapper.vm.handleCheckedChanged(val);

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

@@ -36,6 +36,7 @@
               data-test="button"
               :validationRules="validationRules"
               :class="[suppressError ? 'alertError' : '']"
+              :clearOnUnmount="clearOnUnmount"
             />
           </div>
       </fieldset>
@@ -84,6 +85,10 @@ export default {
     validationRules: String,
     suppressError: Boolean,
     useTextForValue: Boolean,
+    clearOnUnmount: {
+      type: Boolean,
+      default: true
+    }
   },
   computed: {
     getFieldSetClasses() {
@@ -133,17 +138,14 @@ export default {
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {
-
+      if(this.selectingInitiatesLoad) {
-      if(this.isMultiSelect && this.selectedValues) {
+        this.selectedValues = [val.value];
-        // Add or remove item to array of data to emit
+      } else {
-        const newSelectedValues = this.selectedValues;
-
         if(Array.isArray(this.selectedValues)) {
+          const newSelectedValues = this.selectedValues;
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;
         }
-      } else {
-        this.selectedValues = [val.value];
       }
     },
   },

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

@@ -0,0 +1,119 @@
+<template>
+    <div v-for="(q, i) in questions" :key="i">
+        <transition appear name="fade" mode="out-in">
+            <buttonQuestion
+                v-if="q.questionSequence === currentQuestion"
+                class="radioQuestion"
+                :questionText="q.questionText"
+                :answers="q.answers"
+                :groupName="`${questionData.glassName}-${questionData.glassLocation}-${i}`"
+                textPosition="text-start"
+                v-model="selectedValue"
+                isRequired=true
+                :validationRules="validationRules"
+                :clearOnUnmount=false
+            />
+        </transition>
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default {
+  name: "questionChain",
+  data() {
+    return {
+      models: Array,
+      currentQuestion: 1,
+      answeredQuestions: [],
+    };
+  },
+  props: {
+    questionData: Array,
+    validationRules: String,
+    modelValue: String,
+  },
+  computed: {
+    questions() {
+        const questions = this.questionData.partQuestions.map((q, i) => {
+            return {
+                questionText: q.questionText,
+                questionSequence: q.questionSequence,
+                answers: q.answers.map((a) => {
+                    return {
+                        Text: a.answerText,
+                        // Name will either be nextQuestionSequence or answerResult
+                        Name: a.nextQuestionSequence ? a.nextQuestionSequence : "answer-" + a.answerResult,
+                        nextQuestionSequence: a.nextQuestionSequence,
+                        answerResult: a.answerResult,
+                    }
+                })
+            }
+        });
+        // add an empty item to be array[0] since we start with 1
+        questions.unshift({});
+        return questions;
+    },
+    selectedValue: {
+      get: function() {
+        return this.modelValue;
+      },
+      set: function(returnedAnswer) {
+        const isNewModelValueComplete = this.getNewModelValue(returnedAnswer);
+
+        if (isNewModelValueComplete) {
+            this.$emit("update:modelValue", isNewModelValueComplete);
+        }
+      }
+    }
+  },
+  methods: {
+    getNewModelValue(returnedAnswer) {
+        if (!returnedAnswer || !Array.isArray(returnedAnswer)) { return false }
+        const lastAnswer = returnedAnswer[returnedAnswer.length - 1];
+        const currentQuestion = this.questions[this.currentQuestion];
+
+        if (lastAnswer.indexOf("answer-") === 0) {
+            // if it is an answerResult
+            const finalAnswer = lastAnswer.slice(7);
+
+            const currentQuestionSelectedAnswer = currentQuestion.answers.find(
+                ({ answerResult }) => answerResult === finalAnswer
+            );
+
+            // add current item to list of answered questions
+            this.answeredQuestions.push(
+                {
+                    questionText: currentQuestion.questionText,
+                    selectedAnswerText: currentQuestionSelectedAnswer.Text,
+                }
+            );
+
+            return {
+                answerResult: finalAnswer,
+                answeredQuestions: this.answeredQuestions,
+            };
+        } else {
+            const currentQuestionSelectedAnswer = currentQuestion.answers.find(
+                ({ nextQuestionSequence }) => nextQuestionSequence === parseInt(lastAnswer)
+            );
+
+            // add current item to list of answered questions
+            this.answeredQuestions.push(
+                {
+                    questionText: currentQuestion.questionText,
+                    selectedAnswerText: currentQuestionSelectedAnswer.Text,
+                }
+            );
+
+            this.currentQuestion = parseInt(lastAnswer); // update count to display next question
+            return false;
+        }
+    }
+  },
+  components: {
+    buttonQuestion,
+  },
+};
+</script>

src/constants/store-mutations.js

@@ -14,7 +14,7 @@ const storeMutations = {
   UPDATE_IS_REPAIR: "updateIsRepair",
   UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips",
   UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace",
-  UPDATE_PARTS: "updateParts",
+  UPDATE_GLASS_PARTS: "updateGlassParts",
   UPDATE_REGISTRATION_LICENSE_PLATE : "updateRegistrationLicensePlate",
   UPDATE_REGISTRATION_ADDRESS: "updateRegistrationAddress",
   UPDATE_REGISTRATION_CITY: "updateRegistrationCity",
@@ -40,7 +40,7 @@ const storeMutations = {
   RESET_VEHICLE_STATE: "resetVehicleState",
   RESET_DAMAGE_STATE: "resetDamageState",
   RESET_REGISTRATION_STATE: "resetRegistrationState",
-  RESET_PARTS_STATE: "resetPartsState",
+  RESET_GLASS_PARTS_STATE: "resetGlassPartsState",
   RESET_STATE: "resetState",
 
   // OTHER MUTATIONS

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

@@ -67,7 +67,7 @@ export default {
         },
         resetDependentState() {
             // Set
-            store.commit(storeMutations.UPDATE_PARTS, null);
+            store.commit(storeMutations.UPDATE_GLASS_PARTS, null);
 
             // Invokes
             store.dispatch(storeActions.RESET_PARTS_AND_DEPS);

src/layouts/reveal/reveal.vue

@@ -50,7 +50,7 @@ export default {
         },
         resetDependentState() {
             // Set
-            store.commit(storeMutations.UPDATE_PARTS, null);
+            store.commit(storeMutations.UPDATE_GLASS_PARTS, null);
 
             // Invokes
             store.dispatch(storeActions.RESET_PARTS_AND_DEPS);

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

@@ -198,7 +198,7 @@ methods: {
     }
 
     // Save parts to the store.
-    store.commit(storeMutations.UPDATE_PARTS, matchedParts);
+    store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts);
 
     // Navigate to the next page.
     this.$router.navigateAfterSave(

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -69,9 +69,38 @@ describe("vin-lookup.vue", () => {
         expect(wrapper.vm.navigateForward).toHaveBeenCalled();
     });
 
+    it("Should do a VIN lookup if the user has clicked on the VIN field and entered a new VIN or changed a previously matched VIN.", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+        wrapper.vm.vinTouched = true;
+        wrapper.vm.vin = "foo";
+        wrapper.vm.initialVin = "!foo";
+
+        wrapper.vm.navigateForward = jest.fn();
+        const vehicleLookupApiResponse = {
+            data: {
+                carId: 'new carId' // does not match the store value
+            }
+        };
+        const vinPromise = Promise.resolve(vehicleLookupApiResponse);
+
+        wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise);
+
+        // Act 
+        await wrapper.vm.forwardButtonAction();
+
+        //Assert
+        expect(wrapper.vm.lookupVehicle).toHaveBeenCalled();
+    });
+
     it("Should not call navigateForward() if the store carId does not match the vin response carId and forward button is clicked", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
+        // New lookup
+        wrapper.vm.vinTouched = true; 
+        wrapper.vm.vin = "";
+        wrapper.vm.initialVin = "foo";
+
         const vehicleLookupApiResponse = {
             data: {
                 carId: 'new carId' // does not match the store value
@@ -138,14 +167,21 @@ describe("vin-lookup.vue", () => {
     it("Should not call navigateForward() when forward button is clicked but lookupVehicle errors out.", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
+        wrapper.vm.vinTouched = true;
+        wrapper.vm.vin = "foo";
+        wrapper.vm.initialVin = "!foo";
+
         const vehicleLookupApiResponse = {
-            data: {
+            status: {
                 carId: 'new carId' // does not match the store value
             }
         };
         const vinPromise = Promise.reject(vehicleLookupApiResponse);
 
-        wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise);
+        const response = { 
+            status: 404 
+        };
+        wrapper.vm.lookupVehicle = jest.fn().mockImplementation((response) => vinPromise);
         wrapper.vm.navigateForward = jest.fn();
 
         wrapper.vm.previouslyEnteredCarId = 'new carId';

src/layouts/vin-lookup/vin-lookup.vue

@@ -27,6 +27,7 @@
               maxLength="17"
               :mask="vinMask"
               @focus="setVinTouched"
+              @maska="rawVinValue = $event.target.dataset.maskRawValue"
             />
           </div>
         </div>
@@ -142,6 +143,7 @@ import { Form, defineRule } from "vee-validate";
 import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
 import vinPagesMixin from "@/mixins/vin-pages-mixin";
+import { StatusCodes } from 'http-status-codes';
 
 // DEFINE VALIDATION RULES
 defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@@ -187,6 +189,7 @@ export default {
       vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
       initialVin: this.getVinFromStore(),
       vinTouched: false,
+      rawVinValue: "",
     };
   },
   mounted() {
@@ -202,10 +205,14 @@ export default {
         this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
       );
     },
+    zip() {
+      this.noServiceZip = false;
+    },
   },
   computed: {
     perfectMatchNewVinAlert() {
-      const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore();
+      const vinToCheck = this.vinTouched ? this.rawVinValue : this.initialVin;
+      const isVinPerfectMatch = this.vinPopulatedOnPageLoad && vinToCheck === this.getVinFromStore();
       this.updateIsCarIdDifferent(isVinPerfectMatch);
       return isVinPerfectMatch;
     },
@@ -259,7 +266,7 @@ export default {
     },
     setupVinMask() {
       const lastSixChars = this.initialVin.substring(11, this.initialVin.length);
-      this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; 
+      this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
     },
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
@@ -304,34 +311,58 @@ export default {
       }
     },
     async forwardButtonAction() {
-      // If there is no change to the VIN entered then navigate forward without performing lookup. 
+      let zipValidationResponse;
-      if (this.vinPopulatedOnPageLoad && this.vin == this.initialVin) {
+      let vehicleLookupResponse;
-        this.navigateForward();
-        return;
-      }
 
       const zipValidation = this.validateZip(this.zip);
-      const vehicleLookup = this.lookupVehicle(this.vin);
 
-      const zipValidationResponse = await zipValidation;
+      if (this.vinTouched && this.vin != this.initialVin) {      
-      const vehicleLookupResponse = await vehicleLookup.catch(() => {
+        // If the user has clicked on the VIN field, either they are doing a new VIN lookup or changing the VIN previously matched.
-        this.vinNotFound = true;
+        // Therefore we need to do a Vehicle Lookup        
-        this.$refs.funnelFooter.removeLoader();
+        const vinToLookup = this.vinTouched ? this.vin : this.initialVin;
-        this.noServiceZip = false;
+        const vehicleLookup = this.lookupVehicle(vinToLookup);
-        return false;
+        
-      });
+        zipValidationResponse = await zipValidation;
+        vehicleLookupResponse = await vehicleLookup.catch((response) => {
+          if (response.status == StatusCodes.NOT_FOUND) {
+            this.vinNotFound = true;
+            this.$refs.funnelFooter.removeLoader();
+            return false;
+          }
+        });
+
+        // Check if Service Zip entered is servicable, if not display an alert
+        if (!zipValidationResponse.data.isServiceable) {
+          this.customAlertData.zip = this.zip;       
+          this.noServiceZip = true;
+          this.invalidZip = this.zip;
+        }
+      
+        if (!vehicleLookupResponse || !zipValidationResponse.data.isServiceable) {
+          this.$refs.funnelFooter.removeLoader();
+          return;
+        }
+      } else {
+        const zipValidationResponse = await zipValidation;
+        
+        // Check if Service Zip entered is serviceable, if not display an alert
+        if (!zipValidationResponse.data.isServiceable) {
+          this.customAlertData.zip = this.zip;       
+          this.noServiceZip = true;
+          this.invalidZip = this.zip;
+          this.$refs.funnelFooter.removeLoader();
+
+          return;
+
+        } else {
+          this.navigateForward();
+          return;
+        }
+      }
 
       if (!vehicleLookupResponse) {
         return;
       }
-      
-      if (!zipValidationResponse.data.isServiceable) {
-        this.customAlertData.zip = this.zip;
-        this.$refs.funnelFooter.removeLoader();
-        this.noServiceZip = true;
-        this.invalidZip = this.zip;
-        return;
-      }
 
       this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId;
 

src/mixins/vin-pages-mixin.js

@@ -19,7 +19,7 @@ export default {
                 this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS, this.$route, {}, {}, result.data);
             }
             else {
-                store.commit(storeMutations.UPDATE_PARTS, result.data);
+                store.commit(storeMutations.UPDATE_GLASS_PARTS, result.data);
                 this.$refs.loadingModal.showModal();
                 navigateAfterSaveToHeritageFunnel(this.$route);
             }

src/mixins/vin-pages-mixin.spec.js

@@ -872,7 +872,7 @@ describe("vin-pages-mixin", () => {
 
                 // Assert
                 expect(store.commit).toHaveBeenCalledTimes(1);
-                expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_PARTS, { partsOrQuestions })
+                expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, { partsOrQuestions })
                 expect(wrapper.vm.$refs.loadingModal.showModal).toHaveBeenCalledTimes(1);
                 expect(navigateAfterSaveToHeritageFunnel).toHaveBeenCalledTimes(1);
             });

src/router/index.js

@@ -46,6 +46,7 @@ const routes = [
 
         // If the saved session has timed out, clear the session, execute 404 logic.
         if (getFunnelCookie() !== null && !isSavedSessionStillActive()) {
+          await baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
           await GoToFunnelStartOn404(next);
         }
 

src/store/index.js

@@ -111,7 +111,7 @@ export const mutations = {
   updateGlassToReplace(state, glassToReplace) {
     state.order.damage.glassToReplace = glassToReplace;
   },
-  updateParts(state, partsData) {
+  updateGlassParts(state, partsData) {
     state.order.lineItems.glassParts = partsData;
   },
   updatePageData(state, pageData) {
@@ -212,9 +212,8 @@ export const mutations = {
     state.order.vehicle.registration.firstName = null;
     state.order.vehicle.registration.lastName = null;
   },
-  resetPartsState(state) {
+  resetGlassPartsState(state) {
     state.order.lineItems.glassParts = null;
-    state.order.lineItems.otherParts = null;
   },
   resetState(state) {
     Object.assign(state, getDefaultState());
@@ -400,14 +399,14 @@ export const actions = {
   },
   resetDamageAndDependencies(context) {
     context.commit(storeMutations.RESET_DAMAGE_STATE);
-    context.commit(storeMutations.RESET_PARTS_STATE);
+    context.commit(storeMutations.RESET_GLASS_PARTS_STATE);
   },
   resetRegistrationAndDependencies(context) {
     context.commit(storeMutations.RESET_REGISTRATION_STATE);
-    context.commit(storeMutations.RESET_PARTS_STATE)
+    context.commit(storeMutations.RESET_GLASS_PARTS_STATE)
   },
   resetPartsAndDependencies(context) {
-    context.commit(storeMutations.RESET_PARTS_STATE);
+    context.commit(storeMutations.RESET_GLASS_PARTS_STATE);
   },
   resetState(context) {
     context.commit(storeMutations.RESET_STATE);

src/store/store.spec.js

@@ -183,7 +183,7 @@ describe("Mutations", () => {
     const storeState = state;
 
     // Act
-    mutations.updateParts(storeState, { 'Windshield-Single': 'PARTNUM101'});
+    mutations.updateGlassParts(storeState, { 'Windshield-Single': 'PARTNUM101'});
 
     // Assert
     expect(storeState.order.lineItems.glassParts).toEqual({ 'Windshield-Single': 'PARTNUM101'});
@@ -446,7 +446,7 @@ describe("Actions", () => {
     await actions.resetDamageAndDependencies(context)
 
     expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_STATE);
-    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE);
+    expect(commit).toBeCalledWith(storeMutations.RESET_GLASS_PARTS_STATE);
 
   });
 
@@ -462,7 +462,7 @@ describe("Actions", () => {
     await actions.resetRegistrationAndDependencies(context)
 
     expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_STATE);
-    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE);
+    expect(commit).toBeCalledWith(storeMutations.RESET_GLASS_PARTS_STATE);
 
   });
 
@@ -477,7 +477,7 @@ describe("Actions", () => {
     // Act
     await actions.resetPartsAndDependencies(context)
 
-    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE);
+    expect(commit).toBeCalledWith(storeMutations.RESET_GLASS_PARTS_STATE);
 
   });
 
@@ -747,7 +747,7 @@ describe("Getters", () => {
     const storeState = state;
 
     // Act
-    mutations.updateParts(storeState, {"Rear-Stationary": 'PART101'});
+    mutations.updateGlassParts(storeState, {"Rear-Stationary": 'PART101'});
 
     // Assert
     expect(getters.lineItems(storeState).glassParts).toEqual({"Rear-Stationary": 'PART101'});

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

@@ -78,6 +78,10 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    clearOnUnmount: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -92,9 +96,11 @@ export default {
         : this.selectedValues[0];
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed
+  unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
-    this.checkValue = false;
+    if (this.clearOnUnmount) {
-    this.handleCheckChange();
+      this.checkValue = false;
+      this.handleCheckChange();
+    }
   },
   methods: {
     displayLoader() {

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

@@ -78,6 +78,10 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    clearOnUnmount: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -92,9 +96,11 @@ export default {
         : this.selectedValues[0];
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed
+  unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
-    this.checkValue = false;
+    if (this.clearOnUnmount) {
-    this.handleCheckChange();
+      this.checkValue = false;
+      this.handleCheckChange();
+    }
   },
   methods: {
     displayLoader() {

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

@@ -86,6 +86,10 @@ export default {
     selectedValues: [Array, String],
     modelValue: Object,
     hasError: Boolean,
+    clearOnUnmount: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -99,9 +103,11 @@ export default {
         : this.selectedValues[0];
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed
+  unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
-    this.checkValue = false;
+    if (this.clearOnUnmount) {
-    this.handleCheckChange();
+      this.checkValue = false;
+      this.handleCheckChange();
+    }
   },
   computed: {
     getLabelClasses() {