Merge pull request #271 from Safelite/feature/CSR-335

Feature/csr 335

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,200 @@ 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
+            );
+        },
+
+        // Nothing here to reset, the previous pages will setting parts correctly for here.
+        resetDependentState() {
+
+        },
+
+        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/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,17 +78,29 @@ export default {
     colLength: String,
     validationRules: String,
     selectedValues: [Array, String],
+    modelValue: Object,
     hasError: Boolean,
   },
-  data(){
+  data() {
     return {
       checkValue: Boolean,
+    };
+  },
+  created() {
+    if (Array.isArray(this.selectedValues)) {
+      this.checkValue = this.isMultiSelect
+        ? this.selectedValues.includes(this.value)
+        : this.selectedValues[0];
     }
   },
-  created(){
+  watch: {
-    if(Array.isArray(this.selectedValues)){
+    // Changing this will impact pre-selection data loads on vehicle-parts.
-      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
+    // 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() {
@@ -96,23 +116,26 @@ 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";
     const {
-        value: inputValue,
+      value: inputValue,
-        handleChange,
+      handleChange,
-        errors,
+      errors,
-    } = useField(props.groupName, props.validationRules,
+    } = useField(props.groupName, props.validationRules, {
-    {
       type: inputType,
       checkedValue: props.value,
     });
@@ -127,10 +150,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;
@@ -138,50 +163,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;
@@ -197,15 +233,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;
@@ -217,26 +257,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 {
@@ -245,30 +290,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;
           }