Merge branch 'develop' into feature/CSR-76

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,
     },
   },
 };

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",
       },

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: "",
     },
   },
 };

src/common-components/funnel-sub-header/funnel-sub-header.spec.js

@@ -0,0 +1,17 @@
+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");
+    wrapper.unmount();
+  });
+});

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -0,0 +1,39 @@
+<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"
+        :backButtonAccessibleText="backButtonAccessibleText"
+        :backButtonAction="backButtonAction"
+      />
+    </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,
+    backButtonAction: Function,
+  },
+  components: {
+    buttonBack,
+  }
+};
+</script>
+
+<style lang="scss">
+  h2 {
+    color: $gray-550;
+  }
+  .back-button-wrapper {
+    margin-left: .25rem;
+  }
+</style>

src/common-components/vehicle-banner/vehicle-banner.vue

@@ -15,6 +15,7 @@ export default {
     vehicleImageSrc: {
       type: String,
       required: true,
+      default: "",
     },
   },
 };

src/helpers/cms-content-helper.js

@@ -9,17 +9,84 @@ 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 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
+  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;
+}
+
+// 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 = {
+    Type: widgetType,
+    Model: {}
+  };
+
+  Object.keys(widgetModel).forEach(key => {
+
+    let modelWithReplacements = processWidgetItemForReplacement(widgetModel, key);
+
+    objWithReplacements.Model[key] = modelWithReplacements;
+  });
+
+  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') {
+    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];
 }

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

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">
@@ -566,7 +569,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>
@@ -594,7 +597,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",
@@ -607,7 +610,7 @@ export default {
     alert,
     vehicleBanner,
     listButtonHorizontal,
-    siteHeader,
+    funnelHeader,
   },
   data() {
     return {

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>

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,10 +1,13 @@
 <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" 
+        />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
     </div>
@@ -14,14 +17,12 @@
 <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";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
 export default {
   name: "vehicle-year",
@@ -73,9 +74,9 @@ export default {
 
   components: {
     yearQuestion,
-    pageHeader,
-    siteHeader,
+    funnelHeader,
     vehicleBanner,
+    funnelSubHeader,
   },
 };
 </script>

src/ux-components/button-back/button-back.spec.js

@@ -1 +1,42 @@
-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();
+  });
+
+  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();
+  });
+
+});

src/ux-components/button-back/button-back.vue

@@ -1,15 +1,43 @@
 <template>
-  <button class="back-button-wrapper d-flex p-0">
+  <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>
     </div>
-  </button>
+  </a>
 </template>
 
 <script>
 export default {
-  name: "buttonBack"
+  name: "buttonBack",
+  props: {
+    backButtonUrl: {
+      type: String,
+      default: "",
+    },
+    backButtonAccessibleText: {
+      type: String,
+      required: true,
+    },
+    backButtonAction: {
+      type: Function,
+      default: null,
+    }
+  },
+  methods: {
+    handleClick: function (event) {
+      if (this.backButtonAction) {
+        event.preventDefault();
+        this.backButtonAction();
+      }
+    },
+  },
 };
 </script>
 
@@ -17,6 +45,9 @@ export default {
 .back-button-wrapper {
   border: none;
   background: transparent;
+  text-decoration: none;
+  border-bottom: none;
+
   .button-back {
     display: inline-flex;
     position: relative;

src/ux-components/header/header.spec.js

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

src/ux-components/header/header.vue

@@ -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>