Merge branch 'develop' into feature/CSR-269

2022-02-14 14:28:42 -05:00 · 2022-02-14 14:28:42 -05:00 · c824402a4a
commit c824402a4a
parent c9b09ae23a c906c2e9c9
27 changed files with 799 additions and 574 deletions
--- 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)"],
--- 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"
@ -32,10 +32,14 @@
              :colLength="this.answers.length < 3 ? '' : '-4'"
              :selectedButtonIDs="selectedValues"
              data-test="button"
+              :validationRules="validationRules"
            />
          </div>
      </fieldset>
    </div>
+    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
+        <error-message :name="groupName"></error-message>
+    </div>
  </div>
 </template>

@ -43,6 +47,8 @@
 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 { ErrorMessage } from 'vee-validate';
+import radio from "@/ux-components/radio/radio";

 export default {
  name: "buttonQuestion",
@ -76,6 +82,10 @@ export default {
    isOverflowScrollable: Boolean,
    isWide: Boolean,
    modelValue: Array,
+    validationRules: String,
+    name: String,
+    value: String,
+    suppressError: Boolean,
  },
  computed: {
    getFieldSetClasses() {
@ -95,6 +105,9 @@ export default {
        case 'listCard':
          classes = 'row justify-content-center g-2'
          break;
+        case 'radio':
+          classes = 'ui-radio d-flex'
+          break;
      }
      return classes;
    },
@ -115,6 +128,9 @@ export default {
    }
  },
  methods: {
+    chooseAnswer(answer) {
+      this.$emit("update:modelValue", answer);
+    },
    handleCheckedChanged(val) {
      if(this.isMultiSelect) {
        // Add or remove item to array of data to emit
@ -130,6 +146,8 @@ export default {
    listButton,
    listButtonHorizontal,
    listCard,
+    ErrorMessage,
+    radio,
  },
 };
 </script>
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@ -5,90 +5,50 @@ describe("funnel-footer.vue", () => {

  it("Should return footer-link class", async () => {
    // Act
-
      const r = {
        test:"testing",
        clientHeight: 10,
-        classList: {
-          add: jest.fn(() => ''),
-          remove: jest.fn()
-        },
+        offsetHeight: 24,
      };

-      global.document.getElementById = jest.fn().mockImplementation(()=> {
+      global.document.querySelector = jest.fn().mockImplementation(()=> {
        return r;
      });

      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-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");

  });

-  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");
-  });
-
-  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");
+    expect(wrapper.emitted()["BackClicked"][0]).toHaveBeenCalled;
  });

 });
+
+//Mock CMS content
+const cmsContent = {
+  backLink: "text",
+  buttonText: "text",
+};
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@ -1,28 +1,44 @@
 <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;{{new Date().getFullYear()}}&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="col d-flex justify-content-end" id="stacked">
-            <buttonMain isPrimary buttonText="Button test" loaderColor="white" sizeInRem="1" />
+    <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
+      <div class="row d-flex flex-row-reverse align-items-center">
+        <div class="col-12 button-col d-flex justify-content-end" id="stacked">
+          <buttonMain
+            isPrimary
+            :buttonText="buttonText"
+            loaderColor="white"
+            sizeInRem="1"
+            :class="isDisabled && 'form-test-invalid'"
+            :aria-disabled="isDisabled"
+            :isDisabled="isDisabled"
+            @click-event="buttonClick"
+          />
        </div>
-        <div class="col">
-            <textLink linkType="navigation" text="back" />
+        <div class="col-12 link-col py-1">
+          <textLink
+          linkType="navigation"
+          :text="backLink"
+          @click-event="linkClick"
+          href="javascript:void(0)"
+          />
        </div>
+      </div>
    </div>
-</div>
+  </div>
 </template>

 <script>
@ -30,53 +46,65 @@ 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",
+  props: {
+    isDisabled: Boolean,
+  },
+  components: {
+    textLink,
+    buttonMain
+  },
+  data() {
+    return {
+      paddingHeight: 0,
+      backLink: "",
+      buttonText: "",
    }
+  },
+  mounted() {
+    this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    })
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  },
+  methods: {
+    onResize() {
+      this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight;
+    },
+    initializeComponent(cmsContent) {
+      this.backLink = cmsContent.BackButtonText;
+      this.buttonText = 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-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>
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@ -5,42 +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" />
+    <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" />
+    </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" />
-      </div>
-      <div class="col-6">
-        <label for="zip">Zip</label>
-        <input ref="zip" 
-            id="zip"
-            class="form-control"
-            type="text" />
-      </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>
@ -57,7 +66,8 @@
        <input ref="firstName" 
            id="firstName"
            class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
      </div>
    </div> 
    <div class="row my-4">
@ -66,7 +76,8 @@
        <input ref="lastName" 
            id="lastName"
            class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
      </div>
    </div>
    <div class="row my-4">
@ -75,7 +86,8 @@
        <input ref="email" 
            id="email"
            class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
      </div>
    </div>            
  </div>
--- 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,36 @@
        />
      </div>
    </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
+        <p class="m-0">Sample radio button group</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <radio
+          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
+          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>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@ -50,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
@ -674,19 +707,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 +946,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>

@ -949,8 +959,8 @@ 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";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
  name: "App",
  components: {
@ -962,9 +972,9 @@ export default {
    vehicleBanner,
    listButtonHorizontal,
    checkbox,
+    radio,
    funnelHeader,
-    textLink,
-    funnelFooter
+    textLink
  },
  data() {
    return {
--- 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>
--- 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' } ])
    });
  });

--- 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">
        <buttonQuestion
            v-if="answersToDisplay.length > 1"
            :questionText="questionText"
@ -8,13 +8,24 @@
            :groupName="groupName"
            buttonType="listCard"
            v-model="selectedValues"
+            validationRules="damage-location-required"
        />
+        
    </div>
 </template>

 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+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",
@ -25,8 +36,12 @@ export default ({
            damageOptions: Object,
        }
    },
-    props: {
+    props: {               
+        isMultiSelect: Boolean,
        modelValue: Array,
+        isAvailable: Boolean,
+        filterByVehicleCategory: Boolean,
+        name: String,
        groupName: String,
    },
    methods: {
@ -34,7 +49,7 @@ export default ({
            this.questionText = cmsContent.QuestionText;
            this.answersFromCms = cmsContent.Answers;
            this.damageOptions = damageOptions;
-        }
+        },
    },
    computed: {
        selectedValues: {
@ -48,12 +63,12 @@ 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(){
-            return  Array.isArray(this.answersFromCms) 
+            return Array.isArray(this.answersFromCms) 
                ? this.answersFromCms.filter(ans => 
                    {
                        const name = ans.Name.split('-');
@ -64,6 +79,6 @@ export default ({
    },
    components: {
        buttonQuestion,
-    }
+    },
 })
 </script>
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@ -9,6 +9,7 @@
                :groupName="groupName"
                buttonType="listCard"
                v-model="selectedValues"
+                validationRules="replace-options-required"
            />
        </div>
    </transition>
@ -17,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",
@ -38,7 +48,7 @@ export default ({
            this.questionText = cmsContent.QuestionText;
            this.answersFromCms = cmsContent.Answers;
            this.replaceOptions = replaceOptions;
-        }
+        },
    },
    computed: {
        selectedValues: {
--- 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 };
 }
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@ -1,10 +1,11 @@
 <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" @back-clicked="backButtonAction" />
        <windshieldOptions ref="windshieldOptions" v-model="selectedWindshieldOptions" :selectedDamageLocations="selectedDamageLocations" :selectedChipCount="selectedChipCount" />
    </div>
 </template>
@ -12,6 +13,7 @@
 <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";
@ -71,6 +73,9 @@ export default {
      vm.$refs.damageLocation.initializeComponent(
        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
      );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
      console.log("vd: initialize wo");
      vm.$refs.windshieldOptions.initializeComponent(
        resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
@ -93,7 +98,14 @@ export default {
    resetDependentState() {
      // Invokes
      store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
-    }
+    },
+    backButtonAction() {
+      // route to move backwards
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
+    },
  },
  //computed: {
        // selectedWindshieldDamageType(){
@ -106,6 +118,7 @@ export default {
    //},
  components: {
    funnelHeader,
+    funnelFooter,
    vehicleBanner,
    funnelSubHeader,
    replaceOptionsQuestion,
--- 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
@ -0,0 +1,99 @@
+<template>
+    <div class="windshield-damage-type-question">
+        <buttonQuestion
+            v-if="isAvailable && answersToDisplay.length > 1"
+            :questionText="questionText"
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedValues"
+            validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+            :suppressError="suppressError"
+        />
+    </div>
+</template>
+
+<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",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            damageOptions: Object,
+        }
+    },
+    props: {
+        isMultiSelect: Boolean,
+        modelValue: Array,
+        isAvailable: Boolean,
+        name: String,
+        groupName: String,
+        suppressError: Boolean,
+    },
+    methods: {
+        initializeComponent(cmsContent, damageOptions){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+            this.damageOptions = damageOptions;
+        },
+    },
+    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>
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@ -116,3 +116,5 @@ console.log(this);
    },
 })
 </script>
+
+        suppressError: Boolean,
--- 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"
--- 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,
--- 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 };
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@ -1,10 +1,31 @@
 .has-error {
-  .list-button,
-  .list-card,
-  .list-button-horizontal {
+  &.list-button,
+  &.list-card,
+  &.list-button-horizontal {
    color: $red;
    label {
      border: 1px solid $red;
    }
  }
 }
+
+.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;
+  }
+
+}
--- 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;
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@ -1,5 +1,10 @@
 <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
+    :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"
@ -21,7 +26,7 @@ export default {
    loaderColor: String,
    loaderPosition: String,
    sizeInRem: [Number, String],
-    isFloat: Boolean
+    isFloat: Boolean,
  },
  data() {
    return {
@ -30,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: {
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@ -44,12 +44,15 @@ export default {
    + label {
      display: block;
      position: relative;
+      &:hover {
+        cursor: pointer;
+      }
    }
    + label::before {
      content: "";
      position: relative;
      display: inline-block;
-      margin-right: 10px;
+      margin-right: 8px;
      width: 16px;
      height: 16px;
      background: white;
@ -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;
--- 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;
    }
--- 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;
    }
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@ -1,9 +1,9 @@
 <template>
  <div :class="'col' + colLength">
-    <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)">
+    <div 
+      class="list-card w-100 rounded-3 d-flex align-items-center h-100"
+      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
+    >
      <input
        :type="isMultiSelect ? 'checkbox' : 'radio'"
        :id="buttonID"
@ -11,9 +11,10 @@
        :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"
@ -24,7 +25,7 @@
          :class="!isWide ? 'order-1' : 'ms-auto order-3'"
          :src="buttonImage"
          :alt="altText"
-         />
+        />
        <p
          v-if="!isWide"
          class="small order-3"
@ -32,12 +33,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>
@ -47,7 +48,6 @@
 </template>

 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";

 export default {
@ -71,6 +71,7 @@ export default {
      default: "",
    },
    colLength: String,
+    validationRules: String,
    selectedButtonIDs: [Array, String],
  },
  data(){
@ -105,15 +106,20 @@ export default {
    }
  },
  setup(props) {
-    const { groupName, value } = toRefs(props);
    const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange } = useField(groupName, undefined, {
+
+    const { 
+        value: inputValue,
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules, 
+    {
      type: inputType,
-      checkedValue: value,
+      checkedValue: props.value,
    });
    return {
-      checked,
      handleChange,
+      errors,
    };
  },
 };
@ -131,9 +137,10 @@ export default {
    height: auto;
    width: 6.5rem;
    margin-bottom: 3rem;
+    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"],
@ -149,6 +156,9 @@ export default {
      }
      p {
        text-align: center;
+        &.sub-copy {
+          color: $gray-550;
+        }
      }
    }
    &:focus + label {
@ -236,6 +246,9 @@ export default {
        }
        p {
          text-align: left;
+          &.sub-copy {
+            color: $gray-550;
+          }
        }
      }
    }
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@ -0,0 +1,63 @@
+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");
+  });
+});
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@ -0,0 +1,138 @@
+<template>
+  <!-- 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"
+    :v-model="checkValue"
+    @change="handleCheckChanged"
+    />
+    <label class="d-flex align-items-center" :for="buttonID">
+      <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{
+        screenReaderOnlyText
+      }}</span>
+    </label>
+  </div>
+</template>
+
+<script>
+import { toRefs } from "vue";
+import { useField } from "vee-validate";
+export default {
+  name: "radio",
+  props: {
+    groupName: String,
+    buttonLabel: String,
+    buttonID: String,
+    isRequired: Boolean,
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    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>
+
+<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: 8px;
+      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>
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@ -13,11 +13,10 @@ export default {
    text: String,
    href: {
      type: String,
-      default: `javascript:void(0)`, //Prevents page jump when value is empty or #
    },
  },
  methods: {
-    handleClick() {
+    handleClick(event) {
      this.$emit("click-event");
    },
  },