From 9d7c6fc1fc92b157751ddcef02d16c212f0943da Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Mon, 27 Jun 2022 08:40:56 -0400
Subject: [PATCH 01/21] CSR-343 WIP

---
 .../button-question/button-question.vue       |  76 +--
 .../glass-part-question.vue                   | 439 +++++++++---------
 src/layouts/vehicle-parts/vehicle-parts.vue   |  71 +--
 src/ux-components/radio/radio.vue             |   2 +-
 4 files changed, 313 insertions(+), 275 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index f1c2ad98a..6523bedb3 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,44 +1,48 @@
 <!-- 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="question-text d-flex">
+    <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
       <span class="fs-5 fw-bold w-100">{{ questionText }}</span>
     </div>
-    <div class="w-100 d-flex justify-content-center">
+    <div class="w-100 justify-content-center">
       <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName">
         <legend class="sr-only" :data-focus-target="groupName" :id="groupName" tabindex="-1">
           {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
         </legend>
-          <div :class="getComponentWrapperClasses">
-            <component
-              :is="buttonType"
-              v-for="answer in answers"
-              :key="answer.Name ? answer.Name : answer"
-              @isCheckedChanged="handleCheckedChanged"
-              :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
-              :value="getValues(answer)"
-              :buttonLabel="answer.Text ? answer.Text : answer"
-              :buttonLabelSubCopy="answer.SubText"
-              :textPosition="textPosition"
-              :isMultiSelect="isMultiSelect"
-              :groupName="groupName"
-              :selectingInitiatesLoad="selectingInitiatesLoad"
-              :loaderColor="loaderColor"
-              :loaderPosition="loaderPosition"
-              :isWide=isWide
-              :isRequired=isRequired
-              :buttonImage="answer.AnswerImageUrl"
-              :buttonImageId="answer.ImageId"
-              :altText="answer.Name ? answer.Name : answer"
-              screenReaderOnlyText="(opens new window)"
-              :colLength="getColLength"
-              :selectedValues="selectedValues"
-              data-test="button"
-              :validationRules="validationRules"
-              :class="[suppressError ? 'alertError' : '']"
-              :clearOnUnmount="clearOnUnmount"
-            />
-          </div>
+        <div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
+          <component
+            :is="buttonType"
+            @isCheckedChanged="handleCheckedChanged"
+            :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
+            :value="getValues(answer)"
+            :buttonLabel="answer.Text ? answer.Text : answer"
+            :buttonLabelSubCopy="answer.SubText"
+            :textPosition="textPosition"
+            :isMultiSelect="isMultiSelect"
+            :groupName="groupName"
+            :selectingInitiatesLoad="selectingInitiatesLoad"
+            :loaderColor="loaderColor"
+            :loaderPosition="loaderPosition"
+            :isWide=isWide
+            :isRequired=isRequired
+            :buttonImage="answer.AnswerImageUrl"
+            :buttonImageId="answer.ImageId"
+            :altText="answer.Name ? answer.Name : answer"
+            screenReaderOnlyText="(opens new window)"
+            :colLength="getColLength"
+            :selectedValues="selectedValues"
+            data-test="button"
+            :validationRules="validationRules"
+            :class="[suppressError ? 'alertError' : '']"
+            :clearOnUnmount="clearOnUnmount"
+          />
+          <!-- For nested questions --> 
+          <transition name="fade" mode="out-in">
+            <div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
+              <slot></slot>
+            </div>
+          </transition>
+        </div>
       </fieldset>
     </div>
     <div class="row form-test-error mt-1">
@@ -81,14 +85,14 @@ export default {
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
-    modelValue: Array,
+    modelValue: [Array, String],
     validationRules: String,
     suppressError: Boolean,
     useTextForValue: Boolean,
     clearOnUnmount: {
       type: Boolean,
       default: true
-    }
+    },
   },
   computed: {
     getFieldSetClasses() {
@@ -135,6 +139,7 @@ export default {
       if (this.useTextForValue){
         return answer.Text
       }
+      console.log(answer.Name ? answer.Name : answer)
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {
@@ -146,6 +151,9 @@ export default {
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;
         }
+        else {
+          this.selectedValues = val.value;
+        }
       }
     },
   },
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 d0def364d..f6d21f433 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,245 +1,262 @@
 <template>
-  <div class="container">
-    <div class="row">
-      <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
+    <div class="container">
+        <div class="row">
+            <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
+        </div>
     </div>
-  </div>
+    {{ featureListData }}
+    <br />
+    {{ tintSelectionOptions }}
+    <br />
+    {{ selectedTint }}
+    {{ selectedPart }}
 
-  <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]"
-          :value="`${glassLocation}-${glassName}-${name}`"
-          :isRadio="true"
-          :isWide="true"
-          :buttonImage="
-            require(`@/assets/img/tints/${getTintSourceImage(
-              glassLocation,
-              name
-            )}`)
-          "
-          :buttonLabel="name"
-          altText=""
-          isRequired
-          :buttonID="`${glassLocation}-${glassName}-${name}`"
-          :groupName="`${glassLocation}-${glassName}`"
-          @isCheckedChanged="ResetTintAndPartSelections()"
-          :validationRules="validationRules"
-        />
-        <div class="row form-test-error mt-1">
-          <error-message :name="`${glassLocation}-${glassName}`" v-if="!suppressError"></error-message>
+    <div class="container nested-radio">
+        <div class="row my-2">
+            <div class="col">
+                <buttonQuestion
+                    v-model="selectedTint"
+                    :answers="tintSelectionOptions"
+                    :nestedAnswers="featureListData[selectedTint]"
+                    buttonType="listCard"
+                    :isWide="true"
+                    altText=""
+                    isRequired
+                    :groupName="`${glassLocation}-${glassName}`"
+                    @isCheckedChanged="ResetTintAndPartSelections()"
+                    :validationRules="validationRules"
+                >
+                    <transition name="fade" mode="out-in">
+                        <div class="row my-2" aria-live="polite">
+                            <div class="col">
+                                <buttonQuestion
+                                    v-model="selectedPart"
+                                    buttonType="radio"
+                                    class="radioQuestion"
+                                    :questionText="glassFeatureQuestion"
+                                    :answers="featureListData[selectedTint]"
+                                    textPosition="text-start"
+                                    :loaderEnabled="false"
+                                    isRequired
+                                    :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
+                                    :validationRules="validationRules"
+                                />
+                            </div>
+                        </div>
+                    </transition>
+                </buttonQuestion>
+            </div>
         </div>
-      </div>
     </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"
-      >
-        <div class="col">
-          <buttonQuestion
-            v-model="selectedPart[glassLocation]"
-            buttonType="radio"
-            class="radioQuestion"
-            :questionText="glassFeatureQuestion"
-            :answers="value"
-            textPosition="text-start"
-            :loaderEnabled="false"
-            isRequired
-            :groupName="`${glassLocation}-${glassName}-${name}`"
-            :validationRules="validationRules"
-          />
-        </div>
-      </div>
-    </transition>
-  </div>
+    <div class="row form-test-error mt-1">
+        <!-- <error-message
+            :name="`${glassLocation}-${glassName}`"
+            v-if="!suppressError"
+        ></error-message> -->
+    </div>
 </template>
 
 <script>
 // Components
-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 { ErrorMessage } from 'vee-validate';
+// import { ErrorMessage } from "vee-validate";
 
 export default {
-  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: Object,
-    validationRules: String,
-  },
-  mounted() {
-    this.LoadPreselectedValues();
-  },
-  components: {
-    listCard,
-    buttonQuestion,
-    ErrorMessage,
-  },
-  computed: {
-    colorQuestionText() {
-      return getCustomTransformValue(
-        this.glassColorQuestion,
-        `${this.glassLocation} ${this.glassName}`
-      );
+    name: "glass-part-question",
+    inheritAttrs: false,
+    data() {
+        return {
+            glassColorQuestion: "",
+            glassFeatureQuestion: "",
+            selectedTint: "",
+        };
     },
-
-    selectedPart: {
-      get: function () {
-        return this.modelValue;
-      },
-      set: function (newValue) {
-        this.$emit("update:modelValue", newValue);
-      },
+    props: {
+        glassName: String,
+        glassLocation: String,
+        colorAnswers: Array,
+        modelValue: Object,
+        validationRules: String,
     },
-
-    // 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;
+    mounted() {
+        this.LoadPreselectedValues();
     },
-
-    PartDataFromApi() {
-      return this.$store.getters.pageData(this.$route.query.fmgPage);
-    },
-  },
-  methods: {
-    // Initialize the component data
-    initializeComponent(cmsContent) {
-      this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
-      this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
+    components: {
+        buttonQuestion,
+        // ErrorMessage,
     },
+    computed: {
+        colorQuestionText() {
+            return getCustomTransformValue(
+                this.glassColorQuestion,
+                `${this.glassLocation} ${this.glassName}`
+            );
+        },
 
-    // Gets tint images based on the glass type, and tint name.
-    // Returns an empty string if the src or object is undefined.
-    getTintSourceImage(glassLocation, tintColor) {
-      const tintSourceObject = getTintImage(glassLocation, tintColor);
-
-      if (tintSourceObject === undefined || tintSourceObject.src == undefined) {
-        return "";
-      }
-
-      return tintSourceObject.src;
-    },
-
-    // Reset selections when tint changes for the same glass to ensure proper selection.
-    // Also checks if only a single part is present for the tint.
-    ResetTintAndPartSelections() {
-      this.selectedTint = {};
-      this.selectedPart = {};
-      this.AutoSelectIfSinglePart();
-    },
-
-    // Check if only a single part is present for the tint and set the v-model if it is.
-    AutoSelectIfSinglePart() {
-      // Check if the selected tint only has a single feature
-      Object.keys(this.PartDataFromApi.partsOrQuestions ?? {}).forEach(
-        (key) => {
-          const currentGlassSelection =
-            this.PartDataFromApi.partsOrQuestions[key];
-
-          if (
-            currentGlassSelection.glassName === this.glassName &&
-            currentGlassSelection.glassLocation === this.glassLocation
-          ) {
-            if (currentGlassSelection.parts.length === 1) {
-              this.selectedPart = {
-                [currentGlassSelection.glassLocation]: [
-                  currentGlassSelection.parts[0].partNumber,
-                ],
-              };
-            }
-          }
-        }
-      );
-    },
-
-    // Loads the preselected values from the store.
-    LoadPreselectedValues() {
-      this.$nextTick(() => {
-        if (this.modelValue !== undefined) {
-          // Populate button-question model-value if parts data already exists in VueX
-          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.glassLocation}-${this.glassName}-${tintColor}`,
-                };
-              }
+        tintSelectionOptions() {
+            let tintOptions = [];
+            Object.keys(this.featureListData).forEach((tintOption) => {
+                tintOptions.push({
+                    Name: tintOption,
+                    Text: tintOption,
+                    AnswerImageUrl: require(`@/assets/img/tints/${this.getTintSourceImage(
+                        this.glassLocation,
+                        tintOption
+                    )}`),
+                });
             });
-          });
-        }
-      });
+
+            return tintOptions;
+        },
+
+        selectedPart: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+              console.log("modelValue: " + 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: {
+        // Initialize the component data
+        initializeComponent(cmsContent) {
+            this.glassColorQuestion =
+                cmsContent.ColorQuestionWidget.QuestionText;
+            this.glassFeatureQuestion =
+                cmsContent.FeatureQuestionWidget.QuestionText;
+        },
+
+        // Gets tint images based on the glass type, and tint name.
+        // Returns an empty string if the src or object is undefined.
+        getTintSourceImage(glassLocation, tintColor) {
+            const tintSourceObject = getTintImage(glassLocation, tintColor);
+
+            if (
+                tintSourceObject === undefined ||
+                tintSourceObject.src == undefined
+            ) {
+                return "";
+            }
+
+            return tintSourceObject.src;
+        },
+
+        // Reset selections when tint changes for the same glass to ensure proper selection.
+        // Also checks if only a single part is present for the tint.
+        ResetTintAndPartSelections() {
+            this.selectedTint = "";
+            this.selectedPart = {};
+            this.AutoSelectIfSinglePart();
+        },
+
+        // Check if only a single part is present for the tint and set the v-model if it is.
+        AutoSelectIfSinglePart() {
+            // Check if the selected tint only has a single feature
+            Object.keys(this.PartDataFromApi.partsOrQuestions ?? {}).forEach(
+                (key) => {
+                    const currentGlassSelection =
+                        this.PartDataFromApi.partsOrQuestions[key];
+
+                    if (
+                        currentGlassSelection.glassName === this.glassName &&
+                        currentGlassSelection.glassLocation ===
+                            this.glassLocation
+                    ) {
+                        if (currentGlassSelection.parts.length === 1) {
+                            this.selectedPart = {
+                                [currentGlassSelection.glassLocation]: [
+                                    currentGlassSelection.parts[0].partNumber,
+                                ],
+                            };
+                        }
+                    }
+                }
+            );
+        },
+
+        // Loads the preselected values from the store.
+        LoadPreselectedValues() {
+            this.$nextTick(() => {
+                if (this.modelValue !== undefined) {
+                    // Populate button-question model-value if parts data already exists in VueX
+                    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;
+                                // this.selectedTint[tintColor] = {
+                                //   buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+                                //   checkValue: "",
+                                //   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;
+    }
 }
 
 .color-question-text {
-  color: $black;
-  font-weight: $font-weight-bold;
+    color: $black;
+    font-weight: $font-weight-bold;
 }
 </style>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 9ab861f0f..431e1632a 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -30,13 +30,13 @@
         </div>
 
         <glassPartQuestion
-        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-        v-model="glassParts[item.glassLocation + '-' + item.glassName]"
-        :glassLocation="item.glassLocation"
-        :glassName="item.glassName"
-        :colorAnswers="item.colorAnswers"
-        validationRules="replace-options-required"
-        />
+          :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+          v-model="glassParts[item.glassLocation + '-' + item.glassName]"
+          :glassLocation="item.glassLocation"
+          :glassName="item.glassName"
+          :colorAnswers="item.colorAnswers"
+          validationRules="replace-options-required"
+          />
       </div>
       <funnelFooter
         cmsWidgetName="FunnelFooterWidget"
@@ -170,41 +170,54 @@ methods: {
 
     // 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]);
-      }
+      selectedGlassPartNumbers.push(value);
+      // for (let [glassKey, glassValue] of Object.entries(value)) {
+      //   selectedGlassPartNumbers.push(glassValue[0]);
+      // }
     }
 
+    console.log(this.glassParts)
+    console.log(selectedGlassPartNumbers)
+    console.log(this.PartsFromApi.partsOrQuestions)
+    
     // 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
-        );
+    for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
+      // const partsForGlassPart = value
+      const isMatched = selectedGlassPartNumbers.some(
+        (p) => p === value.partNumber
+      );
 
-        if (isMatched) {
-          matchedParts.push(currentPart);
-        }
+      if (isMatched) {
+        matchedParts.push(currentPart);
       }
+      
+      // 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);
+      //   }
+      // }
     }
 
+    console.log(matchedParts)
+
     // 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_GLASS_PARTS, matchedParts);
+    // // Save parts to the store.
+    // store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts);
 
-    // Navigate to the next page.
-    this.$router.navigateAfterSave(
-      this.navigationScenarios.SELECTED_PARTS,
-      this.$route
-    );
+    // // Navigate to the next page.
+    // this.$router.navigateAfterSave(
+    //   this.navigationScenarios.SELECTED_PARTS,
+    //   this.$route
+    // );
   },
 
   resetDependentState() {
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index faac7f1fc..7c11a5997 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -86,7 +86,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>yu78zas
 .form-check {
   .form-check-input {
     border: 1px solid $gray-500;

From f359be41c7cbe137846b5637102fd57164ef4221 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Mon, 27 Jun 2022 11:45:37 -0400
Subject: [PATCH 02/21] CSR-343 Correctly select parts

---
 .../button-question/button-question.vue       |  2 +-
 .../make-question/make-question.vue           |  7 +++---
 .../model-question/model-question.vue         |  7 +++---
 .../glass-part-question.vue                   | 18 ++++++++++----
 src/layouts/vehicle-parts/vehicle-parts.vue   | 24 ++++++++++---------
 .../style-question/style-question.vue         |  7 +++---
 .../year-question/year-question.vue           |  7 +++---
 7 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 6523bedb3..f4594c06b 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -139,7 +139,7 @@ export default {
       if (this.useTextForValue){
         return answer.Text
       }
-      console.log(answer.Name ? answer.Name : answer)
+      // console.log(answer.Name ? answer.Name : answer)
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 26a17955c..5319d96f2 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -7,7 +7,7 @@
     :answers="makes"
     groupName="ChooseVehicleMake"
     textPosition="text-start"
-    v-model="selectedValueAsArray"
+    v-model="selectedValue"
     isRequired=true
   />
 </template>
@@ -34,14 +34,13 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValueAsArray: {
+    selectedValue: {
       get: function() {
         const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {
-        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
-        this.$emit("update:modelValue", newValueAsScalar);
+        this.$emit("update:modelValue", newValue);
       }
     }
   },
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index d8cb21894..5d2b1ebd2 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -7,7 +7,7 @@
     :answers="models"
     groupName="ChooseVehicleModel"
     textPosition="text-start"
-    v-model="selectedValueAsArray"
+    v-model="selectedValue"
     isRequired=true
   />
 </template>
@@ -34,14 +34,13 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValueAsArray: {
+    selectedValue: {
       get: function() {
         const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {
-        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
-        this.$emit("update:modelValue", newValueAsScalar);
+        this.$emit("update:modelValue", newValue);
       }
     }
   },
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 f6d21f433..029088cd7 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
@@ -17,14 +17,13 @@
                 <buttonQuestion
                     v-model="selectedTint"
                     :answers="tintSelectionOptions"
-                    :nestedAnswers="featureListData[selectedTint]"
                     buttonType="listCard"
                     :isWide="true"
                     altText=""
                     isRequired
                     :groupName="`${glassLocation}-${glassName}`"
                     @isCheckedChanged="ResetTintAndPartSelections()"
-                    :validationRules="validationRules"
+                    validationRules="replace-options-required"
                 >
                     <transition name="fade" mode="out-in">
                         <div class="row my-2" aria-live="polite">
@@ -39,7 +38,7 @@
                                     :loaderEnabled="false"
                                     isRequired
                                     :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
-                                    :validationRules="validationRules"
+                                    validationRules="part-required"
                                 />
                             </div>
                         </div>
@@ -63,8 +62,14 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import { getTintImage } from "@/constants/tint-mapper";
 import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
 // import { ErrorMessage } from "vee-validate";
 
+defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED));
+defineRule("part-required", required(errorMessages.OPTION_REQUIRED));
+
 export default {
     name: "glass-part-question",
     inheritAttrs: false,
@@ -80,7 +85,7 @@ export default {
         glassLocation: String,
         colorAnswers: Array,
         modelValue: Object,
-        validationRules: String,
+        // validationRules: String,
     },
     mounted() {
         this.LoadPreselectedValues();
@@ -240,6 +245,11 @@ export default {
             });
         },
     },
+    watch: {
+        selectedTint(newTint, previousTint) {
+            this.selectedPart = null;
+        }
+    }
 };
 </script>
 
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 431e1632a..47faea58c 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -3,7 +3,6 @@
   @submit="onSubmit"
   @invalid-submit="onInvalidSubmit"
   ref="theForm"
-  v-slot="{ meta }"
   >
   <div class="page-container-grouped-styles vehicle-parts">
     <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
@@ -35,13 +34,12 @@
           :glassLocation="item.glassLocation"
           :glassName="item.glassName"
           :colorAnswers="item.colorAnswers"
-          validationRules="replace-options-required"
           />
       </div>
       <funnelFooter
         cmsWidgetName="FunnelFooterWidget"
         ref="funnelFooter"
-        :isForwardActionDisabled="!meta.valid"
+        :isForwardActionDisabled="isForwardActionDisabled"
         @back-clicked="backButtonAction"
         @ForwardClicked="forwardButtonAction"
       />
@@ -69,7 +67,7 @@ import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
-defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED));
+// defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
   name: "vehicle-parts",
@@ -88,12 +86,12 @@ export default {
 
       // 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,
-      })
+        .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,
+        })
     );
   });
 },
@@ -113,6 +111,10 @@ components: {
   alert,
 },
 computed: {
+  isForwardActionDisabled() {
+    console.log(this.glassParts)
+    return !this.glassParts || Object.values(this.glassParts).filter(value => value).length === 0;
+  },
   PartsForQuestions() {
     const partsData = this.PartsFromApi;
 
@@ -188,7 +190,7 @@ methods: {
       );
 
       if (isMatched) {
-        matchedParts.push(currentPart);
+        // matchedParts.push(currentPart);
       }
       
       // for (let [partKey, partValue] of Object.entries(value.parts)) {
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index 45c0f7dea..e578bc192 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -7,7 +7,7 @@
     :answers="styles"
     groupName="ChooseVehicleStyle"
     textPosition="text-start"
-    v-model="selectedValueAsArray"
+    v-model="selectedValue"
     isRequired=true
   />
 </template>
@@ -34,14 +34,13 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValueAsArray: {
+    selectedValue: {
       get: function() {
         const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {
-        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
-        this.$emit("update:modelValue", newValueAsScalar);
+        this.$emit("update:modelValue", newValue);
       }
     }
   },
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index a5b263fe8..ff2e2902a 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -7,7 +7,7 @@
     :answers="years"
     groupName="ChooseVehicleYear"
     textPosition="text-start"
-    v-model="selectedValueAsArray"
+    v-model="selectedValue"
     isRequired=true
   />
 </template>
@@ -35,14 +35,13 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValueAsArray: {
+    selectedValue: {
       get: function() {
         const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {
-        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
-        this.$emit("update:modelValue", newValueAsScalar);
+        this.$emit("update:modelValue", newValue);
       }
     }
   },

From 9d77fa43922884fc8495edcfc7b8ab2a1f884b8c Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 27 Jun 2022 13:32:14 -0400
Subject: [PATCH 03/21] CSR-632 Re-enable autofill.

---
 .../textbox-question/textbox-question.vue     |   5 +-
 src/layouts/address-lookup/address-lookup.vue | 104 +++++++++---------
 2 files changed, 53 insertions(+), 56 deletions(-)

diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 19163110e..822548cc9 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -1,7 +1,6 @@
 <template>
 	<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
 		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
-		<!-- See https://stackoverflow.com/a/30976223 for information about "do-not-autofill" -->
 		<input
 			v-model.trim="value"
 			v-maska="mask"
@@ -14,7 +13,6 @@
 			:aria-disabled="isDisabled"
 			:disabled="isDisabled"
 			:aria-required="isRequired"
-			autocomplete="do-not-autofill"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
 			:validationRules="validationRules"
 			@change="handleChange"
@@ -46,7 +44,6 @@ export default {
 		inputId: String,
 		isDisabled: Boolean,
 		isRequired: Boolean,
-		disableAutoFill: Boolean,
 		hasIcon: Boolean, // If input has an icon
 		iconRight: Boolean, // Place icon on right side of text input, otherwise default is left if hasIcon prop is used
 		hasError: Boolean,
@@ -132,7 +129,7 @@ export default {
 			const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
 			if (result.valid) {
 				this.handleChange(newValue); // trigger full validation on this field only
-			}	
+			}
 		},
 	},
 };
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 59acf4765..455a83f14 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -9,7 +9,7 @@
 			<loadingModal ref="loadingModal"/>
 			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
 			<vehicleBanner cmsWidgetName="VehicleBannerWidget" ref="vehicleBanner" :displayGenericVehicleImage=false />
-			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
+			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
 			<div class="fade-on-route-transition sub-container make-tall">
 				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 				<alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
@@ -24,14 +24,14 @@
 					:manualCopy="AlertMatchedDifferentVehicleBody"
 					alertClass="alert-warning"
 					v-bind:isDismissible="false"
-				/>			
+				/>
 				<alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert"
 					class="mb-4"
 					alertClass="alert-danger"
 					:manualHeadline="AlertNonServiceableZipHeader"
 					:manualCopy="AlertNonServiceableZipBody"
 					v-bind:isDismissible="false"
-				/>			
+				/>
 				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
 					class="mb-4"
 					cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
@@ -42,11 +42,11 @@
 					<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
 						<div class="row mb-4">
 							<div class="col">
-								<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZipCode" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
+								<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZipCode" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" validationRules="service-zip-required|service-zip-format" />
 							</div>
 						</div>
 					</div>
-				</transition>								
+				</transition>
 				<funnel-footer
 					cmsWidgetName="FunnelFooterWidget"
 					ref="funnelFooter"
@@ -55,7 +55,7 @@
 					@back-clicked="backButtonAction"
 					:isForwardActionDisabled="!meta.valid"
 				/>
-			</div>	
+			</div>
 		</div>
 	</Form>
 </template>
@@ -122,14 +122,14 @@ export default {
 				firstName: this.getRegistrationFirstNameFromStore(),
 				lastName: this.getRegistrationLastNameFromStore(),
 				emailAddress: this.getEmailFromStore(),
-			}, 
+			},
 			serviceZipCode: this.getServiceZipFromStore(),
 			displayNonServiceableZipAlert: false,
 			displayVinNotFoundAlert: false,
 			displayMatchedDifferentVehicleAlert: false,
 			displayVinLookupByHomeAddressNotAllowedAlert: false,
 			previouslyEnteredCarId: "",
-			isSelectedGlassAvailableForVehicle: false, 
+			isSelectedGlassAvailableForVehicle: false,
 			customAlertData: {},
 			showServiceZipField: this.getServiceZipFromStore(),
 			isZipServicable: false,
@@ -150,7 +150,7 @@ export default {
 				this.$route
 			);
 		},
-		attachCustomEvents() { 
+		attachCustomEvents() {
 			this.prependActionToMethod(this, this.forwardButtonAction, () => {
 				this.pushEventToGA(
 					this.$route.query[this.queryStrings.FMG_PAGE],
@@ -177,7 +177,7 @@ export default {
 		},
 		getRegistrationLastNameFromStore() {
 			return store.getters.vehicle.registration.lastName;
-		},						
+		},
 		getEmailFromStore() {
 			return store.getters.order.customer.emailAddress;
 		},
@@ -189,9 +189,9 @@ export default {
 
 			// Lookup VIN(s) with the provided address
 			const vinLookupPromise = this.lookupVin(
-				this.customerQuestions.lastName, 
-				this.customerQuestions.addressQuestions.streetAddress, 
-				this.customerQuestions.addressQuestions.zipCode, 
+				this.customerQuestions.lastName,
+				this.customerQuestions.addressQuestions.streetAddress,
+				this.customerQuestions.addressQuestions.zipCode,
 				this.customerQuestions.addressQuestions.state
 			);
 
@@ -200,8 +200,8 @@ export default {
 
 			const vinLookupResponse = await vinLookupPromise;
 			const serviceZipValidationResponse = await serviceZipValidationPromise;
-			
-			if (!vinLookupResponse.data.isStatePermissible) {				
+
+			if (!vinLookupResponse.data.isStatePermissible) {
 				// State Restrictions forbid lookup by address
 				this.displayVinLookupByHomeAddressNotAllowedAlert = true;
 				this.$refs.funnelFooter.removeLoader();
@@ -210,29 +210,29 @@ export default {
 
 			// if the neither the registration zip code or service zip code are not serviceable
 			this.isZipServicable = serviceZipValidationResponse.data.isServiceable;
-			if (!this.isZipServicable) {				
+			if (!this.isZipServicable) {
 				this.displayNonServiceableZipAlert = true;
 				this.showServiceZipField = true;
-				this.$refs.funnelFooter.removeLoader();		
+				this.$refs.funnelFooter.removeLoader();
 			} else if (!this.serviceZipCode) {
 				// if the registration zip code is servicable and nothing was entered for the service zip code
 				// then set the service zip code to the registration zip code
 				this.serviceZipCode = this.customerQuestions.addressQuestions.zipCode;
-			} 
+			}
 
 			const carEntered = store.getters.vehicle;
 			const carsFound = vinLookupResponse.data.vinVehicles;
 
 			if (carsFound.length == 0) {
-				// No VINs found					
+				// No VINs found
 				this.displayVinNotFoundAlert = true;
 				this.$refs.funnelFooter.removeLoader();
-				return;				
-			} else if (carsFound.length == 1) {			
+				return;
+			} else if (carsFound.length == 1) {
 				const carFound = carsFound[0].vehicle;
 				this.isCarIdDifferent = carFound.carId !== carEntered.carId;
 
-				if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {	
+				if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
 					// Display Alert
 					this.previouslyEnteredCarId = carFound.carId;
 					this.customAlertData.vehicleInfo = carFound;
@@ -241,12 +241,12 @@ export default {
 					this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId);
 
 					// Update button "Continue with..."
-					this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`);				
+					this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`);
 					this.$refs.funnelFooter.removeLoader();
-					
+
 					return;
-				} 				
-								
+				}
+
 				if (!this.isZipServicable) {
 					return;
 				}
@@ -254,21 +254,21 @@ export default {
 				// update data if the zip or service zip is servicable
 				this.updateVehicleInfo(carsFound[0].vin, carFound);
 				this.updateCustomerInfo(serviceZipValidationResponse.data.state);
-	
+
 			} else if (carsFound.length > 1) {
 				if (!this.isZipServicable) {
 					return;
 				}
 
 				// if multiple cars were found
-				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); 
+				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);
 				if (matchingCars.length === 1) {
 					// and one and only one of them matches the carId entered, save the vehicle info
 					// so we can go to the Heritage Funnel directly
 					const matchingCar = matchingCars[0];
 					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
 				}
-				
+
 				// update data if the zip or service zip is servicable
 				this.updateCustomerInfo(serviceZipValidationResponse.data.state);
 			}
@@ -277,13 +277,13 @@ export default {
 		},
 		resetWarningsAndErrors() {
 			this.displayVinNotFoundAlert = false;
-			this.displayNonServiceableZipAlert = false;	
+			this.displayNonServiceableZipAlert = false;
 			this.displayMatchedDifferentVehicleAlert = false;
 			this.displayVinLookupByHomeAddressNotAllowedAlert = false;
 		},
 		navigateForward(carEntered, carsFound) {
 			this.updateServiceLocationIfNecessary();
-			
+
 			if (carsFound.length == 1) {
 				// if a different vehicle is found than the one entered and the selected glass
 				// is not available for that vehicle
@@ -297,37 +297,37 @@ export default {
 						}, {}
 					);
 				} else {
-					// otherwise 
+					// otherwise
 					this.navigateForwardWithSingleCarMatch();
-				}				
+				}
 			} else if (carsFound.length > 1) {
 				// if multiple cars were found
-				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);  
+				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);
 				if (matchingCars.length === 1) {
 					// and one and only of them matches the car id entered
-					const matchingCar = matchingCars[0];					
+					const matchingCar = matchingCars[0];
 					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
 					this.navigateForwardWithSingleCarMatch();
 				} else {
 					// if there are no matches or there are multiple matches, navigate to "address-vehicles" page
 					this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
 				}
-			} 
+			}
 
 		},
 		validateZip(zip) {
 			return this.dispatchStoreAction(
-				storeActions.VALIDATE_ZIP, 
+				storeActions.VALIDATE_ZIP,
 				{ zip });
 		},
 		lookupVin(lastName, streetAddress, zip, state) {
 			return this.dispatchStoreAction(
 				storeActions.LOOKUP_VIN_BY_ADDRESS,
-				{ 
-					licenseLastName: lastName, 
-					licenseStreetAddress: streetAddress, 
-					licenseZip: zip, 
-					licenseState: state 
+				{
+					licenseLastName: lastName,
+					licenseStreetAddress: streetAddress,
+					licenseZip: zip,
+					licenseState: state
 				}, false
 			);
 		},
@@ -342,7 +342,7 @@ export default {
 			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
 			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
 			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor);
-		},		
+		},
 		updateCustomerInfo(serviceState) {
 			store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress);
 			store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city);
@@ -350,10 +350,10 @@ export default {
 			store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode);
 			store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName);
 			store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
-			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);			
-			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, serviceState);			
+			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);
+			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, serviceState);
 			store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
-		},		
+		},
 		updateServiceLocationIfNecessary() {
 			const serviceLocation = store.getters.order.serviceLocation;
 
@@ -373,7 +373,7 @@ export default {
 		},
 		AlertNonServiceableZipBody() {
 			return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
-		},		
+		},
 		AlertMatchedDifferentVehicleHeader() {
 			const text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString());
 			return text;
@@ -386,13 +386,13 @@ export default {
 			const content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
 				.replaceAll("{custom:glassText}", getDamageString())
 				.replaceAll("{custom:vinYmmFound}", vinYmmFound)
-				.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);			
+				.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
 
 			return content;
-		},		
+		},
 	},
 	watch: {
-		customerQuestions: {		
+		customerQuestions: {
 			handler(newValue) {
 				// if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to “Get my personalized quote”
 				this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
@@ -412,8 +412,8 @@ export default {
 				// if the Service Zip Code field is ever hidden, clear out it's value
 				if (!newValue) {
 					this.serviceZipCode = null;
-				}			
-			},			
+				}
+			},
 		}
 	},
 	components: {

From 7e4494eb253131fbd29241e2bc8e1a703210fde7 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Mon, 27 Jun 2022 13:48:09 -0400
Subject: [PATCH 04/21] CSR-343 Finish validation

---
 .../button-question/button-question.vue       |  6 ++++
 .../funnel-footer/funnel-footer.vue           |  1 +
 .../glass-part-question.vue                   |  8 ++---
 src/layouts/vehicle-parts/vehicle-parts.vue   |  3 +-
 src/styles/common-error-styles.scss           |  1 +
 src/ux-components/radio/radio.vue             | 30 +++++++++----------
 6 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index f4594c06b..3c8ce6878 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -130,6 +130,7 @@ export default {
         return this.modelValue;
       },
       set: function(newValue) {
+        console.log(newValue)
         this.$emit("update:modelValue", newValue);
       }
     },
@@ -143,15 +144,20 @@ export default {
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {
+      console.log(val)
+      console.log("A")
       if(this.selectingInitiatesLoad) {
+        console.log("B")
         this.selectedValues = [val.value];
       } else {
         if(Array.isArray(this.selectedValues)) {
+          console.log("C")
           const newSelectedValues = this.selectedValues;
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;
         }
         else {
+          console.log("D")
           this.selectedValues = val.value;
         }
       }
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 2c4152cfa..0ad18c6b1 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -85,6 +85,7 @@ export default {
       };
     },
     buttonClick() {
+      console.log("HI")
       //prevent keyboard input after button click
       document.onkeydown = function (e) {
         return false;
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 029088cd7..e010f82b5 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
@@ -4,11 +4,6 @@
             <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
         </div>
     </div>
-    {{ featureListData }}
-    <br />
-    {{ tintSelectionOptions }}
-    <br />
-    {{ selectedTint }}
     {{ selectedPart }}
 
     <div class="container nested-radio">
@@ -34,6 +29,7 @@
                                     class="radioQuestion"
                                     :questionText="glassFeatureQuestion"
                                     :answers="featureListData[selectedTint]"
+                                    :selectedValues="selectedPart"
                                     textPosition="text-start"
                                     :loaderEnabled="false"
                                     isRequired
@@ -123,7 +119,7 @@ export default {
                 return this.modelValue;
             },
             set: function (newValue) {
-              console.log("modelValue: " + newValue)
+                console.log(newValue)
                 this.$emit("update:modelValue", newValue);
             },
         },
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 47faea58c..e4eb22c69 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -27,7 +27,7 @@
         <div class="container-fluid">
           <hr v-if="i > 0" />
         </div>
-
+{{ glassParts }}
         <glassPartQuestion
           :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
           v-model="glassParts[item.glassLocation + '-' + item.glassName]"
@@ -112,7 +112,6 @@ components: {
 },
 computed: {
   isForwardActionDisabled() {
-    console.log(this.glassParts)
     return !this.glassParts || Object.values(this.glassParts).filter(value => value).length === 0;
   },
   PartsForQuestions() {
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 95985f7c4..25a651d52 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -46,6 +46,7 @@ html {
       input[type=radio]+label:before,
       input[type=checkbox]+label:before {
         border: 1px solid $red;
+        background-color: initial;
       }
       input[type=checkbox]:checked + label:before {
         border: 1px solid $blue;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 7c11a5997..98fff6b35 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,18 +1,19 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
+  <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
     <input
-    type="radio"
-    class="form-check-input"
-    aria-checked="false"
-    :name="groupName"
-    :id="buttonID"
-    :aria-required="isRequired"
-    :value="value"
-    :v-model="checkValue"
-    @change="handleCheckChange()"
-    :checked="checkValue"
-    />
+      type="radio"
+      class="form-check-input"
+      aria-checked="false"
+      :name="groupName"
+      :id="buttonID"
+      :aria-required="isRequired"
+      :value="value"
+      :v-model="checkValue"
+      @change="handleCheckChange"
+      :checked="checkValue"
+      :validationRules="validationRules"
+      />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
@@ -39,6 +40,7 @@ export default {
     screenReaderOnlyText: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    validationRules: String
   },
   data() {
     return {
@@ -53,10 +55,8 @@ export default {
     }
   },
   methods: {
-    handleClick(value) {
-      this.handleChange(value);
-    },
     handleCheckChange() {
+      this.handleChange(this.value);
       const emitEvent = {
         checkValue: this.checkValue,
         value: this.value.toString(),

From 74cd46337dd94c9edfdb3419d0504be7a97d40bd Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 27 Jun 2022 13:53:08 -0400
Subject: [PATCH 05/21] Remove unneeded test after removing unneeded code.

---
 .../textbox-question/textbox-question.spec.js | 34 ++-----------------
 1 file changed, 3 insertions(+), 31 deletions(-)

diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js
index 48f9a3a8e..b830b9783 100644
--- a/src/common-components/textbox-question/textbox-question.spec.js
+++ b/src/common-components/textbox-question/textbox-question.spec.js
@@ -15,7 +15,7 @@ const maska = jest.fn();
 describe("textboxQuestion.vue", () => {
 
   it("Should render a text input", async () => {
-    // Arrange   
+    // Arrange
     const wrapper = shallowMount(textboxQuestion, {
       global: {
         directives: {
@@ -53,35 +53,7 @@ describe("textboxQuestion.vue", () => {
     expect(label.text()).toContain(questionText);
 
   }); 
-  
-  it("Should render the 'questionText' data value with '&NoBreak;' after the first character of each word in the label text when disableAutoFill is true.", async () => {
-    // Arrange
-    const wrapper = shallowMount(textboxQuestion, {
-      global: {
-        directives: {
-          maska: maska,
-        }
-      },
-      propsData: {
-        disableAutoFill: true,
-      },
-      mixins: [mockMixin]
-    });
 
-    // Mock CMS content ...
-    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the &NoBreak; in it. You just can't see it
-    // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools, 
-    // you will see "Q&NoBreak;uestion T&NoBreak;ext"
-    const expectedQuestionText = "Q⁠uestion T⁠ext"; 
-
-    // Act
-    const label = wrapper.find("label");
-
-    // Assert
-    expect(label.text()).toContain(expectedQuestionText);
-
-  });
-  
   it("Should return input id as the id of the input field", async () => {
     // Arrange
     const wrapper = shallowMount(textboxQuestion, {
@@ -103,7 +75,7 @@ describe("textboxQuestion.vue", () => {
     expect(input.attributes().id).toEqual("input ID");
 
   });
-  
+
   it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
 
     // Arrange
@@ -193,6 +165,6 @@ describe("textboxQuestion.vue", () => {
     // Assert
     expect(wrapper.vm.handleChange).toHaveBeenCalled;
 
-  });  
+  });
 
 });

From f208cb031c30fbdb677a7874b9101e74b006fdc9 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Mon, 27 Jun 2022 14:12:25 -0400
Subject: [PATCH 06/21] CSR-343 Save glassParts

---
 .../button-question/button-question.vue       |  8 +--
 .../glass-part-question.vue                   |  2 -
 src/layouts/vehicle-parts/vehicle-parts.vue   | 57 ++++---------------
 3 files changed, 11 insertions(+), 56 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 3c8ce6878..904089c34 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -130,7 +130,6 @@ export default {
         return this.modelValue;
       },
       set: function(newValue) {
-        console.log(newValue)
         this.$emit("update:modelValue", newValue);
       }
     },
@@ -140,24 +139,19 @@ export default {
       if (this.useTextForValue){
         return answer.Text
       }
-      // console.log(answer.Name ? answer.Name : answer)
+
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {
-      console.log(val)
-      console.log("A")
       if(this.selectingInitiatesLoad) {
-        console.log("B")
         this.selectedValues = [val.value];
       } else {
         if(Array.isArray(this.selectedValues)) {
-          console.log("C")
           const newSelectedValues = this.selectedValues;
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;
         }
         else {
-          console.log("D")
           this.selectedValues = val.value;
         }
       }
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 e010f82b5..994e2164a 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
@@ -4,7 +4,6 @@
             <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
         </div>
     </div>
-    {{ selectedPart }}
 
     <div class="container nested-radio">
         <div class="row my-2">
@@ -119,7 +118,6 @@ export default {
                 return this.modelValue;
             },
             set: function (newValue) {
-                console.log(newValue)
                 this.$emit("update:modelValue", newValue);
             },
         },
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index e4eb22c69..790b54439 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -62,12 +62,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
-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", required(errorMessages.OPTION_REQUIRED));
+import { Form } from "vee-validate";
 
 export default {
   name: "vehicle-parts",
@@ -166,53 +161,24 @@ methods: {
     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)) {
-      selectedGlassPartNumbers.push(value);
-      // for (let [glassKey, glassValue] of Object.entries(value)) {
-      //   selectedGlassPartNumbers.push(glassValue[0]);
-      // }
-    }
-
-    console.log(this.glassParts)
-    console.log(selectedGlassPartNumbers)
-    console.log(this.PartsFromApi.partsOrQuestions)
-    
     // Match them to the parts from the API.
-    for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
-      // const partsForGlassPart = value
-      const isMatched = selectedGlassPartNumbers.some(
-        (p) => p === value.partNumber
-      );
+    this.PartsFromApi.partsOrQuestions.forEach(part => {
+      const selectedPartNumberForGlassLocationAndName = this.glassParts[`${part.glassLocation}-${part.glassName}`];
+      const selectedPartData = part.parts.filter(part => part.partNumber == selectedPartNumberForGlassLocationAndName);
 
-      if (isMatched) {
-        // matchedParts.push(currentPart);
-      }
-      
-      // 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);
-      //   }
-      // }
-    }
-
-    console.log(matchedParts)
+      matchedParts.push(selectedPartData[0]);
+    })    
 
     // If no parts could be matched, throw an error.
     if (matchedParts.length === 0) {
+      this.$refs.funnelFooter.removeLoader();
       throw new Error("Could not match any parts to the selected parts");
     }
 
-    // // Save parts to the store.
-    // store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts);
+    // Save parts to the store.
+    store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts);
 
     // // Navigate to the next page.
     // this.$router.navigateAfterSave(
@@ -227,10 +193,7 @@ methods: {
 
   LoadInitialPartsData() {
     const partsData = this.PartsFromApi;
-    const alreadyPopulatedPartsData =
-    this.$store.getters.lineItems.glassParts === null
-    ? {}
-    : this.$store.getters.lineItems.glassParts;
+    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.

From 8a1fc5bbe51ca15803a96cb30698b5200f7c9df8 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Mon, 27 Jun 2022 15:45:43 -0400
Subject: [PATCH 07/21] CSR-343 Edit CSS

---
 .../button-question/button-question.vue       | 86 ++++++++++---------
 .../funnel-footer/funnel-footer.vue           |  1 -
 .../question-chain/question-chain.vue         |  1 -
 .../glass-part-question.vue                   | 11 +--
 src/layouts/vehicle-parts/vehicle-parts.vue   |  3 +-
 src/ux-components/list-card/list-card.vue     |  2 +-
 6 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 904089c34..80f9c1a4a 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -4,44 +4,46 @@
     <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
       <span class="fs-5 fw-bold w-100">{{ questionText }}</span>
     </div>
-    <div class="w-100 justify-content-center">
+    <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName">
         <legend class="sr-only" :data-focus-target="groupName" :id="groupName" tabindex="-1">
           {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
         </legend>
-        <div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
-          <component
-            :is="buttonType"
-            @isCheckedChanged="handleCheckedChanged"
-            :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
-            :value="getValues(answer)"
-            :buttonLabel="answer.Text ? answer.Text : answer"
-            :buttonLabelSubCopy="answer.SubText"
-            :textPosition="textPosition"
-            :isMultiSelect="isMultiSelect"
-            :groupName="groupName"
-            :selectingInitiatesLoad="selectingInitiatesLoad"
-            :loaderColor="loaderColor"
-            :loaderPosition="loaderPosition"
-            :isWide=isWide
-            :isRequired=isRequired
-            :buttonImage="answer.AnswerImageUrl"
-            :buttonImageId="answer.ImageId"
-            :altText="answer.Name ? answer.Name : answer"
-            screenReaderOnlyText="(opens new window)"
-            :colLength="getColLength"
-            :selectedValues="selectedValues"
-            data-test="button"
-            :validationRules="validationRules"
-            :class="[suppressError ? 'alertError' : '']"
-            :clearOnUnmount="clearOnUnmount"
-          />
-          <!-- For nested questions --> 
-          <transition name="fade" mode="out-in">
-            <div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
-              <slot></slot>
-            </div>
-          </transition>
+        <div :class="getComponentWrapperClasses">
+          <div :class="isWide ? 'col-12' : 'col'" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
+            <component
+              :is="buttonType"
+              @isCheckedChanged="handleCheckedChanged"
+              :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
+              :value="getValues(answer)"
+              :buttonLabel="answer.Text ? answer.Text : answer"
+              :buttonLabelSubCopy="answer.SubText"
+              :textPosition="textPosition"
+              :isMultiSelect="isMultiSelect"
+              :groupName="groupName"
+              :selectingInitiatesLoad="selectingInitiatesLoad"
+              :loaderColor="loaderColor"
+              :loaderPosition="loaderPosition"
+              :isWide=isWide
+              :isRequired=isRequired
+              :buttonImage="answer.AnswerImageUrl"
+              :buttonImageId="answer.ImageId"
+              :altText="answer.Name ? answer.Name : answer"
+              screenReaderOnlyText="(opens new window)"
+              :colLength="getColLength"
+              :selectedValues="selectedValues"
+              data-test="button"
+              :validationRules="validationRules"
+              :class="[suppressError ? 'alertError' : '']"
+              :clearOnUnmount="clearOnUnmount"
+            />
+            <!-- For nested questions --> 
+            <transition name="fade" mode="out-in">
+              <div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
+                <slot></slot>
+              </div>
+            </transition>
+          </div>
         </div>
       </fieldset>
     </div>
@@ -96,9 +98,15 @@ export default {
   },
   computed: {
     getFieldSetClasses() {
-      return this.isOverflowScrollable
-        ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
-        : "";
+      if (this.isOverflowScrollable) {
+        return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
+      }
+      else if (this.buttonType == "listCard") {
+        return "w-100";
+      }
+      else {
+        return "";
+      }
     },
     getComponentWrapperClasses() {
       let classes;
@@ -110,7 +118,7 @@ export default {
           classes = "d-flex flex-row p-0";
           break;
         case 'listCard':
-          classes = 'row justify-content-center g-2'
+          classes = "row g-2 justify-content-center";
           break;
         case 'radio':
           classes = 'ui-radio d-flex'
@@ -122,7 +130,7 @@ export default {
       if(this.isWide) {
         return "12"
       } else {
-        return this.answers.length < 3 ? '' : '-4';
+        return "";
       }
     },
     selectedValues: {
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 0ad18c6b1..2c4152cfa 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -85,7 +85,6 @@ export default {
       };
     },
     buttonClick() {
-      console.log("HI")
       //prevent keyboard input after button click
       document.onkeydown = function (e) {
         return false;
diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue
index 8ab4ea4f1..d080ef3aa 100644
--- a/src/common-components/question-chain/question-chain.vue
+++ b/src/common-components/question-chain/question-chain.vue
@@ -36,7 +36,6 @@ export default {
   computed: {
       
     questions() {
-        console.log("answeredQuestions: ", this.answeredQuestions)
         const questions = this.questionData.partQuestions.map((q, i) => {
             return {
                 questionText: q.questionText,
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 994e2164a..42fd189a4 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,11 +1,8 @@
 <template>
-    <div class="container">
-        <div class="row">
-            <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
-        </div>
+    <div class="row">
+        <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
     </div>
-
-    <div class="container nested-radio">
+    <div class="nested-radio">
         <div class="row my-2">
             <div class="col">
                 <buttonQuestion
@@ -19,7 +16,6 @@
                     @isCheckedChanged="ResetTintAndPartSelections()"
                     validationRules="replace-options-required"
                 >
-                    <transition name="fade" mode="out-in">
                         <div class="row my-2" aria-live="polite">
                             <div class="col">
                                 <buttonQuestion
@@ -37,7 +33,6 @@
                                 />
                             </div>
                         </div>
-                    </transition>
                 </buttonQuestion>
             </div>
         </div>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 790b54439..77d57d0d7 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -9,7 +9,7 @@
     <vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
     <div class="fade-on-route-transition sub-container make-tall">
-      <div class="container-fluid prevent-squish my-5">
+      <div class="prevent-squish my-5">
         <div class="row">
           <div class="col">
             <alert
@@ -27,7 +27,6 @@
         <div class="container-fluid">
           <hr v-if="i > 0" />
         </div>
-{{ glassParts }}
         <glassPartQuestion
           :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
           v-model="glassParts[item.glassLocation + '-' + item.glassName]"
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 88aad0b6a..316977db1 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="'col' + colLength">
+  <div :class="'h-100 l' + colLength">
     <div
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
       :class="[

From 06335ba625600910d9eade283f3db0d22ca5e4d3 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Tue, 28 Jun 2022 11:17:57 -0400
Subject: [PATCH 08/21] CSR-343 Finish validation

---
 .../button-question/button-question.vue       |  25 +++-
 .../glass-part-question.vue                   | 135 +++++++++++-------
 src/layouts/vehicle-parts/vehicle-parts.vue   |  41 +++---
 src/ux-components/list-card/list-card.vue     |   6 +-
 src/ux-components/radio/radio.vue             |   7 +-
 5 files changed, 137 insertions(+), 77 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 80f9c1a4a..fe58bd29e 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -9,8 +9,8 @@
         <legend class="sr-only" :data-focus-target="groupName" :id="groupName" tabindex="-1">
           {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
         </legend>
-        <div :class="getComponentWrapperClasses">
-          <div :class="isWide ? 'col-12' : 'col'" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
+        <div :class="getComponentLoopWrapperClasses">
+          <div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
             <component
               :is="buttonType"
               @isCheckedChanged="handleCheckedChanged"
@@ -108,7 +108,7 @@ export default {
         return "";
       }
     },
-    getComponentWrapperClasses() {
+    getComponentLoopWrapperClasses() {
       let classes;
       switch (this.buttonType) {
         case "listButton":
@@ -126,6 +126,17 @@ export default {
       }
       return classes;
     },
+    getComponentWrapperClasses() {
+      let classes = "";
+
+      classes += this.isWide ? "col-12" : "col";
+
+      if (this.buttonType == "radio") {
+        classes += " radio-button-container";
+      }
+
+      return classes;
+    },
     getColLength(){
       if(this.isWide) {
         return "12"
@@ -163,6 +174,8 @@ export default {
           this.selectedValues = val.value;
         }
       }
+
+      this.$emit("isCheckedChanged", val);
     },
   },
   components: {
@@ -188,6 +201,12 @@ export default {
 }
 .button-question {
   color: $black;
+
+  .radio-button-container {
+    &:not(:last-child) {
+      padding-bottom: map-get($spacers, 2);
+    }
+  }
 }
 .question-text {
   margin-top: 1.5rem;
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 42fd189a4..f6a5a3802 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
@@ -13,26 +13,25 @@
                     altText=""
                     isRequired
                     :groupName="`${glassLocation}-${glassName}`"
-                    @isCheckedChanged="ResetTintAndPartSelections()"
+                    @isCheckedChanged="ResetTintAndPartSelections"
                     validationRules="replace-options-required"
                 >
-                        <div class="row my-2" aria-live="polite">
-                            <div class="col">
-                                <buttonQuestion
-                                    v-model="selectedPart"
-                                    buttonType="radio"
-                                    class="radioQuestion"
-                                    :questionText="glassFeatureQuestion"
-                                    :answers="featureListData[selectedTint]"
-                                    :selectedValues="selectedPart"
-                                    textPosition="text-start"
-                                    :loaderEnabled="false"
-                                    isRequired
-                                    :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
-                                    validationRules="part-required"
-                                />
-                            </div>
+                    <div class="row my-2" aria-live="polite">
+                        <div class="col">
+                            <buttonQuestion
+                                v-model="selectedPartNumber"
+                                buttonType="radio"
+                                class="radioQuestion"
+                                :questionText="glassFeatureQuestion"
+                                :answers="featureListData[selectedTint]"
+                                textPosition="text-start"
+                                :loaderEnabled="false"
+                                isRequired
+                                :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
+                                :validationRules="`${glassLocation}-${glassName}-part-required`"
+                            />
                         </div>
+                    </div>
                 </buttonQuestion>
             </div>
         </div>
@@ -58,7 +57,8 @@ import { errorMessages } from "@/constants/error-messages";
 // import { ErrorMessage } from "vee-validate";
 
 defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED));
-defineRule("part-required", required(errorMessages.OPTION_REQUIRED));
+// defineRule("part-required", required(errorMessages.OPTION_REQUIRED));
+defineRule(`${this.glassLocation}-${this.glassName}-part-required`, required(errorMessages.OPTION_REQUIRED));
 
 export default {
     name: "glass-part-question",
@@ -78,6 +78,7 @@ export default {
         // validationRules: String,
     },
     mounted() {
+        // this.setAllValidationRules();
         this.LoadPreselectedValues();
     },
     components: {
@@ -108,15 +109,26 @@ export default {
             return tintOptions;
         },
 
-        selectedPart: {
-            get: function () {
-                return this.modelValue;
+        selectedPartNumber: {
+            get() {
+                console.log(this.modelValue)
+                return this.modelValue?.partNumber;
             },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
+            set(newValue) {
+                console.log("setting")
+                console.log(newValue)
+
+                this.$emit("update:modelValue", this.partsForSelectedTint.filter(part => part.partNumber == newValue)[0]);
             },
         },
 
+        partsForSelectedTint() {
+            return this.PartDataFromApi.partsOrQuestions.filter(dataForGlassLocationAndName => 
+                dataForGlassLocationAndName.glassName == this.glassName &&
+                dataForGlassLocationAndName.glassLocation == this.glassLocation)[0]
+                .parts.filter(part => part.color == this.selectedTint);
+        },
+
         // Creates a map of the feature list data in the correct Name/Value
         // format for the button-question component.
         featureListData() {
@@ -176,34 +188,47 @@ 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 = {};
+            console.log("Resetting!")
+            // this.selectedTint = "";
+            this.selectedPartNumber = null;
             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];
+            console.log("Autoselecting, my dear")
+            console.log(this.PartDataFromApi.partsOrQuestions)
+            console.log(this.glassName)
+            console.log(this.glassLocation)
+            console.log(this.selectedTint)
+            console.log(this.partsForSelectedTint)
 
-                    if (
-                        currentGlassSelection.glassName === this.glassName &&
-                        currentGlassSelection.glassLocation ===
-                            this.glassLocation
-                    ) {
-                        if (currentGlassSelection.parts.length === 1) {
-                            this.selectedPart = {
-                                [currentGlassSelection.glassLocation]: [
-                                    currentGlassSelection.parts[0].partNumber,
-                                ],
-                            };
-                        }
-                    }
-                }
-            );
+            if (this.partsForSelectedTint?.length == 1) {
+                console.log("One!")
+                this.selectedPartNumber = this.partsForSelectedTint[0].partNumber;
+                console.log(this.selectedPartNumber)
+            }
+
+            // this.$nextTick()
+            console.log(this.selectedPartNumber)
+            
+            // 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.selectedPartNumber = currentGlassSelection.parts[0].partNumber
+            //             }
+            //         }
+            //     }
+            // );
         },
 
         // Loads the preselected values from the store.
@@ -211,12 +236,10 @@ export default {
             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;
+                    const alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts;
 
                     Object.keys(alreadyPopulatedPartsData).forEach((key) => {
-                        const partNumber =
-                            alreadyPopulatedPartsData[key].partNumber;
+                        const partNumber = alreadyPopulatedPartsData[key].partNumber;
                         const tintColor = alreadyPopulatedPartsData[key].color;
 
                         Object.keys(this.modelValue).forEach((key) => {
@@ -233,10 +256,20 @@ export default {
                 }
             });
         },
+        // setAllValidationRules() {
+        //     console.log("SETTING VALIDATION RULES")
+        //     console.log(this.PartDataFromApi.partsOrQuestions)
+        //     this.PartDataFromApi.partsOrQuestions.forEach(part => {
+        //         console.log(`${this.glassLocation}-${this.glassName}-${this.selectedTint}-part-required`)
+        //         defineRule(`${this.glassLocation}-${this.glassName}-part-required`, required(errorMessages.OPTION_REQUIRED));
+        //     })
+        // }
     },
     watch: {
-        selectedTint(newTint, previousTint) {
-            this.selectedPart = null;
+        selectedTint() {
+            console.log("watch me")
+            this.selectedPartNumber = null;
+            this.AutoSelectIfSinglePart()
         }
     }
 };
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 77d57d0d7..79c96c345 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -21,12 +21,10 @@
           </div>
         </div>
       </div>
-
-      <div v-for="(item, i) in PartsForQuestions" :key="i">
+{{ glassParts }}
+      <div v-for="(item, i) in PartsOrQuestions" :key="i">
         <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-        <div class="container-fluid">
-          <hr v-if="i > 0" />
-        </div>
+        <hr v-if="i > 0" />
         <glassPartQuestion
           :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
           v-model="glassParts[item.glassLocation + '-' + item.glassName]"
@@ -108,7 +106,7 @@ computed: {
   isForwardActionDisabled() {
     return !this.glassParts || Object.values(this.glassParts).filter(value => value).length === 0;
   },
-  PartsForQuestions() {
+  PartsOrQuestions() {
     const partsData = this.PartsFromApi;
 
     // Map API result data, to vehicle-parts data structure
@@ -164,26 +162,35 @@ methods: {
 
     // Match them to the parts from the API.
     this.PartsFromApi.partsOrQuestions.forEach(part => {
-      const selectedPartNumberForGlassLocationAndName = this.glassParts[`${part.glassLocation}-${part.glassName}`];
-      const selectedPartData = part.parts.filter(part => part.partNumber == selectedPartNumberForGlassLocationAndName);
+      const selectedPartForGlassLocationAndName = this.glassParts[`${part.glassLocation}-${part.glassName}`];
+      console.log(part)
+      console.log(this.glassParts)
+      console.log(`${part.glassLocation}-${part.glassName}`)
+      console.log(selectedPartForGlassLocationAndName)
+      const selectedPartData = part.parts.filter(part => selectedPartForGlassLocationAndName && part.partNumber == selectedPartForGlassLocationAndName?.partNumber)[0];
 
-      matchedParts.push(selectedPartData[0]);
+      if (selectedPartData)
+        matchedParts.push(selectedPartData);
     })    
 
+    console.log(matchedParts)
+
     // If no parts could be matched, throw an error.
-    if (matchedParts.length === 0) {
+    if (matchedParts.length !== this.PartsFromApi.length) {
       this.$refs.funnelFooter.removeLoader();
       throw new Error("Could not match any parts to the selected parts");
     }
 
+    this.$refs.funnelFooter.removeLoader();
+
     // Save parts to the store.
     store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts);
 
-    // // Navigate to the next page.
-    // this.$router.navigateAfterSave(
-    //   this.navigationScenarios.SELECTED_PARTS,
-    //   this.$route
-    // );
+    // Navigate to the next page.
+    this.$router.navigateAfterSave(
+      this.navigationScenarios.SELECTED_PARTS,
+      this.$route
+    );
   },
 
   resetDependentState() {
@@ -193,7 +200,7 @@ methods: {
   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) => {
@@ -206,7 +213,7 @@ methods: {
           }
         });
       });
-    });
+    });  
   },
 },
 mounted() {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 316977db1..120194e34 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,7 +1,7 @@
 <template>
-  <div :class="'h-100 l' + colLength">
+  <div :class="{'h-100': !isWide}">
     <div
-      class="list-card w-100 rounded-3 d-flex align-items-center h-100"
+      class="list-card w-100 rounded-3 d-flex align-items-center"
       :class="[
         isWide ? 'horizontal' : '',
         (errors.length > 0 || hasError) ? 'has-error' : '',
@@ -25,7 +25,7 @@
         tabindex="-1"
         :for="buttonID"
         :aria-labelledby="buttonID"
-        class="d-flex w-100 align-items-center px-2 h-100"
+        class="d-flex w-100 align-items-center px-2"
         :class="getLabelClasses"
         @mouseup="triggerButton()"
       >
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 98fff6b35..e13e85a98 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -49,8 +49,8 @@ export default {
   },
   created() {
     if (this.selectedValues) {
-      this.checkValue = this.selectedValues[0] === this.value;
-    }else{
+      this.checkValue = this.selectedValues === this.value;
+    } else{
       this.checkValue = false;
     }
   },
@@ -86,12 +86,13 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>yu78zas
+<style lang="scss" scoped>
 .form-check {
   .form-check-input {
     border: 1px solid $gray-500;
     border-radius: 100%;
     margin-right: 0.5rem;
+    margin-top: 0.12rem;
     &:checked {
       background-color: $white;
       background-size: 71%;

From 8fe1dd8d7bddf5219a3f15718ed59d0e433d1d7c Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Tue, 28 Jun 2022 17:46:05 -0400
Subject: [PATCH 09/21] CSR-343 Fix reloading/repopulating and CSS

---
 .../button-question/button-question.vue       | 14 +--
 .../glass-part-question.vue                   | 88 ++-----------------
 src/layouts/vehicle-parts/vehicle-parts.vue   | 73 +++++++++------
 src/router/router-constants/fmgPage-values.js |  1 +
 src/ux-components/list-card/list-card.vue     | 32 ++++++-
 src/ux-components/radio/radio.vue             | 16 +++-
 6 files changed, 110 insertions(+), 114 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index fe58bd29e..582b4a3f9 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -5,8 +5,8 @@
       <span class="fs-5 fw-bold w-100">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName">
-        <legend class="sr-only" :data-focus-target="groupName" :id="groupName" tabindex="-1">
+      <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="formattedGroupName">
+        <legend class="sr-only" :data-focus-target="formattedGroupName" :id="formattedGroupName" tabindex="-1">
           {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
         </legend>
         <div :class="getComponentLoopWrapperClasses">
@@ -14,13 +14,13 @@
             <component
               :is="buttonType"
               @isCheckedChanged="handleCheckedChanged"
-              :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
+              :buttonID="answer.Name ? formattedGroupName + '-' + answer.Name : formattedGroupName + '-' + answer"
               :value="getValues(answer)"
               :buttonLabel="answer.Text ? answer.Text : answer"
               :buttonLabelSubCopy="answer.SubText"
               :textPosition="textPosition"
               :isMultiSelect="isMultiSelect"
-              :groupName="groupName"
+              :groupName="formattedGroupName"
               :selectingInitiatesLoad="selectingInitiatesLoad"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
@@ -48,7 +48,7 @@
       </fieldset>
     </div>
     <div class="row form-test-error mt-1">
-        <error-message :name="groupName" v-if="!suppressError"></error-message>
+        <error-message :name="formattedGroupName" v-if="!suppressError"></error-message>
     </div>
   </div>
 </template>
@@ -97,6 +97,9 @@ export default {
     },
   },
   computed: {
+    formattedGroupName() {
+      return this.groupName.replace(" ", "-");
+    },
     getFieldSetClasses() {
       if (this.isOverflowScrollable) {
         return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
@@ -175,6 +178,7 @@ export default {
         }
       }
 
+      this.$emit("change");
       this.$emit("isCheckedChanged", val);
     },
   },
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 f6a5a3802..302f0ac02 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
@@ -14,7 +14,7 @@
                     isRequired
                     :groupName="`${glassLocation}-${glassName}`"
                     @isCheckedChanged="ResetTintAndPartSelections"
-                    validationRules="replace-options-required"
+                    :validationRules="`${glassLocation}-${glassName}-tint-required`"
                 >
                     <div class="row my-2" aria-live="polite">
                         <div class="col">
@@ -36,12 +36,6 @@
             </div>
         </div>
     </div>
-    <div class="row form-test-error mt-1">
-        <!-- <error-message
-            :name="`${glassLocation}-${glassName}`"
-            v-if="!suppressError"
-        ></error-message> -->
-    </div>
 </template>
 
 <script>
@@ -54,11 +48,6 @@ import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-// import { ErrorMessage } from "vee-validate";
-
-defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED));
-// defineRule("part-required", required(errorMessages.OPTION_REQUIRED));
-defineRule(`${this.glassLocation}-${this.glassName}-part-required`, required(errorMessages.OPTION_REQUIRED));
 
 export default {
     name: "glass-part-question",
@@ -75,15 +64,14 @@ export default {
         glassLocation: String,
         colorAnswers: Array,
         modelValue: Object,
-        // validationRules: String,
+        alreadyPopulatedPartsData: Object
     },
     mounted() {
-        // this.setAllValidationRules();
+        this.setAllValidationRules();
         this.LoadPreselectedValues();
     },
     components: {
         buttonQuestion,
-        // ErrorMessage,
     },
     computed: {
         colorQuestionText() {
@@ -111,13 +99,9 @@ export default {
 
         selectedPartNumber: {
             get() {
-                console.log(this.modelValue)
                 return this.modelValue?.partNumber;
             },
             set(newValue) {
-                console.log("setting")
-                console.log(newValue)
-
                 this.$emit("update:modelValue", this.partsForSelectedTint.filter(part => part.partNumber == newValue)[0]);
             },
         },
@@ -188,47 +172,15 @@ 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() {
-            console.log("Resetting!")
-            // this.selectedTint = "";
             this.selectedPartNumber = null;
             this.AutoSelectIfSinglePart();
         },
 
         // Check if only a single part is present for the tint and set the v-model if it is.
         AutoSelectIfSinglePart() {
-            console.log("Autoselecting, my dear")
-            console.log(this.PartDataFromApi.partsOrQuestions)
-            console.log(this.glassName)
-            console.log(this.glassLocation)
-            console.log(this.selectedTint)
-            console.log(this.partsForSelectedTint)
-
             if (this.partsForSelectedTint?.length == 1) {
-                console.log("One!")
                 this.selectedPartNumber = this.partsForSelectedTint[0].partNumber;
-                console.log(this.selectedPartNumber)
             }
-
-            // this.$nextTick()
-            console.log(this.selectedPartNumber)
-            
-            // 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.selectedPartNumber = currentGlassSelection.parts[0].partNumber
-            //             }
-            //         }
-            //     }
-            // );
         },
 
         // Loads the preselected values from the store.
@@ -236,40 +188,18 @@ export default {
             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(this.modelValue).forEach((key) => {
-                            if (this.modelValue[key][0] === partNumber) {
-                                this.selectedTint = tintColor;
-                                // this.selectedTint[tintColor] = {
-                                //   buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
-                                //   checkValue: "",
-                                //   value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
-                                // };
-                            }
-                        });
-                    });
+                    this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0].color;
                 }
             });
         },
-        // setAllValidationRules() {
-        //     console.log("SETTING VALIDATION RULES")
-        //     console.log(this.PartDataFromApi.partsOrQuestions)
-        //     this.PartDataFromApi.partsOrQuestions.forEach(part => {
-        //         console.log(`${this.glassLocation}-${this.glassName}-${this.selectedTint}-part-required`)
-        //         defineRule(`${this.glassLocation}-${this.glassName}-part-required`, required(errorMessages.OPTION_REQUIRED));
-        //     })
-        // }
+        setAllValidationRules() {
+            defineRule(`${this.glassLocation}-${this.glassName}-tint-required`, required(errorMessages.OPTION_REQUIRED));
+            defineRule(`${this.glassLocation}-${this.glassName}-part-required`, required(errorMessages.OPTION_REQUIRED));
+        }
     },
     watch: {
         selectedTint() {
-            console.log("watch me")
-            this.selectedPartNumber = null;
-            this.AutoSelectIfSinglePart()
+            this.AutoSelectIfSinglePart();
         }
     }
 };
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 79c96c345..fa6b3ea91 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -31,6 +31,7 @@
           :glassLocation="item.glassLocation"
           :glassName="item.glassName"
           :colorAnswers="item.colorAnswers"
+          :alreadyPopulatedPartsData="alreadyPopulatedPartsData"
           />
       </div>
       <funnelFooter
@@ -91,6 +92,7 @@ data() {
   return {
     glassParts: {},
     alertWidgetData: Object,
+    alreadyPopulatedPartsData: {}
   };
 },
 components: {
@@ -163,34 +165,28 @@ methods: {
     // Match them to the parts from the API.
     this.PartsFromApi.partsOrQuestions.forEach(part => {
       const selectedPartForGlassLocationAndName = this.glassParts[`${part.glassLocation}-${part.glassName}`];
-      console.log(part)
-      console.log(this.glassParts)
-      console.log(`${part.glassLocation}-${part.glassName}`)
-      console.log(selectedPartForGlassLocationAndName)
       const selectedPartData = part.parts.filter(part => selectedPartForGlassLocationAndName && part.partNumber == selectedPartForGlassLocationAndName?.partNumber)[0];
 
       if (selectedPartData)
         matchedParts.push(selectedPartData);
     })    
 
-    console.log(matchedParts)
-
     // If no parts could be matched, throw an error.
-    if (matchedParts.length !== this.PartsFromApi.length) {
+    if (Object.keys(matchedParts).length !== this.PartsFromApi.partsOrQuestions.length) {
       this.$refs.funnelFooter.removeLoader();
       throw new Error("Could not match any parts to the selected parts");
     }
 
-    this.$refs.funnelFooter.removeLoader();
+    console.log(matchedParts)
 
     // Save parts to the store.
     store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts);
 
     // Navigate to the next page.
-    this.$router.navigateAfterSave(
-      this.navigationScenarios.SELECTED_PARTS,
-      this.$route
-    );
+    // this.$router.navigateAfterSave(
+    //   this.navigationScenarios.SELECTED_PARTS,
+    //   this.$route
+    // );
   },
 
   resetDependentState() {
@@ -198,21 +194,48 @@ methods: {
   },
 
   LoadInitialPartsData() {
-    const partsData = this.PartsFromApi;
-    const alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts === null ? {} : this.$store.getters.lineItems.glassParts;
+    console.log("Loading in vehicle-parts") 
+    this.alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts ?? [];
+
+    // MOCKKKK, real one is above
+    // console.log(this.PartsFromApi.partsOrQuestions[0])
+    // this.alreadyPopulatedPartsData = [this.PartsFromApi.partsOrQuestions[0].parts[0], this.PartsFromApi.partsOrQuestions[1].parts[0], this.PartsFromApi.partsOrQuestions[2].parts[0], this.PartsFromApi.partsOrQuestions[3].parts[0], this.PartsFromApi.partsOrQuestions[4].parts[0]];
+    // console.log("MOCK alreadyPopulatedPartsData")
+    // console.log(this.alreadyPopulatedPartsData)
+
+    const savedPartNumbers = this.alreadyPopulatedPartsData.map(part => part.partNumber)
+    console.log(savedPartNumbers)
+
+    // const allPartsForGlass = this.PartsFromApi.partsOrQuestions.filter(glass => glass.glassLocation == this.glassLocation && glass.glassName == this.glassName)[0].parts;
     
-    partsData.partsOrQuestions.map((g) => {
+    this.PartsFromApi.partsOrQuestions.forEach(glass => {
+      console.log("glass")
+      console.log(glass)
+
+      const savedPart = glass.parts.filter(part => savedPartNumbers.includes(part.partNumber))[0];
+      console.log('savedPart')
+      console.log(savedPart)
+      if (savedPart) {
+        this.glassParts[`${glass.glassLocation}-${glass.glassName}`.replace(" ", "-")] = savedPart;
+      }
+      console.log('glassParts')
+      console.log(this.glassParts)
+      // this.glassParts[`${glass.glassLocation}-${glass.glassName}`] = 
       // 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],
-            };
-          }
-        });
-      });
+      
+      // Object.keys(alreadyPopulatedPartsData).forEach(savedPart => {
+      //   const savedPartNumber = savedPart.partNumber;
+
+      //   let test = partFromApi.parts.filter(part => part.partNumber == savedPartNumber);
+      //   console.log(test);
+      //   // g.parts.forEach((p) => {
+      //   //   if (p.partNumber === partNumber) {
+      //   //     this.glassParts[g.glassLocation + "-" + g.glassName] = {
+      //   //       [g.glassLocation]: [partNumber],
+      //   //     };
+      //   //   }
+      //   // });
+      // });
     });  
   },
 },
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index 9abb45cd2..d067895ee 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -12,6 +12,7 @@ const fmgPageValues = {
   REVEAL: "reveal",
   ESTIMATE: "estimate",
   ADDRESS_VEHICLES: "address-vehicles",
+  QUOTE: "quote"
 };
 
 export { fmgPageValues };
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 120194e34..896be812f 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -3,6 +3,7 @@
     <div
       class="list-card w-100 rounded-3 d-flex align-items-center"
       :class="[
+        'h-100',
         isWide ? 'horizontal' : '',
         (errors.length > 0 || hasError) ? 'has-error' : '',
       ]"
@@ -19,15 +20,16 @@
         :value="value"
         :aria-required="isRequired"
         v-model="checkValue"
-        @change="handleInputChange()"
+        :checked="checkValue"
+        @change="handleInputChange"
       />
       <label
         tabindex="-1"
         :for="buttonID"
         :aria-labelledby="buttonID"
-        class="d-flex w-100 align-items-center px-2"
+        class="d-flex w-100 align-items-center px-2 h-100"
         :class="getLabelClasses"
-        @mouseup="triggerButton()"
+        @mouseup="triggerButton"
       >
         <img
           :id="buttonImageId"
@@ -102,6 +104,12 @@ export default {
         ? this.selectedValues.includes(this.value)
         : this.selectedValues[0];
     }
+    else {
+      console.log("HI")
+      console.log(this.modelValue)
+      console.log(this.value)
+      this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
+    }
   },
   unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
     if (this.clearOnUnmount) {
@@ -124,7 +132,9 @@ export default {
   },
   methods: {
     handleInputChange() {
+      console.log("HI 1")
         if(!this.selectingInitiatesLoad) {
+          console.log("HI 2")
           this.handleCheckChange();
         }
     },
@@ -164,6 +174,22 @@ export default {
         this.checkValue = newVal.value;
       }
     },
+    selectedValues(newVal) {
+      // this.handleChange(newVal == this.value);
+      console.log("WATCH")
+      console.log(newVal)
+      console.log(typeof newVal)
+      console.log(typeof newVal === "string")
+      if (typeof newVal === "string") {
+        console.log(this.value)
+        // console.log(newVal == this.value)
+        this.handleChange(this.value);
+        this.checkValue = newVal == this.value;
+      }
+      else if (newVal !== undefined) {
+        this.checkValue = newVal.value;
+      }
+    },
   },
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index e13e85a98..8af669ba3 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -50,6 +50,7 @@ export default {
   created() {
     if (this.selectedValues) {
       this.checkValue = this.selectedValues === this.value;
+      this.handleCheckChange();
     } else{
       this.checkValue = false;
     }
@@ -88,14 +89,17 @@ export default {
 
 <style lang="scss" scoped>
 .form-check {
+  position: relative;
+
   .form-check-input {
     border: 1px solid $gray-500;
-    border-radius: 100%;
+    border-radius: 50%;
     margin-right: 0.5rem;
-    margin-top: 0.12rem;
+
     &:checked {
       background-color: $white;
       background-size: 71%;
+      background-position: center;
       border: 1px solid $blue;
       background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
       + label {
@@ -109,7 +113,15 @@ export default {
     &:focus {
       box-shadow: 0 0 0 2.5px $blue;
     }
+
+    &, & + label {
+      margin-top: 0;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
+
   &:hover {
     .form-check-input {
       box-shadow: 0 0 0 4px $blue-300;

From a979bf2c852e2f1e6c1896f7b8c73723b94099af Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 29 Jun 2022 08:40:46 -0400
Subject: [PATCH 10/21] CSR-343 Fix back button

---
 .../glass-part-question.vue                   | 23 +++++++-----
 src/layouts/vehicle-parts/vehicle-parts.vue   | 37 -------------------
 src/ux-components/list-card/list-card.vue     | 12 ------
 3 files changed, 14 insertions(+), 58 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 302f0ac02..3dad69450 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
@@ -14,7 +14,7 @@
                     isRequired
                     :groupName="`${glassLocation}-${glassName}`"
                     @isCheckedChanged="ResetTintAndPartSelections"
-                    :validationRules="`${glassLocation}-${glassName}-tint-required`"
+                    :validationRules="tintValidationRules"
                 >
                     <div class="row my-2" aria-live="polite">
                         <div class="col">
@@ -28,7 +28,7 @@
                                 :loaderEnabled="false"
                                 isRequired
                                 :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
-                                :validationRules="`${glassLocation}-${glassName}-part-required`"
+                                :validationRules="partValidationRules"
                             />
                         </div>
                     </div>
@@ -67,13 +67,22 @@ export default {
         alreadyPopulatedPartsData: Object
     },
     mounted() {
-        this.setAllValidationRules();
         this.LoadPreselectedValues();
     },
     components: {
         buttonQuestion,
     },
     computed: {
+        tintValidationRules() {
+            const validationRuleName = `${this.glassLocation}-${this.glassName}-tint-required`;
+            defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));  
+            return validationRuleName;
+        },
+        partValidationRules() {
+            const validationRuleName = `${this.glassLocation}-${this.glassName}-part-required`;
+            defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));   
+            return validationRuleName;
+        },
         colorQuestionText() {
             return getCustomTransformValue(
                 this.glassColorQuestion,
@@ -107,10 +116,10 @@ export default {
         },
 
         partsForSelectedTint() {
-            return this.PartDataFromApi.partsOrQuestions.filter(dataForGlassLocationAndName => 
+            return this.PartDataFromApi.partsOrQuestions?.filter(dataForGlassLocationAndName => 
                 dataForGlassLocationAndName.glassName == this.glassName &&
                 dataForGlassLocationAndName.glassLocation == this.glassLocation)[0]
-                .parts.filter(part => part.color == this.selectedTint);
+                .parts?.filter(part => part.color == this.selectedTint) ?? [];
         },
 
         // Creates a map of the feature list data in the correct Name/Value
@@ -192,10 +201,6 @@ export default {
                 }
             });
         },
-        setAllValidationRules() {
-            defineRule(`${this.glassLocation}-${this.glassName}-tint-required`, required(errorMessages.OPTION_REQUIRED));
-            defineRule(`${this.glassLocation}-${this.glassName}-part-required`, required(errorMessages.OPTION_REQUIRED));
-        }
     },
     watch: {
         selectedTint() {
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index fa6b3ea91..b3634769b 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -21,7 +21,6 @@
           </div>
         </div>
       </div>
-{{ glassParts }}
       <div v-for="(item, i) in PartsOrQuestions" :key="i">
         <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
         <hr v-if="i > 0" />
@@ -177,8 +176,6 @@ methods: {
       throw new Error("Could not match any parts to the selected parts");
     }
 
-    console.log(matchedParts)
-
     // Save parts to the store.
     store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts);
 
@@ -194,48 +191,14 @@ methods: {
   },
 
   LoadInitialPartsData() {
-    console.log("Loading in vehicle-parts") 
     this.alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts ?? [];
 
-    // MOCKKKK, real one is above
-    // console.log(this.PartsFromApi.partsOrQuestions[0])
-    // this.alreadyPopulatedPartsData = [this.PartsFromApi.partsOrQuestions[0].parts[0], this.PartsFromApi.partsOrQuestions[1].parts[0], this.PartsFromApi.partsOrQuestions[2].parts[0], this.PartsFromApi.partsOrQuestions[3].parts[0], this.PartsFromApi.partsOrQuestions[4].parts[0]];
-    // console.log("MOCK alreadyPopulatedPartsData")
-    // console.log(this.alreadyPopulatedPartsData)
-
     const savedPartNumbers = this.alreadyPopulatedPartsData.map(part => part.partNumber)
-    console.log(savedPartNumbers)
-
-    // const allPartsForGlass = this.PartsFromApi.partsOrQuestions.filter(glass => glass.glassLocation == this.glassLocation && glass.glassName == this.glassName)[0].parts;
-    
     this.PartsFromApi.partsOrQuestions.forEach(glass => {
-      console.log("glass")
-      console.log(glass)
-
       const savedPart = glass.parts.filter(part => savedPartNumbers.includes(part.partNumber))[0];
-      console.log('savedPart')
-      console.log(savedPart)
       if (savedPart) {
         this.glassParts[`${glass.glassLocation}-${glass.glassName}`.replace(" ", "-")] = savedPart;
       }
-      console.log('glassParts')
-      console.log(this.glassParts)
-      // this.glassParts[`${glass.glassLocation}-${glass.glassName}`] = 
-      // If the part is already populated, use the value from the store and populate the v-model.
-      
-      // Object.keys(alreadyPopulatedPartsData).forEach(savedPart => {
-      //   const savedPartNumber = savedPart.partNumber;
-
-      //   let test = partFromApi.parts.filter(part => part.partNumber == savedPartNumber);
-      //   console.log(test);
-      //   // g.parts.forEach((p) => {
-      //   //   if (p.partNumber === partNumber) {
-      //   //     this.glassParts[g.glassLocation + "-" + g.glassName] = {
-      //   //       [g.glassLocation]: [partNumber],
-      //   //     };
-      //   //   }
-      //   // });
-      // });
     });  
   },
 },
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 896be812f..200b84d3f 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -105,9 +105,6 @@ export default {
         : this.selectedValues[0];
     }
     else {
-      console.log("HI")
-      console.log(this.modelValue)
-      console.log(this.value)
       this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
     }
   },
@@ -132,9 +129,7 @@ export default {
   },
   methods: {
     handleInputChange() {
-      console.log("HI 1")
         if(!this.selectingInitiatesLoad) {
-          console.log("HI 2")
           this.handleCheckChange();
         }
     },
@@ -175,14 +170,7 @@ export default {
       }
     },
     selectedValues(newVal) {
-      // this.handleChange(newVal == this.value);
-      console.log("WATCH")
-      console.log(newVal)
-      console.log(typeof newVal)
-      console.log(typeof newVal === "string")
       if (typeof newVal === "string") {
-        console.log(this.value)
-        // console.log(newVal == this.value)
         this.handleChange(this.value);
         this.checkValue = newVal == this.value;
       }

From 77965201471a48edbd43a5296c943f07f194efe5 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 29 Jun 2022 08:59:30 -0400
Subject: [PATCH 11/21] CSR-343 Fix funnelFooter button disabling

---
 src/layouts/vehicle-parts/vehicle-parts.vue | 26 ++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index b3634769b..729faa973 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -105,7 +105,18 @@ components: {
 },
 computed: {
   isForwardActionDisabled() {
-    return !this.glassParts || Object.values(this.glassParts).filter(value => value).length === 0;
+    const matchedParts = [];
+
+    // Match them to the parts from the API.
+    this.PartsFromApi.partsOrQuestions.forEach(part => {
+      const selectedPartForGlassLocationAndName = this.glassParts[`${part.glassLocation}-${part.glassName}`];
+      const selectedPartData = part.parts.filter(part => selectedPartForGlassLocationAndName && part.partNumber == selectedPartForGlassLocationAndName?.partNumber)[0];
+
+      if (selectedPartData)
+        matchedParts.push(selectedPartData);
+    })    
+
+    return Object.keys(matchedParts).length !== this.PartsFromApi.partsOrQuestions.length;
   },
   PartsOrQuestions() {
     const partsData = this.PartsFromApi;
@@ -159,19 +170,8 @@ methods: {
     this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
   },
   forwardButtonAction() {
-    const matchedParts = [];
-
-    // Match them to the parts from the API.
-    this.PartsFromApi.partsOrQuestions.forEach(part => {
-      const selectedPartForGlassLocationAndName = this.glassParts[`${part.glassLocation}-${part.glassName}`];
-      const selectedPartData = part.parts.filter(part => selectedPartForGlassLocationAndName && part.partNumber == selectedPartForGlassLocationAndName?.partNumber)[0];
-
-      if (selectedPartData)
-        matchedParts.push(selectedPartData);
-    })    
-
     // If no parts could be matched, throw an error.
-    if (Object.keys(matchedParts).length !== this.PartsFromApi.partsOrQuestions.length) {
+    if (this.isForwardActionDisabled) {
       this.$refs.funnelFooter.removeLoader();
       throw new Error("Could not match any parts to the selected parts");
     }

From 960fec39267edba1949e0254e4f7fe4719c7b6b3 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 29 Jun 2022 09:22:14 -0400
Subject: [PATCH 12/21] CSR-343 Fix bug

---
 src/layouts/vehicle-parts/vehicle-parts.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 729faa973..b30a8c292 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -105,6 +105,9 @@ components: {
 },
 computed: {
   isForwardActionDisabled() {
+    return Object.keys(this.matchedParts).length !== this.PartsFromApi.partsOrQuestions.length;
+  },
+  matchedParts() {
     const matchedParts = [];
 
     // Match them to the parts from the API.
@@ -114,9 +117,9 @@ computed: {
 
       if (selectedPartData)
         matchedParts.push(selectedPartData);
-    })    
-
-    return Object.keys(matchedParts).length !== this.PartsFromApi.partsOrQuestions.length;
+    })  
+    
+    return matchedParts;
   },
   PartsOrQuestions() {
     const partsData = this.PartsFromApi;
@@ -177,7 +180,7 @@ methods: {
     }
 
     // Save parts to the store.
-    store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts);
+    store.commit(storeMutations.UPDATE_GLASS_PARTS, this.matchedParts);
 
     // Navigate to the next page.
     // this.$router.navigateAfterSave(

From fbab7daa0f4764cdfbbff2faf730a80c7bc5e42f Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 29 Jun 2022 09:30:15 -0400
Subject: [PATCH 13/21] CSR-343 Cleanup

---
 src/common-components/button-question/button-question.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 582b4a3f9..0cc7d5e03 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -178,7 +178,6 @@ export default {
         }
       }
 
-      this.$emit("change");
       this.$emit("isCheckedChanged", val);
     },
   },

From dc0335c38a2b2155c969aca8e494caf21700fe1e Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 29 Jun 2022 10:40:56 -0400
Subject: [PATCH 14/21] Touchups per direction from Mark

---
 src/layouts/vin-lookup/vin-lookup.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index b3ca243f0..214899d31 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -183,15 +183,10 @@ export default {
       previouslyEnteredCarId: '',
       invalidZip: '',
       vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
-      isInsuranceVerified: false,
     };
   },
   mounted() {
     this.attachCustomEvents();
-    if (this.vinPopulatedOnPageLoad) {
-      this.setupVinMask();
-      this.isInsuranceVerified = store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration;
-    }    
   },
   watch: {
     vin() {
@@ -239,12 +234,20 @@ export default {
       return this.getCmsContent("PerfectMatchInsuranceVerifiedAlert", "BodyText").replaceAll("{custom:damage}",
       getIsWindshieldOnly())
     },
+    isInsuranceVerified() {
+      return store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration;
+    },
+    vinMask() {
+      if (this.vinPopulatedOnPageLoad) {
+        const lastSixChars = this.vin.substring(11, this.vin.length);
+        return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
+      }
+      else {
+        return 'XXXXXXXXXXXXXXXXX';
+      }    
+    }, 
   },
   methods: {
-    setupVinMask() {
-      const lastSixChars = this.vin.substring(11, this.vin.length);
-      this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
-    },
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
     },

From ff51a04e30e6e489dd2af0a5532207c46e47088d Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 29 Jun 2022 13:18:17 -0400
Subject: [PATCH 15/21] CSR-343 Fix tests

---
 .../button-question/button-question.spec.js   | 34 +++++++------------
 .../glass-part-question.spec.js               | 29 +++++++++-------
 .../glass-part-question.vue                   |  6 ++--
 .../vehicle-parts/vehicle-parts.spec.js       | 24 ++++++++-----
 src/layouts/vehicle-parts/vehicle-parts.vue   |  9 +++--
 src/ux-components/list-card/list-card.spec.js |  2 +-
 src/ux-components/list-card/list-card.vue     |  7 +++-
 src/ux-components/radio/radio.spec.js         |  2 +-
 src/ux-components/radio/radio.vue             |  2 +-
 9 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index 9cf75368e..9cd9307db 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -10,6 +10,7 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, {
       propsData: {
         isOverflowScrollable: true,
+        groupName: "group-name"
       }
     });
 
@@ -25,6 +26,7 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, {
       propsData: {
         buttonType: "listCard",
+        groupName: "group-name"
       }
     });
     // Assert
@@ -39,6 +41,7 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, {
       propsData: {
         buttonType: "listButtonHorizontal",
+        groupName: "group-name"
       }
     });
     // Assert
@@ -53,6 +56,7 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, {
       propsData: {
         buttonType: "radio",
+        groupName: "group-name"
       }
     });
     // Assert
@@ -77,7 +81,8 @@ describe("buttonQuestion.vue", () => {
     // Act
     const localThis = {
       isWide: false,
-      answers: ['a', 'b']
+      answers: ['a', 'b'],
+      groupName: "group-name"
     }
 
     expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("");
@@ -109,7 +114,7 @@ describe("buttonQuestion.vue", () => {
 describe("buttonQuestion.vue", () => {
   it("Should trigger event modelValue change to new value on when radio button selected", async () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion, setupMocks({}));
+    const wrapper = shallowMount(buttonQuestion, setupMocks({propsData: {groupName: "group-name"}}));
     await wrapper.setProps({
       answers: ["2022", "2021", "2020"],
       isMultiSelect: false,
@@ -129,6 +134,7 @@ describe("buttonQuestion.vue", () => {
       propsData: {
         modelValue: ["2022", "2021", "2020"],
         isMultiSelect: true,
+        groupName: "group-name"
       }
     }));
     const val = { checkValue: true, value: "2019", }
@@ -144,7 +150,8 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
         isMultiSelect: true,
-        modelValue: ['a', 'b']
+        modelValue: ['a', 'b'],
+        groupName: "group-name"
       }
     }));
     const val = { checkValue: true, value: "2021", }
@@ -161,7 +168,8 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, setupMocks({
       propsData: {
         isMultiSelect: true,
-        modelValue: ['a', 'b']
+        modelValue: ['a', 'b'],
+        groupName: "group-name"
       }
     }));
 
@@ -173,24 +181,6 @@ describe("buttonQuestion.vue", () => {
   });
 });
 
-
-describe("buttonQuestion.vue", () => {
-  it("Should do nothing to this.selectedValues if this.selectedValues is not an array", () => {
-    // Act
-    const wrapper = shallowMount(buttonQuestion, setupMocks({
-      propsData: {
-        isMultiSelect: true,
-        modelValue: 'a',
-      }
-    }));
-    const val = { checkValue: true, value: "c", }
-    wrapper.vm.handleCheckedChanged(val);
-
-    // Assert
-    expect(wrapper.vm.selectedValues).toEqual("a");
-  });
-});
-
 function setupMocks(mountOptionsMockData = {}) {
   const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
   const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
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 a6ef4e586..26a16e78d 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
@@ -69,24 +69,25 @@ describe("glass-part-question.vue", () => {
     });
 
     test("Should emit updateModelValue, and have correct attributes", async () => {
-
         //Arrange
-
         const { wrapper } = setupMocks(featureListData);
+        store.getters.pageData.mockReset();
+        store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: [{ partNumber: "DB12209GTYN", color: "Green Tint"}]}] });
 
         //Act
         await wrapper.vm.$nextTick();
         const listCard = await wrapper.findComponent({
-            name: "listCard",
+            name: "buttonQuestion",
         });
 
-        wrapper.setValue({ selectedTint: 'Green Tint' });
+        await wrapper.setData({ selectedTint: 'Green Tint' });
+        // to trigger the computed setter
+        wrapper.vm.selectedPartNumber = "DB12209GTYN";
 
         //Assert
-        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedTint: 'Green Tint' }]);
-        expect(listCard.attributes("buttonid")).toBe("Rear-Stationary-Green Tint");
+        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ partNumber: "DB12209GTYN", color: "Green Tint"}]);
         expect(listCard.attributes("groupname")).toBe("Rear-Stationary");
-        expect(listCard.attributes("isradio")).toBe("true");
+        expect(listCard.attributes("validationrules")).toBe("Rear-Stationary-tint-required");
     });
 
     test("ResetTintAndPartSelections, should reset data elements ", async () => {
@@ -96,21 +97,23 @@ describe("glass-part-question.vue", () => {
 
         //Act
         await wrapper.vm.$nextTick();
-        wrapper.setData({ selectedTint: { "Rear-Stationary": 'Green Tint' } });
-
-        expect(wrapper.vm.selectedTint).toStrictEqual({ "Rear-Stationary": 'Green Tint' });
+        await wrapper.setData({ selectedTint: 'Green Tint', selectedPartNumber: "test" });
+       
+        expect(wrapper.vm.selectedTint).toEqual('Green Tint');
+        expect(wrapper.vm.selectedPartNumber).toEqual('test');
 
         await wrapper.vm.ResetTintAndPartSelections();
-        expect(wrapper.vm.selectedTint).toStrictEqual({});
+        
+        expect(wrapper.vm.selectedTint).toEqual("Green Tint");
+        expect(wrapper.vm.selectedPartNumber).toEqual(null);
     });
 
 });
 
 
 function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
-
     //Mock store
-    store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: {}});
+    store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: []}] });
     store.getters.lineItems = { glassParts: {} }
 
     const mountOptions = getMountOptions({
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 3dad69450..1c5dd1ae7 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
@@ -64,7 +64,7 @@ export default {
         glassLocation: String,
         colorAnswers: Array,
         modelValue: Object,
-        alreadyPopulatedPartsData: Object
+        alreadyPopulatedPartsData: Array
     },
     mounted() {
         this.LoadPreselectedValues();
@@ -151,7 +151,7 @@ export default {
         },
 
         PartDataFromApi() {
-            return this.$store.getters.pageData(this.$route.query.fmgPage);
+            return this.$store.getters.pageData(this.$route.query.fmgPage) ?? {};
         },
     },
     methods: {
@@ -197,7 +197,7 @@ export default {
             this.$nextTick(() => {
                 if (this.modelValue !== undefined) {
                     // Populate button-question model-value if parts data already exists in VueX
-                    this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0].color;
+                    this.selectedTint = this.alreadyPopulatedPartsData?.filter(part => part.partNumber === this.selectedPartNumber)[0].color;
                 }
             });
         },
diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js
index a663c5396..c43136079 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.spec.js
+++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js
@@ -65,7 +65,7 @@ describe("vehicle-parts.vue", () => {
     test("Set cms content called on load", async (done) => {
         //Arrange
         store.getters.pageData.mockReturnValue(basePartResponse);
-        store.getters.lineItems = { glassParts: {} }
+        store.getters.lineItems = { glassParts: null }
 
         const { wrapper, apiPromise } = setupMocks(
             {
@@ -104,7 +104,7 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValue(basePartResponse);
-        store.getters.lineItems = { glassParts: {} }
+        store.getters.lineItems = { glassParts: null }
 
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
@@ -141,7 +141,7 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
-        store.getters.lineItems = { glassParts: { 0: { partNumber: 'DB12209YPYNOEM'} } }
+        store.getters.lineItems = { glassParts: [{ partNumber: 'DB12209YPYNOEM'} ] }
 
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
@@ -170,14 +170,21 @@ describe("vehicle-parts.vue", () => {
         await nextTick();
 
         //Assert
-        expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } });
+        expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": {
+            partNumber: "DB12209YPYNOEM",
+            description: "heated glass, solar, 1 hole",
+            color: "Gray Tint Privacy",
+            requiresRecalibration: false,
+            requiresCapabilityQuestions: false,
+            childParts: null
+        }});
     });
 
     test("BackButtonAction triggers a router.navigate change", async () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
-        store.getters.lineItems = { glassParts: {} }
+        store.getters.lineItems = { glassParts: null }
 
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
@@ -215,7 +222,7 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
-        store.getters.lineItems = { glassParts: {} }
+        store.getters.lineItems = { glassParts: null }
 
 
         store.commit = jest.fn();
@@ -238,7 +245,7 @@ describe("vehicle-parts.vue", () => {
             }
         });
 
-        wrapper.setData({ glassParts: { "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } } });
+        wrapper.setData({ glassParts: {"Rear-Stationary": { partNumber: 'DB12209GTYN'}}});
 
         //Act
         vehicleParts.beforeRouteEnter.call(
@@ -285,13 +292,14 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
     settleAllPromises.mockImplementation(() => apiPromise);
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
-    const mountOptions = getMountOptions(mountOptionsMockData,);
+    const mountOptions = getMountOptions(mountOptionsMockData);
     const wrapper = shallowMount(vehicleParts, mountOptions);
 
     const partQuestionRearWrapper = wrapper.findComponent({ name: "glassPartQuestion", });
     partQuestionRearWrapper.vm.initializeComponent = glassPartQuestion.methods.initializeComponent;
 
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
 
     return { wrapper, apiPromise };
 }
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index b30a8c292..e21df516b 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -183,10 +183,10 @@ methods: {
     store.commit(storeMutations.UPDATE_GLASS_PARTS, this.matchedParts);
 
     // Navigate to the next page.
-    // this.$router.navigateAfterSave(
-    //   this.navigationScenarios.SELECTED_PARTS,
-    //   this.$route
-    // );
+    this.$router.navigateAfterSave(
+      this.navigationScenarios.SELECTED_PARTS,
+      this.$route
+    );
   },
 
   resetDependentState() {
@@ -195,7 +195,6 @@ methods: {
 
   LoadInitialPartsData() {
     this.alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts ?? [];
-
     const savedPartNumbers = this.alreadyPopulatedPartsData.map(part => part.partNumber)
     this.PartsFromApi.partsOrQuestions.forEach(glass => {
       const savedPart = glass.parts.filter(part => savedPartNumbers.includes(part.partNumber))[0];
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 2fbdaade4..7db735ced 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -205,7 +205,7 @@ describe("list-card.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: [Boolean, String], buttonId: 'list-card-id'}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: "List Card Checkbox", buttonId: 'list-card-id'}]);
   });
 
   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 200b84d3f..84762fc91 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -95,7 +95,7 @@ export default {
   },
   data() {
     return {
-      checkValue: [Boolean, String],
+      checkValue: null,
     }
   },
   created() {
@@ -104,6 +104,11 @@ export default {
         ? this.selectedValues.includes(this.value)
         : this.selectedValues[0];
     }
+    else if (Array.isArray(this.modelValue)) {
+      this.checkValue = this.isMultiSelect
+        ? this.modelValue.includes(this.value)
+        : this.modelValue[0];
+    }
     else {
       this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
     }
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index c815b1ace..f97700b0e 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@@ -92,7 +92,7 @@ describe("radio.vue", () => {
         isRequired: true,
         modelValue: ["List Card Checkbox"],
         value: "Car-Front",
-        selectedValues: ["Car-Front"]
+        selectedValues: "Car-Front"
       },
     });
     // Assert
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 8af669ba3..8b90bd83d 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -38,7 +38,7 @@ export default {
       default: "",
     },
     screenReaderOnlyText: String,
-    selectedValues: [Array, String],
+    selectedValues: String,
     hasError: Boolean,
     validationRules: String
   },

From e8dad4f95416cc87e59f67208e90e6da0fa779bd Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 30 Jun 2022 08:39:11 -0400
Subject: [PATCH 16/21] Fixed bug where we were displaying 'Continue with ...'
 when the user had selected one of several of the same type of vehicle as the
 one entered on the YMM pages

---
 src/layouts/address-vehicles/address-vehicles.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 8a36bb51f..988e12e38 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -223,7 +223,11 @@ export default {
       handler() {
         // does this vehicle match the previously selected carId?
         this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
-        this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
+        if (this.isCarIdDifferent) {
+          this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
+        } else {
+          this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
+        }        
       },
       deep: true
     },

From 0e387da199721840c559306b7b8dcaeedbf17182 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 30 Jun 2022 08:40:09 -0400
Subject: [PATCH 17/21] CSR-343 Add tests

---
 .../glass-part-question.spec.js               | 82 +++++++++++++++++++
 .../glass-part-question.vue                   |  7 +-
 2 files changed, 86 insertions(+), 3 deletions(-)

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 26a16e78d..1fc27fb52 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
@@ -108,9 +108,90 @@ describe("glass-part-question.vue", () => {
         expect(wrapper.vm.selectedPartNumber).toEqual(null);
     });
 
+    test("default is selected if only one option", async () => {
+        // Arrange
+        store.getters.pageData.mockReset();
+        store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: [{ partNumber: "DB12209GTYN", color: "Green Tint"}]}] });
+        const { wrapper } = setupMocks(featureListData);
+
+        // Act
+        await wrapper.vm.$nextTick();
+        await wrapper.setData({ selectedTint: "Green Tint" });
+        // take emitted value, pass down as modelValue
+        // yes, yes, it's not ideal
+        await wrapper.setProps({ modelValue: wrapper.emitted()["update:modelValue"][0][0] })
+        await wrapper.vm.$nextTick();
+        
+        // Assert
+        expect(wrapper.vm.selectedPartNumber).toBe("DB12209GTYN");
+    });
+
+    test("default is not selected if more than one option", async () => {
+        // Arrange
+        store.getters.pageData.mockReset();
+        store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: [{ partNumber: "DB12209GTYN", color: "Green Tint"}, { partNumber: "DB12209GTYNXXX", color: "Green Tint"}]}] });
+        const { wrapper } = setupMocks(featureListData);
+
+        // Act
+        await wrapper.vm.$nextTick();
+        await wrapper.setData({ selectedTint: "Green Tint" });
+        await wrapper.vm.$nextTick();
+        
+        // Assert
+        expect(wrapper.emitted()["update:modelValue"]).toBeFalsy();
+        expect(wrapper.vm.selectedPartNumber).toBeFalsy();
+    })
+
+    const partsForSelectedTintTestCases = [
+        ["Rear", "Stationary", "Green Tint", [{ partNumber: "Glass1", color: "Green Tint"}, { partNumber: "Glass3", color: "Green Tint"}, { partNumber: "Glass4", color: "Green Tint"}, { partNumber: "Glass6", color: "Green Tint"} ]],
+        ["Rear", "Stationary", "Blue Tint", [{ partNumber: "Glass2", color: "Blue Tint"}, { partNumber: "Glass5", color: "Blue Tint"}]],
+        ["Rear", "Stationary", "Red Tint", [{ partNumber: "Glass7", color: "Red Tint"}]],
+        ["Windshield", "Single", "Green Tint", [{ partNumber: "Windshield1", color: "Green Tint"}, { partNumber: "Windshield2", color: "Green Tint"}]],
+        ["Windshield", "Single", "Blue Tint", []],
+        ["Driver", "Quarter", "Green Tint", []]
+    ];
+    test.each(partsForSelectedTintTestCases)("partsForSelectedTint returns correct parts", async (glassLocation, glassName, selectedTint, expectedResults) => {
+        // Arrange
+        store.getters.pageData.mockReset();
+        store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [
+            {
+                glassName: "Stationary", 
+                glassLocation: "Rear", 
+                parts: [
+                    { partNumber: "Glass1", color: "Green Tint"},
+                    { partNumber: "Glass2", color: "Blue Tint"},
+                    { partNumber: "Glass3", color: "Green Tint"},
+                    { partNumber: "Glass4", color: "Green Tint"},
+                    { partNumber: "Glass5", color: "Blue Tint"},
+                    { partNumber: "Glass6", color: "Green Tint"},
+                    { partNumber: "Glass7", color: "Red Tint"}
+                ] 
+            },
+            {
+                glassName: "Single", 
+                glassLocation: "Windshield", 
+                parts: [{ partNumber: "Windshield1", color: "Green Tint"}, { partNumber: "Windshield2", color: "Green Tint"}]
+            }
+        ]});
+        const { wrapper } = setupMocks({
+            glassLocationProp: glassLocation,
+            glassNameProp: glassName,
+            colorAnswersProp: [],
+        });
+
+        // Act
+        await wrapper.setData({ selectedTint: selectedTint });
+
+        console.log(expectedResults)
+        console.log(wrapper.vm.partsForSelectedTint)
+
+        // Assert
+        expect(expectedResults).toEqual(wrapper.vm.partsForSelectedTint);
+    });
 });
 
 
+
 function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
     //Mock store
     store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: []}] });
@@ -135,6 +216,7 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV
     };
 
     const wrapper = shallowMount(glassPartQuestion, mountOptions);
+    require = jest.fn();
 
     return { wrapper };
 }
\ No newline at end of file
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 1c5dd1ae7..608cf55cb 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
@@ -116,10 +116,11 @@ export default {
         },
 
         partsForSelectedTint() {
-            return this.PartDataFromApi.partsOrQuestions?.filter(dataForGlassLocationAndName => 
+            const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(dataForGlassLocationAndName => 
                 dataForGlassLocationAndName.glassName == this.glassName &&
-                dataForGlassLocationAndName.glassLocation == this.glassLocation)[0]
-                .parts?.filter(part => part.color == this.selectedTint) ?? [];
+                dataForGlassLocationAndName.glassLocation == this.glassLocation);
+            const matchingGlassParts = matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
+            return matchingGlassParts.filter(part => part.color == this.selectedTint) ?? [];
         },
 
         // Creates a map of the feature list data in the correct Name/Value

From 1f805627653429310c8b53d65fdf1813b161d863 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 30 Jun 2022 08:40:32 -0400
Subject: [PATCH 18/21] CSR-343 Cleanup

---
 .../glass-part-question/glass-part-question.spec.js            | 3 ---
 1 file changed, 3 deletions(-)

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 1fc27fb52..d46a5c995 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
@@ -182,9 +182,6 @@ describe("glass-part-question.vue", () => {
         // Act
         await wrapper.setData({ selectedTint: selectedTint });
 
-        console.log(expectedResults)
-        console.log(wrapper.vm.partsForSelectedTint)
-
         // Assert
         expect(expectedResults).toEqual(wrapper.vm.partsForSelectedTint);
     });

From 15edd47d9492c9a1b73d92da640c7abbdbf41d16 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 30 Jun 2022 08:41:51 -0400
Subject: [PATCH 19/21] CSR-343 Cleanup

---
 .../glass-part-question/glass-part-question.spec.js              | 1 -
 1 file changed, 1 deletion(-)

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 d46a5c995..52471bf34 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
@@ -213,7 +213,6 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV
     };
 
     const wrapper = shallowMount(glassPartQuestion, mountOptions);
-    require = jest.fn();
 
     return { wrapper };
 }
\ No newline at end of file

From e2af902f4001e90fb2097d9eb412fcd1350bd768 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 30 Jun 2022 08:58:21 -0400
Subject: [PATCH 20/21] CSR-343 Fix chip button CSS

---
 .../list-button-horizontal.vue                | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 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 dfd322cb3..e60d0d22c 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -223,18 +223,26 @@ export default {
     span {
       font-size: .875rem;
     }
-  }
+  }  
+}
+
+.col {
   &:first-of-type {
-    label {
-      border-bottom-left-radius: 0.5rem;
-      border-top-left-radius: 0.5rem;
-      z-index: 2;
+    .list-button-horizontal {
+      label {
+        border-bottom-left-radius: 0.5rem;
+        border-top-left-radius: 0.5rem;
+        z-index: 2;
+      }
     }
   }
+
   &:last-of-type {
-    label {
-      border-bottom-right-radius: 0.5rem;
-      border-top-right-radius: 0.5rem;
+    .list-button-horizontal {
+      label {
+        border-bottom-right-radius: 0.5rem;
+        border-top-right-radius: 0.5rem;
+      }
     }
   }
 }

From a112ef2754bc294f07ee08a4abdc86ed0170b8a6 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 30 Jun 2022 09:10:02 -0400
Subject: [PATCH 21/21] CSR-343 Add blank quote page

---
 src/layouts/quote/quote.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/layouts/quote/quote.vue

diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
new file mode 100644
index 000000000..158150baf
--- /dev/null
+++ b/src/layouts/quote/quote.vue
@@ -0,0 +1,10 @@
+<script>
+export default {
+    name: "quote",
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        }
+    }
+}
+</script>
\ No newline at end of file