From 215232663d75118da2db7afd957329f0d8cf6ee1 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 31 Jan 2022 16:26:36 -0500
Subject: [PATCH 01/31] CSR-254: set up damage-location-question

---
 .../button-question/button-question.vue       |  54 ++++++++-
 .../funnel-footer/funnel-footer.vue           |  22 ++++
 .../damage-location-question.vue              | 109 ++++++++++++++++++
 src/layouts/vehicle-damage/vehicle-damage.vue |  69 ++++++++++-
 src/ux-components/list-card/list-card.vue     |  57 ++++++++-
 5 files changed, 303 insertions(+), 8 deletions(-)
 create mode 100644 src/common-components/funnel-footer/funnel-footer.vue
 create mode 100644 src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 3c818eb8d..6ab38ec16 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,5 +1,6 @@
 <template>
   <div :class="isOverflowScrollable ? 'button_question' : ''">
+    I AM THE BUTTON QUESTION, groupName is: {{groupName}}
     <div v-if="questionText" class="mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100">{{
         questionText
@@ -28,11 +29,14 @@
               :buttonImageId="answer.ImageId"
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
-              :value="modelValue"
+              :value="answer.Name ? answer.Name : answer"
               data-test="button"
             />
           </div>
       </fieldset>
+      <div v-show="errorMessage" class="row px-3 form-test-error">
+        {{ errorMessage }}
+      </div>
     </div>
   </div>
 </template>
@@ -41,6 +45,7 @@
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
+import { useField } from 'vee-validate';
 
 export default {
   name: "buttonQuestion",
@@ -74,6 +79,9 @@ export default {
     isOverflowScrollable: Boolean,
     isWide: Boolean,
     modelValue: String,
+    validationRules: Array,
+    name: String,
+    value: String,
   },
   computed: {
     getFieldSetClasses(){
@@ -97,6 +105,7 @@ export default {
   },
   methods: {
     chooseAnswer(answer) {
+      console.log('method: chooseAnswer, answer: ', answer);
       this.$emit("update:modelValue", answer);
     },
   },
@@ -105,6 +114,49 @@ export default {
     listButtonHorizontal,
     listCard
   },
+  setup(props) {
+      console.log('button-question running setup');
+      const { 
+          value: inputValue,
+          errorMessage,
+          handleBlur,
+          handleChange,
+          meta,
+      } = useField(props.groupName, value => {
+        if (props.validationRules) {
+          // console.log('props.validationRules is: ', props.validationRules);
+
+          // console.log("value is: ", value)
+          // console.log("inputValue is: ", inputValue);
+
+          let validationResults = [];
+
+          props.validationRules.forEach((rule) => {
+              console.log("BQ 2value is: ", value)
+              // console.log("2inputValue is: ", inputValue);
+              if (!rule.test(value)) {
+              // console.log('uh oh, returning error!', rule.error)
+              validationResults.push(rule.error);
+              }
+          });
+
+          return (validationResults.length > 0) ? validationResults[0] : true;
+        } else {
+          return true;
+        }
+      }, {
+          type: 'checkbox',
+          checkedValue: props.value,
+      });
+  
+      return {
+        // handleChange,
+        // handleBlur,
+        errorMessage,
+        // inputValue,
+        meta,
+      };
+  },
 };
 </script>
 
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
new file mode 100644
index 000000000..552b31031
--- /dev/null
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -0,0 +1,22 @@
+<!-- Simple implementation of an input field -->
+<template>
+  <div class="d-block w-50 mb-2">
+    <h3>I AM FUNNEL FOOTER</h3>
+    <button
+        class="mb-6"
+        :class="isDisabled && 'form-test-invalid'"
+        :aria-disabled="isDisabled"
+    >
+        Get your estimate
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "funnelFooter",
+  props: {
+      isDisabled: Boolean,
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
new file mode 100644
index 000000000..34866e98c
--- /dev/null
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="damage-location-question">
+        I AM DAMAGE LOCATION QUESTION
+        groupName is: {{groupName}}
+        <buttonQuestion
+            v-if="isAvailable && answersToDisplayTemp.length > 1"
+            :questionText="questionText"
+            :isMultiSelect="isMultiSelect"
+            :answers="answersToDisplayTemp"
+            groupName="damageLocation"
+            buttonType="listCard"
+            :modelValue="modelValue"
+            :validationRules="setValidationRules()"
+        />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
+import { rules } from '@/helpers/validation-rules';
+
+export default ({
+    name: "damageLocationQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            answersToDisplay: Array,
+            answersToDisplayTemp: [
+                {
+                    Name: 'windshield-damage',
+                    Text: 'Windshield',
+                    AnswerImageUrl: 'windshield-damage.svg',
+                    ImageId: 'windshield-damage',
+                },
+                {
+                    Name: 'side-window-damage-left-all',
+                    Text: 'Side Door',
+                    AnswerImageUrl: 'side-window-damage-left-all.svg',
+                    ImageId: 'side-window-damage-left-all',
+                },
+                {
+                    Name: 'back-glass-damage',
+                    Text: 'Rear Window',
+                    AnswerImageUrl: 'back-glass-damage.svg',
+                    ImageId: 'back-glass-damage',
+                }
+            ],
+            damageOptions: Array,
+            groupName: String,
+        }
+    },
+    props: {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
+        isMultiSelect: Boolean,
+        isAvailable: Boolean,
+        filterByVehicleCategory: Boolean,
+        modelValue: String,
+        validationRules: Array,
+        name: String,
+    },
+    methods: {
+        initializeComponent(cmsContent, damageOptions){
+            console.log('cmsContent: ', cmsContent)
+            console.log('damageOptions: ', damageOptions)
+
+            this.groupName = cmsContent.Name;
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+            this.damageOptions = damageOptions;
+        },
+        setValidationRules() {
+            const rulesArray = [
+                {
+                    name: "required",
+                    test: (value) => {
+                        // console.log('required value is... ', value);
+                        if (!value || value.length < 1) {
+                            // console.log('return false')
+                            return false;
+                        }
+                        // console.log('no if, return true')
+                        return true;
+                    },
+                    error: 'Please select damage location'
+                }
+            ]
+
+            return rulesArray;
+        },
+    },
+    mounted(){
+        // console.log('this.answersFromCms: ', this.answersFromCms)
+        // this.answersToDisplay = this.answersFromCms.filter(ans => {
+        //     const name = ans.Name.split('-');
+        //     return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptions.includes(name[1]);
+        // });
+        // console.log('this.answersToDisplay: ', this.answersToDisplay)
+    },
+    watch: {
+        modelValue(val) {
+        this.$emit("update:modelValue", val);
+        }
+    },
+    components: {
+        buttonQuestion,
+    },
+})
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c00669245..ffeb5c3d7 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,10 +1,35 @@
 <template>
     <div class="container-fluid shadow rounded-3 p-0 position-relative">
+        I AM VEHICLE DAMAGE
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
             ref="funnelSubHeader"
         />
+        <Form
+          @submit="onSubmit"
+          @invalid-submit="onInvalidSubmit"
+          v-slot="{ values, meta }"
+        >
+          <damageLocationQuestion
+            ref="damageLocationQuestion"
+            name="test"
+            isAvailable
+            isMultiSelect
+          />
+          <replaceOptionsQuestion ref="replaceOptionsQuestion" isAvailable />
+          <funnel-footer
+            :isDisabled="!meta.valid"
+          />
+
+          <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
+            <p>Current Form Values:</p>
+            <pre>{{ values }}</pre>
+            <p>Is Form Valid? (Meta.valid):</p>
+            <pre>{{ meta.valid }}</pre>
+          </div>
+
+        </Form>
     </div>
 </template>
 
@@ -13,6 +38,15 @@
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import textInput from "@/common-components/text-input/text-input";
+
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+
+import { Form, ErrorMessage } from 'vee-validate';
+
+
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -37,7 +71,7 @@ export default ({
             resultKey: "damageOptions",
             promise: damageOptionsPromise
         },
-        ];
+      ];
 
     const resultMap = await settleAllPromises(promiseResultMap);
 
@@ -52,14 +86,45 @@ export default ({
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      // use resultMap.damageOptions for damage options
+      vm.$refs.damageLocationQuestion.initializeComponent(
+        resultMap.cmsContent.DamageLocationQuestion
+      );
+      // vm.$refs.replaceOptionsQuestion.initializeComponent(
+      //   resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+      // );
+      console.log(resultMap)
     });
     
   },
   components: {
+    Form,
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    damageLocationQuestion,
+    // replaceOptionsQuestion,
+    funnelFooter,
+    // textInput,
+  },
+  methods: {
+    onSubmit(values) {
+      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
+      console.log('submitted: ', JSON.stringify(values, null ,2));
+    },
+    onInvalidSubmit({ values, errors, results }) {
+      // identify the first error field and put focus on it
+      console.log("values: ", values);
+      console.log("errors: ", errors);
+      console.log("results: ", results);
+      // get errorEls and order by alpha
+      const errorEls = Object.keys(errors).sort();
+      const firstErrorEl = errorEls[0];
+      console.log('firstErrorEl: ', firstErrorEl);
+      if (firstErrorEl) {
+        const qsString = "[data-focus-target='" + firstErrorEl + "']";
+        document.querySelector(qsString).focus();
+      }
+    }
   },
 });
 </script>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 17c8193f0..2389d8ccc 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,8 +1,18 @@
 <template>
   <!-- Heavily documented below -->
   <div class="col">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
+    I AM LIST CARD, 
+        buttonID is: {{buttonID}}
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''">
+      <input
+        :type="isMultiSelect ? 'checkbox' : 'radio'"
+        :id="buttonID"
+        :name="groupName"
+        :value="buttonID"
+        :aria-required="isRequired"
+        :data-focus-target="groupName"
+        @click="handleChange(value)"
+      />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
         <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
         <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@@ -38,7 +48,8 @@ export default {
     value: { // Field initial value
       type: String,
       default: ""
-    }
+    },
+    validationRules: Array,
   },
   computed: {
     getLabelClasses(){
@@ -53,16 +64,52 @@ export default {
       }
     }
   },
+  // methods: {
+  //   handleClick(value) {
+  //     console.log('run handleChange, value is: ', value);
+  //     this.handleChange(value);
+  //   }
+  // },
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange } = useField(groupName, undefined, {
+
+    console.log('LC value.value is: ', value.value)
+
+    const { 
+        value: inputValue,
+        errorMessage,
+        handleBlur,
+        handleChange,
+        meta, 
+    } = useField(groupName, value => {
+        if (props.validationRules) {
+          let validationResults = [];
+
+          props.validationRules.forEach((rule) => {
+              console.log("LC 2value is: ", value)
+              // console.log("2inputValue is: ", inputValue);
+              if (!rule.test(value)) {
+              // console.log('uh oh, returning error!', rule.error)
+              validationResults.push(rule.error);
+              }
+          });
+
+          return (validationResults.length > 0) ? validationResults[0] : true;
+        } else {
+          return true;
+        }
+    }, 
+    {
       type: inputType,
       checkedValue: value,
     });
     return {
-      checked,
       handleChange,
+      // handleBlur,
+      // errorMessage,
+      // inputValue,
+      // meta,
     };
   },
 };

From 90d4b00c420e98e21022397c65b65f32e5a545a2 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 4 Feb 2022 15:45:15 -0500
Subject: [PATCH 02/31] CSR-254: updates for recent changes to buttons

---
 .../button-question/button-question.vue       | 75 +++++++------------
 .../damage-location-question.vue              |  7 +-
 .../replace-options-question.vue              | 24 +++++-
 src/layouts/vehicle-damage/vehicle-damage.vue |  9 ++-
 src/ux-components/button-main/button-main.vue | 12 ++-
 src/ux-components/list-card/list-card.vue     | 10 +--
 6 files changed, 77 insertions(+), 60 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index c865e75e3..49955db5f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -33,12 +33,13 @@
               :colLength="this.answers.length < 3 ? '' : '-4'"
               v-model="selectedValues"
               data-test="button"
+              :validationRules="validationRules"
             />
           </div>
       </fieldset>
-      <div v-show="errorMessage" class="row px-3 form-test-error">
-        {{ errorMessage }}
-      </div>
+    </div>
+    <div class="row px-3 my-6 form-test-error">
+        <error-message :name="groupName"></error-message>
     </div>
   </div>
 </template>
@@ -47,7 +48,7 @@
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
-import { useField } from 'vee-validate';
+import { useField, ErrorMessage } from 'vee-validate';
 
 export default {
   name: "buttonQuestion",
@@ -132,6 +133,9 @@ export default {
       this.$emit("update:modelValue", answer);
     },
     handleCheckedChanged(val) {
+
+      console.log('meta is now ', this.meta)
+
       // Add or remove item to array of data to emit
       val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1);
       const answersToEmit = this.modelValueAnswers.length ? this.modelValueAnswers : undefined;
@@ -142,50 +146,29 @@ export default {
     listButton,
     listButtonHorizontal,
     listCard,
+    ErrorMessage,
   },
-  setup(props) {
-      console.log('button-question running setup');
-      const { 
-          value: inputValue,
-          errorMessage,
-          handleBlur,
-          handleChange,
-          meta,
-      } = useField(props.groupName, value => {
-        if (props.validationRules) {
-          // console.log('props.validationRules is: ', props.validationRules);
-
-          // console.log("value is: ", value)
-          // console.log("inputValue is: ", inputValue);
-
-          let validationResults = [];
-
-          props.validationRules.forEach((rule) => {
-              console.log("BQ 2value is: ", value)
-              // console.log("2inputValue is: ", inputValue);
-              if (!rule.test(value)) {
-              // console.log('uh oh, returning error!', rule.error)
-              validationResults.push(rule.error);
-              }
-          });
-
-          return (validationResults.length > 0) ? validationResults[0] : true;
-        } else {
-          return true;
-        }
-      }, {
-          type: 'checkbox',
-          checkedValue: props.value,
-      });
+  // setup(props) {
+      // console.log('button-question running setup');
+      // const { 
+      //     value: inputValue,
+      //     errorMessage,
+      //     handleBlur,
+      //     handleChange,
+      //     meta,
+      // } = useField(props.groupName, undefined, {
+      //     type: 'checkbox',
+      //     checkedValue: props.value,
+      // });
   
-      return {
-        // handleChange,
-        // handleBlur,
-        errorMessage,
-        // inputValue,
-        meta,
-      };
-  },
+      // return {
+      //   // handleChange,
+      //   // handleBlur,
+      //   errorMessage,
+      //   // inputValue,
+      //   meta,
+      // };
+  // },
 };
 </script>
 
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index bd583a378..7196e8f43 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="replace-options-question">
+    <div class="damage-location-question">
         I AM DAMAGE LOCATION QUESTION
         groupName is: {{groupName}}
         <buttonQuestion
@@ -12,6 +12,7 @@
             v-model="selectedValues"
             :validationRules="setValidationRules()"
         />
+        
     </div>
 </template>
 
@@ -55,10 +56,10 @@ export default ({
                     test: (value) => {
                         // console.log('required value is... ', value);
                         if (!value || value.length < 1) {
-                            // console.log('return false')
+                            console.log('DLQ should return false')
                             return false;
                         }
-                        // console.log('no if, return true')
+                        console.log('DLQ should return true')
                         return true;
                     },
                     error: 'Please select damage location'
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 2c46d96fd..da96d2d08 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,6 +1,8 @@
 <template>
     <transition name="fade">
         <div class="replace-options-question">
+            I AM REPLACE OPTIONS QUESTION
+        groupName is: {{groupName}}
             <buttonQuestion
                 v-if="isAvailable && answersToDisplay.length > 1"
                 :questionText="questionText"
@@ -9,6 +11,7 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
+                :validationRules="setValidationRules()"
             />
         </div>
     </transition>
@@ -40,7 +43,26 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
-        }
+        },
+        setValidationRules() {
+            const rulesArray = [
+                {
+                    name: "required",
+                    test: (value) => {
+                        // console.log('ROQ required value is... ', value);
+                        if (!value || value.length < 1) {
+                            console.log('ROQ should return false')
+                            return false;
+                        }
+                        console.log('ROQ should return true')
+                        return true;
+                    },
+                    error: 'Please select damage location'
+                }
+            ]
+
+            return rulesArray;
+        },
     },
     computed: {
         selectedValues: {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 5afce1aec..634f06652 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -18,13 +18,18 @@
             isMultiSelect
             v-model="damageLocationQuestionData"
           />
-          <replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect v-model="driverSideOptionsData" />
+          <replaceOptionsQuestion
+            ref="driverSideOptions"
+            isAvailable
+            isMultiSelect
+            v-model="driverSideOptionsData"
+          />
           <funnel-footer
             :isDisabled="!meta.valid"
           />
 
           <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
-            <p>Current Form Values:</p>
+            <p>Current Form, values:</p>
             <pre>{{ values }}</pre>
             <p>Is Form Valid? (Meta.valid):</p>
             <pre>{{ meta.valid }}</pre>
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index c8888c310..9e6066385 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,5 +1,11 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
+  <button
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
+    class="btn d-flex align-items-center py-3 px-4"
+    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']"
+    @click="clicked()"
+  >
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"
@@ -30,8 +36,8 @@ export default {
   },
   methods: {
     clicked() {
-      this.isLoaderDisplayed = true;
-      this.$emit("click-event");
+      // this.isLoaderDisplayed = true;
+      // this.$emit("click-event");
     },
   },
   components: {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7acb544cb..2e7c7f445 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,11 +1,11 @@
 <template>
   <div :class="'col' + colLength">
     I AM LIST CARD, 
-        buttonID is: {{buttonID}}
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-    :class="isWide ? 'horizontal' : ''"
-    @mouseup="handleChange(value)"
-    @keyup.space="handleChange(value)">
+        isMultiSelect is: {{isMultiSelect}}
+    <div 
+      class="list-card w-100 rounded-3 d-flex align-items-center h-100"
+      :class="isWide ? 'horizontal' : ''"
+    >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
         :id="buttonID"

From ae56ff6d43d365d7a39094603271dbb339c87978 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 4 Feb 2022 17:14:04 -0500
Subject: [PATCH 03/31] CSR-254: add optional windshield-options and
 windshield-damage-type-q

---
 .../damage-location-question.vue              |  10 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |   7 +-
 .../windshield-chip-count-question.vue        |   0
 .../windshield-damage-type-question.vue       | 103 ++++++++++++++++++
 .../windshield-options/windshield-options.vue |  25 +++++
 5 files changed, 140 insertions(+), 5 deletions(-)
 create mode 100644 src/layouts/vehicle-damage/windshield-chip-count-question/windshield-chip-count-question.vue
 create mode 100644 src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-options.vue

diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 89c9927ab..769241f27 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -35,14 +35,14 @@ export default ({
         modelValue: Array,
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
-        validationRules: Array,
         name: String,
         groupName: String,
     },
     methods: {
         initializeComponent(cmsContent, damageOptions){
-            console.log('cmsContent: ', cmsContent)
-            console.log('damageOptions: ', damageOptions)
+            // console.log('cmsContent: ', cmsContent)
+            // console.log('damageOptions: ', damageOptions)
+
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.damageOptions = damageOptions;
@@ -84,13 +84,15 @@ export default ({
             }
         },
         answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+            const data = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
                         return name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptionsMap[name[1]];
                     }) 
                 : [];
+                console.log('data: ', data);
+                return data;
         },
     },
     components: {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9c55995b7..77e6d2833 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -14,10 +14,13 @@
         >
           <damageLocationQuestion
             ref="damageLocation"
-            name="test"
             v-model="selectedDamageLocations"
             groupName="DamageLocationQuestion"
           />
+          <windshieldOptions
+            ref="windshieldOptions"
+            :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
+          />
           <replaceOptionsQuestion
             ref="driverSideOptions"
             isAvailable
@@ -46,6 +49,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 import textInput from "@/common-components/text-input/text-input";
 
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
@@ -119,6 +123,7 @@ export default {
     damageLocationQuestion,
     replaceOptionsQuestion,
     funnelFooter,
+    windshieldOptions,
     // textInput,
   },
   methods: {
diff --git a/src/layouts/vehicle-damage/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-chip-count-question/windshield-chip-count-question.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
new file mode 100644
index 000000000..904ad3a45
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="windshield-damage-type-question">
+        I AM WINDSHIELD DAMAGE TYPE QUESTION
+        isAvailable is: {{isAvailable}}
+        <buttonQuestion
+            v-if="isAvailable && answersToDisplay.length > 1"
+            :questionText="questionText"
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedValues"
+            :validationRules="setValidationRules()"
+        />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
+
+export default ({
+    name: "windshieldDamageTypeQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            damageOptions: Object,
+        }
+    },
+    props: {
+        isMultiSelect: Boolean,
+        modelValue: Array,
+        isAvailable: Boolean,
+        name: String,
+        groupName: String,
+    },
+    methods: {
+        initializeComponent(cmsContent, damageOptions){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+            this.damageOptions = damageOptions;
+        },
+        setValidationRules() {
+            const rulesArray = [
+                {
+                    name: "required",
+                    test: (value) => {
+                        // console.log('required value is... ', value);
+                        if (!value || value.length < 1) {
+                            console.log('WDTQ should return false')
+                            return false;
+                        }
+                        console.log('WDTQ should return true')
+                        return true;
+                    },
+                    error: 'Please select windshield damage'
+                }
+            ]
+
+            return rulesArray;
+        },
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        damageOptionsMap(){
+            return {
+                Windshield: true,
+                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
+                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
+            }
+        },
+        answersToDisplay(){
+            // HARD CODED MOCK DATA FOR NOW
+            return [
+                {
+                    "Name": "Windshield-Crack",
+                    "Text": "Crack",
+                    "SubText": "My damage is larger than six inches.",
+                    "ImageId": "2cf13fbb-22d8-4b61-bd3d-3d413ea58c87",
+                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-replace-desktop-ds.png"
+                },
+                {
+                    "Name": "Windshield-Chip",
+                    "Text": "Chip(s)",
+                    "SubText": "I have three or fewer chips smaller than six inches.",
+                    "ImageId": "faaa14d9-3650-4949-a687-7665962337b8",
+                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-repair-desktop-ds.png"
+                }
+            ]
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+})
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
new file mode 100644
index 000000000..36fbc2963
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="windshield-options">
+        I AM WINDSHIELD OPTIONS
+        <windshieldDamageTypeQuestion
+            ref="windshieldDamageType"
+            v-model="selectedWindshieldDamageTypes"
+            groupName="windshieldDamageTypeQuestion"
+            :isAvailable="showWindshieldDamageTypeQuestion"
+        />
+    </div>
+</template>
+
+<script>
+import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question";
+
+export default ({
+    name: "windshieldOptions",
+    props: {
+        showWindshieldDamageTypeQuestion: Boolean,
+    },
+    components: {
+        windshieldDamageTypeQuestion,
+    },
+})
+</script>
\ No newline at end of file

From bb161ee97f6978123ccebeadb072a6517e0c7cfa Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 8 Feb 2022 17:44:42 -0500
Subject: [PATCH 04/31] CSR-257 WIP do not merge.

---
 .../funnel-footer/funnel-footer.vue           | 131 ++++++++++--------
 src/layouts/vehicle-damage/vehicle-damage.vue |   8 +-
 src/layouts/vehicle-make/vehicle-make.vue     |   4 +-
 src/layouts/vehicle-year/vehicle-year.vue     |   2 +-
 src/styles/common-styles.scss                 |   5 +
 src/ux-components/list-card/list-card.vue     |   1 +
 6 files changed, 91 insertions(+), 60 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 37879d2cf..b3f75d4c7 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -1,28 +1,30 @@
 <template>
-<div class="container-fluid g-2 footer">
-    <div class="row">
+  <div class="footer pt-4">
+    <div class="container-fluid g-2">
+      <div class="row">
         <div class="col-12 d-flex justify-content-center pb-2 fs-7">
-            &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
+          &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
         </div>
-    </div>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
+      </div>
+      <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
         <div class="col d-flex justify-content-center justify-content-around text-center">
-            <textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
-            <textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
-            <textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
+          <textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
+          <textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
+          <textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
         </div>
+      </div>
     </div>
-</div>
-<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
-    <div class="row d-flex flex-row-reverse align-items-center">
+    <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
+      <div class="row d-flex flex-row-reverse align-items-center">
         <div class="col d-flex justify-content-end" id="stacked">
-            <buttonMain isPrimary buttonText="Button test" loaderColor="white" sizeInRem="1" />
+          <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
         <div class="col">
-            <textLink linkType="navigation" text="back" />
+          <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -30,53 +32,70 @@ import textLink from "@/ux-components/text-link/text-link";
 import buttonMain from "@/ux-components/button-main/button-main";
 
 export default {
-    name: "funnelFooter",
-    components: {
-        textLink,
-        buttonMain
-    },
-    data() {
-        return {
-            paddingHeight: 0
-        }
-    },
-    mounted() {
-        this.paddingHeight = document.getElementById("infoBox").offsetHeight;
-        this.$nextTick(() => {
-            window.addEventListener('resize', this.onResize);
-        })
-        setTimeout(function () { // Give it a moment to set the date
-            document.getElementById('years').innerHTML += new Date().getFullYear();
-        }, 100);
-        this.checkHeight();
-    },
-    beforeUnmount() {
-        window.removeEventListener('resize', this.onResize);
-    },
-    methods: {
-        onResize() {
-            this.paddingHeight = document.getElementById("infoBox").offsetHeight;
-            this.checkHeight();
-        },
-        checkHeight() {
-            const parentHeight = document.getElementById('infoBox').clientHeight;
-            const wrapper2 = document.getElementById('stacked');
-
-            if (parentHeight > 80) {
-                wrapper2.classList.add("justify-content-start");
-                wrapper2.classList.remove("justify-content-end");
-            } else {
-                wrapper2.classList.add("justify-content-end");
-                wrapper2.classList.remove("justify-content-start");
-            }
-        }
+  name: "funnelFooter",
+  components: {
+    textLink,
+    buttonMain
+  },
+  data() {
+    return {
+      paddingHeight: 0,
+      backLink: "",
+      buttonText: "",
     }
+  },
+  mounted() {
+    this.paddingHeight = document.getElementById("infoBox").offsetHeight + 24;
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    })
+    this.$nextTick(function () { // Give it a moment to set the date
+      document.getElementById('years').innerHTML += new Date().getFullYear();
+      this.checkHeight();
+    })
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  },
+  methods: {
+    onResize() {
+      this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+      this.checkHeight();
+    },
+    checkHeight() {
+      const parentHeight = document.getElementById('infoBox').clientHeight;
+      const wrapper2 = document.getElementById('stacked');
+      console.log(parentHeight);
+
+      if (parentHeight > 80) {
+        wrapper2.classList.add("justify-content-start","w-100");
+        wrapper2.classList.remove("justify-content-end","w-auto");
+      } else {
+        wrapper2.classList.add("justify-content-end");
+        wrapper2.classList.remove("justify-content-start");
+      }
+    },
+    initializeComponent(cmsContent) {
+      this.buttonText = cmsContent.BackButtonText;
+      this.backLink = cmsContent.ForwardButtonText;
+    },
+    buttonClick() {
+      this.$emit("forwardClicked");
+    },
+    linkClick() {
+      this.$emit("backClicked");
+    },
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-button {
-    min-width: 200px;
+.footer {
+  display: flex;
+  margin-top: auto;
+  button {
+    min-width: 135px;
     width: 100%;
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c5b8df783..b59798e2e 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,16 +1,18 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-2 position-relative">
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <funnelFooter ref="funnelFooter" />
     </div>
 </template>
 
 <script>
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
@@ -65,6 +67,9 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
     });
   },
   data(){
@@ -84,6 +89,7 @@ export default {
   },
   components: {
     funnelHeader,
+    funnelFooter,
     vehicleBanner,
     funnelSubHeader,
     replaceOptionsQuestion,
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 023d24023..c91379318 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-0 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
-        <funnelSubHeader 
+        <funnelSubHeader
             ref="funnelSubHeader"
             :hasBackButton="true"
             backButtonAccessibleText="Change Vehicle Year"
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 1b10fba92..e8e69c29a 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -73,7 +73,7 @@ export default {
 
   watch: {
     selectedYear(year) {
-      
+
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
       this.$router.navigateAfterSave(
         this.navigationScenarios.SELECTED_YEAR,
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index a4915049b..ae409dd36 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -9,6 +9,11 @@ body {
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }
+    &.make-tall {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
   }
   .pointer {
     cursor: pointer;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index caba00d0a..c3f399404 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -131,6 +131,7 @@ export default {
     height: auto;
     width: 6.5rem;
     margin-bottom: 3rem;
+    max-width: 100%;
   }
   &:hover {
     box-shadow: 0px 0px 0px 6px $blue-100;

From 18ead1be275d61f6a635fcde3a5e85b07c767466 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 09:35:27 -0500
Subject: [PATCH 05/31] CSR-257 WIP

---
 .../funnel-footer/funnel-footer.vue                | 14 ++++++--------
 src/styles/common-styles.scss                      |  1 +
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index b3f75d4c7..56e483b6d 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -3,7 +3,7 @@
     <div class="container-fluid g-2">
       <div class="row">
         <div class="col-12 d-flex justify-content-center pb-2 fs-7">
-          &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
+          &copy;&nbsp;{{new Date().getFullYear()}}&nbsp;Safelite Group
         </div>
       </div>
       <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
@@ -16,10 +16,10 @@
     </div>
     <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
       <div class="row d-flex flex-row-reverse align-items-center">
-        <div class="col d-flex justify-content-end" id="stacked">
+        <div class="col-auto d-flex justify-content-end" id="stacked">
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
-        <div class="col">
+        <div class="col py-1">
           <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
       </div>
@@ -42,15 +42,13 @@ export default {
       paddingHeight: 0,
       backLink: "",
       buttonText: "",
+      currentYear: new Date().getFullYear(),
     }
   },
   mounted() {
     this.paddingHeight = document.getElementById("infoBox").offsetHeight + 24;
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize);
-    })
-    this.$nextTick(function () { // Give it a moment to set the date
-      document.getElementById('years').innerHTML += new Date().getFullYear();
       this.checkHeight();
     })
   },
@@ -76,8 +74,8 @@ export default {
       }
     },
     initializeComponent(cmsContent) {
-      this.buttonText = cmsContent.BackButtonText;
-      this.backLink = cmsContent.ForwardButtonText;
+      this.backLink = cmsContent.BackButtonText;
+      this.buttonText = cmsContent.ForwardButtonText;
     },
     buttonClick() {
       this.$emit("forwardClicked");
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index ae409dd36..8d7133884 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -6,6 +6,7 @@ body {
 
   .container-fluid {
     max-width: 576px; //Remove once desktop app is complete
+    // min-width: 360px;
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }

From 4b33452fe55c9bfbd1cce625e29563932b88ac3e Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 9 Feb 2022 11:19:50 -0500
Subject: [PATCH 06/31] Added autocomplete='off' to all fields

---
 src/layouts/address-poc/address-poc.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index fff528604..cc7950b9a 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@@ -12,7 +12,8 @@
             id="autocomplete"
             placeholder="Search" 
             class="form-control search-location"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div>
     <div v-show="showAddressFields" class="row my-4">
@@ -21,7 +22,8 @@
         <input ref="city" 
             id="city"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div> 
     <div v-show="showAddressFields" class="row my-4">
@@ -30,14 +32,16 @@
         <input ref="state" 
             id="state"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
       <div class="col-6">
         <label for="zip">Zip</label>
         <input ref="zip" 
             id="zip"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>      
     </div> 
 
@@ -57,7 +61,8 @@
         <input ref="firstName" 
             id="firstName"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div> 
     <div class="row my-4">
@@ -66,7 +71,8 @@
         <input ref="lastName" 
             id="lastName"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div>
     <div class="row my-4">
@@ -75,7 +81,8 @@
         <input ref="email" 
             id="email"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div>            
   </div>

From a3fd891d16867fe09c5b51c0eb633807686bcaa8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 12:50:45 -0500
Subject: [PATCH 07/31] Update unit test.

---
 .../funnel-footer/funnel-footer.spec.js       | 38 +------------------
 .../funnel-footer/funnel-footer.vue           | 27 ++++++-------
 .../vehicle-damage/vehicle-damage.spec.js     | 13 ++++++-
 src/styles/common-styles.scss                 |  1 -
 src/ux-components/button-main/button-main.vue |  2 +-
 5 files changed, 29 insertions(+), 52 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index a4c127a3e..b6833ef7e 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -9,10 +9,7 @@ describe("funnel-footer.vue", () => {
       const r = {
         test:"testing",
         clientHeight: 10,
-        classList: {
-          add: jest.fn(() => ''),
-          remove: jest.fn()
-        },
+        offsetHeight: 24,
       };
 
       global.document.getElementById = jest.fn().mockImplementation(()=> {
@@ -27,10 +24,7 @@ describe("funnel-footer.vue", () => {
       console.log(wrapper.html());
 
       // Expect
-      expect(link.attributes('class')).toContain("footer-link");
-      expect(global.document.getElementById).toBeCalled();
-      expect(r.classList.add).toBeCalledWith("justify-content-end");
-      expect(r.classList.remove).toBeCalledWith("justify-content-start");
+      expect(link.attributes('class')).toContain("footer");
 
   });
 
@@ -63,32 +57,4 @@ describe("funnel-footer.vue", () => {
     expect(input.attributes("class")).toContain("btn-primary");
   });
 
-  it("Should return class justify-content-end if paddingHeight < 80px", async () => {
-
-    global.document.getElementById = jest.fn().mockImplementation(()=> {
-      return {
-        test:"testing",
-        clientHeight: 10,
-        classList: {
-          add: jest.fn(),
-          remove: jest.fn()
-        }
-      }
-    });
-
-    // Act
-      const wrapper = mount(funnelFooter, {
-        propsData: {
-          footer: true
-        },
-      });
-      const infoBox = document.getElementById('infoBox');
-      // Assert
-      const stacked = wrapper.find("#stacked");
-      wrapper.vm.paddingHeight = 100;
-
-      // Expect
-      expect(stacked.attributes('class')).toContain("justify-content-end");
-  });
-
 });
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 56e483b6d..424e524fc 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -16,10 +16,10 @@
     </div>
     <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
       <div class="row d-flex flex-row-reverse align-items-center">
-        <div class="col-auto d-flex justify-content-end" id="stacked">
+        <div class="col-12 button-col d-flex justify-content-end" id="stacked">
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
-        <div class="col py-1">
+        <div class="col-12 link-col py-1">
           <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
       </div>
@@ -63,15 +63,6 @@ export default {
     checkHeight() {
       const parentHeight = document.getElementById('infoBox').clientHeight;
       const wrapper2 = document.getElementById('stacked');
-      console.log(parentHeight);
-
-      if (parentHeight > 80) {
-        wrapper2.classList.add("justify-content-start","w-100");
-        wrapper2.classList.remove("justify-content-end","w-auto");
-      } else {
-        wrapper2.classList.add("justify-content-end");
-        wrapper2.classList.remove("justify-content-start");
-      }
     },
     initializeComponent(cmsContent) {
       this.backLink = cmsContent.BackButtonText;
@@ -91,9 +82,19 @@ export default {
 .footer {
   display: flex;
   margin-top: auto;
-  button {
-    min-width: 135px;
+  .button-col,
+  .link-col,
+  .btn-primary {
     width: 100%;
   }
+  @media only screen and (min-width: 340px) {
+    .button-col,
+    .link-col {
+      width: 50% !important;
+    }
+    .btn-primary {
+      width: auto;
+    }
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 49df756c2..949f4811b 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -1,6 +1,7 @@
 // Components
 import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
@@ -144,7 +145,7 @@ describe("vehicle-damage.vue", () => {
 
 describe("vehicle-damage.vue", () => {
   test("Call invalidation, ResetPartsAndDeps should be called", async () => {
-    
+
     //Arrange
     const { wrapper } = setupMocks({});
 
@@ -221,6 +222,10 @@ function setupMocks({
 
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
+  };
+
+  funnelFooter.methods = {
+    initializeComponent: jest.fn(),
   }
 
   const mountOptions = getMountOptions(mountOptionsMockData);
@@ -252,5 +257,11 @@ function setupMocks({
   damageLocationQuestionWrapper.vm.initializeComponent =
   damageLocationQuestion.methods.initializeComponent;
 
+  const funnelFooterWrapper = wrapper.findComponent({
+    name: "funnelFooter",
+  });
+
+  funnelFooterWrapper.vm.initializeComponent = funnelFooter.methods.initializeComponent;
+
   return { wrapper, apiPromise };
 }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 8d7133884..ae409dd36 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -6,7 +6,6 @@ body {
 
   .container-fluid {
     max-width: 576px; //Remove once desktop app is complete
-    // min-width: 360px;
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index e44550c30..2a4a68366 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
+  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-2" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"

From 4abd97ece16e6164526619dd12403d30951563b9 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 9 Feb 2022 14:36:14 -0500
Subject: [PATCH 08/31] WIP suppress Chrome Autocomplete

---
 src/layouts/address-poc/address-poc.vue | 85 +++++++++++++------------
 1 file changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index cc7950b9a..5f092d043 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@@ -5,46 +5,51 @@
         <vehicleBanner ref="vehicleBanner"  :displayGenericVehicleImage=true />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <label for="autocomplete">Street address</label>
-        <input ref="autocomplete" 
-            id="autocomplete"
-            placeholder="Search" 
-            class="form-control search-location"
-            type="text" 
-            autocomplete="off" />
+    <form>
+      <div class="row my-4">
+        <div class="col">
+          <label for="autocomplete">Street address</label>
+          <input ref="autocomplete" 
+              id="autocomplete"
+              placeholder="Search" 
+              class="form-control search-location"
+              type="text" 
+              autocomplete="off" />
+        </div>
       </div>
-    </div>
-    <div v-show="showAddressFields" class="row my-4">
-      <div class="col">
-        <label for="city">City</label>
-        <input ref="city" 
-            id="city"
-            class="form-control"
-            type="text" 
-            autocomplete="off" />
+    </form>
+    <form>
+      <div v-show="showAddressFields" class="row my-4">
+        <div class="col">
+          <label for="city">City</label>
+          <input ref="city" 
+              id="city"
+              class="form-control"
+              type="text" 
+              autocomplete="off" />
+        </div>
       </div>
-    </div> 
-    <div v-show="showAddressFields" class="row my-4">
-      <div class="col-6">
-        <label for="state">State</label>
-        <input ref="state" 
-            id="state"
-            class="form-control"
-            type="text" 
-            autocomplete="off" />
-      </div>
-      <div class="col-6">
-        <label for="zip">Zip</label>
-        <input ref="zip" 
-            id="zip"
-            class="form-control"
-            type="text" 
-            autocomplete="off" />
-      </div>      
-    </div> 
-
+    </form> 
+    <form>
+      <div v-show="showAddressFields" class="row my-4">
+        <div class="col-6">
+          <label for="state">State</label>
+          <input ref="state" 
+              id="state"
+              class="form-control"
+              type="text" 
+              autocomplete="off" />
+        </div>
+        <div class="col-6">
+          <label for="zip">Zip</label>
+          <input ref="zip" 
+              id="zip"
+              class="form-control"
+              type="text" 
+              autocomplete="off" />
+        </div>      
+      </div> 
+    </form>
     <div v-show="displayVerificationWarning" class="row my-4">
       <div class="col">
         <span style="color: red;">An accurate match may not have have been located. Please verify your address before continuing</span>
@@ -112,8 +117,8 @@ export default {
     let addressField1 = document.getElementById("autocomplete");
     let self = this;
 
-    //let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
-    let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
+    let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
+    //let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
 
     this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
       .then(() => {

From 1eff8b58a9648be269b6c5c88861bcc7cc50d381 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 14:55:13 -0500
Subject: [PATCH 09/31] CSR-241 QA color updates.

---
 src/layouts/component-test/component-test.vue | 27 +------------------
 .../list-button-horizontal.vue                |  2 +-
 src/ux-components/list-button/list-button.vue |  4 +--
 src/ux-components/list-card/list-card.vue     | 12 ++++++---
 4 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index fdb92ab23..e20892105 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -674,19 +674,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3">
-        <textLink navigation="true" text="Navigation Link" /><br /><br />
-        <textLink text="Default Link" /><br /><br />
-        <textLink textSmall="true" text="Small Link" /><br /><br />
-        <textLink footer="true" text="Footer Link" href="https://google.com" />
-      </div>
-    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@@ -926,16 +913,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Funnel Footer</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <funnelFooter/>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -950,7 +927,6 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import checkbox from "@/ux-components/checkbox/checkbox";
 import textLink from "@/ux-components/text-link/text-link";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
   name: "App",
   components: {
@@ -963,8 +939,7 @@ export default {
     listButtonHorizontal,
     checkbox,
     funnelHeader,
-    textLink,
-    funnelFooter
+    textLink
   },
   data() {
     return {
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 0751e3bca..034f97c07 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -153,7 +153,7 @@ export default {
     width: 100%;
     color: $gray-600;
     &:hover {
-      box-shadow: 0 0 0 4px $blue-100;
+      box-shadow: 0 0 0 4px $blue-300;
       cursor: pointer;
       z-index: 2;
     }
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 3256906e3..fcf4ae799 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -133,7 +133,7 @@ export default {
       position: static; //override bootstrap
       height: 0;
       opacity: 0;
-    
+
       &:focus-visible + label {
         box-shadow: 0 0 0 2.5px $blue inset;
       }
@@ -162,7 +162,7 @@ export default {
 
     &:hover {
       @include media-breakpoint-up(sm) {
-        box-shadow: 0 0 0 4px $blue-100;
+        box-shadow: 0 0 0 4px $blue-300;
       }
       cursor: pointer;
     }
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index c3f399404..95f886d5a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -32,12 +32,12 @@
         >
           {{buttonLabel}}
         </p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
           {{buttonLabelSubCopy}}
         </p>
         <div v-if="isWide" class="order-2">
           <p class="m-0 small">{{ buttonLabel }}</p>
-          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">
+          <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
             {{ buttonLabelSubCopy }}
           </p>
         </div>
@@ -134,7 +134,7 @@ export default {
     max-width: 100%;
   }
   &:hover {
-    box-shadow: 0px 0px 0px 6px $blue-100;
+    box-shadow: 0px 0px 0px 4px $blue-300;
     border: 1px solid transparent;
   }
   input[type="checkbox"],
@@ -150,6 +150,9 @@ export default {
       }
       p {
         text-align: center;
+        &.sub-copy {
+          color: $gray-550;
+        }
       }
     }
     &:focus + label {
@@ -237,6 +240,9 @@ export default {
         }
         p {
           text-align: left;
+          &.sub-copy {
+            color: $gray-550;
+          }
         }
       }
     }

From ce6d1008d2e0e001cb66595d176efe6c8444ed68 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 9 Feb 2022 14:57:00 -0500
Subject: [PATCH 10/31] Set to APIKEY for dev

---
 src/layouts/address-poc/address-poc.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index 5f092d043..8bb42a659 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@@ -117,8 +117,8 @@ export default {
     let addressField1 = document.getElementById("autocomplete");
     let self = this;
 
-    let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
-    //let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
+    //let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
+    let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
 
     this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
       .then(() => {

From 827c5e6d5861e1712f37fe6f2431bdaec8777731 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 15:59:57 -0500
Subject: [PATCH 11/31] CSR-257 code updates.

---
 src/common-components/funnel-footer/funnel-footer.vue | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 424e524fc..47dff7b5a 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -42,14 +42,12 @@ export default {
       paddingHeight: 0,
       backLink: "",
       buttonText: "",
-      currentYear: new Date().getFullYear(),
     }
   },
   mounted() {
-    this.paddingHeight = document.getElementById("infoBox").offsetHeight + 24;
+    this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize);
-      this.checkHeight();
     })
   },
   beforeUnmount() {
@@ -57,12 +55,7 @@ export default {
   },
   methods: {
     onResize() {
-      this.paddingHeight = document.getElementById("infoBox").offsetHeight;
-      this.checkHeight();
-    },
-    checkHeight() {
-      const parentHeight = document.getElementById('infoBox').clientHeight;
-      const wrapper2 = document.getElementById('stacked');
+      this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight;
     },
     initializeComponent(cmsContent) {
       this.backLink = cmsContent.BackButtonText;

From 66503b78500577c941ade34afc0713685e92978b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 16:07:17 -0500
Subject: [PATCH 12/31] Update unit test.

---
 src/common-components/funnel-footer/funnel-footer.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index b6833ef7e..1c173b6be 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -12,7 +12,7 @@ describe("funnel-footer.vue", () => {
         offsetHeight: 24,
       };
 
-      global.document.getElementById = jest.fn().mockImplementation(()=> {
+      global.document.querySelector = jest.fn().mockImplementation(()=> {
         return r;
       });
 

From 8ddf244a5eb0c64a568990afb7b1b4b9545076f9 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 9 Feb 2022 17:23:06 -0500
Subject: [PATCH 13/31] CSR-254: move validation into child elements

---
 .../button-question/button-question.vue       |  30 +----
 .../damage-location-question.vue              |  36 ++----
 .../replace-options-question.vue              |  32 ++---
 src/layouts/vehicle-damage/vehicle-damage.vue |  77 ++++++------
 .../windshield-damage-type-question.vue       |  40 +++----
 .../windshield-options/windshield-options.vue |   3 +-
 src/ux-components/list-card/list-card.vue     | 112 ++++++------------
 7 files changed, 127 insertions(+), 203 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index bc707ebac..630b2dd3d 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,6 +1,5 @@
 <template>
   <div :class="isOverflowScrollable ? 'button_question' : ''">
-    I AM THE BUTTON QUESTION, groupName is: {{groupName}}
     <div v-if="questionText" class="mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
     </div>
@@ -38,7 +37,7 @@
           </div>
       </fieldset>
     </div>
-    <div class="row px-3 my-6 form-test-error">
+    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
         <error-message :name="groupName"></error-message>
     </div>
   </div>
@@ -48,7 +47,7 @@
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
-import { useField, ErrorMessage } from 'vee-validate';
+import { ErrorMessage } from 'vee-validate';
 
 export default {
   name: "buttonQuestion",
@@ -82,9 +81,10 @@ export default {
     isOverflowScrollable: Boolean,
     isWide: Boolean,
     modelValue: Array,
-    validationRules: Array,
+    validationRules: String,
     name: String,
     value: String,
+    suppressError: Boolean,
   },
   computed: {
     getFieldSetClasses() {
@@ -125,7 +125,6 @@ export default {
   },
   methods: {
     chooseAnswer(answer) {
-      console.log('method: chooseAnswer, answer: ', answer);
       this.$emit("update:modelValue", answer);
     },
     handleCheckedChanged(val) {
@@ -145,27 +144,6 @@ export default {
     listCard,
     ErrorMessage,
   },
-  // setup(props) {
-      // console.log('button-question running setup');
-      // const { 
-      //     value: inputValue,
-      //     errorMessage,
-      //     handleBlur,
-      //     handleChange,
-      //     meta,
-      // } = useField(props.groupName, undefined, {
-      //     type: 'checkbox',
-      //     checkedValue: props.value,
-      // });
-  
-      // return {
-      //   // handleChange,
-      //   // handleBlur,
-      //   errorMessage,
-      //   // inputValue,
-      //   meta,
-      // };
-  // },
 };
 </script>
 
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 769241f27..345a16d1e 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -1,7 +1,5 @@
 <template>
     <div class="damage-location-question">
-        I AM DAMAGE LOCATION QUESTION
-        groupName is: {{groupName}}
         <buttonQuestion
             v-if="answersToDisplay.length > 1"
             :questionText="questionText"
@@ -10,7 +8,7 @@
             :groupName="groupName"
             buttonType="listCard"
             v-model="selectedValues"
-            :validationRules="setValidationRules()"
+            validationRules="damage-location-required"
         />
         
     </div>
@@ -19,7 +17,15 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
-import { rules } from '@/helpers/validation-rules';
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("damage-location-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select damage location";
+    }
+    return true;
+});
 
 export default ({
     name: "damageLocationQuestion",
@@ -40,32 +46,10 @@ export default ({
     },
     methods: {
         initializeComponent(cmsContent, damageOptions){
-            // console.log('cmsContent: ', cmsContent)
-            // console.log('damageOptions: ', damageOptions)
-
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.damageOptions = damageOptions;
         },
-        setValidationRules() {
-            const rulesArray = [
-                {
-                    name: "required",
-                    test: (value) => {
-                        // console.log('required value is... ', value);
-                        if (!value || value.length < 1) {
-                            console.log('DLQ should return false')
-                            return false;
-                        }
-                        console.log('DLQ should return true')
-                        return true;
-                    },
-                    error: 'Please select damage location'
-                }
-            ]
-
-            return rulesArray;
-        },
     },
     computed: {
         selectedValues: {
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 3be2fc5e9..31c739b49 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,8 +1,6 @@
 <template>
     <transition name="fade">
         <div class="replace-options-question">
-            I AM REPLACE OPTIONS QUESTION
-        groupName is: {{groupName}}
             <buttonQuestion
                 v-if="isAvailable && answersToDisplay.length > 1"
                 :questionText="questionText"
@@ -11,7 +9,7 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
-                :validationRules="setValidationRules()"
+                validationRules="replace-options-required"
             />
         </div>
     </transition>
@@ -20,6 +18,15 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
 
 export default ({
     name: "replaceOptionsQuestion",
@@ -42,25 +49,6 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
-        setValidationRules() {
-            const rulesArray = [
-                {
-                    name: "required",
-                    test: (value) => {
-                        // console.log('ROQ required value is... ', value);
-                        if (!value || value.length < 1) {
-                            console.log('ROQ should return false')
-                            return false;
-                        }
-                        console.log('ROQ should return true')
-                        return true;
-                    },
-                    error: 'Please select damage location'
-                }
-            ]
-
-            return rulesArray;
-        },
     },
     computed: {
         selectedValues: {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 77e6d2833..1261c1f26 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="container-fluid shadow rounded-3 p-2 position-relative">
-        I AM VEHICLE DAMAGE
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader 
@@ -10,33 +9,45 @@
         <Form
           @submit="onSubmit"
           @invalid-submit="onInvalidSubmit"
-          v-slot="{ values, meta }"
-        >
-          <damageLocationQuestion
-            ref="damageLocation"
-            v-model="selectedDamageLocations"
-            groupName="DamageLocationQuestion"
-          />
-          <windshieldOptions
-            ref="windshieldOptions"
-            :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
-          />
-          <replaceOptionsQuestion
-            ref="driverSideOptions"
-            isAvailable
-            v-model="driverSideOptionsData"
-            groupName="DriverSideReplaceOptionsQuestion"
-          />
-          <funnel-footer
-            :isDisabled="!meta.valid"
-          />
+          ref="theForm"
+          v-slot="{ values, meta, errors }"
+        >        
+            <damageLocationQuestion
+              ref="damageLocation"
+              v-model="selectedDamageLocations"
+              groupName="DamageLocationQuestion"
+            />
+            <windshieldOptions
+              ref="windshieldOptions"
+              :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
+              :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            />
+            <alert
+              v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              alertClass="alert-danger"
+              alertHeadline="You'll need to schedule separate appointments"
+              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians."
+              :isDismissible="false"
+            />
+            <replaceOptionsQuestion
+              ref="driverSideOptions"
+              isAvailable
+              v-model="driverSideOptionsData"
+              groupName="DriverSideReplaceOptionsQuestion"
+            />
+            <funnel-footer
+              :isDisabled="!meta.valid"
+            />
 
-          <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
-            <p>Current Form, values:</p>
-            <pre>{{ values }}</pre>
-            <p>Is Form Valid? (Meta.valid):</p>
-            <pre>{{ meta.valid }}</pre>
-          </div>
+            <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION 
+              <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
+              <p>Current Form, values:</p>
+              <pre>{{ values }}</pre>
+              <p>Errors:</p>
+              <pre>{{ errors }}</pre>
+              <p>Is Form Valid? (Meta.valid):</p>
+              <pre>{{ meta.valid }}</pre>
+            </div> -->
 
         </Form>
     </div>
@@ -50,11 +61,11 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
-import textInput from "@/common-components/text-input/text-input";
+import alert from "@/ux-components/alert/alert";
 
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 
-import { Form, ErrorMessage } from 'vee-validate';
+import { Form } from 'vee-validate';
 
 
 // Supporting files
@@ -124,7 +135,7 @@ export default {
     replaceOptionsQuestion,
     funnelFooter,
     windshieldOptions,
-    // textInput,
+    alert,
   },
   methods: {
     arePagePrerequisitesValid() {
@@ -144,14 +155,14 @@ export default {
       console.log("errors: ", errors);
       console.log("results: ", results);
       // get errorEls and order by alpha
-      const errorEls = Object.keys(errors).sort();
+      const errorEls = errors ? Object.keys(errors) : [];
       const firstErrorEl = errorEls[0];
-      console.log('firstErrorEl: ', firstErrorEl);
       if (firstErrorEl) {
+        console.log('firstErrorEl: ', firstErrorEl);
         const qsString = "[data-focus-target='" + firstErrorEl + "']";
         document.querySelector(qsString).focus();
       }
-    }
+    },
   },
 };
 </script>
diff --git a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
index 904ad3a45..686f10de9 100644
--- a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -1,7 +1,5 @@
 <template>
     <div class="windshield-damage-type-question">
-        I AM WINDSHIELD DAMAGE TYPE QUESTION
-        isAvailable is: {{isAvailable}}
         <buttonQuestion
             v-if="isAvailable && answersToDisplay.length > 1"
             :questionText="questionText"
@@ -9,7 +7,8 @@
             :groupName="groupName"
             buttonType="listCard"
             v-model="selectedValues"
-            :validationRules="setValidationRules()"
+            validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+            :suppressError="suppressError"
         />
     </div>
 </template>
@@ -17,6 +16,21 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("windshield-damage-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select windshield damage";
+    }
+    return true;
+});
+defineRule("checkForRepairAndReplace", (value, [other]) => {
+    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+        return "checkForRepairAndReplace error"
+    }
+    return true;
+});
 
 export default ({
     name: "windshieldDamageTypeQuestion",
@@ -33,6 +47,7 @@ export default ({
         isAvailable: Boolean,
         name: String,
         groupName: String,
+        suppressError: Boolean,
     },
     methods: {
         initializeComponent(cmsContent, damageOptions){
@@ -40,25 +55,6 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.damageOptions = damageOptions;
         },
-        setValidationRules() {
-            const rulesArray = [
-                {
-                    name: "required",
-                    test: (value) => {
-                        // console.log('required value is... ', value);
-                        if (!value || value.length < 1) {
-                            console.log('WDTQ should return false')
-                            return false;
-                        }
-                        console.log('WDTQ should return true')
-                        return true;
-                    },
-                    error: 'Please select windshield damage'
-                }
-            ]
-
-            return rulesArray;
-        },
     },
     computed: {
         selectedValues: {
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 36fbc2963..68cce08eb 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="windshield-options">
-        I AM WINDSHIELD OPTIONS
         <windshieldDamageTypeQuestion
             ref="windshieldDamageType"
             v-model="selectedWindshieldDamageTypes"
             groupName="windshieldDamageTypeQuestion"
             :isAvailable="showWindshieldDamageTypeQuestion"
+            :suppressError="suppressError"
         />
     </div>
 </template>
@@ -17,6 +17,7 @@ export default ({
     name: "windshieldOptions",
     props: {
         showWindshieldDamageTypeQuestion: Boolean,
+        suppressError: Boolean,
     },
     components: {
         windshieldDamageTypeQuestion,
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 73d841f1e..bbb058f92 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,50 +1,48 @@
 <template>
   <div :class="'col' + colLength">
-    I AM LIST CARD, 
-        isMultiSelect is: {{isMultiSelect}}
     <div 
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
       :class="isWide ? 'horizontal' : ''"
     >
-      <input
-        :type="isMultiSelect ? 'checkbox' : 'radio'"
-        :id="buttonID"
-        :name="groupName"
-        :value="buttonID"
-        :aria-required="isRequired"
-        :data-focus-target="groupName"
-        @click="handleChange(value)"
-        v-model="checkValue"
-        @change="handleCheckChange"
-       />
-      <label
-        :for="buttonID"
-        class="d-flex w-100 align-items-center px-2 h-100"
-        :class="getLabelClasses" tabindex="-1"
-      >
-        <img
-          :id="buttonImageId"
-          :class="!isWide ? 'order-1' : 'ms-auto order-3'"
-          :src="buttonImage"
-          :alt="altText"
-         />
-        <p
-          v-if="!isWide"
-          class="small order-3"
-          :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
+        <input
+          :type="isMultiSelect ? 'checkbox' : 'radio'"
+          :id="buttonID"
+          :name="groupName"
+          :value="buttonID"
+          :aria-required="isRequired"
+          :data-focus-target="groupName"
+          @click="handleChange(value)"
+          v-model="checkValue"
+          @change="handleCheckChange"
+        />
+        <label
+          :for="buttonID"
+          class="d-flex w-100 align-items-center px-2 h-100"
+          :class="getLabelClasses" tabindex="-1"
         >
-          {{buttonLabel}}
-        </p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
-          {{buttonLabelSubCopy}}
-        </p>
-        <div v-if="isWide" class="order-2">
-          <p class="m-0 small">{{ buttonLabel }}</p>
-          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">
-            {{ buttonLabelSubCopy }}
+          <img
+            :id="buttonImageId"
+            :class="!isWide ? 'order-1' : 'ms-auto order-3'"
+            :src="buttonImage"
+            :alt="altText"
+          />
+          <p
+            v-if="!isWide"
+            class="small order-3"
+            :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
+          >
+            {{buttonLabel}}
           </p>
-        </div>
-      </label>
+          <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+            {{buttonLabelSubCopy}}
+          </p>
+          <div v-if="isWide" class="order-2">
+            <p class="m-0 small">{{ buttonLabel }}</p>
+            <p v-if="buttonLabelSubCopy" class="m-0 fs-7">
+              {{ buttonLabelSubCopy }}
+            </p>
+          </div>
+        </label>
     </div>
   </div>
 </template>
@@ -74,7 +72,7 @@ export default {
       default: "",
     },
     colLength: String,
-    validationRules: Array,
+    validationRules: String,
     selectedButtonIDs: [Array, String],
   },
   data(){
@@ -108,52 +106,20 @@ export default {
       }
     }
   },
-  // methods: {
-  //   handleClick(value) {
-  //     console.log('run handleChange, value is: ', value);
-  //     this.handleChange(value);
-  //   }
-  // },
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    console.log('LC value.value is: ', value.value)
-
     const { 
         value: inputValue,
-        errorMessage,
-        handleBlur,
         handleChange,
-        meta, 
-    } = useField(groupName, value => {
-        if (props.validationRules) {
-          let validationResults = [];
-
-          props.validationRules.forEach((rule) => {
-              console.log("LC 2value is: ", value)
-              // console.log("2inputValue is: ", inputValue);
-              if (!rule.test(value)) {
-              // console.log('uh oh, returning error!', rule.error)
-              validationResults.push(rule.error);
-              }
-          });
-
-          return (validationResults.length > 0) ? validationResults[0] : true;
-        } else {
-          return true;
-        }
-    }, 
+    } = useField(groupName, props.validationRules, 
     {
       type: inputType,
       checkedValue: value,
     });
     return {
       handleChange,
-      // handleBlur,
-      // errorMessage,
-      // inputValue,
-      // meta,
     };
   },
 };

From a99d43d964f84fb1b1b9b33cc02a00f7e1437dc1 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 10 Feb 2022 09:23:10 -0500
Subject: [PATCH 14/31] CSR-254: remove unused file

---
 src/helpers/validation-rules.js | 38 ---------------------------------
 1 file changed, 38 deletions(-)
 delete mode 100644 src/helpers/validation-rules.js

diff --git a/src/helpers/validation-rules.js b/src/helpers/validation-rules.js
deleted file mode 100644
index 97c5f54e5..000000000
--- a/src/helpers/validation-rules.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const rules = {
-    // required: (value) => {
-    //     console.log('value is... ', value);
-    //     if (!value) {
-    //         return 'PASSWORD IS REQUIRED';
-    //     }
-    // },
-    // lengthOf3: (value) => {
-    //     console.log('value is... ', value);
-    //     if (value.length < 3) {
-    //         return 'PASSWORD MUST BE AT LEAST 3 CHARS LONG';
-    //     }
-    // }
-    required: {
-        test: (value) => {
-            // console.log('required value is... ', value);
-            if (!value || value.length < 1) {
-                // console.log('return false')
-                return false;
-            }
-            // console.log('no if, return true')
-            return true;
-        },
-        error: 'ssdfgPASSWORD IS REQUIRED'
-    },
-    lengthOf3: {
-        test: (value) => {
-            console.log('lengthof3 value is... ', value);
-            if (value.length < 3) {
-                return false;
-            }
-            return true;
-        },
-        error: 'sfdgfPASSWORD MUST BE AT LEAST 3 CHARS LONG'
-    }
-  };
-  
-  export { rules };
\ No newline at end of file

From bb2088c8ff906e81ccd03316d7eed3e626b930f0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Feb 2022 13:45:38 -0500
Subject: [PATCH 15/31] CSR-341 WIP commit to fix back button on vehicle damage
 page.

---
 .../funnel-footer/funnel-footer.vue           | 12 ++-
 src/layouts/component-test/component-test.vue | 28 +++++-
 src/layouts/vehicle-damage/vehicle-damage.vue | 10 +-
 src/router/router-constants/routing-table.js  |  9 ++
 src/ux-components/checkbox/checkbox.vue       |  5 +-
 src/ux-components/radio/radio.spec.js         |  1 +
 src/ux-components/radio/radio.vue             | 94 +++++++++++++++++++
 src/ux-components/text-link/text-link.vue     | 14 +--
 8 files changed, 161 insertions(+), 12 deletions(-)
 create mode 100644 src/ux-components/radio/radio.spec.js
 create mode 100644 src/ux-components/radio/radio.vue

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 47dff7b5a..e61943761 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -20,7 +20,12 @@
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
         <div class="col-12 link-col py-1">
-          <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
+          <textLink
+          linkType="navigation"
+          :text="backLink"
+          @click-event="linkClick"
+          href="javascript:void(0)"
+          />
         </div>
       </div>
     </div>
@@ -62,10 +67,11 @@ export default {
       this.buttonText = cmsContent.ForwardButtonText;
     },
     buttonClick() {
-      this.$emit("forwardClicked");
+      this.$emit("ForwardClicked");
     },
     linkClick() {
-      this.$emit("backClicked");
+      console.log("ff linkClicked");
+      this.$emit("BackClicked");
     },
   }
 };
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index e20892105..c4c7e4415 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -2,7 +2,7 @@
   <div class="container-fluid container-shadow p-2 rounded-3">
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Inputs</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
       </div>
     </div>
     <div class="row">
@@ -15,6 +15,30 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
+        <p>Sample radio button group</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <radio
+          checkboxName="demo radio"
+          buttonID="radio-1"
+          tabIndex="1"
+          checkboxLabel="I'm a radio button"
+        />
+      </div>
+      <div class="col">
+        <radio
+          checkboxName="demo radio"
+          buttonID="radio-2"
+          tabIndex="1"
+          checkboxLabel="I'm a radio button"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -926,6 +950,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import checkbox from "@/ux-components/checkbox/checkbox";
+import radio from "@/ux-components/radio/radio";
 import textLink from "@/ux-components/text-link/text-link";
 export default {
   name: "App",
@@ -938,6 +963,7 @@ export default {
     vehicleBanner,
     listButtonHorizontal,
     checkbox,
+    radio,
     funnelHeader,
     textLink
   },
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index b59798e2e..c37924a2c 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,7 +5,7 @@
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
-        <funnelFooter ref="funnelFooter" />
+        <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
 
@@ -86,6 +86,14 @@ export default {
       // Invokes
       store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
     },
+    backButtonAction() {
+      console.log("vd linkClicked");
+      // route to move backwards
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
+    },
   },
   components: {
     funnelHeader,
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 17f05b304..88c47563c 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -50,6 +50,15 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+    ],
+  },
 ];
 
 export { routingTable };
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index dca64e689..5338085a0 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -44,6 +44,9 @@ export default {
     + label {
       display: block;
       position: relative;
+      &:hover {
+        cursor: pointer;
+      }
     }
     + label::before {
       content: "";
@@ -71,7 +74,7 @@ export default {
       transform: rotate(-45deg);
     }
     &:hover + label::before {
-      box-shadow: 0 0 0 4px $blue-100;
+      box-shadow: 0 0 0 4px $blue-300;
     }
     &:focus + label::before {
       box-shadow: 0 0 0 2px $blue;
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/ux-components/radio/radio.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
new file mode 100644
index 000000000..e2cd08669
--- /dev/null
+++ b/src/ux-components/radio/radio.vue
@@ -0,0 +1,94 @@
+<template>
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
+  <div class="ui-radio d-flex">
+    <input
+      type="radio"
+      aria-checked="false"
+      :name="checkboxName"
+      :id="buttonID"
+      :tabindex="tabIndex"
+      :aria-required="isRequired"
+    />
+    <label class="d-flex align-items-center" :for="buttonID">
+      <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{
+        screenReaderOnlyText
+      }}</span>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "radio",
+  props: {
+    checkboxName: String,
+    buttonID: String,
+    tabIndex: Number,
+    checkboxLabel: String,
+    screenReaderOnlyText: String,
+    isRequired: Boolean,
+  },
+};
+</script>
+
+<style lang="scss">
+.ui-radio {
+  position: relative;
+  input[type="radio"] {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    + label {
+      display: block;
+      position: relative;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    + label::before {
+      content: "";
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 16px;
+      height: 16px;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 50%;
+    }
+    &:checked + label::before {
+      background: $white;
+      border: 1px solid $blue;
+    }
+    &:checked + label::after {
+      content: "";
+      position: absolute;
+      top: 8px;
+      left: 3px;
+      height: 6px;
+      width: 6px;
+      transform: rotate(-45deg);
+      border: 5px solid $blue;
+      border-radius: 50%;
+    }
+    &:hover + label::before {
+      box-shadow: 0 0 0 4px $blue-300;
+    }
+    &:focus + label::before {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:focus:checked + label::before {
+      box-shadow: 0 0 0 2px transparent;
+    }
+    &:disabled + label {
+      color: $gray-200;
+    }
+    &:disabled + label::before {
+      background: $gray-200;
+    }
+  }
+}
+</style>
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 2297b9c71..7a67ccbfb 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -1,8 +1,8 @@
 <template>
-  <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
-  <a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
-  <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
-  <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
+  <a v-if="href && linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
+  <a v-else-if="href && linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
+  <a v-else-if="href && linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
+  <a v-else-if="href && linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
 </template>
 
 <script>
@@ -13,11 +13,13 @@ export default {
     text: String,
     href: {
       type: String,
-      default: `javascript:void(0)`, //Prevents page jump when value is empty or #
     },
   },
   methods: {
-    handleClick() {
+    handleClick(event) {
+      if(this.href === "#" || this.href.length < 1) {
+        event.preventDefault();
+      }
       this.$emit("click-event");
     },
   },

From 1930bef12c2cbfbf5744236a66baa854af9f7aa6 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Feb 2022 13:56:31 -0500
Subject: [PATCH 16/31] Update unit test.

---
 src/ux-components/text-link/text-link.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 7a67ccbfb..a03fc52a6 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -1,8 +1,8 @@
 <template>
-  <a v-if="href && linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
-  <a v-else-if="href && linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
-  <a v-else-if="href && linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
-  <a v-else-if="href && linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
+  <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
+  <a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
+  <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
+  <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
 </template>
 
 <script>
@@ -17,9 +17,6 @@ export default {
   },
   methods: {
     handleClick(event) {
-      if(this.href === "#" || this.href.length < 1) {
-        event.preventDefault();
-      }
       this.$emit("click-event");
     },
   },

From d47cd77c5e3c2aa3b4b26999c729116dc9c4d3b2 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 10 Feb 2022 15:30:45 -0500
Subject: [PATCH 17/31] CSR-254: fix error styling

---
 src/layouts/vehicle-damage/vehicle-damage.vue |  6 +++---
 src/styles/common-error-styles.scss           |  6 +++---
 src/ux-components/list-card/list-card.vue     | 11 +++++++++--
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 71b14ace9..dd0cebdc7 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -154,9 +154,9 @@ export default {
       console.log("values: ", values);
       console.log("errors: ", errors);
       console.log("results: ", results);
-      // get errorEls and order by alpha
-      const errorEls = errors ? Object.keys(errors) : [];
-      const firstErrorEl = errorEls[0];
+      // get error names array
+      const errorNames = errors ? Object.keys(errors) : [];
+      const firstErrorEl = errorNames[0];
       if (firstErrorEl) {
         console.log('firstErrorEl: ', firstErrorEl);
         const qsString = "[data-focus-target='" + firstErrorEl + "']";
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index c2c6c3fea..f75e9fd56 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,7 +1,7 @@
 .has-error {
-  .list-button,
-  .list-card,
-  .list-button-horizontal {
+  &.list-button,
+  &.list-card,
+  &.list-button-horizontal {
     color: $red;
     label {
       border: 1px solid $red;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 0d440010e..bd1fb6a70 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -2,7 +2,7 @@
   <div :class="'col' + colLength">
     <div 
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-      :class="isWide ? 'horizontal' : ''"
+      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -31,7 +31,7 @@
           class="small order-3"
           :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
         >
-          {{buttonLabel}}
+          {{buttonLabel}} - {{errors.length}}
         </p>
         <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
           {{buttonLabelSubCopy}}
@@ -113,6 +113,7 @@ export default {
     const { 
         value: inputValue,
         handleChange,
+        errors,
     } = useField(groupName, props.validationRules, 
     {
       type: inputType,
@@ -120,8 +121,14 @@ export default {
     });
     return {
       handleChange,
+      errors,
     };
   },
+  watch: {
+    errors() {
+      console.log('HEADS UP; ERRORS CHANGED, errors.length: ', this.errors.length)
+    },
+  },
 };
 </script>
 

From 08f0f905762cbb2fc26d16b41b683f93b309c79d Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 10 Feb 2022 15:58:21 -0500
Subject: [PATCH 18/31] CSR-341 WIP

---
 .../button-question/button-question.vue       | 11 +++++---
 src/layouts/component-test/component-test.vue | 27 ++++++++++++-------
 src/ux-components/radio/radio.vue             | 17 ++++++------
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 7fff5c238..0799446d5 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -7,9 +7,9 @@
       <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
           <div :class="getComponentWrapperClasses">
-            <component 
-              :is="buttonType" 
-              v-for="answer in answers" 
+            <component
+              :is="buttonType"
+              v-for="answer in answers"
               :key="answer.Name ? answer.Name : answer"
               @isCheckedChanged="handleCheckedChanged"
               :buttonID="answer.Name ? answer.Name : answer"
@@ -43,6 +43,7 @@
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
+import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "buttonQuestion",
@@ -95,6 +96,9 @@ export default {
         case 'listCard':
           classes = 'row justify-content-center g-2'
           break;
+        case 'radio':
+          classes = 'ui-radio d-flex'
+          break;
       }
       return classes;
     },
@@ -130,6 +134,7 @@ export default {
     listButton,
     listButtonHorizontal,
     listCard,
+    radio,
   },
 };
 </script>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index c4c7e4415..3f1ae5ad9 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -18,24 +18,30 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
-        <p>Sample radio button group</p>
+        <p class="m-0">Sample radio button group</p>
       </div>
     </div>
     <div class="row">
       <div class="col">
         <radio
-          checkboxName="demo radio"
-          buttonID="radio-1"
-          tabIndex="1"
-          checkboxLabel="I'm a radio button"
+          groupName="radio-demo-2"
+          buttonLabel="I'm a radio button!"
+          buttonID="radio-button-a"
+          isRequired
+          value="I'm a radio button!"
+          modelValue="Model Value 1"
+          screenReaderOnlyText="Model Value 1"
         />
       </div>
       <div class="col">
         <radio
-          checkboxName="demo radio"
-          buttonID="radio-2"
-          tabIndex="1"
-          checkboxLabel="I'm a radio button"
+          groupName="radio-demo-2"
+          buttonLabel="I'm also a radio button!"
+          buttonID="radio-button-b"
+          isRequired
+          value="I'm also a radio button!"
+          modelValue="Model Value 2"
+          screenReaderOnlyText="Model Value 2"
         />
       </div>
     </div>
@@ -74,14 +80,17 @@
         <textLink
         linkType=navigation
         text="Navigation Link"
+        href="#!"
         /><br><br>
         <textLink
         linkType="text"
         text="Default Link"
+        href="#!"
         /><br><br>
         <textLink
         linkType=textSmall
         text="Small Link"
+        href="#!"
         /><br><br>
         <textLink
         linkType=footer
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index e2cd08669..0c06cd5db 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,16 +1,16 @@
 <template>
-  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
   <div class="ui-radio d-flex">
     <input
       type="radio"
       aria-checked="false"
-      :name="checkboxName"
+      :name="groupName"
       :id="buttonID"
-      :tabindex="tabIndex"
       :aria-required="isRequired"
+      :value="value"
     />
     <label class="d-flex align-items-center" :for="buttonID">
-      <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+      <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
       }}</span>
@@ -22,12 +22,13 @@
 export default {
   name: "radio",
   props: {
-    checkboxName: String,
+    groupName: String,
+    buttonLabel: String,
     buttonID: String,
-    tabIndex: Number,
-    checkboxLabel: String,
-    screenReaderOnlyText: String,
     isRequired: Boolean,
+    value: String,
+    modelValue: String,
+    screenReaderOnlyText: String,
   },
 };
 </script>

From a5d53b8000a4528127b13759912ffa7de24704e9 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 11 Feb 2022 09:09:04 -0500
Subject: [PATCH 19/31] CSR-341-radio finish radio button component and unit
 test.

---
 src/ux-components/radio/radio.spec.js | 64 ++++++++++++++++++++++++++-
 src/ux-components/radio/radio.vue     | 58 +++++++++++++++++++++---
 2 files changed, 114 insertions(+), 8 deletions(-)

diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index 3d0843e10..a7c3318ed 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@@ -1 +1,63 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import radio from "./radio";
+import { nextTick } from "vue";
+
+describe("radio.vue", () => {
+  it("Should return group name", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        groupName: "radio-button-test",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().name).toEqual("radio-button-test");
+  });
+
+  it("Should return checkbox id", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonID: "Radio ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("Radio ID");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "label text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p");
+
+    expect(paragraph.text()).toEqual("label text");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        screenReaderOnlyText: "screenreader text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("span");
+
+    expect(paragraph.text()).toEqual("screenreader text");
+  });
+});
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 0c06cd5db..335ec5529 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -2,12 +2,14 @@
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
   <div class="ui-radio d-flex">
     <input
-      type="radio"
-      aria-checked="false"
-      :name="groupName"
-      :id="buttonID"
-      :aria-required="isRequired"
-      :value="value"
+    type="radio"
+    aria-checked="false"
+    :name="groupName"
+    :id="buttonID"
+    :aria-required="isRequired"
+    :value="value"
+    :v-model="checkValue"
+    @change="handleCheckChanged"
     />
     <label class="d-flex align-items-center" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -19,6 +21,8 @@
 </template>
 
 <script>
+import { toRefs } from "vue";
+import { useField } from "vee-validate";
 export default {
   name: "radio",
   props: {
@@ -26,10 +30,50 @@ export default {
     buttonLabel: String,
     buttonID: String,
     isRequired: Boolean,
-    value: String,
+    value: {
+      type: [String, Number],
+      default: "",
+    },
     modelValue: String,
     screenReaderOnlyText: String,
   },
+  data() {
+    return {
+      checkValue: Boolean,
+    };
+  },
+  created(){
+    if(this.selectedButtonIDs){
+      this.checkValue = this.selectedButtonIDs[0];
+    }
+  },
+  methods: {
+    handleClick(value) {
+      this.handleChange(value);
+    },
+    handleCheckChange(newValue, oldValue){
+      const isInitialization = typeof(oldValue) === 'function';
+      if (!isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+      }
+    }
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const { checked, handleChange, errorMessage } = useField(
+      groupName,
+      undefined,
+      {
+        type: "radio",
+        checkedValue: value,
+      }
+    );
+    return {
+      checked,
+      handleChange,
+      errorMessage,
+    };
+  },
 };
 </script>
 

From 178e053d63dc2a9fbbbdb600b015caa7ac328825 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 11 Feb 2022 10:35:55 -0500
Subject: [PATCH 20/31] CSR-254: move vehicle-damage test into form-test page

---
 src/layouts/form-test/form-test.vue | 487 ++++++++--------------------
 1 file changed, 137 insertions(+), 350 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index d56b764b3..1e6d0d7b2 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -1,367 +1,164 @@
 <template>
-  <Form
-    :validation-schema="schema"
-    @submit="onSubmit"
-    @invalid-submit="onInvalidSubmit"
-    v-slot="{ values, meta }"
-    class="w-50"
-  >
-    <div class="row g-2 mt-6 mx-4">
-      <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
-      <p class="mx-2">
-        NOTE: This page is testing functionality only; styling will not match
-        Figma mocks.
-      </p>
-    </div>
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+        <funnelHeader ref="funnelHeader" />
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+        <funnelSubHeader ref="funnelSubHeader" />
+        <Form
+          @submit="onSubmit"
+          @invalid-submit="onInvalidSubmit"
+          ref="theForm"
+          v-slot="{ values, meta, errors }"
+        >        
+            <damageLocationQuestion
+              ref="damageLocation"
+              v-model="selectedDamageLocations"
+              groupName="DamageLocationQuestion"
+            />
+            <windshieldOptions
+              ref="windshieldOptions"
+              :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
+              :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            />
+            <alert
+              v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              alertClass="alert-danger"
+              alertHeadline="You'll need to schedule separate appointments"
+              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians."
+              :isDismissible="false"
+            />
+            <replaceOptionsQuestion
+              ref="driverSideOptions"
+              isAvailable
+              v-model="driverSideOptionsData"
+              groupName="DriverSideReplaceOptionsQuestion"
+            />
+            <funnel-footer
+              ref="funnelFooter"
+              :isDisabled="!meta.valid"
+            />
 
-    <div class="row g-2 mt-6 mx-4">
-      <h4 class="mx-2 mt-4 mb-0">
-        How many chips are we repairing? (Required)
-      </h4>
-      <fieldset>
-        <div
-          role="radiogroup"
-          aria-labelledby="demo-group"
-          class="d-flex flex-row p-0"
-        >
-          <h4 class="sr-only" id="demo-group">
-            How many chips are we repairing?
-          </h4>
-          <listButtonHorizontal
-            groupName="demo"
-            aria-required="true"
-            buttonID="1"
-            buttonLabel="1"
-            value="1"
-            buttonLabelSubCopy=""
-            textPosition="text-center"
-            sizeInRem="1"
-            :totalInGroup="3"
-            :positionInGroup="1"
-            screenReaderOnlyText=" opens new window"
-          />
-          <listButtonHorizontal
-            groupName="demo"
-            aria-required="true"
-            buttonID="2"
-            buttonLabel="2"
-            value="2"
-            buttonLabelSubCopy=""
-            textPosition="text-center"
-            sizeInRem="1"
-            :totalInGroup="3"
-            :positionInGroup="2"
-            screenReaderOnlyText=" opens new window"
-          />
-          <listButtonHorizontal
-            groupName="demo"
-            aria-required="true"
-            buttonID="3"
-            buttonLabel="3"
-            value="3"
-            buttonLabelSubCopy=""
-            textPosition="text-center"
-            sizeInRem="1"
-            :totalInGroup="3"
-            :positionInGroup="3"
-            screenReaderOnlyText=" opens new window"
-          />
-        </div>
-      </fieldset>
-      <div class="row px-3 form-test-error">
-        <error-message name="demo"></error-message>
-      </div>
-    </div>
+            <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION  -->
+              <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
+              <p>Current Form, values:</p>
+              <pre>{{ values }}</pre>
+              <p>Errors:</p>
+              <pre>{{ errors }}</pre>
+              <p>Is Form Valid? (Meta.valid):</p>
+              <pre>{{ meta.valid }}</pre>
+            </div>
 
-    <div class="row g-2 mt-6 mx-4">
-      <div class="col">
-        <h4 class="mx-2 mt-4 mb-0">
-          Which windshield part needs fixed? (Required)
-        </h4>
-        <fieldset>
-          <legend class="sr-only">Which windshield part needs fixed?</legend>
-          <listButton
-            isMultiSelect
-            buttonID="Single Windshield"
-            buttonLabel="Single Windshield"
-            value="Single Windshield"
-            groupName="demo2"
-          />
-          <listButton
-            isMultiSelect
-            buttonID="Driver Side"
-            buttonLabel="Driver Side"
-            value="Driver Side"
-            groupName="demo2"
-          />
-          <listButton
-            isMultiSelect
-            buttonID="Passenger Side"
-            buttonLabel="Passenger Side"
-            value="Passenger Side"
-            groupName="demo2"
-          />
-        </fieldset>
-      </div>
-      <div class="row px-3 form-test-error">
-        <error-message name="demo2"></error-message>
-      </div>
+        </Form>
     </div>
-
-    <div class="row g-2 mt-6 mx-4">
-      <div class="col">
-        <h4 class="mx-2 mt-4 mb-0">demo3: Enter your VIN (Required)</h4>
-        <textInput
-          name="demo3"
-          type="text"
-          label="VIN (Required)"
-          :isRequired="true"
-        />
-      </div>
-    </div>
-
-    <!-- <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4>
-      <textInput
-        name="demo4"
-        type="text"
-        label="Numbers Only"
-        :isRequired="true"
-      />
-    </div>
-  </div> -->
-
-    <div class="row g-2 mt-6 mx-4">
-      <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
-      <div aria-labelledby="demo5-group" class="d-flex flex-row p-0">
-        <h4 class="sr-only" id="demo5-group">Where's your damage?</h4>
-        <listCard
-          isMultiSelect
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          value="Windshield"
-          altText=""
-          buttonID="List Card Checkbox a"
-          groupName="demo5"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="side-window-damage-left-all.svg"
-          buttonLabel="Side Door"
-          value="Side Door"
-          altText=""
-          buttonID="List Card Checkbox b"
-          groupName="demo5"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="back-glass-damage.svg"
-          buttonLabel="Rear Window"
-          value="Rear Window"
-          altText=""
-          buttonID="List Card Checkbox c"
-          groupName="demo5"
-        />
-      </div>
-    </div>
-
-    <div class="row px-3 form-test-error">
-      <error-message name="demo5"></error-message>
-    </div>
-
-    <div class="row g-2 mt-6 mx-4">
-      <h4 class="mx-2 mt-4 mb-0">
-        demo6: What's your windshield damage? (Required if demo5 "Windshield" is
-        selected)
-      </h4>
-      <div
-        role="radiogroup"
-        aria-labelledby="demo6-group"
-        class="d-flex flex-row p-0"
-      >
-        <h4 class="sr-only" id="demo6-group">What's your windshield damage?</h4>
-        <listCard
-          isRadio
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Crack"
-          value="Crack"
-          buttonLabelSubCopy="My damage is larger than six inches."
-          altText=""
-          buttonID="Crack Checkbox a"
-          groupName="demo6"
-        />
-        <listCard
-          isRadio
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Chip(s)"
-          value="Chip"
-          buttonLabelSubCopy="I have three or fewer chips smaller than six inches."
-          altText=""
-          buttonID="Chip Checkbox b"
-          groupName="demo6"
-        />
-      </div>
-    </div>
-
-    <div class="row px-3 form-test-error">
-      <error-message name="demo6"></error-message>
-    </div>
-
-    <!-- <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">Password (Required, enter any string)</h4>
-      <textInput
-        name="password"
-        type="text"
-        label="Password (Required)"
-        :isRequired="true"
-      />
-    </div>
-  </div>
-
-  <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">Confirm Password (Required, must match above Password field)</h4>
-      <textInput
-        name="passwordConfirmation"
-        type="text"
-        label="Confirm Password (Required)"
-        :isRequired="true"
-      />
-    </div>
-  </div> -->
-
-    <div class="row px-3 form-test-error" data-focus-target="demoX">
-      <error-message name="demoX"></error-message>
-    </div>
-
-    <div class="g-2 mt-6 mx-4">
-      <button class="mb-6" :class="!meta.valid && 'form-test-invalid'">
-        Get your estimate
-      </button>
-      <p>Current Form Values:</p>
-      <pre>{{ values }}</pre>
-      <p>Is Form Valid? (Meta.valid):</p>
-      <pre>{{ meta.valid }}</pre>
-    </div>
-  </Form>
 </template>
 
 <script>
-import { Form, ErrorMessage } from "vee-validate";
-import * as Yup from "yup";
+// Components
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
+import alert from "@/ux-components/alert/alert";
+
+import { Form } from 'vee-validate';
+
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin";
 
-import listCard from "@/ux-components/list-card/list-card";
-import textInput from "@/common-components/text-input/text-input";
-import listButton from "@/ux-components/list-button/list-button";
-import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 
 export default {
-  name: "App",
-  data() {
-    const errorMessages = {
-      demo: "Please select chip(s)",
-      demo2: "Please select a windshield part",
-      demo3:
-        "You entered an invalid VIN. Please check to make sure that you inserted a 17 digit, alpha-numeric number. VINs do not contain the letters I, O or Q.",
-      demo4: "Invalid Entry. Must enter only numbers, no letters.",
-      demo5: "Please select damage location",
-    };
+  name: "form-test",
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage('vehicle-damage');
+    const damageOptionsPromise =
+      baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.GET_DAMAGE_OPTIONS,
+        { carId: store.getters.vehicle.carId }
+      );
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "damageOptions",
+        promise: damageOptionsPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.$refs.funnelHeader.initializeComponent(
+        resultMap.cmsContent.FunnelHeaderWidget
+      );
+      vm.$refs.vehicleBanner.initializeComponent(
+        resultMap.cmsContent.VehicleBannerWidget
+      );
+      vm.$refs.funnelSubHeader.initializeComponent(
+        resultMap.cmsContent.FunnelSubHeaderWidget
+      );
+      vm.$refs.driverSideOptions.initializeComponent(
+        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+      );
+      vm.$refs.damageLocation.initializeComponent(
+        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+      );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
+    });
+  },
+  data(){
     return {
-      schema: Yup.object()
-        .shape({
-          demo: Yup.string().required(errorMessages.demo),
-          demo2: Yup.array()
-            .required(errorMessages.demo2)
-            .min(1, errorMessages.demo2),
-          demo3: Yup.string()
-            .uppercase()
-            .required("Please enter a VIN.")
-            .min(17, errorMessages.demo3)
-            .max(17, errorMessages.demo3)
-            .matches("^[^IOQ]+$", errorMessages.demo3),
-          // demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
-          demo5: Yup.array()
-            .required(errorMessages.demo5)
-            .min(1, errorMessages.demo5),
-          demo6: Yup.string().when("demo5", function (demo5, schema, value) {
-            if (demo5) {
-              const demo5String = demo5.toString();
-              if (demo5String.includes("Windshield")) {
-                // make demo6 required
-                return schema.required(
-                  "You must pick an option for Windshield Damage."
-                );
-              }
-              return schema;
-            }
-            return schema;
-          }),
-          demoX: Yup.string().notRequired(),
-          // PASSWORD EXAMPLE, NOT BEING USED NOW
-          // password: Yup.string().min(6).required(),
-          // passwordConfirmation: Yup.string()
-          //  .required()
-          //  .oneOf([Yup.ref("password")], "Passwords do not match"),
-        })
-        .test(
-          "repair-replace-conflict",
-          null, // need to pass null as error message so it won't get added to list of errors
-          function (value) {
-            // whole form test
-            console.log("ALL FORM VALUES: ", value);
-
-            // test problem scenario... return new error if conditions are true, allow submit if not
-            if (value.demo5 && value.demo6) {
-              const demo5String = value.demo5.toString();
-              console.log("demo5String: ", demo5String);
-              console.log("demo6: ", value.demo6);
-
-              if (
-                demo5String.includes("Windshield") &&
-                value.demo5.length > 1 &&
-                value.demo6 == "Chip"
-              ) {
-                return this.createError({
-                  name: "demoX",
-                  message:
-                    "Sorry, at this time we can't schedule a repair and replace at the same time. Please schedule these appointments separately as they are different technicians. Thanks.",
-                  path: "demoX",
-                });
-              }
-              return true;
-            }
-            return true;
-          }
-        ),
-    };
+      selectedDamageLocations: [],
+      driverSideOptionsData: [],
+    }
   },
   components: {
-    listCard,
-    listButton,
-    listButtonHorizontal,
-    textInput,
     Form,
-    ErrorMessage,
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    damageLocationQuestion,
+    replaceOptionsQuestion,
+    funnelFooter,
+    windshieldOptions,
+    alert,
   },
   methods: {
+    arePagePrerequisitesValid() {
+      return store.getters.vehicle.carId !== null;
+    },
+    resetDependentState() {
+      // Invokes
+      store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
+    },
     onSubmit(values) {
-      window.alert(
-        "Success! Submitted values: " + JSON.stringify(values, null, 2)
-      );
-      console.log("submitted: ", JSON.stringify(values, null, 2));
+      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
+      console.log('submitted: ', JSON.stringify(values, null ,2));
     },
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
       console.log("values: ", values);
       console.log("errors: ", errors);
       console.log("results: ", results);
-      // get errorEls and order by alpha
-      const errorEls = Object.keys(errors).sort();
-      const firstErrorEl = errorEls[0];
-      console.log("firstErrorEl: ", firstErrorEl);
+      // get error names array
+      const errorNames = errors ? Object.keys(errors) : [];
+      const firstErrorEl = errorNames[0];
       if (firstErrorEl) {
+        console.log('firstErrorEl: ', firstErrorEl);
         const qsString = "[data-focus-target='" + firstErrorEl + "']";
         document.querySelector(qsString).focus();
       }
@@ -369,13 +166,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-.form-test-error {
-  color: red;
-  font-weight: bold;
-}
-.form-test-invalid {
-  opacity: 0.5;
-}
-</style>

From 61c068bcded124c290d5b775c79aeb7c51ef0207 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 11 Feb 2022 10:41:44 -0500
Subject: [PATCH 21/31] Update margin-right.

---
 src/ux-components/checkbox/checkbox.vue | 2 +-
 src/ux-components/radio/radio.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 5338085a0..ca30ab330 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -52,7 +52,7 @@ export default {
       content: "";
       position: relative;
       display: inline-block;
-      margin-right: 10px;
+      margin-right: 8px;
       width: 16px;
       height: 16px;
       background: white;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 335ec5529..3cc17987c 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -97,7 +97,7 @@ export default {
       content: "";
       position: relative;
       display: inline-block;
-      margin-right: 10px;
+      margin-right: 8px;
       width: 16px;
       height: 16px;
       background: white;

From 764724e9fdfa32b326cc911d6e68161bc851f866 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 11 Feb 2022 13:44:49 -0500
Subject: [PATCH 22/31] CSR-341 remove code snippet.

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

diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 3cc17987c..5d5da19f7 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -34,7 +34,6 @@ export default {
       type: [String, Number],
       default: "",
     },
-    modelValue: String,
     screenReaderOnlyText: String,
   },
   data() {

From 764a2a50e33557eb40de12f902da83b8f4e642b7 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 11 Feb 2022 15:07:59 -0500
Subject: [PATCH 23/31] CSR-254: fix error styling

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

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index f75e9fd56..331c508a5 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -8,3 +8,24 @@
     }
   }
 }
+
+.form-test-error {
+  color: $red;
+  font-weight: bold;
+}
+
+.form-test-invalid {
+  &.btn.btn-primary {
+    color: $gray;
+    background: $gray-200;
+    cursor: default;
+  }
+  &.btn.btn-primary:hover,
+  &.btn.btn-primary:focus,
+  &.btn.btn-primary:focus-visible {
+    color: $gray;
+    background: $gray-200;
+    box-shadow: none;
+  }
+
+}
\ No newline at end of file

From 78a7f5b190327411ffffb8c172e776080db298b3 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 11 Feb 2022 15:08:48 -0500
Subject: [PATCH 24/31] CSR-254: remove unneeded code

---
 src/ux-components/list-card/list-card.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index bd1fb6a70..ebc52b83f 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -31,7 +31,7 @@
           class="small order-3"
           :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
         >
-          {{buttonLabel}} - {{errors.length}}
+          {{buttonLabel}}
         </p>
         <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
           {{buttonLabelSubCopy}}
@@ -124,11 +124,6 @@ export default {
       errors,
     };
   },
-  watch: {
-    errors() {
-      console.log('HEADS UP; ERRORS CHANGED, errors.length: ', this.errors.length)
-    },
-  },
 };
 </script>
 

From 3f8eef0b073c5a97001f5e45d61502a01beff552 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 11 Feb 2022 17:00:51 -0500
Subject: [PATCH 25/31] CSR-254: fixes

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 8 --------
 src/ux-components/button-main/button-main.vue | 4 ++--
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 2bc1c35f8..9f6a38650 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -79,14 +79,6 @@ export default {
       driverSideOptionsData: [],
     }
   },
-  components: {
-    funnelHeader,
-    vehicleBanner,
-    funnelSubHeader,
-    damageLocationQuestion,
-    replaceOptionsQuestion,
-    funnelFooter,
-  },
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 685848ee0..975babe17 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -36,8 +36,8 @@ export default {
   },
   methods: {
     clicked() {
-      // this.isLoaderDisplayed = true;
-      // this.$emit("click-event");
+      this.isLoaderDisplayed = true;
+      this.$emit("click-event");
     },
   },
   components: {

From a2f7889d9529d06fc749956abf55beebab2b6cf3 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 11 Feb 2022 17:01:38 -0500
Subject: [PATCH 26/31] CSR-254: temporarily exclude unused components (only
 used in form-test)

---
 jest.config.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/jest.config.js b/jest.config.js
index 36c4507fc..b8beb88cc 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -13,6 +13,8 @@ module.exports = {
     "!src/helpers/unit-test-helper.js",
     "!src/layouts/component-test/component-test.vue",
     "!src/layouts/form-test/form-test.vue",
+    "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
+    "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/address-poc/address-poc.vue",
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

From 18a3641a5402c45b8af8cb39ccdef3169ebc73dc Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 11 Feb 2022 17:02:17 -0500
Subject: [PATCH 27/31] CSR-254: remove invalid tests / add tests to increase
 code coverage

---
 .../funnel-footer/funnel-footer.spec.js       | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index 1c173b6be..6b2bd8335 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -5,7 +5,6 @@ describe("funnel-footer.vue", () => {
 
   it("Should return footer-link class", async () => {
     // Act
-
       const r = {
         test:"testing",
         clientHeight: 10,
@@ -18,43 +17,38 @@ describe("funnel-footer.vue", () => {
 
       const wrapper = mount(funnelFooter, {
       });
+      wrapper.vm.initializeComponent(cmsContent);
 
       // Assert
       const link = wrapper.find("a");
-      console.log(wrapper.html());
 
       // Expect
       expect(link.attributes('class')).toContain("footer");
 
   });
 
-  it("Should return link text", async () => {
+  it("Should emit ForwardClicked on button click", async () => {
     // Act
     const wrapper = mount(funnelFooter, {
-      propsData: {
-        text: "Terms of use",
-      },
     });
-
+    wrapper.vm.buttonClick();
     // Assert
-    const link = wrapper.find("a");
-
-    expect(link.text()).toEqual("Terms of use");
+    expect(wrapper.emitted()["ForwardClicked"][0]).toHaveBeenCalled;
   });
 
-  it("Should return class btn-primary", async () => {
+  it("Should emit BackClicked on link click", async () => {
     // Act
     const wrapper = mount(funnelFooter, {
-      propsData: {
-        isPrimary: true,
-      },
     });
-
+    wrapper.vm.linkClick();
     // Assert
-    const input = wrapper.find("button");
-
-    // Expect
-    expect(input.attributes("class")).toContain("btn-primary");
+    expect(wrapper.emitted()["BackClicked"][0]).toHaveBeenCalled;
   });
 
 });
+
+//Mock CMS content
+const cmsContent = {
+  backLink: "text",
+  buttonText: "text",
+};

From 383831669971a53d0ea92a83fda5b86c2f41a836 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 11 Feb 2022 17:12:28 -0500
Subject: [PATCH 28/31] CSR-254: refactoring, restored commented out test code

---
 .../damage-location-question/damage-location-question.vue   | 4 +---
 .../windshield-chip-count-question.vue                      | 0
 src/router/index.js                                         | 6 +++---
 src/ux-components/list-card/list-card.vue                   | 6 ++----
 4 files changed, 6 insertions(+), 10 deletions(-)
 delete mode 100644 src/layouts/vehicle-damage/windshield-chip-count-question/windshield-chip-count-question.vue

diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 345a16d1e..ec257ceec 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -68,15 +68,13 @@ export default ({
             }
         },
         answersToDisplay(){
-            const data = Array.isArray(this.answersFromCms) 
+            return Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
                         return name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptionsMap[name[1]];
                     }) 
                 : [];
-                console.log('data: ', data);
-                return data;
         },
     },
     components: {
diff --git a/src/layouts/vehicle-damage/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-chip-count-question/windshield-chip-count-question.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/router/index.js b/src/router/index.js
index 364ef9594..133a4106e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -74,9 +74,9 @@ const routes = [
             .filter((x) => x.name === routeData[0].name)[0]
             .components.default();
 
-          // if (!arePagePrerequisitesValid(nextComponent)) {
-          //   await GoToFunnelStartOn404(next);
-          // }
+          if (!arePagePrerequisitesValid(nextComponent)) {
+            await GoToFunnelStartOn404(next);
+          }
 
           // Assign current query string parameters, as well as our fmgPage one.
           next({
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index ebc52b83f..7550c9ec4 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -48,7 +48,6 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";
 
 export default {
@@ -107,17 +106,16 @@ export default {
     }
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
     const { 
         value: inputValue,
         handleChange,
         errors,
-    } = useField(groupName, props.validationRules, 
+    } = useField(props.groupName, props.validationRules, 
     {
       type: inputType,
-      checkedValue: value,
+      checkedValue: props.value,
     });
     return {
       handleChange,

From fe2b33dab737b770c29e2ea84b30a2f01f868c8a Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 14 Feb 2022 11:24:53 -0500
Subject: [PATCH 29/31] CSR-254: pass isDisabled prop down to button main and
 prevent blocking

---
 src/common-components/funnel-footer/funnel-footer.vue | 1 +
 src/ux-components/button-main/button-main.vue         | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 05409f738..af604ed99 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -24,6 +24,7 @@
             sizeInRem="1"
             :class="isDisabled && 'form-test-invalid'"
             :aria-disabled="isDisabled"
+            :isDisabled="isDisabled"
             @click-event="buttonClick"
           />
         </div>
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 975babe17..e14c29f9c 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,6 +1,5 @@
 <template>
   <button
-    :disabled="isDisabled"
     :aria-disabled="isDisabled"
     class="btn d-flex align-items-center py-3 px-2"
     :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']"
@@ -27,7 +26,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
-    isFloat: Boolean
+    isFloat: Boolean,
   },
   data() {
     return {
@@ -36,8 +35,10 @@ export default {
   },
   methods: {
     clicked() {
-      this.isLoaderDisplayed = true;
-      this.$emit("click-event");
+      if (!this.isDisabled) {
+        this.isLoaderDisplayed = true;
+        this.$emit("click-event");
+      }
     },
   },
   components: {

From b48312b869922e1755ec0a93b4f737fa03663971 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 14 Feb 2022 12:15:42 -0500
Subject: [PATCH 30/31] Fixing damageOptionsMap logic

---
 .../damage-location-question/damage-location-question.vue     | 4 ++--
 src/layouts/vehicle-damage/vehicle-damage.vue                 | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index c48912ff2..299e4fc3e 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -48,8 +48,8 @@ export default ({
         damageOptionsMap(){
             return {
                 Windshield: true,
-                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
-                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
+                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions.length || this.damageOptions.passengerSideOptions.availableReplacementOptions.length,
+                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions.length,
             }
         },
         answersToDisplay(){
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c37924a2c..928256074 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -70,6 +70,7 @@ export default {
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
+      console.log(resultMap.damageOptions)
     });
   },
   data(){

From d1ecf4d7b944e50ed14d3c07f2052994c18bc98c Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 14 Feb 2022 12:29:32 -0500
Subject: [PATCH 31/31] Fixing damageOptionsMap logic

---
 .../damage-location-question/damage-location-question.spec.js   | 2 +-
 .../damage-location-question/damage-location-question.vue       | 2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue                   | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
index 65434b289..01f063eef 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
@@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => {
       damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
   
       //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' }, {Name: "car-RearWindow"} ])
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
     });
   });
 
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index e088f36aa..36eac0831 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -36,7 +36,7 @@ export default ({
             damageOptions: Object,
         }
     },
-    props: {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
+    props: {               
         isMultiSelect: Boolean,
         modelValue: Array,
         isAvailable: Boolean,
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c28f370b1..9f6a38650 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -71,7 +71,6 @@ export default {
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
-      console.log(resultMap.damageOptions)
     });
   },
   data(){