From ab626af82f63037e1e421c5e01567bae87716ab8 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Wed, 2 Mar 2022 10:59:51 -0500
Subject: [PATCH 1/4] Populate already selected options

---
 .../button-question/button-question.vue       |  2 +-
 .../glass-part-question.vue                   | 26 ++++++++++++++++---
 src/layouts/vehicle-parts/vehicle-parts.vue   | 14 ++++++++++
 src/store/index.js                            |  4 +--
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index eb199cdf4..f2f87931e 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,7 +1,7 @@
 <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
   <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
-    <div v-if="questionText" class="mt-5 mb-4 d-flex">
+    <div v-if="questionText" :class="[this.buttonType === 'radio' ? ['mt-2', 'mb-0'] : ['mt-5', 'mb-4'], 'd-flex']">
       <span class="fs-5 fw-bold w-100" :class="this.buttonType === 'radio' ? 'text-start' : 'text-center'">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
index 8e159aebe..c7b035fdd 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@@ -27,7 +27,6 @@
         </div>
     </transition>
 </div>
-
 </template>
 
 <script>
@@ -59,6 +58,27 @@ export default {
         colorAnswers: Array,
         modelValue: Object
     },
+    mounted() {
+        if (this.modelValue !== undefined) {
+            // Populate button-question model-value if parts data already exists in VueX
+            const alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts;
+
+            Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+                const partNumber = alreadyPopulatedPartsData[key].partNumber;
+                const tintColor = alreadyPopulatedPartsData[key].color;
+
+                Object.keys(this.modelValue).forEach((key) => {
+                    if (this.modelValue[key][0] === partNumber) {
+                        this.selectedTint[tintColor] = {
+                            buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+                            checkValue: '',
+                            value: ''
+                        };
+                    }
+                });
+            });
+        }
+    },
     components: {
         listCard,
         buttonQuestion,
@@ -67,7 +87,7 @@ export default {
         colorQuestionText() {
             return getCustomTransformValue(this.glassColorQuestion, `${this.glassLocation} ${this.glassName}`);
         },
-        
+
         selectedPart: {
             get: function () {
                 return this.modelValue;
@@ -98,7 +118,7 @@ export default {
 
                 return arr;
             }, {});
-            
+
             return tintMapByColor;
         }
     },
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index aaa7f8620..c12aba5b4 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -110,9 +110,23 @@ export default {
     computed: {
         PartsForQuestions() {
             const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
+            const alreadyPopulatedPartsData = 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]
+                            }
+                        }
+                    });
+                });
+
                 return {
                     glassName: g.glassName,
                     glassLocation: g.glassLocation,
diff --git a/src/store/index.js b/src/store/index.js
index 41daf3955..eaa4e4f67 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -26,8 +26,8 @@ export const state = {
       glassToReplace: null,
     },
     lineItems:{
-      glassParts: null,
-      otherParts: null
+      glassParts: {},
+      otherParts: {}
     }
   },
   applicationUser: {

From a38bc4d366a8e827863799c7cb549b08611165a1 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Wed, 2 Mar 2022 14:10:49 -0500
Subject: [PATCH 2/4] default value

---
 src/ux-components/radio/radio.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 17fb7a880..cccc0d91d 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -42,7 +42,7 @@ export default {
   },
   data() {
     return {
-      checkValue: Boolean,
+      checkValue: false,
     };
   },
   created() {

From 0b445f176b25aff6816156b0ca4756592de0970c Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Wed, 2 Mar 2022 16:24:37 -0500
Subject: [PATCH 3/4] multiple defect fixes

---
 src/constants/dynamictext-mapper.js           |  2 +-
 src/constants/store-actions.js                |  8 ++--
 src/layouts/form-test/form-test.vue           |  2 +-
 src/layouts/part-questions/part-questions.vue | 41 ++++++++++++-------
 .../vehicle-damage/vehicle-damage.spec.js     |  2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 src/layouts/vehicle-make/vehicle-make.spec.js |  4 +-
 src/layouts/vehicle-make/vehicle-make.vue     |  4 +-
 .../vehicle-model/vehicle-model.spec.js       |  4 +-
 src/layouts/vehicle-model/vehicle-model.vue   |  4 +-
 .../glass-part-question.vue                   | 32 +++++++++------
 src/layouts/vehicle-parts/vehicle-parts.vue   | 11 +++--
 src/layouts/vehicle-style/vehicle-style.vue   |  4 +-
 src/layouts/vehicle-year/vehicle-year.spec.js |  4 +-
 src/layouts/vehicle-year/vehicle-year.vue     |  4 +-
 src/store/index.js                            |  5 +--
 src/ux-components/radio/radio.vue             |  4 +-
 17 files changed, 80 insertions(+), 57 deletions(-)

diff --git a/src/constants/dynamictext-mapper.js b/src/constants/dynamictext-mapper.js
index b450d0561..d47ef9d02 100644
--- a/src/constants/dynamictext-mapper.js
+++ b/src/constants/dynamictext-mapper.js
@@ -10,7 +10,7 @@ const customMappings = {
         { key: 'Rear Stationary', transformedValue: 'rear window' },
         { key: 'Rear Slider', transformedValue: 'rear window' },
         { key: 'Driver Front', transformedValue: 'driver side front door' },
-        { key: 'Driver Back ', transformedValue: 'driver side back door' },
+        { key: 'Driver Back', transformedValue: 'driver side back door' },
         { key: 'Driver Vent', transformedValue: 'driver side vent glass' },
         { key: 'Driver Quarter', transformedValue: 'driver side quarter panel' },
         { key: 'Driver SideDoor', transformedValue: 'driver side sliding door' },
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 0717a3498..e83b44096 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -14,10 +14,10 @@ const storeActions = {
   GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
 
   // DEPENDENCY MUTATIONS
-  RESET_VEHICLE_STATE: "resetVehicleAndDependencies",
-  RESET_DAMAGE_STATE: "resetDamageAndDependencies",
-  RESET_REGISTRATION_STATE: "resetRegistrationAndDependencies",
-  RESET_PARTS_STATE: "resetPartsAndDependencies",
+  RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",
+  RESET_DAMAGE_STATE_AND_DEPENDENCIES: "resetDamageAndDependencies",
+  RESET_REGISTRATION_STATE_AND_DEPENDENCIES: "resetRegistrationAndDependencies",
+  RESET_PARTS_STATE_AND_DEPENDENCIES: "resetPartsAndDependencies",
 };
 
 export { storeActions };
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 774d863a8..7f2c736b2 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -144,7 +144,7 @@ export default {
     },
     resetDependentState() {
       // Invokes
-      store.dispatch(storeActions.RESET_PARTS_STATE);
+      store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     onSubmit(values) {
       window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index 75cf54527..c1b9142bd 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
-        <funnelHeader ref="funnelHeader" />
-        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
-        <funnelSubHeader ref="funnelSubHeader" />
-        <h1>Part Questions Page Placeholder</h1>
-        <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
-    </div>
+<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+    <funnelHeader ref="funnelHeader" />
+    <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
+    <funnelSubHeader ref="funnelSubHeader" />
+    <h1>Part Questions Page Placeholder</h1>
+    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
+</div>
 </template>
 
 <script>
@@ -16,11 +16,22 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 
 // Supporting Files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import {storeMutations} from "@/constants/store-mutations";
-import {storeActions} from "@/constants/store-actions";
+import {
+    fetchCmsContentForPage
+} from "@/helpers/cms-content-helper";
+import {
+    settleAllPromises
+} from "@/helpers/layout-helper";
+import {
+    storeMutations
+} from "@/constants/store-mutations";
+import {
+    storeActions
+} from "@/constants/store-actions";
 import store from "@/store";
+import {
+    fmgPageValues
+} from "@/router/router-constants/fmgPage-values";
 
 export default {
     name: "part-questions",
@@ -61,7 +72,10 @@ export default {
             );
         },
         arePagePrerequisitesValid() {
-            return store.getters.lineItems.glassParts !== null;
+            if (Object.keys(store.getters.pageData(fmgPageValues.PART_QUESTIONS)).length !== 0) {
+                return true;
+            }
+            return false;
         },
         resetDependentState() {
             // Set
@@ -71,8 +85,7 @@ export default {
             store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
         },
     },
-    data() {
-    },
+    data() {},
     components: {
         funnelHeader,
         vehicleBanner,
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 3b5913e56..39ee4beda 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -591,7 +591,7 @@ describe("vehicle-damage.vue", () => {
     wrapper.vm.resetDependentState();
 
     //Assert
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES)
 
   });
 });
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 5a9eca92f..7a4f3e6be 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -121,7 +121,7 @@ export default {
       return store.getters.vehicle.carId !== null;
     },
     resetDependentState() {
-      store.dispatch(storeActions.RESET_PARTS_STATE);
+      store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     backButtonAction() {
       // route to move backwards
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index ab04bb1d2..d00b9240f 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -223,8 +223,8 @@ describe("vehicle-make.vue", () => {
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
 
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES)
 
   });
 });
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 41c19a64c..262bee6fd 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -94,8 +94,8 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
 
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_STATE);
-      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
     },
   },
 
diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js
index 4e40a89cb..53710aa65 100644
--- a/src/layouts/vehicle-model/vehicle-model.spec.js
+++ b/src/layouts/vehicle-model/vehicle-model.spec.js
@@ -208,8 +208,8 @@ describe("vehicle-model.vue", () => {
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
 
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES)
 
   });
 });
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index f57429c8b..97d017e34 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -94,8 +94,8 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
 
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_STATE);
-      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
     },
   },
 
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
index c7b035fdd..fcf27d3ba 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@@ -6,6 +6,7 @@
 </div>
 
 <div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
+
     <div class="row my-2">
         <div class="col">
             <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
@@ -18,9 +19,10 @@
     </div>
     <transition name="fade" mode="out-in">
         <div v-if="
-        selectedTint[name] != undefined &&
-        selectedTint[name].buttonId === `${glassLocation}-${glassName}-${name}`
-      " class="row my-2" aria-live="polite">
+          selectedTint[name] != undefined &&
+          selectedTint[name].buttonId ===
+            `${glassLocation}-${glassName}-${name}`
+        " class="row my-2" aria-live="polite">
             <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>
@@ -47,8 +49,8 @@ export default {
     inheritAttrs: false,
     data() {
         return {
-            glassColorQuestion: '',
-            glassFeatureQuestion: '',
+            glassColorQuestion: "",
+            glassFeatureQuestion: "",
             selectedTint: {}, // v-model for the list card selections
         };
     },
@@ -56,12 +58,13 @@ export default {
         glassName: String,
         glassLocation: String,
         colorAnswers: Array,
-        modelValue: Object
+        modelValue: Object,
     },
     mounted() {
         if (this.modelValue !== undefined) {
             // Populate button-question model-value if parts data already exists in VueX
-            const alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts;
+            const alreadyPopulatedPartsData =
+                this.$store.getters.lineItems.glassParts;
 
             Object.keys(alreadyPopulatedPartsData).forEach((key) => {
                 const partNumber = alreadyPopulatedPartsData[key].partNumber;
@@ -71,8 +74,8 @@ export default {
                     if (this.modelValue[key][0] === partNumber) {
                         this.selectedTint[tintColor] = {
                             buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
-                            checkValue: '',
-                            value: ''
+                            checkValue: "",
+                            value: "",
                         };
                     }
                 });
@@ -85,7 +88,10 @@ export default {
     },
     computed: {
         colorQuestionText() {
-            return getCustomTransformValue(this.glassColorQuestion, `${this.glassLocation} ${this.glassName}`);
+            return getCustomTransformValue(
+                this.glassColorQuestion,
+                `${this.glassLocation} ${this.glassName}`
+            );
         },
 
         selectedPart: {
@@ -94,7 +100,7 @@ export default {
             },
             set: function (newValue) {
                 this.$emit("update:modelValue", newValue);
-            }
+            },
         },
 
         // Creates a map of the feature list data in the correct Name/Value
@@ -120,7 +126,7 @@ export default {
             }, {});
 
             return tintMapByColor;
-        }
+        },
     },
     methods: {
         initializeComponent(cmsContent) {
@@ -144,7 +150,7 @@ export default {
         ResetTintAndPartSelections() {
             this.selectedTint = {};
             this.selectedPart = {};
-        }
+        },
     },
 };
 </script>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index c12aba5b4..0ccfd9c4e 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -17,7 +17,7 @@
             <hr v-if="i > 0" />
         </div>
 
-        <glassPartQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
+        <glassPartQuestion :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
     </div>
     <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
 </div>
@@ -75,7 +75,7 @@ export default {
             // Glass Part Question dynamic component
 
             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) =>
                     vm.$refs[c][0].initializeComponent({
                         ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
@@ -95,7 +95,6 @@ export default {
     data() {
         return {
             glassParts: {},
-            refPrefix: "partQuestion",
             alertWidgetData: Object,
         };
     },
@@ -110,7 +109,7 @@ export default {
     computed: {
         PartsForQuestions() {
             const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
-            const alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts;
+            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 => {
@@ -148,6 +147,10 @@ export default {
 
         PartsFromApi() {
             return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
+        },
+
+        RefPrefix() {
+            return 'partQuestion';
         }
 
     },
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 11653e25d..d7b37b4b0 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -99,8 +99,8 @@ export default {
     },
     resetDependentState() {
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_STATE);
-      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
     },
   },
 
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index c04d61b17..5e6d9bf33 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -163,8 +163,8 @@ describe("vehicle-year.vue", () => {
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
 
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES)
 
   });
 });
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index d73ac46f9..460c8ced4 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -95,8 +95,8 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
 
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_STATE);
-      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
     }
   },
   components: {
diff --git a/src/store/index.js b/src/store/index.js
index eaa4e4f67..4b0e06eb4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -122,9 +122,8 @@ export const mutations = {
 
   },
   resetPartsState(state) {
-    state.glassParts = null;
-    state.childParts = null;
-    state.otherParts = null;
+    state.order.lineItems.glassParts = null;
+    state.order.lineItems.otherParts = null;
   }
 }
 
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index cccc0d91d..84267fb01 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -42,12 +42,14 @@ export default {
   },
   data() {
     return {
-      checkValue: false,
+      checkValue: Boolean,
     };
   },
   created() {
     if (this.selectedValues) {
       this.checkValue = this.selectedValues[0] === this.value;
+    }else{
+      this.checkValue = false;
     }
   },
   methods: {

From bcc0114c52c914f98e8d1ec72a74befe7ef9fe55 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Thu, 3 Mar 2022 11:06:53 -0500
Subject: [PATCH 4/4] defect updates

---
 src/layouts/vehicle-damage/vehicle-damage.vue |   2 +-
 .../glass-part-question.spec.js               |  21 +-
 .../glass-part-question.vue                   |  19 +
 .../vehicle-parts/vehicle-parts.spec.js       |  78 ++--
 src/layouts/vehicle-parts/vehicle-parts.vue   | 363 +++++++++---------
 src/ux-components/radio/radio.spec.js         |   2 +-
 6 files changed, 279 insertions(+), 206 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 7a4f3e6be..fe567ef55 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -119,7 +119,7 @@ export default {
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
-    },
+  },
     resetDependentState() {
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js
index ec687023c..a6ef4e586 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js
@@ -4,6 +4,9 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 import store from "@/store";
 
 jest.mock("@/store", () => { return {}; }, { virtual: true });
+store.getters = {
+    pageData: jest.fn()
+};
 
 const featureListData = {
     colorAnswersProp: [
@@ -93,9 +96,9 @@ describe("glass-part-question.vue", () => {
 
         //Act
         await wrapper.vm.$nextTick();
-        wrapper.setData({selectedTint:  {"Rear-Stationary" : 'Green Tint' } });
+        wrapper.setData({ selectedTint: { "Rear-Stationary": 'Green Tint' } });
 
-        expect(wrapper.vm.selectedTint).toStrictEqual({"Rear-Stationary": 'Green Tint'});
+        expect(wrapper.vm.selectedTint).toStrictEqual({ "Rear-Stationary": 'Green Tint' });
 
         await wrapper.vm.ResetTintAndPartSelections();
         expect(wrapper.vm.selectedTint).toStrictEqual({});
@@ -107,7 +110,19 @@ describe("glass-part-question.vue", () => {
 function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
 
     //Mock store
-    const mountOptions = getMountOptions({});
+    store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: {}});
+    store.getters.lineItems = { glassParts: {} }
+
+    const mountOptions = getMountOptions({
+        store: {
+            getters: store.getters,
+        },
+        route: {
+            query: {
+                fmgPage: 'vehicle-parts',
+            }
+        },
+    });
 
     mountOptions.propsData = {
         glassName: glassNameProp,
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
index fcf27d3ba..7e8639ee0 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@@ -147,10 +147,29 @@ export default {
         },
 
         // 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>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js
index 5d22a458c..74196c524 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.spec.js
+++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js
@@ -8,13 +8,10 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
-import baseMixin from "@/mixins/base-mixin";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
-import { storeActions } from "@/constants/store-actions";
-import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
 
 // Mock our module for promises.
@@ -70,33 +67,8 @@ describe("vehicle-parts.vue", () => {
 
     test("Page header is initialized with api data", async (done) => {
         //Arrange
-        store.getters.pageData.mockReturnValueOnce({
-            partsOrQuestions: [
-                {
-                    glassName: "Stationary",
-                    glassLocation: "Rear",
-                    parts: [
-                        {
-                            partNumber: "DB12209GTYN",
-                            description: "heated glass, solar, 1 hole",
-                            color: "Green Tint",
-                            requiresRecalibration: false,
-                            requiresCapabilityQuestions: false,
-                            childParts: null
-                        },
-                        {
-                            partNumber: "DB12209YPYNOEM",
-                            description: "heated glass, solar, 1 hole",
-                            color: "Gray Tint Privacy",
-                            requiresRecalibration: false,
-                            requiresCapabilityQuestions: false,
-                            childParts: null
-                        }
-                    ],
-                    partQuestions: null
-                }
-            ]
-        });
+        store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
 
         const pageHeaderWidgetHeaderText = "Select Parts";
         const { wrapper, apiPromise } = setupMocks(
@@ -117,6 +89,7 @@ describe("vehicle-parts.vue", () => {
                 }
             });
 
+
         //Act
         vehicleParts.beforeRouteEnter.call(wrapper.vm,
             { query: { fmgPage: "vehicle-parts" } },
@@ -139,6 +112,7 @@ describe("vehicle-parts.vue", () => {
         };
 
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
 
         const { wrapper, apiPromise } = setupMocks(
             {
@@ -181,6 +155,7 @@ describe("vehicle-parts.vue", () => {
         };
 
         store.getters.pageData.mockReturnValue(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
 
         const { wrapper, apiPromise } = setupMocks(
             {
@@ -219,6 +194,8 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
@@ -250,10 +227,48 @@ describe("vehicle-parts.vue", () => {
         expect(arePagePrerequisitesValid).toBe(true);
     });
 
+    test("Initial data, should populate this.glassParts", async () => {
+
+        //Arrange
+        store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: { 0: { partNumber: 'DB12209YPYNOEM'} } }
+
+        const { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                router: {
+                    navigateAfterSave: jest.fn()
+                },
+                route: {
+                    query: {
+                        fmgPage: 'vehicle-parts',
+                    }
+                },
+                store: {
+                    getters: store.getters
+                },
+            }
+        });
+
+        //Act
+        vehicleParts.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-parts" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        await nextTick();
+
+        //Assert
+        expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } });
+    });
+
     test("BackButtonAction triggers a router.navigate change", async () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
@@ -290,6 +305,9 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+
+
         store.commit = jest.fn();
         
         const { wrapper } = setupMocks({
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 0ccfd9c4e..7c0efeda7 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,26 +1,42 @@
 <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="col">
-                <alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
-            </div>
+      <div class="row">
+        <div class="col">
+          <alert
+            class="rounded border-0 shadow-sm"
+            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) -->
-        <div class="container-fluid">
-            <hr v-if="i > 0" />
-        </div>
+      <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+      <div class="container-fluid">
+        <hr v-if="i > 0" />
+      </div>
 
-        <glassPartQuestion :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
+      <glassPartQuestion
+        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+        v-model="glassParts[item.glassLocation + '-' + item.glassName]"
+        :glassLocation="item.glassLocation"
+        :glassName="item.glassName"
+        :colorAnswers="item.colorAnswers"
+      />
     </div>
-    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
-</div>
+    <funnelFooter
+      ref="funnelFooter"
+      @back-clicked="backButtonAction"
+      @ForwardClicked="forwardButtonAction"
+    />
+  </div>
 </template>
 
 <script>
@@ -32,178 +48,183 @@ 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 {
-    settleAllPromises
-} from "@/helpers/layout-helper";
-import {
-    fmgPageValues
-} from "@/router/router-constants/fmgPage-values";
-import {
-    storeMutations
-} from "@/constants/store-mutations";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+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",
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-        // Settle promises and get results
-        const promiseResultMap = [{
-            resultKey: "cmsContent",
-            promise: cmsContentPromise,
-        }, ];
-        const resultMap = await settleAllPromises(promiseResultMap);
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.$refs.funnelHeader.initializeComponent(
-                resultMap.cmsContent.FunnelHeaderWidget
-            );
-            vm.$refs.vehicleBanner.initializeComponent(
-                resultMap.cmsContent.VehicleBannerWidget
-            );
-            vm.$refs.funnelSubHeader.initializeComponent(
-                resultMap.cmsContent.FunnelSubHeaderWidget
-            );
-            vm.$refs.funnelFooter.initializeComponent(
-                resultMap.cmsContent.FunnelFooterWidget
-            );
+  name: "vehicle-parts",
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
+    const resultMap = await settleAllPromises(promiseResultMap);
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.$refs.funnelHeader.initializeComponent(
+        resultMap.cmsContent.FunnelHeaderWidget
+      );
+      vm.$refs.vehicleBanner.initializeComponent(
+        resultMap.cmsContent.VehicleBannerWidget
+      );
+      vm.$refs.funnelSubHeader.initializeComponent(
+        resultMap.cmsContent.FunnelSubHeaderWidget
+      );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
 
-            // Glass Part Question dynamic component
+      // Glass Part Question dynamic component
 
-            Object.keys(vm.$refs)
-                .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-                .forEach((c) =>
-                    vm.$refs[c][0].initializeComponent({
-                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
-                    })
-                );
+      Object.keys(vm.$refs)
+        .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
+        .forEach((c) =>
+          vm.$refs[c][0].initializeComponent({
+            ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+            FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+          })
+        );
 
-            // Set alertData for the page alert. These use props so we don't call
-            // initializeComponent here.
-            vm.alertWidgetData = {
-                copy: resultMap.cmsContent.AlertWidget.BodyText,
-                headline: resultMap.cmsContent.AlertWidget.HeadlineText
-            };
+      // Set alertData for the page alert. These use props so we don't call
+      // initializeComponent here.
+      vm.alertWidgetData = {
+        copy: resultMap.cmsContent.AlertWidget.BodyText,
+        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 {
-            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]
-                            }
-                        }
-                    });
-                });
-
-                return {
-                    glassName: g.glassName,
-                    glassLocation: g.glassLocation,
-                    colorAnswers: g.parts.reduce((arr, p) => {
-                        arr.push({
-                            ColorAnswerText: p.color,
-                            FeatureAnswers: [{
-                                FeatureAnswerText: p.description === '' ? p.color : p.description,
-                                PartNumber: p.partNumber
-                            }]
-                        });
-                        return arr;
-                    }, [])
-                }
+          glassName: g.glassName,
+          glassLocation: g.glassLocation,
+          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;
-        },
-
-        PartsFromApi() {
-            return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
-        },
-
-        RefPrefix() {
-            return 'partQuestion';
-        }
-
+      return mappedData;
     },
-    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);
-        }
 
+    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
+      );
+    },
+  },
 };
 </script>
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index 113d534c6..c815b1ace 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@@ -77,7 +77,7 @@ describe("radio.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {