From e6e9c92f2fdd73b22dad069411deba0eca532887 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 1 Mar 2022 09:16:18 -0500
Subject: [PATCH 01/48] CSR-319: implement full validation on form-test

---
 .../button-question/button-question.vue       |  2 +
 src/layouts/form-test/form-test.vue           | 68 ++++++++++++++-----
 .../damage-location-question.vue              |  1 -
 .../replace-options-question.vue              | 49 +++++++------
 .../side-door-options/side-door-options.vue   | 46 +++++++++++--
 src/layouts/vehicle-damage/vehicle-damage.vue | 10 +++
 .../windshield-chip-count-question.vue        | 21 +++++-
 .../windshield-damage-type-question.vue       | 42 +++++++++---
 .../windshield-options/windshield-options.vue | 37 +++++++++-
 .../list-button-horizontal.vue                | 33 +++++----
 src/ux-components/list-button/list-button.vue | 34 ++++++----
 src/ux-components/list-card/list-card.vue     | 44 +++++++++---
 12 files changed, 297 insertions(+), 90 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index c828f9ff9..f7b11e3b3 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -122,6 +122,7 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
+      console.log('BQ handleCheckedChanged, val: ', val)
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         if(Array.isArray(this.selectedValues)) {
@@ -132,6 +133,7 @@ export default {
       } else {
         this.selectedValues = [val.value];
       }
+      console.log('BQ handleCheckedChanged, this.selectedValues is now: ', this.selectedValues)
     },
   },
   components: {
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index f12abb261..a06faf10d 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -15,23 +15,31 @@
               groupName="DamageLocationQuestion"
             />
             <windshieldOptions
-              ref="windshieldOptions"
-              :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
-              :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              ref="windshieldOptions" 
+              v-model="selectedWindshieldOptions" 
+              :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              :selectedDamageLocations="selectedDamageLocations"
             />
             <alert
               class="my-3"
-              v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              v-if="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
               alertClass="alert-danger"
               alertHeadline="You'll need to schedule separate appointments"
-              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians."
+              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
               :isDismissible="false"
             />
+            <sideDoorOptions 
+              ref="sideDoorOptions"
+              groupName="SideDoorSideQuestion"
+              v-model="sideDoorOptionsData"
+              :selectedDamageLocations="selectedDamageLocations"
+            />
             <replaceOptionsQuestion
-              ref="driverSideOptions"
-              isAvailable
-              v-model="driverSideOptionsData"
-              groupName="DriverSideReplaceOptionsQuestion"
+              ref="backGlassOptions"
+              :isAvailable="isRearWindowDamageLocation"
+              v-model="selectedRearReplaceOptions"
+              groupName="BackGlassReplaceOptionsQuestion"
+              validationRules="replace-options-required"
             />
             <funnel-footer
               ref="funnelFooter"
@@ -60,19 +68,25 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 import alert from "@/ux-components/alert/alert";
 
-import { Form } from 'vee-validate';
-
-
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
+import { Form, defineRule } from "vee-validate";
 
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select rear window type";
+    }
+    return true;
+});
 
 export default {
   name: "form-test",
@@ -110,12 +124,19 @@ export default {
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      vm.$refs.driverSideOptions.initializeComponent(
-        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
-      );
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.sideDoorOptions.initializeComponent(
+        resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+      );
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
+      );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
@@ -124,14 +145,29 @@ export default {
   data(){
     return {
       selectedDamageLocations: [],
-      driverSideOptionsData: [],
+      sideDoorOptionsData: {
+        selectedDoorSides: [],
+        selectedDriverSideReplacOptions: [],
+        selectedPassengerSideReplaceOptions: []
+      },
+      selectedWindshieldOptions: [],
+      selectedRearReplaceOptions: [],
     }
   },
+  computed: {
+    isRearWindowDamageLocation() {
+      return this.selectedDamageLocations.some(selectedDamages => 
+        {
+          return selectedDamages.toUpperCase() === "REARWINDOW";
+        });
+    },
+  },
   components: {
     Form,
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    sideDoorOptions,
     damageLocationQuestion,
     replaceOptionsQuestion,
     funnelFooter,
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 89b3244e3..07f6612ae 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -9,7 +9,6 @@
             v-model="selectedValues"
             validationRules="damage-location-required"
         />
-        
     </div>
 </template>
 
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 978cf6b41..bc42364d2 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXXXXXXXXXXXXXX' : ''" aria-live="polite">
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -9,7 +9,7 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
-                validationRules="replace-options-required"
+                :validationRules="validationRules"
             />
         </div>
     </transition>
@@ -18,15 +18,6 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
-import { defineRule } from "vee-validate";
-
-// DEFINE VALIDATION RULES
-defineRule("replace-options-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select window";
-    }
-    return true;
-});
 
 export default ({
     name: "replaceOptionsQuestion",
@@ -43,6 +34,7 @@ export default ({
         groupName: String,
         modelValue: Array,
         isMultiSelect: Boolean,
+        validationRules: String,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
@@ -50,12 +42,26 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
-        updateSelectedValues() {
-            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
+        // updateSelectedValues() {
+        //     // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+        //     console.log('    ROQ     updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
+        //     console.log('    ROQ     updateSelectedValues, this.selectedValues: ', this.selectedValues);
+
+        //     if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+        //         console.log('  ROQ  ONLY ONE ANSWER!')
+        //         this.selectedValues = [this.answersToDisplay[0].Name];
+        //     }
+        // },
+    },
+    mounted() {
+        console.log('**** MOUJNTED *****.  ')
+        console.log('    ROQ     **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
+            console.log('    ROQ     **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
+
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+                console.log('  ROQ  ONLY ONE ANSWER!')
                 this.selectedValues = [this.answersToDisplay[0].Name];
             }
-        },
     },
     computed: {
         selectedValues: {
@@ -82,12 +88,13 @@ export default ({
             });
         },
     },
-    watch: {
-        isAvailable(val) {
-            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
-            val && this.updateSelectedValues();
-        }
-    },
+    // watch: {
+    //     isAvailable(val) {
+    //         console.log('ROQ ^^^    isAvailable changed.')
+    //         // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+    //         val && this.updateSelectedValues();
+    //     }
+    // },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index 1372f23f6..ed11c825c 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -9,13 +9,28 @@
                     :groupName="groupName"
                     buttonType="listCard"
                     v-model="selectedDoorSidesValues"
+                    validationRules="damage-side-required"
                 />
             </div>
         </transition>
-        
-        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
-
-        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
+        <replaceOptionsQuestion
+            ref="driverSideOptions"
+            :isAvailable="isDriverSideReplaceOptionsQuestionAvailable"
+            groupName="driverSideOptions"
+            isMultiSelect
+            filterByVehicleCategory
+            v-model="selectedDriverSideReplacOptionsValues"
+            validationRules="driver-side-options-required"
+        />
+        <replaceOptionsQuestion
+            ref="passengerSideOptions"
+            :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable"
+            groupName="passengerSideOptions"
+            isMultiSelect
+            filterByVehicleCategory
+            v-model="selectedPassengerSideReplaceOptionsValues"
+            validationRules="passenger-side-options-required"
+        />
     </div>
 </template>
 
@@ -23,6 +38,29 @@
 import buttonQuestion from "@/common-components/button-question/button-question";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("damage-side-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select vehicle side";
+    }
+    return true;
+});
+
+defineRule("driver-side-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
+
+defineRule("passenger-side-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
 
 export default ({
     name: "sideDoorOptions",
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index edbaf3a0c..2c735774f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -24,6 +24,7 @@
           :isAvailable="isRearWindowDamageLocation"
           v-model="selectedRearReplaceOptions"
           groupName="BackGlassReplaceOptionsQuestion"
+          validationRules="replace-options-required"
         />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
@@ -46,6 +47,15 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select rear window type";
+    }
+    return true;
+});
 
 
 export default {
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
index 347ee2fdf..be41d9cfb 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -7,6 +7,7 @@
                 :groupName="groupName"
                 buttonType="listButtonHorizontal"
                 v-model="selectedChipCountValues"
+                :validationRules="validationRules"
             />
         </div>
     </transition>
@@ -27,12 +28,23 @@ export default ({
         modelValue: Array,
         groupName: String,
         isAvailable: Boolean,
+        validationRules: String,
     },
     methods: {
         initializeComponent(cmsContent){
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
-        }
+        },
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            console.log('         updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
+            console.log('         updateSelectedValues, this.selectedValues: ', this.selectedValues);
+
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
+                console.log('    ONLY ONE ANSWER!')
+                this.selectedValues = [this.answersToDisplay[0].Name];
+            }
+        },
     },
     computed: {
         selectedChipCountValues: {
@@ -44,6 +56,13 @@ export default ({
             }
         },
     },
+    watch: {
+        isAvailable(val) {
+            console.log('***    isAvailable changed.')
+            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+            val && this.updateSelectedValues();
+        }
+    },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 8031db546..6ccd623db 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -7,6 +7,8 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
+                :suppressError="suppressError"
+                :validationRules="validationRules"
             />
         </div>
     </transition>
@@ -14,22 +16,30 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
-//import { defineRule } from "vee-validate";
-
-//DEFINE VALIDATION RULES
-// add these to the button component above:
-// validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
-// :suppressError="suppressError"
+import store from "@/store";
+// import { defineRule } from "vee-validate";
+// 
+// //DEFINE VALIDATION RULES
+// // add these to the button component above:
+// // validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+// // :suppressError="suppressError"
 // defineRule("windshield-damage-required", (value) => {
+//     // console.log('validation rule - windshield-damage-required, value: ', value);
 //     if (!value || value.length < 1) {
+//         // console.log('validation rule - windshield-damage-required, RETURN ERROR');
 //         return "Please select windshield damage";
 //     }
+//     // console.log('validation rule - windshield-damage-required, return true');
 //     return true;
 // });
 // defineRule("checkForRepairAndReplace", (value, [other]) => {
-//     if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+//     // console.log('validation rule - checkForRepairAndReplace, value: ', value);
+//     // console.log('validation rule - checkForRepairAndReplace, other: ', other);
+//     if (value.toUpperCase() === "REPAIR" && other.toString().includes("Windshield") && other.length > 1) {
+//         console.log('validation rule - checkForRepairAndReplace, RETURN ERROR');
 //         return "checkForRepairAndReplace error"
 //     }
+//     // console.log('validation rule - checkForRepairAndReplace, return true');
 //     return true;
 // });
 
@@ -46,12 +56,13 @@ export default ({
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
+        validationRules: String,
     },
     methods: {
         initializeComponent(cmsContent){
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
-        }
+        },
     },
     computed: {
         selectedValues: {
@@ -62,6 +73,21 @@ export default ({
                 this.$emit("update:modelValue", newValue);
             }
         },
+        answersToDisplay(){
+            const filteredAnswers = Array.isArray(this.answersFromCms) 
+                ? this.answersFromCms.filter(ans => 
+                    {
+                        const name = ans.Name.split('-');
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
+                    }) 
+                : [];
+
+            return filteredAnswers.map(ans => {
+                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
+        },
     },
     components: {
         buttonQuestion,
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 694103d8a..4a08166bd 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -4,17 +4,20 @@
             :isAvailable=isWindshieldDamageLocation
             :suppressError="suppressError"
             groupName="WindshieldDamageTypeQuestion"
-            v-model="selectedWindshieldDamageTypeValues" 
+            v-model="selectedWindshieldDamageTypeValues"
+            validationRules="windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion"
         />
         <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
             :isAvailable=isRepairOptionSelected
             groupName="WindshieldChipCountQuestion"
-            v-model="selectedWindshieldChipCountValues" 
+            v-model="selectedWindshieldChipCountValues"
+            validationRules="windshield-chip-count-required"
         />
         <replaceOptionsQuestion ref="replaceOptionsQuestion"
             :isAvailable=isReplaceOptionSelected
             groupName="WindshieldReplaceOptions"
             v-model="selectedWindshieldReplaceOptionsValues"
+            validationRules="windshield-replace-options-required"
         />
     </div>
 </template>
@@ -23,6 +26,36 @@
 import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
 import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("windshield-damage-type-required", (value) => {
+    console.log('windshield-damage-type-required, value: ', value);
+    if (!value || value.length < 1) {
+        return "Please select windshield damage";
+    }
+    return true;
+});
+defineRule("checkForRepairAndReplace", (value, [other]) => {
+    console.log('checkForRepairAndReplace, value: ', value, ' / other: ', other);
+    if (value.toString().toUpperCase().includes("REPAIR") && other.toString().toUpperCase().includes("WINDSHIELD") && other.length > 1) {
+        return "checkForRepairAndReplace error"
+    }
+    return true;
+});
+defineRule("windshield-chip-count-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select chip(s)";
+    }
+    return true;
+});
+defineRule("windshield-replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select windshield part";
+    }
+    return true;
+});
+
 export default ({
     name: "windshieldOptions",
 
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 5c328bc4c..0810859bf 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,9 +1,7 @@
 <template>
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
-    :class="hasError ? 'has-error' : ''"
-    @mouseup="handleClick(value)"
-    @keyup.space="handleClick(value)"
+    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -12,6 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
+      @click="handleChange(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
@@ -46,7 +45,6 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
 
@@ -69,6 +67,7 @@ export default {
       type: String,
       default: "",
     },
+    validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
   },
@@ -105,20 +104,26 @@ export default {
     loader,
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(
-      groupName,
-      undefined,
-      {
-        type: inputType,
-        checkedValue: value,
-      }
-    );
+    const fieldOptions = {
+      type: inputType,
+      checkedValue: props.value,
+    };
+
+    if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
+      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
+      fieldOptions['initialValue'] = fieldOptions.checkedValue;
+    }
+    const { 
+      checked, 
+      handleChange, 
+      errors,
+    } = useField(props.groupName, props.validationRules, fieldOptions);
+
     return {
       checked,
       handleChange,
-      errorMessage,
+      errors,
     };
   },
 };
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index d523ee06f..0fe0457ee 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,9 +1,7 @@
 <template>
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
-    :class="hasError ? 'has-error' : ''"
-    @mouseup="handleClick(value)"
-    @keyup.space="handleClick(value)"
+    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -12,6 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
+      @click="handleChange(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
@@ -49,9 +48,9 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+
 export default {
   name: "listButton",
   props: {
@@ -71,6 +70,7 @@ export default {
       type: [String, Number],
       default: "",
     },
+    validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
   },
@@ -107,20 +107,26 @@ export default {
     loader,
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(
-      groupName,
-      undefined,
-      {
-        type: inputType,
-        checkedValue: value,
-      }
-    );
+    const fieldOptions = {
+      type: inputType,
+      checkedValue: props.value,
+    };
+
+    if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
+      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
+      fieldOptions['initialValue'] = fieldOptions.checkedValue;
+    }
+    const { 
+      checked, 
+      handleChange, 
+      errors,
+    } = useField(props.groupName, props.validationRules, fieldOptions);
+
     return {
       checked,
       handleChange,
-      errorMessage,
+      errors,
     };
   },
 };
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 869099dfd..a1e13aec5 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -13,8 +13,10 @@
         :data-focus-target="groupName"
         @click="handleChange(value)"
         v-model="checkValue"
-        @change="handleCheckChange()"
+        @change="handleCheckChange(value)"
       />
+      value: {{ value }}
+      checkValue: {{ checkValue }}
       <label
         :for="buttonID"
         class="d-flex w-100 align-items-center px-2 h-100"
@@ -75,12 +77,13 @@ export default {
   },
   data(){
     return {
-      checkValue: Boolean,
+      checkValue: [Boolean, String],
     }
   },
   created(){
     if(Array.isArray(this.selectedValues)){
       this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
+      console.log('=================== this.checkValue: ', this.checkValue)
     }
   },
   computed: {
@@ -98,6 +101,9 @@ export default {
   },
   methods: {
     handleCheckChange(newValue, oldValue){
+      // console.log('LC handleCheckChange... oldValue: ', oldValue);
+      // console.log('LC handleCheckChange... newValue: ', newValue);
+
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
         this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
@@ -105,22 +111,42 @@ export default {
     }
   },
   setup(props) {
+    console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
+    console.log('RUNNING setup... ... ... props.value: ', props.value)
+    console.log('RUNNING setup... ... ... props.selectedValues: ', props.selectedValues)
+
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    const {
-        value: inputValue,
-        handleChange,
-        errors,
-    } = useField(props.groupName, props.validationRules,
-    {
+//     const { selectedValues, value } = toRefs(props);
+// console.log('XXXXXXX selectedValues: ', selectedValues)
+// console.log('XXXXXXX value: ', value)
+
+    const fieldOptions = {
       type: inputType,
       checkedValue: props.value,
-    });
+    };
+
+    if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
+      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
+      fieldOptions['initialValue'] = fieldOptions.checkedValue;
+    }
+
+    const {
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules, fieldOptions);
+
     return {
       handleChange,
       errors,
     };
   },
+  // watch: {
+  //   checkValue(val) {
+  //     console.log('LC > CHANGE in checkValue, val: ', val)
+  //     // this.handleChange()
+  //   }
+  // },
 };
 </script>
 

From cd5fcfb7e20c0ed9870a1dc80ad20ff8cef36a24 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 1 Mar 2022 10:04:05 -0500
Subject: [PATCH 02/48] CSR-319: fix typo

---
 src/common-components/button-question/button-question.vue    | 5 +++--
 src/layouts/form-test/form-test.vue                          | 4 +++-
 .../vehicle-damage/side-door-options/side-door-options.vue   | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 61255791c..ee0d70f3f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -123,8 +123,9 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
-      console.log('BQ handleCheckedChanged, val: ', val)
+      console.log('BQ (', this.groupName, ') handleCheckedChanged, val: ', val)
       if(this.isMultiSelect && this.selectedValues) {
+        console.log('BQ (', this.groupName, ') handleCheckedChanged, this.selectedValues is 1st: ', this.selectedValues)
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;
         if(Array.isArray(this.selectedValues)) {
@@ -134,7 +135,7 @@ export default {
       } else {
         this.selectedValues = [val.value];
       }
-      console.log('BQ handleCheckedChanged, this.selectedValues is now: ', this.selectedValues)
+      console.log('BQ (', this.groupName, ') handleCheckedChanged, this.selectedValues is now: ', this.selectedValues)
     },
   },
   components: {
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index a06faf10d..3acffeb6d 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -113,6 +113,8 @@ export default {
 
     const resultMap = await settleAllPromises(promiseResultMap);
 
+    console.log('resultMap: ', resultMap);
+
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
       vm.$refs.funnelHeader.initializeComponent(
@@ -147,7 +149,7 @@ export default {
       selectedDamageLocations: [],
       sideDoorOptionsData: {
         selectedDoorSides: [],
-        selectedDriverSideReplacOptions: [],
+        selectedDriverSideReplaceOptions: [],
         selectedPassengerSideReplaceOptions: []
       },
       selectedWindshieldOptions: [],
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index 7d74b7152..c3127c4f4 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -19,7 +19,7 @@
             groupName="driverSideOptions"
             isMultiSelect
             filterByVehicleCategory
-            v-model="selectedDriverSideReplacOptionsValues"
+            v-model="selectedDriverSideReplaceOptionsValues"
             validationRules="driver-side-options-required"
         />
         <replaceOptionsQuestion

From ae387b71daf26c43727ca92986959706f24a2dd9 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Tue, 1 Mar 2022 11:34:36 -0500
Subject: [PATCH 03/48] CSR-297 reponse.data empty object may be valid

---
 src/global-methods.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/global-methods.js b/src/global-methods.js
index a0023ef4c..bb202de13 100644
--- a/src/global-methods.js
+++ b/src/global-methods.js
@@ -19,7 +19,7 @@ export default {
       }).then(
         (response) => {
           if (response.status == httpStatusCodes.OK) {
-            if(response.data == undefined || response.data == {}) {
+            if(response.data == undefined) {
                 reject(response);  
             }else{
               resolve(response);

From ca0b266efae93412f6732ee398bc753954343602 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 1 Mar 2022 14:12:05 -0500
Subject: [PATCH 04/48] CSR-319: move validation into vehicle-damage page

---
 .../replace-options-question.vue              |  49 ++++-----
 src/layouts/vehicle-damage/vehicle-damage.vue | 102 +++++++++++++-----
 .../windshield-options/windshield-options.vue |   3 +-
 .../list-button-horizontal.vue                |   2 +-
 src/ux-components/list-button/list-button.vue |   2 +-
 src/ux-components/list-card/list-card.vue     |   4 +-
 6 files changed, 107 insertions(+), 55 deletions(-)

diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index bc42364d2..63c72f7ce 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,6 +1,7 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXXXXXXXXXXXXXX' : ''" aria-live="polite">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXconsole.logXXXXXXXXXXXXX' : ''" aria-live="polite">
+            answersToDisplay.length: {{answersToDisplay.length}}
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -42,27 +43,27 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
-        // updateSelectedValues() {
-        //     // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-        //     console.log('    ROQ     updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
-        //     console.log('    ROQ     updateSelectedValues, this.selectedValues: ', this.selectedValues);
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            console.log('    ROQ     updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
+            console.log('    ROQ     updateSelectedValues, this.selectedValues: ', this.selectedValues);
 
-        //     if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
-        //         console.log('  ROQ  ONLY ONE ANSWER!')
-        //         this.selectedValues = [this.answersToDisplay[0].Name];
-        //     }
-        // },
-    },
-    mounted() {
-        console.log('**** MOUJNTED *****.  ')
-        console.log('    ROQ     **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
-            console.log('    ROQ     **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
-
-        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
                 console.log('  ROQ  ONLY ONE ANSWER!')
                 this.selectedValues = [this.answersToDisplay[0].Name];
             }
+        },
     },
+    // mounted() {
+    //     console.log('**** MOUJNTED *****.  this.groupName: ', this.groupName)
+    //     console.log('    ROQ     **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
+    //         console.log('    ROQ     **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
+
+    //     if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+    //             console.log('  ROQ  ONLY ONE ANSWER!   this.groupName: ', this.groupName)
+    //             this.selectedValues = [this.answersToDisplay[0].Name];
+    //         }
+    // },
     computed: {
         selectedValues: {
             get: function() {
@@ -88,13 +89,13 @@ export default ({
             });
         },
     },
-    // watch: {
-    //     isAvailable(val) {
-    //         console.log('ROQ ^^^    isAvailable changed.')
-    //         // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
-    //         val && this.updateSelectedValues();
-    //     }
-    // },
+    watch: {
+        isAvailable(val) {
+            console.log('ROQ ^^^    isAvailable changed.')
+            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+            val && this.updateSelectedValues();
+        }
+    },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 944c480c5..bf3353b8a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -3,30 +3,61 @@
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
-        <damageLocationQuestion
-          ref="damageLocation"
-          v-model="selectedDamageLocations"
-          groupName="DamageLocationQuestion"
-        />
-        <windshieldOptions
-          ref="windshieldOptions" 
-          v-model="selectedWindshieldOptions" 
-          :selectedDamageLocations="selectedDamageLocations"
-        />
-        <sideDoorOptions 
-          ref="sideDoorOptions"
-          groupName="SideDoorSideQuestion"
-          v-model="sideDoorOptionsData"
-          :selectedDamageLocations="selectedDamageLocations"
-        />
-        <replaceOptionsQuestion
-          ref="backGlassOptions"
-          :isAvailable="isRearWindowDamageLocation"
-          v-model="selectedRearReplaceOptions"
-          groupName="BackGlassReplaceOptionsQuestion"
-          validationRules="replace-options-required"
-        />
-        <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
+        <Form
+          @submit="onSubmit"
+          @invalid-submit="onInvalidSubmit"
+          ref="theForm"
+          v-slot="{ values, meta, errors }"
+        >
+          <damageLocationQuestion
+            ref="damageLocation"
+            v-model="selectedDamageLocations"
+            groupName="DamageLocationQuestion"
+          />
+          <windshieldOptions
+            ref="windshieldOptions" 
+            v-model="selectedWindshieldOptions"
+            :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            :selectedDamageLocations="selectedDamageLocations"
+          />
+          <alert
+            class="my-3"
+            v-if="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            alertClass="alert-danger"
+            alertHeadline="You'll need to schedule separate appointments"
+            alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
+            :isDismissible="false"
+          />
+          <sideDoorOptions 
+            ref="sideDoorOptions"
+            groupName="SideDoorSideQuestion"
+            v-model="sideDoorOptionsData"
+            :selectedDamageLocations="selectedDamageLocations"
+          />
+          <replaceOptionsQuestion
+            ref="backGlassOptions"
+            :isAvailable="isRearWindowDamageLocation"
+            v-model="selectedRearReplaceOptions"
+            groupName="BackGlassReplaceOptionsQuestion"
+            validationRules="replace-options-required"
+          />
+          <funnel-footer
+              ref="funnelFooter"
+              :isDisabled="!meta.valid"
+              @back-clicked="backButtonAction"
+          />
+
+          <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION  -->
+              <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
+              <p>Current Form, values:</p>
+              <pre>{{ values }}</pre>
+              <p>Errors:</p>
+              <pre>{{ errors }}</pre>
+              <p>Is Form Valid? (Meta.valid):</p>
+              <pre>{{ meta.valid }}</pre>
+            </div>
+
+        </Form>
     </div>
 </template>
 
@@ -40,6 +71,7 @@ import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-doo
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import alert from "@/ux-components/alert/alert";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -47,7 +79,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
-import { defineRule } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
 
 // DEFINE VALIDATION RULES
 defineRule("replace-options-required", (value) => {
@@ -147,6 +179,24 @@ export default {
         this.$route
       );
     },
+    onSubmit(values) {
+      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
+      console.log('submitted: ', JSON.stringify(values, null ,2));
+    },
+    onInvalidSubmit({ values, errors, results }) {
+      // identify the first error field and put focus on it
+      console.log("values: ", values);
+      console.log("errors: ", errors);
+      console.log("results: ", results);
+      // get error names array
+      const errorNames = errors ? Object.keys(errors) : [];
+      const firstErrorEl = errorNames[0];
+      if (firstErrorEl) {
+        console.log('firstErrorEl: ', firstErrorEl);
+        const qsString = "[data-focus-target='" + firstErrorEl + "']";
+        document.querySelector(qsString).focus();
+      }
+    },
   },
   components: {
     funnelHeader,
@@ -157,6 +207,8 @@ export default {
     damageLocationQuestion,
     windshieldOptions,
     replaceOptionsQuestion,
+    Form,
+    alert,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index fc265fd0a..5a2c2f62e 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="windshield-options">
+        selectedDamageLocations: {{selectedDamageLocations}}
         <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
             :isAvailable=isWindshieldDamageLocation
             :suppressError="suppressError"
@@ -63,8 +64,6 @@ export default ({
     props: {
         modelValue: Array,
         selectedDamageLocations: Array,
-        selectedChipCount: Array,
-        selectedReplaceOptions: Array,
         suppressError: Boolean
     },
 
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 8cd79970a..ca2d261cf 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -10,7 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
-      @click="handleChange(value)"
+      @click="handleClick(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0fe0457ee..0db66ee2c 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -10,7 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
-      @click="handleChange(value)"
+      @click="handleClick(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7309ca9c3..21b3d79c1 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -111,8 +111,8 @@ export default {
     }
   },
   setup(props) {
-    console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
-    console.log('RUNNING setup... ... ... props.value: ', props.value)
+    // console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
+    // console.log('RUNNING setup... ... ... props.value: ', props.value)
     console.log('RUNNING setup... ... ... props.selectedValues: ', props.selectedValues)
 
     const inputType = props.isMultiSelect ? "checkbox" : "radio";

From b734e481c1df8906c29b039e30813e00a8e5ff2b Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 1 Mar 2022 15:08:00 -0500
Subject: [PATCH 05/48] Fix defect for routing

---
 src/router/index.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 0d98f6698..aafc5e130 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -57,17 +57,20 @@ const routes = [
         try {
           // If we already have our route, go to it.
           if (router.hasRoute(to.query.fmgPage)) {
+
             // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
-            const component = router
-              .getRoutes()
-              .filter((x) => x.name === to.query.fmgPage)[0].components;
+            let component = router.getRoutes().filter((x) => x.name === to.query.fmgPage)[0].components;
+
+            // If the component hasn't been loaded fully, load it before we check prerequisites.
+            if (component.default.methods == undefined) {
+              component = await component.default();
+            }
 
             if (!arePagePrerequisitesValid(component)) {
               await GoToFunnelStartOn404(next);
             }
 
-
-           return next({ name: to.query.fmgPage, query: to.query, params: to.params });
+            return next({ name: to.query.fmgPage, query: to.query, params: to.params });
           }
 
           // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
@@ -82,10 +85,7 @@ const routes = [
 
           // Call the next components arePagePrerequisitesValid method before load.
           // If it returns false, use the 404 logic.
-          const nextComponent = await router
-            .getRoutes()
-            .filter((x) => x.name === routeData[0].name)[0]
-            .components.default();
+          const nextComponent = await router.getRoutes().filter((x) => x.name === routeData[0].name)[0].components.default();
 
           if (!arePagePrerequisitesValid(nextComponent)) {
             await GoToFunnelStartOn404(next);

From 6596239d38ebf97bd2cddbbe84e9070de9884a17 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 1 Mar 2022 15:09:18 -0500
Subject: [PATCH 06/48] one more =

---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index aafc5e130..be434e9d8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -62,7 +62,7 @@ const routes = [
             let component = router.getRoutes().filter((x) => x.name === to.query.fmgPage)[0].components;
 
             // If the component hasn't been loaded fully, load it before we check prerequisites.
-            if (component.default.methods == undefined) {
+            if (component.default.methods === undefined) {
               component = await component.default();
             }
 

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 07/48] 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 bfbd687cc9dbaf09103d9c328860a02361bb272b Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 2 Mar 2022 11:10:10 -0500
Subject: [PATCH 08/48] touching up animations

---
 src/styles/common-animations.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index 92f5407ed..b697aea38 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -1,4 +1,4 @@
-.fade-enter-active{
+.fade-enter-active {
     transition: opacity 0.6s ease;
 }
 

From 352c3c69b9a44486dc3ab5fa7375e59bbd932f5c Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 2 Mar 2022 13:12:14 -0500
Subject: [PATCH 09/48] Radio button fix and radio button unit tests added

---
 src/ux-components/radio/radio.spec.js | 38 +++++++++++++++++++++++++++
 src/ux-components/radio/radio.vue     | 32 +++++++++++-----------
 2 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index a7c3318ed..113d534c6 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@@ -60,4 +60,42 @@ describe("radio.vue", () => {
 
     expect(paragraph.text()).toEqual("screenreader text");
   });
+
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "Windshield",
+        value: "List Card Checkbox",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+      },
+    });
+    wrapper.vm.handleCheckChange();
+    // Assert
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: Boolean}]);
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        modelValue: ["List Card Checkbox"],
+        value: "Car-Front",
+        selectedValues: ["Car-Front"]
+      },
+    });
+    // Assert
+    expect(wrapper.componentVM.checkValue).toEqual(true);
+  });
 });
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 99629a39b..17fb7a880 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -10,7 +10,8 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged()"
+    @change="handleCheckChange()"
+    :checked="checkValue"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -36,6 +37,7 @@ export default {
       default: "",
     },
     screenReaderOnlyText: String,
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
   data() {
@@ -44,15 +46,15 @@ export default {
     };
   },
   created() {
-    if (this.selectedButtonIDs) {
-      this.checkValue = this.selectedButtonIDs[0];
+    if (this.selectedValues) {
+      this.checkValue = this.selectedValues[0] === this.value;
     }
   },
   methods: {
     handleClick(value) {
       this.handleChange(value);
     },
-    handleCheckChanged(newValue, oldValue) {
+    handleCheckChange(newValue, oldValue) {
       const isInitialization = typeof oldValue === "function";
       if (!isInitialization) {
 
@@ -68,19 +70,19 @@ export default {
     },
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
-    const { checked, handleChange, errorMessage } = useField(
-      groupName,
-      undefined,
-      {
-        type: "radio",
-        checkedValue: value,
-      }
-    );
+    const inputType = "radio";
+    const {
+        value: inputValue,
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules,
+    {
+      type: inputType,
+      checkedValue: props.value,
+    });
     return {
-      checked,
       handleChange,
-      errorMessage,
+      errors,
     };
   },
 };

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 10/48] 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 11/48] 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 4b6821c694197e0cdddf2c474a473a2de3e5918f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 2 Mar 2022 17:24:12 -0500
Subject: [PATCH 12/48] CSR-399 vin-information WIP

---
 .../vin-information/vin-information.spec.js   |  0
 .../vin-information/vin-information.vue       | 78 +++++++++++++++++++
 src/layouts/component-test/component-test.vue | 12 +++
 3 files changed, 90 insertions(+)
 create mode 100644 src/common-components/vin-information/vin-information.spec.js
 create mode 100644 src/common-components/vin-information/vin-information.vue

diff --git a/src/common-components/vin-information/vin-information.spec.js b/src/common-components/vin-information/vin-information.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/common-components/vin-information/vin-information.vue b/src/common-components/vin-information/vin-information.vue
new file mode 100644
index 000000000..a90dfd467
--- /dev/null
+++ b/src/common-components/vin-information/vin-information.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="vin-information">
+    <div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+      <textLink :text="HeadlineText" linkType="text" href="#!" />
+    </div>
+    <div class="vin-info">
+      <div class="mt-3" v-html="BodyText"></div>
+      <img :src="OptionalImage" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+  name: "vinInformation",
+  components: {
+    textLink,
+  },
+  data() {
+    return {
+      isActive: false,
+      HeadlineText: "Where can I find my VIN?",
+      BodyText: "<p class='mb-2'>You can find your VIN in a few places:</p> <ol> <li>Driver side windshield</li> <li>Driver side doorjamb</li> <li>Vehicle registration card</li> <li>Auto insurance card or app</li> </ol>",
+      OptionalImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/vin_location.svg?sfvrsn=63a9a2cf_3",
+    };
+  },
+  methods: {
+    toggleClass: function(event){
+       this.isActive = !this.isActive;
+    }
+  }
+}
+
+</script>
+
+<style lang="scss">
+.vin-information {
+  p,li {
+    font-size: .875rem;
+    color: $gray-600;
+  }
+  a {
+    font-size: .875rem;
+  }
+  .vin-toggle {
+    &:after {
+      content: "";
+      transition: all .5s ease;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right center;
+      margin-left: .5rem;
+      width: 16px;
+      height: auto;
+    }
+    &.active:after {
+      transform: rotate(180deg);
+    }
+    &.active + .vin-info {
+      max-height: 500px;
+      transition: all 250ms ease-in;
+      opacity: 1;
+    }
+  }
+  .vin-info {
+    max-height: 0;
+    transition: all 250ms ease-out;
+    overflow: hidden;
+    opacity: 0;
+    img {
+      width: 117%;
+      height: auto;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 63df009e2..5ff4141fd 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,5 +1,15 @@
   <template>
     <div class="container-fluid container-shadow p-2 rounded-3">
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <vinInformation/>
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Text Input</h4>
@@ -1134,6 +1144,7 @@
   import textLink from "@/ux-components/text-link/text-link";
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+  import vinInformation from "@/common-components/vin-information/vin-information";
   export default {
     name: "App",
     components: {
@@ -1148,6 +1159,7 @@
       textLink,
       textboxQuestion,
       dropdownQuestion,
+      vinInformation,
     },
     data() {
       return {

From a11426f2050426523863de5453b023a8d3d17ec4 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 2 Mar 2022 17:36:01 -0500
Subject: [PATCH 13/48] Add empty unit test.

---
 src/common-components/vin-information/vin-information.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common-components/vin-information/vin-information.spec.js b/src/common-components/vin-information/vin-information.spec.js
index e69de29bb..3d0843e10 100644
--- a/src/common-components/vin-information/vin-information.spec.js
+++ b/src/common-components/vin-information/vin-information.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

From 21493211034ee28ab904f506940455dbddab7b1d Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 3 Mar 2022 10:52:30 -0500
Subject: [PATCH 14/48] Add unit test and fix link issue for Bindu.

---
 .../vin-information/vin-information.spec.js   | 19 ++++++++++++++++++-
 src/ux-components/text-link/text-link.vue     |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/common-components/vin-information/vin-information.spec.js b/src/common-components/vin-information/vin-information.spec.js
index 3d0843e10..4938d54fe 100644
--- a/src/common-components/vin-information/vin-information.spec.js
+++ b/src/common-components/vin-information/vin-information.spec.js
@@ -1 +1,18 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import vinInformation from "@/common-components/vin-information/vin-information";
+
+describe("vinInformation.vue", () => {
+  it("Should return input class active if isActive is true", async () => {
+    // Act
+    const wrapper = shallowMount(vinInformation);
+
+    await wrapper.setData({
+      isActive: true,
+    });
+
+    // Assert
+    wrapper.vm.toggleClass()
+
+    expect(wrapper.vm.isActive).toEqual(false);
+  });
+});
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index a03fc52a6..0efcdcc09 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -25,6 +25,7 @@ export default {
 
 <style lang="scss">
 a {
+  display: inline-flex !important;
   color: $blue;
   text-underline-offset: 0.5em;
   line-height: 26px;
@@ -42,7 +43,6 @@ a {
   &.navigation-link {
     color: $black;
     line-height: 26px;
-    display: inline-flex;
     text-transform: capitalize;
     white-space: nowrap;
   }

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 15/48] 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 () => {

From 9dc96ba9e857fe90b9b10dc7ac8bcd3e37aff202 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Thu, 3 Mar 2022 14:09:31 -0500
Subject: [PATCH 16/48] CSR-297 bug fixes

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 16 +++++-------
 src/router/router-constants/routing-table.js  | 26 +++----------------
 src/store/index.js                            |  3 +++
 3 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 5a9eca92f..8f8ae1106 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -132,7 +132,7 @@ export default {
     },
     
     async forwardButtonAction() {
-      var windshieldChipCount = this.selectedWindshieldOptions.selectedWindshieldChipCount && this.isWindshieldDamageLocation ? 
+      const windshieldChipCount = this.selectedWindshieldOptions.selectedWindshieldChipCount && this.isWindshieldDamageLocation ? 
          this.selectedWindshieldOptions.selectedWindshieldChipCount[0] : null;
 
       store.commit(this.storeMutations.UPDATE_IS_REPAIR, this.isWindshieldRepair);
@@ -143,7 +143,7 @@ export default {
 
       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);
@@ -158,14 +158,12 @@ export default {
       
       //found multiple parts for a single glass location (Windshield, Driver, Passenger, Rear)
       if (partsData.data.partsOrQuestions){
-        var multiParts = false;
-        partsData.data.partsOrQuestions.forEach(pq => {
-          if (pq.parts != null && pq.parts.length > 1){
+        for (var i = 0; i < partsData.data.partsOrQuestions.length; i++){
+           if (partsData.data.partsOrQuestions[i].parts != null && partsData.data.partsOrQuestions[i].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.
@@ -177,7 +175,7 @@ export default {
     },
 
     selectedGlassToReplace() {
-      var selectedGlassToReplace = [];
+      const selectedGlassToReplace = [];
       if (this.isWindshieldDamageLocation && !this.isWindshieldRepair){
           this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(wsItem => {
             selectedGlassToReplace.push({ location: damageLocationsParts.WINDSHIELD, name: wsItem});
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 3540d3bf8..58bd128a9 100644
--- a/src/router/router-constants/routing-table.js
+++ b/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 };
diff --git a/src/store/index.js b/src/store/index.js
index 41daf3955..d81d1c523 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -68,6 +68,9 @@ export const mutations = {
   },
   updateIsRepair(state, isRepair){
     state.order.damage.isRepair = isRepair;
+    if (!isRepair){
+      this.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
+    }
   },
   updateNumberOfChips(state, numberOfChips){
     state.order.damage.numberOfChips = numberOfChips;

From 0b35d91195c92a95f131e29137ef238ff35cafbc Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Thu, 3 Mar 2022 14:22:08 -0500
Subject: [PATCH 17/48] CSR-109

---
 src/router/router-constants/routing-table.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 3540d3bf8..87818ebe7 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -85,7 +85,7 @@ const routingTable = [
       },
       {
         scenario: navigationScenarios.SELECTED_PARTS,
-        destinationFmgPageValue: fmgPageValues.QUOTE,
+        destinationFmgPageValue: fmgPageValues.REVEAL,
       },
     ],
   },

From b10d8c55cea6db94638fdb6191ffab28a73ecb1b Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Thu, 3 Mar 2022 16:38:04 -0500
Subject: [PATCH 18/48] POC tint aut oselection

---
 .../glass-part-question.vue                   | 71 ++++++++++++-------
 1 file changed, 45 insertions(+), 26 deletions(-)

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 7e8639ee0..b33eca98f 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,7 +6,7 @@
 </div>
 
 <div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
-
+{{ selectedTint }}
     <div class="row my-2">
         <div class="col">
             <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
@@ -61,25 +61,9 @@ export default {
         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: "",
-                        };
-                    }
-                });
-            });
+        this.LoadPreselectedValues();
+        if (Object.keys(this.featureListData).length === 1) {
+            this.AutoSelectTintIfOnlyOneColor(Object.keys(this.featureListData)[0]);
         }
     },
     components: {
@@ -127,6 +111,10 @@ export default {
 
             return tintMapByColor;
         },
+
+        PartDataFromApi() {
+            return this.$store.getters.pageData(this.$route.query.fmgPage);
+        }
     },
     methods: {
         initializeComponent(cmsContent) {
@@ -156,19 +144,50 @@ export default {
         },
 
         // Check if only a single part is present for the tint and set the v-model if it is.
-        AutoSelectIfSinglePart(){
+        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];
+            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]};
+                        this.selectedPart = {
+                            [currentGlassSelection.glassLocation]: [currentGlassSelection.parts[0].partNumber]
+                        };
                     }
                 }
             });
+        },
+
+        AutoSelectTintIfOnlyOneColor(tintColor) {
+            this.selectedTint[tintColor] = {
+                buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+                checkValue: "",
+                value: "",
+            };
+        },
+
+        LoadPreselectedValues() {
+            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: "",
+                            };
+                        }
+                    });
+                });
+            }
         }
     },
 };

From 234467f6ec412e4ce082cd47d7e7823a6059717e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 4 Mar 2022 09:11:50 -0500
Subject: [PATCH 19/48] adding delay feature to animations

---
 .../windshield-damage-type-question.vue              |  4 +++-
 .../windshield-options/windshield-options.vue        |  1 +
 src/styles/common-animations.scss                    | 12 +++++++++---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 8031db546..900fcb855 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -1,5 +1,6 @@
 <template>
-    <transition name="fade" mode="out-in">
+    <transition :name="selectedDamageLocations.includes('SideDoor'
+) ? 'fade_delay' : 'fade'" mode="out-in">
         <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
             <buttonQuestion
                 :questionText="questionText"
@@ -46,6 +47,7 @@ export default ({
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
+        selectedDamageLocations: Array
     },
     methods: {
         initializeComponent(cmsContent){
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index ed214158e..866e856c2 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -3,6 +3,7 @@
         <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
             :isAvailable=isWindshieldDamageLocation
             :suppressError="suppressError"
+            :selectedDamageLocations="selectedDamageLocations"
             groupName="WindshieldDamageTypeQuestion"
             v-model="selectedWindshieldDamageTypeValues" 
         />
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index b697aea38..a516e9fbc 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -1,12 +1,18 @@
-.fade-enter-active {
+.fade-enter-active, .fade_delay-enter-active {
     transition: opacity 0.6s ease;
 }
 
-.fade-leave-active  {
+.fade_delay-enter-active {
+    transition-delay: 0.175s;
+}
+
+.fade-leave-active, .fade_delay-leave-active  {
     transition: opacity 0.3s ease; 
 }
 
 .fade-enter-from,
-.fade-leave-to {
+.fade-leave-to,
+.fade_delay-enter-from,
+.fade_delay-leave-to {
     opacity: 0;
 }
\ No newline at end of file

From eb709f69a4e408899410f1f54ec1e967614dfc53 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 4 Mar 2022 10:16:56 -0500
Subject: [PATCH 20/48] Changing fade duration

---
 .../windshield-damage-type-question.vue              |  3 +--
 .../windshield-options/windshield-options.vue        |  1 -
 src/styles/common-animations.scss                    | 12 +++---------
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 900fcb855..b06a2ccb5 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -1,6 +1,5 @@
 <template>
-    <transition :name="selectedDamageLocations.includes('SideDoor'
-) ? 'fade_delay' : 'fade'" mode="out-in">
+    <transition name="fade" mode="out-in">
         <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
             <buttonQuestion
                 :questionText="questionText"
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 866e856c2..ed214158e 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -3,7 +3,6 @@
         <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
             :isAvailable=isWindshieldDamageLocation
             :suppressError="suppressError"
-            :selectedDamageLocations="selectedDamageLocations"
             groupName="WindshieldDamageTypeQuestion"
             v-model="selectedWindshieldDamageTypeValues" 
         />
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index a516e9fbc..4106d85ad 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -1,18 +1,12 @@
 .fade-enter-active, .fade_delay-enter-active {
-    transition: opacity 0.6s ease;
+    transition: opacity 0.8s ease;
 }
 
-.fade_delay-enter-active {
-    transition-delay: 0.175s;
-}
-
-.fade-leave-active, .fade_delay-leave-active  {
+.fade-leave-active  {
     transition: opacity 0.3s ease; 
 }
 
 .fade-enter-from,
-.fade-leave-to,
-.fade_delay-enter-from,
-.fade_delay-leave-to {
+.fade-leave-to {
     opacity: 0;
 }
\ No newline at end of file

From 408dc10658394b606fcde412e8e5c64dea7fe373 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 4 Mar 2022 10:31:07 -0500
Subject: [PATCH 21/48] Removing unneeded attributes

---
 .../windshield-damage-type-question.vue                         | 1 -
 src/styles/common-animations.scss                               | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index b06a2ccb5..8031db546 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -46,7 +46,6 @@ export default ({
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
-        selectedDamageLocations: Array
     },
     methods: {
         initializeComponent(cmsContent){
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index 4106d85ad..f421cff1a 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -1,4 +1,4 @@
-.fade-enter-active, .fade_delay-enter-active {
+.fade-enter-active {
     transition: opacity 0.8s ease;
 }
 

From 46791251b23b9e1088744ddc823daadae22b35aa Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Fri, 4 Mar 2022 10:43:39 -0500
Subject: [PATCH 22/48] default model value

---
 .../glass-part-question/glass-part-question.vue      | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

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 b33eca98f..37f58e677 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,10 +6,9 @@
 </div>
 
 <div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
-{{ selectedTint }}
     <div class="row my-2">
         <div class="col">
-            <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
+            <listCard v-model="selectedTint[name]" :selectedValues="selectedTint[name]" :value="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
             require(`@/assets/img/tints/${getTintSourceImage(
               glassLocation,
               name
@@ -58,7 +57,10 @@ export default {
         glassName: String,
         glassLocation: String,
         colorAnswers: Array,
-        modelValue: Object,
+        modelValue: {
+            type: Object,
+            default: () => ({}),
+        },
     },
     mounted() {
         this.LoadPreselectedValues();
@@ -168,7 +170,7 @@ export default {
         },
 
         LoadPreselectedValues() {
-            if (this.modelValue !== undefined) {
+            if (Object.keys(this.modelValue).length !== 0) {
                 // Populate button-question model-value if parts data already exists in VueX
                 const alreadyPopulatedPartsData =
                     this.$store.getters.lineItems.glassParts;
@@ -188,7 +190,7 @@ export default {
                     });
                 });
             }
-        }
+        },
     },
 };
 </script>

From 895bc5c43e57a85295bfaea1f0573dcccc6ae777 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 4 Mar 2022 12:35:05 -0500
Subject: [PATCH 23/48] CSR-297 WIP persist page selections

---
 src/constants/damage-locations-selected.js    |  7 +++
 src/layouts/reveal/reveal.vue                 |  2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue | 61 ++++++++++++++++++-
 .../windshield-options/windshield-options.vue |  2 +-
 4 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 src/constants/damage-locations-selected.js

diff --git a/src/constants/damage-locations-selected.js b/src/constants/damage-locations-selected.js
new file mode 100644
index 000000000..827bbf57b
--- /dev/null
+++ b/src/constants/damage-locations-selected.js
@@ -0,0 +1,7 @@
+const damageLocationsSelected = {
+    WINDSHIELD: "Windshield",
+    SIDEDOOR: "SideDoor",
+    REARWINDOW: "RearWindow",
+  };
+  
+  export { damageLocationsSelected };
\ No newline at end of file
diff --git a/src/layouts/reveal/reveal.vue b/src/layouts/reveal/reveal.vue
index 18f0e499d..fdd371e68 100644
--- a/src/layouts/reveal/reveal.vue
+++ b/src/layouts/reveal/reveal.vue
@@ -51,7 +51,7 @@ export default {
             );
         },
         arePagePrerequisitesValid() {
-            return store.getters.lineItems.glassParts !== null;
+            return true;
         },
         resetDependentState() {
             // Set
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 006c87192..1fa6fe6c6 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -48,6 +48,7 @@ import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
 import { damageLocationsParts } from "@/constants/damage-locations-parts.js";
 import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 
 
 export default {
@@ -106,13 +107,13 @@ export default {
   },
   data(){
     return {
-      selectedDamageLocations: [],
+      selectedDamageLocations: this.getDamageLocations(),
       sideDoorOptionsData: {
         selectedDoorSides: [],
         selectedDriverSideReplaceOptions: [],
         selectedPassengerSideReplaceOptions: []
       },
-      selectedWindshieldOptions: [],
+      selectedWindshieldOptions: this.getWindshieldOptions(),
       selectedRearReplaceOptions: [],
     }
   },
@@ -131,6 +132,60 @@ export default {
       );
     },
     
+    getDamageLocations() {
+      var glassSelections = [];
+      if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsParts.WINDSHIELD }) ||
+          store.getters.damage.isRepair) {
+          glassSelections.push(damageLocationsSelected.WINDSHIELD);
+      }
+      if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsParts.DRIVER })) {
+          glassSelections.push(damageLocationsSelected.SIDEDOOR);
+      }
+
+      if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsParts.PASSENGER })) {
+          glassSelections.push(damageLocationsSelected.SIDEDOOR);
+      }
+
+      if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsParts.REAR })) {
+          glassSelections.push(damageLocationsSelected.REARWINDOW);
+      }
+
+      return glassSelections;
+    },
+
+    getWindshieldOptions() {
+      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 === damageLocationsParts.WINDSHIELD &&
+            glass.name === "Single" })) {
+            windShieldOptions.selectedWindshieldDamageType.push("Replace");
+            windShieldOptions.selectedWindshieldReplaceOptions.push("Single");
+        }
+
+        if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsParts.WINDSHIELD &&
+            glass.name === "Driver" })) {
+            windShieldOptions.selectedWindshieldDamageType.push("Replace");
+            windShieldOptions.selectedWindshieldReplaceOptions.push("Driver");
+        }
+
+        if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsParts.WINDSHIELD &&
+            glass.name === "Passenger" })) {
+            windShieldOptions.selectedWindshieldDamageType.push("Replace");
+            windShieldOptions.selectedWindshieldReplaceOptions.push("Passenger");
+        }
+      }
+
+      if (store.getters.damage.isRepair) {
+          windShieldOptions.selectedWindshieldDamageType.push("Repair");
+          windShieldOptions.selectedWindshieldChipCount.push(store.getters.damage.numberOfChips);
+      }
+
+      return windShieldOptions;
+    },
+    
     async forwardButtonAction() {
       const windshieldChipCount = this.selectedWindshieldOptions.selectedWindshieldChipCount && this.isWindshieldDamageLocation ? 
          this.selectedWindshieldOptions.selectedWindshieldChipCount[0] : null;
@@ -171,7 +226,7 @@ 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() {
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index ed214158e..f0020de43 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -70,7 +70,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);

From 312ba851bfa2e61e3100348d78a1df958d21aee5 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 4 Mar 2022 13:03:08 -0500
Subject: [PATCH 24/48] CSR-319: move validation rules and errors into
 centralized files; fix and set up validation unit tests

---
 src/constants/error-messages.js               |  12 ++
 src/helpers/validation-rules.js               |   8 ++
 src/helpers/validation-rules.spec.js          |  29 +++++
 .../damage-location-question.vue              |   9 +-
 .../replace-options-question.vue              |   1 -
 .../side-door-options/side-door-options.vue   |  25 +---
 .../vehicle-damage/vehicle-damage.spec.js     | 115 ++++++++++++++----
 src/layouts/vehicle-damage/vehicle-damage.vue |  25 ++--
 .../windshield-options/windshield-options.vue |  26 +---
 .../vehicle-style/vehicle-style.spec.js       |   7 +-
 src/ux-components/list-card/list-card.spec.js |   2 +-
 src/ux-components/list-card/list-card.vue     |   4 -
 12 files changed, 167 insertions(+), 96 deletions(-)
 create mode 100644 src/constants/error-messages.js
 create mode 100644 src/helpers/validation-rules.js
 create mode 100644 src/helpers/validation-rules.spec.js

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
new file mode 100644
index 000000000..963840bda
--- /dev/null
+++ b/src/constants/error-messages.js
@@ -0,0 +1,12 @@
+const errorMessages = {
+    DAMAGE_LOCATION_REQUIRED: "Please select damage location",
+    DAMAGE_SIDE_REQUIRED: "Please select vehicle side",
+    DRIVER_SIDE_OPTIONS_REQUIRED: "Please select window",
+    PASSENGER_SIDE_OPTIONS_REQUIRED: "Please select window",
+    WINDSHIELD_DAMAGE_TYPE_REQUIRED: "Please select windshield damage",
+    WINDSHIELD_CHIP_COUNT_REQUIRED: "Please select chip(s)",
+    WINSHIELD_REPLACE_OPTIONS_REQUIRED: "Please select windshield part",
+    REPLACE_OPTIONS_REQUIRED: "Please select rear window type",
+};
+  
+export default { errorMessages };
\ No newline at end of file
diff --git a/src/helpers/validation-rules.js b/src/helpers/validation-rules.js
new file mode 100644
index 000000000..1ac4ce818
--- /dev/null
+++ b/src/helpers/validation-rules.js
@@ -0,0 +1,8 @@
+export function required(errorMessage) {
+    return (value) => {
+        if (!value || value.length < 1) {
+            return errorMessage;
+        }
+        return true;
+    };   
+}
\ No newline at end of file
diff --git a/src/helpers/validation-rules.spec.js b/src/helpers/validation-rules.spec.js
new file mode 100644
index 000000000..323e05ff1
--- /dev/null
+++ b/src/helpers/validation-rules.spec.js
@@ -0,0 +1,29 @@
+import { required } from "@/helpers/validation-rules";
+
+describe("validation-rules.vue", () => {
+  test("required rules should return error if value missing", () => {
+
+    //Arrange
+    const testFn = required("an error");
+    
+    //Act
+    const testResponse = testFn();
+
+    //Assert
+    expect(testResponse).toBe("an error");
+  });
+});
+
+describe("validation-rules.vue", () => {
+    test("required rules should return true if value present", () => {
+  
+      //Arrange
+      const testFn = required("an error");
+      
+      //Act
+      const testResponse = testFn('some value');
+      
+      //Assert
+      expect(testResponse).toBe(true);
+    });
+  });
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 07f6612ae..ec32273f0 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -16,14 +16,11 @@
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
 import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
-defineRule("damage-location-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select damage location";
-    }
-    return true;
-});
+defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED));
 
 export default ({
     name: "damageLocationQuestion",
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 63c72f7ce..87307ae31 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,7 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
         <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXconsole.logXXXXXXXXXXXXX' : ''" aria-live="polite">
-            answersToDisplay.length: {{answersToDisplay.length}}
             <buttonQuestion
                 isWide
                 :questionText="questionText"
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index c3127c4f4..d58f986f7 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -39,28 +39,13 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import store from "@/store";
 import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
-defineRule("damage-side-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select vehicle side";
-    }
-    return true;
-});
-
-defineRule("driver-side-options-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select window";
-    }
-    return true;
-});
-
-defineRule("passenger-side-options-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select window";
-    }
-    return true;
-});
+defineRule("damage-side-required", required(errorMessages.DAMAGE_SIDE_REQUIRED));
+defineRule("driver-side-options-required", required(errorMessages.DRIVER_SIDE_OPTIONS_REQUIRED));
+defineRule("passenger-side-options-required", required(errorMessages.PASSENGER_SIDE_OPTIONS_REQUIRED));
 
 export default ({
     name: "sideDoorOptions",
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 519d33457..fe208786f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -13,11 +13,12 @@ import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-que
 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 { mount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
+import { validate } from "vee-validate";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -36,7 +37,9 @@ jest.mock("@/store", () => ({
   getters: {
     vehicle: {
       carId: "C00000000",
+      image: "test.jpg",
     },
+    eventBusItem: jest.fn(),
   },
 }));
 
@@ -211,12 +214,84 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+describe("vehicle-damage.vue", () => {
+  test("when onInvalidSubmit is triggered with errors focus will be put on the first element with an error", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+    const mockedValidationPayload = {
+      values: {},
+      errors: {
+        driverSideOptions: 'Please select window', 
+        passengerSideOptions: 'Please select window'
+      },
+      results: {},
+    }
+    const newObj = document.createElement('input');
+    newObj.setAttribute("id", "testInput");
+    newObj.setAttribute("data-focus-target", "driverSideOptions");
+    document.body.appendChild(newObj);
+    const testInputElement = document.getElementById("testInput");
+    
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+    wrapper.vm.onInvalidSubmit(mockedValidationPayload);
+    await nextTick();
+    const focusedEl = document.activeElement;
+
+    //Assert
+    expect(testInputElement).toBe(focusedEl);
+  });
+});
+
+// THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
+//    BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
+// 
+describe("vehicle-damage.vue", () => {
+  test("when validation rules are set they should validate correctly", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+    
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+    const testNull = validate( "", "replace-options-required");
+    const testString = validate( "sldfj", "replace-options-required");
+    await flushPromises();
+
+    //Assert
+    testNull.then(function(data) {
+      expect(data.valid).toEqual(false);
+    });
+    testString.then(function(data) {
+      expect(data.valid).toEqual(true);
+    });
+
+  });
+});
+
+
 function setupMocks({
   pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {
     router: {
       navigate: jest.fn(),
     },
+    store: {
+      getters: {
+        vehicle: {},
+      },
+    },
   },
 }) {
   //Mock api responses
@@ -281,6 +356,7 @@ function setupMocks({
 
   replaceOptionsQuestion.methods = {
     initializeComponent: jest.fn(),
+    updateSelectedValues: jest.fn(),
   };
 
   funnelFooter.methods = {
@@ -288,7 +364,9 @@ function setupMocks({
   }
 
   const mountOptions = getMountOptions(mountOptionsMockData);
-  const wrapper = shallowMount(vehicleDamage, mountOptions);
+  mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
+
+  const wrapper = mount(vehicleDamage, mountOptions);
 
   const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
   funnelHeaderWrapper.vm.initializeComponent =
@@ -300,38 +378,27 @@ function setupMocks({
 
   const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
   sideDoorOptionsWrapper.vm.initializeComponent =
-  sideDoorOptions.methods.initializeComponent;
+    sideDoorOptions.methods.initializeComponent;
 
-  const windshieldOptionsWrapper = wrapper.findComponent({
-    name: "windshieldOptions",
-  });
-  
+  const windshieldOptionsWrapper = wrapper.findComponent({ name: "windshieldOptions" });
   windshieldOptionsWrapper.vm.initializeComponent =
-  windshieldOptions.methods.initializeComponent;
+    windshieldOptions.methods.initializeComponent;
 
-  const funnelSubHeaderWrapper = wrapper.findComponent({
-    name: "funnelSubHeader",
-  });
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
-  const backGlassOptionsWrapper = wrapper.findComponent({
-    name: "replaceOptionsQuestion",
-  });
+  const backGlassOptionsWrapper = wrapper.findComponent({ name: "replaceOptionsQuestion" });
   backGlassOptionsWrapper.vm.initializeComponent =
-  replaceOptionsQuestion.methods.initializeComponent;
+    replaceOptionsQuestion.methods.initializeComponent;
 
-  const damageLocationQuestionWrapper = wrapper.findComponent({
-    name: "damageLocationQuestion",
-  });
+  const damageLocationQuestionWrapper = wrapper.findComponent({ name: "damageLocationQuestion" });
   damageLocationQuestionWrapper.vm.initializeComponent =
-  damageLocationQuestion.methods.initializeComponent;
+    damageLocationQuestion.methods.initializeComponent;
 
-  const funnelFooterWrapper = wrapper.findComponent({
-    name: "funnelFooter",
-  });
-
-  funnelFooterWrapper.vm.initializeComponent = funnelFooter.methods.initializeComponent;
+  const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
+  funnelFooterWrapper.vm.initializeComponent = 
+    funnelFooter.methods.initializeComponent;
 
   return { wrapper, apiPromise };
 }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index bf3353b8a..15c122b28 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -3,6 +3,8 @@
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
+        selectedDamageLocations {{selectedDamageLocations}}
+        isRearWindowDamageLocation {{ isRearWindowDamageLocation }}
         <Form
           @submit="onSubmit"
           @invalid-submit="onInvalidSubmit"
@@ -80,15 +82,11 @@ import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
 import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
-defineRule("replace-options-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select rear window type";
-    }
-    return true;
-});
-
+defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
 
 export default {
   name: "vehicle-damage",
@@ -180,21 +178,20 @@ export default {
       );
     },
     onSubmit(values) {
-      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
-      console.log('submitted: ', JSON.stringify(values, null ,2));
+      // window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
+      // TODO - ADD IN SAVING OF DATA
+      // TODO - ADD IN ADVANCING TO NEXT PAGE
+      console.log('submitted: ', JSON.stringify(values, null, 2));
     },
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
-      console.log("values: ", values);
-      console.log("errors: ", errors);
-      console.log("results: ", results);
       // get error names array
       const errorNames = errors ? Object.keys(errors) : [];
       const firstErrorEl = errorNames[0];
       if (firstErrorEl) {
-        console.log('firstErrorEl: ', firstErrorEl);
         const qsString = "[data-focus-target='" + firstErrorEl + "']";
-        document.querySelector(qsString).focus();
+        const el = document.querySelector(qsString);
+        el && el.focus();
       }
     },
   },
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 5a2c2f62e..31261d399 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="windshield-options">
-        selectedDamageLocations: {{selectedDamageLocations}}
         <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
             :isAvailable=isWindshieldDamageLocation
             :suppressError="suppressError"
@@ -29,15 +28,14 @@ import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-opt
 import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
-defineRule("windshield-damage-type-required", (value) => {
-    console.log('windshield-damage-type-required, value: ', value);
-    if (!value || value.length < 1) {
-        return "Please select windshield damage";
-    }
-    return true;
-});
+defineRule("windshield-damage-type-required", required(errorMessages.WINDSHIELD_DAMAGE_TYPE_REQUIRED));
+defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_CHIP_COUNT_REQUIRED));
+defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
+
 defineRule("checkForRepairAndReplace", (value, [other]) => {
     console.log('checkForRepairAndReplace, value: ', value, ' / other: ', other);
     if (value.toString().toUpperCase().includes("REPAIR") && other.toString().toUpperCase().includes("WINDSHIELD") && other.length > 1) {
@@ -45,18 +43,6 @@ defineRule("checkForRepairAndReplace", (value, [other]) => {
     }
     return true;
 });
-defineRule("windshield-chip-count-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select chip(s)";
-    }
-    return true;
-});
-defineRule("windshield-replace-options-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select windshield part";
-    }
-    return true;
-});
 
 export default ({
     name: "windshieldOptions",
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index 183b22d57..bf76ae76e 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -186,12 +186,7 @@ describe("vehicle-style.vue", () => {
         store: {
           commit: jest.fn(),
           getters: {
-            vehicle: {
-              year: 2020,
-              make: "Honda",
-              model: "Civic",
-              style: "2 Door",
-            },
+            vehicle: {},
           },
         },
         actionList: [
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 398c89c78..40db3c3ff 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -208,7 +208,7 @@ describe("list-card.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: [Boolean, String]}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 21b3d79c1..8e1b8bd7a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -83,7 +83,6 @@ export default {
   created(){
     if(Array.isArray(this.selectedValues)){
       this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
-      console.log('=================== this.checkValue: ', this.checkValue)
     }
   },
   computed: {
@@ -101,9 +100,6 @@ export default {
   },
   methods: {
     handleCheckChange(newValue, oldValue){
-      // console.log('LC handleCheckChange... oldValue: ', oldValue);
-      // console.log('LC handleCheckChange... newValue: ', newValue);
-
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
         this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });

From 98b4329693cfd241f54be37c3d4d662738d9c72c Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 4 Mar 2022 13:03:35 -0500
Subject: [PATCH 25/48] CSR-319: remove console logging and outdated code
 blocks

---
 .../button-question/button-question.vue       |  3 ---
 .../replace-options-question.vue              | 17 +------------
 .../windshield-chip-count-question.vue        |  5 ----
 .../windshield-damage-type-question.vue       | 25 -------------------
 .../windshield-options/windshield-options.vue |  1 -
 .../list-button-horizontal.vue                |  1 -
 src/ux-components/list-button/list-button.vue |  1 -
 src/ux-components/list-card/list-card.vue     | 15 -----------
 8 files changed, 1 insertion(+), 67 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index ee0d70f3f..e066a8c6a 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -123,9 +123,7 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
-      console.log('BQ (', this.groupName, ') handleCheckedChanged, val: ', val)
       if(this.isMultiSelect && this.selectedValues) {
-        console.log('BQ (', this.groupName, ') handleCheckedChanged, this.selectedValues is 1st: ', this.selectedValues)
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;
         if(Array.isArray(this.selectedValues)) {
@@ -135,7 +133,6 @@ export default {
       } else {
         this.selectedValues = [val.value];
       }
-      console.log('BQ (', this.groupName, ') handleCheckedChanged, this.selectedValues is now: ', this.selectedValues)
     },
   },
   components: {
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 87307ae31..cdbb0c48d 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXconsole.logXXXXXXXXXXXXX' : ''" aria-live="polite">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -44,25 +44,11 @@ export default ({
         },
         updateSelectedValues() {
             // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-            console.log('    ROQ     updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
-            console.log('    ROQ     updateSelectedValues, this.selectedValues: ', this.selectedValues);
-
             if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
-                console.log('  ROQ  ONLY ONE ANSWER!')
                 this.selectedValues = [this.answersToDisplay[0].Name];
             }
         },
     },
-    // mounted() {
-    //     console.log('**** MOUJNTED *****.  this.groupName: ', this.groupName)
-    //     console.log('    ROQ     **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
-    //         console.log('    ROQ     **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
-
-    //     if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
-    //             console.log('  ROQ  ONLY ONE ANSWER!   this.groupName: ', this.groupName)
-    //             this.selectedValues = [this.answersToDisplay[0].Name];
-    //         }
-    // },
     computed: {
         selectedValues: {
             get: function() {
@@ -90,7 +76,6 @@ export default ({
     },
     watch: {
         isAvailable(val) {
-            console.log('ROQ ^^^    isAvailable changed.')
             // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
             val && this.updateSelectedValues();
         }
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
index be41d9cfb..2bf85b618 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -37,11 +37,7 @@ export default ({
         },
         updateSelectedValues() {
             // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-            console.log('         updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
-            console.log('         updateSelectedValues, this.selectedValues: ', this.selectedValues);
-
             if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
-                console.log('    ONLY ONE ANSWER!')
                 this.selectedValues = [this.answersToDisplay[0].Name];
             }
         },
@@ -58,7 +54,6 @@ export default ({
     },
     watch: {
         isAvailable(val) {
-            console.log('***    isAvailable changed.')
             // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
             val && this.updateSelectedValues();
         }
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 6ccd623db..235ec92ec 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -17,31 +17,6 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
-// import { defineRule } from "vee-validate";
-// 
-// //DEFINE VALIDATION RULES
-// // add these to the button component above:
-// // validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
-// // :suppressError="suppressError"
-// defineRule("windshield-damage-required", (value) => {
-//     // console.log('validation rule - windshield-damage-required, value: ', value);
-//     if (!value || value.length < 1) {
-//         // console.log('validation rule - windshield-damage-required, RETURN ERROR');
-//         return "Please select windshield damage";
-//     }
-//     // console.log('validation rule - windshield-damage-required, return true');
-//     return true;
-// });
-// defineRule("checkForRepairAndReplace", (value, [other]) => {
-//     // console.log('validation rule - checkForRepairAndReplace, value: ', value);
-//     // console.log('validation rule - checkForRepairAndReplace, other: ', other);
-//     if (value.toUpperCase() === "REPAIR" && other.toString().includes("Windshield") && other.length > 1) {
-//         console.log('validation rule - checkForRepairAndReplace, RETURN ERROR');
-//         return "checkForRepairAndReplace error"
-//     }
-//     // console.log('validation rule - checkForRepairAndReplace, return true');
-//     return true;
-// });
 
 export default ({
     name: "windshieldDamageTypeQuestion",
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 31261d399..c381d4995 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -37,7 +37,6 @@ defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_C
 defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
 
 defineRule("checkForRepairAndReplace", (value, [other]) => {
-    console.log('checkForRepairAndReplace, value: ', value, ' / other: ', other);
     if (value.toString().toUpperCase().includes("REPAIR") && other.toString().toUpperCase().includes("WINDSHIELD") && other.length > 1) {
         return "checkForRepairAndReplace error"
     }
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index ca2d261cf..6d1cde2d4 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -111,7 +111,6 @@ export default {
     };
 
     if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
-      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
       fieldOptions['initialValue'] = fieldOptions.checkedValue;
     }
     const { 
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0db66ee2c..0115564ef 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -114,7 +114,6 @@ export default {
     };
 
     if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
-      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
       fieldOptions['initialValue'] = fieldOptions.checkedValue;
     }
     const { 
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 8e1b8bd7a..5c74a06c1 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -107,23 +107,14 @@ export default {
     }
   },
   setup(props) {
-    // console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
-    // console.log('RUNNING setup... ... ... props.value: ', props.value)
-    console.log('RUNNING setup... ... ... props.selectedValues: ', props.selectedValues)
-
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-//     const { selectedValues, value } = toRefs(props);
-// console.log('XXXXXXX selectedValues: ', selectedValues)
-// console.log('XXXXXXX value: ', value)
-
     const fieldOptions = {
       type: inputType,
       checkedValue: props.value,
     };
 
     if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
-      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
       fieldOptions['initialValue'] = fieldOptions.checkedValue;
     }
 
@@ -137,12 +128,6 @@ export default {
       errors,
     };
   },
-  // watch: {
-  //   checkValue(val) {
-  //     console.log('LC > CHANGE in checkValue, val: ', val)
-  //     // this.handleChange()
-  //   }
-  // },
 };
 </script>
 

From 13532b1c5dba7d662f9956d69aa6ce060534948f Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Fri, 4 Mar 2022 14:08:14 -0500
Subject: [PATCH 26/48] update

---
 .../vehicle-parts/glass-part-question/glass-part-question.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 37f58e677..e7f4757ce 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
@@ -8,7 +8,7 @@
 <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]" :selectedValues="selectedTint[name]" :value="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
+            <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
             require(`@/assets/img/tints/${getTintSourceImage(
               glassLocation,
               name

From b3c869f29323c9a7ebaff356bce2e4db04fa42d8 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 4 Mar 2022 14:22:25 -0500
Subject: [PATCH 27/48] radio updates

---
 .../glass-part-question.vue                   | 356 ++++++++++--------
 src/layouts/vehicle-parts/vehicle-parts.vue   |   2 +-
 src/ux-components/list-card/list-card.vue     |   9 +
 3 files changed, 203 insertions(+), 164 deletions(-)

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 e7f4757ce..e923af0c6 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
@@ -1,33 +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">
-            <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
+      <div class="col">
+        <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">
-                <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>
+        "
+        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>
+      </div>
     </transition>
-</div>
+  </div>
 </template>
 
 <script>
@@ -36,174 +65,175 @@ import listCard from "@/ux-components/list-card/list-card";
 import buttonQuestion from "@/common-components/button-question/button-question";
 
 // Supporting files
-import {
-    getTintImage
-} from "@/constants/tint-mapper";
-import {
-    getCustomTransformValue
-} from "@/constants/dynamictext-mapper";
+import { getTintImage } from "@/constants/tint-mapper";
+import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
 
 export default {
-    name: "glass-part-question",
-    inheritAttrs: false,
-    data() {
-        return {
-            glassColorQuestion: "",
-            glassFeatureQuestion: "",
-            selectedTint: {}, // v-model for the list card selections
-        };
+  name: "glass-part-question",
+  inheritAttrs: false,
+  data() {
+    return {
+      glassColorQuestion: "",
+      glassFeatureQuestion: "",
+      selectedTint: {}, // v-model for the list card selections
+    };
+  },
+  props: {
+    glassName: String,
+    glassLocation: String,
+    colorAnswers: Array,
+    modelValue: {
+      type: Object,
+      default: () => ({}),
     },
-    props: {
-        glassName: String,
-        glassLocation: String,
-        colorAnswers: Array,
-        modelValue: {
-            type: Object,
-            default: () => ({}),
-        },
+  },
+  mounted() {
+    this.LoadPreselectedValues();
+    if (Object.keys(this.featureListData).length === 1) {
+      this.AutoSelectTintIfOnlyOneColor(Object.keys(this.featureListData)[0]);
+    }
+  },
+  components: {
+    listCard,
+    buttonQuestion,
+  },
+  computed: {
+    colorQuestionText() {
+      return getCustomTransformValue(
+        this.glassColorQuestion,
+        `${this.glassLocation} ${this.glassName}`
+      );
     },
-    mounted() {
-        this.LoadPreselectedValues();
-        if (Object.keys(this.featureListData).length === 1) {
-            this.AutoSelectTintIfOnlyOneColor(Object.keys(this.featureListData)[0]);
+
+    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;
+    },
+
+    PartDataFromApi() {
+      return this.$store.getters.pageData(this.$route.query.fmgPage);
+    },
+  },
+  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
+      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,
+              ],
+            };
+          }
         }
+      });
     },
-    components: {
-        listCard,
-        buttonQuestion,
+
+    AutoSelectTintIfOnlyOneColor(tintColor) {
+      this.selectedTint[tintColor] = {
+        buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+        checkValue: "",
+        value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+      };
     },
-    computed: {
-        colorQuestionText() {
-            return getCustomTransformValue(
-                this.glassColorQuestion,
-                `${this.glassLocation} ${this.glassName}`
-            );
-        },
 
-        selectedPart: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
-            },
-        },
+    LoadPreselectedValues() {
+      if (Object.keys(this.modelValue).length !== 0) {
+        // Populate button-question model-value if parts data already exists in VueX
+        const alreadyPopulatedPartsData =
+          this.$store.getters.lineItems.glassParts;
 
-        // 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] || [];
+        Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+          const partNumber = alreadyPopulatedPartsData[key].partNumber;
+          const tintColor = alreadyPopulatedPartsData[key].color;
 
-                // 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: {
-        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]
-                        };
-                    }
-                }
-            });
-        },
-
-        AutoSelectTintIfOnlyOneColor(tintColor) {
-            this.selectedTint[tintColor] = {
+          Object.keys(this.modelValue).forEach((key) => {
+            if (this.modelValue[key][0] === partNumber) {
+              this.selectedTint[tintColor] = {
                 buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
                 checkValue: "",
-                value: "",
-            };
-        },
-
-        LoadPreselectedValues() {
-            if (Object.keys(this.modelValue).length !== 0) {
-                // 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: "",
-                            };
-                        }
-                    });
-                });
+                value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+              };
             }
-        },
+          });
+        });
+      }
     },
+  },
 };
 </script>
 
 <style lang="scss">
 .nested-radio {
-    .ui-radio {
-        flex-direction: column;
-        margin: 0.25rem 0;
-    }
+  .ui-radio {
+    flex-direction: column;
+    margin: 0.25rem 0;
+  }
 
-    p {
-        font-size: 0.875rem;
-    }
+  p {
+    font-size: 0.875rem;
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 7c0efeda7..39c8bbbf3 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -136,7 +136,7 @@ export default {
             }
           });
         });
-
+        console.log(this.glassParts)
         return {
           glassName: g.glassName,
           glassLocation: g.glassLocation,
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index c1fc6d089..832f33c6b 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -70,6 +70,7 @@ export default {
     colLength: String,
     validationRules: String,
     selectedValues: [Array, String],
+    modelValue: Object,
     hasError: Boolean,
   },
   data(){
@@ -81,6 +82,14 @@ export default {
     if(Array.isArray(this.selectedValues)){
       this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
     }
+    this.$nextTick(() => {
+      if(Object.keys(this.modelValue).length > 0) {
+        this.checkValue = this.modelValue.value;
+        const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
+        this.$emit('isCheckedChanged', emitEvent);
+        this.$emit('update:modelValue', emitEvent);
+      }
+    })
   },
   computed: {
     getLabelClasses() {

From 84b0257de26d91610cf3e7f2a787739669ee73c7 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 4 Mar 2022 15:02:39 -0500
Subject: [PATCH 28/48] CSR-319: improve repair/replace logic

---
 src/constants/error-messages.js               |  2 +-
 .../damage-location-question.vue              |  2 +-
 .../side-door-options/side-door-options.vue   |  2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue | 51 ++++++++-----------
 .../windshield-options/windshield-options.vue |  8 +--
 5 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 963840bda..ba2b0e585 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -9,4 +9,4 @@ const errorMessages = {
     REPLACE_OPTIONS_REQUIRED: "Please select rear window type",
 };
   
-export default { errorMessages };
\ No newline at end of file
+export { errorMessages };
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index ec32273f0..dff518342 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -17,7 +17,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import store from "@/store";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
+import { errorMessages } from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
 defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED));
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index d58f986f7..9366954ec 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -40,7 +40,7 @@ import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-que
 import store from "@/store";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
+import { errorMessages } from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
 defineRule("damage-side-required", required(errorMessages.DAMAGE_SIDE_REQUIRED));
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 1f7fa0996..7d68961d9 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -7,7 +7,7 @@
           @submit="onSubmit"
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
-          v-slot="{ values, meta, errors }"
+          v-slot="{ meta }"
         >
           <damageLocationQuestion
             ref="damageLocation"
@@ -17,12 +17,12 @@
           <windshieldOptions
             ref="windshieldOptions" 
             v-model="selectedWindshieldOptions"
-            :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            :hasRepairReplaceConflict="hasRepairReplaceConflict"
             :selectedDamageLocations="selectedDamageLocations"
           />
           <alert
             class="my-3"
-            v-if="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            v-show="hasRepairReplaceConflict"
             alertClass="alert-danger"
             alertHeadline="You'll need to schedule separate appointments"
             alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
@@ -32,32 +32,22 @@
             ref="sideDoorOptions"
             groupName="SideDoorSideQuestion"
             v-model="sideDoorOptionsData"
+            v-show="!hasRepairReplaceConflict"
             :selectedDamageLocations="selectedDamageLocations"
           />
           <replaceOptionsQuestion
             ref="backGlassOptions"
-            :isAvailable="isRearWindowDamageLocation"
+            :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
             v-model="selectedRearReplaceOptions"
             groupName="BackGlassReplaceOptionsQuestion"
             validationRules="replace-options-required"
           />
           <funnel-footer
-              ref="funnelFooter"
-              :isDisabled="!meta.valid"
-              @back-clicked="backButtonAction"
-              @ForwardClicked="forwardButtonAction"
+            ref="funnelFooter"
+            :isDisabled="!meta.valid"
+            @back-clicked="backButtonAction"
+            @ForwardClicked="forwardButtonAction"
           />
-
-          <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION  -->
-              <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
-              <p>Current Form, values:</p>
-              <pre>{{ values }}</pre>
-              <p>Errors:</p>
-              <pre>{{ errors }}</pre>
-              <p>Is Form Valid? (Meta.valid):</p>
-              <pre>{{ meta.valid }}</pre>
-            </div>
-
         </Form>
     </div>
 </template>
@@ -82,7 +72,7 @@ import store from "@/store";
 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 { errorMessages } from "@/constants/error-messages";
 import { damageLocationsParts } from "@/constants/damage-locations-parts.js";
 import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
 
@@ -169,12 +159,12 @@ export default {
         this.$route
       );
     },
-    onSubmit(values) {
-      // window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
-      // TODO - ADD IN SAVING OF DATA
-      // TODO - ADD IN ADVANCING TO NEXT PAGE
-      console.log('submitted: ', JSON.stringify(values, null, 2));
-    },
+    // onSubmit(values) {
+    //   // window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
+    //   // TODO - ADD IN SAVING OF DATA
+    //   // TODO - ADD IN ADVANCING TO NEXT PAGE
+    //   console.log('submitted: ', JSON.stringify(values, null, 2));
+    // },
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
       // get error names array
@@ -260,7 +250,7 @@ export default {
       return selectedGlassToReplace;
     },
   },
-  computed:{
+  computed: {
     isWindshieldDamageLocation() {
       return this.selectedDamageLocations.some(selectedDamages => 
         {
@@ -282,7 +272,7 @@ export default {
     isWindshieldRepair() {
       if (!this.isWindshieldDamageLocation) return false;
       
-      return this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType => 
+      return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType => 
         {
             return selectedDamageType.toUpperCase() === "REPAIR";
         });
@@ -302,7 +292,10 @@ export default {
         {
             return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
         });
-    }
+    },
+    hasRepairReplaceConflict() {
+      return this.isWindshieldDamageLocation && this.selectedDamageLocations.length > 1 && this.isWindshieldRepair;
+    },
   },
 
   components: {
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index c381d4995..216ba623e 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -2,13 +2,13 @@
     <div class="windshield-options">
         <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
             :isAvailable=isWindshieldDamageLocation
-            :suppressError="suppressError"
+            :suppressError="hasRepairReplaceConflict"
             groupName="WindshieldDamageTypeQuestion"
             v-model="selectedWindshieldDamageTypeValues"
             validationRules="windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion"
         />
         <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
-            :isAvailable=isRepairOptionSelected
+            :isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
             groupName="WindshieldChipCountQuestion"
             v-model="selectedWindshieldChipCountValues"
             validationRules="windshield-chip-count-required"
@@ -29,7 +29,7 @@ import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-opti
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
+import { errorMessages } from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
 defineRule("windshield-damage-type-required", required(errorMessages.WINDSHIELD_DAMAGE_TYPE_REQUIRED));
@@ -49,7 +49,7 @@ export default ({
     props: {
         modelValue: Array,
         selectedDamageLocations: Array,
-        suppressError: Boolean
+        hasRepairReplaceConflict: Boolean
     },
 
     methods: {

From 4111bd1a5cdd8a68f77c93a01838a9de4d8af750 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 4 Mar 2022 15:02:56 -0500
Subject: [PATCH 29/48] CSR-319: clean up

---
 src/ux-components/list-card/list-card.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index f338ec800..29b6fc2ee 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -15,8 +15,6 @@
         v-model="checkValue"
         @change="handleCheckChange(value)"
       />
-      value: {{ value }}
-      checkValue: {{ checkValue }}
       <label
         :for="buttonID"
         class="d-flex w-100 align-items-center px-2 h-100"

From 7cbcc8447661369d1b8af1ea5ddc5541267b1ce8 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 4 Mar 2022 15:03:14 -0500
Subject: [PATCH 30/48] CSR-319: update form test page

---
 src/layouts/form-test/form-test.vue | 104 +++++++++++++++++++---------
 1 file changed, 71 insertions(+), 33 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 32bf63289..cb2a7f653 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -16,13 +16,13 @@
             />
             <windshieldOptions
               ref="windshieldOptions" 
-              v-model="selectedWindshieldOptions" 
-              :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              v-model="selectedWindshieldOptions"
+              :hasRepairReplaceConflict="hasRepairReplaceConflict"
               :selectedDamageLocations="selectedDamageLocations"
             />
             <alert
               class="my-3"
-              v-if="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              v-show="hasRepairReplaceConflict"
               alertClass="alert-danger"
               alertHeadline="You'll need to schedule separate appointments"
               alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
@@ -32,11 +32,12 @@
               ref="sideDoorOptions"
               groupName="SideDoorSideQuestion"
               v-model="sideDoorOptionsData"
+              v-show="!hasRepairReplaceConflict"
               :selectedDamageLocations="selectedDamageLocations"
             />
             <replaceOptionsQuestion
               ref="backGlassOptions"
-              :isAvailable="isRearWindowDamageLocation"
+              :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
               v-model="selectedRearReplaceOptions"
               groupName="BackGlassReplaceOptionsQuestion"
               validationRules="replace-options-required"
@@ -44,6 +45,8 @@
             <funnel-footer
               ref="funnelFooter"
               :isDisabled="!meta.valid"
+              @back-clicked="backButtonAction"
+              @ForwardClicked="forwardButtonAction"
             />
 
             <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION  -->
@@ -79,14 +82,13 @@ import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 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
-defineRule("replace-options-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select rear window type";
-    }
-    return true;
-});
+defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
 
 export default {
   name: "form-test",
@@ -113,8 +115,6 @@ export default {
 
     const resultMap = await settleAllPromises(promiseResultMap);
 
-    console.log('resultMap: ', resultMap);
-
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
       vm.$refs.funnelHeader.initializeComponent(
@@ -156,32 +156,11 @@ export default {
       selectedRearReplaceOptions: [],
     }
   },
-  computed: {
-    isRearWindowDamageLocation() {
-      return this.selectedDamageLocations.some(selectedDamages => 
-        {
-          return selectedDamages.toUpperCase() === "REARWINDOW";
-        });
-    },
-  },
-  components: {
-    Form,
-    funnelHeader,
-    vehicleBanner,
-    funnelSubHeader,
-    sideDoorOptions,
-    damageLocationQuestion,
-    replaceOptionsQuestion,
-    funnelFooter,
-    windshieldOptions,
-    alert,
-  },
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
     },
     resetDependentState() {
-      // Invokes
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     onSubmit(values) {
@@ -203,5 +182,64 @@ export default {
       }
     },
   },
+  computed: {
+    isWindshieldDamageLocation() {
+      return this.selectedDamageLocations.some(selectedDamages => 
+        {
+            return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
+        });
+    },
+    isSideDoorDamageLocation() {
+      return this.selectedDamageLocations.some(selectedDamages => 
+        {
+            return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
+        });
+    },
+    isRearWindowDamageLocation() {
+      return this.selectedDamageLocations.some(selectedDamages => 
+        {
+            return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
+        });
+    },
+    isWindshieldRepair() {
+      if (!this.isWindshieldDamageLocation) return false;
+      
+      return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType => 
+        {
+            return selectedDamageType.toUpperCase() === "REPAIR";
+        });
+    },
+    isDriverSideReplace() {
+      if (!this.isSideDoorDamageLocation) return false;
+
+      return this.sideDoorOptionsData.selectedDoorSides.some(selectedDriverSide => 
+        {
+            return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
+        });
+    },
+    isPassengerSideReplace() {
+      if (!this.isSideDoorDamageLocation) return false;
+
+      return this.sideDoorOptionsData.selectedDoorSides.some(selectedPassengerSide => 
+        {
+            return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
+        });
+    },
+    hasRepairReplaceConflict() {
+      return this.isWindshieldDamageLocation && this.selectedDamageLocations.length > 1 && this.isWindshieldRepair;
+    },
+  },
+  components: {
+    funnelHeader,
+    funnelFooter,
+    vehicleBanner,
+    funnelSubHeader,
+    sideDoorOptions,
+    damageLocationQuestion,
+    windshieldOptions,
+    replaceOptionsQuestion,
+    Form,
+    alert,
+  },
 };
 </script>

From 228811af93f59b56d12fa15b42f5eb8001400f4a Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 4 Mar 2022 15:10:34 -0500
Subject: [PATCH 31/48] CSR-319: remove unneeded computed value

---
 .../windshield-damage-type-question.vue           | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 235ec92ec..4510b651c 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -48,21 +48,6 @@ export default ({
                 this.$emit("update:modelValue", newValue);
             }
         },
-        answersToDisplay(){
-            const filteredAnswers = Array.isArray(this.answersFromCms) 
-                ? this.answersFromCms.filter(ans => 
-                    {
-                        const name = ans.Name.split('-');
-                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
-                    }) 
-                : [];
-
-            return filteredAnswers.map(ans => {
-                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
-                ans.Name = newName;
-                return ans;
-            });
-        },
     },
     components: {
         buttonQuestion,

From 533c79938532c0b71fa232fae3f9e4048b2f713e Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Fri, 4 Mar 2022 16:56:58 -0500
Subject: [PATCH 32/48] defects

---
 .../glass-part-question.vue                   |  54 +--
 src/layouts/vehicle-parts/vehicle-parts.vue   | 381 +++++++++---------
 src/ux-components/list-card/list-card.vue     | 101 +++--
 3 files changed, 285 insertions(+), 251 deletions(-)

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 e923af0c6..9be24b91b 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
@@ -82,16 +82,10 @@ export default {
     glassName: String,
     glassLocation: String,
     colorAnswers: Array,
-    modelValue: {
-      type: Object,
-      default: () => ({}),
-    },
+    modelValue: Object,
   },
   mounted() {
     this.LoadPreselectedValues();
-    if (Object.keys(this.featureListData).length === 1) {
-      this.AutoSelectTintIfOnlyOneColor(Object.keys(this.featureListData)[0]);
-    }
   },
   components: {
     listCard,
@@ -144,6 +138,7 @@ export default {
     },
   },
   methods: {
+    // Initialize the component data
     initializeComponent(cmsContent) {
       this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
       this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
@@ -191,35 +186,30 @@ export default {
       });
     },
 
-    AutoSelectTintIfOnlyOneColor(tintColor) {
-      this.selectedTint[tintColor] = {
-        buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
-        checkValue: "",
-        value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
-      };
-    },
-
+    // Loads the preselected values from the store.
     LoadPreselectedValues() {
-      if (Object.keys(this.modelValue).length !== 0) {
-        // Populate button-question model-value if parts data already exists in VueX
-        const alreadyPopulatedPartsData =
-          this.$store.getters.lineItems.glassParts;
+      this.$nextTick(() => {
+        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(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: `${this.glassLocation}-${this.glassName}-${tintColor}`,
-              };
-            }
+            Object.keys(this.modelValue).forEach((key) => {
+              if (this.modelValue[key][0] === partNumber) {
+                this.selectedTint[tintColor] = {
+                  buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+                  checkValue: "",
+                  value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+                };
+              }
+            });
           });
-        });
-      }
+        }
+      });
     },
   },
 };
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 39c8bbbf3..41e17f601 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/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="col">
-          <alert
-            class="rounded border-0 shadow-sm"
-            alertClass="alert-warning"
-            :alertHeadline="alertWidgetData.headline"
-            :alertCopy="alertWidgetData.copy"
-            :isDismissible="false"
-          />
+        <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>
 
     <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>
@@ -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 { 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,
-      };
-    });
-  },
-  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],
-              };
-            }
-          });
+            // 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,
+            };
         });
-        console.log(this.glassParts)
+    },
+    data() {
         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;
-          }, []),
+            glassParts: {},
+            alertWidgetData: Object,
         };
-      });
-
-      return mappedData;
     },
-
-    PartsFromApi() {
-      return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
+    components: {
+        glassPartQuestion,
+        funnelHeader,
+        vehicleBanner,
+        funnelSubHeader,
+        funnelFooter,
+        alert,
     },
+    computed: {
+        PartsForQuestions() {
+            const partsData = this.PartsFromApi;
 
-    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;
-      }
+            // Map API result data, to vehicle-parts data structure
+            const mappedData = partsData.partsOrQuestions.map((g) => {
 
-      return false;
-    },
-    backButtonAction() {
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-    },
-    forwardButtonAction() {
-      const selectedGlassPartNumbers = [];
-      const matchedParts = [];
+                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;
+                    }, []),
+                };
+            });
 
-      // 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]);
+            return mappedData;
+        },
+
+        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>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 832f33c6b..8c5ac9e23 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/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">
-          {{buttonLabelSubCopy}}
+        <p
+          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>
@@ -73,23 +81,26 @@ export default {
     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(){
-    if(Array.isArray(this.selectedValues)){
-      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
-    }
-    this.$nextTick(() => {
-      if(Object.keys(this.modelValue).length > 0) {
-        this.checkValue = this.modelValue.value;
-        const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
-        this.$emit('isCheckedChanged', emitEvent);
-        this.$emit('update:modelValue', emitEvent);
+  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() {
@@ -105,23 +116,26 @@ export default {
     },
   },
   methods: {
-    handleCheckChange(newValue, oldValue){
-      const isInitialization = typeof(oldValue) === 'function';
+    handleCheckChange(newValue, oldValue) {
+      const isInitialization = typeof oldValue === "function";
       if (!isInitialization) {
-        const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
-        this.$emit('isCheckedChanged', emitEvent);
-        this.$emit('update:modelValue', emitEvent);
+        const emitEvent = {
+          checkValue: this.checkValue,
+          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,
-        handleChange,
-        errors,
-    } = useField(props.groupName, props.validationRules,
-    {
+      value: inputValue,
+      handleChange,
+      errors,
+    } = useField(props.groupName, props.validationRules, {
       type: inputType,
       checkedValue: props.value,
     });
@@ -136,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;
@@ -147,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;
@@ -206,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;
@@ -226,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 {
@@ -254,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;
           }
@@ -286,4 +329,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

From eead9f0ccd26233c5a771a53912461441d0b2724 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Sun, 6 Mar 2022 15:29:28 -0500
Subject: [PATCH 33/48] CSR-297 persist vehicle damage selections and tests

---
 src/constants/damage-locations-parts.js       |   8 -
 src/constants/damage-locations-selected.js    |  14 ++
 .../vehicle-damage/vehicle-damage.spec.js     | 172 +++++++++++++++++-
 src/layouts/vehicle-damage/vehicle-damage.vue | 117 ++++++++----
 src/layouts/vehicle-year/vehicle-year.vue     |   4 +
 5 files changed, 268 insertions(+), 47 deletions(-)
 delete mode 100644 src/constants/damage-locations-parts.js

diff --git a/src/constants/damage-locations-parts.js b/src/constants/damage-locations-parts.js
deleted file mode 100644
index 465d58420..000000000
--- a/src/constants/damage-locations-parts.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const damageLocationsParts = {
-    WINDSHIELD: "Windshield",
-    DRIVER: "Driver",
-    PASSENGER: "Passenger",
-    REAR: "Rear",
-  };
-  
-  export { damageLocationsParts };
\ No newline at end of file
diff --git a/src/constants/damage-locations-selected.js b/src/constants/damage-locations-selected.js
index 827bbf57b..905d9c8c5 100644
--- a/src/constants/damage-locations-selected.js
+++ b/src/constants/damage-locations-selected.js
@@ -2,6 +2,20 @@ 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 };
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 39ee4beda..67d127d75 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -19,6 +19,7 @@ import { nextTick } from "vue";
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -38,6 +39,9 @@ jest.mock("@/store", () => ({
     vehicle: {
       carId: "C00000000",
     },
+    damage: {
+      glassToReplace: [] 
+    },
   },
 }));
 
@@ -252,7 +256,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: [
       {
@@ -272,7 +276,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, },],},
     });
 
@@ -296,7 +300,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);
@@ -389,13 +393,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, },],},
     });
 
@@ -416,7 +420,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);
   });
@@ -596,6 +600,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" }, 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" }, 
+        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" }, 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" }, 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" }, damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};
+
+    var glassSelections = wrapper.vm.getRearReplaceOptionsFromStore();
+      
+    //Assert
+    expect(glassSelections).toEqual(expectedGlass);
+
+  });
+});
+
+
 function setupMocks({
   pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 1fa6fe6c6..f71fde437 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -46,7 +46,6 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
-import { damageLocationsParts } from "@/constants/damage-locations-parts.js";
 import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 
@@ -107,14 +106,14 @@ export default {
   },
   data(){
     return {
-      selectedDamageLocations: this.getDamageLocations(),
+      selectedDamageLocations: this.getDamageLocationsFromStore(),
       sideDoorOptionsData: {
-        selectedDoorSides: [],
-        selectedDriverSideReplaceOptions: [],
-        selectedPassengerSideReplaceOptions: []
+        selectedDoorSides: this.getDoorSidesFromStore(),
+        selectedDriverSideReplaceOptions: this.getDriverSideReplaceOptionsFromStore(),
+        selectedPassengerSideReplaceOptions: this.getPassengerSideReplaceOptionsFromStore()
       },
-      selectedWindshieldOptions: this.getWindshieldOptions(),
-      selectedRearReplaceOptions: [],
+      selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
+      selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
     }
   },
   methods: {
@@ -125,6 +124,10 @@ export default {
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     backButtonAction() {
+      store.commit(this.storeMutations.UPDATE_IS_REPAIR, null);
+      store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
+      store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, []);
+
       // route to move backwards
       this.$router.navigate(
         this.navigationScenarios.CLICKED_BACK,
@@ -132,60 +135,108 @@ export default {
       );
     },
     
-    getDamageLocations() {
+    getDamageLocationsFromStore() {
       var glassSelections = [];
-      if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsParts.WINDSHIELD }) ||
+      
+      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 === damageLocationsParts.DRIVER })) {
+      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 === damageLocationsParts.PASSENGER })) {
-          glassSelections.push(damageLocationsSelected.SIDEDOOR);
-      }
-
-      if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsParts.REAR })) {
+      if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.REAR })) {
           glassSelections.push(damageLocationsSelected.REARWINDOW);
       }
 
       return glassSelections;
     },
 
-    getWindshieldOptions() {
+    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 === damageLocationsParts.WINDSHIELD &&
-            glass.name === "Single" })) {
-            windShieldOptions.selectedWindshieldDamageType.push("Replace");
-            windShieldOptions.selectedWindshieldReplaceOptions.push("Single");
+        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 === damageLocationsParts.WINDSHIELD &&
-            glass.name === "Driver" })) {
-            windShieldOptions.selectedWindshieldDamageType.push("Replace");
-            windShieldOptions.selectedWindshieldReplaceOptions.push("Driver");
+        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 === damageLocationsParts.WINDSHIELD &&
-            glass.name === "Passenger" })) {
-            windShieldOptions.selectedWindshieldDamageType.push("Replace");
-            windShieldOptions.selectedWindshieldReplaceOptions.push("Passenger");
+        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("Repair");
+          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() {
       const windshieldChipCount = this.selectedWindshieldOptions.selectedWindshieldChipCount && this.isWindshieldDamageLocation ? 
          this.selectedWindshieldOptions.selectedWindshieldChipCount[0] : null;
@@ -233,25 +284,25 @@ export default {
       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});
           })
       }
       
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 460c8ced4..869cd6acb 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -93,6 +93,10 @@ export default {
       store.commit(storeMutations.UPDATE_STYLE, null);
       store.commit(storeMutations.UPDATE_CAR_ID, null);
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+      store.commit(storeMutations.UPDATE_IS_REPAIR, null);
+      store.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
+      store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
+  
 
       // Invokes
       store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);

From a40600bba553a934719a5faa6a0dffe538cd232c Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Sun, 6 Mar 2022 15:42:47 -0500
Subject: [PATCH 34/48] CSR-297 - reset vehicle damage selections

---
 src/layouts/vehicle-style/vehicle-style.vue | 4 ++++
 src/layouts/vehicle-year/vehicle-year.vue   | 3 ---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index d7b37b4b0..c5aec920c 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/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, []);
     },
   },
 
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 869cd6acb..563ecb31d 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -93,9 +93,6 @@ export default {
       store.commit(storeMutations.UPDATE_STYLE, null);
       store.commit(storeMutations.UPDATE_CAR_ID, null);
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
-      store.commit(storeMutations.UPDATE_IS_REPAIR, null);
-      store.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
-      store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
   
 
       // Invokes

From 2f88ac6daa82b842fa31cf00f63189fc0c794332 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Sun, 6 Mar 2022 20:56:03 -0500
Subject: [PATCH 35/48] CSR-297 this moved to style page

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index f71fde437..9a16b7a96 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -124,10 +124,6 @@ export default {
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     backButtonAction() {
-      store.commit(this.storeMutations.UPDATE_IS_REPAIR, null);
-      store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
-      store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, []);
-
       // route to move backwards
       this.$router.navigate(
         this.navigationScenarios.CLICKED_BACK,

From 6f6cbc9db497e07fa4a6d848c658f708c31ed4e6 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 7 Mar 2022 08:14:03 -0500
Subject: [PATCH 36/48] Fix spacing per qa.

---
 src/common-components/vin-information/vin-information.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/vin-information/vin-information.vue b/src/common-components/vin-information/vin-information.vue
index a90dfd467..3e5b67a91 100644
--- a/src/common-components/vin-information/vin-information.vue
+++ b/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>

From 3e91d1dbee4a305618d0788c88588df368627d87 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Mon, 7 Mar 2022 08:51:13 -0500
Subject: [PATCH 37/48] CSR-297 tint mapper

---
 src/constants/tint-mapper.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/constants/tint-mapper.js b/src/constants/tint-mapper.js
index 949ab19a7..516fc2a1e 100644
--- a/src/constants/tint-mapper.js
+++ b/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" },
 
     ]
 }

From 7ca8c72079c8a2c966af35c2a8d1b3e565ecb032 Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Mon, 7 Mar 2022 09:13:12 -0500
Subject: [PATCH 38/48] CSR-109

---
 src/layouts/vehicle-parts/vehicle-parts.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 41e17f601..abc8ee936 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -197,10 +197,9 @@ export default {
                 this.$route
             );
         },
-
-        // Nothing here to reset, the previous pages will setting parts correctly for here.
+        
         resetDependentState() {
-
+            // Nothing additional to reset here: The page save is already fully resetting all the line-items on the order
         },
 
         LoadInitialPartsData() {

From c7e18f2dedad0c68c6fb44f4918131a61f91e657 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 7 Mar 2022 09:34:41 -0500
Subject: [PATCH 39/48] Remove focus outline on iPhone.

---
 .../list-button-horizontal/list-button-horizontal.vue            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index c64a2adb4..873bf7cdf 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -142,6 +142,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 {

From acc7adcb4a29194182665269ac5c4d5efdc1e9e6 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Mon, 7 Mar 2022 09:56:31 -0500
Subject: [PATCH 40/48] CSR-297 chip count reset in page and not store

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 4 +++-
 src/store/index.js                            | 3 ---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9a16b7a96..fc684ef63 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -239,8 +239,10 @@ export default {
 
       store.commit(this.storeMutations.UPDATE_IS_REPAIR, this.isWindshieldRepair);
 
-      if (windshieldChipCount){
+      if (this.isWindshieldRepair && windshieldChipCount){
         store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, parseInt(windshieldChipCount));
+      } else {
+        store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
       }
 
       store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace());
diff --git a/src/store/index.js b/src/store/index.js
index a231dfabb..4b0e06eb4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -68,9 +68,6 @@ export const mutations = {
   },
   updateIsRepair(state, isRepair){
     state.order.damage.isRepair = isRepair;
-    if (!isRepair){
-      this.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
-    }
   },
   updateNumberOfChips(state, numberOfChips){
     state.order.damage.numberOfChips = numberOfChips;

From c952d3f85bd9410872282a60a4b2ff36f1c9da9e Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Mon, 7 Mar 2022 10:40:05 -0500
Subject: [PATCH 41/48] CSR-297 clean up chip count logic

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index fc684ef63..ebb188d89 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -234,13 +234,10 @@ export default {
     },
 
     async forwardButtonAction() {
-      const windshieldChipCount = this.selectedWindshieldOptions.selectedWindshieldChipCount && this.isWindshieldDamageLocation ? 
-         this.selectedWindshieldOptions.selectedWindshieldChipCount[0] : null;
-
       store.commit(this.storeMutations.UPDATE_IS_REPAIR, this.isWindshieldRepair);
 
-      if (this.isWindshieldRepair && windshieldChipCount){
-        store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, parseInt(windshieldChipCount));
+      if (this.isWindshieldRepair && this.selectedWindshieldOptions.selectedWindshieldChipCount){
+        store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, parseInt(this.selectedWindshieldOptions.selectedWindshieldChipCount));
       } else {
         store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
       }

From bdd80337699a79be4a75beeed4e31fb7a1348d92 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Mon, 7 Mar 2022 11:17:55 -0500
Subject: [PATCH 42/48] CSR-297

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index ebb188d89..fa0fc4a73 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -236,7 +236,7 @@ export default {
     async forwardButtonAction() {
       store.commit(this.storeMutations.UPDATE_IS_REPAIR, this.isWindshieldRepair);
 
-      if (this.isWindshieldRepair && this.selectedWindshieldOptions.selectedWindshieldChipCount){
+      if (this.isWindshieldRepair){
         store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, parseInt(this.selectedWindshieldOptions.selectedWindshieldChipCount));
       } else {
         store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, null);

From d17dc6ba2af385b57e11a3f9b78702808d20c7a2 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 7 Mar 2022 13:47:28 -0500
Subject: [PATCH 43/48] Update arrow color on error.

---
 src/styles/common-error-styles.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 2c26e69d7..42c8e499c 100644
--- a/src/styles/common-error-styles.scss
+++ b/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;
+    }
   }
 }
 

From 0f1f9398ec896e80eb576c9a0212fb94fb2ad690 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 7 Mar 2022 14:28:31 -0500
Subject: [PATCH 44/48] CSR-319: remove commented out method

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 7d68961d9..71dc44211 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -159,12 +159,6 @@ export default {
         this.$route
       );
     },
-    // onSubmit(values) {
-    //   // window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
-    //   // TODO - ADD IN SAVING OF DATA
-    //   // TODO - ADD IN ADVANCING TO NEXT PAGE
-    //   console.log('submitted: ', JSON.stringify(values, null, 2));
-    // },
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
       // get error names array

From 74d3694c4fa6bf3ad1eabd0917f9ed12cdfeda5e Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 7 Mar 2022 16:09:10 -0500
Subject: [PATCH 45/48] CSR-319: restore needed empty onSubmit call (to prevent
 default form submission)

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 2fcdd2998..643aa0f5b 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -159,6 +159,7 @@ export default {
         this.$route
       );
     },
+    onSubmit() {}, // DO NOT REMOVE; needed to prevent default form submit behavior
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
       // get error names array

From 4bff7b779261dc7d0d7b126cb7e9aa5215159216 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 8 Mar 2022 10:46:47 -0500
Subject: [PATCH 46/48] CSR-269 style updates.

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 49 +++++++++++--------
 .../list-button-horizontal.vue                |  7 +--
 src/ux-components/list-card/list-card.vue     |  2 +
 3 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 643aa0f5b..0eb11fbf0 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -8,6 +8,7 @@
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
           v-slot="{ meta }"
+          class="vehicle-damage-form"
         >
           <damageLocationQuestion
             ref="damageLocation"
@@ -15,7 +16,7 @@
             groupName="DamageLocationQuestion"
           />
           <windshieldOptions
-            ref="windshieldOptions" 
+            ref="windshieldOptions"
             v-model="selectedWindshieldOptions"
             :hasRepairReplaceConflict="hasRepairReplaceConflict"
             :selectedDamageLocations="selectedDamageLocations"
@@ -28,7 +29,7 @@
             alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
             :isDismissible="false"
           />
-          <sideDoorOptions 
+          <sideDoorOptions
             ref="sideDoorOptions"
             groupName="SideDoorSideQuestion"
             v-model="sideDoorOptionsData"
@@ -171,10 +172,10 @@ export default {
         el && el.focus();
       }
     },
-    
+
     getDamageLocationsFromStore() {
       var glassSelections = [];
-      
+
       if (store.getters.damage.glassToReplace.some(glass =>  { return glass.location === damageLocationsSelected.WINDSHIELD }) ||
           store.getters.damage.isRepair) {
           glassSelections.push(damageLocationsSelected.WINDSHIELD);
@@ -193,7 +194,7 @@ export default {
 
     getWindshieldOptionsFromStore() {
       var windShieldOptions = { selectedWindshieldDamageType: [], selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
-      
+
       if (store.getters.damage.isRepair === undefined) return windshieldOptions;
 
       if (!store.getters.damage.isRepair) {
@@ -222,7 +223,7 @@ export default {
       }
 
       return windShieldOptions;
-      
+
     },
 
     getDoorSidesFromStore() {
@@ -249,7 +250,7 @@ export default {
 
       return driverSideReplaceOptions;
     },
-    
+
     getPassengerSideReplaceOptionsFromStore() {
       var passengerSideReplaceOptions = [];
 
@@ -264,7 +265,7 @@ export default {
 
     getRearReplaceOptionsFromStore(){
       var rearReplaceOptions = [];
-      
+
       store.getters.damage.glassToReplace.forEach(glass => {
         if (glass.location === damageLocationsSelected.REAR){
           rearReplaceOptions.push(glass.name);
@@ -284,10 +285,10 @@ export default {
       }
 
       store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace());
-      
+
       const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
       { carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
-      
+
       this.navigateForward(partsData);
     },
 
@@ -297,7 +298,7 @@ export default {
         this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS, this.$route, {}, {}, partsData.data);
         return;
       }
-      
+
       //found multiple parts for a single glass location (Windshield, Driver, Passenger, Rear)
       if (partsData.data.partsOrQuestions){
         for (var i = 0; i < partsData.data.partsOrQuestions.length; i++){
@@ -312,7 +313,7 @@ export default {
       if (!this.isWindshieldRepair){
         store.commit(this.storeMutations.UPDATE_PARTS, partsData.data.partsOrQuestions[0].parts);
       }
-    
+
       this.$router.navigate(this.navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART, this.$route);
     },
 
@@ -341,33 +342,33 @@ export default {
             selectedGlassToReplace.push({ location: damageLocationsSelected.REAR, name: rearItem});
           })
       }
-      
+
       return selectedGlassToReplace;
     },
   },
   computed: {
     isWindshieldDamageLocation() {
-      return this.selectedDamageLocations.some(selectedDamages => 
+      return this.selectedDamageLocations.some(selectedDamages =>
         {
             return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
         });
     },
     isSideDoorDamageLocation() {
-      return this.selectedDamageLocations.some(selectedDamages => 
+      return this.selectedDamageLocations.some(selectedDamages =>
         {
             return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
         });
     },
     isRearWindowDamageLocation() {
-      return this.selectedDamageLocations.some(selectedDamages => 
+      return this.selectedDamageLocations.some(selectedDamages =>
         {
             return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
         });
     },
     isWindshieldRepair() {
       if (!this.isWindshieldDamageLocation) return false;
-      
-      return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType => 
+
+      return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType =>
         {
             return selectedDamageType.toUpperCase() === "REPAIR";
         });
@@ -375,7 +376,7 @@ export default {
     isDriverSideReplace() {
       if (!this.isSideDoorDamageLocation) return false;
 
-      return this.sideDoorOptionsData.selectedDoorSides.some(selectedDriverSide => 
+      return this.sideDoorOptionsData.selectedDoorSides.some(selectedDriverSide =>
         {
             return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
         });
@@ -383,7 +384,7 @@ export default {
     isPassengerSideReplace() {
       if (!this.isSideDoorDamageLocation) return false;
 
-      return this.sideDoorOptionsData.selectedDoorSides.some(selectedPassengerSide => 
+      return this.sideDoorOptionsData.selectedDoorSides.some(selectedPassengerSide =>
         {
             return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
         });
@@ -407,3 +408,11 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+  .vehicle-damage-form {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+</style>
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index c9f0f287c..910413ae9 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -113,9 +113,9 @@ export default {
     if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
       fieldOptions['initialValue'] = fieldOptions.checkedValue;
     }
-    const { 
-      checked, 
-      handleChange, 
+    const {
+      checked,
+      handleChange,
       errors,
     } = useField(props.groupName, props.validationRules, fieldOptions);
 
@@ -135,6 +135,7 @@ export default {
     opacity: 0;
     width: 0;
     height: 0;
+    position: absolute;
     &:focus-visible + label {
       box-shadow: 0 0 0 2px $blue;
       z-index: 2;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index e57fb861f..b2f12b4a5 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -183,6 +183,7 @@ export default {
     opacity: 0;
     width: 0;
     height: 0;
+    position: absolute;
 
     + label {
       display: block;
@@ -262,6 +263,7 @@ export default {
       height: 6px;
       width: 11px;
       transform: rotate(-45deg);
+      z-index: 1;
     }
   }
 

From d95e6c10dd07f5d6d2e8cb908d13a629dba1f47f Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 8 Mar 2022 12:26:35 -0500
Subject: [PATCH 47/48] CSR-319: fix event triggers for radio buttons

---
 .../list-button-horizontal/list-button-horizontal.vue          | 3 ++-
 src/ux-components/list-button/list-button.vue                  | 3 ++-
 src/ux-components/list-card/list-card.vue                      | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index c9f0f287c..0475a0e35 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -2,6 +2,8 @@
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
     :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+    @mouseup="handleClick(value)"
+    @keyup.space="handleClick(value)"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -10,7 +12,6 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
-      @click="handleClick(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0115564ef..3a8e65fc0 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,6 +2,8 @@
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
     :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+    @mouseup="handleClick(value)"
+    @keyup.space="handleClick(value)"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -10,7 +12,6 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
-      @click="handleClick(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index e57fb861f..0a143aa05 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -7,6 +7,8 @@
         errors.length > 0 ? 'has-error' : '',
         hasError ? 'has-error' : '',
       ]"
+      @mouseup="handleChange(value)"
+      @keyup.space="handleChange(value)"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -15,7 +17,6 @@
         :value="value"
         :aria-required="isRequired"
         :data-focus-target="groupName"
-        @click="handleChange(value)"
         v-model="checkValue"
         @change="handleCheckChange(value)"
       />

From 7ae4baaa4d713e91a255a08d85554700befb4016 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 8 Mar 2022 14:43:01 -0500
Subject: [PATCH 48/48] Footer adjustments to better accommodate variable width
 button and link..

---
 .../funnel-footer/funnel-footer.vue           | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 062a3574a..44afa5364 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -16,7 +16,7 @@
     </div>
     <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
       <div class="row d-flex flex-row-reverse align-items-center">
-        <div class="col-12 button-col d-flex justify-content-end" id="stacked">
+        <div class="col button-col d-flex" id="stacked">
           <buttonMain
             isPrimary
             :buttonText="buttonText"
@@ -27,7 +27,7 @@
             @click-event="buttonClick"
           />
         </div>
-        <div class="col-12 link-col py-1">
+        <div class="col-auto link-col py-1 text-break">
           <textLink
           linkType="navigation"
           :text="backLink"
@@ -91,19 +91,21 @@ export default {
 .footer {
   display: flex;
   margin-top: auto;
-  .button-col,
-  .link-col,
-  .btn-primary {
-    width: 100%;
-  }
   a {
     display: flex;
     justify-content: center;
   }
+  .col,
+  .col-auto,
+  .col button {
+    width: 100%;
+  }
   @media only screen and (min-width: 340px) {
-    .button-col,
-    .link-col {
-      width: 50% !important;
+    .col,
+    .col-auto,
+    .col button {
+      width: auto;
+      justify-content: flex-end;
     }
     .btn-primary {
       width: auto;