Merge branch 'develop' into feature/CSR-319

src/common-components/vin-information/vin-information.vue

@@ -4,7 +4,7 @@
       <textLink :text="HeadlineText" linkType="text" href="#!" />
     </div>
     <div class="vin-info">
-      <div class="mt-3" v-html="BodyText"></div>
+      <div class="mt-2" v-html="BodyText"></div>
       <img :src="OptionalImage" alt="" />
     </div>
   </div>

src/constants/damage-locations-parts.js

@@ -1,8 +0,0 @@
-const damageLocationsParts = {
-    WINDSHIELD: "Windshield",
-    DRIVER: "Driver",
-    PASSENGER: "Passenger",
-    REAR: "Rear",
-  };
-  
-  export { damageLocationsParts };

src/constants/damage-locations-selected.js

@@ -0,0 +1,21 @@
+const damageLocationsSelected = {
+    WINDSHIELD: "Windshield",
+    SIDEDOOR: "SideDoor",
+    REARWINDOW: "RearWindow",
+    REPAIR: "Repair",
+    REPLACE: "Replace",
+    DRIVER: "Driver",
+    PASSENGER: "Passenger",
+    FRONT: "Front",
+    REAR: "Rear",
+    BACK: "Back",
+    QUARTER: "Quarter",
+    VENT: "Vent",
+    SINGLE: "Single",
+    DRIVERSIDE: "DriverSide",
+    PASSENGERSIDE: "PassengerSide",
+    STATIONARY: "Stationary",
+    SLIDER: "Slider"
+  };
+  
+  export { damageLocationsSelected };

src/constants/tint-mapper.js

@@ -35,7 +35,7 @@ const tintMap = {
         { name: "gray tint privacy", src: "Glass-NoShade-Privacy.svg" },
 
         // No shade or tint
-        { name: "no shade, no tint", src: "Glass-NoShade-NoTint.svg" }, // ???
+        { name: "clear", src: "Glass-NoShade-NoTint.svg" }
     ],
 
     windshield: [
@@ -70,7 +70,7 @@ const tintMap = {
         { name: "gray tint privacy", src: "Windshield-NoShade-Privacy.svg" },
 
         // No shade or tint
-        { name: "no shade, no tint", src: "Windshield-NoShade-NoTint.svg" }, // ???
+        { name: "clear", src: "Windshield-NoShade-NoTint.svg" },
 
     ]
 }

src/layouts/form-test/form-test.vue

@@ -84,7 +84,6 @@ import baseMixin from "@/mixins/base-mixin";
 import { Form, defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import { damageLocationsParts } from "@/constants/damage-locations-parts.js";
 import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
 
 // DEFINE VALIDATION RULES

src/layouts/reveal/reveal.vue

@@ -51,7 +51,7 @@ export default {
             );
         },
         arePagePrerequisitesValid() {
-            return store.getters.lineItems.glassParts !== null;
+            return true;
         },
         resetDependentState() {
             // Set

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -20,6 +20,7 @@ import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
 import { validate } from "vee-validate";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -41,6 +42,9 @@ jest.mock("@/store", () => ({
       image: "test.jpg",
     },
     eventBusItem: jest.fn(),
+    damage: {
+      glassToReplace: [] 
+    },
   },
 }));
 
@@ -260,7 +264,7 @@ describe("vehicle-damage.vue", () => {
 });
 
 describe("vehicle-damage.vue", () => {
-  test("Windshield replace with single part on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => {
+  test("Windshield replace with single part on ForwardButtonAction triggers a router.navigate and saves selections to store", async () => {
     //Arrange
     const partsData = { partsOrQuestions: [
       {
@@ -280,7 +284,7 @@ describe("vehicle-damage.vue", () => {
     const { wrapper } = setupMocks({
       pageHeaderWidgetHeaderText: "",
       mountOptionsMockData: {
-        router: { navigateAfterSave: jest.fn(), },
+        router: { navigate: jest.fn(), },
         actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
         store: {
           getters: {
@@ -310,7 +314,7 @@ describe("vehicle-damage.vue", () => {
     await wrapper.vm.forwardButtonAction();
 
     //Assert
-    expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
+    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
     expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
@@ -409,13 +413,13 @@ describe("vehicle-damage.vue", () => {
 
 
 describe("vehicle-damage.vue", () => {
-  test("Windshield repair on ForwardButtonAction triggers a router.navigateAfterSave and saves selection to store", async () => {
+  test("Windshield repair on ForwardButtonAction triggers a router.navigate and saves selection to store", async () => {
     //Arrange
     const partsData = { partsOrQuestions: []};
     const { wrapper } = setupMocks({
       pageHeaderWidgetHeaderText: "",
       mountOptionsMockData: {
-        router: { navigateAfterSave: jest.fn(), },
+        router: { navigate: jest.fn(), },
         actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
         store: {
           getters: {
@@ -442,7 +446,7 @@ describe("vehicle-damage.vue", () => {
     await wrapper.vm.forwardButtonAction();
 
     //Assert
-    expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
+    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, true);
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_NUMBER_OF_CHIPS, 2);
   });
@@ -622,6 +626,162 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+const damageLocations = [["Windshield", [damageLocationsSelected.WINDSHIELD]],
+               ["Driver", [damageLocationsSelected.SIDEDOOR]],
+               ["Passenger", [damageLocationsSelected.SIDEDOOR]],
+               ["Rear", [damageLocationsSelected.REARWINDOW]]];
+describe("vehicle-damage.vue", () => {
+  test.each(damageLocations)("getDamageLocationsFromStore for %s returns expected %s", async (damageLocation, expectedGlass) => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation}] }, isRepair: true};
+
+    var glassSelections = wrapper.vm.getDamageLocationsFromStore();
+      
+    //Assert
+    expect(glassSelections).toEqual(expectedGlass);
+
+  });
+});
+
+const storeWindshieldOptions = [[1, false, "Windshield", "Single", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
+                                selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]}],
+                                [2, false, "Windshield", "Driver", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
+                                  selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]}],
+                                [3, false, "Windshield", "Passenger", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
+                                  selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]}],
+                                [4, true, "", "", { selectedWindshieldDamageType: [damageLocationsSelected.REPAIR], 
+                                  selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: []}]
+                               ];
+describe("vehicle-damage.vue", () => {
+  test.each(storeWindshieldOptions)("getWindshieldOptionsFromStore test #%s", async (testNum, isRepair, damageLocation, damageName, expectedWindshieldOptions) => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    store.getters = { 
+      vehicle: 
+        { carId: "C0000000" }, 
+        eventBusItem: jest.fn(),
+        damage: 
+          { 
+            glassToReplace: [{location: damageLocation, name: damageName}],
+            isRepair: isRepair,
+            numberOfChips: 2 
+          }, 
+      };
+
+    var windshieldSelections = wrapper.vm.getWindshieldOptionsFromStore();
+      
+    //Assert
+    expect(windshieldSelections).toEqual(expectedWindshieldOptions);
+
+  });
+});
+
+const driverDoorSides = [["Driver", "Front", [damageLocationsSelected.FRONT]],
+                   ["Driver", "Back", [damageLocationsSelected.BACK]],
+                   ["Driver", "Vent", [damageLocationsSelected.VENT]],
+                   ["Driver", "Quarter", [damageLocationsSelected.QUARTER]]
+                  ];
+describe("vehicle-damage.vue", () => {
+  test.each(driverDoorSides)("getDriverSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};
+
+    var glassSelections = wrapper.vm.getDriverSideReplaceOptionsFromStore();
+      
+    //Assert
+    expect(glassSelections).toEqual(expectedGlass);
+
+  });
+});
+
+const passengerDoorSides = [["Passenger", "Front", [damageLocationsSelected.FRONT]],
+                   ["Passenger", "Back", [damageLocationsSelected.BACK]],
+                   ["Passenger", "Vent", [damageLocationsSelected.VENT]],
+                   ["Passenger", "Quarter", [damageLocationsSelected.QUARTER]]
+                  ];
+describe("vehicle-damage.vue", () => {
+  test.each(passengerDoorSides)("getPassengerSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};
+
+    var glassSelections = wrapper.vm.getPassengerSideReplaceOptionsFromStore();
+      
+    //Assert
+    expect(glassSelections).toEqual(expectedGlass);
+
+  });
+});
+
+const rearReplaceOptions = [["Rear", "Stationary", [damageLocationsSelected.STATIONARY]],
+                   ["Rear", "Slider", [damageLocationsSelected.SLIDER]]
+                  ];
+describe("vehicle-damage.vue", () => {
+  test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};
+
+    var glassSelections = wrapper.vm.getRearReplaceOptionsFromStore();
+      
+    //Assert
+    expect(glassSelections).toEqual(expectedGlass);
+
+  });
+});
+
 describe("vehicle-damage.vue", () => {
   test("when onInvalidSubmit is triggered with errors focus will be put on the first element with an error", async () => {
 
@@ -640,7 +800,7 @@ describe("vehicle-damage.vue", () => {
     newObj.setAttribute("data-focus-target", "driverSideOptions");
     document.body.appendChild(newObj);
     const testInputElement = document.getElementById("testInput");
-    
+
     //Act
     vehicleDamage.beforeRouteEnter.call(
       wrapper.vm,

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -73,8 +73,8 @@ import baseMixin from "@/mixins/base-mixin";
 import { Form, defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import { damageLocationsParts } from "@/constants/damage-locations-parts.js";
 import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 
 // DEFINE VALIDATION RULES
 defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
@@ -135,14 +135,14 @@ export default {
   },
   data(){
     return {
-      selectedDamageLocations: [],
+      selectedDamageLocations: this.getDamageLocationsFromStore(),
       sideDoorOptionsData: {
-        selectedDoorSides: [],
+        selectedDoorSides: this.getDoorSidesFromStore(),
-        selectedDriverSideReplaceOptions: [],
+        selectedDriverSideReplaceOptions: this.getDriverSideReplaceOptionsFromStore(),
-        selectedPassengerSideReplaceOptions: []
+        selectedPassengerSideReplaceOptions: this.getPassengerSideReplaceOptionsFromStore()
       },
-      selectedWindshieldOptions: [],
+      selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
-      selectedRearReplaceOptions: [],
+      selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
     }
   },
   methods: {
@@ -170,19 +170,121 @@ export default {
         el && el.focus();
       }
     },
-    async forwardButtonAction() {
+    
-      var windshieldChipCount = this.selectedWindshieldOptions.selectedWindshieldChipCount && this.isWindshieldDamageLocation ? 
+    getDamageLocationsFromStore() {
-         this.selectedWindshieldOptions.selectedWindshieldChipCount[0] : null;
+      var glassSelections = [];
+      
+      if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD }) ||
+          store.getters.damage.isRepair) {
+          glassSelections.push(damageLocationsSelected.WINDSHIELD);
+      }
+      if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.DRIVER ||
+          glass.location === damageLocationsSelected.PASSENGER })) {
+          glassSelections.push(damageLocationsSelected.SIDEDOOR);
+      }
 
+      if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.REAR })) {
+          glassSelections.push(damageLocationsSelected.REARWINDOW);
+      }
+
+      return glassSelections;
+    },
+
+    getWindshieldOptionsFromStore() {
+      var windShieldOptions = { selectedWindshieldDamageType: [], selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
+      
+      if (store.getters.damage.isRepair === undefined) return windshieldOptions;
+
+      if (!store.getters.damage.isRepair) {
+        if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
+            glass.name === damageLocationsSelected.SINGLE })) {
+            windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
+            windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
+        }
+
+        if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
+            glass.name === damageLocationsSelected.DRIVER })) {
+            windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
+            windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
+        }
+
+        if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD &&
+            glass.name === damageLocationsSelected.PASSENGER })) {
+            windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
+            windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
+        }
+      }
+
+      if (store.getters.damage.isRepair) {
+          windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPAIR);
+          windShieldOptions.selectedWindshieldChipCount.push(store.getters.damage.numberOfChips);
+      }
+
+      return windShieldOptions;
+      
+    },
+
+    getDoorSidesFromStore() {
+      var doorSides = [];
+      if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.DRIVER })){
+          doorSides.push(damageLocationsSelected.DRIVERSIDE);
+      }
+
+      if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.PASSENGER })){
+          doorSides.push(damageLocationsSelected.PASSENGERSIDE);
+      }
+
+      return doorSides;
+    },
+
+    getDriverSideReplaceOptionsFromStore() {
+      var driverSideReplaceOptions = [];
+
+      store.getters.damage.glassToReplace.forEach(glass => {
+        if (glass.location === damageLocationsSelected.DRIVER){
+          driverSideReplaceOptions.push(glass.name);
+        }
+      });
+
+      return driverSideReplaceOptions;
+    },
+    
+    getPassengerSideReplaceOptionsFromStore() {
+      var passengerSideReplaceOptions = [];
+
+      store.getters.damage.glassToReplace.forEach(glass => {
+        if (glass.location === damageLocationsSelected.PASSENGER){
+          passengerSideReplaceOptions.push(glass.name);
+        }
+      });
+
+      return passengerSideReplaceOptions;
+    },
+
+    getRearReplaceOptionsFromStore(){
+      var rearReplaceOptions = [];
+      
+      store.getters.damage.glassToReplace.forEach(glass => {
+        if (glass.location === damageLocationsSelected.REAR){
+          rearReplaceOptions.push(glass.name);
+        }
+      });
+
+      return rearReplaceOptions;
+    },
+
+    async forwardButtonAction() {
       store.commit(this.storeMutations.UPDATE_IS_REPAIR, this.isWindshieldRepair);
 
-      if (windshieldChipCount){
+      if (this.isWindshieldRepair){
-        store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, parseInt(windshieldChipCount));
+        store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, parseInt(this.selectedWindshieldOptions.selectedWindshieldChipCount));
+      } else {
+        store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
       }
 
       store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace());
       
-      var partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
+      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
       { carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
       
       this.navigateForward(partsData);
@@ -197,14 +299,12 @@ export default {
       
       //found multiple parts for a single glass location (Windshield, Driver, Passenger, Rear)
       if (partsData.data.partsOrQuestions){
-        var multiParts = false;
+        for (var i = 0; i < partsData.data.partsOrQuestions.length; i++){
-        partsData.data.partsOrQuestions.forEach(pq => {
+           if (partsData.data.partsOrQuestions[i].parts != null && partsData.data.partsOrQuestions[i].parts.length > 1){
-          if (pq.parts != null && pq.parts.length > 1){
             this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
-            multiParts = true;
+            return;
           }
-        });
+        }
-        if (multiParts) return;
       }
 
       //if not a repair then there should only be 1 part and no problem questions at this point so save the part to the store.
@@ -212,32 +312,32 @@ export default {
         store.commit(this.storeMutations.UPDATE_PARTS, partsData.data.partsOrQuestions[0].parts);
       }
     
-      this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART, this.$route);
+      this.$router.navigate(this.navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART, this.$route);
     },
 
     selectedGlassToReplace() {
-      var selectedGlassToReplace = [];
+      const selectedGlassToReplace = [];
       if (this.isWindshieldDamageLocation && !this.isWindshieldRepair){
           this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(wsItem => {
-            selectedGlassToReplace.push({ location: damageLocationsParts.WINDSHIELD, name: wsItem});
+            selectedGlassToReplace.push({ location: damageLocationsSelected.WINDSHIELD, name: wsItem});
           })
       }
 
       if (this.isDriverSideReplace){
         this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(driverItem => {
-          selectedGlassToReplace.push({ location: damageLocationsParts.DRIVER, name: driverItem});
+          selectedGlassToReplace.push({ location: damageLocationsSelected.DRIVER, name: driverItem});
         })
       }
 
       if (this.isPassengerSideReplace){
         this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(passengerItem => {
-          selectedGlassToReplace.push({ location: damageLocationsParts.PASSENGER, name: passengerItem});
+          selectedGlassToReplace.push({ location: damageLocationsSelected.PASSENGER, name: passengerItem});
         })
       }
 
       if (this.isRearWindowDamageLocation) {
           this.selectedRearReplaceOptions.forEach(rearItem => {
-            selectedGlassToReplace.push({ location: damageLocationsParts.REAR, name: rearItem});
+            selectedGlassToReplace.push({ location: damageLocationsSelected.REAR, name: rearItem});
           })
       }
       

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -87,7 +87,7 @@ export default ({
         },
         selectedWindshieldChipCountValues: {
             get: function() {
-                return this.selectedValues.selectedChipCount;
+                return this.selectedValues.selectedWindshieldChipCount;
             },
             set: function(newValue) {
                 this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, null);

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -1,34 +1,62 @@
 <template>
-<div class="container">
+  <div class="container">
     <div class="row">
-        <p class="mb-0">{{ colorQuestionText }}</p>
+      <p class="mb-0">{{ colorQuestionText }}</p>
     </div>
-</div>
+  </div>
-
-<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
 
+  <div
+    class="container nested-radio"
+    v-for="(value, name, index) in featureListData"
+    :key="index"
+  >
     <div class="row my-2">
-        <div class="col">
+      <div class="col">
-            <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
+        <listCard
+          v-model="selectedTint[name]"
+          :value="`${glassLocation}-${glassName}-${name}`"
+          :isRadio="true"
+          :isWide="true"
+          :buttonImage="
             require(`@/assets/img/tints/${getTintSourceImage(
               glassLocation,
               name
             )}`)
-          " :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
+          "
-        </div>
+          :buttonLabel="name"
+          altText=""
+          :buttonID="`${glassLocation}-${glassName}-${name}`"
+          :groupName="`${glassLocation}-${glassName}`"
+          @isCheckedChanged="ResetTintAndPartSelections()"
+        />
+      </div>
     </div>
     <transition name="fade" mode="out-in">
-        <div v-if="
+      <div
+        v-if="
           selectedTint[name] != undefined &&
           selectedTint[name].buttonId ===
             `${glassLocation}-${glassName}-${name}`
-        " class="row my-2" aria-live="polite">
+        "
-            <div class="col">
+        class="row my-2"
-                <buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" :questionText="glassFeatureQuestion" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" />
+        aria-live="polite"
-            </div>
+      >
+        <div class="col">
+          <buttonQuestion
+            v-model="selectedPart[glassLocation]"
+            buttonType="radio"
+            class="radioQuestion"
+            :questionText="glassFeatureQuestion"
+            :answers="value"
+            textPosition="text-start"
+            :loaderEnabled="false"
+            :isRequired="true"
+            :groupName="`${glassLocation}-${glassName}-${name}`"
+          />
         </div>
+      </div>
     </transition>
-</div>
+  </div>
 </template>
 
 <script>
@@ -37,152 +65,165 @@ import listCard from "@/ux-components/list-card/list-card";
 import buttonQuestion from "@/common-components/button-question/button-question";
 
 // Supporting files
-import {
+import { getTintImage } from "@/constants/tint-mapper";
-    getTintImage
+import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
-} from "@/constants/tint-mapper";
-import {
-    getCustomTransformValue
-} from "@/constants/dynamictext-mapper";
 
 export default {
-    name: "glass-part-question",
+  name: "glass-part-question",
-    inheritAttrs: false,
+  inheritAttrs: false,
-    data() {
+  data() {
-        return {
+    return {
-            glassColorQuestion: "",
+      glassColorQuestion: "",
-            glassFeatureQuestion: "",
+      glassFeatureQuestion: "",
-            selectedTint: {}, // v-model for the list card selections
+      selectedTint: {}, // v-model for the list card selections
-        };
+    };
+  },
+  props: {
+    glassName: String,
+    glassLocation: String,
+    colorAnswers: Array,
+    modelValue: Object,
+  },
+  mounted() {
+    this.LoadPreselectedValues();
+  },
+  components: {
+    listCard,
+    buttonQuestion,
+  },
+  computed: {
+    colorQuestionText() {
+      return getCustomTransformValue(
+        this.glassColorQuestion,
+        `${this.glassLocation} ${this.glassName}`
+      );
     },
-    props: {
+
-        glassName: String,
+    selectedPart: {
-        glassLocation: String,
+      get: function () {
-        colorAnswers: Array,
+        return this.modelValue;
-        modelValue: Object,
+      },
+      set: function (newValue) {
+        this.$emit("update:modelValue", newValue);
+      },
     },
-    mounted() {
+
+    // Creates a map of the feature list data in the correct Name/Value
+    // format for the button-question component.
+    featureListData() {
+      const tintMapByColor = this.colorAnswers.reduce((arr, item) => {
+        // Create the key
+        const itemColor = item.ColorAnswerText;
+        arr[itemColor] = arr[itemColor] || [];
+
+        // Map the data to Name/Text object for ButtonQuestion
+        const mappedItem = item.FeatureAnswers.reduce((featureArr, item) => {
+          featureArr["Text"] = item.FeatureAnswerText; // Display to User
+          featureArr["Name"] = item.PartNumber; // Backing Value
+
+          return featureArr;
+        }, {});
+
+        // Add onto the final object
+        arr[itemColor].push(mappedItem);
+
+        return arr;
+      }, {});
+
+      return tintMapByColor;
+    },
+
+    PartDataFromApi() {
+      return this.$store.getters.pageData(this.$route.query.fmgPage);
+    },
+  },
+  methods: {
+    // Initialize the component data
+    initializeComponent(cmsContent) {
+      this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
+      this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
+    },
+
+    // Gets tint images based on the glass type, and tint name.
+    // Returns an empty string if the src or object is undefined.
+    getTintSourceImage(glassLocation, tintColor) {
+      const tintSourceObject = getTintImage(glassLocation, tintColor);
+
+      if (tintSourceObject === undefined || tintSourceObject.src == undefined) {
+        return "";
+      }
+
+      return tintSourceObject.src;
+    },
+
+    // Reset selections when tint changes for the same glass to ensure proper selection.
+    // Also checks if only a single part is present for the tint.
+    ResetTintAndPartSelections() {
+      this.selectedTint = {};
+      this.selectedPart = {};
+      this.AutoSelectIfSinglePart();
+    },
+
+    // Check if only a single part is present for the tint and set the v-model if it is.
+    AutoSelectIfSinglePart() {
+      // Check if the selected tint only has a single feature
+      Object.keys(this.PartDataFromApi.partsOrQuestions).forEach((key) => {
+        const currentGlassSelection =
+          this.PartDataFromApi.partsOrQuestions[key];
+
+        if (
+          currentGlassSelection.glassName === this.glassName &&
+          currentGlassSelection.glassLocation === this.glassLocation
+        ) {
+          if (currentGlassSelection.parts.length === 1) {
+            this.selectedPart = {
+              [currentGlassSelection.glassLocation]: [
+                currentGlassSelection.parts[0].partNumber,
+              ],
+            };
+          }
+        }
+      });
+    },
+
+    // Loads the preselected values from the store.
+    LoadPreselectedValues() {
+      this.$nextTick(() => {
         if (this.modelValue !== undefined) {
-            // Populate button-question model-value if parts data already exists in VueX
+          // Populate button-question model-value if parts data already exists in VueX
-            const alreadyPopulatedPartsData =
+          const alreadyPopulatedPartsData =
-                this.$store.getters.lineItems.glassParts;
+            this.$store.getters.lineItems.glassParts;
 
-            Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+          Object.keys(alreadyPopulatedPartsData).forEach((key) => {
-                const partNumber = alreadyPopulatedPartsData[key].partNumber;
+            const partNumber = alreadyPopulatedPartsData[key].partNumber;
-                const tintColor = alreadyPopulatedPartsData[key].color;
+            const tintColor = alreadyPopulatedPartsData[key].color;
 
-                Object.keys(this.modelValue).forEach((key) => {
+            Object.keys(this.modelValue).forEach((key) => {
-                    if (this.modelValue[key][0] === partNumber) {
+              if (this.modelValue[key][0] === partNumber) {
-                        this.selectedTint[tintColor] = {
+                this.selectedTint[tintColor] = {
-                            buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+                  buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
-                            checkValue: "",
+                  checkValue: "",
-                            value: "",
+                  value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
-                        };
+                };
-                    }
+              }
-                });
-            });
-        }
-    },
-    components: {
-        listCard,
-        buttonQuestion,
-    },
-    computed: {
-        colorQuestionText() {
-            return getCustomTransformValue(
-                this.glassColorQuestion,
-                `${this.glassLocation} ${this.glassName}`
-            );
-        },
-
-        selectedPart: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
-            },
-        },
-
-        // Creates a map of the feature list data in the correct Name/Value
-        // format for the button-question component.
-        featureListData() {
-            const tintMapByColor = this.colorAnswers.reduce((arr, item) => {
-                // Create the key
-                const itemColor = item.ColorAnswerText;
-                arr[itemColor] = arr[itemColor] || [];
-
-                // Map the data to Name/Text object for ButtonQuestion
-                const mappedItem = item.FeatureAnswers.reduce((featureArr, item) => {
-                    featureArr["Text"] = item.FeatureAnswerText; // Display to User
-                    featureArr["Name"] = item.PartNumber; // Backing Value
-
-                    return featureArr;
-                }, {});
-
-                // Add onto the final object
-                arr[itemColor].push(mappedItem);
-
-                return arr;
-            }, {});
-
-            return tintMapByColor;
-        },
-    },
-    methods: {
-        initializeComponent(cmsContent) {
-            this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
-            this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
-        },
-
-        // Gets tint images based on the glass type, and tint name.
-        // Returns an empty string if the src or object is undefined.
-        getTintSourceImage(glassLocation, tintColor) {
-            const tintSourceObject = getTintImage(glassLocation, tintColor);
-
-            if (tintSourceObject === undefined || tintSourceObject.src == undefined) {
-                return "";
-            }
-
-            return tintSourceObject.src;
-        },
-
-        // Reset selections when tint changes for the same glass to ensure proper selection.
-        // Also checks if only a single part is present for the tint.
-        ResetTintAndPartSelections() {
-
-            this.selectedTint = {};
-            this.selectedPart = {};
-            this.AutoSelectIfSinglePart();
-        },
-
-        // Check if only a single part is present for the tint and set the v-model if it is.
-        AutoSelectIfSinglePart(){
-            // Check if the selected tint only has a single feature
-            const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
-
-            Object.keys(partsData.partsOrQuestions).forEach((key) => {
-                const currentGlassSelection = partsData.partsOrQuestions[key];
-
-                if (currentGlassSelection.glassName === this.glassName && currentGlassSelection.glassLocation === this.glassLocation) {
-                    if (currentGlassSelection.parts.length === 1) {
-                        this.selectedPart = { [currentGlassSelection.glassLocation]: [currentGlassSelection.parts[0].partNumber]};
-                    }
-                }
             });
+          });
         }
+      });
     },
+  },
 };
 </script>
 
 <style lang="scss">
 .nested-radio {
-    .ui-radio {
+  .ui-radio {
-        flex-direction: column;
+    flex-direction: column;
-        margin: 0.25rem 0;
+    margin: 0.25rem 0;
-    }
+  }
 
-    p {
+  p {
-        font-size: 0.875rem;
+    font-size: 0.875rem;
-    }
+  }
 }
 </style>

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

@@ -1,42 +1,26 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" />
     <div class="container-fluid prevent-squish my-5">
-      <div class="row">
+        <div class="row">
-        <div class="col">
+            <div class="col">
-          <alert
+                <alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
-            class="rounded border-0 shadow-sm"
+            </div>
-            alertClass="alert-warning"
-            :alertHeadline="alertWidgetData.headline"
-            :alertCopy="alertWidgetData.copy"
-            :isDismissible="false"
-          />
         </div>
-      </div>
     </div>
 
     <div v-for="(item, i) in PartsForQuestions" :key="i">
-      <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-      <div class="container-fluid">
+        <div class="container-fluid">
-        <hr v-if="i > 0" />
+            <hr v-if="i > 0" />
-      </div>
+        </div>
 
-      <glassPartQuestion
+        <glassPartQuestion :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
-        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-        v-model="glassParts[item.glassLocation + '-' + item.glassName]"
-        :glassLocation="item.glassLocation"
-        :glassName="item.glassName"
-        :colorAnswers="item.colorAnswers"
-      />
     </div>
-    <funnelFooter
+    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
-      ref="funnelFooter"
+</div>
-      @back-clicked="backButtonAction"
-      @ForwardClicked="forwardButtonAction"
-    />
-  </div>
 </template>
 
 <script>
@@ -48,183 +32,199 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import alert from "@/ux-components/alert/alert";
 // Supporting Files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import {
-import { settleAllPromises } from "@/helpers/layout-helper";
+    fetchCmsContentForPage
-import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+} from "@/helpers/cms-content-helper";
-import { storeMutations } from "@/constants/store-mutations";
+import {
+    settleAllPromises
+} from "@/helpers/layout-helper";
+import {
+    fmgPageValues
+} from "@/router/router-constants/fmgPage-values";
+import {
+    storeMutations
+} from "@/constants/store-mutations";
 import store from "@/store";
 
 export default {
-  name: "vehicle-parts",
+    name: "vehicle-parts",
-  async beforeRouteEnter(to, from, next) {
+    async beforeRouteEnter(to, from, next) {
-    // Call APIs
+        // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    // Settle promises and get results
+        // Settle promises and get results
-    const promiseResultMap = [
+        const promiseResultMap = [{
-      {
+            resultKey: "cmsContent",
-        resultKey: "cmsContent",
+            promise: cmsContentPromise,
-        promise: cmsContentPromise,
+        }, ];
-      },
+        const resultMap = await settleAllPromises(promiseResultMap);
-    ];
+        // Call the "next" function to complete the transition to this page.
-    const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
-    // Call the "next" function to complete the transition to this page.
+            vm.$refs.funnelHeader.initializeComponent(
-    next((vm) => {
+                resultMap.cmsContent.FunnelHeaderWidget
-      vm.$refs.funnelHeader.initializeComponent(
+            );
-        resultMap.cmsContent.FunnelHeaderWidget
+            vm.$refs.vehicleBanner.initializeComponent(
-      );
+                resultMap.cmsContent.VehicleBannerWidget
-      vm.$refs.vehicleBanner.initializeComponent(
+            );
-        resultMap.cmsContent.VehicleBannerWidget
+            vm.$refs.funnelSubHeader.initializeComponent(
-      );
+                resultMap.cmsContent.FunnelSubHeaderWidget
-      vm.$refs.funnelSubHeader.initializeComponent(
+            );
-        resultMap.cmsContent.FunnelSubHeaderWidget
+            vm.$refs.funnelFooter.initializeComponent(
-      );
+                resultMap.cmsContent.FunnelFooterWidget
-      vm.$refs.funnelFooter.initializeComponent(
+            );
-        resultMap.cmsContent.FunnelFooterWidget
-      );
 
-      // Glass Part Question dynamic component
+            // Glass Part Question dynamic component
 
-      Object.keys(vm.$refs)
+            Object.keys(vm.$refs)
-        .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
+                .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-        .forEach((c) =>
+                .forEach((c) =>
-          vm.$refs[c][0].initializeComponent({
+                    vm.$refs[c][0].initializeComponent({
-            ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-            FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
-          })
+                    })
-        );
+                );
 
-      // Set alertData for the page alert. These use props so we don't call
+            // Set alertData for the page alert. These use props so we don't call
-      // initializeComponent here.
+            // initializeComponent here.
-      vm.alertWidgetData = {
+            vm.alertWidgetData = {
-        copy: resultMap.cmsContent.AlertWidget.BodyText,
+                copy: resultMap.cmsContent.AlertWidget.BodyText,
-        headline: resultMap.cmsContent.AlertWidget.HeadlineText,
+                headline: resultMap.cmsContent.AlertWidget.HeadlineText,
-      };
+            };
-    });
-  },
-  data() {
-    return {
-      glassParts: {},
-      alertWidgetData: Object,
-    };
-  },
-  components: {
-    glassPartQuestion,
-    funnelHeader,
-    vehicleBanner,
-    funnelSubHeader,
-    funnelFooter,
-    alert,
-  },
-  computed: {
-    PartsForQuestions() {
-      const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
-      const alreadyPopulatedPartsData =
-        this.$store.getters.lineItems.glassParts === null
-          ? {}
-          : this.$store.getters.lineItems.glassParts;
-
-      // Map API result data, to vehicle-parts data structure
-      const mappedData = partsData.partsOrQuestions.map((g) => {
-        // If the part is already populated, use the value from the store and populate the v-model.
-        Object.keys(alreadyPopulatedPartsData).forEach((key) => {
-          const partNumber = alreadyPopulatedPartsData[key].partNumber;
-          g.parts.forEach((p) => {
-            if (p.partNumber === partNumber) {
-              this.glassParts[g.glassLocation + "-" + g.glassName] = {
-                [g.glassLocation]: [partNumber],
-              };
-            }
-          });
         });
-
+    },
+    data() {
         return {
-          glassName: g.glassName,
+            glassParts: {},
-          glassLocation: g.glassLocation,
+            alertWidgetData: Object,
-          colorAnswers: g.parts.reduce((arr, p) => {
-            arr.push({
-              ColorAnswerText: p.color,
-              FeatureAnswers: [
-                {
-                  FeatureAnswerText:
-                    p.description === "" ? p.color : p.description,
-                  PartNumber: p.partNumber,
-                },
-              ],
-            });
-            return arr;
-          }, []),
         };
-      });
-
-      return mappedData;
     },
-
+    components: {
-    PartsFromApi() {
+        glassPartQuestion,
-      return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
+        funnelHeader,
+        vehicleBanner,
+        funnelSubHeader,
+        funnelFooter,
+        alert,
     },
+    computed: {
+        PartsForQuestions() {
+            const partsData = this.PartsFromApi;
 
-    RefPrefix() {
+            // Map API result data, to vehicle-parts data structure
-      return "partQuestion";
+            const mappedData = partsData.partsOrQuestions.map((g) => {
-    },
-  },
-  methods: {
-    arePagePrerequisitesValid() {
-      // 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 true;
-      }
 
-      return false;
+                return {
-    },
+                    glassName: g.glassName,
-    backButtonAction() {
+                    glassLocation: g.glassLocation,
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+                    colorAnswers: g.parts.reduce((arr, p) => {
-    },
+                        arr.push({
-    forwardButtonAction() {
+                            ColorAnswerText: p.color,
-      const selectedGlassPartNumbers = [];
+                            FeatureAnswers: [{
-      const matchedParts = [];
+                                FeatureAnswerText: p.description === "" ? p.color : p.description,
+                                PartNumber: p.partNumber,
+                            }, ],
+                        });
+                        return arr;
+                    }, []),
+                };
+            });
 
-      // Compile all selected parts from the page.
+            return mappedData;
-      for (let [key, value] of Object.entries(this.glassParts)) {
+        },
-        for (let [glassKey, glassValue] of Object.entries(value)) {
+
-          selectedGlassPartNumbers.push(glassValue[0]);
+        PartsFromApi() {
+            return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
+        },
+
+        RefPrefix() {
+            return "partQuestion";
+        },
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            // 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 true;
+            }
+
+            return false;
+        },
+        backButtonAction() {
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            const selectedGlassPartNumbers = [];
+            const matchedParts = [];
+
+            // Compile all selected parts from the page.
+            for (let [key, value] of Object.entries(this.glassParts)) {
+                for (let [glassKey, glassValue] of Object.entries(value)) {
+                    selectedGlassPartNumbers.push(glassValue[0]);
+                }
+            }
+
+            // 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 currentPart =
+                        this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+                    const isMatched = selectedGlassPartNumbers.some(
+                        (p) => p === currentPart.partNumber
+                    );
+
+                    if (isMatched) {
+                        matchedParts.push(currentPart);
+                    }
+                }
+            }
+
+            // If no parts could be matched, throw an error.
+            if (matchedParts.length === 0) {
+                throw new Error("Could not match any parts to the selected parts");
+            }
+
+            // Save parts to the store.
+            store.commit(storeMutations.UPDATE_PARTS, matchedParts);
+
+            // Navigate to the next page.
+            this.$router.navigateAfterSave(
+                this.navigationScenarios.SELECTED_PARTS,
+                this.$route
+            );
+        },
+        
+        resetDependentState() {
+            // Nothing additional to reset here: The page save is already fully resetting all the line-items on the order
+        },
+
+        LoadInitialPartsData() {
+            const partsData = this.PartsFromApi;
+            const alreadyPopulatedPartsData =
+                this.$store.getters.lineItems.glassParts === null ? {} :
+                this.$store.getters.lineItems.glassParts;
+
+            partsData.partsOrQuestions.map((g) => {
+                // If the part is already populated, use the value from the store and populate the v-model.
+                Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+                    const partNumber = alreadyPopulatedPartsData[key].partNumber;
+                    g.parts.forEach((p) => {
+                        if (p.partNumber === partNumber) {
+                            this.glassParts[g.glassLocation + "-" + g.glassName] = {
+                                [g.glassLocation]: [partNumber],
+                            };
+                        }
+                    });
+                });
+            });
         }
-      }
-
-      // 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 currentPart =
-            this.PartsFromApi.partsOrQuestions[key].parts[partKey];
-          const isMatched = selectedGlassPartNumbers.some(
-            (p) => p === currentPart.partNumber
-          );
-
-          if (isMatched) {
-            matchedParts.push(currentPart);
-          }
-        }
-      }
-
-      // If no parts could be matched, throw an error.
-      if (matchedParts.length === 0) {
-        throw new Error("Could not match any parts to the selected parts");
-      }
-
-      // Save parts to the store.
-      store.commit(storeMutations.UPDATE_PARTS, matchedParts);
-
-      // Navigate to the next page.
-      this.$router.navigateAfterSave(
-        this.navigationScenarios.SELECTED_PARTS,
-        this.$route
-      );
     },
-  },
+    mounted(){
+      this.LoadInitialPartsData();
+    }
 };
 </script>

src/layouts/vehicle-style/vehicle-style.vue

@@ -27,6 +27,7 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
+import { storeMutations } from "@/constants/store-mutations";
 
 export default {
   name: "vehicle-style",
@@ -101,6 +102,9 @@ export default {
       // Invokes
       store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
       store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
+      store.commit(storeMutations.UPDATE_IS_REPAIR, null);
+      store.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
+      store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
     },
   },
 

src/layouts/vehicle-year/vehicle-year.vue

@@ -93,6 +93,7 @@ export default {
       store.commit(storeMutations.UPDATE_STYLE, null);
       store.commit(storeMutations.UPDATE_CAR_ID, null);
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+  
 
       // Invokes
       store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);

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

@@ -61,19 +61,14 @@ const routingTable = [
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
         destinationFmgPageValue: fmgPageValues.REVEAL,
       },
-    ],
-  },
-  {
-    fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-    maps: [
-      {
-        scenario: navigationScenarios.CLICKED_BACK,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
-      },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS,
         destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS,
       },
+      {
+        scenario: navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS,
+        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
+      },
     ],
   },
   {
@@ -89,19 +84,6 @@ const routingTable = [
       },
     ],
   },
-  {
-    fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-    maps: [
-      {
-        scenario: navigationScenarios.CLICKED_BACK,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
-      },
-      {
-        scenario: navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS,
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
-      },
-    ],
-  },
 ];
 
 export { routingTable };

src/styles/common-error-styles.scss

@@ -44,6 +44,12 @@
         border: 1px solid transparent;
       }
     }
+    select {
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right 0.75rem center;
+      background-size: 16px 12px;
+    }
   }
 }
 

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

@@ -146,6 +146,7 @@ export default {
     &:checked + label {
       background: $blue-100;
       box-shadow: 0 0 0 1px $blue;
+      outline: none;
       z-index: 2;
     }
     &:checked + label p:first-child {

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

@@ -2,7 +2,11 @@
   <div :class="'col' + colLength">
     <div
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+      :class="[
+        isWide ? 'horizontal' : '',
+        errors.length > 0 ? 'has-error' : '',
+        hasError ? 'has-error' : '',
+      ]"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -18,7 +22,8 @@
       <label
         :for="buttonID"
         class="d-flex w-100 align-items-center px-2 h-100"
-        :class="getLabelClasses" tabindex="-1"
+        :class="getLabelClasses"
+        tabindex="-1"
       >
         <img
           :id="buttonImageId"
@@ -31,10 +36,13 @@
           class="small order-3"
           :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
         >
-          {{buttonLabel}}
+          {{ buttonLabel }}
         </p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
+        <p
-          {{buttonLabelSubCopy}}
+          v-if="buttonLabelSubCopy && !isWide"
+          class="fs-7 m-0 order-4 sub-copy"
+        >
+          {{ buttonLabelSubCopy }}
         </p>
         <div v-if="isWide" class="order-2">
           <p class="m-0 small">{{ buttonLabel }}</p>
@@ -70,18 +78,30 @@ export default {
     colLength: String,
     validationRules: String,
     selectedValues: [Array, String],
+    modelValue: Object,
     hasError: Boolean,
   },
-  data(){
+  data() {
     return {
       checkValue: [Boolean, String],
     }
   },
-  created(){
+  created() {
-    if(Array.isArray(this.selectedValues)){
+    if (Array.isArray(this.selectedValues)) {
-      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
+      this.checkValue = this.isMultiSelect
+        ? this.selectedValues.includes(this.value)
+        : this.selectedValues[0];
     }
   },
+  watch: {
+    // Changing this will impact pre-selection data loads on vehicle-parts.
+    // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
+    modelValue(newVal) {
+      if (newVal !== undefined) {
+        this.checkValue = newVal.value;
+      }
+    },
+  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {
@@ -96,14 +116,18 @@ export default {
     },
   },
   methods: {
-    handleCheckChange(newValue, oldValue){
+    handleCheckChange(newValue, oldValue) {
-      const isInitialization = typeof(oldValue) === 'function';
+      const isInitialization = typeof oldValue === "function";
       if (!isInitialization) {
-        const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
+        const emitEvent = {
-        this.$emit('isCheckedChanged', emitEvent);
+          checkValue: this.checkValue,
-        this.$emit('update:modelValue', emitEvent);
+          value: this.value.toString(),
+          buttonId: this.buttonID.toString(),
+        };
+        this.$emit("isCheckedChanged", emitEvent);
+        this.$emit("update:modelValue", emitEvent);
       }
-    }
+    },
   },
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
@@ -133,10 +157,12 @@ export default {
 <style lang="scss">
 .list-card {
   border: 1px solid $gray-500;
+
   &.invalid {
     //Red border if invalid
     border: 1px solid $red;
   }
+
   img {
     // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
     height: auto;
@@ -144,50 +170,61 @@ export default {
     margin-bottom: 3rem;
     max-width: 100%;
   }
+
   &:hover {
     @include media-breakpoint-up(sm) {
       box-shadow: 0px 0px 0px 4px $blue-300;
       border: 1px solid transparent;
     }
   }
+
   input[type="checkbox"],
   input[type="radio"] {
     opacity: 0;
     width: 0;
     height: 0;
+
     + label {
       display: block;
       position: relative;
+
       &:hover {
         cursor: pointer;
       }
+
       p {
         color: $gray-600;
         text-align: center;
+
         &.sub-copy {
           color: $gray-550;
         }
       }
     }
+
     &:focus + label {
       box-shadow: 0 0 0 2.5px $blue;
       border-radius: 0.5rem;
     }
+
     &:checked + label {
       background: $blue-100;
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
+
     &:checked + label {
       p {
         color: $black;
         font-weight: 500;
       }
+
       .sub-copy {
         color: $gray-600;
         font-weight: 400;
       }
     }
+
     + label::before {
       content: "";
       position: absolute;
@@ -203,15 +240,19 @@ export default {
       flex-shrink: 0;
       color: $gray-600;
     }
+
     + label.checkboxTop::before {
       margin: -1.25rem 0.5rem 0 0 !important;
     }
+
     + label.checkboxTop::after {
       margin: -1.5rem 0.5rem 0 0 !important;
     }
+
     &:checked + label::before {
       background: $blue;
     }
+
     &:checked + label::after {
       content: "";
       position: absolute;
@@ -223,26 +264,31 @@ export default {
       transform: rotate(-45deg);
     }
   }
+
   input[type="radio"] {
     + label::before {
       content: "";
       display: none;
     }
+
     + label::after {
       content: "";
       display: none;
     }
+
     + label {
       img {
         margin-bottom: 0;
       }
     }
   }
+
   &.horizontal {
     img {
       margin-bottom: 0;
       width: 5.5rem;
     }
+
     input[type="checkbox"],
     input[type="radio"] {
       + label::before {
@@ -251,30 +297,37 @@ export default {
         margin: 0 0.5rem 0 0;
         order: 1;
       }
+
       &:checked + label::after {
         content: "";
         margin: -0.25rem 0 0 0;
         left: 0.875rem;
       }
+
       &:checked + label {
         p {
           color: $black;
           font-weight: 500;
         }
+
         .sub-copy {
           color: $gray-600;
           font-weight: 400;
         }
       }
+
       + label {
         min-height: 48px;
         color: $gray-600;
+
         img {
           margin-bottom: 0;
         }
+
         p {
           color: $gray-600;
           text-align: left;
+
           &.sub-copy {
             color: $gray-550;
           }
@@ -283,4 +336,4 @@ export default {
     }
   }
 }
-</style>
+</style>