From 46865fe2bcdfd0267c014caee04e72df24f9b4b3 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 15 Dec 2021 18:13:03 -0500
Subject: [PATCH 01/23] CSR-222: update button-back component; rename
 site-header and header components

---
 .../funnel-header.spec.js}                    |  6 +--
 .../funnel-header.vue}                        |  3 +-
 .../funnel-sub-header.spec.js                 | 16 ++++++++
 .../funnel-sub-header/funnel-sub-header.vue   | 38 +++++++++++++++++++
 .../vehicle-banner/vehicle-banner.vue         |  1 +
 src/layouts/component-test/component-test.vue | 11 ++++--
 src/layouts/vehicle-year/vehicle-year.vue     | 15 +++++---
 .../button-back/button-back.spec.js           | 21 +++++++++-
 src/ux-components/button-back/button-back.vue | 20 ++++++++--
 src/ux-components/header/header.spec.js       | 16 --------
 src/ux-components/header/header.vue           | 22 -----------
 11 files changed, 113 insertions(+), 56 deletions(-)
 rename src/common-components/{site-header/site-header.spec.js => funnel-header/funnel-header.spec.js} (68%)
 rename src/common-components/{site-header/site-header.vue => funnel-header/funnel-header.vue} (90%)
 create mode 100644 src/common-components/funnel-sub-header/funnel-sub-header.spec.js
 create mode 100644 src/common-components/funnel-sub-header/funnel-sub-header.vue
 delete mode 100644 src/ux-components/header/header.spec.js
 delete mode 100644 src/ux-components/header/header.vue

diff --git a/src/common-components/site-header/site-header.spec.js b/src/common-components/funnel-header/funnel-header.spec.js
similarity index 68%
rename from src/common-components/site-header/site-header.spec.js
rename to src/common-components/funnel-header/funnel-header.spec.js
index 2a471fe26..cae21a179 100644
--- a/src/common-components/site-header/site-header.spec.js
+++ b/src/common-components/funnel-header/funnel-header.spec.js
@@ -1,12 +1,12 @@
 import { shallowMount } from "@vue/test-utils";
-import siteHeader from "./site-header";
+import funnelHeader from "./funnel-header";
 
-describe("siteHeader", () => {
+describe("funnelHeader", () => {
   test("renders the logo image", () => {
     // Arrange
 
     // Act
-    const wrapper = shallowMount(siteHeader, {
+    const wrapper = shallowMount(funnelHeader, {
       propsData: {
         imageSrc: "image_url",
       },
diff --git a/src/common-components/site-header/site-header.vue b/src/common-components/funnel-header/funnel-header.vue
similarity index 90%
rename from src/common-components/site-header/site-header.vue
rename to src/common-components/funnel-header/funnel-header.vue
index 441b188c4..7b6c6efc6 100644
--- a/src/common-components/site-header/site-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -9,11 +9,12 @@
 
 <script>
 export default {
-  name: "site-header",
+  name: "funnel-header",
   props: {
     imageSrc: {
       type: String,
       required: true,
+      default: "",
     },
   },
 };
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
new file mode 100644
index 000000000..f90f042dc
--- /dev/null
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -0,0 +1,16 @@
+import { shallowMount } from "@vue/test-utils";
+import FunnelSubHeader from "./funnel-sub-header";
+
+describe("FunnelSubHeader.vue", () => {
+  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
+    // Act
+    const wrapper = shallowMount(FunnelSubHeader, {
+      propsData: {
+        text: "FunnelSubHeader Content",
+      },
+    });
+
+    // Assert
+    expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
+  });
+});
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
new file mode 100644
index 000000000..5e8b480c3
--- /dev/null
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="current_car_info-text">
+    <div class="d-flex align-items-center justify-content-center">
+      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
+      <buttonBack 
+        v-if="hasBackButton" 
+        :backButtonUrl="backButtonUrl" 
+        :backButtonAccessibleText="backButtonAccessibleText" 
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import buttonBack from "@/ux-components/button-back/button-back";
+
+export default {
+  name: "FunnelSubHeader",
+  props: {
+    text: String,
+    hasBackButton: Boolean,
+    backButtonUrl: String,
+    backButtonAccessibleText: String,
+  },
+  components: {
+    buttonBack,
+  }
+};
+</script>
+
+<style lang="scss">
+  h2 {
+    color: $gray-550;
+  }
+  .back-button-wrapper {
+    margin-left: .25rem;
+  }
+</style>
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 51e8d8aa3..e369cddb9 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -15,6 +15,7 @@ export default {
     vehicleImageSrc: {
       type: String,
       required: true,
+      default: "",
     },
   },
 };
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 624469e8a..5d2bb02e7 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -52,7 +52,10 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack/>
+        <buttonBack 
+          backButtonUrl="#"
+          backButtonAccessibleText="Back button label"
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -398,7 +401,7 @@
     </div>
     <div class="row my-3">
       <div class="col">
-        <siteHeader
+        <funnelHeader
           imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
         />
       </div>
@@ -426,7 +429,7 @@ import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
 import alert from "@/ux-components/alert/alert";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import siteHeader from "@/common-components/site-header/site-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 export default {
   name: "App",
@@ -439,7 +442,7 @@ export default {
     alert,
     vehicleBanner,
     listButtonHorizontal,
-    siteHeader,
+    funnelHeader,
   },
   data() {
     return {
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index f5ce99324..692526cf5 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,10 +1,13 @@
 <template v-if="isCmsContentReady">
   <div class="container-fluid shadow rounded-3 p-0">
-    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader 
+            :text="pageHeaderWidgets.HeaderText" 
+            class="Header" 
+        />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
     </div>
@@ -14,9 +17,9 @@
 <script>
 // Components
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-import pageHeader from "@/ux-components/header/header";
-import siteHeader from "@/common-components/site-header/site-header";
+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";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -70,9 +73,9 @@ export default {
 
   components: {
     yearQuestion,
-    pageHeader,
-    siteHeader,
+    funnelHeader,
     vehicleBanner,
+    funnelSubHeader,
   },
 };
 </script>
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index 3d0843e10..c2676214f 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -1 +1,20 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import buttonBack from "./button-back";
+
+describe("back button", () => {
+  test("renders a link", () => {
+    // Arrange
+
+    // Act
+    const wrapper = shallowMount(buttonBack, {
+      propsData: {
+        backButtonUrl: "#",
+        backButtonAccessibleText: "something",
+      },
+    });
+    
+    // Assert
+    expect(wrapper.find("a").exists()).toBe(true);
+    wrapper.unmount();
+  });
+});
\ No newline at end of file
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index aa462accc..abeb08462 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,15 +1,26 @@
 <template>
-  <button class="back-button-wrapper d-flex p-0">
+  <a v-if="backButtonUrl" :href="backButtonUrl" class="back-button-wrapper d-flex p-0" :aria-label="backButtonAccessibleText">
     <div class="button-back">
       <div class="arrow-left"></div>
       <div class="box"></div>
     </div>
-  </button>
+  </a>
 </template>
 
 <script>
 export default {
-  name: "buttonBack"
+  name: "buttonBack",
+  props: {
+    backButtonUrl: {
+      type: String,
+      required: true,
+      default: "",
+    },
+    backButtonAccessibleText: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>
 
@@ -17,6 +28,9 @@ export default {
 .back-button-wrapper {
   border: none;
   background: transparent;
+  text-decoration: none;
+  border-bottom: none;
+
   .button-back {
     display: inline-flex;
     position: relative;
diff --git a/src/ux-components/header/header.spec.js b/src/ux-components/header/header.spec.js
deleted file mode 100644
index 2c287ac79..000000000
--- a/src/ux-components/header/header.spec.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import Header from "./header";
-
-describe("Header.vue", () => {
-  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
-    // Act
-    const wrapper = shallowMount(Header, {
-      propsData: {
-        text: "Header Content",
-      },
-    });
-
-    // Assert
-    expect(wrapper.find("h2").text()).toContain("Header Content");
-  });
-});
diff --git a/src/ux-components/header/header.vue b/src/ux-components/header/header.vue
deleted file mode 100644
index 3395a7e93..000000000
--- a/src/ux-components/header/header.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="current_car_info-text">
-    <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Header",
-  props: {
-    text: String,
-  },
-};
-</script>
-
-<style lang="scss">
-  h2 {
-    color: $gray-550;
-  }
-</style>

From 3cbc071bb48d8e4d94a56f93294f54dafe255e14 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Thu, 16 Dec 2021 14:09:26 -0500
Subject: [PATCH 02/23] Created mapper methods

---
 src/helpers/cms-content-helper.js | 70 +++++++++++++++++++++++++++++--
 1 file changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index e0a12d8fe..0c80b5bd3 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -9,17 +9,79 @@ export function fetchCmsContentForPage(fmgPage) {
       const pageDataFromCms = {};
 
       response.data.Result.forEach((widget) => {
-        if (Object.values(widgetNames).includes(widget.Type)) {
+
+        let widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Type);
+
+        if (Object.values(widgetNames).includes(widgetWithReplacements.Type)) {
           // If we already have this widget, push it on the collection
-          if (widget.Type in pageDataFromCms) {
-            pageDataFromCms[widget.Type].push(widget.Model);
+          if (widgetWithReplacements.Type in pageDataFromCms) {
+            pageDataFromCms[widgetWithReplacements.Type].push(widgetWithReplacements.Model);
             return;
           }
 
-          pageDataFromCms[widget.Type] = [widget.Model];
+          pageDataFromCms[widgetWithReplacements.Type] = [widgetWithReplacements.Model];
         }
       });
 
       return pageDataFromCms;
     });
 }
+
+function mapStringToState(str) {
+
+  // Pull the state string out of our dynamic string from the CMS
+  const regexExp = new RegExp('{(.*?):(.*?)}', 'g');
+  const matches = [...str.matchAll(regexExp)];
+  const stateString = matches.map(m => m[2]).toString();
+
+  // Convert the state string to a state object
+  let storeState = store.state;
+
+  for (const s of stateString.split('.')) {
+    if (storeState[s] != undefined) {
+      storeState = storeState[s];
+    } else {
+      return false; // If we can't find our state variable, break our loop. Don't break our code.
+    }
+  }
+
+  return storeState;
+}
+
+function findAndReplaceGlobalStateValues(widgetModel, widgetType) {
+
+  const objWithReplacements = {
+    Type: widgetType,
+    Model: {}
+  };
+
+  Object.keys(widgetModel).forEach(key => {
+
+    let modelWithReplacements = processWidgetItemForReplacement(widgetModel, key);
+
+    objWithReplacements.Model[key] = modelWithReplacements;
+  });
+
+  return objWithReplacements;
+}
+
+function processWidgetItemForReplacement(widgetModel, key) {
+  // If we have a string, and it needs to be replaced.
+  if (typeof widgetModel[key] === 'string') {
+    if (widgetModel[key].includes('{globalState:')) {
+      widgetModel[key] = mapStringToState(widgetModel[key]);
+    }
+    return widgetModel[key];
+  }
+
+  // If we have an object. array, etc
+  if (typeof widgetModel[key] === 'object' && Object.keys(widgetModel[key]).length) {
+    Object.keys(widgetModel[key]).forEach(item => {
+      processWidgetItemForReplacement(widgetModel[key], item);
+    });
+
+    return widgetModel[key];
+  }
+
+  return widgetModel[key];
+}
\ No newline at end of file

From 01fa5ac057db984e3c2d229e1534a9816b2cac08 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Thu, 16 Dec 2021 14:49:40 -0500
Subject: [PATCH 03/23] Some comments

---
 src/helpers/cms-content-helper.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 0c80b5bd3..1d901d27e 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -27,6 +27,7 @@ export function fetchCmsContentForPage(fmgPage) {
     });
 }
 
+// Function to convert a string, into a matching global state item.
 function mapStringToState(str) {
 
   // Pull the state string out of our dynamic string from the CMS
@@ -48,6 +49,8 @@ function mapStringToState(str) {
   return storeState;
 }
 
+// Parent function for processWidgetItemForReplacement. This will loop through the parent
+// object and pass any objects that need additional processing to the processWidgetItemForReplacement function.
 function findAndReplaceGlobalStateValues(widgetModel, widgetType) {
 
   const objWithReplacements = {
@@ -65,6 +68,8 @@ function findAndReplaceGlobalStateValues(widgetModel, widgetType) {
   return objWithReplacements;
 }
 
+// This function will process the widget item and replace any global state variables with their values.
+// This is a recursive function, it will call itself until it runs out of items to iterate on given the object.
 function processWidgetItemForReplacement(widgetModel, key) {
   // If we have a string, and it needs to be replaced.
   if (typeof widgetModel[key] === 'string') {

From a298e15f06ae81298a78168f63e3cfeb9df9a471 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 16 Dec 2021 16:37:35 -0500
Subject: [PATCH 04/23] Creating makes page

---
 .../button-question/button-question.vue       | 14 ++-
 .../vehicle-banner/vehicle-banner.vue         |  2 +-
 src/helpers/cms-content-helper.js             |  2 +-
 .../make-question/make-question.spec.js       | 82 ++++++++++++++++
 .../make-question/make-question.vue           | 47 ++++++++++
 src/layouts/vehicle-make/vehicle-make.spec.js | 94 +++++++++++++++++++
 src/layouts/vehicle-make/vehicle-make.vue     | 77 +++++++++++++++
 src/layouts/vehicle-year/vehicle-year.vue     | 14 +--
 src/mixins/base-mixin.js                      |  4 +
 src/router/router-constants/fmgPage-values.js |  1 +
 .../router-constants/navigation-scenarios.js  |  1 +
 src/router/router-constants/routing-table.js  |  9 ++
 src/store/index.js                            |  3 +
 src/ux-components/list-button/list-button.vue |  2 +-
 14 files changed, 335 insertions(+), 17 deletions(-)
 create mode 100644 src/layouts/vehicle-make/make-question/make-question.spec.js
 create mode 100644 src/layouts/vehicle-make/make-question/make-question.vue
 create mode 100644 src/layouts/vehicle-make/vehicle-make.spec.js
 create mode 100644 src/layouts/vehicle-make/vehicle-make.vue

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 97ebf1310..e1fee1e40 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -17,7 +17,7 @@
             data-test="button"
             :groupName="groupName"
             textPosition="text-start"
-            isRequired=true
+            :isRequired="true"
             :value="modelValue"
             screenReaderOnlyText="(opens new window)"
           />
@@ -46,3 +46,15 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.button_question {
+  height: calc(100vh - 280px);
+
+  .car_list {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 320px);
+    -webkit-overflow-scrolling: touch;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 51e8d8aa3..32caa82f8 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vehicle_banner mb-4 text-center">
+  <div class="vehicle_banner mb-3 text-center">
     <img
       class="vehicle-image img-fluid blurrycar"
       :src="vehicleImageSrc"
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index e0a12d8fe..c12820fe0 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -22,4 +22,4 @@ export function fetchCmsContentForPage(fmgPage) {
 
       return pageDataFromCms;
     });
-}
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-make/make-question/make-question.spec.js b/src/layouts/vehicle-make/make-question/make-question.spec.js
new file mode 100644
index 000000000..84dd4f7e8
--- /dev/null
+++ b/src/layouts/vehicle-make/make-question/make-question.spec.js
@@ -0,0 +1,82 @@
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("make-question.vue", () => {
+  test("Selected make is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "honda" });
+    const makeToSelect = "ford";
+
+    //Act
+    wrapper.setData({ selectedMake: makeToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["ford"]);
+  });
+});
+
+describe("make-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What make is your vehicle?" });
+
+    //Act
+    makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What make is your vehicle?");
+  });
+});
+
+describe("make-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["honda", "ford", "dodge"] });
+
+    //Act
+    const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm);
+    makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("honda,ford,dodge");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(makeQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
new file mode 100644
index 000000000..8edb13152
--- /dev/null
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -0,0 +1,47 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="makes"
+    groupName="Choose Vehicle Make"
+    v-model="selectedMake"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
+export default {
+  name: "make-question",
+  data() {
+    return {
+      questionText: null,
+      selectedMake: null,
+      makes: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      console.log(store);
+      return store.dispatch(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.makes = initialData;
+    }
+  },
+  watch: {
+    selectedMake(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
new file mode 100644
index 000000000..0f46067e4
--- /dev/null
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -0,0 +1,94 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-make.vue", () => {
+  test("Make question component is initized with api data", async (done) => {
+
+    //Arange
+    const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
+    const makeQuestionInitialData = ["2023", "2022", "2021"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      makeQuestionInitialData: makeQuestionInitialData,
+    } );
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, makeQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a make to get started" });
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a make to get started");
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  makeQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+}) {
+  
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      RadioQuestionWidget: [radioQuestionCmsContent],
+      VehicleBannerWidget: [
+        {
+          GenericVehicleImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+        },
+      ],
+      SiteHeaderWidget: [
+        {
+          LogoImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+        },
+      ],
+      isCmsContentReady: true,
+    },
+    makeQuestionInitialData: makeQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock make question methods
+  makeQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions({ });
+  const wrapper = shallowMount(vehicleMake, mountOptions);
+  const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
+  makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
new file mode 100644
index 000000000..a9cedabbf
--- /dev/null
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -0,0 +1,77 @@
+<template v-if="isCmsContentReady">
+  <div class="container-fluid shadow rounded-3 p-0">
+    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <makeQuestion v-model="selectedMake" ref="makeQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import pageHeader from "@/ux-components/header/header";
+import siteHeader from "@/common-components/site-header/site-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-make",
+  data() {
+    return {
+      pageHeaderWidgets: {},
+      siteHeaderWidget: {},
+      vehicleBannerWidget: {},
+      selectedMake: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "makeQuestionInitialData",
+        promise: makeQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData);
+      });
+    });
+  },
+
+  watch: {
+    selectedMake(make) {
+      this.$store.commit(this.storeMutations.UPDATE_MAKE, make);
+      this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route);
+    }
+  },
+
+  components: {
+    makeQuestion,
+    pageHeader,
+    siteHeader,
+    vehicleBanner,
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index f5ce99324..842cb68ba 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -64,7 +64,7 @@ export default {
   watch: {
     selectedYear(year) {
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-      this.$router.push('?fmgPage=vehicle-make');
+      this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route);
     }
   },
 
@@ -76,15 +76,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-.select-car {
-  height: calc(100vh - 56px);
-
-  .car_list {
-    // Height will be determined by overall height of content above list
-    height: calc(100% - 300px);
-    -webkit-overflow-scrolling: touch;
-  }
-}
-</style>
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index afe618125..14da7a16b 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -1,5 +1,6 @@
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; 
 import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
@@ -31,6 +32,9 @@ export default {
     storeMutations() {
       return storeMutations;
     },
+    navigationScenarios() {
+      return navigationScenarios;
+    },
     widgetNames() {
       return widgetNames;
     },
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index e84d9e9ea..53e8272d8 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -1,6 +1,7 @@
 const fmgPageValues = {
   VEHICLE_YEAR: "vehicle-year",
   VEHICLE_MAKE: "vehicle-make",
+  VEHICLE_MODEL: "vehicle-model",
 };
 
 export { fmgPageValues };
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 3fc642d65..72703ef58 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -1,5 +1,6 @@
 const navigationScenarios = {
   SELECTED_YEAR: "SELECTED_YEAR",
+  SELECTED_MAKE: "SELECTED_MAKE",
 };
 
 export { navigationScenarios };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 7f3f3d0d1..243baeb80 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -9,6 +9,15 @@ const routingTable = [
         scenario: navigationScenarios.SELECTED_YEAR,
         destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
       },
+      {
+        fmgPageValue: fmgPageValues.VEHICLE_MAKE,
+        maps: [
+          {
+            scenario: navigationScenarios.SELECTED_MAKE,
+            destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+          },
+        ],
+      },
     ],
   },
 ];
diff --git a/src/store/index.js b/src/store/index.js
index 036694868..1bf7243b7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -65,6 +65,9 @@ export default createStore({
       state.order.vehicle.year = year;
     },
   },
+  getters: {
+    vehicle: state => state.order.vehicle
+  },
   actions: {
     // Vehicle API Actions
     getVehicleYears(context) {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index e23a96dfc..c20f1c6cb 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -18,7 +18,7 @@ export default {
   name: "listButton",
   props: {
     groupName: String, /* Required, unique for each button GROUP */
-    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
+    buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and <label for> */
     isRequired: Boolean, /* Optional, default is false */
     screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */

From 137ccd5328f6dbd4aaba1ea30e8590708b1eb28c Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 16 Dec 2021 17:05:43 -0500
Subject: [PATCH 05/23] CSR-222: changes to navigation method of back button

---
 .../funnel-sub-header.spec.js                 |  1 +
 .../funnel-sub-header/funnel-sub-header.vue   |  9 +++----
 .../button-back/button-back.spec.js           | 24 ++++++++++++++++++-
 src/ux-components/button-back/button-back.vue | 21 ++++++++++++++--
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index f90f042dc..e2b5c4d28 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -12,5 +12,6 @@ describe("FunnelSubHeader.vue", () => {
 
     // Assert
     expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
+    wrapper.unmount();
   });
 });
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 5e8b480c3..5e3bcc7e3 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -2,10 +2,10 @@
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
       <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
-      <buttonBack 
-        v-if="hasBackButton" 
-        :backButtonUrl="backButtonUrl" 
-        :backButtonAccessibleText="backButtonAccessibleText" 
+      <buttonBack
+        v-if="hasBackButton"
+        :backButtonAccessibleText="backButtonAccessibleText"
+        :backButtonAction="backButtonAction"
       />
     </div>
   </div>
@@ -21,6 +21,7 @@ export default {
     hasBackButton: Boolean,
     backButtonUrl: String,
     backButtonAccessibleText: String,
+    backButtonAction: Function,
   },
   components: {
     buttonBack,
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index c2676214f..b753f4376 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -2,6 +2,7 @@ import { shallowMount } from "@vue/test-utils";
 import buttonBack from "./button-back";
 
 describe("back button", () => {
+
   test("renders a link", () => {
     // Arrange
 
@@ -17,4 +18,25 @@ describe("back button", () => {
     expect(wrapper.find("a").exists()).toBe(true);
     wrapper.unmount();
   });
-});
\ No newline at end of file
+
+  test("should execute handleClick function if it is clicked on", async () => {
+    // Arrange
+    const myFunction = () => {};
+    
+    // Act
+    const wrapper = shallowMount(buttonBack, {
+        propsData: {
+            backButtonAction: myFunction,
+            backButtonAccessibleText: "something",
+        },
+    });
+    const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
+
+    await wrapper.find("a").trigger("click");
+    
+    // Assert
+    expect(handleClickMethod).toHaveBeenCalled();
+    wrapper.unmount();
+  });
+
+});
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index abeb08462..808c1f6cc 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,5 +1,11 @@
 <template>
-  <a v-if="backButtonUrl" :href="backButtonUrl" class="back-button-wrapper d-flex p-0" :aria-label="backButtonAccessibleText">
+  <a 
+    v-if="backButtonUrl || backButtonAction" 
+    :href="backButtonUrl || '#'" 
+    @click="handleClick($event)" 
+    class="back-button-wrapper d-flex p-0" 
+    :aria-label="backButtonAccessibleText"
+  >
     <div class="button-back">
       <div class="arrow-left"></div>
       <div class="box"></div>
@@ -13,13 +19,24 @@ export default {
   props: {
     backButtonUrl: {
       type: String,
-      required: true,
       default: "",
     },
     backButtonAccessibleText: {
       type: String,
       required: true,
     },
+    backButtonAction: {
+      type: Function,
+      default: null,
+    }
+  },
+  methods: {
+    handleClick: function (event) {
+      if (this.backButtonAction) {
+        event.preventDefault();
+        this.backButtonAction();
+      }
+    },
   },
 };
 </script>

From 6050f346f6cf7d9134f6f456143717e23353d670 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 09:07:19 -0500
Subject: [PATCH 06/23] Cleaning up unit tests

---
 src/layouts/vehicle-make/make-question/make-question.vue | 1 -
 src/layouts/vehicle-make/vehicle-make.spec.js            | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 8edb13152..765c7a542 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -30,7 +30,6 @@ export default {
   },
   methods: {
     loadInitialData() {
-      console.log(store);
       return store.dispatch(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
     },
     initializeComponent(cmsContent, initialData) {
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 0f46067e4..c184595f1 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -15,7 +15,7 @@ describe("vehicle-make.vue", () => {
 
     //Arange
     const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
-    const makeQuestionInitialData = ["2023", "2022", "2021"];
+    const makeQuestionInitialData = ["honda", "ford", "dodge"];
     const { wrapper, apiPromise } = setupMocks( { 
       radioQuestionCmsContent: radioQuestionCmsContent, 
       makeQuestionInitialData: makeQuestionInitialData,

From f9432fb24e6738fca88a00692851ac2a556b96da Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 09:13:31 -0500
Subject: [PATCH 07/23] removing unnecessary if statement

---
 src/layouts/vehicle-make/vehicle-make.spec.js | 1 -
 src/layouts/vehicle-make/vehicle-make.vue     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index c184595f1..87df24e38 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -73,7 +73,6 @@ function setupMocks({
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
         },
       ],
-      isCmsContentReady: true,
     },
     makeQuestionInitialData: makeQuestionInitialData,
   };
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index a9cedabbf..a5abd776b 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,4 +1,4 @@
-<template v-if="isCmsContentReady">
+<template>
   <div class="container-fluid shadow rounded-3 p-0">
     <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">

From 695842cf84f3ad2ecdf3bbaaf773b5ce5d80881a Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 09:20:14 -0500
Subject: [PATCH 08/23] Fixing routing-table

---
 src/router/router-constants/routing-table.js | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 14b5e24bc..34f4c5579 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -9,15 +9,6 @@ const routingTable = [
         scenario: navigationScenarios.SELECTED_YEAR,
         destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
       },
-      {
-        fmgPageValue: fmgPageValues.VEHICLE_MAKE,
-        maps: [
-          {
-            scenario: navigationScenarios.SELECTED_MAKE,
-            destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
-          },
-        ],
-      },
     ],
   },
   {
@@ -48,4 +39,4 @@ const routingTable = [
   },
 ];
 
-export { routingTable };
+export { routingTable };
\ No newline at end of file

From a4fa2e04246db89c4ab85297b2eb128c08e027ab Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 11:33:21 -0500
Subject: [PATCH 09/23] CSR-222: update vehicle-make layout with new naming of
 header components

---
 src/layouts/vehicle-make/vehicle-make.vue | 12 ++++++------
 src/layouts/vehicle-year/vehicle-year.vue |  1 -
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index a5abd776b..f4e5bc587 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">
-    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
         <makeQuestion v-model="selectedMake" ref="makeQuestion" />
       </div>
     </div>
@@ -14,9 +14,9 @@
 <script>
 // Components
 import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
-import pageHeader from "@/ux-components/header/header";
-import siteHeader from "@/common-components/site-header/site-header";
+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";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -69,9 +69,9 @@ export default {
 
   components: {
     makeQuestion,
-    pageHeader,
-    siteHeader,
+    funnelHeader,
     vehicleBanner,
+    funnelSubHeader,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 55591052f..48508adc2 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -23,7 +23,6 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
 export default {
   name: "vehicle-year",

From 8958dfe0bb6070df6a44e0f7fd6f2b0f86304bd3 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Fri, 17 Dec 2021 13:11:59 -0500
Subject: [PATCH 10/23] Unit tests updates

---
 jest.config.js                 |   2 +-
 src/helpers/cms-helper.spec.js | 170 +++++++++++++++++++++++++--------
 2 files changed, 130 insertions(+), 42 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index e36f1a70d..fd7713966 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,7 +16,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 70,
+      statements: 80,
     },
   },
 };
diff --git a/src/helpers/cms-helper.spec.js b/src/helpers/cms-helper.spec.js
index e9bd66653..0f03ab604 100644
--- a/src/helpers/cms-helper.spec.js
+++ b/src/helpers/cms-helper.spec.js
@@ -3,50 +3,138 @@ import { dispatch } from "@/store";
 
 jest.mock("@/store", () => ({
   dispatch: jest.fn(),
+  state: {
+    order: { vehicle: { year: "2019", make: "Acura" } }
+  }
 }));
 
-it("cms-content-helper: Should return data from CMS", () => {
-  // Arrange
-  const cmsMockData = {
-    Result: [
-      {
-        Type: "VehicleBannerWidget",
-        Model: {
-          ImageId: "28452dcb-7762-4cc9-ab09-7643d0b89203",
-          GenericVehicleImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-          GenericVehicleImageFilePath:
-            "images/default-source/default-album/blurred-image.jpg",
-        },
-      },
-      {
-        Type: "PageHeaderWidget",
-        Model: {
-          HeaderText: "Select a year to get started",
-        },
-      },
-      {
-        Type: "PageHeaderWidget",
-        Model: {
-          HeaderText: "Select a model",
-        },
-      },
-      {
-        Type: "RadioQuestionWidget",
-        Model: {
-          QuestionText: "What year is your vehicle?",
-        },
-      },
-    ],
-  };
 
-  dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+describe("cms-content-helper.js", () => { 
+  it("Should return data from CMS", () => {
+    // Arrange
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "Select a year to get started",
+          },
+        },
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "Select a model",
+          },
+        },
+        {
+          Type: "RadioQuestionWidget",
+          Model: {
+            QuestionText: "What year is your vehicle?",
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    // Act
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+      expect(response.PageHeaderWidget[0].HeaderText).toEqual(
+        "Select a year to get started"
+      );
+    });
+  });
 
-  // Act
-  fetchCmsContentForPage("testPage").then((response) => {
-    // Assert
-    expect(response.PageHeaderWidget[0].HeaderText).toEqual(
-      "Select a year to get started"
-    );
+});
+
+describe("cms-content-helper.js", () => { 
+  it("Should replace strings for global state", () => {
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "{globalState:order.vehicle.year}",
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+      expect(response.PageHeaderWidget[0].HeaderText).toEqual(
+        "2019"
+      );
+    });
   });
 });
+
+describe("cms-content-helper.js", () => { 
+  it("Should replace strings for global state, and leave others the same", () => {
+
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "{globalState:order.vehicle.year}",
+          },
+        },
+        {
+          Type: "RadioQuestionWidget",
+          Model: {
+            ExampleText: "My widget value!",
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+      expect(response.PageHeaderWidget[0].HeaderText).toEqual("2019");
+      expect(response.RadioQuestionWidget[0].ExampleText).toEqual("My widget value!");
+  
+    });
+  });
+});
+
+describe("cms-content-helper.js", () => { 
+  it("Should replace strings for global state in nested objects", () => {
+
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "{globalState:order.vehicle.year}",
+          },
+        },
+        {
+          Type: "RadioQuestionWidget",
+          Model: {
+            OtherObjectInside: {
+              ExampleText: "{globalState:order.vehicle.make}",
+            }
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+  
+      expect(response.PageHeaderWidget[0].HeaderText).toEqual("2019");
+      expect(response.RadioQuestionWidget[0].OtherObjectInside.ExampleText).toEqual("Acura");
+  
+    });
+  });
+});
+
+test.todo("String cannot be mapped to global state");
\ No newline at end of file

From 69108f2c8e5d8728cee798832791a8def5843d12 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 14:35:29 -0500
Subject: [PATCH 11/23] Creating models page

---
 src/constants/store-mutations.js              |  2 +
 .../model-question/model-question.spec.js     | 82 ++++++++++++++++
 .../model-question/model-question.vue         | 46 +++++++++
 .../vehicle-model/vehicle-model.spec.js       | 93 +++++++++++++++++++
 src/layouts/vehicle-model/vehicle-model.vue   | 77 +++++++++++++++
 src/store/index.js                            |  6 ++
 6 files changed, 306 insertions(+)
 create mode 100644 src/layouts/vehicle-model/model-question/model-question.spec.js
 create mode 100644 src/layouts/vehicle-model/model-question/model-question.vue
 create mode 100644 src/layouts/vehicle-model/vehicle-model.spec.js
 create mode 100644 src/layouts/vehicle-model/vehicle-model.vue

diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index d9292b5f8..c6d8484da 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -1,5 +1,7 @@
 const storeMutations = {
   UPDATE_YEAR: "updateYear",
+  UPDATE_MAKE: "updateMake",
+  UPDATE_MODEL: "updateModel",
 };
 
 export { storeMutations };
diff --git a/src/layouts/vehicle-model/model-question/model-question.spec.js b/src/layouts/vehicle-model/model-question/model-question.spec.js
new file mode 100644
index 000000000..d6259eb72
--- /dev/null
+++ b/src/layouts/vehicle-model/model-question/model-question.spec.js
@@ -0,0 +1,82 @@
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("model-question.vue", () => {
+  test("Selected model is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "Accord" });
+    const modelToSelect = "Civic";
+
+    //Act
+    wrapper.setData({ selectedModel: modelToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Civic"]);
+  });
+});
+
+describe("model-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What model is your vehicle?" });
+
+    //Act
+    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What model is your vehicle?");
+  });
+});
+
+describe("model-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["accord", "civic", "insight"] });
+
+    //Act
+    const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
+    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("accord,civic,insight");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019, make: 'honda'} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(modelQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
new file mode 100644
index 000000000..32b5b72b4
--- /dev/null
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -0,0 +1,46 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="models"
+    groupName="Choose Vehicle Model"
+    v-model="selectedModel"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
+export default {
+  name: "model-question",
+  data() {
+    return {
+      questionText: null,
+      selectedModel: null,
+      models: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: store.getters.vehicle.make});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.models = initialData;
+    }
+  },
+  watch: {
+    selectedModel(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js
new file mode 100644
index 000000000..8ee3885de
--- /dev/null
+++ b/src/layouts/vehicle-model/vehicle-model.spec.js
@@ -0,0 +1,93 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-model.vue", () => {
+  test("Model question component is initized with api data", async (done) => {
+
+    //Arange
+    const radioQuestionCmsContent = { QuestionText: "What model is your vehicle?" };
+    const modelQuestionInitialData = ["accord", "civic", "insight"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      modelQuestionInitialData: modelQuestionInitialData,
+    } );
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, modelQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a model to get started" });
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a model to get started");
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  modelQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+}) {
+  
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      RadioQuestionWidget: [radioQuestionCmsContent],
+      VehicleBannerWidget: [
+        {
+          GenericVehicleImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+        },
+      ],
+      SiteHeaderWidget: [
+        {
+          LogoImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+        },
+      ],
+    },
+    modelQuestionInitialData: modelQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock model question methods
+  modelQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions({ });
+  const wrapper = shallowMount(vehicleModel, mountOptions);
+  const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
+  modelQuestionWrapper.vm.initializeComponent = modelQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
new file mode 100644
index 000000000..5c69104ff
--- /dev/null
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-0">
+    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <modelQuestion v-model="selectedModel" ref="modelQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import pageHeader from "@/ux-components/header/header";
+import siteHeader from "@/common-components/site-header/site-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-model",
+  data() {
+    return {
+      pageHeaderWidgets: {},
+      siteHeaderWidget: {},
+      vehicleBannerWidget: {},
+      selectedModel: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const modelQuestionInitialDataPromise = modelQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "modelQuestionInitialData",
+        promise: modelQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData);
+      });
+    });
+  },
+
+  watch: {
+    selectedModel(model) {
+      this.$store.commit(this.storeMutations.UPDATE_MODEL, model);
+      this.$router.navigate(this.navigationScenarios.SELECTED_MODEL, this.$route);
+    }
+  },
+
+  components: {
+    modelQuestion,
+    pageHeader,
+    siteHeader,
+    vehicleBanner,
+  },
+};
+</script>
diff --git a/src/store/index.js b/src/store/index.js
index 1bf7243b7..5e21f7ce4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -64,6 +64,12 @@ export default createStore({
     updateYear(state, year) {
       state.order.vehicle.year = year;
     },
+    updateMake(state, make) {
+      state.order.vehicle.make = make;
+    },
+    updateModel(state, model) {
+      state.order.vehicle.model = model;
+    },
   },
   getters: {
     vehicle: state => state.order.vehicle

From b7ab69fb38bb7124cbd180b810016f5561fca76f Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Fri, 17 Dec 2021 15:49:51 -0500
Subject: [PATCH 12/23] Handle multiple variables in one string

---
 src/helpers/cms-content-helper.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 1d901d27e..da08d30ba 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -30,23 +30,31 @@ export function fetchCmsContentForPage(fmgPage) {
 // Function to convert a string, into a matching global state item.
 function mapStringToState(str) {
 
-  // Pull the state string out of our dynamic string from the CMS
+  // Pull all matches out of the string.
   const regexExp = new RegExp('{(.*?):(.*?)}', 'g');
   const matches = [...str.matchAll(regexExp)];
-  const stateString = matches.map(m => m[2]).toString();
 
-  // Convert the state string to a state object
-  let storeState = store.state;
+  // Our final string value that will be built from the matches.
+  let stringBuilder = '';
 
-  for (const s of stateString.split('.')) {
-    if (storeState[s] != undefined) {
-      storeState = storeState[s];
-    } else {
-      return false; // If we can't find our state variable, break our loop. Don't break our code.
+  for (const match of matches) {
+
+    // Reset store state for each match.
+    let storeState = store.state;
+
+    for (const s of match[2].split('.')) {
+      if (storeState[s] != undefined) {
+        storeState = storeState[s];
+      } else {
+        return false;
+      }
     }
+
+    // Concatenate the string.
+    stringBuilder = `${stringBuilder} ${storeState}`;
   }
 
-  return storeState;
+  return stringBuilder.trimStart();
 }
 
 // Parent function for processWidgetItemForReplacement. This will loop through the parent

From 4902614467f78df0e611b2a6656b49a8236c2220 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 15:58:18 -0500
Subject: [PATCH 13/23] changing heading names to new names for model page

---
 src/layouts/vehicle-model/vehicle-model.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 5c69104ff..88f72cdf0 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
         <modelQuestion v-model="selectedModel" ref="modelQuestion" />
       </div>
     </div>
@@ -14,8 +14,8 @@
 <script>
 // Components
 import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
-import pageHeader from "@/ux-components/header/header";
-import siteHeader from "@/common-components/site-header/site-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -69,8 +69,8 @@ export default {
 
   components: {
     modelQuestion,
-    pageHeader,
-    siteHeader,
+    funnelHeader,
+    funnelSubHeader,
     vehicleBanner,
   },
 };

From 42b1bbe031e3060bf14cbd4d734ebf1dbc81fe9d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 18:52:21 -0500
Subject: [PATCH 14/23] CSR-222: add back button to vehicle-make layout

---
 src/layouts/vehicle-make/vehicle-make.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index f4e5bc587..be5e925ea 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -4,7 +4,13 @@
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader 
+            :text="pageHeaderWidgets.HeaderText"
+            :hasBackButton="true"
+            backButtonAccessibleText="Change Vehicle Year"
+            :backButtonAction="backButtonAction"
+            class="Header" 
+        />
         <makeQuestion v-model="selectedMake" ref="makeQuestion" />
       </div>
     </div>
@@ -60,6 +66,13 @@ export default {
     });
   },
 
+  methods: {
+    backButtonAction: function () {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
   watch: {
     selectedMake(make) {
       this.$store.commit(this.storeMutations.UPDATE_MAKE, make);

From 9c44e3505825be5d068294f15c6a53c49f889fdf Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 18:56:14 -0500
Subject: [PATCH 15/23] CSR-222: updates to unit tests and helper

---
 src/helpers/unit-test-helper.js               |  2 ++
 src/layouts/vehicle-make/vehicle-make.spec.js | 34 +++++++++++++++++--
 src/layouts/vehicle-year/vehicle-year.spec.js |  7 ++--
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js
index 5b5deb521..268a8e524 100644
--- a/src/helpers/unit-test-helper.js
+++ b/src/helpers/unit-test-helper.js
@@ -1,5 +1,6 @@
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
 
 export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
@@ -21,6 +22,7 @@ export function getMountOptions(mockData) {
   // Mock const files
   mocks.storeActions = storeActions;
   mocks.storeMutations = storeMutations;
+  mocks.navigationScenarios = navigationScenarios;
 
   // Mock $store and $router when accessing this.$store/$router
   mocks.$store = mockData.store;
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 87df24e38..961345820 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -13,7 +13,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 describe("vehicle-make.vue", () => {
   test("Make question component is initized with api data", async (done) => {
 
-    //Arange
+    //Arrange
     const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
     const makeQuestionInitialData = ["honda", "ford", "dodge"];
     const { wrapper, apiPromise } = setupMocks( { 
@@ -35,7 +35,7 @@ describe("vehicle-make.vue", () => {
 describe("vehicle-make.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
-    //Arange
+    //Arrange
     const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a make to get started" });
 
     //Act
@@ -50,10 +50,38 @@ describe("vehicle-make.vue", () => {
   });
 });
 
+describe("vehicle-make.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async (done) => {
+    
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a make to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn()
+        },
+      },
+    });
+    const backButtonActionMethod = jest.spyOn(wrapper.vm, "backButtonAction");
+    
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      done();
+    });
+  });
+});
+
 function setupMocks({
   radioQuestionCmsContent = {},
   makeQuestionInitialData = {},
   pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
 }) {
   
   //Mock api responses
@@ -84,7 +112,7 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
-  const mountOptions = getMountOptions({ });
+  const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleMake, mountOptions);
   const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
   makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index ae3d44a6a..594630ba4 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -13,7 +13,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 describe("vehicle-year.vue", () => {
   test("Year question component is initized with api data", async (done) => {
 
-    //Arange
+    //Arrange
     const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
     const yearQuestionInitialData = ["2023", "2022", "2021"];
     const { wrapper, apiPromise } = setupMocks( { 
@@ -35,7 +35,7 @@ describe("vehicle-year.vue", () => {
 describe("vehicle-year.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
-    //Arange
+    //Arrange
     const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a year to get started" });
 
     //Act
@@ -54,6 +54,7 @@ function setupMocks({
   radioQuestionCmsContent = {},
   yearQuestionInitialData = {},
   pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
 }) {
   
   //Mock api responses
@@ -84,7 +85,7 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
-  const mountOptions = getMountOptions({ });
+  const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleYear, mountOptions);
   const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
   yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;

From 875df38dd910039fbc92b11260ccb5fd21f1283a Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 19:00:16 -0500
Subject: [PATCH 16/23] CSR-222: removed unneeded spy method

---
 src/layouts/vehicle-make/vehicle-make.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 961345820..120f8de4f 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -62,7 +62,6 @@ describe("vehicle-make.vue", () => {
         },
       },
     });
-    const backButtonActionMethod = jest.spyOn(wrapper.vm, "backButtonAction");
     
     //Act
     vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));

From 8de2948bcf429ea54c562646e66ed70a516caddf Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 20 Dec 2021 12:25:16 -0500
Subject: [PATCH 17/23] CSR-222: revised button to be button markup, not link

---
 src/ux-components/button-back/button-back.spec.js |  9 +++++----
 src/ux-components/button-back/button-back.vue     | 15 +++++----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index b753f4376..7f6ff19e6 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -3,19 +3,20 @@ import buttonBack from "./button-back";
 
 describe("back button", () => {
 
-  test("renders a link", () => {
+  test("renders a button", () => {
     // Arrange
+    const myFunction = () => {};
 
     // Act
     const wrapper = shallowMount(buttonBack, {
       propsData: {
-        backButtonUrl: "#",
+        backButtonAction: myFunction,
         backButtonAccessibleText: "something",
       },
     });
     
     // Assert
-    expect(wrapper.find("a").exists()).toBe(true);
+    expect(wrapper.find("button").exists()).toBe(true);
     wrapper.unmount();
   });
 
@@ -32,7 +33,7 @@ describe("back button", () => {
     });
     const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
 
-    await wrapper.find("a").trigger("click");
+    await wrapper.find("button").trigger("click");
     
     // Assert
     expect(handleClickMethod).toHaveBeenCalled();
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 808c1f6cc..922ec29f8 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,7 +1,6 @@
 <template>
-  <a 
-    v-if="backButtonUrl || backButtonAction" 
-    :href="backButtonUrl || '#'" 
+  <button 
+    v-if="backButtonAction" 
     @click="handleClick($event)" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
@@ -10,17 +9,13 @@
       <div class="arrow-left"></div>
       <div class="box"></div>
     </div>
-  </a>
+  </button>
 </template>
 
 <script>
 export default {
   name: "buttonBack",
   props: {
-    backButtonUrl: {
-      type: String,
-      default: "",
-    },
     backButtonAccessibleText: {
       type: String,
       required: true,
@@ -28,12 +23,12 @@ export default {
     backButtonAction: {
       type: Function,
       default: null,
+      required: true,
     }
   },
   methods: {
-    handleClick: function (event) {
+    handleClick: function () {
       if (this.backButtonAction) {
-        event.preventDefault();
         this.backButtonAction();
       }
     },

From d393d12bec58708239dd6fb92bf9c66f20fcbac2 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 20 Dec 2021 14:58:04 -0500
Subject: [PATCH 18/23] CSR-222: include header as link; updates

---
 .../funnel-sub-header.spec.js                 | 15 ++++++++++++++
 .../funnel-sub-header/funnel-sub-header.vue   | 15 +++++++++++++-
 .../button-back/button-back.spec.js           | 20 -------------------
 src/ux-components/button-back/button-back.vue | 11 ++--------
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index e2b5c4d28..417081350 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -14,4 +14,19 @@ describe("FunnelSubHeader.vue", () => {
     expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
     wrapper.unmount();
   });
+  it("Should render the button inside of header if backButtonAction provided", () => {
+    // Act
+    const testFn = () => {}
+    const wrapper = shallowMount(FunnelSubHeader, {
+      propsData: {
+        text: "FunnelSubHeader Content",
+        hasBackButton: true,
+        backButtonAction: testFn,
+      },
+    });
+
+    // Assert
+    expect(wrapper.find("h2").find("button").text()).toContain("FunnelSubHeader Content");
+    wrapper.unmount();
+  });
 });
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 5e3bcc7e3..d05a9ea4d 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
+      <h2 class="text-center fs-5 d-block fw-normal mb-0">
+        <button v-if="hasBackButton && backButtonAction" @click="backButtonAction">
+          {{ text }}
+        </button>
+        <span v-else>
+          {{ text }}
+        </span>
+      </h2>
       <buttonBack
         v-if="hasBackButton"
         :backButtonAccessibleText="backButtonAccessibleText"
@@ -32,6 +39,12 @@ export default {
 <style lang="scss">
   h2 {
     color: $gray-550;
+
+    button {
+      border: none;
+      background: none;
+      color: inherit;
+    }
   }
   .back-button-wrapper {
     margin-left: .25rem;
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index 7f6ff19e6..b8bc3256d 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -20,24 +20,4 @@ describe("back button", () => {
     wrapper.unmount();
   });
 
-  test("should execute handleClick function if it is clicked on", async () => {
-    // Arrange
-    const myFunction = () => {};
-    
-    // Act
-    const wrapper = shallowMount(buttonBack, {
-        propsData: {
-            backButtonAction: myFunction,
-            backButtonAccessibleText: "something",
-        },
-    });
-    const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
-
-    await wrapper.find("button").trigger("click");
-    
-    // Assert
-    expect(handleClickMethod).toHaveBeenCalled();
-    wrapper.unmount();
-  });
-
 });
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 922ec29f8..92145ac87 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,7 +1,7 @@
 <template>
   <button 
     v-if="backButtonAction" 
-    @click="handleClick($event)" 
+    @click="backButtonAction" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
   >
@@ -19,20 +19,13 @@ export default {
     backButtonAccessibleText: {
       type: String,
       required: true,
+      default: "",
     },
     backButtonAction: {
       type: Function,
       default: null,
-      required: true,
     }
   },
-  methods: {
-    handleClick: function () {
-      if (this.backButtonAction) {
-        this.backButtonAction();
-      }
-    },
-  },
 };
 </script>
 

From 44658ec2297eeaf601084a85d5fccb24dea091bb Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 20 Dec 2021 16:44:34 -0500
Subject: [PATCH 19/23] updates for mock page

---
 src/common-components/button-question/button-question.vue     | 3 ++-
 src/common-components/funnel-sub-header/funnel-sub-header.vue | 1 +
 src/layouts/vehicle-make/vehicle-make.spec.js                 | 1 +
 src/layouts/vehicle-model/model-question/model-question.vue   | 2 +-
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index e1fee1e40..d86dcd2ce 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -10,7 +10,8 @@
         <legend class="sr-only">{{groupName}}</legend>
           <listButton v-for="answer in answers" :key="answer"
             :buttonID="answer"
-            @click="chooseAnswer(answer)"
+            @mouseup="chooseAnswer(answer)"
+            @keyup.space="chooseAnswer(answer)"
             loaderColor="blue"
             loaderPosition="right"
             sizeInRem="1.5"
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 5e3bcc7e3..3f1414e56 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -6,6 +6,7 @@
         v-if="hasBackButton"
         :backButtonAccessibleText="backButtonAccessibleText"
         :backButtonAction="backButtonAction"
+        :backButtonUrl="backButtonUrl"
       />
     </div>
   </div>
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 87df24e38..9cae9966f 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -44,6 +44,7 @@ describe("vehicle-make.vue", () => {
     //Assert
     const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
+      console.log(header)
       expect(header.attributes("text")).toEqual("Select a make to get started");
       done();
     });
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 32b5b72b4..95b72909b 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -30,7 +30,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: store.getters.vehicle.make});
+      return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make)});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;

From 75ae56d18bdf12470bd5717ddd287a10658462cf Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 20 Dec 2021 16:52:25 -0500
Subject: [PATCH 20/23] Adding back button to model page

---
 src/layouts/vehicle-model/vehicle-model.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 88f72cdf0..1d86c99b4 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -4,7 +4,13 @@
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader 
+          :text="pageHeaderWidgets.HeaderText"
+          :hasBackButton="true"
+          backButtonAccessibleText="Change Vehicle Make"
+          :backButtonAction="backButtonAction"
+          class="Header"
+        />
         <modelQuestion v-model="selectedModel" ref="modelQuestion" />
       </div>
     </div>
@@ -60,6 +66,13 @@ export default {
     });
   },
 
+  methods: {
+    backButtonAction: function () {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
   watch: {
     selectedModel(model) {
       this.$store.commit(this.storeMutations.UPDATE_MODEL, model);

From ecb3f189cfda1573180064080bbbf714e15e1e9b Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 21 Dec 2021 10:53:27 -0500
Subject: [PATCH 21/23] Creating vehicle styles

---
 src/constants/store-mutations.js              |  1 +
 .../style-question/style-question.spec.js     |  0
 .../style-question/style-question.vue         | 46 ++++++++++
 .../vehicle-style/vehicle-style.spec.js       |  0
 src/layouts/vehicle-style/vehicle-style.vue   | 90 +++++++++++++++++++
 .../router-constants/navigation-scenarios.js  |  1 +
 src/router/router-constants/routing-table.js  | 13 +++
 src/store/index.js                            |  3 +
 8 files changed, 154 insertions(+)
 create mode 100644 src/layouts/vehicle-style/style-question/style-question.spec.js
 create mode 100644 src/layouts/vehicle-style/style-question/style-question.vue
 create mode 100644 src/layouts/vehicle-style/vehicle-style.spec.js
 create mode 100644 src/layouts/vehicle-style/vehicle-style.vue

diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index c6d8484da..d2ccd28f4 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -2,6 +2,7 @@ const storeMutations = {
   UPDATE_YEAR: "updateYear",
   UPDATE_MAKE: "updateMake",
   UPDATE_MODEL: "updateModel",
+  UPDATE_STYLE: "updateStyle",
 };
 
 export { storeMutations };
diff --git a/src/layouts/vehicle-style/style-question/style-question.spec.js b/src/layouts/vehicle-style/style-question/style-question.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
new file mode 100644
index 000000000..17a008473
--- /dev/null
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -0,0 +1,46 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="styles"
+    groupName="Choose Vehicle Style"
+    v-model="selectedStyle"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
+export default {
+  name: "style-question",
+  data() {
+    return {
+      questionText: null,
+      selectedStyle: null,
+      styles: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return store.dispatch(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make), model: encodeURIComponent(store.getters.vehicle.model)});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.styles = initialData;
+    }
+  },
+  watch: {
+    selectedStyle(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
new file mode 100644
index 000000000..6b5d4bf86
--- /dev/null
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-0">
+    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <funnelSubHeader 
+          :text="pageHeaderWidgets.HeaderText"
+          :hasBackButton="true"
+          backButtonAccessibleText="Change Vehicle Model"
+          :backButtonAction="backButtonAction"
+          class="Header"
+        />
+        <styleQuestion v-model="selectedStyle" ref="styleQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-style",
+  data() {
+    return {
+      pageHeaderWidgets: {},
+      siteHeaderWidget: {},
+      vehicleBannerWidget: {},
+      selectedStyle: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "styleQuestionInitialData",
+        promise: styleQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData);
+      });
+    });
+  },
+
+  methods: {
+    backButtonAction: function () {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
+  watch: {
+    selectedStyle(style) {
+      this.$store.commit(this.storeMutations.UPDATE_STYLE, style);
+      this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route);
+    }
+  },
+
+  components: {
+    styleQuestion,
+    funnelHeader,
+    funnelSubHeader,
+    vehicleBanner,
+  },
+};
+</script>
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 65947744e..48e36996b 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -2,6 +2,7 @@ const navigationScenarios = {
   SELECTED_YEAR: "SELECTED_YEAR",
   SELECTED_MODEL: "SELECTED_MODEL",
   SELECTED_MAKE: "SELECTED_MAKE",
+  SELECTED_STYLE: "SELECTED_STYLE",
   CLICKED_BACK: "CLICKED_BACK",
 };
 
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 34f4c5579..21dc6ca65 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -37,6 +37,19 @@ const routingTable = [
       }
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_STYLE,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_STYLE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+      }
+    ],
+  },
 ];
 
 export { routingTable };
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 5e21f7ce4..daf34e38c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -70,6 +70,9 @@ export default createStore({
     updateModel(state, model) {
       state.order.vehicle.model = model;
     },
+    updateStyle(state, style) {
+      state.order.vehicle.style = style;
+    },
   },
   getters: {
     vehicle: state => state.order.vehicle

From 9af6a0320ed7a5a541462aeef261be1700588aa8 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 21 Dec 2021 11:54:22 -0500
Subject: [PATCH 22/23] Unit tests for vehicle styles page

---
 src/layouts/vehicle-make/vehicle-make.spec.js |   1 -
 .../style-question/style-question.spec.js     |  82 ++++++++++++
 .../vehicle-style/vehicle-style.spec.js       | 120 ++++++++++++++++++
 src/store/store.spec.js                       |  97 ++++++++++++++
 4 files changed, 299 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index cc2325dfc..120f8de4f 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -44,7 +44,6 @@ describe("vehicle-make.vue", () => {
     //Assert
     const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
-      console.log(header)
       expect(header.attributes("text")).toEqual("Select a make to get started");
       done();
     });
diff --git a/src/layouts/vehicle-style/style-question/style-question.spec.js b/src/layouts/vehicle-style/style-question/style-question.spec.js
index e69de29bb..f03ce5e96 100644
--- a/src/layouts/vehicle-style/style-question/style-question.spec.js
+++ b/src/layouts/vehicle-style/style-question/style-question.spec.js
@@ -0,0 +1,82 @@
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("style-question.vue", () => {
+  test("Selected style is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "2 Door" });
+    const styleToSelect = "4 Door";
+
+    //Act
+    wrapper.setData({ selectedStyle: styleToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["4 Door"]);
+  });
+});
+
+describe("style-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What style is your vehicle?" });
+
+    //Act
+    styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What style is your vehicle?");
+  });
+});
+
+describe("style-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2 Door", "4 Door"] });
+
+    //Act
+    const initialData = styleQuestion.methods.loadInitialData.call(wrapper.vm);
+    styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("2 Door,4 Door");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc'} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(styleQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index e69de29bb..90dd6e926 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -0,0 +1,120 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-style.vue", () => {
+  test("Style question component is initized with api data", async (done) => {
+
+    //Arrange
+    const radioQuestionCmsContent = { QuestionText: "What style is your vehicle?" };
+    const styleQuestionInitialData = ["2 Door", "4 Door"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      styleQuestionInitialData: styleQuestionInitialData,
+    } );
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, styleQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a style to get started" });
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a style to get started");
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async (done) => {
+    
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a style to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn()
+        },
+      },
+    });
+    
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  styleQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
+}) {
+  
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      RadioQuestionWidget: [radioQuestionCmsContent],
+      VehicleBannerWidget: [
+        {
+          GenericVehicleImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+        },
+      ],
+      SiteHeaderWidget: [
+        {
+          LogoImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+        },
+      ],
+    },
+    styleQuestionInitialData: styleQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock style question methods
+  styleQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  const wrapper = shallowMount(vehicleStyle, mountOptions);
+  const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
+  styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}
\ No newline at end of file
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 76acc0dbf..fcfca4576 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -118,6 +118,73 @@ describe("Actions", () => {
     // Assert
     expect(pageData).toBe("Page Info Data");
   });
+
+  it("Should return data from url retrieved", async () => {
+    // Arrange
+    let returnData = [];
+
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "2018 Honda Civic",
+        },
+      });
+    });
+    await store
+      .dispatch("lookupVehicleByYmms", { year: "2018", make:  "Honda", model: "Civic", style: "2 Door"})
+      .then((response) => {
+        returnData = response.data.Result;
+      });
+
+    // Assert
+    expect(returnData).toBe("2018 Honda Civic");
+  });
+
+  it("Should return vehicle data from url retrieved", async () => {
+    // Arrange
+    let returnData = [];
+
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "2021 Honda Civic",
+        },
+      });
+    });
+    await store
+      .dispatch("lookupVehicleByVin", { vin: "12345678"})
+      .then((response) => {
+        returnData = response.data.Result;
+      });
+
+    // Assert
+    expect(returnData).toBe("2021 Honda Civic");
+  });
+
+  it("Should return vehicle image data from url retrieved", async () => {
+    // Arrange
+    let returnData = [];
+
+    // Act
+    globalMethods.callMockHttpClient = jest.fn();
+    globalMethods.callMockHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "2008_honda_civic.jpg",
+        },
+      });
+    });
+    await store
+      .dispatch("getEvoxImage", { relativeUrl: "evox_image.com"})
+      .then((response) => {
+        returnData = response.data.Result;
+      });
+
+    // Assert
+    expect(returnData).toBe("2008_honda_civic.jpg");
+  });
 });
 
 describe("Mutations", () => {
@@ -128,4 +195,34 @@ describe("Mutations", () => {
     // Assert
     expect(store.state.order.vehicle.year).toBe(2020);
   });
+
+  it("Should update the make property in the store", () => {
+    // Act
+    store.commit("updateMake", "Honda");
+
+    // Assert
+    expect(store.state.order.vehicle.make).toBe("Honda");
+  });
+
+  it("Should update the model property in the store", () => {
+    // Act
+    store.commit("updateModel", "Civic");
+
+    // Assert
+    expect(store.state.order.vehicle.model).toBe("Civic");
+  });
+
+  it("Should update the style property in the store", () => {
+    // Act
+    store.commit("updateStyle", "2 Door");
+
+    // Assert
+    expect(store.state.order.vehicle.style).toBe("2 Door");
+  });
+});
+
+describe("Getters", () => {
+  const vehicle = store.getters.vehicle;
+
+  expect(typeof vehicle).toBe('object');
 });

From b1e81a608ee138aabf989e4487d5a03a869f5f90 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 21 Dec 2021 12:09:11 -0500
Subject: [PATCH 23/23] Changing jest.config coverage to 85

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

diff --git a/jest.config.js b/jest.config.js
index fd7713966..720237d10 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,7 +16,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 80,
+      statements: 85,
     },
   },
 };