From 546b09a5340a22b0bfe1b7da77c1e624e8387381 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Thu, 20 Oct 2022 17:09:29 -0400
Subject: [PATCH 1/3] Added header vue and mapped to cms

---
 .../site-header/site-header.vue               | 33 +++++++++++++++++++
 src/global-methods.js                         |  2 +-
 src/layouts/vehicle-year/vehicle-year.vue     | 10 +++---
 3 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/common-components/site-header/site-header.vue

diff --git a/src/common-components/site-header/site-header.vue b/src/common-components/site-header/site-header.vue
new file mode 100644
index 00000000..7f1ccb84
--- /dev/null
+++ b/src/common-components/site-header/site-header.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="headerContainer">
+        <img class="siteHeader" :src="url" :alt="altText" />
+    </div>
+</template>
+
+<script>
+    
+    export default({
+        name: "siteHeader",
+        computed: {
+            url()
+            {
+                return this.getCmsContent("Header", "LogoImageURL")
+            },
+            altText()
+            {
+                return this.getCmsContent("Header", "AltText")
+            }
+        }
+    })
+</script>
+
+<style lang="scss" scoped>
+
+   .headerContainer{
+        width: 100%;
+        margin: 16px auto;
+        text-align: center;
+
+   }
+    
+</style>
\ No newline at end of file
diff --git a/src/global-methods.js b/src/global-methods.js
index 85338ba0..5022ad23 100644
--- a/src/global-methods.js
+++ b/src/global-methods.js
@@ -5,7 +5,7 @@ export default {
   callHttpClient({ method, endpoint, payload}) {
     return new Promise((resolve, reject) => {
       const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
-      const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "SelfService" });
+      const payloadAndAnalyticsData = payload //Object.assign({}, payload, { AppName: "SelfService" });
 
       axios({ method: method, url: cfDistroUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: {}})
         .then((response) => {
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 630d7ddd..4ef2a7bd 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,6 +1,7 @@
 <template>
 <div>
     <div class="fade-on-route-transition">
+        <siteHeader />
         <navButton type="button" text="back" :scenario="this.navigationScenarios.CLICKED_BACK"></navButton>
         <p>Vehicle Year Placeholder</p>
         <input type="text" v-model="year"/>
@@ -11,13 +12,14 @@
 </template>
 
 <script>
-    import navButton from '@/common-components/nav-button/nav-button.vue';
+    import navButton from '@/common-components/nav-button/nav-button';
+    import siteHeader from '@/common-components/site-header/site-header';
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
     import { settleAllPromises } from "@/helpers/layout-helper";
 
     export default {
         name: 'vehicle-year',
-        components: { navButton },
+        components: { navButton, siteHeader },
         async beforeRouteEnter(to, from, next) 
         {
             // Call APIs
@@ -49,8 +51,8 @@
         {
             returnVehicleYear()
             {
-               return this.mainStore.order.vehicle.year;
-            }
+                return this.mainStore.order.vehicle.year;
+            }   
         }
     }
 </script>
\ No newline at end of file

From 34daf91e40e635d2ed040d2e10ae8eb3079163ef Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Thu, 20 Oct 2022 17:11:26 -0400
Subject: [PATCH 2/3] Undid change

---
 src/global-methods.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/global-methods.js b/src/global-methods.js
index 5022ad23..85338ba0 100644
--- a/src/global-methods.js
+++ b/src/global-methods.js
@@ -5,7 +5,7 @@ export default {
   callHttpClient({ method, endpoint, payload}) {
     return new Promise((resolve, reject) => {
       const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
-      const payloadAndAnalyticsData = payload //Object.assign({}, payload, { AppName: "SelfService" });
+      const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "SelfService" });
 
       axios({ method: method, url: cfDistroUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: {}})
         .then((response) => {

From b6071e953c2fb15a4bdc0d4e8716cb8b5ba35cd1 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Fri, 21 Oct 2022 15:06:26 -0400
Subject: [PATCH 3/3] completed header component

---
 .../site-header/site-header.spec.js           | 25 ++++++++++++++
 .../site-header/site-header.vue               | 15 +++++----
 src/layouts/vehicle-year/vehicle-year.vue     |  2 +-
 src/layouts/welcome-page/welcome-page.vue     | 33 ++++++++++++++++---
 4 files changed, 63 insertions(+), 12 deletions(-)
 create mode 100644 src/common-components/site-header/site-header.spec.js

diff --git a/src/common-components/site-header/site-header.spec.js b/src/common-components/site-header/site-header.spec.js
new file mode 100644
index 00000000..ea255efb
--- /dev/null
+++ b/src/common-components/site-header/site-header.spec.js
@@ -0,0 +1,25 @@
+import siteHeader from "@/common-components/site-header/site-header";
+import { shallowMount } from "@vue/test-utils";
+
+describe("site-header", () => {
+
+    test("renders the logo image", () => {
+        const wrapper = shallowMount(siteHeader, {
+          setProps: {
+            cmsWidgetName: "header",
+          },
+          mixins: [mockMixin]
+        });
+    
+        expect(wrapper.find("img")).toBeTruthy();
+        wrapper.unmount();
+      });
+});
+    
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn()
+    }
+}
+
+
diff --git a/src/common-components/site-header/site-header.vue b/src/common-components/site-header/site-header.vue
index 7f1ccb84..6518f870 100644
--- a/src/common-components/site-header/site-header.vue
+++ b/src/common-components/site-header/site-header.vue
@@ -1,21 +1,23 @@
 <template>
     <div class="headerContainer">
-        <img class="siteHeader" :src="url" :alt="altText" />
+        <img id="siteHeaderImage" :src="imageSrc" :alt="altText" />
     </div>
 </template>
 
 <script>
-    
     export default({
         name: "siteHeader",
+        props: {
+            cmsWidgetName: String,
+        },
         computed: {
-            url()
+            imageSrc()
             {
-                return this.getCmsContent("Header", "LogoImageURL")
+                return this.getCmsContent(this.cmsWidgetName, "LogoImageURL")
             },
             altText()
             {
-                return this.getCmsContent("Header", "AltText")
+                return this.getCmsContent(this.cmsWidgetName, "AltText")
             }
         }
     })
@@ -26,8 +28,7 @@
    .headerContainer{
         width: 100%;
         margin: 16px auto;
-        text-align: center;
-
+        text-align: center
    }
     
 </style>
\ No newline at end of file
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 4ef2a7bd..ad42716c 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
     <div class="fade-on-route-transition">
-        <siteHeader />
+        <siteHeader cmsWidgetName="Header"/>
         <navButton type="button" text="back" :scenario="this.navigationScenarios.CLICKED_BACK"></navButton>
         <p>Vehicle Year Placeholder</p>
         <input type="text" v-model="year"/>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index b97c58bc..98794a76 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,6 +1,7 @@
 <template>
 <div>
     <div class="fade-on-route-transition">
+        <siteHeader cmsWidgetName="Header"/>
         <p>Welcome Page Placeholder</p>
         <br />
         <navButton type="button" text="Next" :scenario="this.navigationScenarios.CLICKED_FORWARD"></navButton>
@@ -10,12 +11,36 @@
 </template>
 
 <script>
-    import navButton from "@/common-components/nav-button/nav-button.vue";
+    import navButton from "@/common-components/nav-button/nav-button";
+    import siteHeader from '@/common-components/site-header/site-header';
+    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+    import { settleAllPromises } from "@/helpers/layout-helper";
+
 
     export default {
-    name: "welcome-page",
-    components: { navButton },
-}
+        name: "welcome-page",
+        components: { navButton, siteHeader },
+        async beforeRouteEnter(to, from, next) 
+            {
+                // Call APIs
+                const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+                // Settle promises and get results
+                const promiseResultMap = [
+                    {
+                        resultKey: "cmsContent",
+                        promise: cmsContentPromise,
+                    },
+                ];
+                
+                //use resultMap to populate layout content.
+                let resultMap = await settleAllPromises(promiseResultMap);
+
+                next((vm) => {
+                    vm.setCmsContent(resultMap.cmsContent);
+                });
+            },
+    }
 </script>
 
 <style scoped>