commit

src/constants/endpoints.js

@@ -31,6 +31,10 @@ const endpoints = {
     url: "/parts/api/v1/parts/damage-options",
     method: "GET",
   },
+  GetParts: {
+    url: "/parts/api/v1/parts/parts",
+    method: "POST",
+  },
   GetVehicle: {
     url: "/vehicle/api/v1/vehicle/lookup",
     method: "GET",

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

@@ -0,0 +1,146 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <questions-page-layout
+            ref="questionsPageLayout"
+            :isMetaValid="meta.valid"
+            :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
+            :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
+            :questionsData="questionsData"
+            validationRules="questions-required"
+            v-model="selectedAnswers"
+            @forwardButtonAction="forwardButtonAction"
+            @back-click="navigateBack"
+            :index="currentGlassIndex" />
+    </Form>
+</template>
+
+<script>
+// Components
+import questionsPageLayout from "@/common-components/questions-page-layout/questions-page-layout";
+
+// Supporting Files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { useMainStore } from '@/store';
+import { issPageValues } from "@/router/router-constants/issPage-values";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+
+// DEFINE VALIDATION RULES
+defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "part-questions",
+    mixins: [vehicleQuestionsMixin],
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {
+            questionsData: [],
+            selectedAnswers: {},
+            currentGlassIndex: 0,
+        };
+    },
+    computed: {
+        AlertFewMoreQuestionsHeader() {
+            return this.getCmsContent("AlertPartsQuestions", "HeadlineText");
+        },
+        AlertFewMoreQuestionsCopy() {
+            return this.getCmsContent("AlertPartsQuestions", "BodyText");
+        },
+        pageData() {
+            return useMainStore().pageData(issPageValues.PART_QUESTIONS);
+        },
+    },
+    mounted() {
+        // are there alreadyAnsweredQuestions?
+        const alreadyAnsweredQuestions = useMainStore().damage.partQuestionAnswers;
+
+        this.questionsData = this.pageData.partsOrQuestions
+            .filter((x) => x.partQuestions)
+            .map((glass, index) => {
+                // NOTE: questions for property "questions" can differ between layouts
+                glass.questions = glass.partQuestions;
+                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;
+            });
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            const partQuestionsFromPageData = useMainStore().pageData(issPageValues.PART_QUESTIONS);
+            return (
+                partQuestionsFromPageData &&
+                Object.keys(partQuestionsFromPageData.partsOrQuestions).length > 0
+            );
+        },
+        async forwardButtonAction() {
+            const questionAnswersArray = this.questionsData.map((glass) => {
+                return {
+                    glassLocation: glass.glassLocation,
+                    glassName: glass.glassName,
+                    result: (glass.answerData && 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) => {
+                if (glass.answerData) {
+                    glass.answerData = {};
+                }
+            });
+
+            // save to vuex store as order.damage.partQuestionAnswers (array)
+            await this.mainStore.savePartQuestionAnswers(questionAnswersArray);
+
+            // call API parts method
+            const partsLookup = await this.mainStore.getParts();
+
+            const glassPartsForStore = partsLookup.data.glassPieceParts;
+
+            // TODO KO delete for quote mvp
+            this.navigateForward(glassPartsForStore, null, this.shouldGoToHeritageQuote);
+        },
+    },
+    components: {
+        Form,
+        questionsPageLayout,
+    },
+};
+</script>

src/mixins/vehicle-questions-mixin.js

@@ -7,12 +7,6 @@ import baseMixin from "@/mixins/base-mixin.js";
 import store from "@/store";
 
 export default {
-    data() {
-        // TODO KO DELETE AFTER QUOTE MVP
-        return {
-            shouldGoToHeritageQuote: false,
-        };
-    },
     methods: {
         hasPartQuestions(partsOrQuestions) {
             return partsOrQuestions?.some((pq) => pq.partQuestions?.length > 0);
@@ -452,12 +446,9 @@ export default {
                 const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions);
 
                 // save to store lineItems.glassParts
-                self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
+                this.mainStore.updateGlassParts(collectedGlassParts);
 
-                shouldGoToHeritageQuote
+                this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
-                    ? navigateToHeritageFunnel()
-                    : self.$router.navigateWithSaving(
-                          self.navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
                           self.$route
                       );
             }
@@ -506,9 +497,5 @@ export default {
 
             self.$router.navigate(backNavigationScenario, self.$route);
         },
-        // TODO KO delete this after quote mvp
-        async handleTempButtonClicked(vm) {
-            this.shouldGoToHeritageQuote = true;
-        },
     },
 };

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

@@ -9,8 +9,29 @@ const navigationScenarios = {
     SELECTED_MODEL: "SELECTED_MODEL",
     SELECTED_STYLE: "SELECTED_STYLE",
     
-    // TESTING
+    // Vin selection
-    CLICKED_TEST: "CLICKED_TEST"
+    CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",
+    CLICKED_FORWARD_WITH_VIN: "CLICKED_FORWARD_WITH_VIN",
+    CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN",
+    CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES: "CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES",
+    SELECTED_VIN_WITH_MISMATCHED_GLASS: "SELECTED_VIN_WITH_MISMATCHED_GLASS",
+    SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN",
+    SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE",
+    SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
+    CLICKED_FORWARD_WITH_NO_QUESTIONS: "CLICKED_FORWARD_WITH_NO_QUESTIONS",
+
+    // Part selection
+    CLICKED_FORWARD_WITH_PART_QUESTIONS: "CLICKED_FORWARD_WITH_PART_QUESTIONS",
+    CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE: "CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE",
+    CLICKED_FORWARD_WITH_MOLDING_QUESTIONS: "CLICKED_FORWARD_WITH_MOLDING_QUESTIONS",
+    CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS: "CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS",
+    CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS: "CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS",
+    CLICKED_BACK_WITH_PART_QUESTIONS: "CLICKED_BACK_WITH_PART_QUESTIONS",
+    CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE: "CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE",
+    CLICKED_BACK_WITH_MOLDING_QUESTIONS: "CLICKED_BACK_WITH_MOLDING_QUESTIONS",
+    CLICKED_BACK_WITH_CAPABILITY_QUESTIONS: "CLICKED_BACK_WITH_CAPABILITY_QUESTIONS",
+    CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: "CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS",
+    CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: "CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS",
   };
   
   export { navigationScenarios };

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

@@ -73,6 +73,126 @@ const routingTable = function(store) {
           },
       ],
     },
+    {
+      issPageValue: issPageValues.PART_QUESTIONS,
+      maps: [
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
+              destinationIssPageValue: issPageValues.VIN_LOOKUP,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
+              destinationIssPageValue: issPageValues.ESTIMATE,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+              destinationIssPageValue: issPageValues.VEHICLE_PARTS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
+              destinationIssPageValue: issPageValues.MOLDING_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
+              destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
+              destinationIssPageValue: issPageValues.QUOTE,
+          },
+      ],
+    },
+    {
+      issPageValue: issPageValues.VEHICLE_PARTS,
+      maps: [
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD,
+              destinationIssPageValue: issPageValues.REVEAL,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
+              destinationIssPageValue: issPageValues.PART_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
+              destinationIssPageValue: issPageValues.VIN_LOOKUP,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
+              destinationIssPageValue: issPageValues.ESTIMATE,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
+              destinationIssPageValue: issPageValues.MOLDING_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
+              destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
+              destinationIssPageValue: issPageValues.QUOTE,
+          },
+      ],
+    },
+    {
+      issPageValue: issPageValues.MOLDING_QUESTIONS,
+      maps: [
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
+              destinationIssPageValue: issPageValues.VIN_LOOKUP,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
+              destinationIssPageValue: issPageValues.ESTIMATE,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
+              destinationIssPageValue: issPageValues.PART_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+              destinationIssPageValue: issPageValues.VEHICLE_PARTS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
+              destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
+              destinationIssPageValue: issPageValues.QUOTE,
+          },
+      ],
+    },
+    {
+      issPageValue: issPageValues.CAPABILITY_QUESTIONS,
+      maps: [
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
+              destinationIssPageValue: issPageValues.VIN_LOOKUP,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
+              destinationIssPageValue: issPageValues.ESTIMATE,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
+              destinationIssPageValue: issPageValues.PART_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+              destinationIssPageValue: issPageValues.VEHICLE_PARTS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_BACK_WITH_MOLDING_QUESTIONS,
+              destinationIssPageValue: issPageValues.MOLDING_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
+              destinationIssPageValue: issPageValues.QUOTE,
+          },
+      ],
+  },
     {
       issPageValue: issPageValues.WELCOME_PAGE,
       maps: [

src/store/index.js

@@ -39,8 +39,15 @@ const getDefaultState = () => {
         moldingQuestionAnswers: null,
         capabilityQuestionAnswers: null,
       },
+      serviceLocation: {
+        address: null,
+        city: null,
+        state: null,
+        zipCode: null,
+      },
       lineItems: {
         glassParts: null,
+        otherParts: null
       },
       referralNumber: null,
       referralDate: null,
@@ -211,6 +218,43 @@ export const useMainStore = defineStore({
             payload: {},
         });
       },
+
+      async getParts() {
+        const vehicle = this.getters.vehicle;
+        const damage = this.getters.damage;
+        const order = this.order;
+
+        const carId = vehicle.carId;
+        const glassArray = damage.glassToReplace;
+        const resultsArray = damage.partQuestionAnswers;
+        const zipCode = order.serviceLocation.zipCode;
+        const vin = vehicle.vin;
+
+        // create a new array to avoid mutating state
+        const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
+        const resultsArrayForPayload = convertResultsForApi(resultsArray);
+
+        const response = await globalMethods.callHttpClient({
+            method: endpoints.GetParts.method,
+            endpoint: endpoints.GetParts.url,
+            payload: {
+                carId: carId,
+                glassPieces: glassArrayForPayload,
+                answerResults: resultsArrayForPayload,
+                zip: zipCode,
+                vin: vin,
+            },
+        });
+
+        // Flatten location and name properties
+        response.data.glassPieceParts = convertGlassPieceNamingFromApi(
+            response.data.glassPieceParts
+        );
+
+        return response;
+      },
+
+
       setVehicle() {
         return globalMethods
           .callHttpClient({
@@ -363,6 +407,55 @@ export const useMainStore = defineStore({
       updateGlassToReplace(glassToReplace) {
         this.order.damage.glassToReplace = glassToReplace;
       },
+
+      updateGlassParts(partsData) {
+        this.order.lineItems.glassParts = partsData;
+      },
+
+      updateMoldingQuestionAnswers(answersArray) {
+        this.order.damage.moldingQuestionAnswers = answersArray;
+      },
+
+      updateCapabilityQuestionAnswers(answersArray) {
+        this.order.damage.capabilityQuestionAnswers = answersArray;
+      },
+
+      updatePartQuestionAnswers(answersArray) {
+        this.order.damage.partQuestionAnswers = answersArray;
+      },
+
+      updatePageData(pageData) {
+        this.applicationUser.pageData[pageData.page] = pageData.data;
+      },
+
+      savePartQuestionAnswers(partQuestionAnswersArray) {
+        // if part question answers have changed, reset subsequent question answers
+        const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
+            context.getters.damage.partQuestionAnswers,
+            "result"
+        );
+        const sortedPartQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(
+            partQuestionAnswersArray,
+            "result"
+        );
+        const havePartQuestionAnswersChanged =
+            sortedPreviousResultsArray?.length !== sortedPartQuestionAnswersArray.length ||
+            !sortedPreviousResultsArray?.every(
+                (x, i) => x.result === sortedPartQuestionAnswersArray[i].result
+            );
+
+        if (havePartQuestionAnswersChanged) {
+            this.updateGlassParts(null);
+            this.updateMoldingQuestionAnswers(null);
+            this.updateCapabilityQuestionAnswers(null);
+            this.updatePageData({ page: issPageValues.VEHICLE_PARTS, data: null});
+            this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null});
+            this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null});
+        }
+
+        //Save new values
+        this.updatePartQuestionAnswers(partQuestionAnswersArray);
+      },
      
       addEventToBus (event) {
         this.applicationUser.eventBus.push(event);
@@ -494,3 +587,56 @@ export const useMainStore = defineStore({
     },
     persist: true
 });
+
+
+function sortArrayOfObjectsByPropertyValue(arrayOfObjects, propertyName) {
+  if (!arrayOfObjects) return null;
+
+  return arrayOfObjects.sort((a, b) => {
+      if (a[propertyName] < b[propertyName]) return -1;
+      else if (a[propertyName] > b[propertyName]) return 1;
+      else return 0;
+  });
+}
+
+function convertGlassPieceNamingForApi(glassArray) {
+  if (!glassArray || glassArray.length === 0) return [];
+
+  // check if array already converted.  (likely when a session has been saved previously and then reloaded)
+  if (glassArray[0].location !== undefined) {
+      return glassArray;
+  }
+
+  const converted = [];
+  glassArray.forEach((glass) => {
+      converted.push({
+          location: glass.glassLocation,
+          name: glass.glassName,
+      });
+  });
+  return converted;
+}
+
+function convertResultsForApi(resultsArray) {
+  if (!resultsArray) return [];
+  const converted = [];
+  resultsArray.forEach((answer) => {
+      converted.push({
+          location: answer.glassLocation,
+          name: answer.glassName,
+          result: answer.result,
+      });
+  });
+  return converted;
+}
+
+function convertGlassPieceNamingFromApi(glassArray) {
+  glassArray.forEach((glass) => {
+      glass.glassLocation = glass.glassPiece.location;
+      glass.glassName = glass.glassPiece.name;
+      delete glass.glassPiece;
+      return glass;
+  });
+  return glassArray;
+}
+